@ecopages/radiant-themes 0.2.0 → 0.2.2

package/dist/compiled/themes/macos.css

@@ -24,22 +24,21 @@
   --text-3xl: var(--text-3xl);
   --text-4xl: var(--text-4xl);
   --text-5xl: var(--text-5xl);
-  --font-weight-medium: var(--weight-medium);
   --font-weight-semibold: var(--weight-semibold);
   --opacity-disabled: var(--opacity-disabled);
   --opacity-muted: var(--opacity-muted);
-  --color-primary: var(--primary);
-  --color-primary-container: var(--primary-container);
-  --color-on-primary-container: var(--on-primary-container);
   --color-surface: var(--surface);
   --color-on-surface: var(--on-surface);
-  --color-surface-container-low: var(--surface-container-low);
-  --color-on-surface-container-low: var(--on-surface-container-low);
-  --color-surface-container: var(--surface-container);
   --color-border: var(--border);
+  --color-focus-ring: var(--focus-ring);
   --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
   --radius-none: var(--border-radius-none);
   --radius-xs: var(--border-radius-xs);
+  --radius-sm: var(--border-radius-sm);
+  --radius-md: var(--border-radius-md);
+  --radius-2xl: var(--border-radius-2xl);
+  --radius-full: var(--border-radius-full);
   --radius-control: var(--radius-control);
   --radius-container: var(--radius-container);
   --radius-pill: var(--radius-pill);
@@ -252,6 +251,14 @@
   --radius-container: var(--border-radius-lg);
   --radius-pill: var(--border-radius-full);
 }
