@ecopages/radiant-themes 0.2.0 → 0.2.2

package/dist/compiled/themes/material/compact.css

@@ -27,13 +27,8 @@
   --font-weight-medium: var(--weight-medium);
   --opacity-disabled: var(--opacity-disabled);
   --opacity-muted: var(--opacity-muted);
-  --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-border: var(--border);
-  --radius-xs: var(--border-radius-xs);
+  --radius-none: var(--border-radius-none);
   --radius-control: var(--radius-control);
   --radius-container: var(--radius-container);
   --radius-pill: var(--radius-pill);
@@ -246,6 +241,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;
 }
@@ -253,28 +256,66 @@
   color-scheme: dark;
 }
 :where(:root), :root[data-rui-theme='material'] {
-  --material-primary: oklch(46% 0.17 293);
-  --material-secondary: oklch(48% 0.045 286);
-  --material-tertiary: oklch(48% 0.11 340);
-  --material-error: oklch(48% 0.18 25);
-  --material-canvas: oklch(99% 0.006 285);
-  --material-surface: oklch(98% 0.009 285);
-  --material-surface-container: oklch(95% 0.015 285);
-  --material-outline: oklch(53% 0.018 285);
-  --material-outline-variant: oklch(86% 0.012 300);
-  --material-text: oklch(18% 0.018 285);
+  --material-primary: #6750a4;
+  --material-on-primary: #ffffff;
+  --material-primary-container: #eaddff;
+  --material-on-primary-container: #4f378b;
+  --material-secondary: #625b71;
+  --material-on-secondary: #ffffff;
+  --material-secondary-container: #e8def8;
+  --material-on-secondary-container: #4a4458;
+  --material-tertiary: #7d5260;
+  --material-on-tertiary: #ffffff;
+  --material-tertiary-container: #ffd8e4;
+  --material-on-tertiary-container: #633b48;
+  --material-error: #b3261e;
+  --material-on-error: #ffffff;
+  --material-error-container: #f9dedc;
+  --material-on-error-container: #8c1d18;
+  --material-surface: #fef7ff;
+  --material-on-surface: #1d1b20;
+  --material-on-surface-variant: #49454f;
+  --material-surface-container-lowest: #ffffff;
+  --material-surface-container-low: #f7f2fa;
+  --material-surface-container: #f3edf7;
+  --material-surface-container-high: #ece6f0;
+  --material-surface-container-highest: #e6e0e9;
+  --material-inverse-surface: #322f35;
+  --material-inverse-on-surface: #f5eff7;
+  --material-inverse-primary: #d0bcff;
+  --material-outline: #79747e;
+  --material-outline-variant: #cac4d0;
 }
 :where(.dark), :root.dark[data-rui-theme='material'] {
-  --material-primary: oklch(82% 0.11 293);
-  --material-secondary: oklch(80% 0.04 286);
-  --material-tertiary: oklch(82% 0.09 340);
-  --material-error: oklch(82% 0.12 25);
-  --material-canvas: oklch(17% 0.012 285);
-  --material-surface: oklch(20% 0.014 285);
-  --material-surface-container: oklch(25% 0.018 285);
-  --material-outline: oklch(70% 0.018 285);
-  --material-outline-variant: oklch(36% 0.012 300);
-  --material-text: oklch(91% 0.01 285);
+  --material-primary: #d0bcff;
+  --material-on-primary: #381e72;
+  --material-primary-container: #4f378b;
+  --material-on-primary-container: #eaddff;
+  --material-secondary: #ccc2dc;
+  --material-on-secondary: #332d41;
+  --material-secondary-container: #4a4458;
+  --material-on-secondary-container: #e8def8;
+  --material-tertiary: #efb8c8;
+  --material-on-tertiary: #492532;
+  --material-tertiary-container: #633b48;
+  --material-on-tertiary-container: #ffd8e4;
+  --material-error: #f2b8b5;
+  --material-on-error: #601410;
+  --material-error-container: #8c1d18;
+  --material-on-error-container: #f9dedc;
+  --material-surface: #141218;
+  --material-on-surface: #e6e0e9;
+  --material-on-surface-variant: #cac4d0;
+  --material-surface-container-lowest: #0f0d13;
+  --material-surface-container-low: #1d1b20;
+  --material-surface-container: #211f26;
+  --material-surface-container-high: #2b2930;
+  --material-surface-container-highest: #36343b;
+  --material-inverse-surface: #e6e0e9;
+  --material-inverse-on-surface: #322f35;
+  --material-inverse-primary: #6750a4;
+  --material-outline: #938f99;
+  --material-outline-variant: #49454f;
 }
 :where(:root), :root[data-rui-theme='material'] {
   --gray-50: oklch(98% 0.008 285);
@@ -289,27 +330,27 @@
   --gray-900: oklch(21% 0.014 285);
   --gray-950: oklch(16% 0.012 285);
   --primary: var(--material-primary);
-  --on-primary: white;
-  --primary-light: oklch(64% 0.14 293);
-  --primary-dark: oklch(34% 0.13 293);
-  --primary-container: oklch(92% 0.045 293);
-  --on-primary-container: oklch(28% 0.11 293);
+  --on-primary: var(--material-on-primary);
+  --primary-light: #7f67be;
+  --primary-dark: #4f378b;
+  --primary-container: var(--material-primary-container);
+  --on-primary-container: var(--material-on-primary-container);
   --secondary: var(--material-secondary);
-  --on-secondary: white;
-  --secondary-light: oklch(66% 0.04 286);
-  --secondary-dark: oklch(36% 0.04 286);
-  --secondary-container: oklch(92% 0.02 286);
-  --on-secondary-container: oklch(28% 0.03 286);
+  --on-secondary: var(--material-on-secondary);
+  --secondary-light: #7a7289;
+  --secondary-dark: #4a4458;
+  --secondary-container: var(--material-secondary-container);
+  --on-secondary-container: var(--material-on-secondary-container);
   --tertiary: var(--material-tertiary);
-  --on-tertiary: white;
-  --tertiary-container: oklch(92% 0.035 340);
-  --on-tertiary-container: oklch(28% 0.08 340);
+  --on-tertiary: var(--material-on-tertiary);
+  --tertiary-container: var(--material-tertiary-container);
+  --on-tertiary-container: var(--material-on-tertiary-container);
   --error: var(--material-error);
-  --on-error: white;
-  --error-light: oklch(66% 0.15 25);
-  --error-dark: oklch(34% 0.14 25);
-  --error-container: oklch(92% 0.04 25);
-  --on-error-container: oklch(30% 0.12 25);
+  --on-error: var(--material-on-error);
+  --error-light: #dc362e;
+  --error-dark: #8c1d18;
+  --error-container: var(--material-error-container);
+  --on-error-container: var(--material-on-error-container);
   --success: oklch(47% 0.13 155);
   --on-success: white;
   --success-light: oklch(68% 0.12 155);
@@ -328,33 +369,33 @@
   --warning-dark: oklch(37% 0.1 75);
   --warning-container: oklch(93% 0.04 85);
   --on-warning-container: oklch(31% 0.08 75);
-  --neutral: oklch(53% 0.018 285);
+  --neutral: var(--material-on-surface-variant);
   --surface: var(--material-surface);
-  --on-surface: var(--material-text);
-  --surface-container-lowest: oklch(100% 0 0);
-  --on-surface-container-lowest: var(--material-text);
-  --surface-container-low: oklch(97% 0.008 285);
-  --on-surface-container-low: var(--material-text);
+  --on-surface: var(--material-on-surface);
+  --surface-container-lowest: var(--material-surface-container-lowest);
+  --on-surface-container-lowest: var(--material-on-surface);
+  --surface-container-low: var(--material-surface-container-low);
+  --on-surface-container-low: var(--material-on-surface);
   --surface-container: var(--material-surface-container);
-  --on-surface-container: var(--material-text);
-  --surface-container-high: oklch(92% 0.018 285);
-  --on-surface-container-high: var(--material-text);
-  --surface-container-highest: oklch(89% 0.02 285);
-  --on-surface-container-highest: var(--material-text);
-  --background: var(--material-canvas);
-  --on-background: var(--material-text);
+  --on-surface-container: var(--material-on-surface);
+  --surface-container-high: var(--material-surface-container-high);
+  --on-surface-container-high: var(--material-on-surface);
+  --surface-container-highest: var(--material-surface-container-highest);
+  --on-surface-container-highest: var(--material-on-surface);
+  --background: var(--material-surface);
+  --on-background: var(--material-on-surface);
   --rui-border-color: var(--material-outline-variant);
   --rui-control-border-color: var(--material-outline);
   --border: var(--rui-border-color);
   @supports (color: color-mix(in lab, red, red)) {
     --border: color-mix(in srgb, var(--rui-border-color) var(--rui-border-alpha), transparent);
   }
-  --focus-ring: oklch(46% 0.17 293);
-  --on-focus-ring: white;
-  --link: oklch(42% 0.16 293);
+  --focus-ring: var(--material-secondary);
+  --on-focus-ring: var(--material-on-secondary);
+  --link: var(--material-primary);
   --overlay: oklch(0% 0 0 / 0.48);
-  --background-code: oklch(94% 0.012 285);
-  --on-background-code: var(--material-text);
+  --background-code: var(--material-surface-container-high);
+  --on-background-code: var(--material-on-surface);
 }
 :where(.dark), :root.dark[data-rui-theme='material'] {
   --gray-50: oklch(95% 0.008 285);
@@ -369,21 +410,21 @@
   --gray-900: oklch(20% 0.01 285);
   --gray-950: oklch(15% 0.009 285);
   --primary: var(--material-primary);
-  --on-primary: oklch(24% 0.08 293);
-  --primary-container: oklch(34% 0.09 293);
-  --on-primary-container: oklch(91% 0.035 293);
+  --on-primary: var(--material-on-primary);
+  --primary-container: var(--material-primary-container);
+  --on-primary-container: var(--material-on-primary-container);
   --secondary: var(--material-secondary);
-  --on-secondary: oklch(23% 0.025 286);
-  --secondary-container: oklch(34% 0.025 286);
-  --on-secondary-container: oklch(90% 0.02 286);
+  --on-secondary: var(--material-on-secondary);
+  --secondary-container: var(--material-secondary-container);
+  --on-secondary-container: var(--material-on-secondary-container);
   --tertiary: var(--material-tertiary);
-  --on-tertiary: oklch(25% 0.07 340);
-  --tertiary-container: oklch(37% 0.07 340);
-  --on-tertiary-container: oklch(92% 0.03 340);
+  --on-tertiary: var(--material-on-tertiary);
+  --tertiary-container: var(--material-tertiary-container);
+  --on-tertiary-container: var(--material-on-tertiary-container);
   --error: var(--material-error);
-  --on-error: oklch(25% 0.08 25);
-  --error-container: oklch(36% 0.08 25);
-  --on-error-container: oklch(92% 0.04 25);
+  --on-error: var(--material-on-error);
+  --error-container: var(--material-error-container);
+  --on-error-container: var(--material-on-error-container);
   --success: oklch(78% 0.13 155);
   --on-success: oklch(22% 0.06 155);
   --success-container: oklch(33% 0.07 155);
@@ -396,34 +437,35 @@
   --on-warning: oklch(25% 0.06 75);
   --warning-container: oklch(38% 0.07 75);
   --on-warning-container: oklch(94% 0.04 85);
-  --neutral: oklch(70% 0.016 285);
+  --neutral: var(--material-on-surface-variant);
   --surface: var(--material-surface);
-  --on-surface: var(--material-text);
-  --surface-container-lowest: oklch(14% 0.009 285);
-  --on-surface-container-lowest: var(--material-text);
-  --surface-container-low: oklch(18% 0.012 285);
-  --on-surface-container-low: var(--material-text);
+  --on-surface: var(--material-on-surface);
+  --surface-container-lowest: var(--material-surface-container-lowest);
+  --on-surface-container-lowest: var(--material-on-surface);
+  --surface-container-low: var(--material-surface-container-low);
+  --on-surface-container-low: var(--material-on-surface);
   --surface-container: var(--material-surface-container);
-  --on-surface-container: var(--material-text);
-  --surface-container-high: oklch(28% 0.018 285);
-  --on-surface-container-high: var(--material-text);
-  --surface-container-highest: oklch(32% 0.02 285);
-  --on-surface-container-highest: var(--material-text);
-  --background: var(--material-canvas);
-  --on-background: var(--material-text);
+  --on-surface-container: var(--material-on-surface);
+  --surface-container-high: var(--material-surface-container-high);
+  --on-surface-container-high: var(--material-on-surface);
+  --surface-container-highest: var(--material-surface-container-highest);
+  --on-surface-container-highest: var(--material-on-surface);
+  --background: var(--material-surface);
+  --on-background: var(--material-on-surface);
   --rui-border-color: var(--material-outline-variant);
   --rui-control-border-color: var(--material-outline);
   --border: var(--rui-border-color);
   @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(--material-primary);
-  --on-focus-ring: oklch(24% 0.08 293);
+  --focus-ring: var(--material-secondary);
+  --on-focus-ring: var(--material-on-secondary);
   --link: var(--material-primary);
-  --background-code: oklch(19% 0.012 285);
-  --on-background-code: var(--material-text);
+  --background-code: var(--material-surface-container-high);
+  --on-background-code: var(--material-on-surface);
 }
