@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/src/styles/tokens/_foundation-colors.scss

@@ -0,0 +1,169 @@
+/**
+ * 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%;
+}

package/src/styles/tokens/_foundation-glow.scss

@@ -0,0 +1,36 @@
+/**
+ * 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;
+}

package/src/styles/tokens/_foundation-radius.scss

@@ -0,0 +1,53 @@
+/**
+ * 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;
+}

package/src/styles/tokens/_foundation-scrollbar.scss

@@ -0,0 +1,31 @@
+/**
+ * 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;
+}

package/src/styles/tokens/_foundation-shadows.scss

@@ -0,0 +1,37 @@
+/**
+ * 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);
+}

package/src/styles/tokens/_foundation-space.scss

@@ -0,0 +1,36 @@
+/**
+ * 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 */
+}

package/src/styles/tokens/_foundation-transitions.scss

@@ -0,0 +1,37 @@
+/**
+ * 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);
+}

package/src/styles/tokens/_foundation-typography.scss

@@ -0,0 +1,58 @@
+/**
+ * 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;
+}

package/src/styles/tokens/_semantic-color-kinds.scss

@@ -0,0 +1,112 @@
+/**
+ * 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);
+}

package/src/styles/tokens/_semantic-colors.scss

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+@use '../themes';

package/src/styles/tokens/_semantic-interactive.scss

@@ -0,0 +1,29 @@
+/**
+ * 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);
+}

package/src/styles/tokens/_semantic-scrollbar.scss

@@ -0,0 +1,48 @@
+/**
+ * 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%
+    );
+}