+@layer components {
+  :root .rui-input-group .rui-input {
+    border-width: 0;
+    border-radius: 0;
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
 :where(:root) {
   color-scheme: light;
 }
@@ -259,100 +266,129 @@
   color-scheme: dark;
 }
 :where(:root), :root[data-rui-theme='macos'] {
-  --macos-canvas: #f5f5f7;
+  --macos-canvas: #ececec;
   --macos-surface: #ffffff;
-  --macos-subtle: #e9e9ed;
-  --macos-border: #7f7f84;
-  --macos-separator: #d1d1d6;
-  --macos-text: #1d1d1f;
-  --macos-muted: #55555b;
-  --macos-blue: #005fcc;
-  --macos-blue-light: #004da8;
-  --macos-green: #176b35;
-  --macos-red: #a51d2d;
-  --macos-amber: #704500;
-  --macos-purple: #6e3bb5;
+  --macos-subtle: #e3e3e3;
+  --macos-control: #ffffff;
+  --macos-control-pressed: #e5e5e5;
+  --macos-elevated: rgb(246 246 246 / 0.88);
+  --macos-elevated-solid: #f6f6f6;
+  --macos-elevated-edge: rgb(0 0 0 / 0.18);
+  --macos-elevated-highlight: rgb(255 255 255 / 0);
+  --macos-border: #8e8e93;
+  --macos-separator: #d9d9d9;
+  --macos-grid: #e6e6e6;
+  --macos-alternate-row: #f4f5f5;
+  --macos-text: #262626;
+  --macos-muted: #5e5e62;
+  --macos-accent: #007aff;
+  --macos-selection: #0063e1;
+  --macos-selection-text: #ffffff;
+  --macos-unemphasized-selection: #dcdcdc;
+  --macos-blue: #0063e1;
+  --macos-blue-light: #3b8cff;
+  --macos-green: #1e7b34;
+  --macos-red: #d70015;
+  --macos-amber: #9e4700;
+  --macos-purple: #8944ab;
+  --macos-control-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.16), 0 0.5px 1px rgb(0 0 0 / 0.22), 0 1px 1.5px -0.5px rgb(0 0 0 / 0.1);
+  --macos-menu-shadow: 0 0 0 0.5px var(--macos-elevated-edge), 0 10px 30px rgb(0 0 0 / 0.2), 0 2px 6px rgb(0 0 0 / 0.1);
 }
 :where(.dark), :root.dark[data-rui-theme='macos'] {
-  --macos-canvas: #1c1c1e;
-  --macos-surface: #2c2c2e;
-  --macos-subtle: #3a3a3c;
-  --macos-border: #8e8e93;
-  --macos-separator: #3a3a3c;
-  --macos-text: #f5f5f7;
-  --macos-muted: #d1d1d6;
-  --macos-blue: #55a6ff;
-  --macos-blue-light: #8cc2ff;
-  --macos-green: #63d982;
-  --macos-red: #ff7a83;
-  --macos-amber: #ffd166;
-  --macos-purple: #c8a1ff;
+  --macos-canvas: #323232;
+  --macos-surface: #1e1e1e;
+  --macos-subtle: #3d3d3d;
+  --macos-control: #5c5c5e;
+  --macos-control-pressed: #747476;
+  --macos-elevated: rgb(44 44 46 / 0.9);
+  --macos-elevated-solid: #2c2c2e;
+  --macos-elevated-edge: rgb(0 0 0 / 0.6);
+  --macos-elevated-highlight: rgb(255 255 255 / 0.14);
+  --macos-border: #767676;
+  --macos-separator: #484848;
+  --macos-grid: #3a3a3a;
+  --macos-alternate-row: #262626;
+  --macos-text: #dfdfdf;
+  --macos-muted: #a1a1a6;
+  --macos-accent: #0a84ff;
+  --macos-selection: #0058d0;
+  --macos-selection-text: #ffffff;
+  --macos-unemphasized-selection: #464646;
+  --macos-blue: #409cff;
+  --macos-blue-light: #70b4ff;
+  --macos-green: #30d158;
+  --macos-red: #ff6961;
+  --macos-amber: #ffd60a;
+  --macos-purple: #da8fff;
+  --macos-control-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.18), 0 0 0 0.5px rgb(0 0 0 / 0.5), 0 0.5px 1px rgb(0 0 0 / 0.4);
+  --macos-menu-shadow: inset 0 0 0 0.5px var(--macos-elevated-highlight), 0 0 0 0.5px var(--macos-elevated-edge),
+		0 10px 30px rgb(0 0 0 / 0.45);
 }
 :where(:root), :root[data-rui-theme='macos'] {
   --gray-50: #ffffff;
-  --gray-100: #f5f5f7;
-  --gray-200: #e9e9ed;
-  --gray-300: #d1d1d6;
-  --gray-400: #aeaeb2;
+  --gray-100: #f6f6f6;
+  --gray-200: #ececec;
+  --gray-300: #d9d9d9;
+  --gray-400: #b9b9be;
   --gray-500: #8e8e93;
   --gray-600: #6e6e73;
-  --gray-700: #55555b;
-  --gray-800: #363638;
-  --gray-900: #1d1d1f;
+  --gray-700: #5e5e62;
+  --gray-800: #3d3d3d;
+  --gray-900: #262626;
   --gray-950: #000000;
   --primary: var(--macos-blue);
   --on-primary: #ffffff;
   --primary-light: var(--macos-blue-light);
-  --primary-dark: #004591;
-  --primary-container: #dcecff;
-  --on-primary-container: #002f68;
+  --primary-dark: #0050b8;
+  --primary-container: #d9e8ff;
+  --on-primary-container: #002f6c;
   --secondary: var(--macos-purple);
   --on-secondary: #ffffff;
-  --secondary-light: #8154c5;
-  --secondary-dark: #4b277f;
-  --secondary-container: #eee5fb;
-  --on-secondary-container: #35204f;
-  --tertiary: #3a3a3c;
+  --secondary-light: #a35fc6;
+  --secondary-dark: #6a2f88;
+  --secondary-container: #f1e3f8;
+  --on-secondary-container: #3c1a52;
+  --tertiary: #3d3d3d;
   --on-tertiary: #ffffff;
-  --tertiary-container: #e9e9ed;
-  --on-tertiary-container: #1d1d1f;
+  --tertiary-container: var(--macos-subtle);
+  --on-tertiary-container: var(--macos-text);
   --error: var(--macos-red);
   --on-error: #ffffff;
-  --error-light: #c93141;
-  --error-dark: #6c101c;
-  --error-container: #fbe3e5;
-  --on-error-container: #5d1119;
+  --error-light: #ff3b30;
+  --error-dark: #a8000f;
+  --error-container: #fde2e4;
+  --on-error-container: #5c000a;
   --success: var(--macos-green);
   --on-success: #ffffff;
-  --success-light: #238544;
-  --success-dark: #0e4823;
-  --success-container: #e0f3e5;
-  --on-success-container: #143b20;
+  --success-light: #28cd41;
+  --success-dark: #145a25;
+  --success-container: #dcf3e2;
+  --on-success-container: #0b3d1a;
   --info: var(--macos-blue);
   --on-info: #ffffff;
   --info-light: var(--macos-blue-light);
-  --info-dark: #004591;
-  --info-container: #dcecff;
-  --on-info-container: #002f68;
+  --info-dark: #0050b8;
+  --info-container: #d9e8ff;
+  --on-info-container: #002f6c;
   --warning: var(--macos-amber);
   --on-warning: #ffffff;
-  --warning-light: #895900;
-  --warning-dark: #493000;
-  --warning-container: #fff1d0;
-  --on-warning-container: #493000;
+  --warning-light: #ff9500;
+  --warning-dark: #7a3600;
+  --warning-container: #ffedd6;
+  --on-warning-container: #4a2100;
   --neutral: var(--macos-muted);
   --surface: var(--macos-surface);
   --on-surface: var(--macos-text);
   --surface-container-lowest: #ffffff;
-  --on-surface-container-lowest: #1d1d1f;
-  --surface-container-low: var(--macos-canvas);
-  --on-surface-container-low: #1d1d1f;
+  --on-surface-container-lowest: var(--macos-text);
+  --surface-container-low: #f6f6f6;
+  --on-surface-container-low: var(--macos-text);
   --surface-container: var(--macos-subtle);
-  --on-surface-container: #1d1d1f;
-  --surface-container-high: #d1d1d6;
-  --on-surface-container-high: #1d1d1f;
-  --surface-container-highest: #aeaeb2;
-  --on-surface-container-highest: #1d1d1f;
+  --on-surface-container: var(--macos-text);
+  --surface-container-high: #d9d9d9;
+  --on-surface-container-high: var(--macos-text);
+  --surface-container-highest: #b9b9be;
+  --on-surface-container-highest: var(--macos-text);
   --background: var(--macos-canvas);
   --on-background: var(--macos-text);
   --rui-border-color: var(--macos-separator);
@@ -361,77 +397,77 @@
   @supports (color: color-mix(in lab, red, red)) {
     --border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
   }
-  --focus-ring: var(--macos-blue);
+  --focus-ring: var(--macos-accent);
   --on-focus-ring: #ffffff;
-  --link: #0053b4;
-  --overlay: rgb(0 0 0 / 45%);
-  --background-code: #e9e9ed;
-  --on-background-code: #1d1d1f;
+  --link: var(--macos-blue);
+  --overlay: rgb(0 0 0 / 30%);
+  --background-code: #ffffff;
+  --on-background-code: var(--macos-text);
 }
 :where(.dark), :root.dark[data-rui-theme='macos'] {
   --gray-50: #ffffff;
-  --gray-100: #f5f5f7;
-  --gray-200: #d1d1d6;
-  --gray-300: #aeaeb2;
-  --gray-400: #8e8e93;
-  --gray-500: #6e6e73;
-  --gray-600: #55555b;
-  --gray-700: #3a3a3c;
-  --gray-800: #2c2c2e;
-  --gray-900: #1c1c1e;
+  --gray-100: #dfdfdf;
+  --gray-200: #b9b9be;
+  --gray-300: #8e8e93;
+  --gray-400: #6e6e73;
+  --gray-500: #5c5c5e;
+  --gray-600: #484848;
+  --gray-700: #3d3d3d;
+  --gray-800: #323232;
+  --gray-900: #1e1e1e;
   --gray-950: #000000;
   --primary: var(--macos-blue);
   --on-primary: #000000;
   --primary-light: var(--macos-blue-light);
-  --primary-dark: #1475d1;
-  --primary-container: #12375d;
-  --on-primary-container: #d5eaff;
+  --primary-dark: #0a84ff;
+  --primary-container: #0e3566;
+  --on-primary-container: #d6e8ff;
   --secondary: var(--macos-purple);
   --on-secondary: #000000;
-  --secondary-light: #d9c0ff;
-  --secondary-dark: #9466d8;
-  --secondary-container: #47325f;
-  --on-secondary-container: #f0e4ff;
-  --tertiary: #d1d1d6;
+  --secondary-light: #ebc3ff;
+  --secondary-dark: #bf5af2;
+  --secondary-container: #43255a;
+  --on-secondary-container: #f2dcff;
+  --tertiary: #b9b9be;
   --on-tertiary: #000000;
-  --tertiary-container: #3a3a3c;
-  --on-tertiary-container: #f5f5f7;
+  --tertiary-container: var(--macos-subtle);
+  --on-tertiary-container: var(--macos-text);
   --error: var(--macos-red);
   --on-error: #000000;
-  --error-light: #ffb9bd;
-  --error-dark: #ff939a;
-  --error-container: #61252b;
-  --on-error-container: #ffe7e9;
+  --error-light: #ffa39e;
+  --error-dark: #ff453a;
+  --error-container: #5c1d1a;
+  --on-error-container: #ffe1df;
   --success: var(--macos-green);
   --on-success: #000000;
-  --success-light: #a0f4b5;
-  --success-dark: #43b864;
-  --success-container: #20472b;
-  --on-success-container: #d7ffe1;
+  --success-light: #7ce495;
+  --success-dark: #28cd41;
+  --success-container: #164a26;
+  --on-success-container: #d3f5dc;
   --info: var(--macos-blue);
   --on-info: #000000;
   --info-light: var(--macos-blue-light);
-  --info-dark: #1475d1;
-  --info-container: #12375d;
-  --on-info-container: #d5eaff;
+  --info-dark: #0a84ff;
+  --info-container: #0e3566;
+  --on-info-container: #d6e8ff;
   --warning: var(--macos-amber);
   --on-warning: #000000;
-  --warning-light: #ffe09a;
-  --warning-dark: #edb94e;
-  --warning-container: #57431f;
-  --on-warning-container: #ffefc9;
+  --warning-light: #ffe566;
+  --warning-dark: #ffcc00;
+  --warning-container: #4d3f00;
+  --on-warning-container: #fff1b8;
   --neutral: var(--macos-muted);
   --surface: var(--macos-surface);
   --on-surface: var(--macos-text);
-  --surface-container-lowest: #1c1c1e;
-  --on-surface-container-lowest: #f5f5f7;
-  --surface-container-low: #1c1c1e;
-  --on-surface-container-low: #f5f5f7;
+  --surface-container-lowest: #1e1e1e;
+  --on-surface-container-lowest: var(--macos-text);
+  --surface-container-low: #262626;
+  --on-surface-container-low: var(--macos-text);
   --surface-container: var(--macos-subtle);
-  --on-surface-container: #f5f5f7;
-  --surface-container-high: #48484a;
-  --on-surface-container-high: #f5f5f7;
-  --surface-container-highest: #636366;
+  --on-surface-container: var(--macos-text);
+  --surface-container-high: #4a4a4c;
+  --on-surface-container-high: var(--macos-text);
+  --surface-container-highest: #5c5c5e;
   --on-surface-container-highest: #ffffff;
   --background: var(--macos-canvas);
   --on-background: var(--macos-text);
@@ -441,222 +477,524 @@
   @supports (color: color-mix(in lab, red, red)) {
     --border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
   }
-  --focus-ring: var(--macos-blue-light);
-  --on-focus-ring: #000000;
-  --link: #8cc2ff;
-  --overlay: rgb(0 0 0 / 60%);
-  --background-code: #2c2c2e;
-  --on-background-code: #f5f5f7;
-}
-:root, :root[data-rui-theme='macos'] {
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
-  --font-heading: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
-  --font-mono: 'SFMono-Regular', Menlo, Monaco, monospace;
-  --border-radius-xs: 0.375rem;
-  --border-radius-sm: 0.5rem;
-  --border-radius-md: 0.5rem;
+  --focus-ring: var(--macos-accent);
+  --on-focus-ring: #ffffff;
+  --link: #419cff;
+  --overlay: rgb(0 0 0 / 45%);
+  --background-code: #1e1e1e;
+  --on-background-code: var(--macos-text);
+}
+:root,
+:root[data-rui-theme='macos'] {
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
+  --font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, monospace;
+  --text-control: 0.8125rem;
+  --border-radius-xs: 0.25rem;
+  --border-radius-sm: 0.3125rem;
+  --border-radius-md: 0.375rem;
   --border-radius-lg: 0.625rem;
   --border-radius-xl: 0.75rem;
   --border-radius-2xl: 1rem;
   --border-radius-3xl: 1.25rem;
   --radius-control: var(--border-radius-md);
   --radius-container: var(--border-radius-lg);
+  --size-control-sm: 1.375rem;
+  --size-control-md: 1.75rem;
+  --size-control-lg: 2.25rem;
   --rui-border-alpha: 100%;
   --focus-ring-width: 3px;
-  --focus-ring-offset: 3px;
-}
-@layer components {
-  :root.dark .rui-button--destructive {
-    background-color: #d93036;
-    color: #ffffff;
-  }
-  :root.dark .rui-button--destructive:hover:not(:disabled) {
-    background-color: #c9302c;
-  }
-  :root.dark .rui-button--destructive:active:not(:disabled) {
-    background-color: #b62324;
-  }
-  :root.dark .rui-button--filled {
-    background-color: #0a6cd6;
-    color: #ffffff;
-  }
-  :root.dark .rui-button--filled:hover:not(:disabled) {
-    background-color: #0a64c8;
+  --focus-ring-offset: 1px;
+  --macos-hover-fill: var(--macos-text);
+  @supports (color: color-mix(in lab, red, red)) {
+    --macos-hover-fill: color-mix(in srgb, var(--macos-text) 7%, transparent);
   }
-  :root.dark .rui-button--filled:active:not(:disabled),
-	:root.dark .rui-button--filled[aria-pressed='true'] {
-    background-color: #0a5bb5;
+  --macos-press-fill: var(--macos-text);
+  @supports (color: color-mix(in lab, red, red)) {
+    --macos-press-fill: color-mix(in srgb, var(--macos-text) 14%, transparent);
   }
+  --macos-default-button-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0));
+}
+@layer components {
   :root .rui-button {
     border-radius: var(--radius-control);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    --tw-shadow: 0 0 #0000;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
+    background-image: none;
+    box-shadow: none;
     transition-duration: var(--duration-fast);
   }
-  :root .rui-button--filled,
+  :root .rui-button--outline,
 	:root .rui-button--destructive {
-    --tw-shadow: var(--shadow-control);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  :root .rui-button--outline {
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
-    color: var(--color-on-surface);
-    border-color: var(--rui-control-border-color);
+    border-color: transparent;
+    background-color: var(--macos-control);
+    color: var(--macos-text);
+    box-shadow: var(--macos-control-shadow);
   }
   :root .rui-button--outline:hover:not(:disabled),
-	:root .rui-button--ghost:hover:not(:disabled) {
-    background-color: var(--color-surface-container-low);
+	:root .rui-button--destructive:hover:not(:disabled) {
+    background-color: var(--macos-control);
+  }
+  :root .rui-button--outline:active:not(:disabled),
+	:root .rui-button--outline[aria-pressed='true'],
+	:root .rui-button--destructive:active:not(:disabled) {
+    background-color: var(--macos-control-pressed);
+    box-shadow: var(--macos-control-shadow);
+  }
+  :root .rui-button--destructive {
+    color: var(--macos-red);
+  }
+  :root.dark .rui-button--destructive {
+    color: #ffcdc9;
+  }
+  :root .rui-button--filled {
+    border-color: transparent;
+    background-color: var(--macos-selection);
+    background-image: var(--macos-default-button-sheen);
+    color: var(--macos-selection-text);
+    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12),
+			0 0.5px 1px rgb(0 0 0 / 0.25);
+  }
+  :root .rui-button--filled:hover:not(:disabled) {
+    background-color: var(--macos-selection);
+  }
+  :root .rui-button--filled:active:not(:disabled),
+	:root .rui-button--filled[aria-pressed='true'] {
+    background-color: var(--macos-selection);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--macos-selection), black 18%);
+    }
+    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12),
+			0 0.5px 1px rgb(0 0 0 / 0.25);
+  }
+  :root .rui-button--ghost {
+    color: var(--macos-text);
+  }
+  :root .rui-button--ghost:hover:not(:disabled) {
+    background-color: var(--macos-hover-fill);
+  }
+  :root .rui-button--ghost:active:not(:disabled),
+	:root .rui-button--ghost[aria-pressed='true'] {
+    background-color: var(--macos-press-fill);
+    box-shadow: none;
+  }
+  :root .rui-button--link {
+    color: var(--link);
+  }
+  :root .rui-button:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
+    }
   }
   :root .rui-input,
 	:root .rui-textarea,
 	:root .rui-autocomplete__input,
