@hellboy/ds 0.1.2 → 0.2.7

package/src/style/foundations/motion.css

@@ -1,164 +0,0 @@
-/**
- * Motion & Animation Tokens
- * Consistent timing, easing, and animation patterns
- */
-
-:root {
-  /* ===== DURATION TOKENS ===== */
-  /* Fast interactions (hover states, button feedback) */
-  --motion-duration-fast: 0.15s;
-  --motion-duration-base: 0.2s;
-  --motion-duration-slow: 0.3s;
-  --motion-duration-slower: 0.5s;
-
-  /* ===== EASING FUNCTIONS ===== */
-  /* Standard easing for most UI interactions */
-  --motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
-  /* Decelerating easing for elements entering the screen */
-  --motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
-  /* Accelerating easing for elements leaving the screen */
-  --motion-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
-  /* Sharp easing for emphasized interactions */
-  --motion-easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
-
-  /* ===== COMBINED TRANSITIONS ===== */
-  --motion-transition-fast: var(--motion-duration-fast) var(--motion-easing-standard);
-  --motion-transition-base: var(--motion-duration-base) var(--motion-easing-standard);
-  --motion-transition-slow: var(--motion-duration-slow) var(--motion-easing-standard);
-  --motion-transition-slower: var(--motion-duration-slower) var(--motion-easing-standard);
-
-  /* ===== SPECIFIC TRANSITIONS ===== */
-  /* Color transitions */
-  --motion-transition-color: color var(--motion-transition-base);
-  --motion-transition-background: background-color var(--motion-transition-base);
-
-  /* Transform transitions */
-  --motion-transition-transform: transform var(--motion-transition-base);
-  --motion-transition-scale: transform var(--motion-transition-fast);
-
-  /* Opacity transitions */
-  --motion-transition-opacity: opacity var(--motion-transition-base);
-  --motion-transition-fade-in: opacity var(--motion-duration-base) var(--motion-easing-decelerate);
-  --motion-transition-fade-out: opacity var(--motion-duration-base) var(--motion-easing-accelerate);
-
-  /* Border transitions */
-  --motion-transition-border: border-color var(--motion-transition-base);
-
-  /* Shadow transitions */
-  --motion-transition-shadow: box-shadow var(--motion-transition-base);
-
-  /* ===== HOVER STATE TRANSITIONS (No easing on entry, easing on exit) ===== */
-  /* Use these for hover/active states to show immediate response */
-  /* Entry (hover/active) is instant (linear), exit goes back with easing */
-  --motion-easing-linear: linear;
-  
-  /* Color transitions for hover states */
-  --motion-transition-color-hover-in: color var(--motion-duration-fast) var(--motion-easing-linear);
-  --motion-transition-color-hover-out: color var(--motion-duration-fast) var(--motion-easing-accelerate);
-  
-  /* Background transitions for hover states */
-  --motion-transition-background-hover-in: background-color var(--motion-duration-fast) var(--motion-easing-linear);
-  --motion-transition-background-hover-out: background-color var(--motion-duration-fast) var(--motion-easing-accelerate);
-  
-  /* Combined hover transitions */
-  --motion-transition-hover-in: color var(--motion-duration-fast) var(--motion-easing-linear), background-color var(--motion-duration-fast) var(--motion-easing-linear), box-shadow var(--motion-duration-fast) var(--motion-easing-linear), outline var(--motion-duration-fast) var(--motion-easing-accelerate);
-  --motion-transition-hover-out: color var(--motion-duration-fast) var(--motion-easing-accelerate), background-color var(--motion-duration-fast) var(--motion-easing-accelerate), box-shadow var(--motion-duration-fast) var(--motion-easing-accelerate), outline var(--motion-duration-fast) var(--motion-easing-accelerate);
-
-  /* ===== ANIMATION KEYFRAMES ===== */
-  /* Fade animations */
-  --motion-keyframes-fade-in: fadeIn 0.2s ease-out;
-  --motion-keyframes-fade-out: fadeOut 0.2s ease-in;
-
-  /* Slide animations */
-  --motion-keyframes-slide-in-right: slideInRight 0.3s ease-out;
-  --motion-keyframes-slide-out-right: slideOutRight 0.3s ease-in;
-  --motion-keyframes-slide-in-left: slideInLeft 0.3s ease-out;
-  --motion-keyframes-slide-out-left: slideOutLeft 0.3s ease-in;
-  --motion-keyframes-slide-in-top: slideInTop 0.3s ease-out;
-  --motion-keyframes-slide-out-top: slideOutTop 0.3s ease-in;
-  --motion-keyframes-slide-in-bottom: slideInBottom 0.3s ease-out;
-  --motion-keyframes-slide-out-bottom: slideOutBottom 0.3s ease-in;
-
-  /* Scale animations */
-  --motion-keyframes-scale-in: scaleIn 0.2s ease-out;
-  --motion-keyframes-scale-out: scaleOut 0.2s ease-in;
-}
-
-/* ===== KEYFRAME DEFINITIONS ===== */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-@keyframes slideInRight {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
-}
-
-@keyframes slideOutRight {
-  from { transform: translateX(0); }
-  to { transform: translateX(100%); }
-}
-
-@keyframes slideInLeft {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
-}
-
-@keyframes slideOutLeft {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
-}
-
-@keyframes slideInTop {
-  from { transform: translateY(-100%); }
-  to { transform: translateY(0); }
-}
-
-@keyframes slideOutTop {
-  from { transform: translateY(0); }
-  to { transform: translateY(-100%); }
-}
-
-@keyframes slideInBottom {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-
-@keyframes slideOutBottom {
-  from { transform: translateY(0); }
-  to { transform: translateY(100%); }
-}
-
-@keyframes scaleIn {
-  from { transform: scale(0.95); opacity: 0; }
-  to { transform: scale(1); opacity: 1; }
-}
-
-@keyframes scaleOut {
-  from { transform: scale(1); opacity: 1; }
-  to { transform: scale(0.95); opacity: 0; }
-}
-
-/* ===== MOTION PREFERENCES ===== */
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --motion-duration-fast: 0.01s;
-    --motion-duration-base: 0.01s;
-    --motion-duration-slow: 0.01s;
-    --motion-duration-slower: 0.01s;
-  }
-
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms ;
-    animation-iteration-count: 1 ;
-    transition-duration: 0.01ms ;
-  }
-}

