@ecopages/radiant-themes 0.2.5 → 0.3.1

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);
@@ -38,7 +34,6 @@
   --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);
@@ -100,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]
@@ -573,7 +648,7 @@
   :root .rui-button--ghost {
     color: var(--macos-text);
   }
-  :root .rui-button--ghost:hover:not(:disabled) {
+  :root .rui-button--ghost:hover:not(:disabled, [aria-pressed='true']) {
     background-color: var(--macos-hover-fill);
   }
   :root .rui-button--ghost:active:not(:disabled),
@@ -587,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,
@@ -602,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);
@@ -618,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;
@@ -635,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 {
@@ -706,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);
@@ -747,8 +822,6 @@
 	: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']: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-sm);
     background-color: var(--macos-selection);
@@ -764,10 +837,77 @@
   }
   :root .rui-calendar__day {
     height: calc(var(--spacing, 0.25rem) * 7);
-    border-radius: var(--radius-full);
+    border-radius: var(--radius-none);
+    isolation: isolate;
+  }
+  :root .rui-calendar__day::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc(50% - 0.875rem);
+    z-index: -1;
+    border-radius: 9999px;
+  }
+  :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true']) {
+    background-color: transparent;
+  }
+  :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true'])::before {
+    background-color: var(--macos-hover-fill);
+  }
+  :root .rui-calendar__day:focus-visible {
+    --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);
+  }
+  :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(--focus-ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
+    }
+  }
+  :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) {
+    background-color: transparent;
+    color: var(--macos-selection-text);
+  }
+  :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true'])::before {
+    background-color: var(--macos-selection);
+  }
+  :root .rui-calendar__day[data-range-middle='true'],
+	:root .rui-calendar__day[data-range-middle='true']:hover:not(:disabled) {
+    background-color: var(--macos-selection);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--macos-selection) 16%, transparent);
+    }
   }
-  :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']) {
-    border-radius: var(--radius-full);
+  :root .rui-calendar__day[data-range-start='true']:not([data-range-end='true']) {
+    background-image: linear-gradient(
+			to right,
+			transparent 50%,
+			var(--macos-selection) 50%
+		);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-image: linear-gradient(
+			to right,
+			transparent 50%,
+			color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
+		);
+    }
+  }
+  :root .rui-calendar__day[data-range-end='true']:not([data-range-start='true']) {
+    background-image: linear-gradient(
+			to left,
+			transparent 50%,
+			var(--macos-selection) 50%
+		);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-image: linear-gradient(
+			to left,
+			transparent 50%,
+			color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
+		);
+    }
   }
   :root .rui-calendar__day[aria-current='date']:not([aria-selected='true']) {
     text-decoration-line: none;
@@ -822,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);
@@ -857,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),
@@ -866,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;
@@ -921,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);
@@ -961,15 +1101,12 @@
   }
   :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);
     }
-    background-color: var(--macos-text);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
-    }
+    background-color: var(--macos-surface);
     padding: var(--rui-tabs-panel-padding);
     padding-top: calc(var(--rui-tabs-panel-padding) + 0.75rem);
   }
@@ -977,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);
@@ -1014,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);
   }
@@ -1038,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);
   }
@@ -1057,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;
@@ -1068,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 {
@@ -1086,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);