@okja/chi-tokens 0.3.10 → 0.4.1

package/dist/colors/blue.css

@@ -0,0 +1,180 @@
+/**
+ * Chi Design System - Blue Color Scale
+ * Rebate Arc v1 - Corporate Blue
+ * Classic healthcare/corporate blue color scheme
+ */
+
+:root {
+  /* Primary Colors - Corporate Blue (#0066CC / IBM-style blue) */
+  --chi-color-primary: oklch(52% 0.14 250deg);
+  --chi-color-on-primary: oklch(100% 0 0deg);
+  --chi-color-primary-container: oklch(85% 0.08 250deg);
+  --chi-color-on-primary-container: oklch(20% 0.14 250deg);
+
+  /* Secondary Colors - Steel Blue/Gray */
+  --chi-color-secondary: oklch(50% 0.05 245deg);
+  --chi-color-on-secondary: oklch(100% 0 0deg);
+  --chi-color-secondary-container: oklch(88% 0.03 245deg);
+  --chi-color-on-secondary-container: oklch(20% 0.05 245deg);
+
+  /* Tertiary Colors - Teal/Cyan accent */
+  --chi-color-tertiary: oklch(58% 0.12 195deg);
+  --chi-color-on-tertiary: oklch(100% 0 0deg);
+  --chi-color-tertiary-container: oklch(88% 0.06 195deg);
+  --chi-color-on-tertiary-container: oklch(22% 0.12 195deg);
+
+  /* Error Colors - Red */
+  --chi-color-error: oklch(66.4% 0.195 29deg);
+  --chi-color-on-error: oklch(20% 0.05 29deg);
+  --chi-color-error-container: oklch(92% 0.05 29deg);
+  --chi-color-on-error-container: oklch(20% 0.05 29deg);
+
+  /* Surface & Background Colors - Cooler tone */
+  --chi-color-background: oklch(99% 0.003 245deg);
+  --chi-color-on-background: oklch(12% 0.003 245deg);
+  --chi-color-surface: oklch(99% 0.003 245deg);
+  --chi-color-on-surface: oklch(12% 0.003 245deg);
+  --chi-color-surface-variant: oklch(92% 0.01 245deg);
+  --chi-color-on-surface-variant: oklch(32% 0.02 245deg);
+
+  /* Surface Elevation Levels */
+  --chi-color-surface-0: oklch(100% 0 0deg);
+  --chi-color-surface-1: oklch(98% 0.005 245deg);
+  --chi-color-surface-2: oklch(96% 0.005 245deg);
+  --chi-color-surface-3: oklch(94% 0.005 245deg);
+  --chi-color-surface-4: oklch(92% 0.005 245deg);
+  --chi-color-surface-5: oklch(92% 0.005 245deg);
+
+  /* Container Colors */
+  --chi-color-surface-container: oklch(96% 0.005 245deg);
+  --chi-color-surface-container-low: oklch(98% 0.003 245deg);
+  --chi-color-surface-container-high: oklch(94% 0.005 245deg);
+  --chi-color-surface-container-highest: oklch(92% 0.005 245deg);
+
+  /* Inverse Colors */
+  --chi-color-inverse-surface: oklch(20% 0 0deg);
+  --chi-color-inverse-on-surface: oklch(96% 0.003 245deg);
+  --chi-color-inverse-primary: oklch(80% 0.08 250deg);
+
+  /* Outline Colors */
+  --chi-color-outline: oklch(48% 0.01 245deg);
+  --chi-color-outline-variant: oklch(92% 0.01 245deg);
+  --chi-color-divider: oklch(48% 0.01 245deg);
+
+  /* Scrim and shadow */
+  --chi-color-scrim: oklch(0% 0 0deg);
+  --chi-color-shadow: oklch(0% 0 0deg);
+}
+
+/* Dark mode overrides */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark Primary Colors */
+    --chi-color-primary: oklch(75% 0.1 250deg);
+    --chi-color-on-primary: oklch(15% 0.14 250deg);
+    --chi-color-primary-container: oklch(30% 0.14 250deg);
+    --chi-color-on-primary-container: oklch(88% 0.08 250deg);
+
+    /* Dark Secondary Colors */
+    --chi-color-secondary: oklch(68% 0.04 245deg);
+    --chi-color-on-secondary: oklch(12% 0.05 245deg);
+    --chi-color-secondary-container: oklch(28% 0.05 245deg);
+    --chi-color-on-secondary-container: oklch(88% 0.03 245deg);
+
+    /* Dark Tertiary Colors */
+    --chi-color-tertiary: oklch(72% 0.09 195deg);
+    --chi-color-on-tertiary: oklch(18% 0.12 195deg);
+    --chi-color-tertiary-container: oklch(32% 0.12 195deg);
+    --chi-color-on-tertiary-container: oklch(90% 0.06 195deg);
+
+    /* Dark Error Colors */
+    --chi-color-error: oklch(68.5% 0.195 29deg);
+    --chi-color-on-error: oklch(20% 0.05 29deg);
+    --chi-color-error-container: oklch(66.4% 0.195 29deg);
+    --chi-color-on-error-container: oklch(92% 0.05 29deg);
+
+    /* Dark Surface & Background */
+    --chi-color-background: oklch(9% 0.003 245deg);
+    --chi-color-on-background: oklch(92% 0.003 245deg);
+    --chi-color-surface: oklch(7% 0.003 245deg);
+    --chi-color-on-surface: oklch(92% 0.003 245deg);
+    --chi-color-surface-variant: oklch(30% 0.02 245deg);
+    --chi-color-on-surface-variant: oklch(82% 0.01 245deg);
+
+    /* Dark Surface Elevation Levels */
+    --chi-color-surface-0: oklch(7% 0.003 245deg);
+    --chi-color-surface-1: oklch(12% 0.003 245deg);
+    --chi-color-surface-2: oklch(15% 0.003 245deg);
+    --chi-color-surface-3: oklch(18% 0.003 245deg);
+    --chi-color-surface-4: oklch(22% 0.003 245deg);
+    --chi-color-surface-5: oklch(22% 0.003 245deg);
+
+    /* Dark Container Colors */
+    --chi-color-surface-container: oklch(15% 0.003 245deg);
+    --chi-color-surface-container-low: oklch(12% 0.003 245deg);
+    --chi-color-surface-container-high: oklch(18% 0.003 245deg);
+    --chi-color-surface-container-highest: oklch(22% 0.003 245deg);
+
+    /* Dark Inverse Colors */
+    --chi-color-inverse-surface: oklch(92% 0.003 245deg);
+    --chi-color-inverse-on-surface: oklch(20% 0.003 245deg);
+    --chi-color-inverse-primary: oklch(52% 0.14 250deg);
+
+    /* Dark Outline Colors */
+    --chi-color-outline: oklch(60% 0.01 245deg);
+    --chi-color-outline-variant: oklch(30% 0.02 245deg);
+    --chi-color-divider: oklch(60% 0.01 245deg);
+  }
+}
+
+/* Explicit dark theme */
+
+[data-theme='dark'] {
+  --chi-color-primary: oklch(75% 0.1 250deg);
+  --chi-color-on-primary: oklch(15% 0.14 250deg);
+  --chi-color-primary-container: oklch(30% 0.14 250deg);
+  --chi-color-on-primary-container: oklch(88% 0.08 250deg);
+
+  --chi-color-secondary: oklch(68% 0.04 245deg);
+  --chi-color-on-secondary: oklch(12% 0.05 245deg);
+  --chi-color-secondary-container: oklch(28% 0.05 245deg);
+  --chi-color-on-secondary-container: oklch(88% 0.03 245deg);
+
+  --chi-color-tertiary: oklch(72% 0.09 195deg);
+  --chi-color-on-tertiary: oklch(18% 0.12 195deg);
+  --chi-color-tertiary-container: oklch(32% 0.12 195deg);
+  --chi-color-on-tertiary-container: oklch(90% 0.06 195deg);
+
+  --chi-color-error: oklch(68.5% 0.195 29deg);
+  --chi-color-on-error: oklch(20% 0.05 29deg);
+  --chi-color-error-container: oklch(66.4% 0.195 29deg);
+  --chi-color-on-error-container: oklch(92% 0.05 29deg);
+
+  --chi-color-background: oklch(9% 0.003 245deg);
+  --chi-color-on-background: oklch(92% 0.003 245deg);
+  --chi-color-surface: oklch(7% 0.003 245deg);
+  --chi-color-on-surface: oklch(92% 0.003 245deg);
+  --chi-color-surface-variant: oklch(30% 0.02 245deg);
+  --chi-color-on-surface-variant: oklch(82% 0.01 245deg);
+
+  --chi-color-surface-0: oklch(7% 0.003 245deg);
+  --chi-color-surface-1: oklch(12% 0.003 245deg);
+  --chi-color-surface-2: oklch(15% 0.003 245deg);
+  --chi-color-surface-3: oklch(18% 0.003 245deg);
+  --chi-color-surface-4: oklch(22% 0.003 245deg);
+  --chi-color-surface-5: oklch(22% 0.003 245deg);
+
+  --chi-color-surface-container: oklch(15% 0.003 245deg);
+  --chi-color-surface-container-low: oklch(12% 0.003 245deg);
+  --chi-color-surface-container-high: oklch(18% 0.003 245deg);
+  --chi-color-surface-container-highest: oklch(22% 0.003 245deg);
+
+  --chi-color-inverse-surface: oklch(92% 0.003 245deg);
+  --chi-color-inverse-on-surface: oklch(20% 0.003 245deg);
+  --chi-color-inverse-primary: oklch(52% 0.14 250deg);
+
+  --chi-color-outline: oklch(60% 0.01 245deg);
+  --chi-color-outline-variant: oklch(30% 0.02 245deg);
+  --chi-color-divider: oklch(60% 0.01 245deg);
+}