package/src/style/foundations/spacing.css

@@ -1,51 +0,0 @@
-/**
- * Spacing Tokens
- * Spacing scale, border radius, and transitions
- */
-
-:root {
-  /* ===== SPACING SCALE ===== */
-  --spacing-0: 0px;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-7: 28px;
-  --spacing-8: 32px;
-  --spacing-9: 36px;
-  --spacing-10: 40px;
-  --spacing-11: 44px;
-  --spacing-12: 48px;
-  --spacing-14: 56px;
-  --spacing-16: 64px;
-  --spacing-20: 80px;
-  --spacing-24: 96px;
-  --spacing-28: 112px;
-  --spacing-32: 128px;
-  --spacing-36: 144px;
-  --spacing-40: 160px;
-  --spacing-44: 176px;
-  --spacing-48: 192px;
-  --spacing-52: 208px;
-  --spacing-56: 224px;
-  --spacing-60: 240px;
-  --spacing-64: 256px;
-  --spacing-72: 288px;
-  --spacing-80: 320px;
-  --spacing-96: 384px;
-
-  /* ===== BORDER RADIUS ===== */
-  --radius-sm: 4px;
-  --radius-base: 6px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-full: 9999px;
-
-  /* ===== TRANSITIONS ===== */
-  --transition-fast: 0.15s ease-in-out;
-  --transition-base: 0.2s ease-in-out;
-  --transition-slow: 0.3s ease-in-out;
-}

package/src/style/foundations/typography.css

