@hkdigital/lib-core 0.3.9 → 0.3.11

package/dist/{themes → design/themes}/hkdev/theme.css

@@ -1,219 +1,219 @@
-[data-theme='hkdev'] {
-  --text-scaling: 1.067;
-  --base-font-color: var(--color-surface-950);
-  --base-font-color-dark: var(--color-surface-50);
-  --base-font-family: mulish, system-ui, sans-serif;
-  --base-font-size: inherit;
-  --base-line-height: inherit;
-  --base-font-weight: normal;
-  --base-font-style: normal;
-  --base-letter-spacing: 0em;
-  --heading-font-color: var(--color-surface-950);
-  --heading-font-color-dark: var(--color-surface-50);
-  --heading-font-family: 'Guyot-Sans', system-ui, sans-serif;
-  --heading-font-weight: 900;
-  --heading-font-style: normal;
-  --heading-letter-spacing: inherit;
-  --anchor-font-color: var(--color-primary-500);
-  --anchor-font-color-dark: var(--color-primary-500);
-  --anchor-font-family: inherit;
-  --anchor-font-size: inherit;
-  --anchor-line-height: inherit;
-  --anchor-font-weight: inherit;
-  --anchor-font-style: inherit;
-  --anchor-letter-spacing: inherit;
-  --anchor-text-decoration: none;
-  --anchor-text-decoration-hover: underline;
-  --anchor-text-decoration-active: none;
-  --anchor-text-decoration-focus: none;
-  --spacing: 0.25rem;
-  --radius-base: 6px;
-  --radius-container: 12px;
-  --default-border-width: 1px;
-  --default-divide-width: 1px;
-  --default-ring-width: 1px;
-  --body-background-color: var(--color-surface-50);
-  --body-background-color-dark: var(--color-surface-950);
-  
-  /* Primary Colors */
-	--color-primary-50: oklch(100% 0 none);
-	--color-primary-100: oklch(89.21% 0.06 344.59deg);
-	--color-primary-200: oklch(79.1% 0.13 346.59deg);
-	--color-primary-300: oklch(70.14% 0.19 348.99deg);
-	--color-primary-400: oklch(63.52% 0.23 352.85deg);
-	--color-primary-500: oklch(59.83% 0.24 358.78deg);
-	--color-primary-600: oklch(55.33% 0.22 358.81deg);
-	--color-primary-700: oklch(50.94% 0.2 359.11deg);
-	--color-primary-800: oklch(46.26% 0.18 359.76deg);
-	--color-primary-900: oklch(41.75% 0.16 0.47deg);
-	--color-primary-950: oklch(37.02% 0.14 1.33deg);
-  --color-primary-contrast-dark: var(--color-primary-950);
-  --color-primary-contrast-light: var(--color-primary-50);
-  --color-primary-contrast-50: var(--color-primary-contrast-dark);
-  --color-primary-contrast-100: var(--color-primary-contrast-dark);
-  --color-primary-contrast-200: var(--color-primary-contrast-dark);
-  --color-primary-contrast-300: var(--color-primary-contrast-dark);
-  --color-primary-contrast-400: var(--color-primary-contrast-light);
-  --color-primary-contrast-500: var(--color-primary-contrast-light);
-  --color-primary-contrast-600: var(--color-primary-contrast-light);
-  --color-primary-contrast-700: var(--color-primary-contrast-light);
-  --color-primary-contrast-800: var(--color-primary-contrast-light);
-  --color-primary-contrast-900: var(--color-primary-contrast-light);
-  --color-primary-contrast-950: var(--color-primary-contrast-light);
-  
-  /* Secondary Colors */
-	--color-secondary-50: oklch(100% 0 none);
-	--color-secondary-100: oklch(92.02% 0.04 56.93deg);
-	--color-secondary-200: oklch(84.06% 0.08 54.85deg);
-	--color-secondary-300: oklch(76.66% 0.12 53.95deg);
-	--color-secondary-400: oklch(69.69% 0.15 50.67deg);
-	--color-secondary-500: oklch(63.83% 0.18 44.57deg);
-	--color-secondary-600: oklch(60.17% 0.18 43.16deg);
-	--color-secondary-700: oklch(56.48% 0.17 41.6deg);
-	--color-secondary-800: oklch(52.69% 0.16 40.52deg);
-	--color-secondary-900: oklch(48.91% 0.15 38.6deg);
-	--color-secondary-950: oklch(45.09% 0.15 36.44deg);
-  --color-secondary-contrast-dark: var(--color-secondary-950);
-  --color-secondary-contrast-light: var(--color-secondary-50);
-  --color-secondary-contrast-50: var(--color-secondary-contrast-dark);
-  --color-secondary-contrast-100: var(--color-secondary-contrast-dark);
-  --color-secondary-contrast-200: var(--color-secondary-contrast-dark);
-  --color-secondary-contrast-300: var(--color-secondary-contrast-dark);
-  --color-secondary-contrast-400: var(--color-secondary-contrast-light);
-  --color-secondary-contrast-500: var(--color-secondary-contrast-light);
-  --color-secondary-contrast-600: var(--color-secondary-contrast-light);
-  --color-secondary-contrast-700: var(--color-secondary-contrast-light);
-  --color-secondary-contrast-800: var(--color-secondary-contrast-light);
-  --color-secondary-contrast-900: var(--color-secondary-contrast-light);
-  --color-secondary-contrast-950: var(--color-secondary-contrast-light);
-  
-  /* Tertiary Colors */
-	--color-tertiary-50: oklch(100% 0 none);
-	--color-tertiary-100: oklch(91.02% 0.03 239.84deg);
-	--color-tertiary-200: oklch(81.89% 0.07 242.23deg);
-	--color-tertiary-300: oklch(73.25% 0.1 243.03deg);
-	--color-tertiary-400: oklch(64.86% 0.14 246.03deg);
-	--color-tertiary-500: oklch(57.51% 0.16 250.54deg);
-	--color-tertiary-600: oklch(53.76% 0.16 252.89deg);
-	--color-tertiary-700: oklch(49.99% 0.16 255.29deg);
-	--color-tertiary-800: oklch(46.26% 0.16 257.75deg);
-	--color-tertiary-900: oklch(42.46% 0.16 260.05deg);
-	--color-tertiary-950: oklch(38.66% 0.16 262.13deg);
-  --color-tertiary-contrast-dark: var(--color-tertiary-950);
-  --color-tertiary-contrast-light: var(--color-tertiary-50);
-  --color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);
-  --color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);
-  --color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);
-  --color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);
-  --color-tertiary-contrast-400: var(--color-tertiary-contrast-light);
-  --color-tertiary-contrast-500: var(--color-tertiary-contrast-light);
-  --color-tertiary-contrast-600: var(--color-tertiary-contrast-light);
-  --color-tertiary-contrast-700: var(--color-tertiary-contrast-light);
-  --color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
-  --color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
-  --color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
-  
-  /* Success Colors */
-	--color-success-50: oklch(100% 0 none);
-	--color-success-100: oklch(92.84% 0.04 120.75deg);
-	--color-success-200: oklch(85.91% 0.08 122.19deg);
-	--color-success-300: oklch(78.79% 0.12 123.79deg);
-	--color-success-400: oklch(72.08% 0.15 125.47deg);
-	--color-success-500: oklch(65.33% 0.17 127.94deg);
-	--color-success-600: oklch(60.9% 0.16 127.69deg);
-	--color-success-700: oklch(56.39% 0.14 127.39deg);
-	--color-success-800: oklch(51.72% 0.13 127.41deg);
-	--color-success-900: oklch(47.01% 0.12 127.01deg);
-	--color-success-950: oklch(42.19% 0.1 126.49deg);
-  --color-success-contrast-dark: var(--color-success-950);
-  --color-success-contrast-light: var(--color-success-50);
-  --color-success-contrast-50: var(--color-success-contrast-dark);
-  --color-success-contrast-100: var(--color-success-contrast-dark);
-  --color-success-contrast-200: var(--color-success-contrast-dark);
-  --color-success-contrast-300: var(--color-success-contrast-dark);
-  --color-success-contrast-400: var(--color-success-contrast-dark);
-  --color-success-contrast-500: var(--color-success-contrast-light);
-  --color-success-contrast-600: var(--color-success-contrast-light);
-  --color-success-contrast-700: var(--color-success-contrast-light);
-  --color-success-contrast-800: var(--color-success-contrast-light);
-  --color-success-contrast-900: var(--color-success-contrast-light);
-  --color-success-contrast-950: var(--color-success-contrast-light);
-  
-  /* Warning Colors */
-	--color-warning-50: oklch(100% 0 none);
-	--color-warning-100: oklch(94.18% 0.04 94.27deg);
-	--color-warning-200: oklch(88.37% 0.08 95.33deg);
-	--color-warning-300: oklch(82.58% 0.11 94.03deg);
-	--color-warning-400: oklch(77.04% 0.13 93.57deg);
-	--color-warning-500: oklch(71.79% 0.14 90.64deg);
-	--color-warning-600: oklch(67.54% 0.14 90.18deg);
-	--color-warning-700: oklch(63.12% 0.13 88.36deg);
-	--color-warning-800: oklch(58.72% 0.12 87.66deg);
-	--color-warning-900: oklch(54.14% 0.11 85.27deg);
-	--color-warning-950: oklch(49.57% 0.1 84.14deg);
-  --color-warning-contrast-dark: var(--color-warning-950);
-  --color-warning-contrast-light: var(--color-warning-50);
-  --color-warning-contrast-50: var(--color-warning-contrast-dark);
-  --color-warning-contrast-100: var(--color-warning-contrast-dark);
-  --color-warning-contrast-200: var(--color-warning-contrast-dark);
-  --color-warning-contrast-300: var(--color-warning-contrast-dark);
-  --color-warning-contrast-400: var(--color-warning-contrast-dark);
-  --color-warning-contrast-500: var(--color-warning-contrast-light);
-  --color-warning-contrast-600: var(--color-warning-contrast-light);
-  --color-warning-contrast-700: var(--color-warning-contrast-light);
-  --color-warning-contrast-800: var(--color-warning-contrast-light);
-  --color-warning-contrast-900: var(--color-warning-contrast-light);
-  --color-warning-contrast-950: var(--color-warning-contrast-light);
-  
-  /* Error Colors */
-	--color-error-50: oklch(100% 0 none);
-	--color-error-100: oklch(90.1% 0.04 12.28deg);
-	--color-error-200: oklch(80.53% 0.09 12.75deg);
-	--color-error-300: oklch(71.54% 0.14 14.79deg);
-	--color-error-400: oklch(63.85% 0.18 17.92deg);
-	--color-error-500: oklch(58.16% 0.21 22.85deg);
-	--color-error-600: oklch(53.02% 0.19 22.7deg);
-	--color-error-700: oklch(47.67% 0.17 22.71deg);
-	--color-error-800: oklch(42.25% 0.15 22.49deg);
-	--color-error-900: oklch(36.57% 0.13 22.46deg);
-	--color-error-950: oklch(30.75% 0.11 22.06deg);
-  --color-error-contrast-dark: var(--color-error-950);
-  --color-error-contrast-light: var(--color-error-50);
-  --color-error-contrast-50: var(--color-error-contrast-dark);
-  --color-error-contrast-100: var(--color-error-contrast-dark);
-  --color-error-contrast-200: var(--color-error-contrast-dark);
-  --color-error-contrast-300: var(--color-error-contrast-dark);
-  --color-error-contrast-400: var(--color-error-contrast-dark);
-  --color-error-contrast-500: var(--color-error-contrast-light);
-  --color-error-contrast-600: var(--color-error-contrast-light);
-  --color-error-contrast-700: var(--color-error-contrast-light);
-  --color-error-contrast-800: var(--color-error-contrast-light);
-  --color-error-contrast-900: var(--color-error-contrast-light);
-  --color-error-contrast-950: var(--color-error-contrast-light);
-  
-  /* Surface Colors */
-	--color-surface-50: oklch(100% 0 none);
-	--color-surface-100: oklch(89.43% 0.04 261.71deg);
-	--color-surface-200: oklch(78.91% 0.09 261.69deg);
-	--color-surface-300: oklch(68.77% 0.13 260.58deg);
-	--color-surface-400: oklch(59% 0.18 260.54deg);
-	--color-surface-500: oklch(50.57% 0.22 261.54deg);
-	--color-surface-600: oklch(46.58% 0.2 261.41deg);
-	--color-surface-700: oklch(42.51% 0.18 261.24deg);
-	--color-surface-800: oklch(38.37% 0.16 261.17deg);
-	--color-surface-900: oklch(34.11% 0.13 260.96deg);
-	--color-surface-950: oklch(29.76% 0.11 260.7deg);
-  --color-surface-contrast-dark: var(--color-surface-950);
-  --color-surface-contrast-light: var(--color-surface-50);
-  --color-surface-contrast-50: var(--color-surface-contrast-dark);
-  --color-surface-contrast-100: var(--color-surface-contrast-dark);
-  --color-surface-contrast-200: var(--color-surface-contrast-dark);
-  --color-surface-contrast-300: var(--color-surface-contrast-dark);
-  --color-surface-contrast-400: var(--color-surface-contrast-light);
-  --color-surface-contrast-500: var(--color-surface-contrast-light);
-  --color-surface-contrast-600: var(--color-surface-contrast-light);
-  --color-surface-contrast-700: var(--color-surface-contrast-light);
-  --color-surface-contrast-800: var(--color-surface-contrast-light);
-  --color-surface-contrast-900: var(--color-surface-contrast-light);
-  --color-surface-contrast-950: var(--color-surface-contrast-light);
+[data-theme='hkdev'] {
+  --text-scaling: 1.067;
+  --base-font-color: var(--color-surface-950);
+  --base-font-color-dark: var(--color-surface-50);
+  --base-font-family: mulish, system-ui, sans-serif;
+  --base-font-size: inherit;
+  --base-line-height: inherit;
+  --base-font-weight: normal;
+  --base-font-style: normal;
+  --base-letter-spacing: 0em;
+  --heading-font-color: var(--color-surface-950);
+  --heading-font-color-dark: var(--color-surface-50);
+  --heading-font-family: 'Guyot-Sans', system-ui, sans-serif;
+  --heading-font-weight: 900;
+  --heading-font-style: normal;
+  --heading-letter-spacing: inherit;
+  --anchor-font-color: var(--color-primary-500);
+  --anchor-font-color-dark: var(--color-primary-500);
+  --anchor-font-family: inherit;
+  --anchor-font-size: inherit;
+  --anchor-line-height: inherit;
+  --anchor-font-weight: inherit;
+  --anchor-font-style: inherit;
+  --anchor-letter-spacing: inherit;
+  --anchor-text-decoration: none;
+  --anchor-text-decoration-hover: underline;
+  --anchor-text-decoration-active: none;
+  --anchor-text-decoration-focus: none;
+  --spacing: 0.25rem;
+  --radius-base: 6px;
+  --radius-container: 12px;
+  --default-border-width: 1px;
+  --default-divide-width: 1px;
+  --default-ring-width: 1px;
+  --body-background-color: var(--color-surface-50);
+  --body-background-color-dark: var(--color-surface-950);
+  
+  /* Primary Colors */
+	--color-primary-50: oklch(100% 0 none);
+	--color-primary-100: oklch(89.21% 0.06 344.59deg);
+	--color-primary-200: oklch(79.1% 0.13 346.59deg);
+	--color-primary-300: oklch(70.14% 0.19 348.99deg);
+	--color-primary-400: oklch(63.52% 0.23 352.85deg);
+	--color-primary-500: oklch(59.83% 0.24 358.78deg);
+	--color-primary-600: oklch(55.33% 0.22 358.81deg);
+	--color-primary-700: oklch(50.94% 0.2 359.11deg);
+	--color-primary-800: oklch(46.26% 0.18 359.76deg);
+	--color-primary-900: oklch(41.75% 0.16 0.47deg);
+	--color-primary-950: oklch(37.02% 0.14 1.33deg);
+  --color-primary-contrast-dark: var(--color-primary-950);
+  --color-primary-contrast-light: var(--color-primary-50);
+  --color-primary-contrast-50: var(--color-primary-contrast-dark);
+  --color-primary-contrast-100: var(--color-primary-contrast-dark);
+  --color-primary-contrast-200: var(--color-primary-contrast-dark);
+  --color-primary-contrast-300: var(--color-primary-contrast-dark);
+  --color-primary-contrast-400: var(--color-primary-contrast-light);
+  --color-primary-contrast-500: var(--color-primary-contrast-light);
+  --color-primary-contrast-600: var(--color-primary-contrast-light);
+  --color-primary-contrast-700: var(--color-primary-contrast-light);
+  --color-primary-contrast-800: var(--color-primary-contrast-light);
+  --color-primary-contrast-900: var(--color-primary-contrast-light);
+  --color-primary-contrast-950: var(--color-primary-contrast-light);
+  
+  /* Secondary Colors */
+	--color-secondary-50: oklch(100% 0 none);
+	--color-secondary-100: oklch(92.02% 0.04 56.93deg);
+	--color-secondary-200: oklch(84.06% 0.08 54.85deg);
+	--color-secondary-300: oklch(76.66% 0.12 53.95deg);
+	--color-secondary-400: oklch(69.69% 0.15 50.67deg);
+	--color-secondary-500: oklch(63.83% 0.18 44.57deg);
+	--color-secondary-600: oklch(60.17% 0.18 43.16deg);
+	--color-secondary-700: oklch(56.48% 0.17 41.6deg);
+	--color-secondary-800: oklch(52.69% 0.16 40.52deg);
+	--color-secondary-900: oklch(48.91% 0.15 38.6deg);
+	--color-secondary-950: oklch(45.09% 0.15 36.44deg);
+  --color-secondary-contrast-dark: var(--color-secondary-950);
+  --color-secondary-contrast-light: var(--color-secondary-50);
+  --color-secondary-contrast-50: var(--color-secondary-contrast-dark);
+  --color-secondary-contrast-100: var(--color-secondary-contrast-dark);
+  --color-secondary-contrast-200: var(--color-secondary-contrast-dark);
+  --color-secondary-contrast-300: var(--color-secondary-contrast-dark);
+  --color-secondary-contrast-400: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-500: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-600: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-700: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-800: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-900: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-950: var(--color-secondary-contrast-light);
+  
+  /* Tertiary Colors */
+	--color-tertiary-50: oklch(100% 0 none);
+	--color-tertiary-100: oklch(91.02% 0.03 239.84deg);
+	--color-tertiary-200: oklch(81.89% 0.07 242.23deg);
+	--color-tertiary-300: oklch(73.25% 0.1 243.03deg);
+	--color-tertiary-400: oklch(64.86% 0.14 246.03deg);
+	--color-tertiary-500: oklch(57.51% 0.16 250.54deg);
+	--color-tertiary-600: oklch(53.76% 0.16 252.89deg);
+	--color-tertiary-700: oklch(49.99% 0.16 255.29deg);
+	--color-tertiary-800: oklch(46.26% 0.16 257.75deg);
+	--color-tertiary-900: oklch(42.46% 0.16 260.05deg);
+	--color-tertiary-950: oklch(38.66% 0.16 262.13deg);
+  --color-tertiary-contrast-dark: var(--color-tertiary-950);
+  --color-tertiary-contrast-light: var(--color-tertiary-50);
+  --color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);
+  --color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);
+  --color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);
+  --color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);
+  --color-tertiary-contrast-400: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-500: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-600: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-700: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
+  
+  /* Success Colors */
+	--color-success-50: oklch(100% 0 none);
+	--color-success-100: oklch(92.84% 0.04 120.75deg);
+	--color-success-200: oklch(85.91% 0.08 122.19deg);
+	--color-success-300: oklch(78.79% 0.12 123.79deg);
+	--color-success-400: oklch(72.08% 0.15 125.47deg);
+	--color-success-500: oklch(65.33% 0.17 127.94deg);
+	--color-success-600: oklch(60.9% 0.16 127.69deg);
+	--color-success-700: oklch(56.39% 0.14 127.39deg);
+	--color-success-800: oklch(51.72% 0.13 127.41deg);
+	--color-success-900: oklch(47.01% 0.12 127.01deg);
+	--color-success-950: oklch(42.19% 0.1 126.49deg);
+  --color-success-contrast-dark: var(--color-success-950);
+  --color-success-contrast-light: var(--color-success-50);
+  --color-success-contrast-50: var(--color-success-contrast-dark);
+  --color-success-contrast-100: var(--color-success-contrast-dark);
+  --color-success-contrast-200: var(--color-success-contrast-dark);
+  --color-success-contrast-300: var(--color-success-contrast-dark);
+  --color-success-contrast-400: var(--color-success-contrast-dark);
+  --color-success-contrast-500: var(--color-success-contrast-light);
+  --color-success-contrast-600: var(--color-success-contrast-light);
+  --color-success-contrast-700: var(--color-success-contrast-light);
+  --color-success-contrast-800: var(--color-success-contrast-light);
+  --color-success-contrast-900: var(--color-success-contrast-light);
+  --color-success-contrast-950: var(--color-success-contrast-light);
+  
+  /* Warning Colors */
+	--color-warning-50: oklch(100% 0 none);
+	--color-warning-100: oklch(94.18% 0.04 94.27deg);
+	--color-warning-200: oklch(88.37% 0.08 95.33deg);
+	--color-warning-300: oklch(82.58% 0.11 94.03deg);
+	--color-warning-400: oklch(77.04% 0.13 93.57deg);
+	--color-warning-500: oklch(71.79% 0.14 90.64deg);
+	--color-warning-600: oklch(67.54% 0.14 90.18deg);
+	--color-warning-700: oklch(63.12% 0.13 88.36deg);
+	--color-warning-800: oklch(58.72% 0.12 87.66deg);
+	--color-warning-900: oklch(54.14% 0.11 85.27deg);
+	--color-warning-950: oklch(49.57% 0.1 84.14deg);
+  --color-warning-contrast-dark: var(--color-warning-950);
+  --color-warning-contrast-light: var(--color-warning-50);
+  --color-warning-contrast-50: var(--color-warning-contrast-dark);
+  --color-warning-contrast-100: var(--color-warning-contrast-dark);
+  --color-warning-contrast-200: var(--color-warning-contrast-dark);
+  --color-warning-contrast-300: var(--color-warning-contrast-dark);
+  --color-warning-contrast-400: var(--color-warning-contrast-dark);
+  --color-warning-contrast-500: var(--color-warning-contrast-light);
+  --color-warning-contrast-600: var(--color-warning-contrast-light);
+  --color-warning-contrast-700: var(--color-warning-contrast-light);
+  --color-warning-contrast-800: var(--color-warning-contrast-light);
+  --color-warning-contrast-900: var(--color-warning-contrast-light);
+  --color-warning-contrast-950: var(--color-warning-contrast-light);
+  
+  /* Error Colors */
+	--color-error-50: oklch(100% 0 none);
+	--color-error-100: oklch(90.1% 0.04 12.28deg);
+	--color-error-200: oklch(80.53% 0.09 12.75deg);
+	--color-error-300: oklch(71.54% 0.14 14.79deg);
+	--color-error-400: oklch(63.85% 0.18 17.92deg);
+	--color-error-500: oklch(58.16% 0.21 22.85deg);
+	--color-error-600: oklch(53.02% 0.19 22.7deg);
+	--color-error-700: oklch(47.67% 0.17 22.71deg);
+	--color-error-800: oklch(42.25% 0.15 22.49deg);
+	--color-error-900: oklch(36.57% 0.13 22.46deg);
+	--color-error-950: oklch(30.75% 0.11 22.06deg);
+  --color-error-contrast-dark: var(--color-error-950);
+  --color-error-contrast-light: var(--color-error-50);
+  --color-error-contrast-50: var(--color-error-contrast-dark);
+  --color-error-contrast-100: var(--color-error-contrast-dark);
+  --color-error-contrast-200: var(--color-error-contrast-dark);
+  --color-error-contrast-300: var(--color-error-contrast-dark);
+  --color-error-contrast-400: var(--color-error-contrast-dark);
+  --color-error-contrast-500: var(--color-error-contrast-light);
+  --color-error-contrast-600: var(--color-error-contrast-light);
+  --color-error-contrast-700: var(--color-error-contrast-light);
+  --color-error-contrast-800: var(--color-error-contrast-light);
+  --color-error-contrast-900: var(--color-error-contrast-light);
+  --color-error-contrast-950: var(--color-error-contrast-light);
+  
+  /* Surface Colors */
+	--color-surface-50: oklch(100% 0 none);
+	--color-surface-100: oklch(89.43% 0.04 261.71deg);
+	--color-surface-200: oklch(78.91% 0.09 261.69deg);
+	--color-surface-300: oklch(68.77% 0.13 260.58deg);
+	--color-surface-400: oklch(59% 0.18 260.54deg);
+	--color-surface-500: oklch(50.57% 0.22 261.54deg);
+	--color-surface-600: oklch(46.58% 0.2 261.41deg);
+	--color-surface-700: oklch(42.51% 0.18 261.24deg);
+	--color-surface-800: oklch(38.37% 0.16 261.17deg);
+	--color-surface-900: oklch(34.11% 0.13 260.96deg);
+	--color-surface-950: oklch(29.76% 0.11 260.7deg);
+  --color-surface-contrast-dark: var(--color-surface-950);
+  --color-surface-contrast-light: var(--color-surface-50);
+  --color-surface-contrast-50: var(--color-surface-contrast-dark);
+  --color-surface-contrast-100: var(--color-surface-contrast-dark);
+  --color-surface-contrast-200: var(--color-surface-contrast-dark);
+  --color-surface-contrast-300: var(--color-surface-contrast-dark);
+  --color-surface-contrast-400: var(--color-surface-contrast-light);
+  --color-surface-contrast-500: var(--color-surface-contrast-light);
+  --color-surface-contrast-600: var(--color-surface-contrast-light);
+  --color-surface-contrast-700: var(--color-surface-contrast-light);
+  --color-surface-contrast-800: var(--color-surface-contrast-light);
+  --color-surface-contrast-900: var(--color-surface-contrast-light);
+  --color-surface-contrast-950: var(--color-surface-contrast-light);
 }

