@ecopages/radiant-themes 0.3.0 → 0.3.2

package/dist/compiled/themes/macos-classic.css

@@ -26,7 +26,6 @@
   --text-5xl: var(--text-5xl);
   --opacity-disabled: var(--opacity-disabled);
   --opacity-muted: var(--opacity-muted);
-  --color-on-surface: var(--on-surface);
   --spacing-2: var(--space-2);
   --radius-none: var(--border-radius-none);
   --radius-xs: var(--border-radius-xs);
@@ -93,6 +92,86 @@
   --size-icon-sm: 1rem;
   --size-icon-md: 1.25rem;
 }
+:where(:root, .dark) {
+  --color-transparent: transparent;
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-400: var(--gray-400);
+  --color-gray-500: var(--gray-500);
+  --color-gray-600: var(--gray-600);
+  --color-gray-700: var(--gray-700);
+  --color-gray-800: var(--gray-800);
+  --color-gray-900: var(--gray-900);
+  --color-gray-950: var(--gray-950);
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-dark: var(--primary-dark);
+  --color-on-primary: var(--on-primary);
+  --color-primary-container: var(--primary-container);
+  --color-on-primary-container: var(--on-primary-container);
+  --color-secondary: var(--secondary);
+  --color-secondary-light: var(--secondary-light);
+  --color-secondary-dark: var(--secondary-dark);
+  --color-on-secondary: var(--on-secondary);
+  --color-secondary-container: var(--secondary-container);
+  --color-on-secondary-container: var(--on-secondary-container);
+  --color-tertiary: var(--tertiary);
+  --color-on-tertiary: var(--on-tertiary);
+  --color-tertiary-container: var(--tertiary-container);
+  --color-on-tertiary-container: var(--on-tertiary-container);
+  --color-error: var(--error);
+  --color-error-light: var(--error-light);
+  --color-error-dark: var(--error-dark);
+  --color-on-error: var(--on-error);
+  --color-error-container: var(--error-container);
+  --color-on-error-container: var(--on-error-container);
+  --color-success: var(--success);
+  --color-success-light: var(--success-light);
+  --color-success-dark: var(--success-dark);
+  --color-on-success: var(--on-success);
+  --color-success-container: var(--success-container);
+  --color-on-success-container: var(--on-success-container);
+  --color-info: var(--info);
+  --color-on-info: var(--on-info);
+  --color-info-container: var(--info-container);
+  --color-on-info-container: var(--on-info-container);
+  --color-info-light: var(--info-light);
+  --color-info-dark: var(--info-dark);
+  --color-warning: var(--warning);
+  --color-on-warning: var(--on-warning);
+  --color-warning-container: var(--warning-container);
+  --color-on-warning-container: var(--on-warning-container);
+  --color-warning-light: var(--warning-light);
+  --color-warning-dark: var(--warning-dark);
+  --color-destructive: var(--error);
+  --color-on-destructive: var(--on-error);
+  --color-destructive-container: var(--error-container);
+  --color-on-destructive-container: var(--on-error-container);
+  --color-neutral: var(--neutral);
+  --color-surface: var(--surface);
+  --color-on-surface: var(--on-surface);
+  --color-surface-container-lowest: var(--surface-container-lowest);
+  --color-on-surface-container-lowest: var(--on-surface-container-lowest);
+  --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-on-surface-container: var(--on-surface-container);
+  --color-surface-container-high: var(--surface-container-high);
+  --color-on-surface-container-high: var(--on-surface-container-high);
+  --color-surface-container-highest: var(--surface-container-highest);
+  --color-on-surface-container-highest: var(--on-surface-container-highest);
+  --color-background: var(--background);
+  --color-on-background: var(--on-background);
+  --color-border: var(--border);
+  --color-focus-ring: var(--focus-ring);
+  --color-on-focus-ring: var(--on-focus-ring);
+  --color-link: var(--link);
+  --color-overlay: var(--overlay);
+  --color-background-code: var(--background-code);
+  --color-on-background-code: var(--on-background-code);
+}
 @layer base {
   :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
 			[data-rui-focus-managed]
@@ -713,7 +792,7 @@
   }
   :root .rui-feed__article {
     border-radius: var(--radius-none);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     border-color: var(--macos-classic-dark);
     background-color: var(--macos-classic-surface);
     box-shadow: var(--macos-classic-bevel);
@@ -726,7 +805,7 @@
 	:root .rui-sidebar__header {
     --tw-font-weight: var(--font-weight-bold, 700);
     font-weight: var(--font-weight-bold, 700);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     display: flex;
     align-items: center;
     gap: 0.375rem;
@@ -777,7 +856,7 @@
 	:root .rui-hover-card__content,
 	:root .rui-calendar {
     border-radius: var(--radius-none);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     border: 1px solid var(--macos-classic-dark);
     background-color: var(--macos-classic-surface);
     box-shadow: var(--macos-classic-bevel),
@@ -789,7 +868,7 @@
 	:root .rui-select__listbox,
 	:root .rui-combobox__listbox {
     border-radius: var(--radius-none);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     border: 1px solid var(--macos-classic-dark);
     background-color: var(--macos-classic-surface);
     box-shadow: inset 1px 1px 0 var(--macos-classic-light),
@@ -852,7 +931,7 @@
   }
   :root rui-tabs[variant='boxed'] .rui-tabs__panel {
     border-radius: var(--radius-none);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     position: relative;
     z-index: 1;
     border: 1px solid var(--macos-classic-dark);
@@ -1061,7 +1140,7 @@
   :root .rui-alert,
 	:root .rui-toast {
     border-radius: var(--radius-none);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     border: 1px solid var(--macos-classic-dark);
     background-color: var(--macos-classic-surface);
     box-shadow: var(--macos-classic-bevel),
@@ -1100,7 +1179,7 @@
     border-radius: var(--radius-full);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     z-index: 1;
     border-color: var(--macos-classic-dark);
     background-color: var(--macos-classic-face);
@@ -1121,7 +1200,7 @@
   :root .rui-badge,
 	:root .rui-chip {
     border-radius: var(--radius-sm);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     border: 1px solid var(--macos-classic-dark);
     background-color: var(--macos-classic-face);
     box-shadow: var(--macos-classic-raised);

package/dist/compiled/themes/macos.css

@@ -27,10 +27,6 @@
   --font-weight-semibold: var(--weight-semibold);
   --opacity-disabled: var(--opacity-disabled);
   --opacity-muted: var(--opacity-muted);
-  --color-surface: var(--surface);
-  --color-on-surface: var(--on-surface);
-  --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);
@@ -99,6 +95,86 @@
   --size-icon-sm: 1rem;
   --size-icon-md: 1.25rem;
 }
+:where(:root, .dark) {
+  --color-transparent: transparent;
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-400: var(--gray-400);
+  --color-gray-500: var(--gray-500);
+  --color-gray-600: var(--gray-600);
+  --color-gray-700: var(--gray-700);
+  --color-gray-800: var(--gray-800);
+  --color-gray-900: var(--gray-900);
+  --color-gray-950: var(--gray-950);
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-dark: var(--primary-dark);
+  --color-on-primary: var(--on-primary);
+  --color-primary-container: var(--primary-container);
+  --color-on-primary-container: var(--on-primary-container);
+  --color-secondary: var(--secondary);
+  --color-secondary-light: var(--secondary-light);
+  --color-secondary-dark: var(--secondary-dark);
+  --color-on-secondary: var(--on-secondary);
+  --color-secondary-container: var(--secondary-container);
+  --color-on-secondary-container: var(--on-secondary-container);
+  --color-tertiary: var(--tertiary);
+  --color-on-tertiary: var(--on-tertiary);
+  --color-tertiary-container: var(--tertiary-container);
+  --color-on-tertiary-container: var(--on-tertiary-container);
+  --color-error: var(--error);
+  --color-error-light: var(--error-light);
+  --color-error-dark: var(--error-dark);
+  --color-on-error: var(--on-error);
+  --color-error-container: var(--error-container);
+  --color-on-error-container: var(--on-error-container);
+  --color-success: var(--success);
+  --color-success-light: var(--success-light);
+  --color-success-dark: var(--success-dark);
+  --color-on-success: var(--on-success);
+  --color-success-container: var(--success-container);
+  --color-on-success-container: var(--on-success-container);
+  --color-info: var(--info);
+  --color-on-info: var(--on-info);
+  --color-info-container: var(--info-container);
+  --color-on-info-container: var(--on-info-container);
+  --color-info-light: var(--info-light);
+  --color-info-dark: var(--info-dark);
+  --color-warning: var(--warning);
+  --color-on-warning: var(--on-warning);
+  --color-warning-container: var(--warning-container);
+  --color-on-warning-container: var(--on-warning-container);
+  --color-warning-light: var(--warning-light);
+  --color-warning-dark: var(--warning-dark);
+  --color-destructive: var(--error);
+  --color-on-destructive: var(--on-error);
+  --color-destructive-container: var(--error-container);
+  --color-on-destructive-container: var(--on-error-container);
+  --color-neutral: var(--neutral);
+  --color-surface: var(--surface);
+  --color-on-surface: var(--on-surface);
+  --color-surface-container-lowest: var(--surface-container-lowest);
+  --color-on-surface-container-lowest: var(--on-surface-container-lowest);
+  --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-on-surface-container: var(--on-surface-container);
+  --color-surface-container-high: var(--surface-container-high);
+  --color-on-surface-container-high: var(--on-surface-container-high);
+  --color-surface-container-highest: var(--surface-container-highest);
+  --color-on-surface-container-highest: var(--on-surface-container-highest);
+  --color-background: var(--background);
+  --color-on-background: var(--on-background);
+  --color-border: var(--border);
+  --color-focus-ring: var(--focus-ring);
+  --color-on-focus-ring: var(--on-focus-ring);
+  --color-link: var(--link);
+  --color-overlay: var(--overlay);
+  --color-background-code: var(--background-code);
+  --color-on-background-code: var(--on-background-code);
+}
 @layer base {
   :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
 			[data-rui-focus-managed]
@@ -586,9 +662,9 @@
   :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);
+    --tw-ring-color: var(--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-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
     }
   }
   :root .rui-input,
@@ -601,8 +677,8 @@
 	: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);
+    background-color: var(--surface);
+    color: var(--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);
@@ -617,9 +693,9 @@
 	: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);
+    --tw-ring-color: var(--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-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
     }
     --tw-outline-style: none;
     outline-style: none;
@@ -634,9 +710,9 @@
   :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);
