twntyx-css 1.0.0

package/styles/colors.css

@@ -0,0 +1,536 @@
+/*----------------------------*/
+/* COLORS */
+/*----------------------------*/
+
+:root {
+  color-scheme: light dark;
+
+  /** Brand (Earth Gold) **/
+  /* LIGHT */
+  --raw-color-brand: rgb(225 150 65);
+  --raw-color-brand-strong: rgb(165 90 20);
+  --raw-color-brand-moderate: rgb(238 180 115);
+  --raw-color-brand-soft: rgb(251 238 218);
+  --raw-color-brand-light: rgb(255 250 243);
+  /* DARK */
+  --raw-color-brand-dark: rgb(240 175 95);
+  --raw-color-brand-strong-dark: rgb(255 225 180);
+  --raw-color-brand-moderate-dark: rgb(200 130 55);
+  --raw-color-brand-soft-dark: rgb(160 95 35);
+  --raw-color-brand-light-dark: rgb(110 65 20);
+
+  --raw-color-core-white: rgb(255 255 255);
+  --raw-color-core-black: var(--raw-color-core-ui-800);
+
+  /** UI (Earth) **/
+  --raw-color-core-ui-50: rgb(251 250 247);
+  --raw-color-core-ui-100: rgb(249 247 243);
+  --raw-color-core-ui-200: rgb(243 240 235);
+  --raw-color-core-ui-300: rgb(237, 233, 226);
+  --raw-color-core-ui-400: rgb(190 182 172);
+  --raw-color-core-ui-500: rgb(125 115 105);
+  --raw-color-core-ui-600: rgb(90 82 72);
+  --raw-color-core-ui-700: rgb(60 54 46);
+  --raw-color-core-ui-800: rgb(48 43 36);
+  --raw-color-core-ui-900: rgb(32 28 23);
+  --raw-color-core-ui-950: rgb(14 12 9);
+
+  /** Base Yellow (Brand) **/
+  /* LIGHT */
+  --raw-color-core-yellow-50: rgb(255 252 235);
+  --raw-color-core-yellow-100: rgb(255 247 214);
+  --raw-color-core-yellow-200: rgb(255 237 179);
+  --raw-color-core-yellow-300: rgb(255 227 143);
+  --raw-color-core-yellow-400: rgb(255 212 107);
+  --raw-color-core-yellow-500: rgb(255 202 54);
+  --raw-color-core-yellow-600: rgb(255 192 0);
+  --raw-color-core-yellow-700: rgb(230 173 0);
+  --raw-color-core-yellow-800: rgb(204 154 0);
+  --raw-color-core-yellow-900: rgb(179 135 0);
+  --raw-color-core-yellow-950: rgb(128 97 0);
+  /* DARK */
+  --raw-color-core-yellow-50-dark: rgb(38 31 0);
+  --raw-color-core-yellow-100-dark: rgb(51 41 0);
+  --raw-color-core-yellow-200-dark: rgb(77 62 0);
+  --raw-color-core-yellow-300-dark: rgb(102 82 0);
+  --raw-color-core-yellow-400-dark: rgb(128 103 0);
+  --raw-color-core-yellow-500-dark: rgb(179 144 0);
+  --raw-color-core-yellow-600-dark: var(--raw-color-background-brand);
+  --raw-color-core-yellow-700-dark: rgb(255 204 51);
+  --raw-color-core-yellow-800-dark: rgb(255 214 82);
+  --raw-color-core-yellow-900-dark: rgb(255 224 112);
+  --raw-color-core-yellow-950-dark: rgb(255 235 143);
+
+  /** Base Blue **/
+  /* LIGHT */
+  --raw-color-core-blue-50: rgb(245 248 255);
+  --raw-color-core-blue-100: rgb(235 241 255);
+  --raw-color-core-blue-200: rgb(205 218 255);
+  --raw-color-core-blue-300: rgb(176 195 255);
+  --raw-color-core-blue-400: rgb(136 167 255);
+  --raw-color-core-blue-500: rgb(88 134 255);
+  --raw-color-core-blue-600: rgb(34 86 228);
+  --raw-color-core-blue-700: rgb(14 57 176);
+  --raw-color-core-blue-800: rgb(12 50 156);
+  --raw-color-core-blue-900: rgb(8 38 125);
+  --raw-color-core-blue-950: rgb(5 25 84);
+  /* DARK */
+  --raw-color-core-blue-50-dark: rgb(13 25 45);
+  --raw-color-core-blue-100-dark: rgb(17 32 56);
+  --raw-color-core-blue-200-dark: rgb(34 64 112);
+  --raw-color-core-blue-300-dark: rgb(51 96 168);
+  --raw-color-core-blue-400-dark: rgb(85 128 204);
+  --raw-color-core-blue-500-dark: rgb(119 153 230);
+  --raw-color-core-blue-600-dark: rgb(136 167 255);
+  --raw-color-core-blue-700-dark: rgb(159 184 255);
+  --raw-color-core-blue-800-dark: rgb(182 201 255);
+  --raw-color-core-blue-900-dark: rgb(205 218 255);
+  --raw-color-core-blue-950-dark: rgb(235 242 255);
+
+  /** Base Green **/
+  /* LIGHT */
+  --raw-color-core-green-50: rgb(236 246 242);
+  --raw-color-core-green-100: rgb(220 238 230);
+  --raw-color-core-green-200: rgb(190 225 210);
+  --raw-color-core-green-300: rgb(140 200 173);
+  --raw-color-core-green-400: rgb(90 175 137);
+  --raw-color-core-green-500: rgb(51 160 115);
+  --raw-color-core-green-600: rgb(28 142 98);
+  --raw-color-core-green-700: rgb(22 115 80);
+  --raw-color-core-green-800: rgb(17 88 61);
+  --raw-color-core-green-900: rgb(13 66 46);
+  --raw-color-core-green-950: rgb(7 33 23);
+  /* DARK */
+  --raw-color-core-green-50-dark: rgb(8 33 24);
+  --raw-color-core-green-100-dark: rgb(17 67 49);
+  --raw-color-core-green-200-dark: rgb(25 100 73);
+  --raw-color-core-green-300-dark: rgb(34 134 97);
+  --raw-color-core-green-400-dark: rgb(42 167 121);
+  --raw-color-core-green-500-dark: rgb(72 178 137);
+  --raw-color-core-green-600-dark: rgb(102 189 153);
+  --raw-color-core-green-700-dark: rgb(153 211 186);
+  --raw-color-core-green-800-dark: rgb(204 233 220);
+  --raw-color-core-green-900-dark: rgb(230 244 238);
+  --raw-color-core-green-950-dark: rgb(242 249 246);
+
+  /** Base Red **/
+  /* LIGHT */
+  --raw-color-core-red-50: rgb(254 242 243);
+  --raw-color-core-red-100: rgb(253 230 233);
+  --raw-color-core-red-200: rgb(251 204 210);
+  --raw-color-core-red-300: rgb(247 166 176);
+  --raw-color-core-red-400: rgb(235 115 131);
+  --raw-color-core-red-500: rgb(214 64 87);
+  --raw-color-core-red-600: rgb(193 13 48);
+  --raw-color-core-red-700: rgb(154 10 38);
+  --raw-color-core-red-800: rgb(116 8 29);
+  --raw-color-core-red-900: rgb(77 5 19);
+  --raw-color-core-red-950: rgb(39 3 10);
+  /* DARK */
+  --raw-color-core-red-50-dark: rgb(51 12 18);
+  --raw-color-core-red-100-dark: rgb(82 18 29);
+  --raw-color-core-red-200-dark: rgb(128 28 45);
+  --raw-color-core-red-300-dark: rgb(173 38 62);
+  --raw-color-core-red-400-dark: rgb(219 48 78);
+  --raw-color-core-red-500-dark: rgb(242 95 116);
+  --raw-color-core-red-600-dark: rgb(242 122 138);
+  --raw-color-core-red-700-dark: rgb(245 158 170);
+  --raw-color-core-red-800-dark: rgb(249 189 197);
+  --raw-color-core-red-900-dark: rgb(252 219 224);
+  --raw-color-core-red-950-dark: rgb(254 242 243);
+
+  --raw-color-background: var(--raw-color-bg-elevation-default);
+  --raw-color-background-dark: var(--raw-color-bg-elevation-default-dark);
+  --raw-color-foreground: var(--raw-color-fg-elevation-default);
+  --raw-color-foreground-dark: var(--raw-color-fg-elevation-default-dark);
+
+  /** Base Orange **/
+  /* LIGHT */
+  --raw-color-core-orange-50: rgb(255 247 241);
+  --raw-color-core-orange-100: rgb(255 237 224);
+  --raw-color-core-orange-200: rgb(255 221 199);
+  --raw-color-core-orange-300: rgb(255 197 163);
+  --raw-color-core-orange-400: rgb(255 170 122);
+  --raw-color-core-orange-500: rgb(255 139 77);
+  --raw-color-core-orange-600: rgb(238 84 50);
+  --raw-color-core-orange-700: rgb(190 67 40);
+  --raw-color-core-orange-800: rgb(143 50 30);
+  --raw-color-core-orange-900: rgb(95 34 20);
+  --raw-color-core-orange-950: rgb(48 17 10);
+
+  /* DARK */
+  --raw-color-core-orange-50-dark: rgb(48 17 10);
+  --raw-color-core-orange-100-dark: rgb(95 34 20);
+  --raw-color-core-orange-200-dark: rgb(143 50 30);
+  --raw-color-core-orange-300-dark: rgb(190 67 40);
+  --raw-color-core-orange-400-dark: rgb(238 84 50);
+  --raw-color-core-orange-500-dark: rgb(255 139 77);
+  --raw-color-core-orange-600-dark: rgb(255 170 122);
+  --raw-color-core-orange-700-dark: rgb(255 197 163);
+  --raw-color-core-orange-800-dark: rgb(255 221 199);
+  --raw-color-core-orange-900-dark: rgb(255 237 224);
+  --raw-color-core-orange-950-dark: rgb(255 247 241);
+}
+
+:root {
+  /* Base Text Colors - Light */
+  --raw-color-text-default: var(--raw-color-core-black);
+  --raw-color-text-secondary: var(--raw-color-core-ui-600);
+  --raw-color-text-tertiary: var(--raw-color-core-ui-500);
+  --raw-color-text-disabled: var(--raw-color-core-ui-400);
+
+  /* Base Text Colors - Dark */
+  --raw-color-text-default-dark: var(--raw-color-core-white);
+  --raw-color-text-secondary-dark: var(--raw-color-core-ui-300);
+  --raw-color-text-tertiary-dark: var(--raw-color-core-ui-400);
+  --raw-color-text-disabled-dark: var(--raw-color-core-ui-500);
+
+
+  /* Brand Texts - Light */
+  --raw-color-text-brand: var(--raw-color-brand);
+  --raw-color-text-brand-hover: var(--raw-color-brand-moderate);
+  --raw-color-text-brand-active: var(--raw-color-brand-strong);
+  --raw-color-text-brand-disabled: var(--raw-color-brand-light);
+
+
+  /* Brand Texts - Dark */
+  --raw-color-text-brand-dark: var(--raw-color-brand-dark);
+  --raw-color-text-brand-hover-dark: var(--raw-color-brand-moderate-dark);
+  --raw-color-text-brand-active-dark: var(--raw-color-brand-strong-dark);
+  --raw-color-text-brand-disabled-dark: var(--raw-color-brand-light-dark);
+
+
+  /* Interactive Text - Light */
+  --raw-color-text-link: var(--raw-color-brand);
+  --raw-color-text-link-hover: var(--raw-color-brand-moderate);
+  --raw-color-text-link-active: var(--raw-color-brand-strong);
+
+  /* Interactive Text - Dark */
+  --raw-color-text-link-dark: var(--raw-color-brand-dark);
+  --raw-color-text-link-hover-dark: var(--raw-color-brand-moderate-dark);
+  --raw-color-text-link-active-dark: var(--raw-color-brand-strong-dark);
+
+  /* Status Text - Light */
+  --raw-color-text-neutral: var(--raw-color-core-ui-700);
+  --raw-color-text-success: var(--raw-color-core-green-700);
+  --raw-color-text-error: var(--raw-color-core-red-600);
+  --raw-color-text-warning: var(--raw-color-core-orange-700);
+  --raw-color-text-attention: var(--raw-color-core-yellow-950);
+  --raw-color-text-info: var(--raw-color-core-blue-600);
+
+  /* Status Text - Dark */
+  --raw-color-text-neutral-dark: var(--raw-color-core-ui-700-dark);
+  --raw-color-text-success-dark: var(--raw-color-core-green-700-dark);
+  --raw-color-text-error-dark: var(--raw-color-core-red-700-dark);
+  --raw-color-text-warning-dark: var(--raw-color-core-orange-700-dark);
+  --raw-color-text-attention-dark: var(--raw-color-core-yellow-700-dark);
+  --raw-color-text-info-dark: var(--raw-color-core-blue-700-dark);
+}
+
+:root {
+  /* Base Backgrounds - Light */
+  --raw-color-background-page: var(--raw-color-core-ui-50);
+  --raw-color-background-surface: var(--raw-color-core-white);
+  --raw-color-background-surface-elevated: var(--raw-color-core-ui-50);
+  --raw-color-background-surface-sunken: var(--raw-color-core-ui-200);
+  --raw-color-background-overlay: color-mix(in srgb, var(--raw-color-core-ui-900) 95%, transparent);
+  --raw-color-background-inverted: var(--raw-color-core-ui-900);
+
+  /* Base Backgrounds - Dark */
+  --raw-color-background-page-dark: var(--raw-color-core-ui-900);
+  --raw-color-background-surface-dark: var(--raw-color-core-ui-800);
+  --raw-color-background-surface-elevated-dark: var(--raw-color-core-ui-700);
+  --raw-color-background-surface-sunken-dark: var(--raw-color-core-ui-900);
+  --raw-color-background-overlay-dark: color-mix(in srgb, var(--raw-color-core-ui-900) 95%, transparent);
+  --raw-color-background-inverted-dark: var(--raw-color-core-ui-50);
+
+  /* Brand Backgrounds - Light */
+  --raw-color-background-brand: var(--raw-color-brand);
+  --raw-color-background-brand-hover: var(--raw-color-brand-moderate);
+  --raw-color-background-brand-active: var(--raw-color-brand-soft);
+  --raw-color-background-brand-disabled: var(--raw-color-brand-light);
+
+
+  /* Brand Backgrounds - Dark */
+  --raw-color-background-brand-dark: var(--raw-color-brand-dark);
+  --raw-color-background-brand-hover-dark: var(--raw-color-brand-moderate-dark);
+  --raw-color-background-brand-active-dark: var(--raw-color-brand-soft-dark);
+  --raw-color-background-brand-disabled-dark: var(--raw-color-brand-light-dark);
+
+
+  /* Status Backgrounds - Light */
+  --raw-color-background-neutral: var(--raw-color-core-ui-200);
+  --raw-color-background-neutral-hover: var(--raw-color-core-ui-300);
+  --raw-color-background-neutral-active: var(--raw-color-core-ui-600);
+  --raw-color-background-success: var(--raw-color-core-green-100);
+  --raw-color-background-success-hover: var(--raw-color-core-green-200);
+  --raw-color-background-success-active: var(--raw-color-core-green-600);
+  --raw-color-background-error: var(--raw-color-core-red-100);
+  --raw-color-background-error-hover: var(--raw-color-core-red-200);
+  --raw-color-background-error-active: var(--raw-color-core-red-600);
+  --raw-color-background-warning: var(--raw-color-core-orange-100);
+  --raw-color-background-warning-hover: var(--raw-color-core-orange-200);
+  --raw-color-background-warning-active: var(--raw-color-core-orange-600);
+  --raw-color-background-attention: var(--raw-color-core-yellow-100);
+  --raw-color-background-attention-hover: var(--raw-color-core-yellow-200);
+  --raw-color-background-attention-active: var(--raw-color-core-yellow-600);
+  --raw-color-background-info: var(--raw-color-core-blue-100);
+  --raw-color-background-info-hover: var(--raw-color-core-blue-200);
+  --raw-color-background-info-active: var(--raw-color-core-blue-600);
+
+  /* Status Backgrounds - Dark */
+  --raw-color-background-neutral-dark: var(--raw-color-core-ui-600);
+  --raw-color-background-neutral-hover-dark: var(--raw-color-core-ui-800);
+  --raw-color-background-neutral-active-dark: var(--raw-color-core-ui-600);
+  --raw-color-background-success-dark: var(--raw-color-core-green-100-dark);
+  --raw-color-background-success-hover-dark: var(--raw-color-core-green-200-dark);
+  --raw-color-background-success-active-dark: var(--raw-color-core-green-600-dark);
+  --raw-color-background-error-dark: var(--raw-color-core-red-100-dark);
+  --raw-color-background-error-hover-dark: var(--raw-color-core-red-200-dark);
+  --raw-color-background-error-active-dark: var(--raw-color-core-red-600-dark);
+  --raw-color-background-warning-dark: var(--raw-color-core-orange-100-dark);
+  --raw-color-background-warning-hover-dark: var(--raw-color-core-orange-200-dark);
+  --raw-color-background-warning-active-dark: var(--raw-color-core-orange-600-dark);
+  --raw-color-background-attention-dark: var(--raw-color-core-yellow-100-dark);
+  --raw-color-background-attention-hover-dark: var(--raw-color-core-yellow-200-dark);
+  --raw-color-background-attention-active-dark: var(--raw-color-core-yellow-600-dark);
+  --raw-color-background-info-dark: var(--raw-color-core-blue-100-dark);
+  --raw-color-background-info-hover-dark: var(--raw-color-core-blue-200-dark);
+  --raw-color-background-info-active-dark: var(--raw-color-core-blue-600-dark);
+}
+
+:root {
+  /* Default Borders - Light */
+  --raw-color-border-subtle: var(--raw-color-core-ui-200);
+  --raw-color-border-default: var(--raw-color-core-ui-300);
+  --raw-color-border-strong: var(--raw-color-core-ui-400);
+  --raw-color-border-highlight: color-mix(in srgb, var(--raw-color-border-strong) 50%, transparent);
+
+  /* Default Borders - Dark */
+  --raw-color-border-subtle-dark: var(--raw-color-core-ui-800);
+  --raw-color-border-default-dark: var(--raw-color-core-ui-700);
+  --raw-color-border-strong-dark: var(--raw-color-core-ui-500);
+  --raw-color-border-highlight-dark: color-mix(in srgb, var(--raw-color-border-strong-dark) 50%, transparent);
+
+  /* Interactive Borders - Light */
+  --raw-color-border-focus: var(--raw-color-core-ui-500);
+  --raw-color-border-focus-visible: var(--raw-color-brand);
+  --raw-color-border-hover: var(--raw-color-core-ui-400);
+
+  /* Interactive Borders - Dark */
+  --raw-color-border-focus-dark: var(--raw-color-core-ui-400);
+  --raw-color-border-focus-visible-dark: var(--raw-color-brand-strong-dark);
+  --raw-color-border-hover-dark: var(--raw-color-core-ui-500);
+
+  /* Brand Borders - Light */
+  --raw-color-border-brand: var(--raw-color-brand);
+  --raw-color-border-brand-hover: var(--raw-color-brand-moderate);
+  --raw-color-border-brand-active: var(--raw-color-brand-soft);
+  --raw-color-border-brand-disabled: var(--raw-color-brand-light);
+
+
+  /* Brand Borders - Dark */
+  --raw-color-border-brand-dark: var(--raw-color-brand-dark);
+  --raw-color-border-brand-hover-dark: var(--raw-color-brand-moderate-dark);
+  --raw-color-border-brand-active-dark: var(--raw-color-brand-soft-dark);
+  --raw-color-border-brand-disabled-dark: var(--raw-color-brand-light-dark);
+
+
+  /* Status Borders - Light */
+  --raw-color-border-neutral: var(--raw-color-core-ui-300);
+  --raw-color-border-success: var(--raw-color-core-green-200);
+  --raw-color-border-error: var(--raw-color-core-red-200);
+  --raw-color-border-warning: var(--raw-color-core-orange-200);
+  --raw-color-border-attention: var(--raw-color-core-yellow-200);
+  --raw-color-border-info: var(--raw-color-core-blue-200);
+
+  /* Status Borders - Dark */
+  --raw-color-border-neutral-dark: var(--raw-color-core-ui-500);
+  --raw-color-border-success-dark: var(--raw-color-core-green-200-dark);
+  --raw-color-border-error-dark: var(--raw-color-core-red-200-dark);
+  --raw-color-border-warning-dark: var(--raw-color-core-orange-200-dark);
+  --raw-color-border-attention-dark: var(--raw-color-core-yellow-200-dark);
+  --raw-color-border-info-dark: var(--raw-color-core-blue-300-dark);
+}
+
+
+@theme {
+  /* Colors - Semantic colors using light-dark() */
+  /* Foreground */
+  --color-foreground: light-dark(var(--raw-color-foreground), var(--raw-color-foreground-dark));
+
+  /* Text Colors */
+  --color-text-default: light-dark(var(--raw-color-text-default), var(--raw-color-text-default-dark));
+  --color-text-secondary: light-dark(var(--raw-color-text-secondary), var(--raw-color-text-secondary-dark));
+  --color-text-tertiary: light-dark(var(--raw-color-text-tertiary), var(--raw-color-text-tertiary-dark));
+  --color-text-disabled: light-dark(var(--raw-color-text-disabled), var(--raw-color-text-disabled-dark));
+  --color-text-inverted: light-dark(var(--raw-color-text-default-dark), var(--raw-color-text-default));
+  --color-text-link: light-dark(var(--raw-color-text-link), var(--raw-color-text-link-dark));
+  --color-text-link-hover: light-dark(var(--raw-color-text-link-hover), var(--raw-color-text-link-hover-dark));
+  --color-text-link-active: light-dark(var(--raw-color-text-link-active), var(--raw-color-text-link-active-dark));
+  --color-text-brand: light-dark(var(--raw-color-text-brand), var(--raw-color-text-brand-dark));
+  --color-text-brand-hover: light-dark(var(--raw-color-text-brand-hover), var(--raw-color-text-brand-hover-dark));
+  --color-text-brand-active: light-dark(var(--raw-color-text-brand-active), var(--raw-color-text-brand-active-dark));
+  --color-text-brand-disabled: light-dark(var(--raw-color-text-brand-disabled), var(--raw-color-text-brand-disabled-dark));
+  --color-text-neutral: light-dark(var(--raw-color-text-neutral), var(--raw-color-text-neutral-dark));
+  --color-text-success: light-dark(var(--raw-color-text-success), var(--raw-color-text-success-dark));
+  --color-text-error: light-dark(var(--raw-color-text-error), var(--raw-color-text-error-dark));
+  --color-text-warning: light-dark(var(--raw-color-text-warning), var(--raw-color-text-warning-dark));
+  --color-text-attention: light-dark(var(--raw-color-text-attention), var(--raw-color-text-attention-dark));
+  --color-text-info: light-dark(var(--raw-color-text-info), var(--raw-color-text-info-dark));
+
+  /* Background Colors */
+  --color-background-page: light-dark(var(--raw-color-background-page), var(--raw-color-background-page-dark));
+  --color-background-surface: light-dark(var(--raw-color-background-surface), var(--raw-color-background-surface-dark));
+  --color-background-surface-elevated: light-dark(var(--raw-color-background-surface-elevated), var(--raw-color-background-surface-elevated-dark));
+  --color-background-surface-sunken: light-dark(var(--raw-color-background-surface-sunken), var(--raw-color-background-surface-sunken-dark));
+  --color-background-overlay: light-dark(var(--raw-color-background-overlay), var(--raw-color-background-overlay-dark));
+  --color-background-inverted: light-dark(var(--raw-color-background-inverted), var(--raw-color-background-inverted-dark));
+  --color-background-brand: light-dark(var(--raw-color-background-brand), var(--raw-color-background-brand-dark));
+  --color-background-brand-hover: light-dark(var(--raw-color-background-brand-hover), var(--raw-color-background-brand-hover-dark));
+  --color-background-brand-active: light-dark(var(--raw-color-background-brand-active), var(--raw-color-background-brand-active-dark));
+  --color-background-brand-disabled: light-dark(var(--raw-color-background-brand-disabled), var(--raw-color-background-brand-disabled-dark));
+  --color-background-neutral: light-dark(var(--raw-color-background-neutral), var(--raw-color-background-neutral-dark));
+  --color-background-neutral-hover: light-dark(var(--raw-color-background-neutral-hover), var(--raw-color-background-neutral-hover-dark));
+  --color-background-neutral-active: light-dark(var(--raw-color-background-neutral-active), var(--raw-color-background-neutral-active-dark));
+  --color-background-success: light-dark(var(--raw-color-background-success), var(--raw-color-background-success-dark));
+  --color-background-success-hover: light-dark(var(--raw-color-background-success-hover), var(--raw-color-background-success-hover-dark));
+  --color-background-success-active: light-dark(var(--raw-color-background-success-active), var(--raw-color-background-success-active-dark));
+  --color-background-error: light-dark(var(--raw-color-background-error), var(--raw-color-background-error-dark));
+  --color-background-error-hover: light-dark(var(--raw-color-background-error-hover), var(--raw-color-background-error-hover-dark));
+  --color-background-error-active: light-dark(var(--raw-color-background-error-active), var(--raw-color-background-error-active-dark));
+  --color-background-warning: light-dark(var(--raw-color-background-warning), var(--raw-color-background-warning-dark));
+  --color-background-warning-hover: light-dark(var(--raw-color-background-warning-hover), var(--raw-color-background-warning-hover-dark));
+  --color-background-warning-active: light-dark(var(--raw-color-background-warning-active), var(--raw-color-background-warning-active-dark));
+  --color-background-attention: light-dark(var(--raw-color-background-attention), var(--raw-color-background-attention-dark));
+  --color-background-attention-hover: light-dark(var(--raw-color-background-attention-hover), var(--raw-color-background-attention-hover-dark));
+  --color-background-attention-active: light-dark(var(--raw-color-background-attention-active), var(--raw-color-background-attention-active-dark));
+  --color-background-info: light-dark(var(--raw-color-background-info), var(--raw-color-background-info-dark));
+  --color-background-info-hover: light-dark(var(--raw-color-background-info-hover), var(--raw-color-background-info-hover-dark));
+  --color-background-info-active: light-dark(var(--raw-color-background-info-active), var(--raw-color-background-info-active-dark));
+
+  /* Line/Border Colors */
+  --color-line-default: light-dark(var(--raw-color-border-default), var(--raw-color-border-default-dark));
+  --color-line-subtle: light-dark(var(--raw-color-border-subtle), var(--raw-color-border-subtle-dark));
+  --color-line-strong: light-dark(var(--raw-color-border-strong), var(--raw-color-border-strong-dark));
+  --color-line-highlight: light-dark(var(--raw-color-border-highlight), var(--raw-color-border-highlight-dark));
+  --color-line-focus: light-dark(var(--raw-color-border-focus), var(--raw-color-border-focus-dark));
+  --color-line-focus-visible: light-dark(var(--raw-color-border-focus-visible), var(--raw-color-border-focus-visible-dark));
+  --color-line-hover: light-dark(var(--raw-color-border-hover), var(--raw-color-border-hover-dark));
+  --color-line-brand: light-dark(var(--raw-color-brand), var(--raw-color-brand-dark));
+  --color-line-brand-hover: light-dark(var(--raw-color-brand), var(--raw-color-brand-dark));
+  --color-line-brand-active: light-dark(var(--raw-color-brand-light), var(--raw-color-brand-light-dark));
+  --color-line-brand-disabled: light-dark(var(--raw-color-brand-light), var(--raw-color-brand-light-dark));
+  --color-line-neutral: light-dark(var(--raw-color-border-neutral), var(--raw-color-border-neutral-dark));
+  --color-line-success: light-dark(var(--raw-color-border-success), var(--raw-color-border-success-dark));
+  --color-line-error: light-dark(var(--raw-color-border-error), var(--raw-color-border-error-dark));
+  --color-line-warning: light-dark(var(--raw-color-border-warning), var(--raw-color-border-warning-dark));
+  --color-line-attention: light-dark(var(--raw-color-border-attention), var(--raw-color-border-attention-dark));
+  --color-line-info: light-dark(var(--raw-color-border-info), var(--raw-color-border-info-dark));
+
+  /* Brand Colors */
+  --color-brand-default: light-dark(var(--raw-color-brand), var(--raw-color-brand-dark));
+  --color-brand-strong: light-dark(var(--raw-color-brand-strong), var(--raw-color-brand-strong-dark));
+  --color-brand-moderate: light-dark(var(--raw-color-brand-moderate), var(--raw-color-brand-moderate-dark));
+  --color-brand-soft: light-dark(var(--raw-color-brand-soft), var(--raw-color-brand-soft-dark));
+  --color-brand-light: light-dark(var(--raw-color-brand-light), var(--raw-color-brand-light-dark));
+
+  /* Core Colors */
+  --color-core-white: var(--raw-color-core-white);
+  --color-core-black: var(--raw-color-core-black);
+  --color-core-ui-50: var(--raw-color-core-ui-50);
+  --color-core-ui-100: var(--raw-color-core-ui-100);
+  --color-core-ui-200: var(--raw-color-core-ui-200);
+  --color-core-ui-300: var(--raw-color-core-ui-300);
+  --color-core-ui-400: var(--raw-color-core-ui-400);
+  --color-core-ui-500: var(--raw-color-core-ui-500);
+  --color-core-ui-600: var(--raw-color-core-ui-600);
+  --color-core-ui-700: var(--raw-color-core-ui-700);
+  --color-core-ui-800: var(--raw-color-core-ui-800);
+  --color-core-ui-900: var(--raw-color-core-ui-900);
+  --color-core-ui-950: var(--raw-color-core-ui-950);
+
+  /* Core Yellow */
+  --color-core-yellow-50: light-dark(var(--raw-color-core-yellow-50), var(--raw-color-core-yellow-50-dark));
+  --color-core-yellow-100: light-dark(var(--raw-color-core-yellow-100), var(--raw-color-core-yellow-100-dark));
+  --color-core-yellow-200: light-dark(var(--raw-color-core-yellow-200), var(--raw-color-core-yellow-200-dark));
+  --color-core-yellow-300: light-dark(var(--raw-color-core-yellow-300), var(--raw-color-core-yellow-300-dark));
+  --color-core-yellow-400: light-dark(var(--raw-color-core-yellow-400), var(--raw-color-core-yellow-400-dark));
+  --color-core-yellow-500: light-dark(var(--raw-color-core-yellow-500), var(--raw-color-core-yellow-500-dark));
+  --color-core-yellow-600: light-dark(var(--raw-color-core-yellow-600), var(--raw-color-core-yellow-600-dark));
+  --color-core-yellow-700: light-dark(var(--raw-color-core-yellow-700), var(--raw-color-core-yellow-700-dark));
+  --color-core-yellow-800: light-dark(var(--raw-color-core-yellow-800), var(--raw-color-core-yellow-800-dark));
+  --color-core-yellow-900: light-dark(var(--raw-color-core-yellow-900), var(--raw-color-core-yellow-900-dark));
+  --color-core-yellow-950: light-dark(var(--raw-color-core-yellow-950), var(--raw-color-core-yellow-950-dark));
+
+  /* Core Blue */
+  --color-core-blue-50: light-dark(var(--raw-color-core-blue-50), var(--raw-color-core-blue-50-dark));
+  --color-core-blue-100: light-dark(var(--raw-color-core-blue-100), var(--raw-color-core-blue-100-dark));
+  --color-core-blue-200: light-dark(var(--raw-color-core-blue-200), var(--raw-color-core-blue-200-dark));
+  --color-core-blue-300: light-dark(var(--raw-color-core-blue-300), var(--raw-color-core-blue-300-dark));
+  --color-core-blue-400: light-dark(var(--raw-color-core-blue-400), var(--raw-color-core-blue-400-dark));
+  --color-core-blue-500: light-dark(var(--raw-color-core-blue-500), var(--raw-color-core-blue-500-dark));
+  --color-core-blue-600: light-dark(var(--raw-color-core-blue-600), var(--raw-color-core-blue-600-dark));
+  --color-core-blue-700: light-dark(var(--raw-color-core-blue-700), var(--raw-color-core-blue-700-dark));
+  --color-core-blue-800: light-dark(var(--raw-color-core-blue-800), var(--raw-color-core-blue-800-dark));
+  --color-core-blue-900: light-dark(var(--raw-color-core-blue-900), var(--raw-color-core-blue-900-dark));
+  --color-core-blue-950: light-dark(var(--raw-color-core-blue-950), var(--raw-color-core-blue-950-dark));
+
+  /* Core Green */
+  --color-core-green-50: light-dark(var(--raw-color-core-green-50), var(--raw-color-core-green-50-dark));
+  --color-core-green-100: light-dark(var(--raw-color-core-green-100), var(--raw-color-core-green-100-dark));
+  --color-core-green-200: light-dark(var(--raw-color-core-green-200), var(--raw-color-core-green-200-dark));
+  --color-core-green-300: light-dark(var(--raw-color-core-green-300), var(--raw-color-core-green-300-dark));
+  --color-core-green-400: light-dark(var(--raw-color-core-green-400), var(--raw-color-core-green-400-dark));
+  --color-core-green-500: light-dark(var(--raw-color-core-green-500), var(--raw-color-core-green-500-dark));
+  --color-core-green-600: light-dark(var(--raw-color-core-green-600), var(--raw-color-core-green-600-dark));
+  --color-core-green-700: light-dark(var(--raw-color-core-green-700), var(--raw-color-core-green-700-dark));
+  --color-core-green-800: light-dark(var(--raw-color-core-green-800), var(--raw-color-core-green-800-dark));
+  --color-core-green-900: light-dark(var(--raw-color-core-green-900), var(--raw-color-core-green-900-dark));
+  --color-core-green-950: light-dark(var(--raw-color-core-green-950), var(--raw-color-core-green-950-dark));
+
+  /* Core Red */
+  --color-core-red-50: light-dark(var(--raw-color-core-red-50), var(--raw-color-core-red-50-dark));
+  --color-core-red-100: light-dark(var(--raw-color-core-red-100), var(--raw-color-core-red-100-dark));
+  --color-core-red-200: light-dark(var(--raw-color-core-red-200), var(--raw-color-core-red-200-dark));
+  --color-core-red-300: light-dark(var(--raw-color-core-red-300), var(--raw-color-core-red-300-dark));
+  --color-core-red-400: light-dark(var(--raw-color-core-red-400), var(--raw-color-core-red-400-dark));
+  --color-core-red-500: light-dark(var(--raw-color-core-red-500), var(--raw-color-core-red-500-dark));
+  --color-core-red-600: light-dark(var(--raw-color-core-red-600), var(--raw-color-core-red-600-dark));
+  --color-core-red-700: light-dark(var(--raw-color-core-red-700), var(--raw-color-core-red-700-dark));
+  --color-core-red-800: light-dark(var(--raw-color-core-red-800), var(--raw-color-core-red-800-dark));
+  --color-core-red-900: light-dark(var(--raw-color-core-red-900), var(--raw-color-core-red-900-dark));
+  --color-core-red-950: light-dark(var(--raw-color-core-red-950), var(--raw-color-core-red-950-dark));
+
+  /* Core Orange */
+  --color-core-orange-50: light-dark(var(--raw-color-core-orange-50), var(--raw-color-core-orange-50-dark));
+  --color-core-orange-100: light-dark(var(--raw-color-core-orange-100), var(--raw-color-core-orange-100-dark));
+  --color-core-orange-200: light-dark(var(--raw-color-core-orange-200), var(--raw-color-core-orange-200-dark));
+  --color-core-orange-300: light-dark(var(--raw-color-core-orange-300), var(--raw-color-core-orange-300-dark));
+  --color-core-orange-400: light-dark(var(--raw-color-core-orange-400), var(--raw-color-core-orange-400-dark));
+  --color-core-orange-500: light-dark(var(--raw-color-core-orange-500), var(--raw-color-core-orange-500-dark));
+  --color-core-orange-600: light-dark(var(--raw-color-core-orange-600), var(--raw-color-core-orange-600-dark));
+  --color-core-orange-700: light-dark(var(--raw-color-core-orange-700), var(--raw-color-core-orange-700-dark));
+  --color-core-orange-800: light-dark(var(--raw-color-core-orange-800), var(--raw-color-core-orange-800-dark));
+  --color-core-orange-900: light-dark(var(--raw-color-core-orange-900), var(--raw-color-core-orange-900-dark));
+  --color-core-orange-950: light-dark(var(--raw-color-core-orange-950), var(--raw-color-core-orange-950-dark));
+  
+}
+
+body {
+  @apply text-text-default bg-background-page;
+}
+
+.dark,
+.light,
+.inverted {
+  @apply text-text-default;
+}
+
+.dark {
+  color-scheme: dark;
+}
+.light,
+html:not(.dark) {
+  color-scheme: light;
+}