-	:root .rui-combobox__input,
-	:root .rui-date-field__input,
-	:root .rui-date-input__segment,
-	:root .rui-number-field__input,
-	:root .rui-select__control {
-    border-radius: var(--radius-control);
-    border-color: var(--color-border);
+	:root .rui-combobox__control,
+	:root .rui-date-field__group,
+	:root .rui-date-range-picker__group,
+	:root .rui-input-group,
+	:root .rui-number-field__group,
+	:root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])) {
+    border-radius: var(--radius-sm);
     background-color: var(--color-surface);
     color: var(--color-on-surface);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     border-color: var(--rui-control-border-color);
   }
+  :root .rui-input:focus-visible,
+	:root .rui-textarea:focus-visible,
+	:root .rui-autocomplete__input:focus-visible,
+	:root .rui-combobox__control:focus-within,
+	:root .rui-date-field__group:focus-within,
+	:root .rui-date-range-picker__group:focus-within,
+	:root .rui-input-group:focus-within,
+	:root .rui-number-field__group:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
+    }
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  :root .rui-select__control {
+    border-radius: var(--radius-control);
+    border-color: transparent;
+    background-color: var(--macos-control);
+    color: var(--macos-text);
+    box-shadow: var(--macos-control-shadow);
+  }
+  :root .rui-select__control:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
+    }
+  }
+  :root .rui-select__trigger {
+    color: var(--macos-text);
+  }
+  :root .rui-select__control .rui-control-toggle,
+	:root .rui-combobox__control .rui-control-toggle {
+    width: 1.0625rem;
+    height: 1.0625rem;
+    margin-inline-end: 0.125rem;
+    border-radius: var(--border-radius-xs);
+    background-color: var(--macos-accent);
+    background-image: var(--macos-default-button-sheen);
+    color: #ffffff;
+  }
+  :root .rui-select__control .rui-control-toggle:hover:not(:disabled),
+	:root .rui-combobox__control .rui-control-toggle:hover:not(:disabled) {
+    background-color: var(--macos-accent);
+  }
+  :root .rui-select__control .rui-control-toggle > svg,
+	:root .rui-combobox__control .rui-control-toggle > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+    stroke-width: 2.5;
+  }
   :root .rui-checkbox__control,
 	:root .rui-radio__control {
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
+    width: 0.875rem;
+    height: 0.875rem;
     border-color: var(--rui-control-border-color);
+    background-color: var(--macos-surface);
+    box-shadow: 0 0.5px 1px rgb(0 0 0 / 0.12);
+  }
+  :root.dark .rui-checkbox__control,
+	:root.dark .rui-radio__control {
+    background-color: var(--macos-control);
+  }
+  :root .rui-checkbox__control {
+    border-radius: var(--radius-xs);
+  }
+  :root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control,
+	:root .rui-checkbox__input:indeterminate + .rui-checkbox__control,
+	:root .rui-checkbox__input[aria-checked='mixed'] + .rui-checkbox__control,
+	:root .rui-radio__input:checked + .rui-radio__control {
+    border-color: var(--primary);
+    background-color: var(--macos-accent);
+    background-image: var(--macos-default-button-sheen);
+  }
+  :root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control::after {
+    width: 0.5625rem;
+    height: 0.5625rem;
+    color: #ffffff;
+  }
+  :root .rui-checkbox__input:indeterminate + .rui-checkbox__control::after,
+	:root .rui-checkbox__input[aria-checked='mixed'] + .rui-checkbox__control::after {
+    width: 0.5rem;
+    background-color: #ffffff;
+  }
+  :root .rui-radio__input:checked + .rui-radio__control::after {
+    width: 0.375rem;
+    height: 0.375rem;
+    background-color: #ffffff;
+  }
+  :root .rui-checkbox__input:focus-visible + .rui-checkbox__control,
+	:root .rui-radio__input:focus-visible + .rui-radio__control,
+	:root .rui-switch__input:focus-visible + .rui-switch__track {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
+    }
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
   :root .rui-switch {
-    --rui-switch-track: var(--on-background);
+    --rui-switch-width: 2.375rem;
+    --rui-switch-height: 1.375rem;
+    --rui-switch-thumb-size: 1.25rem;
+    --rui-switch-track: var(--macos-text);
     @supports (color: color-mix(in lab, red, red)) {
-      --rui-switch-track: color-mix(in oklab, var(--on-background) 14%, transparent);
+      --rui-switch-track: color-mix(in srgb, var(--macos-text) 12%, transparent);
     }
-    --rui-switch-track-hover: var(--on-background);
+    --rui-switch-track-hover: var(--macos-text);
     @supports (color: color-mix(in lab, red, red)) {
-      --rui-switch-track-hover: color-mix(in oklab, var(--on-background) 20%, transparent);
+      --rui-switch-track-hover: color-mix(in srgb, var(--macos-text) 12%, transparent);
     }
+    --rui-switch-track-on: var(--macos-accent);
+    --rui-switch-track-on-hover: var(--macos-accent);
     --rui-switch-thumb: #ffffff;
     --rui-switch-thumb-on: #ffffff;
   }
   :root .rui-switch__track {
     border-radius: var(--radius-pill);
+    box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12);
   }
   :root .rui-switch__thumb {
-    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12),
-			0 1px 2px rgb(0 0 0 / 0.24);
+    left: 1px;
+    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.1),
+			0 1px 2px rgb(0 0 0 / 0.25);
   }
