@skewedaspect/sleekspace-ui 0.2.0-beta.1 → 0.2.0-beta.3

package/dist/tokens.css

@@ -0,0 +1,968 @@
+@charset "UTF-8";
+/**
+ * Design Tokens - Main Entry
+ *
+ * This file imports all design token categories in the correct order.
+ * Foundation tokens must be loaded before semantic tokens,
+ * and semantic tokens must be loaded before component tokens.
+ *
+ * Token Hierarchy:
+ *   Foundation → Semantic → Component
+ *
+ * @see DESIGN_TOKENS_PROPOSAL.md for complete documentation
+ */
+/* ===================================================================
+ * Foundation Tokens
+ * Global primitives that all other tokens derive from
+ * =================================================================== */
+/**
+ * Foundation Tokens - Colors
+ *
+ * Color primitives and color manipulation tokens.
+ * These are the exact color values from the original SleekSpace palette.
+ */
+:root {
+  /* ===================================================================
+   * Color Primitives
+   * Using exact values from original system for consistency
+   * =================================================================== */
+  /* Gray Scale (Boulder) */
+  --sk-color-gray-05: oklch(0.80152 0 0);
+  --sk-color-gray-10: oklch(0.76993 0 0);
+  --sk-color-gray-20: oklch(0.70576 0 0);
+  --sk-color-gray-30: oklch(0.63676 0 0);
+  --sk-color-gray-40: oklch(0.56926 0 0);
+  --sk-color-gray-50: oklch(0.4997 0 0);
+  --sk-color-gray-60: oklch(0.42393 0 0);
+  --sk-color-gray-70: oklch(0.34846 0 0);
+  --sk-color-gray-80: oklch(0.26448 0 0);
+  --sk-color-gray-90: oklch(0.17764 0 0);
+  --sk-color-gray-95: oklch(0.12856 0 0);
+  /* Blue (Neon Blue) */
+  --sk-color-blue-05: oklch(0.89253 0.05936 238.48);
+  --sk-color-blue-10: oklch(0.86323 0.07656 238.23);
+  --sk-color-blue-20: oklch(0.80778 0.10896 239.1);
+  --sk-color-blue-30: oklch(0.75693 0.13793 241.1);
+  --sk-color-blue-40: oklch(0.70882 0.16372 244.53);
+  --sk-color-blue-50: oklch(0.66905 0.18368 248.81);
+  --sk-color-blue-60: oklch(0.55688 0.15159 248.46);
+  --sk-color-blue-70: oklch(0.44118 0.11661 247.22);
+  --sk-color-blue-80: oklch(0.31457 0.08002 245.5);
+  --sk-color-blue-90: oklch(0.17322 0.03881 238.66);
+  --sk-color-blue-95: oklch(0.078221 0.01413 218.8);
+  /* Red */
+  --sk-color-red-05: oklch(0.90824 0.06109 21.554);
+  --sk-color-red-10: oklch(0.87835 0.08075 22.216);
+  --sk-color-red-20: oklch(0.82294 0.11632 23.173);
+  --sk-color-red-30: oklch(0.77304 0.14903 24.825);
+  --sk-color-red-40: oklch(0.72514 0.17652 27.325);
+  --sk-color-red-50: oklch(0.68439 0.19539 29.234);
+  --sk-color-red-60: oklch(0.56964 0.16135 29.234);
+  --sk-color-red-70: oklch(0.45088 0.12528 29.234);
+  --sk-color-red-80: oklch(0.32164 0.08692 29.234);
+  --sk-color-red-90: oklch(0.17724 0.04457 29.234);
+  --sk-color-red-95: oklch(0.079856 0.01818 29.234);
+  /* Orange (Neon Orange) */
+  --sk-color-orange-05: oklch(0.92638 0.06323 76.962);
+  --sk-color-orange-10: oklch(0.90676 0.08159 77.294);
+  --sk-color-orange-20: oklch(0.8694 0.11496 76.599);
+  --sk-color-orange-30: oklch(0.83467 0.14238 74.534);
+  --sk-color-orange-40: oklch(0.80087 0.16256 70.417);
+  --sk-color-orange-50: oklch(0.77195 0.17382 64.552);
+  --sk-color-orange-60: oklch(0.64183 0.14396 65.037);
+  --sk-color-orange-70: oklch(0.50661 0.11217 66.74);
+  --sk-color-orange-80: oklch(0.35952 0.07837 69.016);
+  --sk-color-orange-90: oklch(0.19498 0.04078 77.079);
+  --sk-color-orange-95: oklch(0.085603 0.01756 94.54);
+  /* Yellow */
+  --sk-color-yellow-05: oklch(0.98353 0.08961 107.94);
+  --sk-color-yellow-10: oklch(0.97989 0.11363 108.33);
+  --sk-color-yellow-20: oklch(0.97433 0.15478 108.96);
+  --sk-color-yellow-30: oklch(0.97074 0.1851 109.4);
+  --sk-color-yellow-40: oklch(0.96871 0.20393 109.67);
+  --sk-color-yellow-50: oklch(0.96798 0.21101 109.77);
+  --sk-color-yellow-60: oklch(0.80312 0.17507 109.77);
+  --sk-color-yellow-70: oklch(0.62923 0.13716 109.77);
+  --sk-color-yellow-80: oklch(0.44216 0.09638 109.77);
+  --sk-color-yellow-90: oklch(0.23163 0.05049 109.77);
+  --sk-color-yellow-95: oklch(0.093823 0.02045 109.77);
+  /* Green (Neon Green) */
+  --sk-color-green-05: oklch(0.96206 0.09647 126.19);
+  --sk-color-green-10: oklch(0.95273 0.12325 126.45);
+  --sk-color-green-20: oklch(0.93625 0.1712 127.42);
+  --sk-color-green-30: oklch(0.9225 0.20958 128.76);
+  --sk-color-green-40: oklch(0.91064 0.23747 130.58);
+  --sk-color-green-50: oklch(0.90166 0.25274 132.6);
+  --sk-color-green-60: oklch(0.74848 0.20931 132.45);
+  --sk-color-green-70: oklch(0.5875 0.16293 131.94);
+  --sk-color-green-80: oklch(0.41386 0.11351 131.23);
+  --sk-color-green-90: oklch(0.21882 0.05766 128.55);
+  --sk-color-green-95: oklch(0.090804 0.02178 120.96);
+  /* Mint (Neon Mint) */
+  --sk-color-mint-05: oklch(0.94522 0.08079 167.41);
+  --sk-color-mint-10: oklch(0.93212 0.1023 166.81);
+  --sk-color-mint-20: oklch(0.91066 0.14034 164.86);
+  --sk-color-mint-30: oklch(0.89518 0.1712 162.35);
+  --sk-color-mint-40: oklch(0.8847 0.196 159.18);
+  --sk-color-mint-50: oklch(0.87914 0.21341 155.95);
+  --sk-color-mint-60: oklch(0.72955 0.17638 156.17);
+  --sk-color-mint-70: oklch(0.572 0.13634 156.94);
+  --sk-color-mint-80: oklch(0.40233 0.09409 158.01);
+  --sk-color-mint-90: oklch(0.21153 0.04625 162.21);
+  --sk-color-mint-95: oklch(0.086528 0.01632 174.96);
+  /* Cyan (Light Blue) */
+  --sk-color-cyan-05: oklch(1 0 0);
+  --sk-color-cyan-10: oklch(1 0 0);
+  --sk-color-cyan-20: oklch(0.97368 0.01417 238);
+  --sk-color-cyan-30: oklch(0.91382 0.04761 237.65);
+  --sk-color-cyan-40: oklch(0.85562 0.08132 237.91);
+  --sk-color-cyan-50: oklch(0.80074 0.11332 239.03);
+  --sk-color-cyan-60: oklch(0.73288 0.15153 242.21);
+  --sk-color-cyan-70: oklch(0.67594 0.18042 247.85);
+  --sk-color-cyan-80: oklch(0.56639 0.15334 248.24);
+  --sk-color-cyan-90: oklch(0.45127 0.1185 246.94);
+  --sk-color-cyan-95: oklch(0.38967 0.1007 246.23);
+  /* Purple (Neon Purple) */
+  --sk-color-purple-05: oklch(0.84325 0.10637 311.05);
+  --sk-color-purple-10: oklch(0.79938 0.13851 310.93);
+  --sk-color-purple-20: oklch(0.71847 0.1986 310.09);
+  --sk-color-purple-30: oklch(0.64936 0.2486 308.53);
+  --sk-color-purple-40: oklch(0.59393 0.28288 305.76);
+  --sk-color-purple-50: oklch(0.55971 0.29563 301.91);
+  --sk-color-purple-60: oklch(0.46537 0.2454 302.21);
+  --sk-color-purple-70: oklch(0.36734 0.19262 303.25);
+  --sk-color-purple-80: oklch(0.26069 0.1357 304.59);
+  --sk-color-purple-90: oklch(0.14139 0.07183 309.14);
+  --sk-color-purple-95: oklch(0.062066 0.02998 318.71);
+  /* Pink (Neon Pink) */
+  --sk-color-pink-05: oklch(0.86066 0.09736 343.07);
+  --sk-color-pink-10: oklch(0.82318 0.12748 343.61);
+  --sk-color-pink-20: oklch(0.75737 0.18391 345.31);
+  --sk-color-pink-30: oklch(0.70604 0.23013 347.6);
+  --sk-color-pink-40: oklch(0.67045 0.25987 350.82);
+  --sk-color-pink-50: oklch(0.65333 0.26843 354.75);
+  --sk-color-pink-60: oklch(0.54234 0.22302 354.46);
+  --sk-color-pink-70: oklch(0.4257 0.1756 353.44);
+  --sk-color-pink-80: oklch(0.29988 0.12422 352.11);
+  --sk-color-pink-90: oklch(0.15856 0.06674 347.6);
+  --sk-color-pink-95: oklch(0.065808 0.02885 338.03);
+  /* ===================================================================
+   * Opacity Scale
+   * Tokenized opacity values for consistent transparency
+   * =================================================================== */
+  --sk-opacity-transparent: 0;
+  --sk-opacity-subtle: 0.05;
+  --sk-opacity-faint: 0.10;
+  --sk-opacity-light: 0.15;
+  --sk-opacity-moderate: 0.20;
+  --sk-opacity-medium: 0.40;
+  --sk-opacity-strong: 0.60;
+  --sk-opacity-opaque: 1;
+  /* ===================================================================
+   * Color Mixing Percentages
+   * Tokenized mixing amounts for color-mix() function
+   * =================================================================== */
+  --sk-mix-amount-subtle: 5%;
+  --sk-mix-amount-light: 10%;
+  --sk-mix-amount-moderate: 15%;
+  --sk-mix-amount-strong: 20%;
+  --sk-mix-amount-intense: 30%;
+}
+
+/**
+ * Foundation Tokens - Space
+ *
+ * Spacing and sizing scale using t-shirt sizing.
+ * All values use rem units for proportional scaling with root font size.
+ */
+:root {
+  /* ===================================================================
+   * Space Scale
+   * =================================================================== */
+  /**
+   * Global space scale multiplier
+   * Adjust this value to increase/decrease all spacing at once
+   * Default: 1
+   */
+  --sk-space-scale: 1;
+  /* ===================================================================
+   * Space Tokens
+   * Values calculated with scale multiplier
+   * =================================================================== */
+  --sk-space-3xs: calc(var(--sk-space-scale) * 0.125rem); /* 2px */
+  --sk-space-2xs: calc(var(--sk-space-scale) * 0.25rem); /* 4px */
+  --sk-space-xs: calc(var(--sk-space-scale) * 0.5rem); /* 8px */
+  --sk-space-sm: calc(var(--sk-space-scale) * 0.75rem); /* 12px */
+  --sk-space-md: calc(var(--sk-space-scale) * 1rem); /* 16px */
+  --sk-space-lg: calc(var(--sk-space-scale) * 1.5rem); /* 24px */
+  --sk-space-xl: calc(var(--sk-space-scale) * 2rem); /* 32px */
+  --sk-space-2xl: calc(var(--sk-space-scale) * 2.5rem); /* 40px */
+  --sk-space-3xl: calc(var(--sk-space-scale) * 3rem); /* 48px */
+  --sk-space-4xl: calc(var(--sk-space-scale) * 4rem); /* 64px */
+}
+
+/**
+ * Foundation Tokens - Border Radius
+ *
+ * Border radius scale and factors for rounding corners.
+ */
+:root {
+  /* ===================================================================
+   * Radius Scale
+   * =================================================================== */
+  /**
+   * Global radius scale multiplier
+   * Adjust this value to increase/decrease all border radius at once
+   * Default: 1
+   */
+  --sk-radius-scale: 1;
+  /* ===================================================================
+   * Radius Tokens
+   * Values calculated with scale multiplier
+   * =================================================================== */
+  --sk-radius-none: 0;
+  --sk-radius-xs: calc(var(--sk-radius-scale) * 0.125rem); /* 2px */
+  --sk-radius-sm: calc(var(--sk-radius-scale) * 0.25rem); /* 4px */
+  --sk-radius-md: calc(var(--sk-radius-scale) * 0.5rem); /* 8px */
+  --sk-radius-lg: calc(var(--sk-radius-scale) * 0.75rem); /* 12px */
+  --sk-radius-xl: calc(var(--sk-radius-scale) * 1rem); /* 16px */
+  --sk-radius-2xl: calc(var(--sk-radius-scale) * 1.5rem); /* 24px */
+  --sk-radius-pill: 999px;
+  --sk-radius-circle: 50%;
+  /* ===================================================================
+   * Radius Factors
+   * Multipliers for radius calculations in components
+   * Example: border-radius: calc(var(--sk-radius-md) * var(--sk-radius-factor-emphasis));
+   * =================================================================== */
+  --sk-radius-factor-subtle: 0.5; /* Half radius */
+  --sk-radius-factor-normal: 1; /* Full radius */
+  --sk-radius-factor-emphasis: 1.5; /* 1.5x radius */
+  --sk-radius-factor-strong: 2; /* 2x radius */
+  /* ===================================================================
+   * Border Radius Factor (for cut corners)
+   * Used to calculate beveled corner sizes
+   * Example: Buttons: height / factor = cut size (40px / 4 = 10px)
+   * =================================================================== */
+  --sk-border-radius-factor: 4;
+}
+
+/**
+ * Foundation Tokens - Borders
+ *
+ * Border widths and styles for component outlines.
+ */
+:root {
+  /* ===================================================================
+   * Border Widths
+   * =================================================================== */
+  --sk-border-width-none: 0;
+  --sk-border-width-thin: 1px;
+  --sk-border-width-normal: 2px;
+  --sk-border-width-thick: 4px;
+  --sk-border-width-heavy: 6px;
+  /* ===================================================================
+   * Border Styles
+   * =================================================================== */
+  --sk-border-style-solid: solid;
+  --sk-border-style-dashed: dashed;
+  --sk-border-style-none: none;
+}
+
+/**
+ * Foundation Tokens - Shadows
+ *
+ * Elevation shadows for creating depth.
+ */
+:root {
+  /* ===================================================================
+   * Shadow Scale
+   * =================================================================== */
+  /**
+   * Global shadow scale multiplier
+   * Adjust this value to increase/decrease all shadow sizes at once
+   * Default: 1
+   */
+  --sk-shadow-scale: 1;
+  /* ===================================================================
+   * Shadow Color
+   * Base color used for all elevation shadows
+   * =================================================================== */
+  --sk-shadow-color: oklch(0 0 0 / var(--sk-opacity-moderate));
+  /* ===================================================================
+   * Shadow Tokens
+   * Elevation shadows for creating depth
+   * =================================================================== */
+  --sk-shadow-xs: 0 1px 2px var(--sk-shadow-color);
+  --sk-shadow-sm: 0 2px 4px var(--sk-shadow-color);
+  --sk-shadow-md: 0 4px 8px var(--sk-shadow-color);
+  --sk-shadow-lg: 0 8px 16px var(--sk-shadow-color);
+  --sk-shadow-xl: 0 16px 32px var(--sk-shadow-color);
+}
+
+/**
+ * Foundation Tokens - Glow
+ *
+ * Glow effects for neon/highlighted components.
+ * This is a SleekSpace-specific feature for the neon aesthetic.
+ */
+:root {
+  /* ===================================================================
+   * Glow Intensity
+   * Opacity values for glow effects
+   * =================================================================== */
+  --sk-glow-intensity-subtle: 0.3;
+  --sk-glow-intensity-moderate: 0.5;
+  --sk-glow-intensity-strong: 0.7;
+  /* ===================================================================
+   * Glow Blur Radius
+   * How far the glow extends (blur radius in box-shadow)
+   * =================================================================== */
+  --sk-glow-blur-sm: 8px;
+  --sk-glow-blur-md: 12px;
+  --sk-glow-blur-lg: 20px;
+  /* ===================================================================
+   * Glow Spread
+   * How much the glow expands before blurring (spread in box-shadow)
+   * =================================================================== */
+  --sk-glow-spread-sm: 2px;
+  --sk-glow-spread-md: 4px;
+  --sk-glow-spread-lg: 8px;
+}
+
+/**
+ * Foundation Tokens - Transitions
+ *
+ * Animation timing and easing for smooth interactions.
+ */
+:root {
+  /* ===================================================================
+   * Transition Durations
+   * =================================================================== */
+  --sk-transition-duration-instant: 0ms;
+  --sk-transition-duration-fast: 150ms;
+  --sk-transition-duration-normal: 250ms;
+  --sk-transition-duration-slow: 350ms;
+  --sk-transition-duration-slower: 500ms;
+  /* ===================================================================
+   * Transition Easing
+   * =================================================================== */
+  --sk-transition-easing-linear: linear;
+  --sk-transition-easing-ease: ease;
+  --sk-transition-easing-ease-in: ease-in;
+  --sk-transition-easing-ease-out: ease-out;
+  --sk-transition-easing-ease-in-out: ease-in-out;
+  /* ===================================================================
+   * Common Transition Combinations
+   * Convenience tokens for frequently used transitions
+   * =================================================================== */
+  --sk-transition-fast: all var(--sk-transition-duration-fast) var(--sk-transition-easing-ease-out);
+  --sk-transition-normal: all var(--sk-transition-duration-normal) var(--sk-transition-easing-ease-out);
+  --sk-transition-slow: all var(--sk-transition-duration-slow) var(--sk-transition-easing-ease-out);
+}
+
+/**
+ * Foundation Tokens - Typography
+ *
+ * Font families, sizes, weights, and line heights.
+ */
+:root {
+  /* ===================================================================
+   * Font Families
+   * =================================================================== */
+  --sk-font-family-base: "Titillium Web", ui-sans-serif, system-ui, sans-serif;
+  --sk-font-family-mono: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Consolas", monospace;
+  /* ===================================================================
+   * Font Size Scale
+   * =================================================================== */
+  /**
+   * Global font size scale multiplier
+   * Adjust this value to increase/decrease all font sizes at once
+   * Default: 1
+   */
+  --sk-font-size-scale: 1;
+  /* ===================================================================
+   * Font Sizes
+   * Values calculated with scale multiplier
+   * =================================================================== */
+  --sk-font-size-2xs: calc(var(--sk-font-size-scale) * 0.625rem); /* 10px */
+  --sk-font-size-xs: calc(var(--sk-font-size-scale) * 0.75rem); /* 12px */
+  --sk-font-size-sm: calc(var(--sk-font-size-scale) * 0.875rem); /* 14px */
+  --sk-font-size-md: calc(var(--sk-font-size-scale) * 1rem); /* 16px */
+  --sk-font-size-lg: calc(var(--sk-font-size-scale) * 1.125rem); /* 18px */
+  --sk-font-size-xl: calc(var(--sk-font-size-scale) * 1.25rem); /* 20px */
+  --sk-font-size-2xl: calc(var(--sk-font-size-scale) * 1.5rem); /* 24px */
+  --sk-font-size-3xl: calc(var(--sk-font-size-scale) * 1.875rem); /* 30px */
+  --sk-font-size-4xl: calc(var(--sk-font-size-scale) * 2.25rem); /* 36px */
+  /* ===================================================================
+   * Font Weights
+   * =================================================================== */
+  --sk-font-weight-normal: 400;
+  --sk-font-weight-medium: 500;
+  --sk-font-weight-semibold: 600;
+  --sk-font-weight-bold: 700;
+  /* ===================================================================
+   * Line Heights
+   * =================================================================== */
+  --sk-line-height-tight: 1.2;
+  --sk-line-height-normal: 1.5;
+  --sk-line-height-relaxed: 1.75;
+}
+
+/**
+ * Foundation Scrollbar Tokens
+ *
+ * Defines the basic scrollbar dimensions and structural properties.
+ * These values remain consistent across all themes.
+ *
+ * @see DESIGN_TOKENS_PROPOSAL.md for complete documentation
+ */
+:root {
+  /* Scrollbar Width
+   * Standard scrollbar width for vertical scrollbars
+   */
+  --sk-scrollbar-width: 12px;
+  /* Scrollbar Height
+   * Standard scrollbar height for horizontal scrollbars
+   */
+  --sk-scrollbar-height: 12px;
+  /* Scrollbar Border Radius
+   * Rounded corners for the scrollbar thumb
+   */
+  --sk-scrollbar-border-radius: 6px;
+  /* Scrollbar Thumb Min Size
+   * Minimum size for the draggable thumb to ensure usability
+   */
+  --sk-scrollbar-thumb-min-size: 40px;
+}
+
+/* ===================================================================
+ * Semantic Tokens
+ * Contextual meanings that reference foundation tokens
+ * =================================================================== */
+/**
+ * Semantic Tokens - Colors
+ *
+ * Kind-based color semantics that define the color roles used throughout components.
+ * These tokens reference foundation colors and derive hover/active states.
+ *
+ * Theme definitions are in the themes/ directory.
+ */
+/**
+ * Themes Index
+ *
+ * All theme definitions for the SleekSpace UI design system.
+ * Each theme defines semantic color mappings for the 7 kinds.
+ */
+/**
+ * Greyscale Theme
+ *
+ * Reference theme with gray neutral colors and blue primary.
+ * This is the default, more subdued theme.
+ */
+[data-scheme=greyscale] {
+  /* Neutral Kind */
+  --sk-neutral-base: var(--sk-color-gray-50);
+  --sk-neutral-hover: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neutral-active: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neutral-text: oklch(1 0 0);
+  --sk-neutral-text-contrast: var(--sk-color-gray-95);
+  /* Primary Kind */
+  --sk-primary-base: var(--sk-color-blue-50);
+  --sk-primary-hover: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-primary-active: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-primary-text: oklch(1 0 0);
+  --sk-primary-text-contrast: var(--sk-color-gray-95);
+  /* Accent Kind */
+  --sk-accent-base: var(--sk-color-orange-50);
+  --sk-accent-hover: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-accent-active: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-accent-text: oklch(1 0 0);
+  --sk-accent-text-contrast: var(--sk-color-gray-95);
+  /* Success Kind */
+  --sk-success-base: var(--sk-color-green-50);
+  --sk-success-hover: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-success-active: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-success-text: oklch(1 0 0);
+  --sk-success-text-contrast: var(--sk-color-gray-95);
+  /* Warning Kind */
+  --sk-warning-base: var(--sk-color-yellow-50);
+  --sk-warning-hover: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-warning-active: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-warning-text: oklch(1 0 0);
+  --sk-warning-text-contrast: var(--sk-color-gray-95);
+  /* Danger Kind */
+  --sk-danger-base: var(--sk-color-red-50);
+  --sk-danger-hover: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-danger-active: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-danger-text: oklch(1 0 0);
+  --sk-danger-text-contrast: var(--sk-color-gray-95);
+  /* Info Kind */
+  --sk-info-base: var(--sk-color-cyan-50);
+  --sk-info-hover: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-info-active: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-info-text: oklch(1 0 0);
+  --sk-info-text-contrast: var(--sk-color-gray-95);
+}
+
+/**
+ * Colorful Theme
+ *
+ * Vibrant theme with blue neutral colors and orange primary.
+ * This swaps the primary/neutral colors from greyscale for a bolder look.
+ */
+[data-scheme=colorful] {
+  /* Neutral Kind */
+  --sk-neutral-base: var(--sk-color-blue-70);
+  --sk-neutral-hover: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neutral-active: color-mix(in oklch, var(--sk-neutral-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neutral-text: oklch(1 0 0);
+  --sk-neutral-text-contrast: var(--sk-color-gray-95);
+  /* Primary Kind */
+  --sk-primary-base: var(--sk-color-orange-50);
+  --sk-primary-hover: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-primary-active: color-mix(in oklch, var(--sk-primary-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-primary-text: oklch(1 0 0);
+  --sk-primary-text-contrast: var(--sk-color-gray-95);
+  /* Accent Kind */
+  --sk-accent-base: var(--sk-color-blue-50);
+  --sk-accent-hover: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-accent-active: color-mix(in oklch, var(--sk-accent-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-accent-text: oklch(1 0 0);
+  --sk-accent-text-contrast: var(--sk-color-gray-95);
+  /* Success Kind */
+  --sk-success-base: var(--sk-color-green-50);
+  --sk-success-hover: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-success-active: color-mix(in oklch, var(--sk-success-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-success-text: oklch(1 0 0);
+  --sk-success-text-contrast: var(--sk-color-gray-95);
+  /* Warning Kind */
+  --sk-warning-base: var(--sk-color-yellow-50);
+  --sk-warning-hover: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-warning-active: color-mix(in oklch, var(--sk-warning-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-warning-text: oklch(1 0 0);
+  --sk-warning-text-contrast: var(--sk-color-gray-95);
+  /* Danger Kind */
+  --sk-danger-base: var(--sk-color-red-50);
+  --sk-danger-hover: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-danger-active: color-mix(in oklch, var(--sk-danger-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-danger-text: oklch(1 0 0);
+  --sk-danger-text-contrast: var(--sk-color-gray-95);
+  /* Info Kind */
+  --sk-info-base: var(--sk-color-cyan-50);
+  --sk-info-hover: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-info-active: color-mix(in oklch, var(--sk-info-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-info-text: oklch(1 0 0);
+  --sk-info-text-contrast: var(--sk-color-gray-95);
+}
+
+/**
+ * Semantic Tokens - Color Kinds
+ *
+ * Direct palette access for non-themeable colors.
+ * These provide access to specific colors regardless of theme.
+ *
+ * Unlike semantic kinds (neutral, primary, accent, etc.) which change with themes,
+ * color kinds always reference the same foundation color.
+ */
+:root {
+  /* ===================================================================
+   * Boulder (Gray)
+   * =================================================================== */
+  --sk-boulder-base: var(--sk-color-gray-50);
+  --sk-boulder-hover: color-mix(in oklch, var(--sk-boulder-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-boulder-active: color-mix(in oklch, var(--sk-boulder-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-boulder-text: oklch(1 0 0);
+  --sk-boulder-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Neon Blue
+   * =================================================================== */
+  --sk-neon-blue-base: var(--sk-color-blue-50);
+  --sk-neon-blue-hover: color-mix(in oklch, var(--sk-neon-blue-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neon-blue-active: color-mix(in oklch, var(--sk-neon-blue-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neon-blue-text: oklch(1 0 0);
+  --sk-neon-blue-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Light Blue (Cyan)
+   * =================================================================== */
+  --sk-light-blue-base: var(--sk-color-cyan-50);
+  --sk-light-blue-hover: color-mix(in oklch, var(--sk-light-blue-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-light-blue-active: color-mix(in oklch, var(--sk-light-blue-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-light-blue-text: oklch(1 0 0);
+  --sk-light-blue-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Neon Orange
+   * =================================================================== */
+  --sk-neon-orange-base: var(--sk-color-orange-50);
+  --sk-neon-orange-hover: color-mix(in oklch, var(--sk-neon-orange-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neon-orange-active: color-mix(in oklch, var(--sk-neon-orange-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neon-orange-text: oklch(1 0 0);
+  --sk-neon-orange-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Neon Purple
+   * =================================================================== */
+  --sk-neon-purple-base: var(--sk-color-purple-50);
+  --sk-neon-purple-hover: color-mix(in oklch, var(--sk-neon-purple-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neon-purple-active: color-mix(in oklch, var(--sk-neon-purple-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neon-purple-text: oklch(1 0 0);
+  --sk-neon-purple-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Neon Green
+   * =================================================================== */
+  --sk-neon-green-base: var(--sk-color-green-50);
+  --sk-neon-green-hover: color-mix(in oklch, var(--sk-neon-green-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neon-green-active: color-mix(in oklch, var(--sk-neon-green-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neon-green-text: oklch(1 0 0);
+  --sk-neon-green-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Neon Mint
+   * =================================================================== */
+  --sk-neon-mint-base: var(--sk-color-mint-50);
+  --sk-neon-mint-hover: color-mix(in oklch, var(--sk-neon-mint-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neon-mint-active: color-mix(in oklch, var(--sk-neon-mint-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neon-mint-text: oklch(1 0 0);
+  --sk-neon-mint-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Neon Pink
+   * =================================================================== */
+  --sk-neon-pink-base: var(--sk-color-pink-50);
+  --sk-neon-pink-hover: color-mix(in oklch, var(--sk-neon-pink-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-neon-pink-active: color-mix(in oklch, var(--sk-neon-pink-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-neon-pink-text: oklch(1 0 0);
+  --sk-neon-pink-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Yellow
+   * =================================================================== */
+  --sk-yellow-base: var(--sk-color-yellow-50);
+  --sk-yellow-hover: color-mix(in oklch, var(--sk-yellow-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-yellow-active: color-mix(in oklch, var(--sk-yellow-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-yellow-text: oklch(1 0 0);
+  --sk-yellow-text-contrast: var(--sk-color-gray-95);
+  /* ===================================================================
+   * Red
+   * =================================================================== */
+  --sk-red-base: var(--sk-color-red-50);
+  --sk-red-hover: color-mix(in oklch, var(--sk-red-base), var(--sk-color-gray-10) var(--sk-mix-amount-moderate));
+  --sk-red-active: color-mix(in oklch, var(--sk-red-base), var(--sk-color-gray-10) var(--sk-mix-amount-strong));
+  --sk-red-text: oklch(1 0 0);
+  --sk-red-text-contrast: var(--sk-color-gray-95);
+}
+
+/**
+ * Semantic Tokens - Surfaces
+ *
+ * Background and text colors for surfaces and general use.
+ * These provide a consistent color system independent of component kinds.
+ */
+:root {
+  /* ===================================================================
+   * Background Colors
+   * For page backgrounds, card surfaces, etc.
+   * =================================================================== */
+  --sk-surface-base: var(--sk-color-gray-90); /* Main background */
+  --sk-surface-raised: var(--sk-color-gray-95); /* Elevated surfaces (cards, panels) */
+  --sk-surface-overlay: var(--sk-color-gray-80); /* Overlays (modals, dropdowns) */
+  /* ===================================================================
+   * Text Colors
+   * For body text, secondary text, disabled text, etc.
+   * =================================================================== */
+  --sk-text-primary: oklch(1 0 0); /* Primary body text */
+  --sk-text-secondary: var(--sk-color-gray-30); /* Secondary/muted text */
+  --sk-text-tertiary: var(--sk-color-gray-50); /* Tertiary/placeholder text */
+  --sk-text-disabled: var(--sk-color-gray-60); /* Disabled text */
+  /* ===================================================================
+   * Border Colors
+   * For borders, dividers, etc.
+   * =================================================================== */
+  --sk-border-normal: var(--sk-color-gray-70); /* Standard borders */
+  --sk-border-subtle: var(--sk-color-gray-80); /* Subtle borders/dividers */
+}
+
+/**
+ * Semantic Tokens - Interactive
+ *
+ * Focus rings, selection states, and other interactive feedback.
+ */
+:root {
+  /* ===================================================================
+   * Focus Ring
+   * Visual indicator when an element has keyboard focus
+   * =================================================================== */
+  --sk-focus-ring-color: var(--sk-primary-base);
+  --sk-focus-ring-width: var(--sk-border-width-normal);
+  --sk-focus-ring-offset: 2px;
+  --sk-focus-ring-style: var(--sk-border-style-solid);
+  /* Complete focus ring shorthand */
+  --sk-focus-ring: var(--sk-focus-ring-width) var(--sk-focus-ring-style) var(--sk-focus-ring-color);
+  /* ===================================================================
+   * Selection
+   * Text selection colors
+   * =================================================================== */
+  --sk-selection-background: var(--sk-primary-base);
+  --sk-selection-text: var(--sk-primary-text);
+}
+
+/**
+ * Semantic Scrollbar Tokens
+ *
+ * Defines scrollbar colors that adapt to the current theme.
+ * Uses the semantic color system for consistent theming.
+ *
+ * Defined within [data-scheme] selector so they can access
+ * theme-specific semantic color variables.
+ *
+ * @see DESIGN_TOKENS_PROPOSAL.md for complete documentation
+ */
+[data-scheme] {
+  /* Scrollbar Track
+   * Background color of the scrollbar track
+   * Uses a slightly lighter/darker version of the surface color
+   */
+  --sk-scrollbar-track: transparent;
+  /* Scrollbar Thumb Base
+   * Default color of the draggable scrollbar thumb
+   * Uses neutral semantic color for consistency
+   */
+  --sk-scrollbar-thumb: var(--sk-neutral-base);
+  /* Scrollbar Thumb Hover
+   * Color when hovering over the thumb
+   * Provides visual feedback for interactivity
+   */
+  --sk-scrollbar-thumb-hover: var(--sk-neutral-hover);
+  /* Scrollbar Thumb Active
+   * Color when actively dragging the thumb
+   * Provides strong visual feedback during interaction
+   */
+  --sk-scrollbar-thumb-active: var(--sk-neutral-active);
+  /* Scrollbar Thumb Border
+   * Optional border around the thumb for definition
+   * Uses a darker shade for contrast
+   */
+  --sk-scrollbar-thumb-border: color-mix(
+      in oklch,
+      var(--sk-scrollbar-thumb),
+      var(--sk-color-gray-95) 20%
+  );
+}
+
+@theme inline {
+  /* Semantic Colors (theme-aware - change based on SkTheme) */
+  /* Each semantic color gets a full shade range using oklch lightness modifications */
+  /* Neutral */
+  --color-sk-neutral: var(--sk-neutral-base);
+  --color-sk-neutral-text: var(--sk-neutral-text);
+  --color-sk-neutral-5: oklch(from var(--sk-neutral-base) 0.95 c h);
+  --color-sk-neutral-10: oklch(from var(--sk-neutral-base) 0.90 c h);
+  --color-sk-neutral-20: oklch(from var(--sk-neutral-base) 0.85 c h);
+  --color-sk-neutral-30: oklch(from var(--sk-neutral-base) 0.80 c h);
+  --color-sk-neutral-40: oklch(from var(--sk-neutral-base) 0.75 c h);
+  --color-sk-neutral-50: var(--sk-neutral-base);
+  --color-sk-neutral-60: oklch(from var(--sk-neutral-base) calc(l * 0.85) c h);
+  --color-sk-neutral-70: oklch(from var(--sk-neutral-base) calc(l * 0.70) c h);
+  --color-sk-neutral-80: oklch(from var(--sk-neutral-base) calc(l * 0.55) c h);
+  --color-sk-neutral-90: oklch(from var(--sk-neutral-base) calc(l * 0.40) c h);
+  --color-sk-neutral-95: oklch(from var(--sk-neutral-base) calc(l * 0.25) c h);
+  /* Primary */
+  --color-sk-primary: var(--sk-primary-base);
+  --color-sk-primary-text: var(--sk-primary-text);
+  --color-sk-primary-5: oklch(from var(--sk-primary-base) 0.95 c h);
+  --color-sk-primary-10: oklch(from var(--sk-primary-base) 0.90 c h);
+  --color-sk-primary-20: oklch(from var(--sk-primary-base) 0.85 c h);
+  --color-sk-primary-30: oklch(from var(--sk-primary-base) 0.80 c h);
+  --color-sk-primary-40: oklch(from var(--sk-primary-base) 0.75 c h);
+  --color-sk-primary-50: var(--sk-primary-base);
+  --color-sk-primary-60: oklch(from var(--sk-primary-base) calc(l * 0.85) c h);
+  --color-sk-primary-70: oklch(from var(--sk-primary-base) calc(l * 0.70) c h);
+  --color-sk-primary-80: oklch(from var(--sk-primary-base) calc(l * 0.55) c h);
+  --color-sk-primary-90: oklch(from var(--sk-primary-base) calc(l * 0.40) c h);
+  --color-sk-primary-95: oklch(from var(--sk-primary-base) calc(l * 0.25) c h);
+  /* Accent */
+  --color-sk-accent: var(--sk-accent-base);
+  --color-sk-accent-text: var(--sk-accent-text);
+  --color-sk-accent-5: oklch(from var(--sk-accent-base) 0.95 c h);
+  --color-sk-accent-10: oklch(from var(--sk-accent-base) 0.90 c h);
+  --color-sk-accent-20: oklch(from var(--sk-accent-base) 0.85 c h);
+  --color-sk-accent-30: oklch(from var(--sk-accent-base) 0.80 c h);
+  --color-sk-accent-40: oklch(from var(--sk-accent-base) 0.75 c h);
+  --color-sk-accent-50: var(--sk-accent-base);
+  --color-sk-accent-60: oklch(from var(--sk-accent-base) calc(l * 0.85) c h);
+  --color-sk-accent-70: oklch(from var(--sk-accent-base) calc(l * 0.70) c h);
+  --color-sk-accent-80: oklch(from var(--sk-accent-base) calc(l * 0.55) c h);
+  --color-sk-accent-90: oklch(from var(--sk-accent-base) calc(l * 0.40) c h);
+  --color-sk-accent-95: oklch(from var(--sk-accent-base) calc(l * 0.25) c h);
+  /* Info */
+  --color-sk-info: var(--sk-info-base);
+  --color-sk-info-text: var(--sk-info-text);
+  --color-sk-info-5: oklch(from var(--sk-info-base) 0.95 c h);
+  --color-sk-info-10: oklch(from var(--sk-info-base) 0.90 c h);
+  --color-sk-info-20: oklch(from var(--sk-info-base) 0.85 c h);
+  --color-sk-info-30: oklch(from var(--sk-info-base) 0.80 c h);
+  --color-sk-info-40: oklch(from var(--sk-info-base) 0.75 c h);
+  --color-sk-info-50: var(--sk-info-base);
+  --color-sk-info-60: oklch(from var(--sk-info-base) calc(l * 0.85) c h);
+  --color-sk-info-70: oklch(from var(--sk-info-base) calc(l * 0.70) c h);
+  --color-sk-info-80: oklch(from var(--sk-info-base) calc(l * 0.55) c h);
+  --color-sk-info-90: oklch(from var(--sk-info-base) calc(l * 0.40) c h);
+  --color-sk-info-95: oklch(from var(--sk-info-base) calc(l * 0.25) c h);
+  /* Success */
+  --color-sk-success: var(--sk-success-base);
+  --color-sk-success-text: var(--sk-success-text);
+  --color-sk-success-5: oklch(from var(--sk-success-base) 0.95 c h);
+  --color-sk-success-10: oklch(from var(--sk-success-base) 0.90 c h);
+  --color-sk-success-20: oklch(from var(--sk-success-base) 0.85 c h);
+  --color-sk-success-30: oklch(from var(--sk-success-base) 0.80 c h);
+  --color-sk-success-40: oklch(from var(--sk-success-base) 0.75 c h);
+  --color-sk-success-50: var(--sk-success-base);
+  --color-sk-success-60: oklch(from var(--sk-success-base) calc(l * 0.85) c h);
+  --color-sk-success-70: oklch(from var(--sk-success-base) calc(l * 0.70) c h);
+  --color-sk-success-80: oklch(from var(--sk-success-base) calc(l * 0.55) c h);
+  --color-sk-success-90: oklch(from var(--sk-success-base) calc(l * 0.40) c h);
+  --color-sk-success-95: oklch(from var(--sk-success-base) calc(l * 0.25) c h);
+  /* Warning */
+  --color-sk-warning: var(--sk-warning-base);
+  --color-sk-warning-text: var(--sk-warning-text);
+  --color-sk-warning-5: oklch(from var(--sk-warning-base) 0.95 c h);
+  --color-sk-warning-10: oklch(from var(--sk-warning-base) 0.90 c h);
+  --color-sk-warning-20: oklch(from var(--sk-warning-base) 0.85 c h);
+  --color-sk-warning-30: oklch(from var(--sk-warning-base) 0.80 c h);
+  --color-sk-warning-40: oklch(from var(--sk-warning-base) 0.75 c h);
+  --color-sk-warning-50: var(--sk-warning-base);
+  --color-sk-warning-60: oklch(from var(--sk-warning-base) calc(l * 0.85) c h);
+  --color-sk-warning-70: oklch(from var(--sk-warning-base) calc(l * 0.70) c h);
+  --color-sk-warning-80: oklch(from var(--sk-warning-base) calc(l * 0.55) c h);
+  --color-sk-warning-90: oklch(from var(--sk-warning-base) calc(l * 0.40) c h);
+  --color-sk-warning-95: oklch(from var(--sk-warning-base) calc(l * 0.25) c h);
+  /* Danger */
+  --color-sk-danger: var(--sk-danger-base);
+  --color-sk-danger-text: var(--sk-danger-text);
+  --color-sk-danger-5: oklch(from var(--sk-danger-base) 0.95 c h);
+  --color-sk-danger-10: oklch(from var(--sk-danger-base) 0.90 c h);
+  --color-sk-danger-20: oklch(from var(--sk-danger-base) 0.85 c h);
+  --color-sk-danger-30: oklch(from var(--sk-danger-base) 0.80 c h);
+  --color-sk-danger-40: oklch(from var(--sk-danger-base) 0.75 c h);
+  --color-sk-danger-50: var(--sk-danger-base);
+  --color-sk-danger-60: oklch(from var(--sk-danger-base) calc(l * 0.85) c h);
+  --color-sk-danger-70: oklch(from var(--sk-danger-base) calc(l * 0.70) c h);
+  --color-sk-danger-80: oklch(from var(--sk-danger-base) calc(l * 0.55) c h);
+  --color-sk-danger-90: oklch(from var(--sk-danger-base) calc(l * 0.40) c h);
+  --color-sk-danger-95: oklch(from var(--sk-danger-base) calc(l * 0.25) c h);
+  /* Color Palette - Gray */
+  --color-sk-gray-5: var(--sk-color-gray-05);
+  --color-sk-gray-10: var(--sk-color-gray-10);
+  --color-sk-gray-20: var(--sk-color-gray-20);
+  --color-sk-gray-30: var(--sk-color-gray-30);
+  --color-sk-gray-40: var(--sk-color-gray-40);
+  --color-sk-gray-50: var(--sk-color-gray-50);
+  --color-sk-gray-60: var(--sk-color-gray-60);
+  --color-sk-gray-70: var(--sk-color-gray-70);
+  --color-sk-gray-80: var(--sk-color-gray-80);
+  --color-sk-gray-90: var(--sk-color-gray-90);
+  --color-sk-gray-95: var(--sk-color-gray-95);
+  /* Color Palette - Blue */
+  --color-sk-blue-5: var(--sk-color-blue-05);
+  --color-sk-blue-10: var(--sk-color-blue-10);
+  --color-sk-blue-20: var(--sk-color-blue-20);
+  --color-sk-blue-30: var(--sk-color-blue-30);
+  --color-sk-blue-40: var(--sk-color-blue-40);
+  --color-sk-blue-50: var(--sk-color-blue-50);
+  --color-sk-blue-60: var(--sk-color-blue-60);
+  --color-sk-blue-70: var(--sk-color-blue-70);
+  --color-sk-blue-80: var(--sk-color-blue-80);
+  --color-sk-blue-90: var(--sk-color-blue-90);
+  --color-sk-blue-95: var(--sk-color-blue-95);
+  /* Color Palette - Red */
+  --color-sk-red-5: var(--sk-color-red-05);
+  --color-sk-red-10: var(--sk-color-red-10);
+  --color-sk-red-20: var(--sk-color-red-20);
+  --color-sk-red-30: var(--sk-color-red-30);
+  --color-sk-red-40: var(--sk-color-red-40);
+  --color-sk-red-50: var(--sk-color-red-50);
+  --color-sk-red-60: var(--sk-color-red-60);
+  --color-sk-red-70: var(--sk-color-red-70);
+  --color-sk-red-80: var(--sk-color-red-80);
+  --color-sk-red-90: var(--sk-color-red-90);
+  --color-sk-red-95: var(--sk-color-red-95);
+  /* Color Palette - Orange */
+  --color-sk-orange-5: var(--sk-color-orange-05);
+  --color-sk-orange-10: var(--sk-color-orange-10);
+  --color-sk-orange-20: var(--sk-color-orange-20);
+  --color-sk-orange-30: var(--sk-color-orange-30);
+  --color-sk-orange-40: var(--sk-color-orange-40);
+  --color-sk-orange-50: var(--sk-color-orange-50);
+  --color-sk-orange-60: var(--sk-color-orange-60);
+  --color-sk-orange-70: var(--sk-color-orange-70);
+  --color-sk-orange-80: var(--sk-color-orange-80);
+  --color-sk-orange-90: var(--sk-color-orange-90);
+  --color-sk-orange-95: var(--sk-color-orange-95);
+  /* Color Palette - Yellow */
+  --color-sk-yellow-5: var(--sk-color-yellow-05);
+  --color-sk-yellow-10: var(--sk-color-yellow-10);
+  --color-sk-yellow-20: var(--sk-color-yellow-20);
+  --color-sk-yellow-30: var(--sk-color-yellow-30);
+  --color-sk-yellow-40: var(--sk-color-yellow-40);
+  --color-sk-yellow-50: var(--sk-color-yellow-50);
+  --color-sk-yellow-60: var(--sk-color-yellow-60);
+  --color-sk-yellow-70: var(--sk-color-yellow-70);
+  --color-sk-yellow-80: var(--sk-color-yellow-80);
+  --color-sk-yellow-90: var(--sk-color-yellow-90);
+  --color-sk-yellow-95: var(--sk-color-yellow-95);
+  /* Color Palette - Green */
+  --color-sk-green-5: var(--sk-color-green-05);
+  --color-sk-green-10: var(--sk-color-green-10);
+  --color-sk-green-20: var(--sk-color-green-20);
+  --color-sk-green-30: var(--sk-color-green-30);
+  --color-sk-green-40: var(--sk-color-green-40);
+  --color-sk-green-50: var(--sk-color-green-50);
+  --color-sk-green-60: var(--sk-color-green-60);
+  --color-sk-green-70: var(--sk-color-green-70);
+  --color-sk-green-80: var(--sk-color-green-80);
+  --color-sk-green-90: var(--sk-color-green-90);
+  --color-sk-green-95: var(--sk-color-green-95);
+  /* Color Palette - Mint */
+  --color-sk-mint-5: var(--sk-color-mint-05);
+  --color-sk-mint-10: var(--sk-color-mint-10);
+  --color-sk-mint-20: var(--sk-color-mint-20);
+  --color-sk-mint-30: var(--sk-color-mint-30);
+  --color-sk-mint-40: var(--sk-color-mint-40);
+  --color-sk-mint-50: var(--sk-color-mint-50);
+  --color-sk-mint-60: var(--sk-color-mint-60);
+  --color-sk-mint-70: var(--sk-color-mint-70);
+  --color-sk-mint-80: var(--sk-color-mint-80);
+  --color-sk-mint-90: var(--sk-color-mint-90);
+  --color-sk-mint-95: var(--sk-color-mint-95);
+  /* Color Palette - Cyan */
+  --color-sk-cyan-5: var(--sk-color-cyan-05);
+  --color-sk-cyan-10: var(--sk-color-cyan-10);
+  --color-sk-cyan-20: var(--sk-color-cyan-20);
+  --color-sk-cyan-30: var(--sk-color-cyan-30);
+  --color-sk-cyan-40: var(--sk-color-cyan-40);
+  --color-sk-cyan-50: var(--sk-color-cyan-50);
+  --color-sk-cyan-60: var(--sk-color-cyan-60);
+  --color-sk-cyan-70: var(--sk-color-cyan-70);
+  --color-sk-cyan-80: var(--sk-color-cyan-80);
+  --color-sk-cyan-90: var(--sk-color-cyan-90);
+  --color-sk-cyan-95: var(--sk-color-cyan-95);
+  /* Color Palette - Purple */
+  --color-sk-purple-5: var(--sk-color-purple-05);
+  --color-sk-purple-10: var(--sk-color-purple-10);
+  --color-sk-purple-20: var(--sk-color-purple-20);
+  --color-sk-purple-30: var(--sk-color-purple-30);
+  --color-sk-purple-40: var(--sk-color-purple-40);
+  --color-sk-purple-50: var(--sk-color-purple-50);
+  --color-sk-purple-60: var(--sk-color-purple-60);
+  --color-sk-purple-70: var(--sk-color-purple-70);
+  --color-sk-purple-80: var(--sk-color-purple-80);
+  --color-sk-purple-90: var(--sk-color-purple-90);
+  --color-sk-purple-95: var(--sk-color-purple-95);
+  /* Color Palette - Pink */
+  --color-sk-pink-5: var(--sk-color-pink-05);
+  --color-sk-pink-10: var(--sk-color-pink-10);
+  --color-sk-pink-20: var(--sk-color-pink-20);
+  --color-sk-pink-30: var(--sk-color-pink-30);
+  --color-sk-pink-40: var(--sk-color-pink-40);
+  --color-sk-pink-50: var(--sk-color-pink-50);
+  --color-sk-pink-60: var(--sk-color-pink-60);
+  --color-sk-pink-70: var(--sk-color-pink-70);
+  --color-sk-pink-80: var(--sk-color-pink-80);
+  --color-sk-pink-90: var(--sk-color-pink-90);
+  --color-sk-pink-95: var(--sk-color-pink-95);
+}