From 20b183aeb79a1917ca8936972f8f29b348a339fb Mon Sep 17 00:00:00 2001
From: lerte smith <lerte@qq.com>
Date: Mon, 19 Aug 2024 01:26:05 +0800
Subject: [PATCH] perf:use rgb color to support alpha value for tailwindcss
 custom color

---
 apps/docs/content/components/label.md         |   7 +-
 apps/docs/src/app/globals.css                 |  77 ++++---
 apps/docs/src/components/Search.tsx           |   8 +-
 apps/docs/src/components/ThemeChanger.tsx     |   2 +-
 apps/docs/src/utils/material-color-helpers.ts |   3 +-
 apps/docs/tailwind.config.ts                  |  87 ++++----
 .../src/components/Badges/badges.module.css   |  16 +-
 .../Button/styles/variant.module.css          | 144 ++++++-------
 .../components/Checkbox/checkbox.module.css   |  10 +-
 .../src/components/Chips/AssistChip.tsx       |   2 +-
 .../src/components/Chips/FilterChip.tsx       |   4 +-
 .../actify/src/components/Chips/InputChip.tsx |   2 +-
 .../src/components/Dialogs/actify.module.css  |  11 +-
 .../src/components/Divider/actify.module.css  |   2 +-
 .../src/components/Menus/actify.module.css    |   6 +-
 .../src/components/Radio/actify.module.css    |  14 +-
 .../src/components/Ripple/actify.module.css   |  10 +-
 .../SegmentedButton/actify.module.css         |  50 ++---
 .../src/components/Select/actify.module.css   | 182 ++++++++--------
 .../src/components/Sliders/actify.module.css  |  36 ++--
 .../src/components/Switch/actify.module.css   |  32 +--
 .../actify/src/components/Table/Thead.tsx     |   2 +-
 .../TextFields/text-field.module.css          | 200 +++++++++---------
 23 files changed, 455 insertions(+), 452 deletions(-)