package/dist/colors/grayscale.css

@@ -0,0 +1,162 @@
+/**
+ * Chi Design System - Grayscale Color Scale
+ * Default theme colors (migrated from theme-light/dark)
+ */
+
+:root {
+  /* Primary colors - grayscale with slight blue tint */
+  --chi-color-primary: oklch(49.4% 0.163 264.05deg);
+  --chi-color-on-primary: oklch(100% 0 0deg);
+  --chi-color-primary-container: oklch(79.7% 0.105 264.05deg);
+  --chi-color-on-primary-container: oklch(20% 0.163 264.05deg);
+
+  /* Secondary colors - grayscale with purple tint */
+  --chi-color-secondary: oklch(61.8% 0.15 314.05deg);
+  --chi-color-on-secondary: oklch(100% 0 0deg);
+  --chi-color-secondary-container: oklch(85.1% 0.08 314.05deg);
+  --chi-color-on-secondary-container: oklch(25.1% 0.15 314.05deg);
+
+  /* Tertiary colors - grayscale with warm tint */
+  --chi-color-tertiary: oklch(70.4% 0.15 29.23deg);
+  --chi-color-on-tertiary: oklch(100% 0 0deg);
+  --chi-color-tertiary-container: oklch(90.2% 0.08 29.23deg);
+  --chi-color-on-tertiary-container: oklch(30.2% 0.15 29.23deg);
+
+  /* Error colors */
+  --chi-color-error: oklch(62.8% 0.258 29.23deg);
+  --chi-color-on-error: oklch(100% 0 0deg);
+  --chi-color-error-container: oklch(90.2% 0.08 29.23deg);
+  --chi-color-on-error-container: oklch(30.2% 0.15 29.23deg);
+
+  /* Surface colors */
+  --chi-color-surface: oklch(99.1% 0.005 264.05deg);
+  --chi-color-on-surface: oklch(20% 0.005 264.05deg);
+  --chi-color-surface-variant: oklch(92.5% 0.02 264.05deg);
+  --chi-color-on-surface-variant: oklch(30% 0.02 264.05deg);
+  --chi-color-surface-container: oklch(96.1% 0.01 264.05deg);
+  --chi-color-surface-container-low: oklch(98.1% 0.005 264.05deg);
+  --chi-color-surface-container-high: oklch(94.1% 0.01 264.05deg);
+  --chi-color-surface-container-highest: oklch(92.1% 0.01 264.05deg);
+
+  /* Surface elevation aliases */
+  --chi-color-surface-0: var(--chi-color-surface);
+  --chi-color-surface-1: oklch(97.1% 0.01 264.05deg);
+  --chi-color-surface-2: var(--chi-color-surface-container-high);
+  --chi-color-surface-3: oklch(92.1% 0.01 264.05deg);
+  --chi-color-surface-4: oklch(91.1% 0.01 264.05deg);
+  --chi-color-surface-5: oklch(90.1% 0.01 264.05deg);
+
+  /* Background */
+  --chi-color-background: var(--chi-color-surface);
+  --chi-color-on-background: var(--chi-color-on-surface);
+
+  /* Outlines */
+  --chi-color-outline: oklch(50% 0.02 264.05deg);
+  --chi-color-outline-variant: oklch(80% 0.02 264.05deg);
+  --chi-color-divider: var(--chi-color-outline-variant);
+
+  /* Inverse colors */
+  --chi-color-inverse-surface: oklch(25% 0.01 264.05deg);
+  --chi-color-inverse-on-surface: oklch(95% 0.005 264.05deg);
+  --chi-color-inverse-primary: oklch(79.7% 0.105 264.05deg);
+
+  /* Scrim and shadow */
+  --chi-color-scrim: oklch(0% 0 0deg);
+  --chi-color-shadow: oklch(0% 0 0deg);
+}
+
+/* Dark mode overrides */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --chi-color-primary: oklch(79.7% 0.105 264.05deg);
+    --chi-color-on-primary: oklch(30% 0.163 264.05deg);
+    --chi-color-primary-container: oklch(35% 0.163 264.05deg);
+    --chi-color-on-primary-container: oklch(90% 0.105 264.05deg);
+
+    --chi-color-secondary: oklch(75.1% 0.08 314.05deg);
+    --chi-color-on-secondary: oklch(35.1% 0.15 314.05deg);
+    --chi-color-secondary-container: oklch(40.1% 0.15 314.05deg);
+    --chi-color-on-secondary-container: oklch(90.1% 0.08 314.05deg);
+
+    --chi-color-tertiary: oklch(80.2% 0.08 29.23deg);
+    --chi-color-on-tertiary: oklch(40.2% 0.15 29.23deg);
+    --chi-color-tertiary-container: oklch(45.2% 0.15 29.23deg);
+    --chi-color-on-tertiary-container: oklch(95.2% 0.08 29.23deg);
+
+    --chi-color-error: oklch(80.2% 0.15 29.23deg);
+    --chi-color-on-error: oklch(40.2% 0.258 29.23deg);
+    --chi-color-error-container: oklch(45.2% 0.258 29.23deg);
+    --chi-color-on-error-container: oklch(95.2% 0.15 29.23deg);
+
+    --chi-color-surface: oklch(15% 0.005 264.05deg);
+    --chi-color-on-surface: oklch(90% 0.005 264.05deg);
+    --chi-color-surface-variant: oklch(25% 0.02 264.05deg);
+    --chi-color-on-surface-variant: oklch(75% 0.02 264.05deg);
+    --chi-color-surface-container: oklch(20% 0.01 264.05deg);
+    --chi-color-surface-container-low: oklch(17% 0.005 264.05deg);
+    --chi-color-surface-container-high: oklch(25% 0.01 264.05deg);
+    --chi-color-surface-container-highest: oklch(30% 0.01 264.05deg);
+
+    --chi-color-surface-0: var(--chi-color-surface);
+    --chi-color-surface-1: oklch(18% 0.01 264.05deg);
+    --chi-color-surface-2: oklch(21% 0.01 264.05deg);
+    --chi-color-surface-3: oklch(24% 0.01 264.05deg);
+    --chi-color-surface-4: oklch(26% 0.01 264.05deg);
+    --chi-color-surface-5: oklch(28% 0.01 264.05deg);
+
+    --chi-color-outline: oklch(60% 0.02 264.05deg);
+    --chi-color-outline-variant: oklch(35% 0.02 264.05deg);
+
+    --chi-color-inverse-surface: oklch(90% 0.005 264.05deg);
+    --chi-color-inverse-on-surface: oklch(25% 0.01 264.05deg);
+    --chi-color-inverse-primary: oklch(49.4% 0.163 264.05deg);
+  }
+}
+
+/* Explicit dark theme */
+
+[data-theme='dark'] {
+  --chi-color-primary: oklch(79.7% 0.105 264.05deg);
+  --chi-color-on-primary: oklch(30% 0.163 264.05deg);
+  --chi-color-primary-container: oklch(35% 0.163 264.05deg);
+  --chi-color-on-primary-container: oklch(90% 0.105 264.05deg);
+
+  --chi-color-secondary: oklch(75.1% 0.08 314.05deg);
+  --chi-color-on-secondary: oklch(35.1% 0.15 314.05deg);
+  --chi-color-secondary-container: oklch(40.1% 0.15 314.05deg);
+  --chi-color-on-secondary-container: oklch(90.1% 0.08 314.05deg);
+
+  --chi-color-tertiary: oklch(80.2% 0.08 29.23deg);
+  --chi-color-on-tertiary: oklch(40.2% 0.15 29.23deg);
+  --chi-color-tertiary-container: oklch(45.2% 0.15 29.23deg);
+  --chi-color-on-tertiary-container: oklch(95.2% 0.08 29.23deg);
+
+  --chi-color-error: oklch(80.2% 0.15 29.23deg);
+  --chi-color-on-error: oklch(40.2% 0.258 29.23deg);
+  --chi-color-error-container: oklch(45.2% 0.258 29.23deg);
+  --chi-color-on-error-container: oklch(95.2% 0.15 29.23deg);
+
+  --chi-color-surface: oklch(15% 0.005 264.05deg);
+  --chi-color-on-surface: oklch(90% 0.005 264.05deg);
+  --chi-color-surface-variant: oklch(25% 0.02 264.05deg);
+  --chi-color-on-surface-variant: oklch(75% 0.02 264.05deg);
+  --chi-color-surface-container: oklch(20% 0.01 264.05deg);
+  --chi-color-surface-container-low: oklch(17% 0.005 264.05deg);
+  --chi-color-surface-container-high: oklch(25% 0.01 264.05deg);
+  --chi-color-surface-container-highest: oklch(30% 0.01 264.05deg);
+
+  --chi-color-surface-0: var(--chi-color-surface);
+  --chi-color-surface-1: oklch(18% 0.01 264.05deg);
+  --chi-color-surface-2: oklch(21% 0.01 264.05deg);
+  --chi-color-surface-3: oklch(24% 0.01 264.05deg);
+  --chi-color-surface-4: oklch(26% 0.01 264.05deg);
+  --chi-color-surface-5: oklch(28% 0.01 264.05deg);
+
+  --chi-color-outline: oklch(60% 0.02 264.05deg);
+  --chi-color-outline-variant: oklch(35% 0.02 264.05deg);
+
+  --chi-color-inverse-surface: oklch(90% 0.005 264.05deg);
+  --chi-color-inverse-on-surface: oklch(25% 0.01 264.05deg);
+  --chi-color-inverse-primary: oklch(49.4% 0.163 264.05deg);
+}