@@ -1,39 +0,0 @@
-/**
- * Typography Tokens
- * Font families, sizes, weights, line heights, and letter spacing
- */
-
-:root {
-  /* ===== FONT FAMILIES ===== */
-  --font-family-base: 'Rubik', sans-serif;
-  --font-family-heading: 'Signika', sans-serif;
-  --font-family-mono: 'Fira Code', 'Courier New', monospace;
-
-  /* ===== FONT SIZES ===== */
-  --font-size-xs: 12px;
-  --font-size-sm: 14px;
-  --font-size-base: 16px;
-  --font-size-md: 16px;
-  --font-size-lg: 18px;
-  --font-size-xl: 20px;
-  --font-size-2xl: 24px;
-  --font-size-3xl: 30px;
-  --font-size-4xl: 36px;
-
-  /* ===== FONT WEIGHTS ===== */
-  --font-weight-light: 200;
-  --font-weight-normal: 300;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* ===== LINE HEIGHTS ===== */
-  --line-height-tight: 1.2;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-
-  /* ===== LETTER SPACING ===== */
-  --letter-spacing-tight: -0.02em;
-  --letter-spacing-normal: 0;
-  --letter-spacing-wide: 0.02em;
-}

package/src/style/foundations/z-index.css

@@ -1,81 +0,0 @@
-/**
- * Z-Index Layering System
- * 
- * Organized z-index values for different UI layers.
- * Each range is defined to prevent conflicts and maintain clear hierarchy.
- * 
- * Ranges:
- * - Base: 1-99 (interactive elements, hover states)
- * - Floating: 100-999 (floating elements like tooltips, badges)
- * - Popover: 1000-1999 (dropdowns, popovers, menus)
- * - Modal: 2000-2999 (modals, dialogs, drawers)
- * - Notification: 3000-3999 (toasts, notifications)
- * - Fixed: 4000-4999 (fixed headers, footers, sticky elements)
- * - Overlay: 5000+ (full-page overlays, backdrops)
- */
-
-:root {
-  /* ============================================
-     Base Layer (1-99)
-     Interactive elements, shadows, subtle overlays
-     ============================================ */
-  --z-base: 1;
-  --z-dropdown-shadow: 5;
-  --z-hover-state: 10;
-  --z-focus-ring: 15;
-
-  /* ============================================
-     Floating Layer (100-999)
-     Floating elements that appear above content
-     ============================================ */
-  --z-floating-base: 100;
-  --z-tooltip: 150;
-  --z-badge: 120;
-  --z-floating-action: 180;
-
-  /* ============================================
-     Popover Layer (1000-1999)
-     Dropdowns, context menus, select dropdowns, popovers
-     ============================================ */
-  --z-popover-base: 1000;
-  --z-select-dropdown: 1050;
-  --z-popover: 1100;
-  --z-context-menu: 1150;
-  --z-date-picker: 1200;
-  --z-time-picker: 1200;
-
-  /* ============================================
-     Modal Layer (2000-2999)
-     Modals, dialogs, drawers, lightboxes
-     ============================================ */
-  --z-modal-base: 2000;
-  --z-drawer: 2100;
-  --z-dialog: 2200;
-  --z-lightbox: 2300;
-
-  /* ============================================
-     Notification Layer (3000-3999)
-     Toasts, notifications, alerts
-     ============================================ */
-  --z-notification-base: 3000;
-  --z-toast: 3100;
-  --z-alert: 3200;
-  --z-banner: 3300;
-
-  /* ============================================
-     Fixed Layer (4000-4999)
-     Fixed positioned elements (headers, footers, sticky)
-     ============================================ */
-  --z-fixed-base: 4000;
-  --z-sticky-header: 4100;
-  --z-sticky-footer: 4100;
-  --z-fixed-nav: 4200;
-
-  /* ============================================
-     Overlay Layer (5000+)
-     Full-page overlays, backdrops
-     ============================================ */
-  --z-overlay-base: 5000;
-  --z-modal-backdrop: 5100;
-  --z-drawer-backdrop: 5100;
-}

package/src/style/modes/dark.css

