perf:use rgb color to support alpha value for tailwindcss custom color

actifyjs · Aug 18, 2024 · 20b183a · 20b183a
1 parent 51cfc34
commit 20b183a
Show file tree

Hide file tree

Showing 23 changed files with 455 additions and 452 deletions.
diff --git a/apps/docs/content/components/label.md b/apps/docs/content/components/label.md
@@ -9,7 +9,6 @@ description: Use original html label tag, but prevented text selection when doub
 
 ## Usage with Raido
 
-<preview code='<RadioGroup>
-  <Radio value="actify" id="radio-1" />
-  <Label htmlFor="radio-1">with radio</Label>
-</RadioGroup>'></preview>
+<preview code='<Label className="flex items-center gap-4">with radio
+<RadioGroup><Radio value="actify" /></RadioGroup></Label>'>
+</preview>
diff --git a/apps/docs/src/app/globals.css b/apps/docs/src/app/globals.css
@@ -3,52 +3,51 @@
 @tailwind utilities;
 
 :root {
-  --md-sys-color-background: #fff8f3;
-  --md-sys-color-on-background: #201b12;
-  --md-sys-color-surface: #fff8f3;
-  --md-sys-color-surface-dim: #e4d8cb;
-  --md-sys-color-surface-bright: #fff8f3;
-  --md-sys-color-surface-container-lowest: #ffffff;
-  --md-sys-color-surface-container-low: #fef2e4;
-  --md-sys-color-surface-container: #f8ecde;
-  --md-sys-color-surface-container-high: #f3e6d8;
-  --md-sys-color-surface-container-highest: #ede1d3;
-  --md-sys-color-on-surface: #201b12;
-  --md-sys-color-surface-variant: #f2e0c9;
-  --md-sys-color-on-surface-variant: #504534;
-  --md-sys-color-inverse-surface: #362f26;
-  --md-sys-color-inverse-on-surface: #fbefe1;
-  --md-sys-color-outline: #837562;
-  --md-sys-color-outline-variant: #d5c4ae;
-  --md-sys-color-shadow: #000000;
-  --md-sys-color-scrim: #000000;
-  --md-sys-color-surface-tint: #7f5700;
-  --md-sys-color-primary: #7f5700;
-  --md-sys-color-on-primary: #ffffff;
-  --md-sys-color-primary-container: #f7b337;
-  --md-sys-color-on-primary-container: #442d00;
-  --md-sys-color-inverse-primary: #ffba3e;
-  --md-sys-color-secondary: #765a2b;
-  --md-sys-color-on-secondary: #ffffff;
-  --md-sys-color-secondary-container: #ffdca9;
-  --md-sys-color-on-secondary-container: #5c4316;
-  --md-sys-color-tertiary: #566500;
-  --md-sys-color-on-tertiary: #ffffff;
-  --md-sys-color-tertiary-container: #b6ca54;
-  --md-sys-color-on-tertiary-container: #2d3600;
-  --md-sys-color-error: #ba1a1a;
-  --md-sys-color-on-error: #ffffff;
-  --md-sys-color-error-container: #ffdad6;
-  --md-sys-color-on-error-container: #410002;
+  --md-sys-color-background: 255 248 243;
+  --md-sys-color-on-background: 32 27 18;
+  --md-sys-color-surface: 255 248 243;
+  --md-sys-color-surface-dim: 228 216 203;
+  --md-sys-color-surface-bright: 255 248 243;
+  --md-sys-color-surface-container-lowest: 255 255 255;
+  --md-sys-color-surface-container-low: 254 242 228;
+  --md-sys-color-surface-container: 248 236 222;
+  --md-sys-color-surface-container-high: 243 230 216;
+  --md-sys-color-surface-container-highest: 237 225 211;
+  --md-sys-color-on-surface: 32 27 18;
+  --md-sys-color-surface-variant: 242 225 201;
+  --md-sys-color-on-surface-variant: 80 69 52;
+  --md-sys-color-inverse-surface: 54 47 38;
+  --md-sys-color-inverse-on-surface: 251 239 225;
+  --md-sys-color-outline: 131 117 98;
+  --md-sys-color-outline-variant: 213 196 174;
+  --md-sys-color-shadow: 0 0 0;
+  --md-sys-color-scrim: 0 0 0;
+  --md-sys-color-surface-tint: 127 87 0;
+  --md-sys-color-primary: 127 87 0;
+  --md-sys-color-on-primary: 255 255 255;
+  --md-sys-color-primary-container: 247 179 55;
+  --md-sys-color-on-primary-container: 68 45 0;
+  --md-sys-color-inverse-primary: 255 186 62;
+  --md-sys-color-secondary: 118 90 43;
+  --md-sys-color-on-secondary: 255 255 255;
+  --md-sys-color-secondary-container: 255 220 169;
+  --md-sys-color-on-secondary-container: 92 67 22;
+  --md-sys-color-tertiary: 86 101 0;
+  --md-sys-color-on-tertiary: 255 255 255;
+  --md-sys-color-tertiary-container: 182 202 84;
+  --md-sys-color-on-tertiary-container: 45 54 0;
+  --md-sys-color-error: 186 26 26;
+  --md-sys-color-on-error: 255 255 255;
+  --md-sys-color-error-container: 255 218 214;
+  --md-sys-color-on-error-container: 65 0 2;
 }
 
 html {
   scroll-behavior: smooth;
 }
 
 /* dark mode switch transition */