+    --tw-ring-color: var(--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-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
     }
   }
   :root .rui-select__trigger {
@@ -705,9 +781,9 @@
 	: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);
+    --tw-ring-color: var(--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-color: color-mix(in oklab, var(--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);
@@ -785,9 +861,9 @@
   :root .rui-calendar__day:focus-visible::before {
     --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);
+    --tw-ring-color: var(--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-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
     }
   }
   :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
@@ -886,7 +962,7 @@
     --rui-popover-shadow: var(--macos-menu-shadow);
     --rui-popover-radius: var(--border-radius-lg);
     border-color: transparent;
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     background-color: var(--macos-elevated);
     box-shadow: var(--macos-menu-shadow);
     backdrop-filter: blur(24px) saturate(1.6);
@@ -921,7 +997,7 @@
     --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);
+    color: var(--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),
@@ -930,25 +1006,25 @@
   :root .rui-dialog__title {
     --tw-font-weight: var(--font-weight-bold, 700);
     font-weight: var(--font-weight-bold, 700);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
   }
   :root .rui-calendar {
     border-radius: var(--radius-container);
     border-style: var(--tw-border-style);
     border-width: 0px;
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     background-color: var(--macos-surface);
     box-shadow: var(--macos-control-shadow);
   }
   :root .rui-calendar__header {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
   }
   :root .rui-sidebar__header {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
   }
   :root rui-tabs[variant] .rui-tabs__list {
     width: fit-content;
@@ -985,9 +1061,9 @@
   :root rui-tabs[variant] .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);