-  :root .rui-checkbox__control {
-    border-radius: var(--radius-xs);
+  :root .rui-switch__input:checked + .rui-switch__track .rui-switch__thumb {
+    right: 1px;
   }
-  :root .rui-listbox__option[aria-selected='true'],
+  :root .rui-listbox__option[aria-selected='true']:not([aria-disabled='true']),
+	:root .rui-listbox__option[aria-selected='true']:focus-visible,
 	:root .rui-menu-button__item[aria-checked='true'],
 	:root .rui-menubar__menu-item[aria-checked='true'],
 	:root .rui-tree__node[aria-selected='true'],
-	:root .rui-calendar__day[aria-selected='true'],
-	:root .rui-sidebar__menu-button--active,
+	:root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
+	:root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled),
 	:root .rui-navigation-menu__link-list a[aria-current='page'] {
-    border-radius: var(--radius-control);
-    background-color: var(--color-primary-container);
-    color: var(--color-on-primary-container);
+    border-radius: var(--radius-sm);
+    background-color: var(--macos-selection);
+    background-image: none;
+    color: var(--macos-selection-text);
+  }
+  :root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
+    color: var(--macos-selection-text);
+  }
+  :root .rui-listbox__option {
+    border-radius: var(--radius-sm);
+    padding-block: 0.1875rem;
   }