package/dist/colors/purple.css

@@ -0,0 +1,180 @@
+/**
+ * Chi Design System - Purple Color Scale
+ * Rebate Arc v2 - Modern Purple
+ * Modern, vibrant purple color scheme
+ */
+
+:root {
+  /* Primary Colors - Purple (#6442d6) */
+  --chi-color-primary: oklch(49.4% 0.163 264deg);
+  --chi-color-on-primary: oklch(100% 0 0deg);
+  --chi-color-primary-container: oklch(79.7% 0.105 264deg);
+  --chi-color-on-primary-container: oklch(20% 0.163 264deg);
+
+  /* Secondary Colors - Blue/Gray (#5d5d74) */
+  --chi-color-secondary: oklch(43.8% 0.029 270deg);
+  --chi-color-on-secondary: oklch(100% 0 0deg);
+  --chi-color-secondary-container: oklch(88.5% 0.029 270deg);
+  --chi-color-on-secondary-container: oklch(15.8% 0.029 270deg);
+
+  /* Tertiary Colors - Pink/Purple */
+  --chi-color-tertiary: oklch(60% 0.12 320deg);
+  --chi-color-on-tertiary: oklch(100% 0 0deg);
+  --chi-color-tertiary-container: oklch(90% 0.08 320deg);
+  --chi-color-on-tertiary-container: oklch(20% 0.12 320deg);
+
+  /* Error Colors - Red (#ff6240) */
+  --chi-color-error: oklch(66.4% 0.195 29deg);
+  --chi-color-on-error: oklch(20% 0.05 29deg);
+  --chi-color-error-container: oklch(92% 0.05 29deg);
+  --chi-color-on-error-container: oklch(20% 0.05 29deg);
+
+  /* Surface & Background Colors */
+  --chi-color-background: oklch(99% 0.005 300deg);
+  --chi-color-on-background: oklch(12.5% 0.005 300deg);
+  --chi-color-surface: oklch(99% 0.005 300deg);
+  --chi-color-on-surface: oklch(12.5% 0.005 300deg);
+  --chi-color-surface-variant: oklch(91.8% 0.015 300deg);
+  --chi-color-on-surface-variant: oklch(33.5% 0.025 270deg);
+
+  /* Surface Elevation Levels */
+  --chi-color-surface-0: oklch(100% 0 0deg);
+  --chi-color-surface-1: oklch(97.5% 0.01 300deg);
+  --chi-color-surface-2: oklch(95.5% 0.01 300deg);
+  --chi-color-surface-3: oklch(93.5% 0.01 300deg);
+  --chi-color-surface-4: oklch(91.5% 0.01 300deg);
+  --chi-color-surface-5: oklch(91.5% 0.01 300deg);
+
+  /* Container Colors */
+  --chi-color-surface-container: oklch(95.5% 0.01 300deg);
+  --chi-color-surface-container-low: oklch(97.5% 0.005 300deg);
+  --chi-color-surface-container-high: oklch(93.5% 0.01 300deg);
+  --chi-color-surface-container-highest: oklch(91.5% 0.01 300deg);
+
+  /* Inverse Colors */
+  --chi-color-inverse-surface: oklch(22% 0 0deg);
+  --chi-color-inverse-on-surface: oklch(96% 0.005 300deg);
+  --chi-color-inverse-primary: oklch(79.7% 0.105 264deg);
+
+  /* Outline Colors */
+  --chi-color-outline: oklch(50% 0.01 300deg);
+  --chi-color-outline-variant: oklch(91.8% 0.015 300deg);
+  --chi-color-divider: oklch(50% 0.01 300deg);
+
+  /* Scrim and shadow */
+  --chi-color-scrim: oklch(0% 0 0deg);
+  --chi-color-shadow: oklch(0% 0 0deg);
+}
+
+/* Dark mode overrides */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark Primary Colors */
+    --chi-color-primary: oklch(79.7% 0.105 264deg);
+    --chi-color-on-primary: oklch(15% 0.163 264deg);
+    --chi-color-primary-container: oklch(44.5% 0.163 264deg);
+    --chi-color-on-primary-container: oklch(91% 0.105 264deg);
+
+    /* Dark Secondary Colors */
+    --chi-color-secondary: oklch(67.5% 0.029 270deg);
+    --chi-color-on-secondary: oklch(12% 0.029 270deg);
+    --chi-color-secondary-container: oklch(32% 0.029 270deg);
+    --chi-color-on-secondary-container: oklch(90% 0.029 270deg);
+
+    /* Dark Tertiary Colors */
+    --chi-color-tertiary: oklch(70% 0.08 320deg);
+    --chi-color-on-tertiary: oklch(25% 0.12 320deg);
+    --chi-color-tertiary-container: oklch(38% 0.08 320deg);
+    --chi-color-on-tertiary-container: oklch(93% 0.08 320deg);
+
+    /* Dark Error Colors */
+    --chi-color-error: oklch(68.5% 0.195 29deg);
+    --chi-color-on-error: oklch(20% 0.05 29deg);
+    --chi-color-error-container: oklch(66.4% 0.195 29deg);
+    --chi-color-on-error-container: oklch(92% 0.05 29deg);
+
+    /* Dark Surface & Background */
+    --chi-color-background: oklch(9.5% 0.005 300deg);
+    --chi-color-on-background: oklch(91.5% 0.005 300deg);
+    --chi-color-surface: oklch(7% 0.005 300deg);
+    --chi-color-on-surface: oklch(91.5% 0.005 300deg);
+    --chi-color-surface-variant: oklch(33.5% 0.025 270deg);
+    --chi-color-on-surface-variant: oklch(82% 0.015 300deg);
+
+    /* Dark Surface Elevation Levels */
+    --chi-color-surface-0: oklch(7% 0.005 300deg);
+    --chi-color-surface-1: oklch(12.5% 0.005 300deg);
+    --chi-color-surface-2: oklch(15% 0.005 300deg);
+    --chi-color-surface-3: oklch(19% 0.005 300deg);
+    --chi-color-surface-4: oklch(24% 0.005 300deg);
+    --chi-color-surface-5: oklch(24% 0.005 300deg);
+
+    /* Dark Container Colors */
+    --chi-color-surface-container: oklch(15% 0.005 300deg);
+    --chi-color-surface-container-low: oklch(12.5% 0.005 300deg);
+    --chi-color-surface-container-high: oklch(19% 0.005 300deg);
+    --chi-color-surface-container-highest: oklch(24% 0.005 300deg);
+
+    /* Dark Inverse Colors */
+    --chi-color-inverse-surface: oklch(91.5% 0.005 300deg);
+    --chi-color-inverse-on-surface: oklch(22.5% 0.005 300deg);
+    --chi-color-inverse-primary: oklch(49.4% 0.163 264deg);
+
+    /* Dark Outline Colors */
+    --chi-color-outline: oklch(61% 0.01 300deg);
+    --chi-color-outline-variant: oklch(33.5% 0.025 270deg);
+    --chi-color-divider: oklch(61% 0.01 300deg);
+  }
+}
+
+/* Explicit dark theme */
+
+[data-theme='dark'] {
+  --chi-color-primary: oklch(79.7% 0.105 264deg);
+  --chi-color-on-primary: oklch(15% 0.163 264deg);
+  --chi-color-primary-container: oklch(44.5% 0.163 264deg);
+  --chi-color-on-primary-container: oklch(91% 0.105 264deg);
+
+  --chi-color-secondary: oklch(67.5% 0.029 270deg);
+  --chi-color-on-secondary: oklch(12% 0.029 270deg);
+  --chi-color-secondary-container: oklch(32% 0.029 270deg);
+  --chi-color-on-secondary-container: oklch(90% 0.029 270deg);
+
+  --chi-color-tertiary: oklch(70% 0.08 320deg);
+  --chi-color-on-tertiary: oklch(25% 0.12 320deg);
+  --chi-color-tertiary-container: oklch(38% 0.08 320deg);
+  --chi-color-on-tertiary-container: oklch(93% 0.08 320deg);
+
+  --chi-color-error: oklch(68.5% 0.195 29deg);
+  --chi-color-on-error: oklch(20% 0.05 29deg);
+  --chi-color-error-container: oklch(66.4% 0.195 29deg);
+  --chi-color-on-error-container: oklch(92% 0.05 29deg);
+
+  --chi-color-background: oklch(9.5% 0.005 300deg);
+  --chi-color-on-background: oklch(91.5% 0.005 300deg);
+  --chi-color-surface: oklch(7% 0.005 300deg);
+  --chi-color-on-surface: oklch(91.5% 0.005 300deg);
+  --chi-color-surface-variant: oklch(33.5% 0.025 270deg);
+  --chi-color-on-surface-variant: oklch(82% 0.015 300deg);
+
+  --chi-color-surface-0: oklch(7% 0.005 300deg);
+  --chi-color-surface-1: oklch(12.5% 0.005 300deg);
+  --chi-color-surface-2: oklch(15% 0.005 300deg);
+  --chi-color-surface-3: oklch(19% 0.005 300deg);
+  --chi-color-surface-4: oklch(24% 0.005 300deg);
+  --chi-color-surface-5: oklch(24% 0.005 300deg);
+
+  --chi-color-surface-container: oklch(15% 0.005 300deg);
+  --chi-color-surface-container-low: oklch(12.5% 0.005 300deg);
+  --chi-color-surface-container-high: oklch(19% 0.005 300deg);
+  --chi-color-surface-container-highest: oklch(24% 0.005 300deg);
+
+  --chi-color-inverse-surface: oklch(91.5% 0.005 300deg);
+  --chi-color-inverse-on-surface: oklch(22.5% 0.005 300deg);
+  --chi-color-inverse-primary: oklch(49.4% 0.163 264deg);
+
+  --chi-color-outline: oklch(61% 0.01 300deg);
+  --chi-color-outline-variant: oklch(33.5% 0.025 270deg);
+  --chi-color-divider: oklch(61% 0.01 300deg);
+}

