Switch to oklch

flathub-infra · Jan 31, 2025 · ebe4902 · ebe4902
1 parent 8fa318a
commit ebe4902
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 88 deletions.
diff --git a/frontend/pages/statistics.tsx b/frontend/pages/statistics.tsx
@@ -102,9 +102,9 @@ const DownloadsPerCountry = ({ stats }: { stats: StatsResult }) => {
       <div className="flex flex-col gap-5">
         <div className={`flex justify-center ${styles.map}`}>
           <WorldMap
-            color="hsl(var(--color-primary))"
-            backgroundColor="hsl(var(--bg-color-secondary))"
-            borderColor="hsl(var(--text-primary))"
+            color="oklch(var(--color-primary))"
+            backgroundColor="oklch(var(--bg-color-secondary))"
+            borderColor="oklch(var(--text-primary))"
             size="responsive"
             data={country_data}
             tooltipTextFunction={getLocalizedText}
@@ -226,7 +226,7 @@ const FailedByGuideline = () => {
 
   const chartConfig = {
     downloads: {
-      color: "hsl(var(--flathub-celestial-blue))",
+      color: "oklch(var(--flathub-celestial-blue))",
     },
   } satisfies ChartConfig
 
@@ -279,7 +279,7 @@ const CategoryDistribution = ({ stats }: { stats: StatsResult }) => {
 
   const chartConfig = {
     category: {
-      color: "hsl(var(--flathub-celestial-blue))",
+      color: "oklch(var(--flathub-celestial-blue))",
     },
   } satisfies ChartConfig
 
@@ -400,8 +400,8 @@ const RuntimeChart = ({ runtimes }: { runtimes: Record<string, number> }) => {
                   onMouseLeave={() => setHover(null)}
                   fill={
                     hover === props.index
-                      ? "hsl(211, 65%, 47%)"
-                      : "hsl(211, 65%, 57%"
+                      ? "oklch(55.86% 0.1446 253.19)"
+                      : "oklch(63.85% 0.1314 251.94)"
                   }
                 />
               )}

diff --git a/frontend/src/chartComponents.tsx b/frontend/src/chartComponents.tsx
@@ -3,14 +3,14 @@ import { useTheme } from "next-themes"
 
 export function axisStroke(resolvedTheme: string): string {
   return resolvedTheme === "light"
-    ? "rgba(0, 0, 0, 0.8)"
-    : "rgba(255, 255, 255, 0.8)"
+    ? "oklch(0% 0 0 0.8)"
+    : "oklch(100%, 0, 0, 0.8)"
 }
 
 export function primaryStroke(resolvedTheme: string): string {
   return resolvedTheme === "light"
-    ? "hsl(210.6, 65.3%, 57.1%)"
-    : "hsl(210.6, 65.3%, calc(57.1% - 15%))"
+    ? "oklch(51.85% 0.1318 252.64)"
+    : "oklch(64.15% 0.1308 251.37)"
 }
 
 export const RotatedAxisTick = (props) => {
@@ -26,8 +26,8 @@ export const RotatedAxisTick = (props) => {
         textAnchor="end"
         fill={
           resolvedTheme === "light"
-            ? "rgba(0, 0, 0, 0.8)"
-            : "rgba(255, 255, 255, 0.8)"
+            ? "oklch(0% 0 0 0.8)"
+            : "oklch(100%, 0, 0, 0.8)"
         }
         transform="rotate(-35)"
       >

diff --git a/frontend/src/components/application/AppVendingControls/VendingSharesPreview.tsx b/frontend/src/components/application/AppVendingControls/VendingSharesPreview.tsx
@@ -74,14 +74,14 @@ const VendingSharesPreview: FunctionComponent<Props> = ({
     data[0][name] = split / 100
   }
 
-  const lightness = resolvedTheme === "light" ? "55.1%" : "calc(55.1% - 15%)"
+  const lightness = resolvedTheme === "light" ? "70%" : "calc(70% - 20%)"
 
   const chartConfig = Object.values(labels).reduce(
     (red, label, i) => ({
       ...red,
       [label]: {
         label: t(translatePlatformName(label)),
-        color: `hsl(${210.6 - i * 35}, 65.3%, ${lightness})`,
+        color: `oklch(${lightness} 0.2 ${251.57 - i * 50})`,
       },
     }),
     {},

diff --git a/frontend/src/components/user/Avatar.tsx b/frontend/src/components/user/Avatar.tsx
@@ -9,8 +9,8 @@ interface Props {
   userName: string
 }
 
-const celestialBlue = "#4a90d9"
-const variationTone = "#70dee6"
+const celestialBlue = "oklch(63.85% 0.1314 251.94)"
+const variationTone = "oklch(83.88% 0.1014 201.73)"
 
 const Avatar: FunctionComponent<Props> = (props: Props) => {
   const { t } = useTranslation()

diff --git a/frontend/styles/main.scss b/frontend/styles/main.scss
@@ -59,46 +59,46 @@
 
 :root {
   // colors used via tailwind
-  --flathub-celestial-blue: 211 65% 57%;
-  --flathub-celestial-blue-dark: 211 65% 40%;
-  --flathub-electric-red: 0 100% 44%;
+  --flathub-celestial-blue: 63.85% 0.1314 251.94;
+  --flathub-celestial-blue-dark: 49.79% 0.127 253.08;
+  --flathub-electric-red: 57.01% 0.2339 29.23;
 
-  --flathub-status-green: 153 55% 43%;
-  --flathub-status-green-dark: 133 75% 75%;
+  --flathub-status-green: 65.83% 0.1334 159.27;
+  --flathub-status-green-dark: 87.4% 0.1381 149.75;
 
-  --flathub-status-yellow: 42 89% 37%;
-  --flathub-status-yellow-dark: 52 92% 67%;
+  --flathub-status-yellow: 63.34% 0.1288 80.24;
+  --flathub-status-yellow-dark: 91.01% 0.1531 100.56;
 
-  --flathub-status-orange: 21 100% 39%;
-  --flathub-status-orange-dark: 21 100% 45%;
+  --flathub-status-orange: 56.67% 0.176 40.5;
+  --flathub-status-orange-dark: 62.94% 0.197 40.11;
 
-  --flathub-status-red: 356 75% 43%;
-  --flathub-status-red-dark: 0 65% 51%;
+  --flathub-status-red: 51.91% 0.196 25.07;
+  --flathub-status-red-dark: 57.01% 0.1989 26.25;
 
   // grays
-  --flathub-white: 0 0% 100%;
+  --flathub-white: 100% 0 106.37;
 
-  --flathub-lotion: 0 0% 98%;
+  --flathub-lotion: 98.48% 0 0;
 
-  --flathub-gainsborow: 45 6% 86%;
+  --flathub-gainsborow: 89.56% 0.0045 91.45;
 
-  --flathub-gray-x11: 45 3% 75%;
+  --flathub-gray-x11: 80.84% 0.0041 91.45;
 
-  --flathub-spanish-gray: 45 2% 60%;
+  --flathub-spanish-gray: 68.62% 0.0046 91.47;
 
-  --flathub-sonic-silver: 252 2% 47%;
+  --flathub-sonic-silver: 56.64% 0.0074 295.34;
 
-  --flathub-granite-gray: 277 4% 38%;
+  --flathub-granite-gray: 48.56% 0.0136 312.8;
 
-  --flathub-arsenic: 261 11% 25%;
+  --flathub-arsenic: 35.42% 0.0248 301.11;
 
-  --flathub-dark-gunmetal: 257 23% 16%;
+  --flathub-dark-gunmetal: 25.61% 0.0354 296.84;
 
-  --flathub-black: 0 0% 0%;
+  --flathub-black: 0% 0% 0;
 
   // reds
-  --flathub-vivid-crimson: 345 100% 40%;
-  --flathub-dark-candy-apple-red: 354 100% 33%;
+  --flathub-vivid-crimson: 53.46% 0.21476703296252692 20.33110990321919;
+  --flathub-dark-candy-apple-red: 46.09% 0.1876 26.75;
 
   --base-border-radius: 12px;
   --button-border-radius: 8px;
@@ -127,11 +127,11 @@
   --secondary: var(--flathub-gainsborow);
   --secondary-foreground: var(--flathub-dark-gunmetal);
 
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
+  --muted: 97.03% 0 0;
+  --muted-foreground: 55.55% 0 0;
 
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
+  --accent: 97.03% 0 0;
+  --accent-foreground: 20.44% 0 0;
 
   --destructive: var(--flathub-dark-candy-apple-red);
   --destructive-foreground: var(--flathub-lotion);
@@ -161,7 +161,7 @@
   --secondary-foreground: var(--flathub-lotion);
 
   --muted: var(--flathub-arsenic);
-  --muted-foreground: 0 0% 63.9%;
+  --muted-foreground: 71.53% 0 0;
 
   --accent: var(--flathub-granite-gray);
   --accent-foreground: var(--flathub-lotion);
@@ -171,7 +171,7 @@
 
   --border: var(--flathub-granite-gray);
   --input: var(--flathub-spanish-gray);
-  --ring: 0 0% 83.1%;
+  --ring: 86.97% 0 0;
 
   // Override react-tostify variable here for easy theme adherence
   --toastify-color-light: var(--toastify-color-dark);

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -38,80 +38,82 @@ export default {
     extend: {
       colors: {
         "flathub-celestial-blue":
-          "hsl(var(--flathub-celestial-blue) / <alpha-value>)",
+          "oklch(var(--flathub-celestial-blue) / <alpha-value>)",
         "flathub-celestial-blue-dark":
-          "hsl(var(--flathub-celestial-blue-dark) / <alpha-value>)",
+          "oklch(var(--flathub-celestial-blue-dark) / <alpha-value>)",
         "flathub-electric-red":
-          "hsl(var(--flathub-electric-red) / <alpha-value>)",
+          "oklch(var(--flathub-electric-red) / <alpha-value>)",
 
         "flathub-status-green":
-          "hsl(var(--flathub-status-green) / <alpha-value>)",
+          "oklch(var(--flathub-status-green) / <alpha-value>)",
         "flathub-status-green-dark":
-          "hsl(var(--flathub-status-green-dark) / <alpha-value>)",
+          "oklch(var(--flathub-status-green-dark) / <alpha-value>)",
         "flathub-status-yellow":
-          "hsl(var(--flathub-status-yellow) / <alpha-value>)",
+          "oklch(var(--flathub-status-yellow) / <alpha-value>)",
         "flathub-status-yellow-dark":
-          "hsl(var(--flathub-status-yellow-dark) / <alpha-value>)",
+          "oklch(var(--flathub-status-yellow-dark) / <alpha-value>)",
         "flathub-status-orange":
-          "hsl(var(--flathub-status-orange) / <alpha-value>)",
+          "oklch(var(--flathub-status-orange) / <alpha-value>)",
         "flathub-status-orange-dark":
-          "hsl(var(--flathub-status-orange-dark) / <alpha-value>)",
-        "flathub-status-red": "hsl(var(--flathub-status-red) / <alpha-value>)",
+          "oklch(var(--flathub-status-orange-dark) / <alpha-value>)",
+        "flathub-status-red":
+          "oklch(var(--flathub-status-red) / <alpha-value>)",
         "flathub-status-red-dark":
-          "hsl(var(--flathub-status-red-dark) / <alpha-value>)",
+          "oklch(var(--flathub-status-red-dark) / <alpha-value>)",
 
-        "flathub-white": "hsl(var(--flathub-white) / <alpha-value>)",
-        "flathub-lotion": "hsl(var(--flathub-lotion) / <alpha-value>)",
-        "flathub-gainsborow": "hsl(var(--flathub-gainsborow) / <alpha-value>)",
-        "flathub-gray-x11": "hsl(var(--flathub-gray-x11) / <alpha-value>)",
+        "flathub-white": "oklch(var(--flathub-white) / <alpha-value>)",
+        "flathub-lotion": "oklch(var(--flathub-lotion) / <alpha-value>)",
+        "flathub-gainsborow":
+          "oklch(var(--flathub-gainsborow) / <alpha-value>)",
+        "flathub-gray-x11": "oklch(var(--flathub-gray-x11) / <alpha-value>)",
         "flathub-spanish-gray":
-          "hsl(var(--flathub-spanish-gray) / <alpha-value>)",
+          "oklch(var(--flathub-spanish-gray) / <alpha-value>)",
         "flathub-sonic-silver":
-          "hsl(var(--flathub-sonic-silver) / <alpha-value>)",
+          "oklch(var(--flathub-sonic-silver) / <alpha-value>)",
         "flathub-granite-gray":
-          "hsl(var(--flathub-granite-gray) / <alpha-value>)",
-        "flathub-arsenic": "hsl(var(--flathub-arsenic) / <alpha-value>)",
+          "oklch(var(--flathub-granite-gray) / <alpha-value>)",
+        "flathub-arsenic": "oklch(var(--flathub-arsenic) / <alpha-value>)",
         "flathub-dark-gunmetal":
-          "hsl(var(--flathub-dark-gunmetal) / <alpha-value>)",
-        "flathub-black": "hsl(var(--flathub-black) / <alpha-value>)",
+          "oklch(var(--flathub-dark-gunmetal) / <alpha-value>)",
+        "flathub-black": "oklch(var(--flathub-black) / <alpha-value>)",
 
         "flathub-vivid-crimson":
-          "hsl(var(--flathub-vivid-crimson) / <alpha-value>)",
+          "oklch(var(--flathub-vivid-crimson) / <alpha-value>)",
         "flathub-dark-candy-apple-red":
-          "hsl(var(--flathub-dark-candy-apple-red) / <alpha-value>)",
+          "oklch(var(--flathub-dark-candy-apple-red) / <alpha-value>)",
 
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: "oklch(var(--border))",
+        input: "oklch(var(--input))",
+        ring: "oklch(var(--ring))",
+        background: "oklch(var(--background))",
+        foreground: "oklch(var(--foreground))",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: "oklch(var(--primary))",
+          foreground: "oklch(var(--primary-foreground))",
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: "oklch(var(--secondary))",
+          foreground: "oklch(var(--secondary-foreground))",
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: "oklch(var(--destructive))",
+          foreground: "oklch(var(--destructive-foreground))",
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: "oklch(var(--muted))",
+          foreground: "oklch(var(--muted-foreground))",
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: "oklch(var(--accent))",
+          foreground: "oklch(var(--accent-foreground))",
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: "oklch(var(--popover))",
+          foreground: "oklch(var(--popover-foreground))",
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: "oklch(var(--card))",
+          foreground: "oklch(var(--card-foreground))",
         },
       },
       borderRadius: {