-:root, :root[data-rui-theme='material'] {
+:root,
+:root[data-rui-theme='material'] {
   --font-sans: Roboto, 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
   --font-heading: Roboto, 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
   --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -435,89 +477,372 @@
   --border-radius-xl: 1.75rem;
   --border-radius-2xl: 2rem;
   --border-radius-3xl: 2.5rem;
-  --radius-control: var(--border-radius-xl);
-  --radius-container: var(--border-radius-lg);
+  --radius-control: var(--border-radius-xs);
+  --radius-container: var(--border-radius-md);
+  --focus-ring-width: 3px;
+  --focus-ring-offset: 2px;
+  --shadow-control: none;
+  --shadow-overlay: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
+  --shadow-modal: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);
+  --sheen-image: none;
+  --material-state-hover: 8%;
+  --material-state-press: 10%;
+}
+:root rui-switch {
+  --rui-switch-width: 3.25rem;
+  --rui-switch-height: 2rem;
+  --rui-switch-thumb-size: 1rem;
+  --rui-switch-track: var(--surface-container-highest);
+  --rui-switch-track-hover: var(--surface-container-highest);
+  --rui-switch-track-on: var(--primary);
+  --rui-switch-track-on-hover: var(--primary);
+  --rui-switch-thumb: var(--material-outline);
+  --rui-switch-thumb-on: var(--on-primary);
+}
+:root rui-dialog {
+  --rui-dialog-radius: var(--border-radius-xl);
+  --rui-dialog-surface: var(--surface-container-high);
+  --rui-dialog-padding: 1.5rem;
+}
+:root rui-tooltip {
+  --rui-tooltip-radius: var(--border-radius-xs);
+  --rui-tooltip-surface: var(--material-inverse-surface);
+  --rui-tooltip-color: var(--material-inverse-on-surface);
+  --rui-tooltip-shadow: none;
+}
+:root rui-tabs {
+  --rui-tabs-indicator-width: 3px;
+}
+:root rui-meter {
+  --rui-meter-height: 0.25rem;
+  --rui-meter-radius: var(--border-radius-full, 9999px);
+  --rui-meter-track-color: var(--secondary-container);
+}
+:root rui-slider {
+  --rui-slider-track-size: 0.25rem;
+  --rui-slider-track-color: var(--secondary-container);
+  --rui-slider-thumb-background: var(--primary);
+  --rui-slider-thumb-border-color: var(--primary);
+  --rui-slider-thumb-radius: 9999px;
+  --rui-slider-thumb-shadow: var(--shadow-control);
 }
 @layer components {
+  :root .rui-switch__track {
+    border: 2px solid var(--rui-control-border-color);
+  }
+  :root .rui-switch__input:checked + .rui-switch__track {
+    border-color: var(--primary);
+  }
+  :root .rui-switch__thumb {
+    left: 0.375rem;
+    transition-property: left, right, width, height, background-color;
+  }
+  :root .rui-switch__input:checked + .rui-switch__track .rui-switch__thumb {
+    right: 0.125rem;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  :root .rui-switch__track:active .rui-switch__thumb {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
   :root .rui-button {
-    border-radius: var(--radius-control);
+    border-radius: var(--radius-pill);
     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: 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);
+    letter-spacing: 0.00625rem;
   }
-  :root .rui-button--filled,
-	:root .rui-button--destructive {
-    --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);
+  :root .rui-button--sm {
+    padding-inline: 1rem;
+  }
+  :root .rui-button--md {
+    padding-inline: 1.5rem;
+  }
+  :root .rui-button--lg {
+    padding-inline: 2rem;
+  }
+  :root .rui-button--square,
+	:root .rui-button--link,
+	:root .rui-button--none {
+    padding-inline: 0;
+  }
+  :root .rui-button--filled:hover:not(:disabled) {
+    background-color: var(--on-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--on-primary) var(--material-state-hover), var(--primary));
+    }
+    box-shadow: var(--shadow-overlay);
+  }
+  :root .rui-button--filled:active:not(:disabled) {
+    background-color: var(--on-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--on-primary) var(--material-state-press), var(--primary));
+    }
+    box-shadow: none;
+  }
+  :root .rui-button--destructive:hover:not(:disabled) {
+    background-color: var(--on-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--on-error) var(--material-state-hover), var(--error));
+    }
+    box-shadow: var(--shadow-overlay);
+  }
+  :root .rui-button--destructive:active:not(:disabled) {
+    background-color: var(--on-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--on-error) var(--material-state-press), var(--error));
+    }
+    box-shadow: none;
   }
   :root .rui-button--outline {
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
-    color: var(--color-on-surface);
+    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);
     border-color: var(--rui-control-border-color);