package/dist/tokens.css

@@ -0,0 +1,327 @@
+/**
+ * Chi Design System - Token Base
+ * Aggregator that imports all token categories
+ * Following Radix Themes pattern
+ */
+
+/**
+ * Chi Design System - Semantic Color Mappings
+ * Maps color scales to semantic names
+ * This will be populated during color system reorganization
+ */
+
+/* Placeholder - will import individual color scales and create semantic mappings */
+
+/**
+ * Chi Design System - Cursor Tokens
+ * Cursor definitions
+ */
+
+.chi-themes {
+  /* Icon sizes - migrated from system-tokens */
+  --chi-icon-size-small: calc(18px * var(--scaling, 1));
+  --chi-icon-size-medium: calc(24px * var(--scaling, 1));
+  --chi-icon-size-large: calc(36px * var(--scaling, 1));
+  --chi-icon-size-xlarge: calc(48px * var(--scaling, 1));
+
+  /* Cursor styles */
+  --cursor-default: default;
+  --cursor-pointer: pointer;
+  --cursor-not-allowed: not-allowed;
+  --cursor-text: text;
+  --cursor-move: move;
+  --cursor-grab: grab;
+  --cursor-grabbing: grabbing;
+}
+
+/**
+ * Chi Design System - Layout Tokens
+ * Layout-related tokens (imports scaling + space)
+ */
+
+/**
+ * Chi Design System - Scaling Tokens
+ * Global scaling factor for responsive sizing (90%-110%)
+ * Following Radix Themes pattern
+ */
+
+:root {
+  /* Default scaling factor - can be overridden with data-scaling attribute */
+  --scaling: 1;
+}
+
+/* Optional scaling variants (can be enabled via data-scaling attribute) */
+
+[data-scaling='90%'] {
+  --scaling: 0.9;
+}
+
+[data-scaling='95%'] {
+  --scaling: 0.95;
+}
+
+[data-scaling='100%'] {
+  --scaling: 1;
+}
+
+[data-scaling='105%'] {
+  --scaling: 1.05;
+}
+
+[data-scaling='110%'] {
+  --scaling: 1.1;
+}
+
+/**
+ * Chi Design System - Spacing Tokens
+ * Spacing scale following Radix Themes pattern
+ * Uses 4px base unit with --scaling support
+ */
+
+.chi-themes {
+  /* Spacing scale (9 steps) - follows 4px/8px base */
+  --space-1: calc(4px * var(--scaling, 1));
+  --space-2: calc(8px * var(--scaling, 1));
+  --space-3: calc(12px * var(--scaling, 1));
+  --space-4: calc(16px * var(--scaling, 1));
+  --space-5: calc(24px * var(--scaling, 1));
+  --space-6: calc(32px * var(--scaling, 1));
+  --space-7: calc(40px * var(--scaling, 1));
+  --space-8: calc(48px * var(--scaling, 1));
+  --space-9: calc(64px * var(--scaling, 1));
+}
+
+.chi-themes {
+  /* Container widths */
+  --container-1: 448px;
+  --container-2: 688px;
+  --container-3: 880px;
+  --container-4: 1136px;
+
+  /* Viewport units */
+  --viewport-width: 100vw;
+  --viewport-height: 100vh;
+}
+
+/**
+ * Chi Design System - Radius Tokens
+ * Border radius tokens with scaling support
+ * Migrated from shape-corner tokens
+ */
+
+:root {
+  /* Radius factor for variants (none/small/medium/large) */
+  --radius-factor: 1;
+}
+
+[data-radius='none'] {
+  --radius-factor: 0;
+}
+
+[data-radius='small'] {
+  --radius-factor: 0.75;
+}
+
+[data-radius='medium'] {
+  --radius-factor: 1;
+}
+
+[data-radius='large'] {
+  --radius-factor: 1.5;
+}
+
+.chi-themes {
+  /* Border radius scale with scaling and radius factor support */
+  --chi-shape-corner-none: 0;
+  --chi-shape-corner-extra-small: calc(4px * var(--scaling, 1) * var(--radius-factor, 1));
+  --chi-shape-corner-small: calc(8px * var(--scaling, 1) * var(--radius-factor, 1));
+  --chi-shape-corner-medium: calc(12px * var(--scaling, 1) * var(--radius-factor, 1));
+  --chi-shape-corner-large: calc(16px * var(--scaling, 1) * var(--radius-factor, 1));
+  --chi-shape-corner-extra-large: calc(28px * var(--scaling, 1) * var(--radius-factor, 1));
+  --chi-shape-corner-full: 9999px;
+
+  /* Radix-style aliases */
+  --radius-1: var(--chi-shape-corner-extra-small);
+  --radius-2: var(--chi-shape-corner-small);
+  --radius-3: var(--chi-shape-corner-medium);
+  --radius-4: var(--chi-shape-corner-large);
+  --radius-5: var(--chi-shape-corner-extra-large);
+  --radius-full: var(--chi-shape-corner-full);
+}
+
+/**
+ * Chi Design System - Shadow Tokens
+ * Elevation/shadow tokens for light and dark themes
+ * Migrated from elevation tokens
+ */
+
+:root {
+  /* Light mode shadows (default) */
+  --chi-elevation-level0: none;
+  --chi-elevation-level1: 0px 1px 2px 0px rgb(0 0 0 / 30%),
+    0px 1px 3px 1px rgb(0 0 0 / 15%);
+  --chi-elevation-level2: 0px 1px 2px 0px rgb(0 0 0 / 30%),
+    0px 2px 6px 2px rgb(0 0 0 / 15%);
+  --chi-elevation-level3: 0px 1px 3px 0px rgb(0 0 0 / 30%),
+    0px 4px 8px 3px rgb(0 0 0 / 15%);
+  --chi-elevation-level4: 0px 2px 3px 0px rgb(0 0 0 / 30%),
+    0px 6px 10px 4px rgb(0 0 0 / 15%);
+  --chi-elevation-level5: 0px 4px 4px 0px rgb(0 0 0 / 30%),
+    0px 8px 12px 6px rgb(0 0 0 / 15%);
+
+  /* Radix-style aliases */
+  --shadow-1: var(--chi-elevation-level1);
+  --shadow-2: var(--chi-elevation-level2);
+  --shadow-3: var(--chi-elevation-level3);
+  --shadow-4: var(--chi-elevation-level4);
+  --shadow-5: var(--chi-elevation-level5);
+}
+
+/* Dark mode shadow adjustments */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Darker shadows with less opacity for dark mode */
+    --chi-elevation-level1: 0px 1px 2px 0px rgb(0 0 0 / 50%),
+      0px 1px 3px 1px rgb(0 0 0 / 25%);
+    --chi-elevation-level2: 0px 1px 2px 0px rgb(0 0 0 / 50%),
+      0px 2px 6px 2px rgb(0 0 0 / 25%);
+    --chi-elevation-level3: 0px 1px 3px 0px rgb(0 0 0 / 50%),
+      0px 4px 8px 3px rgb(0 0 0 / 25%);
+    --chi-elevation-level4: 0px 2px 3px 0px rgb(0 0 0 / 50%),
+      0px 6px 10px 4px rgb(0 0 0 / 25%);
+    --chi-elevation-level5: 0px 4px 4px 0px rgb(0 0 0 / 50%),
+      0px 8px 12px 6px rgb(0 0 0 / 25%);
+  }
+}
+
+[data-theme='dark'] {
+  /* Explicit dark theme shadows */
+  --chi-elevation-level1: 0px 1px 2px 0px rgb(0 0 0 / 50%),
+    0px 1px 3px 1px rgb(0 0 0 / 25%);
+  --chi-elevation-level2: 0px 1px 2px 0px rgb(0 0 0 / 50%),
+    0px 2px 6px 2px rgb(0 0 0 / 25%);
+  --chi-elevation-level3: 0px 1px 3px 0px rgb(0 0 0 / 50%),
+    0px 4px 8px 3px rgb(0 0 0 / 25%);
+  --chi-elevation-level4: 0px 2px 3px 0px rgb(0 0 0 / 50%),
+    0px 6px 10px 4px rgb(0 0 0 / 25%);
+  --chi-elevation-level5: 0px 4px 4px 0px rgb(0 0 0 / 50%),
+    0px 8px 12px 6px rgb(0 0 0 / 25%);
+}
+
+/**
+ * Chi Design System - Typography Tokens
+ * Typography scale with scaling support
+ * Migrated from typescale tokens
+ */
+
+:root {
+  /* Base font families - single source of truth */
+  --chi-font-family-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --chi-font-family-serif: georgia, 'Times New Roman', serif;
+  --chi-font-family-mono: 'SF Mono', monaco, 'Courier New', monospace;
+}
+
+.chi-themes {
+  /* Font sizes with scaling support */
+  --font-size-1: calc(12px * var(--scaling, 1));
+  --font-size-2: calc(14px * var(--scaling, 1));
+  --font-size-3: calc(16px * var(--scaling, 1));
+  --font-size-4: calc(18px * var(--scaling, 1));
+  --font-size-5: calc(20px * var(--scaling, 1));
+  --font-size-6: calc(24px * var(--scaling, 1));
+  --font-size-7: calc(28px * var(--scaling, 1));
+  --font-size-8: calc(35px * var(--scaling, 1));
+  --font-size-9: calc(60px * var(--scaling, 1));
+
+  /* Font weights */
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  /* Line heights with scaling support */
+  --line-height-1: calc(16px * var(--scaling, 1));
+  --line-height-2: calc(20px * var(--scaling, 1));
+  --line-height-3: calc(24px * var(--scaling, 1));
+  --line-height-4: calc(26px * var(--scaling, 1));
+  --line-height-5: calc(28px * var(--scaling, 1));
+  --line-height-6: calc(30px * var(--scaling, 1));
+  --line-height-7: calc(36px * var(--scaling, 1));
+  --line-height-8: calc(40px * var(--scaling, 1));
+  --line-height-9: calc(60px * var(--scaling, 1));
+
+  /* Letter spacing */
+  --letter-spacing-1: 0.0025em;
+  --letter-spacing-2: 0em;
+  --letter-spacing-3: -0.0025em;
+
+  /* Okja Legacy Typescale - preserving existing tokens for backwards compatibility */
+  --chi-typescale-label-medium-font: var(--chi-font-family-sans);
+  --chi-typescale-label-medium-size: calc(0.75rem * var(--scaling, 1));
+  --chi-typescale-label-medium-weight: 500;
+  --chi-typescale-label-medium-line-height: calc(1rem * var(--scaling, 1));
+  --chi-typescale-label-medium-tracking: calc(0.0063rem * var(--scaling, 1));
+
+  --chi-typescale-title-small-font: var(--chi-font-family-sans);
+  --chi-typescale-title-small-size: calc(0.875rem * var(--scaling, 1));
+  --chi-typescale-title-small-weight: 500;
+  --chi-typescale-title-small-line-height: calc(1.25rem * var(--scaling, 1));
+  --chi-typescale-title-small-tracking: 0;
+
+  --chi-typescale-body-medium-font: var(--chi-font-family-sans);
+  --chi-typescale-body-medium-size: calc(0.875rem * var(--scaling, 1));
+  --chi-typescale-body-medium-weight: 400;
+  --chi-typescale-body-medium-line-height: calc(1.25rem * var(--scaling, 1));
+  --chi-typescale-body-medium-tracking: 0;
+}
+
+/**
+ * Chi Design System - Motion Tokens
+ * Animation duration and easing tokens
+ * Migrated from motion tokens in system-tokens
+ */
+
+:root {
+  /* Durations */
+  --chi-motion-duration-short1: 50ms;
+  --chi-motion-duration-short2: 100ms;
+  --chi-motion-duration-short3: 150ms;
+  --chi-motion-duration-short4: 200ms;
+  --chi-motion-duration-medium1: 250ms;
+  --chi-motion-duration-medium2: 300ms;
+  --chi-motion-duration-medium3: 350ms;
+  --chi-motion-duration-medium4: 400ms;
+  --chi-motion-duration-long1: 450ms;
+  --chi-motion-duration-long2: 500ms;
+  --chi-motion-duration-long3: 550ms;
+  --chi-motion-duration-long4: 600ms;
+  --chi-motion-duration-extra-long1: 700ms;
+  --chi-motion-duration-extra-long2: 800ms;
+  --chi-motion-duration-extra-long3: 900ms;
+  --chi-motion-duration-extra-long4: 1000ms;
+
+  /* Simplified durations (Radix-style aliases) */
+  --duration-instant: 0ms;
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 400ms;
+
+  /* Easing functions */
+  --chi-motion-easing-linear: linear;
+  --chi-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --chi-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  --chi-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
+  --chi-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --chi-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --chi-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+
+  /* Radix-style easing aliases */
+  --easing-linear: var(--chi-motion-easing-linear);
+  --easing-ease: ease;
+  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-emphasized: var(--chi-motion-easing-emphasized);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@okja/chi-tokens",
-  "version": "0.3.10",
-  "description": "Design tokens - colors, typography, spacing, radius, shadow, motion",
+  "version": "0.4.1",
+  "description": "Chi Design System tokens - colors, typography, spacing, radius, shadow, motion",
   "type": "module",
   "license": "MIT",
   "author": {
@@ -17,25 +17,30 @@
     "provenance": true
   },
   "exports": {
-    ".": "./src/tokens.json",
-    "./tokens": "./src/tokens.json",
-    "./tokens.json": "./src/tokens.json",
-    "./colors/grayscale": "./src/colors/grayscale.json",
-    "./colors/grayscale.json": "./src/colors/grayscale.json",
-    "./colors/blue": "./src/colors/blue.json",
-    "./colors/blue.json": "./src/colors/blue.json",
-    "./colors/purple": "./src/colors/purple.json",
-    "./colors/purple.json": "./src/colors/purple.json",
+    "./tokens.css": "./dist/tokens.css",
+    "./colors/grayscale.css": "./dist/colors/grayscale.css",
+    "./colors/blue.css": "./dist/colors/blue.css",
+    "./colors/purple.css": "./dist/colors/purple.css",
     "./package.json": "./package.json"
   },
   "files": [
-    "src"
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
   ],
   "scripts": {
-    "check": "prettier --check 'src/**/*.json'",
-    "fix": "prettier --write 'src/**/*.json'"
+    "build": "postcss src/base.css -o dist/tokens.css && postcss 'src/colors/*.css' --dir dist/colors --base src/colors",
+    "check": "stylelint 'src/**/*.css'",
+    "clean": "rm -rf dist"
   },
   "devDependencies": {
-    "prettier": "^3.4.0"
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "postcss-nesting": "^13.0.2",
+    "postcss-custom-media": "^11.0.6",
+    "stylelint": "^16.12.0",
+    "stylelint-config-standard": "^37.0.0"
   }
 }