-  :root .rui-dialog__surface,
-	:root .rui-popover-host,
-	:root .rui-hover-card__content,
+  :root .rui-calendar__day {
+    height: calc(var(--spacing, 0.25rem) * 7);
+    border-radius: var(--radius-full);
+  }
+  :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']) {
+    border-radius: var(--radius-full);
+  }
+  :root .rui-calendar__day[aria-current='date']:not([aria-selected='true']) {
+    text-decoration-line: none;
+    color: var(--macos-red);
+  }
+  :root .rui-menu-button__menu,
+	:root .rui-menubar__menu {
+    padding: 5px;
+    --rui-menu-item-hover: var(--macos-selection);
+  }
+  :root .rui-menu-button__item,
+	:root .rui-menubar__menu-item {
+    border-radius: var(--radius-xs);
+    padding-block: 0.1875rem;
+    padding-inline: 0.625rem;
+    font-size: var(--text-control);
+  }
+  :root .rui-menu-button__item:focus-visible:not([aria-disabled='true']),
+	:root .rui-menu-button__item[aria-expanded='true'],
+	:root .rui-menubar__menu-item:focus-visible:not([aria-disabled='true']),
+	:root .rui-menubar__menu-item[aria-expanded='true'] {
+    color: var(--macos-selection-text);
+    --tw-ring-shadow: 0 0 #0000;
+  }
+  @media (hover: hover) and (pointer: fine) {
+    :root .rui-menu-button__item:hover:not([aria-disabled='true']),
+		:root .rui-menubar__menu-item:hover:not([aria-disabled='true']) {
+      background-color: var(--macos-selection);
+      color: var(--macos-selection-text);
+    }
+    :root .rui-menu-button__item:hover:not([aria-disabled='true'])::after,
+		:root .rui-menubar__menu-item:hover:not([aria-disabled='true'])::after {
+      color: inherit;
+    }
+  }
+  :root .rui-sidebar__menu-button:hover {
+    background-color: var(--macos-hover-fill);
+  }
+  :root .rui-sidebar__menu-button[aria-current='page'],
+	:root .rui-sidebar__menu-button--active {
+    background-color: var(--macos-unemphasized-selection);
+    color: var(--macos-text);
+  }
+  :root .rui-popover,
 	:root .rui-menu-button__menu,
 	:root .rui-menubar__menu,
 	:root .rui-select__listbox,
 	:root .rui-combobox__listbox,