-::view-transition-old(root),
-::view-transition-new(root) {
+::view-transition-old(root) ::view-transition-new(root) {
   animation: none;
   mix-blend-mode: normal;
 }

diff --git a/apps/docs/src/components/Search.tsx b/apps/docs/src/components/Search.tsx
@@ -55,12 +55,12 @@ const DocSearch = ({ appId, apiKey, indexName }: DocSearchProps) => {
       <style>
         {`
         :root{
-          --docsearch-primary-color: var(--md-sys-color-primary);
+          --docsearch-primary-color: rgb(var(--md-sys-color-primary));
         }
         .DocSearch-Modal{
-          --docsearch-modal-background: var(--md-sys-color-surface);
-          --docsearch-hit-active-color: var(--md-sys-color-on-primary);
-          --docsearch-footer-background: var(--md-sys-color-surface-container);
+          --docsearch-modal-background: rgb(var(--md-sys-color-surface));
+          --docsearch-hit-active-color: rgb(var(--md-sys-color-on-primary));
+          --docsearch-footer-background: rgb(var(--md-sys-color-surface-container));
         }
         `}
       </style>

diff --git a/apps/docs/src/components/ThemeChanger.tsx b/apps/docs/src/components/ThemeChanger.tsx
@@ -134,7 +134,7 @@ export const ThemeChanger = () => {
             </div>
           </section>
 
-          <section className="px-3 rounded-2xl text-on-surface-variant bg-surface-variant [--md-slider-inactive-track-color:var(--md-sys-color-on-surface-variant)]">
+          <section className="px-3 rounded-2xl text-on-surface-variant bg-surface-variant [--md-slider-inactive-track-color:rgb(var(--md-sys-color-on-surface-variant))]">
             <div className="[margin-block:24px]">
               <Label className="block leading-tight ms-2.5 me-2.5">Hue</Label>
               <Slider

diff --git a/apps/docs/src/utils/material-color-helpers.ts b/apps/docs/src/utils/material-color-helpers.ts
@@ -95,7 +95,8 @@ export function themeFromSourceColor(color: string, isDark: boolean): Theme {
   const theme: { [key: string]: string } = {}
 
   for (const [key, value] of Object.entries(materialColors)) {
-    theme[key] = hexFromArgb(value.getArgb(scheme))
+    const argb = value.getArgb(scheme)
+    theme[key] = argbToRgb(argb)
   }
   return theme
 }

diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts
@@ -7,51 +7,64 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        background: 'var(--md-sys-color-background,#fff8f3)',
-        'on-background': 'var(--md-sys-color-on-background,#201b12)',
-        surface: 'var(--md-sys-color-surface,#fff8f3)',
-        'surface-dim': 'var(--md-sys-color-surface-dim,#e4d8cb)',
-        'surface-bright': 'var(--md-sys-color-surface-bright,#fff8f3)',
+        background: 'rgb(var(--md-sys-color-background) / <alpha-value>)',
+        'on-background':
+          'rgb(var(--md-sys-color-on-background) / <alpha-value>)',
+        surface: 'rgb(var(--md-sys-color-surface) / <alpha-value>)',
+        'surface-dim': 'rgb(var(--md-sys-color-surface-dim) / <alpha-value>)',
+        'surface-bright':
+          'rgb(var(--md-sys-color-surface-bright) / <alpha-value>)',
         'surface-container-lowest':
-          'var(--md-sys-color-surface-container-lowest,#ffffff)',
+          'rgb(var(--md-sys-color-surface-container-lowest) / <alpha-value>)',
         'surface-container-low':
-          'var(--md-sys-color-surface-container-low,#fef2e4)',
-        'surface-container': 'var(--md-sys-color-surface-container,#f8ecde)',
+          'rgb(var(--md-sys-color-surface-container-low) / <alpha-value>)',
+        'surface-container':
+          'rgb(var(--md-sys-color-surface-container) / <alpha-value>)',
         'surface-container-high':
-          'var(--md-sys-color-surface-container-high,#f3e6d8)',
+          'rgb(var(--md-sys-color-surface-container-high) / <alpha-value>)',
         'surface-container-highest':
-          'var(--md-sys-color-surface-container-highest,#ede1d3)',
-        'on-surface': 'var(--md-sys-color-on-surface,#201b12)',
-        'surface-variant': 'var(--md-sys-color-surface-variant,#f2e0c9)',
-        'on-surface-variant': 'var(--md-sys-color-on-surface-variant,#504534)',
-        'inverse-surface': 'var(--md-sys-color-inverse-surface,#362f26)',
-        'inverse-on-surface': 'var(--md-sys-color-inverse-on-surface,#fbefe1)',
-        outline: 'var(--md-sys-color-outline,#837562)',
-        'outline-variant': 'var(--md-sys-color-outline-variant,#d5c4ae)',
-        shadow: 'var(--md-sys-color-shadow,#000000)',
-        scrim: 'var(--md-sys-color-scrim,#000000)',
-        'surface-tint': 'var(--md-sys-color-surface-tint,#7f5700)',
-        primary: 'var(--md-sys-color-primary,#7f5700)',
-        'on-primary': 'var(--md-sys-color-on-primary,#ffffff)',
-        'primary-container': 'var(--md-sys-color-primary-container,#f7b337)',
+          'rgb(var(--md-sys-color-surface-container-highest) / <alpha-value>)',
+        'on-surface': 'rgb(var(--md-sys-color-on-surface) / <alpha-value>)',
+        'surface-variant':
+          'rgb(var(--md-sys-color-surface-variant) / <alpha-value>)',
+        'on-surface-variant':
+          'rgb(var(--md-sys-color-on-surface-variant) / <alpha-value>)',
+        'inverse-surface':
+          'rgb(var(--md-sys-color-inverse-surface) / <alpha-value>)',
+        'inverse-on-surface':
+          'rgb(var(--md-sys-color-inverse-on-surface) / <alpha-value>)',
+        outline: 'rgb(var(--md-sys-color-outline) / <alpha-value>)',
+        'outline-variant':
+          'rgb(var(--md-sys-color-outline-variant) / <alpha-value>)',
+        shadow: 'rgb(var(--md-sys-color-shadow) / <alpha-value>)',
+        scrim: 'rgb(var(--md-sys-color-scrim) / <alpha-value>)',
+        'surface-tint': 'rgb(var(--md-sys-color-surface-tint) / <alpha-value>)',
+        primary: 'rgb(var(--md-sys-color-primary) / <alpha-value>)',
+        'on-primary': 'rgb(var(--md-sys-color-on-primary) / <alpha-value>)',
+        'primary-container':
+          'rgb(var(--md-sys-color-primary-container) / <alpha-value>)',
         'on-primary-container':
-          'var(--md-sys-color-on-primary-container,#442d00)',
-        'inverse-primary': 'var(--md-sys-color-inverse-primary,#ffba3e)',
-        secondary: 'var(--md-sys-color-secondary,#765a2b)',
-        'on-secondary': 'var(--md-sys-color-on-secondary,#ffffff)',
+          'rgb(var(--md-sys-color-on-primary-container) / <alpha-value>)',
+        'inverse-primary':
+          'rgb(var(--md-sys-color-inverse-primary) / <alpha-value>)',
+        secondary: 'rgb(var(--md-sys-color-secondary) / <alpha-value>)',
+        'on-secondary': 'rgb(var(--md-sys-color-on-secondary) / <alpha-value>)',
         'secondary-container':
-          'var(--md-sys-color-secondary-container,#ffdca9)',
+          'rgb(var(--md-sys-color-secondary-container) / <alpha-value>)',
         'on-secondary-container':
-          'var(--md-sys-color-on-secondary-container,#5c4316)',
-        tertiary: 'var(--md-sys-color-tertiary,#566500)',
-        'on-tertiary': 'var(--md-sys-color-on-tertiary,#ffffff)',
-        'tertiary-container': 'var(--md-sys-color-tertiary-container,#b6ca54)',
+          'rgb(var(--md-sys-color-on-secondary-container) / <alpha-value>)',
+        tertiary: 'rgb(var(--md-sys-color-tertiary) / <alpha-value>)',
+        'on-tertiary': 'rgb(var(--md-sys-color-on-tertiary) / <alpha-value>)',
+        'tertiary-container':
+          'rgb(var(--md-sys-color-tertiary-container) / <alpha-value>)',
         'on-tertiary-container':
-          'var(--md-sys-color-on-tertiary-container,#2d3600)',
-        error: 'var(--md-sys-color-error,#ba1a1a)',
-        'on-error': 'var(--md-sys-color-on-error,#ffffff)',
-        'error-container': 'var(--md-sys-color-error-container,#ffdad6)',
-        'on-error-container': 'var(--md-sys-color-on-error-container,#410002)'
+          'rgb(var(--md-sys-color-on-tertiary-container) / <alpha-value>)',
+        error: 'rgb(var(--md-sys-color-error) / <alpha-value>)',
+        'on-error': 'rgb(var(--md-sys-color-on-error) / <alpha-value>)',
+        'error-container':
+          'rgb(var(--md-sys-color-error-container) / <alpha-value>)',
+        'on-error-container':
+          'rgb(var(--md-sys-color-on-error-container) / <alpha-value>)'
       }
     }
   },

diff --git a/packages/actify/src/components/Badges/badges.module.css b/packages/actify/src/components/Badges/badges.module.css
@@ -18,18 +18,18 @@
   transform: translate(50%, -50%);
 }
 .primary {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
+  color: rgb(var(--md-sys-color-on-primary));
+  background-color: rgb(var(--md-sys-color-primary));
 }
 .secondary {
-  color: var(--md-sys-color-on-secondary);
-  background-color: var(--md-sys-color-secondary);
+  color: rgb(var(--md-sys-color-on-secondary));
+  background-color: rgb(var(--md-sys-color-secondary));
 }
 .tertiary {
-  color: var(--md-sys-color-on-tertiary);
-  background-color: var(--md-sys-color-tertiary);
+  color: rgb(var(--md-sys-color-on-tertiary));
+  background-color: rgb(var(--md-sys-color-tertiary));
 }
 .error {
-  color: var(--md-sys-color-on-error);
-  background-color: var(--md-sys-color-error);
+  color: rgb(var(--md-sys-color-on-error));
+  background-color: rgb(var(--md-sys-color-error));
 }