package/src/colors/blue.json

@@ -1,85 +0,0 @@
-{
-  "name": "blue",
-  "light": {
-    "primary": "oklch(52% 0.14 250)",
-    "on-primary": "oklch(100% 0 0)",
-    "primary-container": "oklch(85% 0.08 250)",
-    "on-primary-container": "oklch(20% 0.14 250)",
-    "secondary": "oklch(50% 0.05 245)",
-    "on-secondary": "oklch(100% 0 0)",
-    "secondary-container": "oklch(88% 0.03 245)",
-    "on-secondary-container": "oklch(20% 0.05 245)",
-    "tertiary": "oklch(58% 0.12 195)",
-    "on-tertiary": "oklch(100% 0 0)",
-    "tertiary-container": "oklch(88% 0.06 195)",
-    "on-tertiary-container": "oklch(22% 0.12 195)",
-    "error": "oklch(66.4% 0.195 29)",
-    "on-error": "oklch(20% 0.05 29)",
-    "error-container": "oklch(92% 0.05 29)",
-    "on-error-container": "oklch(20% 0.05 29)",
-    "background": "oklch(99% 0.003 245)",
-    "on-background": "oklch(12% 0.003 245)",
-    "surface": "oklch(99% 0.003 245)",
-    "on-surface": "oklch(12% 0.003 245)",
-    "surface-variant": "oklch(92% 0.01 245)",
-    "on-surface-variant": "oklch(32% 0.02 245)",
-    "surface-0": "oklch(100% 0 0)",
-    "surface-1": "oklch(98% 0.005 245)",
-    "surface-2": "oklch(96% 0.005 245)",
-    "surface-3": "oklch(94% 0.005 245)",
-    "surface-4": "oklch(92% 0.005 245)",
-    "surface-5": "oklch(92% 0.005 245)",
-    "surface-container": "oklch(96% 0.005 245)",
-    "surface-container-low": "oklch(98% 0.003 245)",
-    "surface-container-high": "oklch(94% 0.005 245)",
-    "surface-container-highest": "oklch(92% 0.005 245)",
-    "inverse-surface": "oklch(20% 0 0)",
-    "inverse-on-surface": "oklch(96% 0.003 245)",
-    "inverse-primary": "oklch(80% 0.08 250)",
-    "outline": "oklch(48% 0.01 245)",
-    "outline-variant": "oklch(92% 0.01 245)",
-    "divider": "oklch(48% 0.01 245)",
-    "scrim": "oklch(0% 0 0)",
-    "shadow": "oklch(0% 0 0)"
-  },
-  "dark": {
-    "primary": "oklch(75% 0.1 250)",
-    "on-primary": "oklch(15% 0.14 250)",
-    "primary-container": "oklch(30% 0.14 250)",
-    "on-primary-container": "oklch(88% 0.08 250)",
-    "secondary": "oklch(68% 0.04 245)",
-    "on-secondary": "oklch(12% 0.05 245)",
-    "secondary-container": "oklch(28% 0.05 245)",
-    "on-secondary-container": "oklch(88% 0.03 245)",
-    "tertiary": "oklch(72% 0.09 195)",
-    "on-tertiary": "oklch(18% 0.12 195)",
-    "tertiary-container": "oklch(32% 0.12 195)",
-    "on-tertiary-container": "oklch(90% 0.06 195)",
-    "error": "oklch(68.5% 0.195 29)",
-    "on-error": "oklch(20% 0.05 29)",
-    "error-container": "oklch(66.4% 0.195 29)",
-    "on-error-container": "oklch(92% 0.05 29)",
-    "background": "oklch(9% 0.003 245)",
-    "on-background": "oklch(92% 0.003 245)",
-    "surface": "oklch(7% 0.003 245)",
-    "on-surface": "oklch(92% 0.003 245)",
-    "surface-variant": "oklch(30% 0.02 245)",
-    "on-surface-variant": "oklch(82% 0.01 245)",
-    "surface-0": "oklch(7% 0.003 245)",
-    "surface-1": "oklch(12% 0.003 245)",
-    "surface-2": "oklch(15% 0.003 245)",
-    "surface-3": "oklch(18% 0.003 245)",
-    "surface-4": "oklch(22% 0.003 245)",
-    "surface-5": "oklch(22% 0.003 245)",
-    "surface-container": "oklch(15% 0.003 245)",
-    "surface-container-low": "oklch(12% 0.003 245)",
-    "surface-container-high": "oklch(18% 0.003 245)",
-    "surface-container-highest": "oklch(22% 0.003 245)",
-    "inverse-surface": "oklch(92% 0.003 245)",
-    "inverse-on-surface": "oklch(20% 0.003 245)",
-    "inverse-primary": "oklch(52% 0.14 250)",
-    "outline": "oklch(60% 0.01 245)",
-    "outline-variant": "oklch(30% 0.02 245)",
-    "divider": "oklch(60% 0.01 245)"
-  }
-}