+    color: var(--primary);
+  }
+  :root .rui-button--ghost {
+    color: var(--primary);
+  }
+  :root .rui-button--outline:hover:not(:disabled),
+	:root .rui-button--ghost:hover:not(:disabled) {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--primary) var(--material-state-hover), transparent);
+    }
+  }
+  :root .rui-button--outline:active:not(:disabled),
+	:root .rui-button--ghost:active:not(:disabled) {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--primary) var(--material-state-press), transparent);
+    }
+  }
+  :root .rui-button--outline[aria-pressed='true'],
+	:root .rui-button--ghost[aria-pressed='true'] {
+    --tw-shadow: 0 0 #0000;
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
+    background-color: var(--secondary-container);
+    color: var(--on-secondary-container);
+  }
+  :root .rui-button:disabled {
+    opacity: 1;
+    background-color: var(--on-surface);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--on-surface) 12%, transparent);
+    }
+    color: var(--on-surface);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb, var(--on-surface) 38%, transparent);
+    }
+    box-shadow: none;
   }
-  :root .rui-button--ghost:hover:not(:disabled),
-	:root .rui-button--outline:hover:not(:disabled) {
-    background-color: var(--color-surface-container-low);
+  :root .rui-button--outline:disabled {
+    background-color: transparent;
+    border-color: var(--on-surface);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb, var(--on-surface) 12%, transparent);
+    }
+  }
+  :root .rui-button--ghost:disabled,
+	:root .rui-button--link:disabled,
+	:root .rui-button--none:disabled {
+    background-color: 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-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])),
 	:root .rui-select__control {
     border-radius: var(--radius-control);
-    border-color: var(--color-border);
     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);