-	:root .rui-calendar,
-	:root rui-tabs[variant='boxed'] {
+	:root .rui-hover-card__content {
+    --rui-popover-surface: var(--macos-elevated);
+    --rui-popover-border-color: transparent;
+    --rui-popover-shadow: var(--macos-menu-shadow);
+    --rui-popover-radius: var(--border-radius-lg);
+    border-color: transparent;
+    color: var(--color-on-surface);
+    background-color: var(--macos-elevated);
+    box-shadow: var(--macos-menu-shadow);
+    backdrop-filter: blur(24px) saturate(1.6);
+  }
+  :root .rui-menu-button__menu,
+	:root .rui-menubar__menu,
+	:root .rui-select__listbox,
+	:root .rui-combobox__listbox {
+    --rui-popover-radius: var(--border-radius-md);
+    border-radius: var(--border-radius-md);
+  }
+  :root .rui-hover-card__content {
+    border-radius: var(--border-radius-lg);
+  }
+  :root .rui-select__listbox .rui-listbox,
+	:root .rui-combobox__listbox .rui-listbox,
+	:root .rui-popover--listbox .rui-listbox {
+    background-color: transparent;
+    padding: 5px;
+  }
+  :root .rui-tooltip {
+    --rui-tooltip-surface: var(--macos-elevated-solid);
+    --rui-tooltip-color: var(--macos-text);
+    --rui-tooltip-radius: var(--border-radius-xs);
+    --rui-tooltip-shadow: 0 0 0 0.5px var(--macos-elevated-edge), 0 2px 8px rgb(0 0 0 / 0.18);
+    --rui-tooltip-padding-x: 0.375rem;
+    --rui-tooltip-padding-y: 0.125rem;
+  }
+  :root .rui-dialog {
+    --rui-dialog-surface: var(--macos-canvas);
+    --rui-dialog-radius: var(--border-radius-lg);
+    --rui-dialog-shadow: 0 0 0 0.5px var(--macos-elevated-edge), 0 20px 50px rgb(0 0 0 / 0.35);
+  }
+  :root .rui-dialog__surface {
+    color: var(--color-on-surface);
+    background-color: var(--macos-canvas);
+    box-shadow: 0 0 0 0.5px var(--macos-elevated-edge),
+			inset 0 0 0 0.5px var(--macos-elevated-highlight),
+			0 20px 50px rgb(0 0 0 / 0.35);
+  }
+  :root .rui-dialog__title {
+    --tw-font-weight: var(--font-weight-bold, 700);
+    font-weight: var(--font-weight-bold, 700);
+    color: var(--color-on-surface);
+  }
+  :root .rui-calendar {
     border-radius: var(--radius-container);
     border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
-    --tw-shadow: var(--shadow-overlay);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-width: 0px;
+    color: var(--color-on-surface);
+    background-color: var(--macos-surface);
+    box-shadow: var(--macos-control-shadow);
   }
-  :root .rui-dialog__title,
-	:root .rui-calendar__header,
-	:root .rui-sidebar__header,
-	:root .rui-table__header {
-    background-color: var(--color-surface-container-low);
+  :root .rui-calendar__header {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
     color: var(--color-on-surface);
   }
-  :root rui-tabs[variant='boxed'] {
-    border-radius: var(--radius-container);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
-    --tw-shadow: var(--shadow-control);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  :root .rui-sidebar__header {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-on-surface);
   }
-  :root rui-tabs[variant='boxed'] .rui-tabs__list {
-    gap: var(--spacing-1);
+  :root .rui-tabs__list {
+    width: fit-content;
+    max-width: 100%;
+    gap: 0px;
     border-style: var(--tw-border-style);
     border-width: 0px;
-    background-color: var(--color-surface-container-low);
-    padding-inline: var(--spacing-1);
-    padding-block: var(--spacing-1);
-    border-radius: var(--radius-control);
+    padding: calc(var(--spacing, 0.25rem) * 0.5);
+    border-radius: calc(var(--radius-control) + 1px);
+    background-color: var(--macos-text);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--macos-text) 7%, transparent);
+    }
   }