package/src/colors/grayscale.json

@@ -1,76 +0,0 @@
-{
-  "name": "grayscale",
-  "light": {
-    "primary": "oklch(49.4% 0.163 264.05)",
-    "on-primary": "oklch(100% 0 0)",
-    "primary-container": "oklch(79.7% 0.105 264.05)",
-    "on-primary-container": "oklch(20% 0.163 264.05)",
-    "secondary": "oklch(61.8% 0.15 314.05)",
-    "on-secondary": "oklch(100% 0 0)",
-    "secondary-container": "oklch(85.1% 0.08 314.05)",
-    "on-secondary-container": "oklch(25.1% 0.15 314.05)",
-    "tertiary": "oklch(70.4% 0.15 29.23)",
-    "on-tertiary": "oklch(100% 0 0)",
-    "tertiary-container": "oklch(90.2% 0.08 29.23)",
-    "on-tertiary-container": "oklch(30.2% 0.15 29.23)",
-    "error": "oklch(62.8% 0.258 29.23)",
-    "on-error": "oklch(100% 0 0)",
-    "error-container": "oklch(90.2% 0.08 29.23)",
-    "on-error-container": "oklch(30.2% 0.15 29.23)",
-    "surface": "oklch(99.1% 0.005 264.05)",
-    "on-surface": "oklch(20% 0.005 264.05)",
-    "surface-variant": "oklch(92.5% 0.02 264.05)",
-    "on-surface-variant": "oklch(30% 0.02 264.05)",
-    "surface-container": "oklch(96.1% 0.01 264.05)",
-    "surface-container-low": "oklch(98.1% 0.005 264.05)",
-    "surface-container-high": "oklch(94.1% 0.01 264.05)",
-    "surface-container-highest": "oklch(92.1% 0.01 264.05)",
-    "surface-1": "oklch(97.1% 0.01 264.05)",
-    "surface-3": "oklch(92.1% 0.01 264.05)",
-    "surface-4": "oklch(91.1% 0.01 264.05)",
-    "surface-5": "oklch(90.1% 0.01 264.05)",
-    "outline": "oklch(50% 0.02 264.05)",
-    "outline-variant": "oklch(80% 0.02 264.05)",
-    "inverse-surface": "oklch(25% 0.01 264.05)",
-    "inverse-on-surface": "oklch(95% 0.005 264.05)",
-    "inverse-primary": "oklch(79.7% 0.105 264.05)",
-    "scrim": "oklch(0% 0 0)",
-    "shadow": "oklch(0% 0 0)"
-  },
-  "dark": {
-    "primary": "oklch(79.7% 0.105 264.05)",
-    "on-primary": "oklch(30% 0.163 264.05)",
-    "primary-container": "oklch(35% 0.163 264.05)",
-    "on-primary-container": "oklch(90% 0.105 264.05)",
-    "secondary": "oklch(75.1% 0.08 314.05)",
-    "on-secondary": "oklch(35.1% 0.15 314.05)",
-    "secondary-container": "oklch(40.1% 0.15 314.05)",
-    "on-secondary-container": "oklch(90.1% 0.08 314.05)",
-    "tertiary": "oklch(80.2% 0.08 29.23)",
-    "on-tertiary": "oklch(40.2% 0.15 29.23)",
-    "tertiary-container": "oklch(45.2% 0.15 29.23)",
-    "on-tertiary-container": "oklch(95.2% 0.08 29.23)",
-    "error": "oklch(80.2% 0.15 29.23)",
-    "on-error": "oklch(40.2% 0.258 29.23)",
-    "error-container": "oklch(45.2% 0.258 29.23)",
-    "on-error-container": "oklch(95.2% 0.15 29.23)",
-    "surface": "oklch(15% 0.005 264.05)",
-    "on-surface": "oklch(90% 0.005 264.05)",
-    "surface-variant": "oklch(25% 0.02 264.05)",
-    "on-surface-variant": "oklch(75% 0.02 264.05)",
-    "surface-container": "oklch(20% 0.01 264.05)",
-    "surface-container-low": "oklch(17% 0.005 264.05)",
-    "surface-container-high": "oklch(25% 0.01 264.05)",
-    "surface-container-highest": "oklch(30% 0.01 264.05)",
-    "surface-1": "oklch(18% 0.01 264.05)",
-    "surface-2": "oklch(21% 0.01 264.05)",
-    "surface-3": "oklch(24% 0.01 264.05)",
-    "surface-4": "oklch(26% 0.01 264.05)",
-    "surface-5": "oklch(28% 0.01 264.05)",
-    "outline": "oklch(60% 0.02 264.05)",
-    "outline-variant": "oklch(35% 0.02 264.05)",
-    "inverse-surface": "oklch(90% 0.005 264.05)",
-    "inverse-on-surface": "oklch(25% 0.01 264.05)",
-    "inverse-primary": "oklch(49.4% 0.163 264.05)"
-  }
-}

