@hyunsdev/ui 0.1.0

package/dist/styles/tokens.css

@@ -0,0 +1,693 @@
+@custom-variant dark (&:is(.dark *));
+
+/* Base variables */
+:root {
+  --radius: 0.625rem;
+}
+
+/* Light theme */
+:root {
+  --mono-rgb-0: 255 255 255;
+  --mono-rgb-100: 0 0 0;
+
+  --accent-default-l: 0.205;
+  --accent-default-c: 0;
+  --accent-default-h: 0;
+  --accent-default-oklch: var(--accent-default-l) var(--accent-default-c) var(--accent-default-h);
+  --accent-default: oklch(var(--accent-default-oklch));
+
+  --accent-blue-l: 0.624;
+  --accent-blue-c: 0.2529;
+  --accent-blue-h: 253.376;
+  --accent-blue-oklch: var(--accent-blue-l) var(--accent-blue-c) var(--accent-blue-h);
+  --accent-blue: oklch(var(--accent-blue-oklch));
+
+  --accent-green-l: 0.627;
+  --accent-green-c: 0.254;
+  --accent-green-h: 150.069;
+  --accent-green-oklch: var(--accent-green-l) var(--accent-green-c) var(--accent-green-h);
+  --accent-green: oklch(var(--accent-green-oklch));
+
+  --accent-yellow-l: 0.8079;
+  --accent-yellow-c: 0.173;
+  --accent-yellow-h: 86;
+  --accent-yellow-oklch: var(--accent-yellow-l) var(--accent-yellow-c) var(--accent-yellow-h);
+  --accent-yellow: oklch(var(--accent-yellow-oklch));
+
+  --accent-pink-l: 0.625;
+  --accent-pink-c: 0.253;
+  --accent-pink-h: 3.958;
+  --accent-pink-oklch: var(--accent-pink-l) var(--accent-pink-c) var(--accent-pink-h);
+  --accent-pink: oklch(var(--accent-pink-oklch));
+
+  --accent-orange-l: 0.693;
+  --accent-orange-c: 0.183;
+  --accent-orange-h: 56.934;
+  --accent-orange-oklch: var(--accent-orange-l) var(--accent-orange-c) var(--accent-orange-h);
+  --accent-orange: oklch(var(--accent-orange-oklch));
+
+  --accent-purple-l: 0.496;
+  --accent-purple-c: 0.265;
+  --accent-purple-h: 301.924;
+  --accent-purple-oklch: var(--accent-purple-l) var(--accent-purple-c) var(--accent-purple-h);
+  --accent-purple: oklch(var(--accent-purple-oklch));
+
+  --accent-l: var(--accent-default-l);
+  --accent-c: var(--accent-default-c);
+  --accent-h: var(--accent-default-h);
+  --accent-oklch: var(--accent-l) var(--accent-c) var(--accent-h);
+  --accent: oklch(var(--accent-oklch));
+  --accent-1: oklch(calc(var(--accent-l) + 0.03) calc(var(--accent-c) + 0.005) var(--accent-h));
+  --accent-2: oklch(calc(var(--accent-l) + 0.06) calc(var(--accent-c) + 0.005) var(--accent-h));
+  --accent-3: oklch(calc(var(--accent-l) + 0.09) calc(var(--accent-c) + 0.005) var(--accent-h));
+
+  --accent-text-l: var(--accent-blue-l);
+  --accent-text-c: var(--accent-blue-c);
+  --accent-text-h: var(--accent-blue-h);
+  --accent-text-oklch: var(--accent-text-l) var(--accent-text-c) var(--accent-text-h);
+  --accent-text: oklch(var(--accent-text-oklch));
+  --accent-text-1: oklch(
+    calc(var(--accent-text-l) + 0.03) calc(var(--accent-text-c) + 0.005) var(--accent-text-h)
+  );
+  --accent-text-2: oklch(
+    calc(var(--accent-text-l) + 0.06) calc(var(--accent-text-c) + 0.005) var(--accent-text-h)
+  );
+  --accent-text-3: oklch(
+    calc(var(--accent-text-l) + 0.09) calc(var(--accent-text-c) + 0.005) var(--accent-text-h)
+  );
+
+  --background-primary: oklch(1 0 0);
+  --background-primary-alt: oklch(0.97 0 0);
+  --background-secondary: oklch(0.98 0 0);
+  --background-secondary-alt: oklch(0.95 0 0);
+
+  --background-canvas: var(--background-primary);
+  --background-canvas-alt: var(--background-primary-alt);
+  --background-section: var(--background-secondary);
+  --background-section-alt: var(--background-secondary-alt);
+
+  --background-modifier-hover: rgb(var(--mono-rgb-100) / 0.067);
+  --background-modifier-active-hover: rgb(var(--mono-rgb-100) / 0.1);
+  --background-modifier-message: rgba(0, 0, 0, 0.9);
+
+  --background-field: oklch(1 0 0);
+  --background-field-disabled: oklch(0.97 0 0);
+
+  /* Derive semantic backgrounds from text hues so the families stay aligned. */
+  --background-error: color-mix(in oklab, var(--text-error) 12%, var(--background-primary));
+  --background-error-hover: color-mix(in oklab, var(--text-error) 18%, var(--background-primary));
+  --background-success: color-mix(in oklab, var(--text-success) 12%, var(--background-primary));
+  --background-success-hover: color-mix(
+    in oklab,
+    var(--text-success) 18%,
+    var(--background-primary)
+  );
+  --background-warning: color-mix(in oklab, var(--text-warning) 12%, var(--background-primary));
+  --background-warning-hover: color-mix(
+    in oklab,
+    var(--text-warning) 18%,
+    var(--background-primary)
+  );
+  --background-info: color-mix(in oklab, var(--text-info) 12%, var(--background-primary));
+  --background-info-hover: color-mix(in oklab, var(--text-info) 18%, var(--background-primary));
+
+  --border: oklch(0.922 0 0);
+  --border-hover: oklch(35.756% 0.02908 206.27);
+  --border-focus: oklch(0.922 0.02 200);
+  --border-disabled: oklch(0.95 0 0);
+  --border-error: oklch(0.78 0.15 25);
+  --border-success: oklch(0.8 0.14 145);
+  --border-warning: oklch(0.82 0.12 85);
+  --border-info: oklch(0.8 0.08 240);
+  --focus-ring: oklch(var(--accent-default-oklch) / 0.35);
+
+  --interactive-normal: oklch(1 0 0);
+  --interactive-hover: oklch(0.97 0 0);
+  --interactive-active-hover: oklch(0.95 0 0);
+  --interactive-disabled: oklch(0.96 0 0);
+  --interactive-oklch: 1 0 0;
+
+  --interactive-accent: var(--accent);
+  --interactive-accent-hover: var(--accent-1);
+  --interactive-accent-active: var(--accent-2);
+  --interactive-accent-active-hover: var(--accent-3);
+  --interactive-accent-disabled: oklch(
+    calc(var(--accent-l) + 0.06) calc(var(--accent-c) + 0.005) var(--accent-h) / 0.5
+  );
+  --interactive-accent-oklch: var(--accent-oklch);
+
+  --text-color: oklch(0.145 0 0);
+  --text-muted: oklch(0.6 0 0);
+  --text-faint: oklch(0.7 0 0);
+  --text-disabled: var(--text-muted);
+  --text-on-accent: oklch(1 0 0);
+  --text-on-accent-inverted: oklch(0.145 0 0);
+  --text-success: var(--color-green-500);
+  --text-error: var(--color-red-500);
+  --text-warning: var(--color-amber-600);
+  --text-info: var(--color-blue-600);
+  --text-accent: var(--accent-text);
+  --text-accent-hover: var(--accent-text-2);
+
+  --text-selection: oklch(var(--accent-oklch) / 0.2);
+  --text-highlight-background-rgb: 255, 208, 0;
+  --text-highlight-background: rgb(var(--text-highlight-background-rgb) / 0.4);
+
+  --overlay-scrim: rgb(0 0 0 / 0.42);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --shadow-sm: 0 2px 6px 0 rgb(0 0 0 / 0.08);
+  --shadow-md: 0 10px 24px -8px rgb(0 0 0 / 0.14);
+  --shadow-lg: 0 18px 48px -12px rgb(0 0 0 / 0.18);
+}
+
+/* Dark theme */
+.dark {
+  --mono-rgb-0: 0 0 0;
+  --mono-rgb-100: 255 255 255;
+
+  --accent-default-l: 0.985;
+  --accent-default-c: 0;
+  --accent-default-h: 0;
+  --accent-default-oklch: var(--accent-default-l) var(--accent-default-c) var(--accent-default-h);
+  --accent-default: oklch(var(--accent-default-oklch));
+
+  --accent-blue-l: 0.707;
+  --accent-blue-c: 0.165;
+  --accent-blue-h: 254.624;
+  --accent-blue-oklch: var(--accent-blue-l) var(--accent-blue-c) var(--accent-blue-h);
+  --accent-blue: oklch(var(--accent-blue-oklch));
+
+  --accent-green-l: 0.792;
+  --accent-green-c: 0.209;
+  --accent-green-h: 151.711;
+  --accent-green-oklch: var(--accent-green-l) var(--accent-green-c) var(--accent-green-h);
+  --accent-green: oklch(var(--accent-green-oklch));
+
+  --accent-yellow-l: 0.852;
+  --accent-yellow-c: 0.199;
+  --accent-yellow-h: 91.936;
+  --accent-yellow-oklch: var(--accent-yellow-l) var(--accent-yellow-c) var(--accent-yellow-h);
+  --accent-yellow: oklch(var(--accent-yellow-oklch));
+
+  --accent-pink-l: 0.718;
+  --accent-pink-c: 0.202;
+  --accent-pink-h: 349.761;
+  --accent-pink-oklch: var(--accent-pink-l) var(--accent-pink-c) var(--accent-pink-h);
+  --accent-pink: oklch(var(--accent-pink-oklch));
+
+  --accent-orange-l: 0.75;
+  --accent-orange-c: 0.183;
+  --accent-orange-h: 55.934;
+  --accent-orange-oklch: var(--accent-orange-l) var(--accent-orange-c) var(--accent-orange-h);
+  --accent-orange: oklch(var(--accent-orange-oklch));
+
+  --accent-purple-l: 0.714;
+  --accent-purple-c: 0.203;
+  --accent-purple-h: 305.504;
+  --accent-purple-oklch: var(--accent-purple-l) var(--accent-purple-c) var(--accent-purple-h);
+  --accent-purple: oklch(var(--accent-purple-oklch));
+
+  --accent-l: var(--accent-default-l);
+  --accent-c: var(--accent-default-c);
+  --accent-h: var(--accent-default-h);
+  --accent-oklch: var(--accent-l) var(--accent-c) var(--accent-h);
+  --accent: oklch(var(--accent-oklch));
+  --accent-1: oklch(calc(var(--accent-l) - 0.03) calc(var(--accent-c) + 0.005) var(--accent-h));
+  --accent-2: oklch(calc(var(--accent-l) - 0.06) calc(var(--accent-c) + 0.005) var(--accent-h));
+  --accent-3: oklch(calc(var(--accent-l) - 0.09) calc(var(--accent-c) + 0.005) var(--accent-h));
+
+  --accent-text-l: var(--accent-blue-l);
+  --accent-text-c: var(--accent-blue-c);
+  --accent-text-h: var(--accent-blue-h);
+  --accent-text-oklch: var(--accent-text-l) var(--accent-text-c) var(--accent-text-h);
+  --accent-text: oklch(var(--accent-text-oklch));
+  --accent-text-1: oklch(
+    calc(var(--accent-text-l) - 0.03) calc(var(--accent-text-c) + 0.005) var(--accent-text-h)
+  );
+  --accent-text-2: oklch(
+    calc(var(--accent-text-l) - 0.06) calc(var(--accent-text-c) + 0.005) var(--accent-text-h)
+  );
+  --accent-text-3: oklch(
+    calc(var(--accent-text-l) - 0.09) calc(var(--accent-text-c) + 0.005) var(--accent-text-h)
+  );
+
+  --background-primary: oklch(0.24 0 0);
+  --background-primary-alt: oklch(0.27 0 0);
+  --background-secondary: oklch(0.21 0 0);
+  --background-secondary-alt: oklch(0.24 0 0);
+
+  --background-canvas: var(--background-secondary);
+  --background-canvas-alt: var(--background-secondary-alt);
+  --background-section: var(--background-primary);
+  --background-section-alt: var(--background-primary-alt);
+
+  --background-modifier-hover: rgb(var(--mono-rgb-100) / 0.067);
+  --background-modifier-active-hover: rgb(var(--mono-rgb-100) / 0.1);
+  --background-modifier-message: rgba(0, 0, 0, 0.9);
+
+  --background-field: oklch(0.27 0 0);
+  --background-field-disabled: oklch(0.3 0 0);
+
+  --background-error: color-mix(in oklab, var(--text-error) 20%, var(--background-primary));
+  --background-error-hover: color-mix(in oklab, var(--text-error) 28%, var(--background-primary));
+  --background-success: color-mix(in oklab, var(--text-success) 20%, var(--background-primary));
+  --background-success-hover: color-mix(
+    in oklab,
+    var(--text-success) 28%,
+    var(--background-primary)
+  );
+  --background-warning: color-mix(in oklab, var(--text-warning) 20%, var(--background-primary));
+  --background-warning-hover: color-mix(
+    in oklab,
+    var(--text-warning) 28%,
+    var(--background-primary)
+  );
+  --background-info: color-mix(in oklab, var(--text-info) 20%, var(--background-primary));
+  --background-info-hover: color-mix(in oklab, var(--text-info) 28%, var(--background-primary));
+
+  --border: oklch(0.32 0 0);
+  --border-hover: oklch(0.32 0.01 200);
+  --border-focus: oklch(0.32 0.02 200);
+  --border-disabled: oklch(0.28 0 0);
+  --border-error: oklch(0.52 0.1 25);
+  --border-success: oklch(0.54 0.09 145);
+  --border-warning: oklch(0.56 0.08 85);
+  --border-info: oklch(0.54 0.07 240);
+  --focus-ring: oklch(var(--accent-default-oklch) / 0.28);
+
+  --interactive-normal: oklch(0.27 0 0);
+  --interactive-hover: oklch(0.3 0 0);
+  --interactive-active-hover: oklch(0.32 0 0);
+  --interactive-disabled: oklch(0.25 0 0);
+  --interactive-oklch: 0.27 0 0;
+
+  --interactive-accent: var(--accent);
+  --interactive-accent-hover: var(--accent-1);
+  --interactive-accent-active: var(--accent-2);
+  --interactive-accent-active-hover: var(--accent-3);
+  --interactive-accent-disabled: oklch(
+    calc(var(--accent-l) - 0.06) calc(var(--accent-c) + 0.005) var(--accent-h) / 0.5
+  );
+  --interactive-accent-oklch: var(--accent-oklch);
+
+  --text-color: oklch(0.95 0 0);
+  --text-muted: oklch(0.7 0 0);
+  --text-faint: oklch(0.55 0 0);
+  --text-disabled: var(--text-muted);
+  --text-on-accent: oklch(0.1 0 0);
+  --text-on-accent-inverted: oklch(0.9 0 0);
+  --text-success: var(--color-green-500);
+  --text-error: var(--color-red-500);
+  --text-warning: var(--color-amber-400);
+  --text-info: var(--color-blue-400);
+  --text-text-accent: var(--accent-text);
+  --text-text-accent-hover: var(--accent-text-2);
+
+  --text-selection: oklch(var(--accent-oklch) / 0.2);
+  --text-highlight-background-rgb: 255, 208, 0;
+  --text-highlight-background: rgba(var(--text-highlight-background-rgb), 0.4);
+
+  --overlay-scrim: rgb(0 0 0 / 0.64);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2);
+  --shadow-sm: 0 4px 10px -2px rgb(0 0 0 / 0.28);
+  --shadow-md: 0 12px 28px -8px rgb(0 0 0 / 0.4);
+  --shadow-lg: 0 24px 60px -16px rgb(0 0 0 / 0.48);
+}
+
+:root {
+  --chart-1: oklch(0.82 calc(var(--accent-c) * 1) calc(var(--accent-h) + 0));
+  --chart-2: oklch(0.72 calc(var(--accent-c) * 0.9) calc(var(--accent-h) + 12));
+  --chart-3: oklch(0.62 calc(var(--accent-c) * 0.8) calc(var(--accent-h) - 12));
+  --chart-4: oklch(0.52 calc(var(--accent-c) * 0.7) calc(var(--accent-h) + 24));
+  --chart-5: oklch(0.42 calc(var(--accent-c) * 0.6) calc(var(--accent-h) - 24));
+
+  --font-sans: "Inter Variable", sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+
+  /* Layer */
+  --layer-base: 0;
+  --layer-cover: 5;
+  --layer-sidebar: 10;
+  --layer-popover: 30;
+  --layer-dialog: 50;
+  --layer-toast: 60;
+  --layer-menu: 65;
+  --layer-dragged-item: 80;
+  --layer-tooltip: 90;
+}
+
+:root[data-accent="default"] {
+  --accent-l: var(--accent-default-l);
+  --accent-c: var(--accent-default-c);
+  --accent-h: var(--accent-default-h);
+
+  --accent-text-l: var(--accent-blue-l);
+  --accent-text-c: var(--accent-blue-c);
+  --accent-text-h: var(--accent-blue-h);
+}
+
+:root[data-accent="blue"] {
+  --accent-l: var(--accent-blue-l);
+  --accent-c: var(--accent-blue-c);
+  --accent-h: var(--accent-blue-h);
+
+  --accent-text-l: var(--accent-blue-l);
+  --accent-text-c: var(--accent-blue-c);
+  --accent-text-h: var(--accent-blue-h);
+}
+
+:root[data-accent="green"] {
+  --accent-l: var(--accent-green-l);
+  --accent-c: var(--accent-green-c);
+  --accent-h: var(--accent-green-h);
+
+  --accent-text-l: var(--accent-green-l);
+  --accent-text-c: var(--accent-green-c);
+  --accent-text-h: var(--accent-green-h);
+}
+
+:root[data-accent="yellow"] {
+  --accent-l: var(--accent-yellow-l);
+  --accent-c: var(--accent-yellow-c);
+  --accent-h: var(--accent-yellow-h);
+
+  --accent-text-l: var(--accent-yellow-l);
+  --accent-text-c: var(--accent-yellow-c);
+  --accent-text-h: var(--accent-yellow-h);
+}
+
+:root[data-accent="pink"] {
+  --accent-l: var(--accent-pink-l);
+  --accent-c: var(--accent-pink-c);
+  --accent-h: var(--accent-pink-h);
+
+  --accent-text-l: var(--accent-pink-l);
+  --accent-text-c: var(--accent-pink-c);
+  --accent-text-h: var(--accent-pink-h);
+}
+
+:root[data-accent="orange"] {
+  --accent-l: var(--accent-orange-l);
+  --accent-c: var(--accent-orange-c);
+  --accent-h: var(--accent-orange-h);
+
+  --accent-text-l: var(--accent-orange-l);
+  --accent-text-c: var(--accent-orange-c);
+  --accent-text-h: var(--accent-orange-h);
+}
+
+:root[data-accent="purple"] {
+  --accent-l: var(--accent-purple-l);
+  --accent-c: var(--accent-purple-c);
+  --accent-h: var(--accent-purple-h);
+
+  --accent-text-l: var(--accent-purple-l);
+  --accent-text-c: var(--accent-purple-c);
+  --accent-text-h: var(--accent-purple-h);
+}
+
+@theme inline {
+  --color-accent: var(--accent);
+
+  --color-gray: var(--color-zinc-500);
+  --color-gray-background: var(--color-zinc-600);
+  --color-gray-border: var(--color-zinc-50);
+
+  --color-brown: var(--color-stone-500);
+  --color-brown-background: var(--color-stone-600);
+  --color-brown-border: var(--color-stone-50);
+
+  --color-orange: var(--color-amber-500);
+  --color-orange-background: var(--color-amber-600);
+  --color-orange-border: var(--color-amber-50);
+
+  --color-yellow: var(--color-yellow-500);
+  --color-yellow-background: var(--color-yellow-600);
+  --color-yellow-border: var(--color-yellow-50);
+
+  --color-green: var(--color-green-500);
+  --color-green-background: var(--color-green-600);
+  --color-green-border: var(--color-green-50);
+
+  --color-blue: var(--color-blue-500);
+  --color-blue-background: var(--color-blue-600);
+  --color-blue-border: var(--color-blue-50);
+
+  --color-purple: var(--color-purple-500);
+  --color-purple-background: var(--color-purple-600);
+  --color-purple-border: var(--color-purple-50);
+
+  --color-pink: var(--color-pink-500);
+  --color-pink-background: var(--color-pink-600);
+  --color-pink-border: var(--color-pink-50);
+
+  --color-red: var(--color-red-500);
+  --color-red-background: var(--color-red-600);
+  --color-red-border: var(--color-red-50);
+
+  /* Surface colors */
+  /*
+    background primary/secondary: 기본적으로 사용하는 배경 시스템으로, primary는 secondary보다 밝습니다.
+    background canvas/surface: 일부 Landing 페이지 등에 제한적으로 사용하는 배경 토큰으로, 
+        canvas는 surface보다 시각적으로 덜 강조됩니다. light/dark 테마에서 primary와 secondary가 서로 바뀝니다.
+  */
+  --color-background-primary: var(--background-primary);
+  --color-background-primary-alt: var(--background-primary-alt);
+  --color-background-secondary: var(--background-secondary);
+  --color-background-secondary-alt: var(--background-secondary-alt);
+
+  --color-background-canvas: var(--background-canvas);
+  --color-background-canvas-alt: var(--background-canvas-alt);
+  --color-background-section: var(--background-section);
+  --color-background-section-alt: var(--background-section-alt);
+
+  --color-background-modifier-hover: var(--background-modifier-hover);
+  --color-background-modifier-active-hover: var(--background-modifier-active-hover);
+  --color-background-modifier-message: var(--background-modifier-message);
+
+  --color-background-field: var(--background-field);
+  --color-background-field-disabled: var(--background-field-disabled);
+
+  --color-background-error: var(--background-error);
+  --color-background-error-hover: var(--background-error-hover);
+  --color-background-success: var(--background-success);
+  --color-background-success-hover: var(--background-success-hover);
+  --color-background-warning: var(--background-warning);
+  --color-background-warning-hover: var(--background-warning-hover);
+  --color-background-info: var(--background-info);
+  --color-background-info-hover: var(--background-info-hover);
+
+  --color-border: var(--border);
+  --color-border-hover: var(--border-hover);
+  --color-border-focus: var(--border-focus);
+  --color-border-disabled: var(--border-disabled);
+  --color-border-error: var(--border-error);
+  --color-border-success: var(--border-success);
+  --color-border-warning: var(--border-warning);
+  --color-border-info: var(--border-info);
+  --color-focus-ring: var(--focus-ring);
+
+  /* Interactive colors */
+  --color-interactive-normal: var(--interactive-normal);
+  --color-interactive-hover: var(--interactive-hover);
+  --color-interactive-active-hover: var(--interactive-active-hover);
+  --color-interactive-disabled: var(--interactive-disabled);
+
+  --color-interactive-accent: var(--interactive-accent);
+  --color-interactive-accent-hover: var(--interactive-accent-hover);
+  --color-interactive-accent-active-hover: var(--interactive-accent-active-hover);
+  --color-interactive-accent-disabled: var(--interactive-accent-disabled);
+
+  /* Text colors */
+  --color-text-normal: var(--text-color);
+  --color-text-muted: var(--text-muted);
+  --color-text-faint: var(--text-faint);
+  --color-text-disabled: var(--text-disabled);
+  --color-text-on-accent: var(--text-on-accent);
+  --color-text-on-accent-inverted: var(--text-on-accent-inverted);
+  --color-text-success: var(--text-success);
+  --color-text-error: var(--text-error);
+  --color-text-warning: var(--text-warning);
+  --color-text-info: var(--text-info);
+  --color-text-accent: var(--text-accent);
+  --color-text-accent-hover: var(--text-accent-hover);
+
+  --color-text-selection: var(--text-selection);
+  --color-text-highlight-background: var(--text-highlight-background);
+
+  /* Fonts */
+  --font-interface: var(--font-sans); /* UI 요소에 사용되는 인터페이스 폰트 */
+  --font-text: var(--font-sans); /* 에디터에 사용되는 폰트 */
+  --font-monospace: var(--font-mono); /* Monospace 폰트 */
+
+  /* Font Size */
+  --text-normal: 16px;
+  --text-smallest: 0.8em;
+  --text-smaller: 0.875em;
+  --text-small: 0.933em;
+  --text-ui-smaller: 12px;
+  --text-ui-small: 13px;
+  --text-ui-medium: 15px;
+  --text-ui-large: 20px;
+
+  /* Font Weight */
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  /* Text formatting */
+  --font-weight-default: var(--font-weight-normal);
+  --bold-modifier: 200;
+  --font-weight-bold-weight: calc(var(--font-weight-default) + var(--bold-modifier));
+  --color-text-bold: var(--color-text-normal);
+  --color-text-italic: var(--color-text-normal);
+
+  /* Line height */
+  --leading-normal: 1.5;
+  --leading-tight: 1.3;
+
+  /* Border radius */
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  /* Chart colors */
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+}
+
+/* Component-specific variables */
+@theme inline {
+  /* Card - card */
+  --color-card-background: var(--color-background-primary);
+  --color-card-text: var(--color-text-normal);
+  --color-card-border: var(--color-border);
+  --color-card-footer-background: var(--color-background-secondary);
+  --shadow-card: var(--shadow-sm);
+  --radius-card: var(--radius-lg);
+
+  /* Floating Surface - Popover, DropdownMenu, SelectContent, Sonner */
+  --color-floating-background: var(--color-background-primary);
+  --color-floating-text: var(--color-text-normal);
+  --color-floating-border: var(--color-border);
+  --shadow-floating: var(--shadow-sm);
+  --radius-floating: var(--radius-md);
+
+  /* Dialog - Dialog, AlertDialog, Command, HoverCard, Drawer, Sheet */
+  --color-dialog-background: var(--color-background-primary);
+  --color-dialog-text: var(--color-text-normal);
+  --color-dialog-border: var(--color-border);
+  --color-dialog-footer-background: var(--color-background-secondary);
+  --shadow-dialog: var(--shadow-lg);
+  --radius-dialog: var(--radius-lg);
+
+  /* Field - Input, Textarea, InputGroup, etc. */
+  --color-field-background: var(--color-background-field);
+  --color-field-background-disabled: var(--color-background-field-disabled);
+  --color-field-border: var(--color-border);
+  --color-field-border-hover: var(--color-border-hover);
+  --color-field-border-focus: var(--color-border-focus);
+  --color-field-border-info: var(--color-border-info);
+  --color-field-border-success: var(--color-border-success);
+  --color-field-border-warning: var(--color-border-warning);
+  --color-field-border-error: var(--color-border-error);
+  --color-field-border-disabled: var(--color-border-disabled);
+  --color-field-text: var(--color-text-normal);
+  --color-field-placeholder: var(--color-text-faint);
+  --color-field-label: var(--color-text-muted);
+  --color-field-description: var(--color-text-muted);
+  --color-field-success: var(--color-text-success);
+  --color-field-warning: var(--color-text-warning);
+  --color-field-error: var(--color-text-error);
+  --radius-field: var(--radius-md);
+  --spacing-field-h: 32px;
+  --spacing-field-px: 10px;
+
+  /* Button - Button, Toggle, etc. */
+  --button-corner-shape: round;
+  --text-button: var(--text-ui-medium);
+  --spacing-button-xs: 24px;
+  --spacing-button-sm: 28px;
+  --spacing-button-md: 32px;
+  --spacing-button-lg: 36px;
+
+  /* Tooltip - Tooltip */
+  --color-tooltip-background: var(--color-background-modifier-message);
+  --color-tooltip-text: rgba(255, 255, 255, 0.9);
+  --radius-tooltip: var(--radius-md);
+  --text-tooltip: var(--text-ui-small);
+}
+
+/* Layout-specific variables */
+@theme inline {
+  /* Sidedock - WorkbenchSidebar, WindowSidebar */
+  --color-sidedock-background: var(--color-background-secondary);
+  --color-sidedock-background-alt: var(--color-background-secondary-alt);
+  --color-sidedock-border: var(--color-border);
+  --color-sidedock-text: var(--color-text-muted);
+  --color-sidedock-text-hover: var(--color-text-normal);
+  --color-sidedock-text-active: var(--color-text-normal);
+  --color-sidedock-hover-background: var(--color-sidedock-background-alt);
+  --color-sidedock-active-background: var(--color-sidedock-background-alt);
+
+  --color-sidedock-label: var(--color-text-muted);
+  --color-sidedock-label-hover: var(--color-text-normal);
+  --color-sidedock-label-active: var(--color-text-normal);
+
+  /* Workbench Layout */
+  --color-workbench-background: var(--color-background-secondary);
+  --color-workbench-text: var(--color-text-muted);
+
+  /* Panel Layout */
+  --color-panel-background: var(--color-background-primary);
+  --color-panel-border: var(--color-border);
+  --shadow-panel: var(--shadow-sm);
+  --radius-panel: var(--radius-lg);
+
+  /* Window Layout */
+  --color-window-background: var(--color-dialog-background);
+  --color-window-border: var(--color-dialog-border);
+  --color-window-text: var(--color-dialog-text);
+  --color-window-scrim: var(--overlay-scrim);
+  --shadow-window: var(--shadow-lg);
+  --radius-window: var(--radius-lg);
+
+  /* Chat Layout */
+  --color-chat-description: var(--color-text-muted);
+
+  --color-chat-user-background: var(--color-background-modifier-message);
+  --color-chat-user-text: var(--color-text-normal);
+  --color-chat-user-border: var(--color-border);
+
+  --color-chat-assistant-background: inherit;
+  --color-chat-assistant-text: var(--color-text-normal);
+  --color-chat-assistant-border: var(--color-border);
+
+  --color-chat-incoming-background: var(--color-background-secondary);
+  --color-chat-incoming-text: var(--color-text-normal);
+  --color-chat-incoming-border: var(--color-border);
+
+  --color-chat-system-background: var(--color-background-primary);
+  --color-chat-system-text: var(--color-text-muted);
+  --color-chat-system-border: var(--color-border);
+
+  /* Center Layout */
+  --color-center-background: var(--color-background-secondary);
+}
+
+
+
+