-  :root rui-tabs[variant='boxed'] .rui-tabs__tab {
+  :root .rui-tabs__tab {
     border-radius: var(--radius-control);
     border-style: var(--tw-border-style);
     border-width: 0px;
-    background-color: transparent;
-    color: var(--color-on-surface-container-low);
-    padding-inline: var(--rui-tabs-tab-padding-x);
-    padding-block: var(--rui-tabs-tab-padding-y);
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
+    color: var(--macos-text);
+    padding-block: 0.125rem;
+    padding-inline: 0.75rem;
+    font-size: var(--text-control);
   }
-  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
-    border-radius: var(--radius-control);
-    background-color: var(--color-surface);
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-on-surface);
-    --tw-shadow: var(--shadow-control);
+  :root .rui-tabs__tab[aria-selected='true'] {
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
+    background-color: var(--macos-control);
+    color: var(--macos-text);
+    box-shadow: var(--macos-control-shadow);
+  }
+  :root .rui-tabs__tab:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    border-bottom-color: transparent;
+    --tw-ring-color: var(--color-focus-ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
+    }
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
-  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
+  :root rui-tabs[variant='boxed'] {
+    overflow: visible;
     border-radius: var(--radius-none);
-    background-color: var(--color-surface);
-    padding: var(--rui-tabs-panel-padding);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  :root .rui-tabs__tab[aria-selected='true'] {
-    border-radius: var(--radius-pill);
-    background-color: var(--color-surface-container);
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-on-surface);
+  :root rui-tabs[variant='boxed'] .rui-tabs__list {
+    position: relative;
+    z-index: 10;
+    margin-inline: auto;
+    margin-bottom: 0.5rem;
+    padding-block: 0.125rem;
+  }
+  :root.dark rui-tabs[variant='boxed'] .rui-tabs__list {
+    background-color: #2a2a2a;
+  }
+  :root:not(.dark) rui-tabs[variant='boxed'] .rui-tabs__list {
+    background-color: #e3e3e3;
+  }
+  :root rui-tabs[variant='boxed'] .rui-tabs__tab,
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab:not([aria-selected='true']) {
+    opacity: 100%;
+    color: var(--macos-text);
     border-bottom-color: transparent;
   }
+  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
+    border-radius: var(--radius-md);
+    color: var(--color-on-surface);
+    border: 1px solid var(--macos-text);
+    @supports (color: color-mix(in lab, red, red)) {
+      border: 1px solid color-mix(in srgb, var(--macos-text) 12%, transparent);
+    }
+    background-color: var(--macos-text);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
+    }
+    padding: var(--rui-tabs-panel-padding);
+  }
   :root .rui-alert,