package/styles/combobox.css

@@ -0,0 +1,66 @@
+/*----------------------------*/
+/* COMBOBOX */
+/*----------------------------*/
+
+@utility combobox {
+  @apply relative;
+
+  > :where(:first-child, .combobox-trigger) {
+    @apply input-control input-chevron w-full text-left;
+  }
+
+  > :where(:nth-child(2), .combobox-panel) {
+    @apply mt-1 rounded-xl border bg-background-surface border-line-default shadow-elevation-low;
+
+    > :where(:first-child, .combobox-search) {
+      @apply p-1;
+    }
+
+    > :where(:last-child, .combobox-options) {
+      @apply p-1.5 max-h-64 overflow-y-auto menu menu-sm;
+
+      > li > :where(button, a, .combobox-option) {
+        @apply block px-2 py-1.5 rounded-lg text-sm text-left include-interactive include-hover-primary text-text-default;
+      }
+
+      > li.is-selected > :where(button, a, .combobox-option),
+      > li > :where(button, a, .combobox-option).is-selected {
+        @apply include-hover-primary-active text-text-brand;
+      }
+
+      > li.is-highlighted > :where(button, a, .combobox-option),
+      > li > :where(button, a, .combobox-option).is-highlighted {
+        @apply bg-background-surface-elevated;
+      }
+    }
+  }
+}
+
+/* Compatibility aliases */
+@utility combobox-trigger {
+  @apply input-control input-chevron;
+}
+
+@utility combobox-panel {
+  @apply mt-1 rounded-xl border bg-background-surface border-line-default shadow-elevation-low;
+}
+
+@utility combobox-search {
+  @apply p-1;
+}
+
+@utility combobox-options {
+  @apply p-1.5 max-h-64 overflow-y-auto menu menu-sm;
+}
+
+@utility combobox-option {
+  @apply block px-2 py-1.5 rounded-lg text-sm text-left include-interactive include-hover-primary text-text-default;
+}
+
+.combobox-option.is-selected {
+  @apply include-hover-primary-active text-text-brand;
+}
+
+.combobox-option.is-highlighted {
+  @apply bg-background-surface-elevated;
+}