Use unwraped custom properties for colors to support older browsers

Author: hasparus

src/app/colors.css

@@ -1,41 +1,41 @@
 :root {
-  --color-pri-lighter: #ffccef;
-  --color-pri-light: #ffccef;
-  --color-pri-base: #e10098;
-  --color-pri-dark: #990069;
-  --color-pri-darker: #660046;
+  --color-pri-lighter: 319 100% 90%;
+  --color-pri-light: 319 100% 90%;
+  --color-pri-base: 319 100% 44%;
+  --color-pri-dark: 319 100% 30%;
+  --color-pri-darker: 319 100% 20%;
 
-  --color-sec-lighter: #edfad1;
-  --color-sec-light: #dbf6a2;
-  --color-sec-base: #c3f654;
-  --color-sec-dark: #83bd02;
-  --color-sec-darker: #507501;
+  --color-sec-lighter: 79 80% 90%;
+  --color-sec-light: 79 82% 80%;
+  --color-sec-base: 79 90% 65%;
+  --color-sec-dark: 79 98% 37%;
+  --color-sec-darker: 79 98% 23%;
 
-  --color-neu-0: #ffffff;
-  --color-neu-50: #fafcf4;
-  --color-neu-100: #f3f4f0;
-  --color-neu-200: #e7e9e2;
-  --color-neu-300: #dbded3;
-  --color-neu-400: #cfd3c5;
-  --color-neu-500: #b8bda8;
-  --color-neu-600: #a0a88a;
-  --color-neu-700: #6d7557;
-  --color-neu-800: #363a2c;
-  --color-neu-900: #0e0f0b;
+  --color-neu-0: 0 0% 100%;
+  --color-neu-50: 75 57% 97%;
+  --color-neu-100: 75 15% 95%;
+  --color-neu-200: 77 14% 90%;
+  --color-neu-300: 76 14% 85%;
+  --color-neu-400: 77 14% 80%;
+  --color-neu-500: 74 14% 70%;
+  --color-neu-600: 76 15% 60%;
+  --color-neu-700: 76 15% 40%;
+  --color-neu-800: 77 14% 20%;
+  --color-neu-900: 75 15% 5%;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-neu-900: #ffffff;
-    --color-neu-800: #fafcf4;
-    --color-neu-700: #f3f4f0;
-    --color-neu-600: #e7e9e2;
-    --color-neu-500: #dbded3;
-    --color-neu-400: #cfd3c5;
-    --color-neu-300: #b8bda8;
-    --color-neu-200: #a0a88a;
-    --color-neu-100: #6d7557;
-    --color-neu-50: #363a2c;
-    --color-neu-0: #0e0f0b;
+    --color-neu-900: 0 0% 100%;
+    --color-neu-800: 75 57% 97%;
+    --color-neu-700: 75 15% 95%;
+    --color-neu-600: 77 14% 90%;
+    --color-neu-500: 76 14% 85%;
+    --color-neu-400: 77 14% 80%;
+    --color-neu-300: 74 14% 70%;
+    --color-neu-200: 76 15% 60%;
+    --color-neu-100: 76 15% 40%;
+    --color-neu-50: 77 14% 20%;
+    --color-neu-0: 75 15% 5%;
   }
 }

tailwind.config.ts

@@ -26,31 +26,31 @@ const config: Config = {
         black: "#1b1b1b",
 
         // #region new design system colors
-        "pri-lighter": "var(--color-pri-lighter)",
-        "pri-light": "var(--color-pri-light)",
-        "pri-base": "var(--color-pri-base)",
-        "pri-dark": "var(--color-pri-dark)",
-        "pri-darker": "var(--color-pri-darker)",
+        "pri-lighter": "hsl(var(--color-pri-lighter) / <alpha-value>)",
+        "pri-light": "hsl(var(--color-pri-light) / <alpha-value>)",
+        "pri-base": "hsl(var(--color-pri-base) / <alpha-value>)",
+        "pri-dark": "hsl(var(--color-pri-dark) / <alpha-value>)",
+        "pri-darker": "hsl(var(--color-pri-darker) / <alpha-value>)",
 
-        "sec-lighter": "var(--color-sec-lighter)",
-        "sec-light": "var(--color-sec-light)",
-        "sec-base": "var(--color-sec-base)",
-        "sec-dark": "var(--color-sec-dark)",
-        "sec-darker": "var(--color-sec-darker)",
+        "sec-lighter": "hsl(var(--color-sec-lighter) / <alpha-value>)",
+        "sec-light": "hsl(var(--color-sec-light) / <alpha-value>)",
+        "sec-base": "hsl(var(--color-sec-base) / <alpha-value>)",
+        "sec-dark": "hsl(var(--color-sec-dark) / <alpha-value>)",
+        "sec-darker": "hsl(var(--color-sec-darker) / <alpha-value>)",
 
         // We're using 3-letter color names to avoid conflicting
         // with the old `neutral` color.
-        "neu-0": "rgb(from var(--color-neu-0) r g b / <alpha-value>)",
-        "neu-50": "rgb(from var(--color-neu-50) r g b / <alpha-value>)",
-        "neu-100": "rgb(from var(--color-neu-100) r g b / <alpha-value>)",
-        "neu-200": "rgb(from var(--color-neu-200) r g b / <alpha-value>)",
-        "neu-300": "rgb(from var(--color-neu-300) r g b / <alpha-value>)",
-        "neu-400": "rgb(from var(--color-neu-400) r g b / <alpha-value>)",
-        "neu-500": "rgb(from var(--color-neu-500) r g b / <alpha-value>)",
-        "neu-600": "rgb(from var(--color-neu-600) r g b / <alpha-value>)",
-        "neu-700": "rgb(from var(--color-neu-700) r g b / <alpha-value>)",
-        "neu-800": "rgb(from var(--color-neu-800) r g b / <alpha-value>)",
-        "neu-900": "rgb(from var(--color-neu-900) r g b / <alpha-value>)",
+        "neu-0": "hsl(var(--color-neu-0) / <alpha-value>)",
+        "neu-50": "hsl(var(--color-neu-50) / <alpha-value>)",
+        "neu-100": "hsl(var(--color-neu-100) / <alpha-value>)",
+        "neu-200": "hsl(var(--color-neu-200) / <alpha-value>)",
+        "neu-300": "hsl(var(--color-neu-300) / <alpha-value>)",
+        "neu-400": "hsl(var(--color-neu-400) / <alpha-value>)",
+        "neu-500": "hsl(var(--color-neu-500) / <alpha-value>)",
+        "neu-600": "hsl(var(--color-neu-600) / <alpha-value>)",
+        "neu-700": "hsl(var(--color-neu-700) / <alpha-value>)",
+        "neu-800": "hsl(var(--color-neu-800) / <alpha-value>)",
+        "neu-900": "hsl(var(--color-neu-900) / <alpha-value>)",
         // #endregion new design system colors
       },
       backgroundImage: {