@@ -1,146 +0,0 @@
-/**
- * Dark Theme
- * Dark color scheme
- */
-
-:root[data-theme="dark"] {
-  --lightness-foreground-1: 96%;
-  --lightness-foreground-2: 88%;
-  --lightness-foreground-3: 80%;
-  --lightness-foreground-4: 64%;
-  --lightness-foreground-5: 48%;
-  --lightness-foreground-6: 32%;
-
-  --lightness-bg-1: 4%;
-  --lightness-bg-2: 12%;
-  --lightness-bg-3: 20%;
-
-  /* Base colors */
-  --color-primary: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
-  --color-on-primary: hsla(var(--primary-hue), 0%, 100%, 1);
-
-  --color-secondary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
-  --color-on-secondary: hsla(var(--secondary-hue), 0%, 100%, 1);
-
-  --color-tertiary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
-  --color-on-tertiary: hsla(var(--secondary-hue), 0%, 100%, 1);
-
-  --color-accent: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 1);
-  --color-on-accent: hsla(var(--accent-hue), 0%, 100%, 1);
-
-  /* Status colors */
-  --color-success: hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 1);
-  --color-on-success: hsla(var(--success-hue), 0%, 100%, 1);
-
-  --color-warning: hsla(var(--warning-hue), var(--warning-saturation), var(--warning-lightness), 1);
-  --color-on-warning: hsla(var(--warning-hue), 0%, 100%, 1);
-
-  --color-error: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
-  --color-on-error: hsla(var(--error-hue), 0%, 100%, 1);
-
-  --color-info: hsla(var(--info-hue), var(--info-saturation), var(--info-lightness), 1);
-  --color-on-info: hsla(var(--info-hue), 0%, 100%, 1);
-
-  /* Foreground & background */
-  --color-foreground-1: hsla(0, 0%, var(--lightness-foreground-1), 1);
-  --color-foreground-2: hsla(0, 0%, var(--lightness-foreground-2), 1);
-  --color-foreground-3: hsla(0, 0%, var(--lightness-foreground-3), 1);
-  --color-foreground-4: hsla(0, 0%, var(--lightness-foreground-4), 1);
-  --color-foreground-5: hsla(0, 0%, var(--lightness-foreground-5), 1);
-  --color-foreground-6: hsla(0, 0%, var(--lightness-foreground-6), 1);
-
-  --color-bg-1: hsla(var(--primary-hue), 10%, var(--lightness-bg-1), 1);
-  --color-bg-2: hsla(var(--primary-hue), 30%, var(--lightness-bg-2), 1);
-  --color-bg-3: hsla(var(--primary-hue), 50%, var(--lightness-bg-3), 1);
-
-  /* Interaction state colors */
-  --color-primary-hover: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 10%), 1);
-  --color-primary-active: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 5%), 1);
-  --color-primary-disabled: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 20%), 0.5);
-
-  --color-secondary-hover: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 10%), 1);
-  --color-secondary-active: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 5%), 1);
-  --color-secondary-disabled: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) - 20%), 0.5);
-
-  --color-accent-hover: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 10%), 1);
-  --color-accent-active: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 5%), 1);
-  --color-accent-disabled: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) - 20%), 0.5);
-
-  --color-success-hover: hsla(var(--success-hue), var(--success-saturation), calc(var(--success-lightness) + 10%), 1);
-  --color-success-active: hsla(var(--success-hue), var(--success-saturation), calc(var(--success-lightness) + 5%), 1);
-
-  --color-warning-hover: hsla(var(--warning-hue), var(--warning-saturation), calc(var(--warning-lightness) + 10%), 1);
-  --color-warning-active: hsla(var(--warning-hue), var(--warning-saturation), calc(var(--warning-lightness) + 5%), 1);
-
-  --color-error-hover: hsla(var(--error-hue), var(--error-saturation), calc(var(--error-lightness) + 10%), 1);
-  --color-error-active: hsla(var(--error-hue), var(--error-saturation), calc(var(--error-lightness) + 5%), 1);
-
-  --color-info-hover: hsla(var(--info-hue), var(--info-saturation), calc(var(--info-lightness) + 10%), 1);
-  --color-info-active: hsla(var(--info-hue), var(--info-saturation), calc(var(--info-lightness) + 5%), 1);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --lightness-foreground-1: 96%;
-    --lightness-foreground-2: 88%;
-    --lightness-foreground-3: 80%;
-    --lightness-foreground-4: 64%;
-    --lightness-foreground-5: 48%;
-    --lightness-foreground-6: 32%;
-
-    --lightness-bg-1: 4%;
-    --lightness-bg-2: 12%;
-    --lightness-bg-3: 20%;
-
-    /* Base colors */
-    --color-primary: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
-    --color-on-primary: hsla(var(--primary-hue), 0%, 100%, 1);
-
-    --color-secondary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
-    --color-on-secondary: hsla(var(--secondary-hue), 0%, 100%, 1);
-
-    --color-tertiary: var(--color-secondary);
-    --color-on-tertiary: var(--color-on-secondary);
-
-    --color-accent: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 1);
-    --color-on-accent: hsla(var(--accent-hue), 0%, 100%, 1);
-
-    /* Status colors */
-    --color-success: hsla(var(--success-hue), var(--success-saturation), 50%, 1);
-    --color-on-success: hsla(var(--success-hue), 0%, 100%, 1);
-
-    --color-warning: hsla(var(--warning-hue), var(--warning-saturation), 50%, 1);
-    --color-on-warning: hsla(var(--warning-hue), 0%, 100%, 1);
-
-    --color-error: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
-    --color-on-error: hsla(var(--error-hue), 0%, 100%, 1);
-
-    --color-info: hsla(var(--info-hue), var(--info-saturation), 50%, 1);
-    --color-on-info: hsla(var(--info-hue), 0%, 100%, 1);
-
-    /* Foreground & background */
-    --color-foreground-1: hsla(0, 0%, var(--lightness-foreground-1), 1);
-    --color-foreground-2: hsla(0, 0%, var(--lightness-foreground-2), 1);
-    --color-foreground-3: hsla(0, 0%, var(--lightness-foreground-3), 1);
-    --color-foreground-4: hsla(0, 0%, var(--lightness-foreground-4), 1);
-    --color-foreground-5: hsla(0, 0%, var(--lightness-foreground-5), 1);
-    --color-foreground-6: hsla(0, 0%, var(--lightness-foreground-6), 1);
-
-    --color-bg-1: hsla(0, 0%, var(--lightness-bg-1), 1);
-    --color-bg-2: hsla(0, 0%, var(--lightness-bg-2), 1);
-    --color-bg-3: hsla(0, 0%, var(--lightness-bg-3), 1);
-
-    /* Interaction state colors */
-    --color-primary-hover: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 10%), 1);
-    --color-primary-active: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 5%), 1);
-    --color-primary-disabled: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 20%), 0.5);
-
-    --color-secondary-hover: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 10%), 1);
-    --color-secondary-active: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 5%), 1);
-    --color-secondary-disabled: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) - 20%), 0.5);
-
-    --color-accent-hover: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 10%), 1);
-    --color-accent-active: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 5%), 1);
-    --color-accent-disabled: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) - 20%), 0.5);
-  }
-}