+    color: var(--on-surface);
   }
-  :root .rui-checkbox__control,
-	:root .rui-radio__control {
-    border-color: var(--color-border);
-    background-color: var(--color-surface);
-    border-color: var(--rui-control-border-color);
+  :root .rui-input:hover:not(:disabled),
+	:root .rui-textarea:hover:not(:disabled),
+	:root .rui-select__control:hover {
+    border-color: var(--on-surface);
+  }
+  :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(0px + 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-outline-style: none;
+    outline-style: none;
+    border-color: var(--primary);
+    box-shadow: inset 0 0 0 1px var(--primary);
+  }
+  :root .rui-input::placeholder,
+	:root .rui-textarea::placeholder {
+    color: var(--material-on-surface-variant);
   }
   :root .rui-checkbox__control {
-    border-radius: var(--radius-xs);
+    border-radius: 2px;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-width: 2px;
+    border-color: var(--material-on-surface-variant);
+    background-color: transparent;
+  }
+  :root .rui-radio__control {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-width: 2px;
+    border-color: var(--material-on-surface-variant);
+    background-color: transparent;
+  }
+  :root .rui-radio__input:checked + .rui-radio__control::after {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+  :root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control::after {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  :root .rui-checkbox__input:indeterminate + .rui-checkbox__control,
+	:root .rui-checkbox__input[aria-checked='mixed'] + .rui-checkbox__control {
+    background-color: var(--primary);
+  }
+  :root .rui-checkbox__input:indeterminate + .rui-checkbox__control::after,
+	:root .rui-checkbox__input[aria-checked='mixed'] + .rui-checkbox__control::after {
+    border-radius: var(--radius-none);
+    background-color: var(--on-primary);
+  }
+  :root .rui-dialog__surface {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: var(--surface-container-high);
+    box-shadow: var(--shadow-modal);
+  }
+  :root .rui-dialog__title {
+    --tw-font-weight: var(--font-weight-normal, 400);
+    font-weight: var(--font-weight-normal, 400);
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+  :root .rui-popover {
+    --rui-popover-radius: var(--border-radius-xs);
+    --rui-popover-surface: var(--surface-container);
+    --rui-popover-border-color: transparent;
+    color: var(--on-surface);
   }
-  :root .rui-dialog__surface,
-	:root .rui-popover-host,
-	:root .rui-hover-card__content,
+  :root .rui-popover .rui-listbox {
+    background-color: transparent;
+  }
+  :root .rui-hover-card__content,
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu,
 	:root .rui-select__listbox,
-	:root .rui-combobox__listbox,
-	:root .rui-calendar {
-    border-radius: var(--radius-container);
+	:root .rui-combobox__listbox {
+    border-radius: var(--radius-control);
     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;
+    background-color: var(--surface-container);
+    color: var(--on-surface);
+    box-shadow: var(--shadow-overlay);
+  }
+  :root .rui-calendar {
+    border-radius: 1rem;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: var(--surface-container-high);
+    box-shadow: var(--shadow-overlay);
+  }
+  :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']) {
+    border-radius: var(--radius-pill);
   }
-  :root .rui-listbox__option[aria-selected='true'],
+  :root .rui-toast {
+    border-radius: var(--radius-control);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: var(--material-inverse-surface);
+    color: var(--material-inverse-on-surface);
+    box-shadow: var(--shadow-modal);
+  }
+  :root .rui-toast__action .rui-button {
+    color: var(--material-inverse-primary);
+  }
+  :root .rui-listbox__option[aria-selected='true']:not([aria-disabled='true']),
 	:root .rui-menu-button__item[aria-checked='true'],
-	:root .rui-calendar__day[aria-selected='true'],
-	:root .rui-sidebar__menu-button--active {
+	:root .rui-menubar__menu-item[aria-checked='true'],
+	:root .rui-tree__node[aria-selected='true'] {
     border-radius: var(--radius-control);
-    background-color: var(--color-primary-container);
-    color: var(--color-on-primary-container);
+    background-color: var(--secondary-container);
+    background-image: none;
+    color: var(--on-secondary-container);
+  }
+  :root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
+    color: inherit;
+  }
+  :root .rui-sidebar__menu-button {
+    border-radius: var(--radius-pill);
+  }
+  :root .rui-sidebar__menu-button[aria-current='page'],
+	:root .rui-sidebar__menu-button--active {
+    background-color: var(--secondary-container);
+    color: var(--on-secondary-container);
+  }
+  :root .rui-tabs__tab {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--material-on-surface-variant);
+  }
+  :root .rui-tabs__tab[aria-selected='true'],
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
+    color: var(--primary);
+  }
+  :root rui-tabs[variant='boxed'] .rui-tabs__tab:not([aria-selected='true']) {
+    opacity: 1;
+    color: var(--material-on-surface-variant);
+  }
+  :root .rui-tabs__tab:hover {
+    background-color: var(--on-surface);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--on-surface) var(--material-state-hover), transparent);
+    }
+  }
+  :root .rui-chip,
+	:root .rui-tag {
+    border-radius: 0.5rem;
+  }
+  :root .rui-chip--default,
+	:root .rui-tag {
+    border-color: var(--material-outline-variant);
+    background-color: transparent;
+    color: var(--material-on-surface-variant);
+  }
+  :root .rui-tag[aria-selected='true'] {
+    border-color: transparent;
+    background-color: var(--secondary-container);
+    background-image: none;
+    color: var(--on-secondary-container);
   }
   :root .rui-badge,
-	:root .rui-chip,
 	:root .rui-pagination__link {
     border-radius: var(--radius-pill);
   }
+  :root .rui-feed__article {
+    border-color: var(--material-outline-variant);
+    background-color: var(--surface);
+  }
 }
 :root {
   --space-1: calc(0.125rem * var(--rui-density));