-    --tw-ring-color: var(--color-focus-ring);
+    --tw-ring-color: var(--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-color: color-mix(in oklab, var(--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);
@@ -1025,7 +1101,7 @@
   }
   :root rui-tabs[variant='boxed'] .rui-tabs__panel {
     border-radius: var(--radius-md);
-    color: var(--color-on-surface);
+    color: var(--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);
@@ -1038,7 +1114,7 @@
 	:root .rui-toast {
     border-radius: var(--radius-container);
     border-color: transparent;
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     background-color: var(--macos-elevated);
     background-image: none;
     box-shadow: var(--macos-menu-shadow);
@@ -1075,7 +1151,7 @@
     border-radius: var(--radius-container);
     border-style: var(--tw-border-style);
     border-width: 0px;
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     background-color: var(--macos-surface);
     box-shadow: var(--macos-control-shadow);
   }
@@ -1099,7 +1175,7 @@
 	:root .rui-table__cell,
 	:root .rui-grid__cell {
     border-bottom-color: transparent;
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     border-right-color: transparent;
     background-color: var(--macos-surface);
   }
@@ -1118,7 +1194,7 @@
     border-radius: var(--radius-container);
     border-style: var(--tw-border-style);
     border-width: 0px;
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     background-color: var(--macos-surface);
     box-shadow: var(--macos-control-shadow);
     --rui-treegrid-indent: 0.875rem;
@@ -1129,7 +1205,7 @@
     background-color: transparent;
     padding-inline: var(--spacing-2);
     padding-block: var(--spacing-1);
-    color: var(--color-on-surface);
+    color: var(--on-surface);
     font-size: var(--text-control);
   }
   :root .rui-treegrid__row--header .rui-treegrid__cell {
@@ -1147,7 +1223,7 @@
   }
   :root .rui-separator,
 	:root .rui-sidebar__separator {
-    background-color: var(--color-border);
+    background-color: var(--border);
   }
   :root .rui-slider {
     --rui-slider-track-size: 0.25rem;

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

@@ -27,7 +27,6 @@
   --font-weight-medium: var(--weight-medium);
   --opacity-disabled: var(--opacity-disabled);
   --opacity-muted: var(--opacity-muted);
-  --color-surface: var(--surface);
   --radius-none: var(--border-radius-none);
   --radius-control: var(--radius-control);
   --radius-container: var(--radius-container);
@@ -90,6 +89,86 @@
   --size-icon-sm: 1rem;
   --size-icon-md: 1.25rem;
 }
+:where(:root, .dark) {
+  --color-transparent: transparent;
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-400: var(--gray-400);
+  --color-gray-500: var(--gray-500);
+  --color-gray-600: var(--gray-600);
+  --color-gray-700: var(--gray-700);
+  --color-gray-800: var(--gray-800);
+  --color-gray-900: var(--gray-900);
+  --color-gray-950: var(--gray-950);
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-dark: var(--primary-dark);
+  --color-on-primary: var(--on-primary);
+  --color-primary-container: var(--primary-container);
+  --color-on-primary-container: var(--on-primary-container);
+  --color-secondary: var(--secondary);
+  --color-secondary-light: var(--secondary-light);
+  --color-secondary-dark: var(--secondary-dark);
+  --color-on-secondary: var(--on-secondary);
+  --color-secondary-container: var(--secondary-container);
+  --color-on-secondary-container: var(--on-secondary-container);
+  --color-tertiary: var(--tertiary);
+  --color-on-tertiary: var(--on-tertiary);
+  --color-tertiary-container: var(--tertiary-container);
+  --color-on-tertiary-container: var(--on-tertiary-container);
+  --color-error: var(--error);
+  --color-error-light: var(--error-light);
+  --color-error-dark: var(--error-dark);
+  --color-on-error: var(--on-error);
+  --color-error-container: var(--error-container);
+  --color-on-error-container: var(--on-error-container);
+  --color-success: var(--success);
+  --color-success-light: var(--success-light);
+  --color-success-dark: var(--success-dark);
+  --color-on-success: var(--on-success);
+  --color-success-container: var(--success-container);
+  --color-on-success-container: var(--on-success-container);
+  --color-info: var(--info);
+  --color-on-info: var(--on-info);
+  --color-info-container: var(--info-container);
+  --color-on-info-container: var(--on-info-container);
+  --color-info-light: var(--info-light);
+  --color-info-dark: var(--info-dark);
+  --color-warning: var(--warning);
+  --color-on-warning: var(--on-warning);
+  --color-warning-container: var(--warning-container);
+  --color-on-warning-container: var(--on-warning-container);
+  --color-warning-light: var(--warning-light);
+  --color-warning-dark: var(--warning-dark);
+  --color-destructive: var(--error);
+  --color-on-destructive: var(--on-error);
+  --color-destructive-container: var(--error-container);
+  --color-on-destructive-container: var(--on-error-container);
+  --color-neutral: var(--neutral);
+  --color-surface: var(--surface);
+  --color-on-surface: var(--on-surface);
+  --color-surface-container-lowest: var(--surface-container-lowest);
+  --color-on-surface-container-lowest: var(--on-surface-container-lowest);
+  --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-on-surface-container: var(--on-surface-container);
+  --color-surface-container-high: var(--surface-container-high);
+  --color-on-surface-container-high: var(--on-surface-container-high);
+  --color-surface-container-highest: var(--surface-container-highest);
+  --color-on-surface-container-highest: var(--on-surface-container-highest);
+  --color-background: var(--background);
+  --color-on-background: var(--on-background);
+  --color-border: var(--border);
+  --color-focus-ring: var(--focus-ring);
+  --color-on-focus-ring: var(--on-focus-ring);
+  --color-link: var(--link);
+  --color-overlay: var(--overlay);
+  --color-background-code: var(--background-code);
+  --color-on-background-code: var(--on-background-code);
+}
 @layer base {
   :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
 			[data-rui-focus-managed]
@@ -664,7 +743,7 @@
 	: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);
-    background-color: var(--color-surface);
+    background-color: var(--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);

package/dist/compiled/themes/material.css

@@ -27,7 +27,6 @@
   --font-weight-medium: var(--weight-medium);
   --opacity-disabled: var(--opacity-disabled);
   --opacity-muted: var(--opacity-muted);
-  --color-surface: var(--surface);
   --radius-none: var(--border-radius-none);
   --radius-control: var(--radius-control);
   --radius-container: var(--radius-container);
@@ -90,6 +89,86 @@
   --size-icon-sm: 1rem;
   --size-icon-md: 1.25rem;
 }