package/src/colors/purple.json

@@ -1,85 +0,0 @@
-{
-  "name": "purple",
-  "light": {
-    "primary": "oklch(49.4% 0.163 264)",
-    "on-primary": "oklch(100% 0 0)",
-    "primary-container": "oklch(79.7% 0.105 264)",
-    "on-primary-container": "oklch(20% 0.163 264)",
-    "secondary": "oklch(43.8% 0.029 270)",
-    "on-secondary": "oklch(100% 0 0)",
-    "secondary-container": "oklch(88.5% 0.029 270)",
-    "on-secondary-container": "oklch(15.8% 0.029 270)",
-    "tertiary": "oklch(60% 0.12 320)",
-    "on-tertiary": "oklch(100% 0 0)",
-    "tertiary-container": "oklch(90% 0.08 320)",
-    "on-tertiary-container": "oklch(20% 0.12 320)",
-    "error": "oklch(66.4% 0.195 29)",
-    "on-error": "oklch(20% 0.05 29)",
-    "error-container": "oklch(92% 0.05 29)",
-    "on-error-container": "oklch(20% 0.05 29)",
-    "background": "oklch(99% 0.005 300)",
-    "on-background": "oklch(12.5% 0.005 300)",
-    "surface": "oklch(99% 0.005 300)",
-    "on-surface": "oklch(12.5% 0.005 300)",
-    "surface-variant": "oklch(91.8% 0.015 300)",
-    "on-surface-variant": "oklch(33.5% 0.025 270)",
-    "surface-0": "oklch(100% 0 0)",
-    "surface-1": "oklch(97.5% 0.01 300)",
-    "surface-2": "oklch(95.5% 0.01 300)",
-    "surface-3": "oklch(93.5% 0.01 300)",
-    "surface-4": "oklch(91.5% 0.01 300)",
-    "surface-5": "oklch(91.5% 0.01 300)",
-    "surface-container": "oklch(95.5% 0.01 300)",
-    "surface-container-low": "oklch(97.5% 0.005 300)",
-    "surface-container-high": "oklch(93.5% 0.01 300)",
-    "surface-container-highest": "oklch(91.5% 0.01 300)",
-    "inverse-surface": "oklch(22% 0 0)",
-    "inverse-on-surface": "oklch(96% 0.005 300)",
-    "inverse-primary": "oklch(79.7% 0.105 264)",
-    "outline": "oklch(50% 0.01 300)",
-    "outline-variant": "oklch(91.8% 0.015 300)",
-    "divider": "oklch(50% 0.01 300)",
-    "scrim": "oklch(0% 0 0)",
-    "shadow": "oklch(0% 0 0)"
-  },
-  "dark": {
-    "primary": "oklch(79.7% 0.105 264)",
-    "on-primary": "oklch(15% 0.163 264)",
-    "primary-container": "oklch(44.5% 0.163 264)",
-    "on-primary-container": "oklch(91% 0.105 264)",
-    "secondary": "oklch(67.5% 0.029 270)",
-    "on-secondary": "oklch(12% 0.029 270)",
-    "secondary-container": "oklch(32% 0.029 270)",
-    "on-secondary-container": "oklch(90% 0.029 270)",
-    "tertiary": "oklch(70% 0.08 320)",
-    "on-tertiary": "oklch(25% 0.12 320)",
-    "tertiary-container": "oklch(38% 0.08 320)",
-    "on-tertiary-container": "oklch(93% 0.08 320)",
-    "error": "oklch(68.5% 0.195 29)",
-    "on-error": "oklch(20% 0.05 29)",
-    "error-container": "oklch(66.4% 0.195 29)",
-    "on-error-container": "oklch(92% 0.05 29)",
-    "background": "oklch(9.5% 0.005 300)",
-    "on-background": "oklch(91.5% 0.005 300)",
-    "surface": "oklch(7% 0.005 300)",
-    "on-surface": "oklch(91.5% 0.005 300)",
-    "surface-variant": "oklch(33.5% 0.025 270)",
-    "on-surface-variant": "oklch(82% 0.015 300)",
-    "surface-0": "oklch(7% 0.005 300)",
-    "surface-1": "oklch(12.5% 0.005 300)",
-    "surface-2": "oklch(15% 0.005 300)",
-    "surface-3": "oklch(19% 0.005 300)",
-    "surface-4": "oklch(24% 0.005 300)",
-    "surface-5": "oklch(24% 0.005 300)",
-    "surface-container": "oklch(15% 0.005 300)",
-    "surface-container-low": "oklch(12.5% 0.005 300)",
-    "surface-container-high": "oklch(19% 0.005 300)",
-    "surface-container-highest": "oklch(24% 0.005 300)",
-    "inverse-surface": "oklch(91.5% 0.005 300)",
-    "inverse-on-surface": "oklch(22.5% 0.005 300)",
-    "inverse-primary": "oklch(49.4% 0.163 264)",
-    "outline": "oklch(61% 0.01 300)",
-    "outline-variant": "oklch(33.5% 0.025 270)",
-    "divider": "oklch(61% 0.01 300)"
-  }
-}