package/dist/{util/design-system/css → design/utils}/clamp.js

@@ -1,66 +1,66 @@
-import { getRootCssVar } from '../../css/index.js';
-
-/**
- * Cache to that ensures we parse CSS clamp parameters only once
- * @type {Object.<string, {min: number, max: number}>}
- */
-let clampParamCache = {};
-
-/**
- * Extract clamp parameters from a CSS variable
- *
- * @param {string} varName - CSS variable name without '--'
- * @returns {Object} Object with min and max values
- * @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
- */
-export function getClampParams(varName) {
-  // Check cache first
-  if (clampParamCache[varName]) {
-    return clampParamCache[varName];
-  }
-
-  // Get the CSS variable value using the existing utility
-  const declaration = getRootCssVar(varName);
-
-  if (declaration === null) {
-    throw new Error(`CSS variable --${varName} not found`);
-  }
-
-  // Parse clamp() function values
-  const clampMatch =
-    typeof declaration === 'string'
-      ? declaration.match(
-          /clamp\s*\(\s*([\d.]+)\s*,\s*[^,]+\s*,\s*([\d.]+)\s*\)/
-        )
-      : null;
-
-  if (!clampMatch || clampMatch.length < 3) {
-    // console.log(declaration);
-    throw new Error(
-      `CSS variable --${varName} does not contain a valid clamp function`
-    );
-  }
-
-  const min = parseFloat(clampMatch[1]);
-  const max = parseFloat(clampMatch[2]);
-
-  if (isNaN(min) || isNaN(max)) {
-    throw new Error(`Invalid min/max values in CSS variable --${varName}`);
-  }
-
-  // Cache the result
-  clampParamCache[varName] = { min, max };
-  return { min, max };
-}
-
-/**
- * CSS clamp function implementation
- *
- * @param {number} min - Minimum value
- * @param {number} value - Value to clamp
- * @param {number} max - Maximum value
- * @returns {number} Clamped value
- */
-export function clamp(min, value, max) {
-  return Math.max(min, Math.min(value, max));
-}
+import { getRootCssVar } from '../../util/css/index.js';
+
+/**
+ * Cache to that ensures we parse CSS clamp parameters only once
+ * @type {Object.<string, {min: number, max: number}>}
+ */
+let clampParamCache = {};
+
+/**
+ * Extract clamp parameters from a CSS variable
+ *
+ * @param {string} varName - CSS variable name without '--'
+ * @returns {Object} Object with min and max values
+ * @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
+ */
+export function getClampParams(varName) {
+  // Check cache first
+  if (clampParamCache[varName]) {
+    return clampParamCache[varName];
+  }
+
+  // Get the CSS variable value using the existing utility
+  const declaration = getRootCssVar(varName);
+
+  if (declaration === null) {
+    throw new Error(`CSS variable --${varName} not found`);
+  }
+
+  // Parse clamp() function values
+  const clampMatch =
+    typeof declaration === 'string'
+      ? declaration.match(
+          /clamp\s*\(\s*([\d.]+)\s*,\s*[^,]+\s*,\s*([\d.]+)\s*\)/
+        )
+      : null;
+
+  if (!clampMatch || clampMatch.length < 3) {
+    // console.log(declaration);
+    throw new Error(
+      `CSS variable --${varName} does not contain a valid clamp function`
+    );
+  }
+
+  const min = parseFloat(clampMatch[1]);
+  const max = parseFloat(clampMatch[2]);
+
+  if (isNaN(min) || isNaN(max)) {
+    throw new Error(`Invalid min/max values in CSS variable --${varName}`);
+  }
+
+  // Cache the result
+  clampParamCache[varName] = { min, max };
+  return { min, max };
+}
+
+/**
+ * CSS clamp function implementation
+ *
+ * @param {number} min - Minimum value
+ * @param {number} value - Value to clamp
+ * @param {number} max - Maximum value
+ * @returns {number} Clamped value
+ */
+export function clamp(min, value, max) {
+  return Math.max(min, Math.min(value, max));
+}

package/dist/{util/design-system/css/root-design-vars.d.ts → design/utils/root-vars.d.ts}

@@ -24,9 +24,9 @@
  * @example
  * // +layout.svelte
  * <script>
- * import { DESIGN, CLAMPING } from '../../../tailwind/extend/clamping/config.js';
+ * import { DESIGN, CLAMPING } from '../config/design-config.js';
  *
- * import { rootDesignVarsHTML } from '../index.js';
+ * import { rootDesignVarsHTML } from './root-vars.js';
  * </script>
  *
  * <svelte:head>