package/src/style/modes/light.css

@@ -1,147 +0,0 @@
-/**
- * Light Theme
- * Default light color scheme
- */
-
-:root,
-:root[data-theme="light"] {
-  --lightness-foreground-1: 20%;
-  --lightness-foreground-2: 12%;
-  --lightness-foreground-3: 4%;
-  --lightness-foreground-4: 8%;
-  --lightness-foreground-5: 16%;
-  --lightness-foreground-6: 24%;
-
-  --lightness-bg-1: 80%;
-  --lightness-bg-2: 88%;
-  --lightness-bg-3: 96%;
-
-  /* Base colors */
-  --color-primary: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
-  --color-on-primary: hsla(var(--primary-hue), 0%, 100%, 1);
-
-  --color-secondary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
-  --color-on-secondary: hsla(var(--secondary-hue), 0%, 100%, 1);
-
-  --color-tertiary: var(--color-secondary);
-  --color-on-tertiary: var(--color-on-secondary);
-
-  --color-accent: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 1);
-  --color-on-accent: hsla(var(--accent-hue), 0%, 100%, 1);
-
-  /* Status colors */
-  --color-success: hsla(var(--success-hue), var(--success-saturation), var(--success-lightness), 1);
-  --color-on-success: hsla(var(--success-hue), 0%, 100%, 1);
-
-  --color-warning: hsla(var(--warning-hue), var(--warning-saturation), var(--warning-lightness), 1);
-  --color-on-warning: hsla(var(--warning-hue), 0%, 100%, 1);
-
-  --color-error: hsla(var(--error-hue), var(--error-saturation), var(--error-lightness), 1);
-  --color-on-error: hsla(var(--error-hue), 0%, 100%, 1);
-
-  --color-info: hsla(var(--info-hue), var(--info-saturation), var(--info-lightness), 1);
-  --color-on-info: hsla(var(--info-hue), 0%, 100%, 1);
-
-  /* Foreground & background */
-  --color-foreground-1: hsla(0, 0%, var(--lightness-foreground-1), 1);
-  --color-foreground-2: hsla(0, 0%, var(--lightness-foreground-2), 1);
-  --color-foreground-3: hsla(0, 0%, var(--lightness-foreground-3), 1);
-  --color-foreground-4: hsla(0, 0%, var(--lightness-foreground-4), 1);
-  --color-foreground-5: hsla(0, 0%, var(--lightness-foreground-5), 1);
-  --color-foreground-6: hsla(0, 0%, var(--lightness-foreground-6), 1);
-
-  --color-bg-1: hsla(var(--primary-hue), 0%, var(--lightness-bg-1), 1);
-  --color-bg-2: hsla(var(--primary-hue), 10%, var(--lightness-bg-2), 1);
-  --color-bg-3: hsla(var(--primary-hue), 30%, var(--lightness-bg-3), 1);
-
-  /* Interaction state colors */
-  --color-primary-hover: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 10%), 1);
-  --color-primary-active: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + 5%), 1);
-  --color-primary-disabled: hsla(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) - 20%), 0.5);
-
-  --color-secondary-hover: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 10%), 1);
-  --color-secondary-active: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + 5%), 1);
-  --color-secondary-disabled: hsla(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) - 20%), 0.5);
-
-  --color-accent-hover: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 10%), 1);
-  --color-accent-active: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) + 5%), 1);
-  --color-accent-disabled: hsla(var(--accent-hue), var(--accent-saturation), calc(var(--accent-lightness) - 20%), 0.5);
-
-  --color-success-hover: hsla(var(--success-hue), var(--success-saturation), calc(var(--success-lightness) + 10%), 1);
-  --color-success-active: hsla(var(--success-hue), var(--success-saturation), calc(var(--success-lightness) + 5%), 1);
-
-  --color-warning-hover: hsla(var(--warning-hue), var(--warning-saturation), calc(var(--warning-lightness) + 10%), 1);
-  --color-warning-active: hsla(var(--warning-hue), var(--warning-saturation), calc(var(--warning-lightness) + 5%), 1);
-
-  --color-error-hover: hsla(var(--error-hue), var(--error-saturation), calc(var(--error-lightness) + 10%), 1);
-  --color-error-active: hsla(var(--error-hue), var(--error-saturation), calc(var(--error-lightness) + 5%), 1);
-
-  --color-info-hover: hsla(var(--info-hue), var(--info-saturation), calc(var(--info-lightness) + 10%), 1);
-  --color-info-active: hsla(var(--info-hue), var(--info-saturation), calc(var(--info-lightness) + 5%), 1);
-}
-
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme]) {
-    --lightness-foreground-1: 20%;
-    --lightness-foreground-2: 12%;
-    --lightness-foreground-3: 4%;
-    --lightness-foreground-4: 8%;
-    --lightness-foreground-5: 16%;
-    --lightness-foreground-6: 24%;
-
-    --lightness-bg-1: 80%;
-    --lightness-bg-2: 88%;
-    --lightness-bg-3: 96%;
-
-    /* Base colors */
-    --color-primary: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 1);
-    --color-on-primary: hsla(var(--primary-hue), 0%, 100%, 1);
-
-    --color-secondary: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness), 1);
-    --color-on-secondary: hsla(var(--secondary-hue), 0%, 100%, 1);
-
-    --color-tertiary: var(--color-secondary);
-    --color-on-tertiary: var(--color-foreground-1);
-
-    --color-accent: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness), 1);
-    --color-on-accent: hsla(var(--accent-hue), 0%, 100%, 1);
-
-    /* Status colors */
-    --color-success: hsla(var(--success-hue), var(--success-saturation), 50%, 1);
-    --color-on-success: hsla(var(--success-hue), 0%, 100%, 1);
-
-    --color-warning: hsla(var(--warning-hue), var(--warning-saturation), 50%, 1);
-    --color-on-warning: hsla(var(--warning-hue), 0%, 100%, 1);
-
-    --color-error: hsla(var(--error-hue), var(--error-saturation), 50%, 1);
-    --color-on-error: hsla(var(--error-hue), 0%, 100%, 1);
-
-    --color-info: hsla(var(--info-hue), var(--info-saturation), 50%, 1);
-    --color-on-info: hsla(var(--info-hue), 0%, 100%, 1);
-
-    /* Foreground & background */
-    --color-foreground-1: hsla(0, 0%, var(--lightness-foreground-1), 1);
-    --color-foreground-2: hsla(0, 0%, var(--lightness-foreground-2), 1);
-    --color-foreground-3: hsla(0, 0%, var(--lightness-foreground-3), 1);
-    --color-foreground-4: hsla(0, 0%, var(--lightness-foreground-4), 1);
-    --color-foreground-5: hsla(0, 0%, var(--lightness-foreground-5), 1);
-    --color-foreground-6: hsla(0, 0%, var(--lightness-foreground-6), 1);
-
-    --color-bg-1: hsla(0, 0%, var(--lightness-bg-1), 1);
-    --color-bg-2: hsla(0, 0%, var(--lightness-bg-2), 1);
-    --color-bg-3: hsla(0, 0%, var(--lightness-bg-3), 1);
-
-    /* Interaction state colors */
-    --color-primary-hover: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness-hover), 1);
-    --color-primary-active: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness-active), 1);
-    --color-primary-disabled: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness-disabled), 0.5);
-
-    --color-secondary-hover: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness-hover), 1);
-    --color-secondary-active: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness-active), 1);
-    --color-secondary-disabled: hsla(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness-disabled), 0.5);
-
-    --color-accent-hover: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-hover), 1);
-    --color-accent-active: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-active), 1);
-    --color-accent-disabled: hsla(var(--accent-hue), var(--accent-saturation), var(--accent-lightness-disabled), 0.5);
-  }
-}