+:where(:root, .dark) {
+  --color-transparent: transparent;
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-400: var(--gray-400);
+  --color-gray-500: var(--gray-500);
+  --color-gray-600: var(--gray-600);
+  --color-gray-700: var(--gray-700);
+  --color-gray-800: var(--gray-800);
+  --color-gray-900: var(--gray-900);
+  --color-gray-950: var(--gray-950);
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-dark: var(--primary-dark);
+  --color-on-primary: var(--on-primary);
+  --color-primary-container: var(--primary-container);
+  --color-on-primary-container: var(--on-primary-container);
+  --color-secondary: var(--secondary);
+  --color-secondary-light: var(--secondary-light);
+  --color-secondary-dark: var(--secondary-dark);
+  --color-on-secondary: var(--on-secondary);
+  --color-secondary-container: var(--secondary-container);
+  --color-on-secondary-container: var(--on-secondary-container);
+  --color-tertiary: var(--tertiary);
+  --color-on-tertiary: var(--on-tertiary);
+  --color-tertiary-container: var(--tertiary-container);
+  --color-on-tertiary-container: var(--on-tertiary-container);
+  --color-error: var(--error);
+  --color-error-light: var(--error-light);
+  --color-error-dark: var(--error-dark);
+  --color-on-error: var(--on-error);
+  --color-error-container: var(--error-container);
+  --color-on-error-container: var(--on-error-container);
+  --color-success: var(--success);
+  --color-success-light: var(--success-light);
+  --color-success-dark: var(--success-dark);
+  --color-on-success: var(--on-success);
+  --color-success-container: var(--success-container);
+  --color-on-success-container: var(--on-success-container);
+  --color-info: var(--info);
+  --color-on-info: var(--on-info);
+  --color-info-container: var(--info-container);
+  --color-on-info-container: var(--on-info-container);
+  --color-info-light: var(--info-light);
+  --color-info-dark: var(--info-dark);
+  --color-warning: var(--warning);
+  --color-on-warning: var(--on-warning);
+  --color-warning-container: var(--warning-container);
+  --color-on-warning-container: var(--on-warning-container);
+  --color-warning-light: var(--warning-light);
+  --color-warning-dark: var(--warning-dark);
+  --color-destructive: var(--error);
+  --color-on-destructive: var(--on-error);
+  --color-destructive-container: var(--error-container);
+  --color-on-destructive-container: var(--on-error-container);
+  --color-neutral: var(--neutral);
+  --color-surface: var(--surface);
+  --color-on-surface: var(--on-surface);
+  --color-surface-container-lowest: var(--surface-container-lowest);
+  --color-on-surface-container-lowest: var(--on-surface-container-lowest);
+  --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-on-surface-container: var(--on-surface-container);
+  --color-surface-container-high: var(--surface-container-high);
+  --color-on-surface-container-high: var(--on-surface-container-high);
+  --color-surface-container-highest: var(--surface-container-highest);
+  --color-on-surface-container-highest: var(--on-surface-container-highest);
+  --color-background: var(--background);
+  --color-on-background: var(--on-background);
+  --color-border: var(--border);
+  --color-focus-ring: var(--focus-ring);
+  --color-on-focus-ring: var(--on-focus-ring);
+  --color-link: var(--link);
+  --color-overlay: var(--overlay);
+  --color-background-code: var(--background-code);
+  --color-on-background-code: var(--on-background-code);
+}
 @layer base {
   :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
 			[data-rui-focus-managed]
@@ -664,7 +743,7 @@
 	: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);
-    background-color: var(--color-surface);
+    background-color: var(--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);