package/src/tokens.json

@@ -1,144 +0,0 @@
-{
-  "font-family": {
-    "sans": "system-ui, -apple-system, 'Segoe UI', sans-serif",
-    "serif": "georgia, 'Times New Roman', serif",
-    "mono": "'SF Mono', monaco, 'Courier New', monospace"
-  },
-  "font-size": {
-    "1": "12px",
-    "2": "14px",
-    "3": "16px",
-    "4": "18px",
-    "5": "20px",
-    "6": "24px",
-    "7": "28px",
-    "8": "35px",
-    "9": "60px"
-  },
-  "font-weight": {
-    "light": "300",
-    "regular": "400",
-    "medium": "500",
-    "bold": "700"
-  },
-  "line-height": {
-    "1": "16px",
-    "2": "20px",
-    "3": "24px",
-    "4": "26px",
-    "5": "28px",
-    "6": "30px",
-    "7": "36px",
-    "8": "40px",
-    "9": "60px"
-  },
-  "letter-spacing": {
-    "1": "0.0025em",
-    "2": "0",
-    "3": "-0.0025em"
-  },
-  "spacing": {
-    "1": "4px",
-    "2": "8px",
-    "3": "12px",
-    "4": "16px",
-    "5": "24px",
-    "6": "32px",
-    "7": "40px",
-    "8": "48px",
-    "9": "64px"
-  },
-  "radius": {
-    "none": "0",
-    "xs": "4px",
-    "sm": "8px",
-    "md": "12px",
-    "lg": "16px",
-    "xl": "28px",
-    "full": "9999px"
-  },
-  "shadow": {
-    "light": {
-      "none": "none",
-      "1": "0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 1px 3px 1px rgb(0 0 0 / 15%)",
-      "2": "0px 1px 2px 0px rgb(0 0 0 / 30%), 0px 2px 6px 2px rgb(0 0 0 / 15%)",
-      "3": "0px 1px 3px 0px rgb(0 0 0 / 30%), 0px 4px 8px 3px rgb(0 0 0 / 15%)",
-      "4": "0px 2px 3px 0px rgb(0 0 0 / 30%), 0px 6px 10px 4px rgb(0 0 0 / 15%)",
-      "5": "0px 4px 4px 0px rgb(0 0 0 / 30%), 0px 8px 12px 6px rgb(0 0 0 / 15%)"
-    },
-    "dark": {
-      "none": "none",
-      "1": "0px 1px 2px 0px rgb(0 0 0 / 50%), 0px 1px 3px 1px rgb(0 0 0 / 25%)",
-      "2": "0px 1px 2px 0px rgb(0 0 0 / 50%), 0px 2px 6px 2px rgb(0 0 0 / 25%)",
-      "3": "0px 1px 3px 0px rgb(0 0 0 / 50%), 0px 4px 8px 3px rgb(0 0 0 / 25%)",
-      "4": "0px 2px 3px 0px rgb(0 0 0 / 50%), 0px 6px 10px 4px rgb(0 0 0 / 25%)",
-      "5": "0px 4px 4px 0px rgb(0 0 0 / 50%), 0px 8px 12px 6px rgb(0 0 0 / 25%)"
-    }
-  },
-  "duration": {
-    "instant": "0ms",
-    "short1": "50ms",
-    "short2": "100ms",
-    "short3": "150ms",
-    "short4": "200ms",
-    "medium1": "250ms",
-    "medium2": "300ms",
-    "medium3": "350ms",
-    "medium4": "400ms",
-    "long1": "450ms",
-    "long2": "500ms",
-    "long3": "550ms",
-    "long4": "600ms",
-    "extra-long1": "700ms",
-    "extra-long2": "800ms",
-    "extra-long3": "900ms",
-    "extra-long4": "1000ms"
-  },
-  "easing": {
-    "linear": "linear",
-    "ease": "ease",
-    "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
-    "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
-    "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
-    "standard": "cubic-bezier(0.2, 0, 0, 1)",
-    "standard-accelerate": "cubic-bezier(0.3, 0, 1, 1)",
-    "standard-decelerate": "cubic-bezier(0, 0, 0, 1)",
-    "emphasized": "cubic-bezier(0.2, 0, 0, 1)",
-    "emphasized-accelerate": "cubic-bezier(0.3, 0, 0.8, 0.15)",
-    "emphasized-decelerate": "cubic-bezier(0.05, 0.7, 0.1, 1)"
-  },
-  "container": {
-    "1": "448px",
-    "2": "688px",
-    "3": "880px",
-    "4": "1136px"
-  },
-  "icon-size": {
-    "sm": "18px",
-    "md": "24px",
-    "lg": "36px",
-    "xl": "48px"
-  },
-  "scaling": {
-    "90": 0.9,
-    "95": 0.95,
-    "100": 1,
-    "105": 1.05,
-    "110": 1.1
-  },
-  "radius-factor": {
-    "none": 0,
-    "small": 0.75,
-    "medium": 1,
-    "large": 1.5
-  },
-  "cursor": {
-    "default": "default",
-    "pointer": "pointer",
-    "not-allowed": "not-allowed",
-    "text": "text",
-    "move": "move",
-    "grab": "grab",
-    "grabbing": "grabbing"
-  }
-}