package/src/style/semantic.css

@@ -1,52 +0,0 @@
-/**
- * Semantic Color Mappings
- * Maps base colors into semantic roles for components
- */
-
-:root {
-  /* Text aliases */
-  --color-text-primary: var(--color-foreground-1);
-  --color-text-secondary: var(--color-foreground-2);
-  --color-text-tertiary: var(--color-foreground-3);
-
-  --color-primary-dark: var(--color-primary-active);
-  --color-surface-variant: var(--color-bg-3);
-  --color-outline: var(--color-foreground-2);
-
-  /* Semantic roles: surfaces */
-  --color-surface-primary: var(--color-primary);
-  --color-surface-secondary: var(--color-secondary);
-  --color-on-surface-primary: var(--color-on-primary);
-  --color-on-surface-secondary: var(--color-on-secondary);
-
-  /* Semantic roles: status backgrounds */
-  --color-status-error: var(--color-error);
-  --color-status-success: var(--color-success);
-  --color-status-warning: var(--color-warning);
-  --color-status-info: var(--color-info);
-
-  /* Semantic roles: status on-status (text on status backgrounds) */
-  --color-on-status-error: var(--color-on-error);
-  --color-on-status-success: var(--color-on-success);
-  --color-on-status-warning: var(--color-on-warning);
-  --color-on-status-info: var(--color-on-info);
-
-  /* Semantic roles: actions */
-  --color-action-primary: var(--color-accent);
-  --color-on-action-primary: var(--color-on-accent);
-  --color-action-primary-hover: var(--color-accent-hover);
-  --color-action-primary-active: var(--color-accent-active);
-  --color-action-primary-disabled: var(--color-accent-disabled);
-
-  --color-action-secondary: var(--color-secondary);
-  --color-on-action-secondary: var(--color-on-secondary);
-  --color-action-secondary-hover: var(--color-secondary-hover);
-  --color-action-secondary-active: var(--color-secondary-active);
-  --color-action-secondary-disabled: var(--color-secondary-disabled);
-
-  --color-action-tertiary: var(--color-tertiary);
-  --color-on-action-tertiary: var(--color-on-tertiary);
-  --color-action-tertiary-hover: var(--color-tertiary-hover);
-  --color-action-tertiary-active: var(--color-tertiary-active);
-  --color-action-tertiary-disabled: var(--color-tertiary-disabled);
-}