-	:root .rui-toast__content {
+	:root .rui-toast {
     border-radius: var(--radius-container);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
+    border-color: transparent;
     color: var(--color-on-surface);
-    --tw-shadow: var(--shadow-overlay);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    background-color: var(--macos-elevated);
+    background-image: none;
+    box-shadow: var(--macos-menu-shadow);
+    backdrop-filter: blur(24px) saturate(1.6);
+  }
+  :root .rui-toast {
+    border-radius: var(--radius-2xl);
+  }
+  :root .rui-toast--info .rui-toast__icon {
+    color: var(--macos-accent);
+  }
+  :root .rui-toast--success .rui-toast__icon {
+    color: var(--success);
+  }
+  :root .rui-toast--warning .rui-toast__icon {
+    color: var(--warning);
+  }
+  :root .rui-toast--error .rui-toast__icon {
+    color: var(--error);
   }
   :root .rui-alert--info .rui-alert__icon {
-    color: var(--info);
+    color: var(--macos-accent);
   }
   :root .rui-alert--success .rui-alert__icon {
     color: var(--success);
@@ -667,37 +1005,125 @@
   :root .rui-alert--error .rui-alert__icon {
     color: var(--error);
   }
-  :root .rui-badge,
-	:root .rui-chip,
-	:root .rui-pagination__link {
+  :root .rui-feed__article {
+    border-radius: var(--radius-container);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    color: var(--color-on-surface);
+    background-color: var(--macos-surface);
+    box-shadow: var(--macos-control-shadow);
+  }
+  :root .rui-badge {
     border-radius: var(--radius-pill);
   }
-  :root .rui-table__row:nth-child(even),
-	:root .rui-grid__row:nth-child(even) {
-    background-color: var(--color-surface-container-low);
+  :root .rui-chip,
+	:root .rui-pagination__link {
+    border-radius: var(--radius-control);
+  }
+  :root .rui-table,
+	:root .rui-grid {
+    background-color: var(--macos-surface);
+  }
+  :root .rui-grid {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    box-shadow: var(--macos-control-shadow);
+  }
+  :root .rui-table__column,
+	:root .rui-table__cell,
+	:root .rui-grid__cell {
+    border-bottom-color: transparent;
+    color: var(--color-on-surface);
+    border-right-color: transparent;
+    background-color: var(--macos-surface);
+  }
+  :root .rui-table__column,
+	:root .rui-grid__row:first-child .rui-grid__cell {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    border-bottom-color: var(--macos-grid);
+    border-right-color: var(--macos-grid);
+  }
+  :root .rui-table__row:nth-child(even) > .rui-table__cell,
+	:root .rui-grid__row:nth-child(odd):not(:first-child) > .rui-grid__cell {
+    background-color: var(--macos-alternate-row);
+  }
+  :root .rui-treegrid {
+    border-radius: var(--radius-container);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    color: var(--color-on-surface);
+    background-color: var(--macos-surface);
+    box-shadow: var(--macos-control-shadow);
+    --rui-treegrid-indent: 0.875rem;
+  }
+  :root .rui-treegrid__cell {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    padding-inline: var(--spacing-2);
+    padding-block: var(--spacing-1);
+    color: var(--color-on-surface);
+    font-size: var(--text-control);
+  }
+  :root .rui-treegrid__row--header .rui-treegrid__cell {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    border-bottom: 1px solid var(--macos-grid);
+    background-color: var(--macos-surface);
+  }
+  :root .rui-treegrid__row:not(.rui-treegrid__row--header):hover .rui-treegrid__cell:not([aria-selected='true']) {
+    background-color: var(--macos-hover-fill);
+  }
+  :root .rui-treegrid__cell[aria-selected='true'] {
+    background-color: var(--macos-selection);
+    color: var(--macos-selection-text);
   }
   :root .rui-separator,
 	:root .rui-sidebar__separator {
     background-color: var(--color-border);
   }
-  :root .rui-slider__thumb {
-    border-radius: var(--radius-pill);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-surface);
-    background-color: var(--color-primary);
-    --tw-shadow: var(--shadow-control);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  :root .rui-slider {
+    --rui-slider-track-size: 0.25rem;
+    --rui-slider-track-radius: 9999px;
+    --rui-slider-track-color: var(--macos-text);
+    @supports (color: color-mix(in lab, red, red)) {
+      --rui-slider-track-color: color-mix(in srgb, var(--macos-text) 15%, transparent);
+    }
+    --rui-slider-fill-color: var(--macos-accent);
+    --rui-slider-thumb-size: 1.25rem;
+    --rui-slider-thumb-radius: 9999px;
+    --rui-slider-thumb-border-width: 0px;
+    --rui-slider-thumb-border-color: transparent;
+    --rui-slider-thumb-background: #ffffff;
+    --rui-slider-thumb-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 1px 3px rgb(0 0 0 / 0.3);
+    --rui-slider-focus-ring-width: 3px;
+    --rui-slider-focus-ring: var(--focus-ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --rui-slider-focus-ring: color-mix(in srgb, var(--focus-ring) 60%, transparent);
+    }
   }
-  :root .rui-meter__track,
-	:root .rui-slider__range-track {
+  :root .rui-meter__track {
     border-radius: var(--radius-pill);
-    background-color: var(--color-surface-container);
+    background-color: var(--macos-text);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--macos-text) 12%, transparent);
+    }
+    box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.08);
   }
-  :root .rui-meter__fill,
-	:root .rui-slider__range-fill {
+  :root .rui-meter__fill {
     border-radius: var(--radius-pill);
-    background-color: var(--color-primary);
+    background-color: var(--macos-accent);
+  }
+}
+@media (prefers-contrast: more) {
+  @layer components {
+    :root .rui-button--outline,
+		:root .rui-button--destructive,
+		:root .rui-select__control,
+		:root .rui-tabs__tab[aria-selected='true'] {
+      border-color: var(--rui-control-border-color);
+    }
   }
 }
 @property --tw-border-style {