diff --git a/apps/docs/content/components/label.md b/apps/docs/content/components/label.md
index b9a6462..a66cba4 100644
--- 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
index 04ddf05..33db1ce 100644
--- a/apps/docs/src/app/globals.css
+++ b/apps/docs/src/app/globals.css
@@ -3,43 +3,43 @@
 @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 {
@@ -47,8 +47,7 @@ html {
 }
 
 /* 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
index 7442b36..38bb3d2 100644
--- 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
index 66064e2..03272e3 100644
--- 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
index 68903df..28549db 100644
--- 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
index 97e5f3c..a381b26 100644
--- 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
index 24167f3..801f793 100644
--- 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));
 }
diff --git a/packages/actify/src/components/Button/styles/variant.module.css b/packages/actify/src/components/Button/styles/variant.module.css
index 8c71b40..e4f54cc 100644
--- a/packages/actify/src/components/Button/styles/variant.module.css
+++ b/packages/actify/src/components/Button/styles/variant.module.css
@@ -1,18 +1,18 @@
 .filled {
   --_container-color: var(
     --md-filled-button-container-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_container-elevation: var(--md-filled-button-container-elevation, 0);
   --_container-height: var(--md-filled-button-container-height, 40px);
   --_container-shadow-color: var(
     --md-filled-button-container-shadow-color,
-    var(--md-sys-color-shadow, #000)
+    rgb(var(--md-sys-color-shadow, 0 0 0))
   );
   --_container-shape: var(--md-filled-button-container-shape, 9999px);
   --_disabled-container-color: var(
     --md-filled-button-disabled-container-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-container-elevation: var(
     --md-filled-button-disabled-container-elevation,
@@ -24,7 +24,7 @@
   );
   --_disabled-label-text-color: var(
     --md-filled-button-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-label-text-opacity: var(
     --md-filled-button-disabled-label-text-opacity,
@@ -36,7 +36,7 @@
   );
   --_focus-label-text-color: var(
     --md-filled-button-focus-label-text-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_hover-container-elevation: var(
     --md-filled-button-hover-container-elevation,
@@ -44,11 +44,11 @@
   );
   --_hover-label-text-color: var(
     --md-filled-button-hover-label-text-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_hover-state-layer-color: var(
     --md-filled-button-hover-state-layer-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_hover-state-layer-opacity: var(
     --md-filled-button-hover-state-layer-opacity,
@@ -56,7 +56,7 @@
   );
   --_label-text-color: var(
     --md-filled-button-label-text-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_label-text-font: var(
     --md-filled-button-label-text-font,
@@ -86,11 +86,11 @@
   );
   --_pressed-label-text-color: var(
     --md-filled-button-pressed-label-text-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_pressed-state-layer-color: var(
     --md-filled-button-pressed-state-layer-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_pressed-state-layer-opacity: var(
     --md-filled-button-pressed-state-layer-opacity,
@@ -98,25 +98,25 @@
   );
   --_disabled-icon-color: var(
     --md-filled-button-disabled-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-icon-opacity: var(--md-filled-button-disabled-icon-opacity, 0.38);
   --_focus-icon-color: var(
     --md-filled-button-focus-icon-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_hover-icon-color: var(
     --md-filled-button-hover-icon-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_icon-color: var(
     --md-filled-button-icon-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_icon-size: var(--md-filled-button-icon-size, 18px);
   --_pressed-icon-color: var(
     --md-filled-button-pressed-icon-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_leading-space: var(--md-filled-button-leading-space, 24px);
   --_trailing-space: var(--md-filled-button-trailing-space, 24px);
@@ -156,18 +156,18 @@
 .elevated {
   --_container-color: var(
     --md-elevated-button-container-color,
-    var(--md-sys-color-surface-container-low, #f7f2fa)
+    rgb(var(--md-sys-color-surface-container-low, 247 242 250))
   );
   --_container-elevation: var(--md-elevated-button-container-elevation, 1);
   --_container-height: var(--md-elevated-button-container-height, 40px);
   --_container-shadow-color: var(
     --md-elevated-button-container-shadow-color,
-    var(--md-sys-color-shadow, #000)
+    rgb(var(--md-sys-color-shadow, 0 0 0))
   );
   --_container-shape: var(--md-elevated-button-container-shape, 9999px);
   --_disabled-container-color: var(
     --md-elevated-button-disabled-container-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-container-elevation: var(
     --md-elevated-button-disabled-container-elevation,
@@ -179,7 +179,7 @@
   );
   --_disabled-label-text-color: var(
     --md-elevated-button-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-label-text-opacity: var(
     --md-elevated-button-disabled-label-text-opacity,
@@ -191,7 +191,7 @@
   );
   --_focus-label-text-color: var(
     --md-elevated-button-focus-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-container-elevation: var(
     --md-elevated-button-hover-container-elevation,
@@ -199,11 +199,11 @@
   );
   --_hover-label-text-color: var(
     --md-elevated-button-hover-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-state-layer-color: var(
     --md-elevated-button-hover-state-layer-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-state-layer-opacity: var(
     --md-elevated-button-hover-state-layer-opacity,
@@ -211,7 +211,7 @@
   );
   --_label-text-color: var(
     --md-elevated-button-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_label-text-font: var(
     --md-elevated-button-label-text-font,
@@ -241,11 +241,11 @@
   );
   --_pressed-label-text-color: var(
     --md-elevated-button-pressed-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_pressed-state-layer-color: var(
     --md-elevated-button-pressed-state-layer-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_pressed-state-layer-opacity: var(
     --md-elevated-button-pressed-state-layer-opacity,
@@ -253,7 +253,7 @@
   );
   --_disabled-icon-color: var(
     --md-elevated-button-disabled-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-icon-opacity: var(
     --md-elevated-button-disabled-icon-opacity,
@@ -261,20 +261,20 @@
   );
   --_focus-icon-color: var(
     --md-elevated-button-focus-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-icon-color: var(
     --md-elevated-button-hover-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_icon-color: var(
     --md-elevated-button-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_icon-size: var(--md-elevated-button-icon-size, 18px);
   --_pressed-icon-color: var(
     --md-elevated-button-pressed-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_leading-space: var(--md-elevated-button-leading-space, 24px);
   --_trailing-space: var(--md-elevated-button-trailing-space, 24px);
@@ -316,7 +316,7 @@
   --_container-shape: var(--md-outlined-button-container-shape, 9999px);
   --_disabled-label-text-color: var(
     --md-outlined-button-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-label-text-opacity: var(
     --md-outlined-button-disabled-label-text-opacity,
@@ -324,7 +324,7 @@
   );
   --_disabled-outline-color: var(
     --md-outlined-button-disabled-outline-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-outline-opacity: var(
     --md-outlined-button-disabled-outline-opacity,
@@ -332,15 +332,15 @@
   );
   --_focus-label-text-color: var(
     --md-outlined-button-focus-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-label-text-color: var(
     --md-outlined-button-hover-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-state-layer-color: var(
     --md-outlined-button-hover-state-layer-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-state-layer-opacity: var(
     --md-outlined-button-hover-state-layer-opacity,
@@ -348,7 +348,7 @@
   );
   --_label-text-color: var(
     --md-outlined-button-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_label-text-font: var(
     --md-outlined-button-label-text-font,
@@ -374,20 +374,20 @@
   );
   --_outline-color: var(
     --md-outlined-button-outline-color,
-    var(--md-sys-color-outline, #79747e)
+    rgb(var(--md-sys-color-outline, 121 116 126))
   );
   --_outline-width: var(--md-outlined-button-outline-width, 1px);
   --_pressed-label-text-color: var(
     --md-outlined-button-pressed-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_pressed-outline-color: var(
     --md-outlined-button-pressed-outline-color,
-    var(--md-sys-color-outline, #79747e)
+    rgb(var(--md-sys-color-outline, 121 116 126))
   );
   --_pressed-state-layer-color: var(
     --md-outlined-button-pressed-state-layer-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_pressed-state-layer-opacity: var(
     --md-outlined-button-pressed-state-layer-opacity,
@@ -395,7 +395,7 @@
   );
   --_disabled-icon-color: var(
     --md-outlined-button-disabled-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-icon-opacity: var(
     --md-outlined-button-disabled-icon-opacity,
@@ -403,20 +403,20 @@
   );
   --_focus-icon-color: var(
     --md-outlined-button-focus-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-icon-color: var(
     --md-outlined-button-hover-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_icon-color: var(
     --md-outlined-button-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_icon-size: var(--md-outlined-button-icon-size, 18px);
   --_pressed-icon-color: var(
     --md-outlined-button-pressed-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_leading-space: var(--md-outlined-button-leading-space, 24px);
   --_trailing-space: var(--md-outlined-button-trailing-space, 24px);
@@ -459,18 +459,18 @@
 .tonal {
   --_container-color: var(
     --md-filled-tonal-button-container-color,
-    var(--md-sys-color-secondary-container, #e8def8)
+    rgb(var(--md-sys-color-secondary-container, 232 222 248))
   );
   --_container-elevation: var(--md-filled-tonal-button-container-elevation, 0);
   --_container-height: var(--md-filled-tonal-button-container-height, 40px);
   --_container-shadow-color: var(
     --md-filled-tonal-button-container-shadow-color,
-    var(--md-sys-color-shadow, #000)
+    rgb(var(--md-sys-color-shadow, 0 0 0))
   );
   --_container-shape: var(--md-filled-tonal-button-container-shape, 9999px);
   --_disabled-container-color: var(
     --md-filled-tonal-button-disabled-container-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-container-elevation: var(
     --md-filled-tonal-button-disabled-container-elevation,
@@ -482,7 +482,7 @@
   );
   --_disabled-label-text-color: var(
     --md-filled-tonal-button-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-label-text-opacity: var(
     --md-filled-tonal-button-disabled-label-text-opacity,
@@ -494,7 +494,7 @@
   );
   --_focus-label-text-color: var(
     --md-filled-tonal-button-focus-label-text-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_hover-container-elevation: var(
     --md-filled-tonal-button-hover-container-elevation,
@@ -502,11 +502,11 @@
   );
   --_hover-label-text-color: var(
     --md-filled-tonal-button-hover-label-text-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_hover-state-layer-color: var(
     --md-filled-tonal-button-hover-state-layer-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_hover-state-layer-opacity: var(
     --md-filled-tonal-button-hover-state-layer-opacity,
@@ -514,7 +514,7 @@
   );
   --_label-text-color: var(
     --md-filled-tonal-button-label-text-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_label-text-font: var(
     --md-filled-tonal-button-label-text-font,
@@ -544,11 +544,11 @@
   );
   --_pressed-label-text-color: var(
     --md-filled-tonal-button-pressed-label-text-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_pressed-state-layer-color: var(
     --md-filled-tonal-button-pressed-state-layer-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_pressed-state-layer-opacity: var(
     --md-filled-tonal-button-pressed-state-layer-opacity,
@@ -556,7 +556,7 @@
   );
   --_disabled-icon-color: var(
     --md-filled-tonal-button-disabled-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-icon-opacity: var(
     --md-filled-tonal-button-disabled-icon-opacity,
@@ -564,20 +564,20 @@
   );
   --_focus-icon-color: var(
     --md-filled-tonal-button-focus-icon-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_hover-icon-color: var(
     --md-filled-tonal-button-hover-icon-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_icon-color: var(
     --md-filled-tonal-button-icon-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_icon-size: var(--md-filled-tonal-button-icon-size, 18px);
   --_pressed-icon-color: var(
     --md-filled-tonal-button-pressed-icon-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_leading-space: var(--md-filled-tonal-button-leading-space, 24px);
   --_trailing-space: var(--md-filled-tonal-button-trailing-space, 24px);
@@ -619,7 +619,7 @@
   --_container-shape: var(--md-text-button-container-shape, 9999px);
   --_disabled-label-text-color: var(
     --md-text-button-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-label-text-opacity: var(
     --md-text-button-disabled-label-text-opacity,
@@ -627,15 +627,15 @@
   );
   --_focus-label-text-color: var(
     --md-text-button-focus-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-label-text-color: var(
     --md-text-button-hover-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-state-layer-color: var(
     --md-text-button-hover-state-layer-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-state-layer-opacity: var(
     --md-text-button-hover-state-layer-opacity,
@@ -643,7 +643,7 @@
   );
   --_label-text-color: var(
     --md-text-button-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_label-text-font: var(
     --md-text-button-label-text-font,
@@ -669,11 +669,11 @@
   );
   --_pressed-label-text-color: var(
     --md-text-button-pressed-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_pressed-state-layer-color: var(
     --md-text-button-pressed-state-layer-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_pressed-state-layer-opacity: var(
     --md-text-button-pressed-state-layer-opacity,
@@ -681,25 +681,25 @@
   );
   --_disabled-icon-color: var(
     --md-text-button-disabled-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, 0.38);
   --_focus-icon-color: var(
     --md-text-button-focus-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-icon-color: var(
     --md-text-button-hover-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_icon-color: var(
     --md-text-button-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_icon-size: var(--md-text-button-icon-size, 18px);
   --_pressed-icon-color: var(
     --md-text-button-pressed-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_leading-space: var(--md-text-button-leading-space, 12px);
   --_trailing-space: var(--md-text-button-trailing-space, 12px);
diff --git a/packages/actify/src/components/Checkbox/checkbox.module.css b/packages/actify/src/components/Checkbox/checkbox.module.css
index 142d6a1..ac33b23 100644
--- a/packages/actify/src/components/Checkbox/checkbox.module.css
+++ b/packages/actify/src/components/Checkbox/checkbox.module.css
@@ -59,7 +59,7 @@
   border-radius: inherit;
   border-color: var(
     --md-checkbox-outline-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   border-style: solid;
   border-width: var(--md-checkbox-outline-width, 2px);
@@ -67,7 +67,7 @@
   &.disabled {
     border-color: var(
       --md-checkbox-disabled-outline-color,
-      var(--md-sys-color-on-surface, #1d1b20)
+      rgb(var(--md-sys-color-on-surface))
     );
     border-width: var(--md-checkbox-disabled-outline-width, 2px);
     opacity: var(--md-checkbox-disabled-container-opacity, 0.38);
@@ -82,7 +82,7 @@
   border-radius: inherit;
   background-color: var(
     --md-checkbox-selected-container-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   opacity: 0;
   transition-duration: 150ms, 50ms;
@@ -98,7 +98,7 @@
   &.selected.disabled {
     background: var(
       --md-checkbox-selected-disabled-container-color,
-      var(--md-sys-color-on-surface, #1d1b20)
+      rgb(var(--md-sys-color-on-surface))
     );
     opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);
   }
@@ -108,7 +108,7 @@
   position: absolute;
   fill: var(
     --md-checkbox-selected-icon-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary))
   );
   height: var(--md-checkbox-icon-size, 18px);
   width: var(--md-checkbox-icon-size, 18px);
diff --git a/packages/actify/src/components/Chips/AssistChip.tsx b/packages/actify/src/components/Chips/AssistChip.tsx
index 95ed544..82a8681 100644
--- a/packages/actify/src/components/Chips/AssistChip.tsx
+++ b/packages/actify/src/components/Chips/AssistChip.tsx
@@ -37,7 +37,7 @@ const root = tv({
     '[--disabled-outline-color:var(--md-assist-chip-disabled-outline-color,var(--md-sys-color-on-surface))]',
     '[--disabled-outline-opacity:var(--md-assist-chip-disabled-outline-opacity,0.12)]',
     '[--focus-outline-color:var(--md-assist-chip-focus-outline-color,var(--md-sys-color-on-surface))]',
-    '[--outline-color:var(--md-assist-chip-outline-color,var(--md-sys-color-outline))]',
+    '[--outline-color:var(--md-assist-chip-outline-color,rgb(var(--md-sys-color-outline)))]',
     '[--outline-width:var(--md-assist-chip-outline-width,1px)]',
     '[--disabled-leading-icon-color:var(--md-assist-chip-disabled-leading-icon-color,var(--md-sys-color-on-surface))]',
     '[--disabled-leading-icon-opacity:var(--md-assist-chip-disabled-leading-icon-opacity,0.38)]',
diff --git a/packages/actify/src/components/Chips/FilterChip.tsx b/packages/actify/src/components/Chips/FilterChip.tsx
index a213b60..930e32f 100644
--- a/packages/actify/src/components/Chips/FilterChip.tsx
+++ b/packages/actify/src/components/Chips/FilterChip.tsx
@@ -44,7 +44,7 @@ const root = tv({
     '[--disabled-trailing-icon-color:var(--md-filter-chip-disabled-trailing-icon-color,var(--md-sys-color-on-surface))]',
     '[--disabled-trailing-icon-opacity:var(--md-filter-chip-disabled-trailing-icon-opacity,0.38)]',
     '[--focus-outline-color:var(--md-filter-chip-focus-outline-color,var(--md-sys-color-on-surface))]',
-    '[--outline-color:var(--md-filter-chip-outline-color,var(--md-sys-color-outline))]',
+    '[--outline-color:var(--md-filter-chip-outline-color,rgb(var(--md-sys-color-outline)))]',
     '[--outline-width:var(--md-filter-chip-outline-width,1px)]',
 
     '[--disabled-leading-icon-color:var(--md-filter-chip-disabled-leading-icon-color,var(--md-sys-color-on-surface))]',
@@ -89,7 +89,7 @@ const root = tv({
     '[--md-ripple-pressed-color:var(--pressed-state-layer-color)]',
     '[--md-ripple-pressed-opacity:var(--pressed-state-layer-opacity)]',
     '[--selected-outline-width:var(--md-filter-chip-selected-outline-width,0px)]',
-    '[--selected-container-color:var(--md-filter-chip-selected-container-color,var(--md-sys-color-secondary-container))]',
+    '[--selected-container-color:var(--md-filter-chip-selected-container-color,rgb(var(--md-sys-color-secondary-container)))]',
     '[--selected-leading-icon-color:var(--md-filter-chip-selected-leading-icon-color,var(--md-sys-color-on-secondary-container,#1d192b))]'
   ],
   variants: {
diff --git a/packages/actify/src/components/Chips/InputChip.tsx b/packages/actify/src/components/Chips/InputChip.tsx
index e7f485f..21d263a 100644
--- a/packages/actify/src/components/Chips/InputChip.tsx
+++ b/packages/actify/src/components/Chips/InputChip.tsx
@@ -42,7 +42,7 @@ const root = tv({
     '[--disabled-trailing-icon-color:var(--md-filter-chip-disabled-trailing-icon-color,var(--md-sys-color-on-surface))]',
     '[--disabled-trailing-icon-opacity:var(--md-filter-chip-disabled-trailing-icon-opacity,0.38)]',
     '[--focus-outline-color:var(--md-input-chip-focus-outline-color,var(--md-sys-color-on-surface))]',
-    '[--outline-color:var(--md-input-chip-outline-color,var(--md-sys-color-outline))]',
+    '[--outline-color:var(--md-input-chip-outline-color,rgb(var(--md-sys-color-outline)))]',
     '[--outline-width:var(--md-input-chip-outline-width,1px)]',
 
     '[--disabled-leading-icon-color:var(--md-input-chip-disabled-leading-icon-color,var(--md-sys-color-on-surface))]',
diff --git a/packages/actify/src/components/Dialogs/actify.module.css b/packages/actify/src/components/Dialogs/actify.module.css
index 0522d56..30da158 100644
--- a/packages/actify/src/components/Dialogs/actify.module.css
+++ b/packages/actify/src/components/Dialogs/actify.module.css
@@ -38,7 +38,7 @@
   width: fit-content;
 }
 .scrim {
-  background: var(--md-sys-color-scrim, #000);
+  background: rgb(var(--md-sys-color-scrim));
   display: none;
   inset: 0px;
   opacity: 0.32;
@@ -80,7 +80,7 @@
   &:before {
     background: var(
       --md-dialog-container-color,
-      var(--md-sys-color-surface-container-high, #ece6f0)
+      rgb(var(--md-sys-color-surface-container-high))
     );
     border-radius: inherit;
     content: '';
@@ -90,10 +90,7 @@
 }
 .headline {
   align-items: center;
-  color: var(
-    --md-dialog-headline-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
+  color: var(--md-dialog-headline-color, rgb(var(--md-sys-color-on-surface)));
   display: flex;
   flex-direction: column;
   font-family: var(
@@ -135,7 +132,7 @@
 .content {
   color: var(
     --md-dialog-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   font-family: var(
     --md-dialog-supporting-text-font,
diff --git a/packages/actify/src/components/Divider/actify.module.css b/packages/actify/src/components/Divider/actify.module.css
index e7b6f7b..35f9b20 100644
--- a/packages/actify/src/components/Divider/actify.module.css
+++ b/packages/actify/src/components/Divider/actify.module.css
@@ -1,5 +1,5 @@
 .divider {
-  color: var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));
+  color: var(--md-divider-color, rgb(var(--md-sys-color-outline-variant)));
   display: flex;
   height: var(--md-divider-thickness, 1px);
   width: 100%;
diff --git a/packages/actify/src/components/Menus/actify.module.css b/packages/actify/src/components/Menus/actify.module.css
index 53c12a3..7b1df00 100644
--- a/packages/actify/src/components/Menus/actify.module.css
+++ b/packages/actify/src/components/Menus/actify.module.css
@@ -31,7 +31,7 @@
   box-sizing: border-box;
   background-color: var(
     --md-menu-container-color,
-    var(--md-sys-color-surface-container, #f3edf7)
+    rgb(var(--md-sys-color-surface-container, 243 237 247))
   );
   height: inherit;
   max-height: inherit;
@@ -51,7 +51,7 @@
   display: flex;
   --md-ripple-hover-color: var(
     --md-menu-item-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --md-ripple-hover-opacity: var(
     --md-menu-item-hover-state-layer-opacity,
@@ -59,7 +59,7 @@
   );
   --md-ripple-pressed-color: var(
     --md-menu-item-pressed-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --md-ripple-pressed-opacity: var(
     --md-menu-item-pressed-state-layer-opacity,
diff --git a/packages/actify/src/components/Radio/actify.module.css b/packages/actify/src/components/Radio/actify.module.css
index 926c2dc..fe93ca5 100644
--- a/packages/actify/src/components/Radio/actify.module.css
+++ b/packages/actify/src/components/Radio/actify.module.css
@@ -9,12 +9,12 @@
   cursor: pointer;
   --md-ripple-hover-color: var(
     --md-radio-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --md-ripple-hover-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);
   --md-ripple-pressed-color: var(
     --md-radio-pressed-state-layer-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --md-ripple-pressed-opacity: var(
     --md-radio-pressed-state-layer-opacity,
@@ -29,16 +29,10 @@
   width: 100%;
 }
 .checked .icon {
-  fill: var(
-    --md-radio-selected-icon-color,
-    var(--md-sys-color-primary, #6750a4)
-  );
+  fill: var(--md-radio-selected-icon-color, rgb(var(--md-sys-color-primary)));
 }
 .icon {
-  fill: var(
-    --md-radio-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
+  fill: var(--md-radio-icon-color, rgb(var(--md-sys-color-on-surface-variant)));
   inset: 0;
   position: absolute;
 }
diff --git a/packages/actify/src/components/Ripple/actify.module.css b/packages/actify/src/components/Ripple/actify.module.css
index 5e7ed1a..ab2923a 100644
--- a/packages/actify/src/components/Ripple/actify.module.css
+++ b/packages/actify/src/components/Ripple/actify.module.css
@@ -1,9 +1,9 @@
 .ripple {
-  border-radius: inherit;
-  position: absolute;
   inset: 0;
   cursor: inherit;
   overflow: hidden;
+  position: absolute;
+  border-radius: inherit;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   &:before,
   &:after {
@@ -14,7 +14,7 @@
   &:before {
     background-color: var(
       --md-ripple-hover-color,
-      var(--md-sys-color-on-surface, #1d1b20)
+      rgb(var(--md-sys-color-on-surface))
     );
     inset: 0;
     transition:
@@ -24,7 +24,7 @@
   &:after {
     background: radial-gradient(
       closest-side,
-      var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20))
+      var(--md-ripple-pressed-color, rgb(var(--md-sys-color-on-surface)))
         max(100% - 70px, 65%),
       transparent 100%
     );
@@ -34,7 +34,7 @@
   &.hovered:before {
     background-color: var(
       --md-ripple-hover-color,
-      var(--md-sys-color-on-surface, #1d1b20)
+      rgb(var(--md-sys-color-on-surface))
     );
     opacity: var(--md-ripple-hover-opacity, 0.08);
   }
diff --git a/packages/actify/src/components/SegmentedButton/actify.module.css b/packages/actify/src/components/SegmentedButton/actify.module.css
index c12ea01..97d54cd 100644
--- a/packages/actify/src/components/SegmentedButton/actify.module.css
+++ b/packages/actify/src/components/SegmentedButton/actify.module.css
@@ -5,15 +5,15 @@
   );
   --_disabled-icon-color: var(
     --md-outlined-segmented-button-disabled-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-label-text-color: var(
     --md-outlined-segmented-button-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-outline-color: var(
     --md-outlined-segmented-button-disabled-outline-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_hover-state-layer-opacity: var(
     --md-outlined-segmented-button-hover-state-layer-opacity,
@@ -43,7 +43,7 @@
   );
   --_outline-color: var(
     --md-outlined-segmented-button-outline-color,
-    var(--md-sys-color-outline, #79747e)
+    rgb(var(--md-sys-color-outline, 121 116 126))
   );
   --_pressed-state-layer-opacity: var(
     --md-outlined-segmented-button-pressed-state-layer-opacity,
@@ -51,43 +51,43 @@
   );
   --_selected-container-color: var(
     --md-outlined-segmented-button-selected-container-color,
-    var(--md-sys-color-secondary-container, #e8def8)
+    rgb(var(--md-sys-color-secondary-container, 232 222 248))
   );
   --_selected-focus-icon-color: var(
     --md-outlined-segmented-button-selected-focus-icon-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_selected-focus-label-text-color: var(
     --md-outlined-segmented-button-selected-focus-label-text-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_selected-hover-icon-color: var(
     --md-outlined-segmented-button-selected-hover-icon-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_selected-hover-label-text-color: var(
     --md-outlined-segmented-button-selected-hover-label-text-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_selected-hover-state-layer-color: var(
     --md-outlined-segmented-button-selected-hover-state-layer-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_selected-label-text-color: var(
     --md-outlined-segmented-button-selected-label-text-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_selected-pressed-icon-color: var(
     --md-outlined-segmented-button-selected-pressed-icon-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_selected-pressed-label-text-color: var(
     --md-outlined-segmented-button-selected-pressed-label-text-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_selected-pressed-state-layer-color: var(
     --md-outlined-segmented-button-selected-pressed-state-layer-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_shape: var(
     --md-outlined-segmented-button-shape,
@@ -95,48 +95,48 @@
   );
   --_unselected-focus-icon-color: var(
     --md-outlined-segmented-button-unselected-focus-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_unselected-focus-label-text-color: var(
     --md-outlined-segmented-button-unselected-focus-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_unselected-hover-icon-color: var(
     --md-outlined-segmented-button-unselected-hover-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_unselected-hover-label-text-color: var(
     --md-outlined-segmented-button-unselected-hover-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_unselected-hover-state-layer-color: var(
     --md-outlined-segmented-button-unselected-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_unselected-label-text-color: var(
     --md-outlined-segmented-button-unselected-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_unselected-pressed-icon-color: var(
     --md-outlined-segmented-button-unselected-pressed-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_unselected-pressed-label-text-color: var(
     --md-outlined-segmented-button-unselected-pressed-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_unselected-pressed-state-layer-color: var(
     --md-outlined-segmented-button-unselected-pressed-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_icon-size: var(--md-outlined-segmented-button-icon-size, 18px);
   --_selected-icon-color: var(
     --md-outlined-segmented-button-selected-icon-color,
-    var(--md-sys-color-on-secondary-container, #1d192b)
+    rgb(var(--md-sys-color-on-secondary-container, 29 25 43))
   );
   --_unselected-icon-color: var(
     --md-outlined-segmented-button-unselected-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_shape-start-start: var(
     --md-outlined-segmented-button-shape-start-start,
diff --git a/packages/actify/src/components/Select/actify.module.css b/packages/actify/src/components/Select/actify.module.css
index dc9a4f8..eff1b09 100644
--- a/packages/actify/src/components/Select/actify.module.css
+++ b/packages/actify/src/components/Select/actify.module.css
@@ -4,7 +4,7 @@
   min-width: 210px;
   --_text-field-active-indicator-color: var(
     --md-filled-select-text-field-active-indicator-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-active-indicator-height: var(
     --md-filled-select-text-field-active-indicator-height,
@@ -12,11 +12,11 @@
   );
   --_text-field-container-color: var(
     --md-filled-select-text-field-container-color,
-    var(--md-sys-color-surface-container-highest, #e6e0e9)
+    rgb(var(--md-sys-color-surface-container-highest))
   );
   --_text-field-disabled-active-indicator-color: var(
     --md-filled-select-text-field-disabled-active-indicator-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-active-indicator-height: var(
     --md-filled-select-text-field-disabled-active-indicator-height,
@@ -28,7 +28,7 @@
   );
   --_text-field-disabled-container-color: var(
     --md-filled-select-text-field-disabled-container-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-container-opacity: var(
     --md-filled-select-text-field-disabled-container-opacity,
@@ -36,7 +36,7 @@
   );
   --_text-field-disabled-input-text-color: var(
     --md-filled-select-text-field-disabled-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-input-text-opacity: var(
     --md-filled-select-text-field-disabled-input-text-opacity,
@@ -44,7 +44,7 @@
   );
   --_text-field-disabled-label-text-color: var(
     --md-filled-select-text-field-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-label-text-opacity: var(
     --md-filled-select-text-field-disabled-label-text-opacity,
@@ -52,7 +52,7 @@
   );
   --_text-field-disabled-leading-icon-color: var(
     --md-filled-select-text-field-disabled-leading-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-leading-icon-opacity: var(
     --md-filled-select-text-field-disabled-leading-icon-opacity,
@@ -60,7 +60,7 @@
   );
   --_text-field-disabled-supporting-text-color: var(
     --md-filled-select-text-field-disabled-supporting-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-supporting-text-opacity: var(
     --md-filled-select-text-field-disabled-supporting-text-opacity,
@@ -68,7 +68,7 @@
   );
   --_text-field-disabled-trailing-icon-color: var(
     --md-filled-select-text-field-disabled-trailing-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-trailing-icon-opacity: var(
     --md-filled-select-text-field-disabled-trailing-icon-opacity,
@@ -76,51 +76,51 @@
   );
   --_text-field-error-active-indicator-color: var(
     --md-filled-select-text-field-error-active-indicator-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-focus-active-indicator-color: var(
     --md-filled-select-text-field-error-focus-active-indicator-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-focus-input-text-color: var(
     --md-filled-select-text-field-error-focus-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-error-focus-label-text-color: var(
     --md-filled-select-text-field-error-focus-label-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-focus-leading-icon-color: var(
     --md-filled-select-text-field-error-focus-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-error-focus-supporting-text-color: var(
     --md-filled-select-text-field-error-focus-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-focus-trailing-icon-color: var(
     --md-filled-select-text-field-error-focus-trailing-icon-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-hover-active-indicator-color: var(
     --md-filled-select-text-field-error-hover-active-indicator-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_text-field-error-hover-input-text-color: var(
     --md-filled-select-text-field-error-hover-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-error-hover-label-text-color: var(
     --md-filled-select-text-field-error-hover-label-text-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_text-field-error-hover-leading-icon-color: var(
     --md-filled-select-text-field-error-hover-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-error-hover-state-layer-color: var(
     --md-filled-select-text-field-error-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-error-hover-state-layer-opacity: var(
     --md-filled-select-text-field-error-hover-state-layer-opacity,
@@ -128,35 +128,35 @@
   );
   --_text-field-error-hover-supporting-text-color: var(
     --md-filled-select-text-field-error-hover-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-hover-trailing-icon-color: var(
     --md-filled-select-text-field-error-hover-trailing-icon-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_text-field-error-input-text-color: var(
     --md-filled-select-text-field-error-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-error-label-text-color: var(
     --md-filled-select-text-field-error-label-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-leading-icon-color: var(
     --md-filled-select-text-field-error-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-error-supporting-text-color: var(
     --md-filled-select-text-field-error-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-trailing-icon-color: var(
     --md-filled-select-text-field-error-trailing-icon-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-focus-active-indicator-color: var(
     --md-filled-select-text-field-focus-active-indicator-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_text-field-focus-active-indicator-height: var(
     --md-filled-select-text-field-focus-active-indicator-height,
@@ -164,27 +164,27 @@
   );
   --_text-field-focus-input-text-color: var(
     --md-filled-select-text-field-focus-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-focus-label-text-color: var(
     --md-filled-select-text-field-focus-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_text-field-focus-leading-icon-color: var(
     --md-filled-select-text-field-focus-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-focus-supporting-text-color: var(
     --md-filled-select-text-field-focus-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-focus-trailing-icon-color: var(
     --md-filled-select-text-field-focus-trailing-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_text-field-hover-active-indicator-color: var(
     --md-filled-select-text-field-hover-active-indicator-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-hover-active-indicator-height: var(
     --md-filled-select-text-field-hover-active-indicator-height,
@@ -192,19 +192,19 @@
   );
   --_text-field-hover-input-text-color: var(
     --md-filled-select-text-field-hover-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-hover-label-text-color: var(
     --md-filled-select-text-field-hover-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-hover-leading-icon-color: var(
     --md-filled-select-text-field-hover-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-hover-state-layer-color: var(
     --md-filled-select-text-field-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-hover-state-layer-opacity: var(
     --md-filled-select-text-field-hover-state-layer-opacity,
@@ -212,15 +212,15 @@
   );
   --_text-field-hover-supporting-text-color: var(
     --md-filled-select-text-field-hover-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-hover-trailing-icon-color: var(
     --md-filled-select-text-field-hover-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-input-text-color: var(
     --md-filled-select-text-field-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-input-text-font: var(
     --md-filled-select-text-field-input-text-font,
@@ -246,7 +246,7 @@
   );
   --_text-field-label-text-color: var(
     --md-filled-select-text-field-label-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-label-text-font: var(
     --md-filled-select-text-field-label-text-font,
@@ -280,7 +280,7 @@
   );
   --_text-field-leading-icon-color: var(
     --md-filled-select-text-field-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-leading-icon-size: var(
     --md-filled-select-text-field-leading-icon-size,
@@ -288,7 +288,7 @@
   );
   --_text-field-supporting-text-color: var(
     --md-filled-select-text-field-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-supporting-text-font: var(
     --md-filled-select-text-field-supporting-text-font,
@@ -314,7 +314,7 @@
   );
   --_text-field-trailing-icon-color: var(
     --md-filled-select-text-field-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-trailing-icon-size: var(
     --md-filled-select-text-field-trailing-icon-size,
@@ -568,7 +568,7 @@
   min-width: 210px;
   --_text-field-disabled-input-text-color: var(
     --md-outlined-select-text-field-disabled-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-input-text-opacity: var(
     --md-outlined-select-text-field-disabled-input-text-opacity,
@@ -576,7 +576,7 @@
   );
   --_text-field-disabled-label-text-color: var(
     --md-outlined-select-text-field-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-label-text-opacity: var(
     --md-outlined-select-text-field-disabled-label-text-opacity,
@@ -584,7 +584,7 @@
   );
   --_text-field-disabled-leading-icon-color: var(
     --md-outlined-select-text-field-disabled-leading-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-leading-icon-opacity: var(
     --md-outlined-select-text-field-disabled-leading-icon-opacity,
@@ -592,7 +592,7 @@
   );
   --_text-field-disabled-outline-color: var(
     --md-outlined-select-text-field-disabled-outline-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-outline-opacity: var(
     --md-outlined-select-text-field-disabled-outline-opacity,
@@ -604,7 +604,7 @@
   );
   --_text-field-disabled-supporting-text-color: var(
     --md-outlined-select-text-field-disabled-supporting-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-supporting-text-opacity: var(
     --md-outlined-select-text-field-disabled-supporting-text-opacity,
@@ -612,7 +612,7 @@
   );
   --_text-field-disabled-trailing-icon-color: var(
     --md-outlined-select-text-field-disabled-trailing-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-disabled-trailing-icon-opacity: var(
     --md-outlined-select-text-field-disabled-trailing-icon-opacity,
@@ -620,91 +620,91 @@
   );
   --_text-field-error-focus-input-text-color: var(
     --md-outlined-select-text-field-error-focus-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-error-focus-label-text-color: var(
     --md-outlined-select-text-field-error-focus-label-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-focus-leading-icon-color: var(
     --md-outlined-select-text-field-error-focus-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-error-focus-outline-color: var(
     --md-outlined-select-text-field-error-focus-outline-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-focus-supporting-text-color: var(
     --md-outlined-select-text-field-error-focus-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-focus-trailing-icon-color: var(
     --md-outlined-select-text-field-error-focus-trailing-icon-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-hover-input-text-color: var(
     --md-outlined-select-text-field-error-hover-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-error-hover-label-text-color: var(
     --md-outlined-select-text-field-error-hover-label-text-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_text-field-error-hover-leading-icon-color: var(
     --md-outlined-select-text-field-error-hover-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-error-hover-outline-color: var(
     --md-outlined-select-text-field-error-hover-outline-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_text-field-error-hover-supporting-text-color: var(
     --md-outlined-select-text-field-error-hover-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-hover-trailing-icon-color: var(
     --md-outlined-select-text-field-error-hover-trailing-icon-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_text-field-error-input-text-color: var(
     --md-outlined-select-text-field-error-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-error-label-text-color: var(
     --md-outlined-select-text-field-error-label-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-leading-icon-color: var(
     --md-outlined-select-text-field-error-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-error-outline-color: var(
     --md-outlined-select-text-field-error-outline-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-supporting-text-color: var(
     --md-outlined-select-text-field-error-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-error-trailing-icon-color: var(
     --md-outlined-select-text-field-error-trailing-icon-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_text-field-focus-input-text-color: var(
     --md-outlined-select-text-field-focus-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-focus-label-text-color: var(
     --md-outlined-select-text-field-focus-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_text-field-focus-leading-icon-color: var(
     --md-outlined-select-text-field-focus-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-focus-outline-color: var(
     --md-outlined-select-text-field-focus-outline-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_text-field-focus-outline-width: var(
     --md-outlined-select-text-field-focus-outline-width,
@@ -712,27 +712,27 @@
   );
   --_text-field-focus-supporting-text-color: var(
     --md-outlined-select-text-field-focus-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-focus-trailing-icon-color: var(
     --md-outlined-select-text-field-focus-trailing-icon-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_text-field-hover-input-text-color: var(
     --md-outlined-select-text-field-hover-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-hover-label-text-color: var(
     --md-outlined-select-text-field-hover-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-hover-leading-icon-color: var(
     --md-outlined-select-text-field-hover-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-hover-outline-color: var(
     --md-outlined-select-text-field-hover-outline-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-hover-outline-width: var(
     --md-outlined-select-text-field-hover-outline-width,
@@ -740,15 +740,15 @@
   );
   --_text-field-hover-supporting-text-color: var(
     --md-outlined-select-text-field-hover-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-hover-trailing-icon-color: var(
     --md-outlined-select-text-field-hover-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-input-text-color: var(
     --md-outlined-select-text-field-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_text-field-input-text-font: var(
     --md-outlined-select-text-field-input-text-font,
@@ -774,7 +774,7 @@
   );
   --_text-field-label-text-color: var(
     --md-outlined-select-text-field-label-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-label-text-font: var(
     --md-outlined-select-text-field-label-text-font,
@@ -808,7 +808,7 @@
   );
   --_text-field-leading-icon-color: var(
     --md-outlined-select-text-field-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-leading-icon-size: var(
     --md-outlined-select-text-field-leading-icon-size,
@@ -816,7 +816,7 @@
   );
   --_text-field-outline-color: var(
     --md-outlined-select-text-field-outline-color,
-    var(--md-sys-color-outline, #79747e)
+    rgb(var(--md-sys-color-outline))
   );
   --_text-field-outline-width: var(
     --md-outlined-select-text-field-outline-width,
@@ -824,7 +824,7 @@
   );
   --_text-field-supporting-text-color: var(
     --md-outlined-select-text-field-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-supporting-text-font: var(
     --md-outlined-select-text-field-supporting-text-font,
@@ -850,7 +850,7 @@
   );
   --_text-field-trailing-icon-color: var(
     --md-outlined-select-text-field-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_text-field-trailing-icon-size: var(
     --md-outlined-select-text-field-trailing-icon-size,
@@ -1089,7 +1089,7 @@
   display: flex;
   --md-ripple-hover-color: var(
     --md-menu-item-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --md-ripple-hover-opacity: var(
     --md-menu-item-hover-state-layer-opacity,
@@ -1097,7 +1097,7 @@
   );
   --md-ripple-pressed-color: var(
     --md-menu-item-pressed-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --md-ripple-pressed-opacity: var(
     --md-menu-item-pressed-state-layer-opacity,
@@ -1115,7 +1115,7 @@
   &.selected {
     background-color: var(
       --md-menu-item-selected-container-color,
-      var(--md-sys-color-secondary-container, #e8def8)
+      rgb(var(--md-sys-color-secondary-container))
     );
   }
   &:not(.disabled) {
diff --git a/packages/actify/src/components/Sliders/actify.module.css b/packages/actify/src/components/Sliders/actify.module.css
index c1bb85a..2f332d6 100644
--- a/packages/actify/src/components/Sliders/actify.module.css
+++ b/packages/actify/src/components/Sliders/actify.module.css
@@ -1,7 +1,7 @@
 .slider {
   --_active-track-color: var(
     --md-slider-active-track-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_active-track-height: var(--md-slider-active-track-height, 4px);
   --_active-track-shape: var(
@@ -10,7 +10,7 @@
   );
   --_disabled-active-track-color: var(
     --md-slider-disabled-active-track-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-active-track-opacity: var(
     --md-slider-disabled-active-track-opacity,
@@ -18,12 +18,12 @@
   );
   --_disabled-handle-color: var(
     --md-slider-disabled-handle-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);
   --_disabled-inactive-track-color: var(
     --md-slider-disabled-inactive-track-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_disabled-inactive-track-opacity: var(
     --md-slider-disabled-inactive-track-opacity,
@@ -31,17 +31,17 @@
   );
   --_focus-handle-color: var(
     --md-slider-focus-handle-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_handle-color: var(
     --md-slider-handle-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_handle-elevation: var(--md-slider-handle-elevation, 1);
   --_handle-height: var(--md-slider-handle-height, 20px);
   --_handle-shadow-color: var(
     --md-slider-handle-shadow-color,
-    var(--md-sys-color-shadow, #000)
+    rgb(var(--md-sys-color-shadow, 0 0 0))
   );
   --_handle-shape: var(
     --md-slider-handle-shape,
@@ -50,11 +50,11 @@
   --_handle-width: var(--md-slider-handle-width, 20px);
   --_hover-handle-color: var(
     --md-slider-hover-handle-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-state-layer-color: var(
     --md-slider-hover-state-layer-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_hover-state-layer-opacity: var(
     --md-slider-hover-state-layer-opacity,
@@ -62,7 +62,7 @@
   );
   --_inactive-track-color: var(
     --md-slider-inactive-track-color,
-    var(--md-sys-color-surface-container-highest, #e6e0e9)
+    rgb(var(--md-sys-color-surface-container-highest, 230 224 233))
   );
   --_inactive-track-height: var(--md-slider-inactive-track-height, 4px);
   --_inactive-track-shape: var(
@@ -71,16 +71,16 @@
   );
   --_label-container-color: var(
     --md-slider-label-container-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_label-container-height: var(--md-slider-label-container-height, 28px);
   --_pressed-handle-color: var(
     --md-slider-pressed-handle-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_pressed-state-layer-color: var(
     --md-slider-pressed-state-layer-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary, 103 80 164))
   );
   --_pressed-state-layer-opacity: var(
     --md-slider-pressed-state-layer-opacity,
@@ -89,7 +89,7 @@
   --_state-layer-size: var(--md-slider-state-layer-size, 40px);
   --_with-overlap-handle-outline-color: var(
     --md-slider-with-overlap-handle-outline-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_with-overlap-handle-outline-width: var(
     --md-slider-with-overlap-handle-outline-width,
@@ -97,7 +97,7 @@
   );
   --_with-tick-marks-active-container-color: var(
     --md-slider-with-tick-marks-active-container-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_with-tick-marks-container-size: var(
     --md-slider-with-tick-marks-container-size,
@@ -105,15 +105,15 @@
   );
   --_with-tick-marks-disabled-container-color: var(
     --md-slider-with-tick-marks-disabled-container-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface, 29 27 32))
   );
   --_with-tick-marks-inactive-container-color: var(
     --md-slider-with-tick-marks-inactive-container-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant, 73 69 79))
   );
   --_label-text-color: var(
     --md-slider-label-text-color,
-    var(--md-sys-color-on-primary, #fff)
+    rgb(var(--md-sys-color-on-primary, 255 255 255))
   );
   --_label-text-font: var(
     --md-slider-label-text-font,
diff --git a/packages/actify/src/components/Switch/actify.module.css b/packages/actify/src/components/Switch/actify.module.css
index 7177ed4..1760b5f 100644
--- a/packages/actify/src/components/Switch/actify.module.css
+++ b/packages/actify/src/components/Switch/actify.module.css
@@ -104,7 +104,7 @@
     height: var(--md-switch-selected-icon-size, 16px);
     color: var(
       --md-switch-selected-icon-color,
-      var(--md-sys-color-on-primary-container, #21005d)
+      rgb(var(--md-sys-color-on-primary-container))
     );
   }
   &.off {
@@ -112,7 +112,7 @@
     height: var(--md-switch-icon-size, 16px);
     color: var(
       --md-switch-icon-color,
-      var(--md-sys-color-surface-container-highest, #e6e0e9)
+      rgb(var(--md-sys-color-surface-container-highest))
     );
   }
 }
@@ -143,7 +143,7 @@
   &.selected .track:before {
     background-color: var(
       --md-switch-selected-track-color,
-      var(--md-sys-color-primary, #6750a4)
+      rgb(var(--md-sys-color-primary))
     );
   }
   &.selected .handle-container {
@@ -154,11 +154,11 @@
   &.selected .ripple {
     --md-ripple-hover-color: var(
       --md-switch-selected-hover-state-layer-color,
-      var(--md-sys-color-primary, #6750a4)
+      rgb(var(--md-sys-color-primary))
     );
     --md-ripple-pressed-color: var(
       --md-switch-selected-pressed-state-layer-color,
-      var(--md-sys-color-primary, #6750a4)
+      rgb(var(--md-sys-color-primary))
     );
     --md-ripple-hover-opacity: var(
       --md-switch-selected-hover-state-layer-opacity,
@@ -175,7 +175,7 @@
     &:before {
       background-color: var(
         --md-switch-selected-handle-color,
-        var(--md-sys-color-on-primary, #fff)
+        rgb(var(--md-sys-color-on-primary))
       );
     }
   }
@@ -198,11 +198,11 @@
   &.unselected .track:before {
     background-color: var(
       --md-switch-track-color,
-      var(--md-sys-color-surface-container-highest, #e6e0e9)
+      rgb(var(--md-sys-color-surface-container-highest))
     );
     border-color: var(
       --md-switch-track-outline-color,
-      var(--md-sys-color-outline, #79747e)
+      rgb(var(--md-sys-color-outline))
     );
     border-style: solid;
     border-width: var(--md-switch-track-outline-width, 2px);
@@ -215,11 +215,11 @@
   &.unselected .ripple {
     --md-ripple-hover-color: var(
       --md-switch-hover-state-layer-color,
-      var(--md-sys-color-on-surface, #1d1b20)
+      rgb(var(--md-sys-color-on-surface))
     );
     --md-ripple-pressed-color: var(
       --md-switch-pressed-state-layer-color,
-      var(--md-sys-color-on-surface, #1d1b20)
+      rgb(var(--md-sys-color-on-surface))
     );
     --md-ripple-hover-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);
     --md-ripple-pressed-opacity: var(
@@ -230,21 +230,21 @@
   &.unselected .handle:before {
     background-color: var(
       --md-switch-handle-color,
-      var(--md-sys-color-outline, #79747e)
+      rgb(var(--md-sys-color-outline))
     );
   }
   &.selected:hover .handle:before,
   &.selected:focus-within .handle:before {
     background-color: var(
       --md-switch-selected-focus-handle-color,
-      var(--md-sys-color-primary-container, #eaddff)
+      rgb(var(--md-sys-color-primary-container))
     );
   }
   &.unselected:hover .handle:before,
   &.unselected:focus-within .handle:before {
     background-color: var(
       --md-switch-focus-handle-color,
-      var(--md-sys-color-on-surface-variant, #49454f)
+      rgb(var(--md-sys-color-on-surface-variant))
     );
   }
   &.disabled .track {
@@ -253,11 +253,11 @@
     &:before {
       background-color: var(
         --md-switch-disabled-track-color,
-        var(--md-sys-color-surface-container-highest, #e6e0e9)
+        rgb(var(--md-sys-color-surface-container-highest))
       );
       border-color: var(
         --md-switch-disabled-track-outline-color,
-        var(--md-sys-color-on-surface, #1d1b20)
+        rgb(var(--md-sys-color-on-surface))
       );
       transition: none 0s ease 0s;
       opacity: var(--md-switch-disabled-track-opacity, 0.12);
@@ -266,7 +266,7 @@
   &.unselected.disabled .handle:before {
     background-color: var(
       --md-switch-disabled-handle-color,
-      var(--md-sys-color-on-surface, #1d1b20)
+      rgb(var(--md-sys-color-on-surface))
     );
     opacity: var(--md-switch-disabled-handle-opacity, 0.38);
   }
diff --git a/packages/actify/src/components/Table/Thead.tsx b/packages/actify/src/components/Table/Thead.tsx
index 72321a0..8dcc44e 100644
--- a/packages/actify/src/components/Table/Thead.tsx
+++ b/packages/actify/src/components/Table/Thead.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { tv } from 'tailwind-variants'
 
 const root = tv({
-  base: 'border-b text-xs bg-inverse-surface/25'
+  base: 'border-b text-xs bg-surface'
 })
 
 const Thead = ({ className, children }: React.ComponentProps<'thead'>) => {
diff --git a/packages/actify/src/components/TextFields/text-field.module.css b/packages/actify/src/components/TextFields/text-field.module.css
index 5b4b345..6457c05 100644
--- a/packages/actify/src/components/TextFields/text-field.module.css
+++ b/packages/actify/src/components/TextFields/text-field.module.css
@@ -21,11 +21,11 @@
   );
   --_focus-caret-color: var(
     --md-filled-text-field-focus-caret-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_active-indicator-color: var(
     --md-filled-text-field-active-indicator-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_active-indicator-height: var(
     --md-filled-text-field-active-indicator-height,
@@ -33,11 +33,11 @@
   );
   --_caret-color: var(
     --md-filled-text-field-caret-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_container-color: var(
     --md-filled-text-field-container-color,
-    var(--md-sys-color-surface-container-highest, #e6e0e9)
+    rgb(var(--md-sys-color-surface-container-highest))
   );
   --_container-shape-start-start: var(
     --md-filled-text-field-container-shape-start-start,
@@ -57,7 +57,7 @@
   );
   --_disabled-active-indicator-color: var(
     --md-filled-text-field-disabled-active-indicator-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-active-indicator-height: var(
     --md-filled-text-field-disabled-active-indicator-height,
@@ -69,7 +69,7 @@
   );
   --_disabled-container-color: var(
     --md-filled-text-field-disabled-container-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-container-opacity: var(
     --md-filled-text-field-disabled-container-opacity,
@@ -77,7 +77,7 @@
   );
   --_disabled-input-text-color: var(
     --md-filled-text-field-disabled-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-input-text-opacity: var(
     --md-filled-text-field-disabled-input-text-opacity,
@@ -85,7 +85,7 @@
   );
   --_disabled-label-text-color: var(
     --md-filled-text-field-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-label-text-opacity: var(
     --md-filled-text-field-disabled-label-text-opacity,
@@ -93,7 +93,7 @@
   );
   --_disabled-leading-icon-color: var(
     --md-filled-text-field-disabled-leading-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-leading-icon-opacity: var(
     --md-filled-text-field-disabled-leading-icon-opacity,
@@ -101,7 +101,7 @@
   );
   --_disabled-supporting-text-color: var(
     --md-filled-text-field-disabled-supporting-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-supporting-text-opacity: var(
     --md-filled-text-field-disabled-supporting-text-opacity,
@@ -109,7 +109,7 @@
   );
   --_disabled-trailing-icon-color: var(
     --md-filled-text-field-disabled-trailing-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-trailing-icon-opacity: var(
     --md-filled-text-field-disabled-trailing-icon-opacity,
@@ -117,55 +117,55 @@
   );
   --_error-active-indicator-color: var(
     --md-filled-text-field-error-active-indicator-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-focus-active-indicator-color: var(
     --md-filled-text-field-error-focus-active-indicator-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-focus-caret-color: var(
     --md-filled-text-field-error-focus-caret-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-focus-input-text-color: var(
     --md-filled-text-field-error-focus-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_error-focus-label-text-color: var(
     --md-filled-text-field-error-focus-label-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-focus-leading-icon-color: var(
     --md-filled-text-field-error-focus-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_error-focus-supporting-text-color: var(
     --md-filled-text-field-error-focus-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-focus-trailing-icon-color: var(
     --md-filled-text-field-error-focus-trailing-icon-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-hover-active-indicator-color: var(
     --md-filled-text-field-error-hover-active-indicator-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_error-hover-input-text-color: var(
     --md-filled-text-field-error-hover-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_error-hover-label-text-color: var(
     --md-filled-text-field-error-hover-label-text-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_error-hover-leading-icon-color: var(
     --md-filled-text-field-error-hover-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_error-hover-state-layer-color: var(
     --md-filled-text-field-error-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_error-hover-state-layer-opacity: var(
     --md-filled-text-field-error-hover-state-layer-opacity,
@@ -173,35 +173,35 @@
   );
   --_error-hover-supporting-text-color: var(
     --md-filled-text-field-error-hover-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-hover-trailing-icon-color: var(
     --md-filled-text-field-error-hover-trailing-icon-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_error-input-text-color: var(
     --md-filled-text-field-error-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_error-label-text-color: var(
     --md-filled-text-field-error-label-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-leading-icon-color: var(
     --md-filled-text-field-error-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_error-supporting-text-color: var(
     --md-filled-text-field-error-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-trailing-icon-color: var(
     --md-filled-text-field-error-trailing-icon-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_focus-active-indicator-color: var(
     --md-filled-text-field-focus-active-indicator-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_focus-active-indicator-height: var(
     --md-filled-text-field-focus-active-indicator-height,
@@ -209,27 +209,27 @@
   );
   --_focus-input-text-color: var(
     --md-filled-text-field-focus-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_focus-label-text-color: var(
     --md-filled-text-field-focus-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_focus-leading-icon-color: var(
     --md-filled-text-field-focus-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_focus-supporting-text-color: var(
     --md-filled-text-field-focus-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_focus-trailing-icon-color: var(
     --md-filled-text-field-focus-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_hover-active-indicator-color: var(
     --md-filled-text-field-hover-active-indicator-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_hover-active-indicator-height: var(
     --md-filled-text-field-hover-active-indicator-height,
@@ -237,19 +237,19 @@
   );
   --_hover-input-text-color: var(
     --md-filled-text-field-hover-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_hover-label-text-color: var(
     --md-filled-text-field-hover-label-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_hover-leading-icon-color: var(
     --md-filled-text-field-hover-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_hover-state-layer-color: var(
     --md-filled-text-field-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_hover-state-layer-opacity: var(
     --md-filled-text-field-hover-state-layer-opacity,
@@ -257,15 +257,15 @@
   );
   --_hover-supporting-text-color: var(
     --md-filled-text-field-hover-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_hover-trailing-icon-color: var(
     --md-filled-text-field-hover-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_input-text-color: var(
     --md-filled-text-field-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_input-text-font: var(
     --md-filled-text-field-input-text-font,
@@ -280,11 +280,11 @@
   );
   --_input-text-placeholder-color: var(
     --md-filled-text-field-input-text-placeholder-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_input-text-prefix-color: var(
     --md-filled-text-field-input-text-prefix-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_input-text-size: var(
     --md-filled-text-field-input-text-size,
@@ -292,7 +292,7 @@
   );
   --_input-text-suffix-color: var(
     --md-filled-text-field-input-text-suffix-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_input-text-weight: var(
     --md-filled-text-field-input-text-weight,
@@ -303,7 +303,7 @@
   );
   --_label-text-color: var(
     --md-filled-text-field-label-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_label-text-font: var(
     --md-filled-text-field-label-text-font,
@@ -337,12 +337,12 @@
   );
   --_leading-icon-color: var(
     --md-filled-text-field-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 24px);
   --_supporting-text-color: var(
     --md-filled-text-field-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_supporting-text-font: var(
     --md-filled-text-field-supporting-text-font,
@@ -380,7 +380,7 @@
   );
   --_trailing-icon-color: var(
     --md-filled-text-field-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);
   --md-filled-field-active-indicator-color: var(--_active-indicator-color);
@@ -579,16 +579,16 @@
   );
   --_focus-caret-color: var(
     --md-outlined-text-field-focus-caret-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_caret-color: var(
     --md-outlined-text-field-caret-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_container-shape: var(--md-outlined-text-field-container-shape, 4px);
   --_disabled-input-text-color: var(
     --md-outlined-text-field-disabled-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-input-text-opacity: var(
     --md-outlined-text-field-disabled-input-text-opacity,
@@ -596,7 +596,7 @@
   );
   --_disabled-label-text-color: var(
     --md-outlined-text-field-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-label-text-opacity: var(
     --md-outlined-text-field-disabled-label-text-opacity,
@@ -604,7 +604,7 @@
   );
   --_disabled-leading-icon-color: var(
     --md-outlined-text-field-disabled-leading-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-leading-icon-opacity: var(
     --md-outlined-text-field-disabled-leading-icon-opacity,
@@ -612,7 +612,7 @@
   );
   --_disabled-outline-color: var(
     --md-outlined-text-field-disabled-outline-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-outline-opacity: var(
     --md-outlined-text-field-disabled-outline-opacity,
@@ -624,7 +624,7 @@
   );
   --_disabled-supporting-text-color: var(
     --md-outlined-text-field-disabled-supporting-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-supporting-text-opacity: var(
     --md-outlined-text-field-disabled-supporting-text-opacity,
@@ -632,7 +632,7 @@
   );
   --_disabled-trailing-icon-color: var(
     --md-outlined-text-field-disabled-trailing-icon-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_disabled-trailing-icon-opacity: var(
     --md-outlined-text-field-disabled-trailing-icon-opacity,
@@ -640,95 +640,95 @@
   );
   --_error-focus-caret-color: var(
     --md-outlined-text-field-error-focus-caret-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-focus-input-text-color: var(
     --md-outlined-text-field-error-focus-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_error-focus-label-text-color: var(
     --md-outlined-text-field-error-focus-label-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-focus-leading-icon-color: var(
     --md-outlined-text-field-error-focus-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_error-focus-outline-color: var(
     --md-outlined-text-field-error-focus-outline-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-focus-supporting-text-color: var(
     --md-outlined-text-field-error-focus-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-focus-trailing-icon-color: var(
     --md-outlined-text-field-error-focus-trailing-icon-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-hover-input-text-color: var(
     --md-outlined-text-field-error-hover-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_error-hover-label-text-color: var(
     --md-outlined-text-field-error-hover-label-text-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_error-hover-leading-icon-color: var(
     --md-outlined-text-field-error-hover-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_error-hover-outline-color: var(
     --md-outlined-text-field-error-hover-outline-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_error-hover-supporting-text-color: var(
     --md-outlined-text-field-error-hover-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-hover-trailing-icon-color: var(
     --md-outlined-text-field-error-hover-trailing-icon-color,
-    var(--md-sys-color-on-error-container, #410e0b)
+    rgb(var(--md-sys-color-on-error-container))
   );
   --_error-input-text-color: var(
     --md-outlined-text-field-error-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_error-label-text-color: var(
     --md-outlined-text-field-error-label-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-leading-icon-color: var(
     --md-outlined-text-field-error-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_error-outline-color: var(
     --md-outlined-text-field-error-outline-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-supporting-text-color: var(
     --md-outlined-text-field-error-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_error-trailing-icon-color: var(
     --md-outlined-text-field-error-trailing-icon-color,
-    var(--md-sys-color-error, #b3261e)
+    rgb(var(--md-sys-color-error))
   );
   --_focus-input-text-color: var(
     --md-outlined-text-field-focus-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_focus-label-text-color: var(
     --md-outlined-text-field-focus-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_focus-leading-icon-color: var(
     --md-outlined-text-field-focus-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_focus-outline-color: var(
     --md-outlined-text-field-focus-outline-color,
-    var(--md-sys-color-primary, #6750a4)
+    rgb(var(--md-sys-color-primary))
   );
   --_focus-outline-width: var(
     --md-outlined-text-field-focus-outline-width,
@@ -736,27 +736,27 @@
   );
   --_focus-supporting-text-color: var(
     --md-outlined-text-field-focus-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_focus-trailing-icon-color: var(
     --md-outlined-text-field-focus-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_hover-input-text-color: var(
     --md-outlined-text-field-hover-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_hover-label-text-color: var(
     --md-outlined-text-field-hover-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_hover-leading-icon-color: var(
     --md-outlined-text-field-hover-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_hover-outline-color: var(
     --md-outlined-text-field-hover-outline-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_hover-outline-width: var(
     --md-outlined-text-field-hover-outline-width,
@@ -764,15 +764,15 @@
   );
   --_hover-supporting-text-color: var(
     --md-outlined-text-field-hover-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_hover-trailing-icon-color: var(
     --md-outlined-text-field-hover-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_input-text-color: var(
     --md-outlined-text-field-input-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
+    rgb(var(--md-sys-color-on-surface))
   );
   --_input-text-font: var(
     --md-outlined-text-field-input-text-font,
@@ -787,11 +787,11 @@
   );
   --_input-text-placeholder-color: var(
     --md-outlined-text-field-input-text-placeholder-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_input-text-prefix-color: var(
     --md-outlined-text-field-input-text-prefix-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_input-text-size: var(
     --md-outlined-text-field-input-text-size,
@@ -799,7 +799,7 @@
   );
   --_input-text-suffix-color: var(
     --md-outlined-text-field-input-text-suffix-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_input-text-weight: var(
     --md-outlined-text-field-input-text-weight,
@@ -810,7 +810,7 @@
   );
   --_label-text-color: var(
     --md-outlined-text-field-label-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_label-text-font: var(
     --md-outlined-text-field-label-text-font,
@@ -844,17 +844,17 @@
   );
   --_leading-icon-color: var(
     --md-outlined-text-field-leading-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_leading-icon-size: var(--md-outlined-text-field-leading-icon-size, 24px);
   --_outline-color: var(
     --md-outlined-text-field-outline-color,
-    var(--md-sys-color-outline, #79747e)
+    rgb(var(--md-sys-color-outline))
   );
   --_outline-width: var(--md-outlined-text-field-outline-width, 1px);
   --_supporting-text-color: var(
     --md-outlined-text-field-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_supporting-text-font: var(
     --md-outlined-text-field-supporting-text-font,
@@ -892,7 +892,7 @@
   );
   --_trailing-icon-color: var(
     --md-outlined-text-field-trailing-icon-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
+    rgb(var(--md-sys-color-on-surface-variant))
   );
   --_trailing-icon-size: var(--md-outlined-text-field-trailing-icon-size, 24px);
   --_container-shape-start-start: var(