c803831f60
Implement complete semantic layer for all design tokens including typography, spacing, motion, colors, borders, shadows, z-index, opacity, and glass effects. Each semantic token maps base design tokens to contextual usage patterns for improved maintainability and developer experience. Features: - Complete semantic typography system with font weights, sizes, line heights, and letter spacing - Comprehensive spacing tokens for components, layouts, and interactions - Full motion system with durations, easing, transitions, and hover transforms - Semantic color system with individual access to all Material Design 3 colors - Border tokens with widths, radius, and styles for all use cases - Shadow system including standard and AI-themed shadows - Z-index layering system for proper stacking context - Opacity tokens for transparency and visibility states - Glass morphism tokens with blur, opacity, and theming support All semantic tokens provide direct access to base token values while offering meaningful contextual aliases for common UI patterns. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
220 lines
13 KiB
SCSS
220 lines
13 KiB
SCSS
// ==========================================================================
|
|
// CSS CUSTOM PROPERTIES MAPPING
|
|
// ==========================================================================
|
|
// Maps SCSS design tokens to CSS custom properties for runtime theming
|
|
// These variables can be dynamically updated via JavaScript
|
|
// ==========================================================================
|
|
@use 'colors' as colors;
|
|
@use 'glass' as glass;
|
|
|
|
:root {
|
|
// ==========================================================================
|
|
// PRIMARY COLORS - Material Design 3 Tonal Palette
|
|
// ==========================================================================
|
|
--color-primary-key: #{colors.$base-color-primary-key};
|
|
--color-primary: #{colors.$base-color-primary};
|
|
--color-on-primary: #{colors.$base-color-on-primary};
|
|
--color-primary-container: #{colors.$base-color-primary-container};
|
|
--color-on-primary-container: #{colors.$base-color-on-primary-container};
|
|
--color-inverse-primary: #{colors.$base-color-inverse-primary};
|
|
|
|
// ==========================================================================
|
|
// SECONDARY COLORS - Material Design 3 Tonal Palette
|
|
// ==========================================================================
|
|
--color-secondary-key: #{colors.$base-color-secondary-key};
|
|
--color-secondary: #{colors.$base-color-secondary};
|
|
--color-on-secondary: #{colors.$base-color-on-secondary};
|
|
--color-secondary-container: #{colors.$base-color-secondary-container};
|
|
--color-on-secondary-container: #{colors.$base-color-on-secondary-container};
|
|
|
|
// ==========================================================================
|
|
// TERTIARY COLORS - Material Design 3 Tonal Palette
|
|
// ==========================================================================
|
|
--color-tertiary-key: #{colors.$base-color-tertiary-key};
|
|
--color-tertiary: #{colors.$base-color-tertiary};
|
|
--color-on-tertiary: #{colors.$base-color-on-tertiary};
|
|
--color-tertiary-container: #{colors.$base-color-tertiary-container};
|
|
--color-on-tertiary-container: #{colors.$base-color-on-tertiary-container};
|
|
|
|
// ==========================================================================
|
|
// QUATERNARY COLORS - Extended Material Design 3
|
|
// ==========================================================================
|
|
--color-quaternary-key: #{colors.$base-color-quaternary-key};
|
|
|
|
// ==========================================================================
|
|
// ERROR COLORS - Material Design 3 Error System
|
|
// ==========================================================================
|
|
--color-error-key: #{colors.$base-color-error-key};
|
|
--color-error: #{colors.$base-color-error};
|
|
--color-on-error: #{colors.$base-color-on-error};
|
|
--color-error-container: #{colors.$base-color-error-container};
|
|
--color-on-error-container: #{colors.$base-color-on-error-container};
|
|
|
|
// ==========================================================================
|
|
// NEUTRAL COLORS - Material Design 3 Neutral System
|
|
// ==========================================================================
|
|
--color-neutral-key: #{colors.$base-color-neutral-key};
|
|
--color-neutral: #{colors.$base-color-neutral};
|
|
--color-neutral-variant-key: #{colors.$base-color-neutral-variant-key};
|
|
--color-neutral-variant: #{colors.$base-color-neutral-variant};
|
|
|
|
// ==========================================================================
|
|
// SURFACE COLORS - Material Design 3 Surface System
|
|
// ==========================================================================
|
|
--color-surface: #{colors.$base-color-surface};
|
|
--color-surface-bright: #{colors.$base-color-surface-bright};
|
|
--color-surface-dim: #{colors.$base-color-surface-dim};
|
|
--color-on-surface: #{colors.$base-color-on-surface};
|
|
--color-surface-lowest: #{colors.$base-color-surface-lowest};
|
|
--color-surface-low: #{colors.$base-color-surface-low};
|
|
--color-surface-container: #{colors.$base-color-surface-container};
|
|
--color-surface-high: #{colors.$base-color-surface-high};
|
|
--color-surface-highest: #{colors.$base-color-surface-highest};
|
|
--color-surface-variant: #{colors.$base-color-surface-variant};
|
|
--color-on-surface-variant: #{colors.$base-color-on-surface-variant};
|
|
--color-inverse-surface: #{colors.$base-color-inverse-surface};
|
|
--color-inverse-on-surface: #{colors.$base-color-inverse-on-surface};
|
|
|
|
// ==========================================================================
|
|
// BACKGROUND COLORS - Material Design 3 Background System
|
|
// ==========================================================================
|
|
--color-background: #{colors.$base-color-background};
|
|
--color-on-background: #{colors.$base-color-on-background};
|
|
|
|
// ==========================================================================
|
|
// OUTLINE COLORS - Material Design 3 Outline System
|
|
// ==========================================================================
|
|
--color-outline: #{colors.$base-color-outline};
|
|
--color-outline-variant: #{colors.$base-color-outline-variant};
|
|
|
|
// ==========================================================================
|
|
// UTILITY COLORS - Material Design 3 Utility Colors
|
|
// ==========================================================================
|
|
--color-shadow: #{colors.$base-color-shadow};
|
|
--color-surface-tint: #{colors.$base-color-surface-tint};
|
|
--color-scrim: #{colors.$base-color-scrim};
|
|
|
|
// ==========================================================================
|
|
// GLASS EFFECT VARIABLES - Default to Light Mode
|
|
// ==========================================================================
|
|
--glass-blur-xs: #{glass.$base-glass-blur-xs};
|
|
--glass-blur-sm: #{glass.$base-glass-blur-sm};
|
|
--glass-blur-md: #{glass.$base-glass-blur-md};
|
|
--glass-blur-lg: #{glass.$base-glass-blur-lg};
|
|
--glass-blur-xl: #{glass.$base-glass-blur-xl};
|
|
--glass-blur-2xl: #{glass.$base-glass-blur-2xl};
|
|
--glass-blur-3xl: #{glass.$base-glass-blur-3xl};
|
|
|
|
--glass-opacity-translucent: #{glass.$base-glass-opacity-translucent-light};
|
|
--glass-opacity-light: #{glass.$base-glass-opacity-light-light};
|
|
--glass-opacity-medium: #{glass.$base-glass-opacity-medium-light};
|
|
--glass-opacity-heavy: #{glass.$base-glass-opacity-heavy-light};
|
|
--glass-opacity-frosted: #{glass.$base-glass-opacity-frosted-light};
|
|
|
|
--glass-background-base: #{glass.$base-glass-bg-light};
|
|
--glass-border-color: #{glass.$base-glass-border-light};
|
|
--glass-shadow-color: #{glass.$base-glass-shadow-light};
|
|
|
|
--glass-duration-fast: #{glass.$base-glass-duration-fast};
|
|
--glass-duration-normal: #{glass.$base-glass-duration-normal};
|
|
--glass-duration-slow: #{glass.$base-glass-duration-slow};
|
|
}
|
|
|
|
// ==========================================================================
|
|
// CSS VARIABLE FALLBACK SYSTEM
|
|
// ==========================================================================
|
|
// Fallback variables that use SCSS tokens when CSS variables are not supported
|
|
// This ensures compatibility with older browsers
|
|
|
|
// Primary system fallbacks
|
|
$css-color-primary: var(--color-primary, #{colors.$base-color-primary}) !default;
|
|
$css-color-on-primary: var(--color-on-primary, #{colors.$base-color-on-primary}) !default;
|
|
$css-color-primary-container: var(--color-primary-container, #{colors.$base-color-primary-container}) !default;
|
|
$css-color-on-primary-container: var(--color-on-primary-container, #{colors.$base-color-on-primary-container}) !default;
|
|
$css-color-inverse-primary: var(--color-inverse-primary, #{colors.$base-color-inverse-primary}) !default;
|
|
|
|
// Secondary system fallbacks
|
|
$css-color-secondary: var(--color-secondary, #{colors.$base-color-secondary}) !default;
|
|
$css-color-on-secondary: var(--color-on-secondary, #{colors.$base-color-on-secondary}) !default;
|
|
$css-color-secondary-container: var(--color-secondary-container, #{colors.$base-color-secondary-container}) !default;
|
|
$css-color-on-secondary-container: var(--color-on-secondary-container, #{colors.$base-color-on-secondary-container}) !default;
|
|
|
|
// Tertiary system fallbacks
|
|
$css-color-tertiary: var(--color-tertiary, #{colors.$base-color-tertiary}) !default;
|
|
$css-color-on-tertiary: var(--color-on-tertiary, #{colors.$base-color-on-tertiary}) !default;
|
|
$css-color-tertiary-container: var(--color-tertiary-container, #{colors.$base-color-tertiary-container}) !default;
|
|
$css-color-on-tertiary-container: var(--color-on-tertiary-container, #{colors.$base-color-on-tertiary-container}) !default;
|
|
|
|
// Error system fallbacks
|
|
$css-color-error: var(--color-error, #{colors.$base-color-error}) !default;
|
|
$css-color-on-error: var(--color-on-error, #{colors.$base-color-on-error}) !default;
|
|
$css-color-error-container: var(--color-error-container, #{colors.$base-color-error-container}) !default;
|
|
$css-color-on-error-container: var(--color-on-error-container, #{colors.$base-color-on-error-container}) !default;
|
|
|
|
// Surface system fallbacks
|
|
$css-color-surface: var(--color-surface, #{colors.$base-color-surface}) !default;
|
|
$css-color-surface-bright: var(--color-surface-bright, #{colors.$base-color-surface-bright}) !default;
|
|
$css-color-surface-dim: var(--color-surface-dim, #{colors.$base-color-surface-dim}) !default;
|
|
$css-color-on-surface: var(--color-on-surface, #{colors.$base-color-on-surface}) !default;
|
|
$css-color-surface-lowest: var(--color-surface-lowest, #{colors.$base-color-surface-lowest}) !default;
|
|
$css-color-surface-low: var(--color-surface-low, #{colors.$base-color-surface-low}) !default;
|
|
$css-color-surface-container: var(--color-surface-container, #{colors.$base-color-surface-container}) !default;
|
|
$css-color-surface-high: var(--color-surface-high, #{colors.$base-color-surface-high}) !default;
|
|
$css-color-surface-highest: var(--color-surface-highest, #{colors.$base-color-surface-highest}) !default;
|
|
$css-color-surface-variant: var(--color-surface-variant, #{colors.$base-color-surface-variant}) !default;
|
|
$css-color-on-surface-variant: var(--color-on-surface-variant, #{colors.$base-color-on-surface-variant}) !default;
|
|
$css-color-inverse-surface: var(--color-inverse-surface, #{colors.$base-color-inverse-surface}) !default;
|
|
$css-color-inverse-on-surface: var(--color-inverse-on-surface, #{colors.$base-color-inverse-on-surface}) !default;
|
|
|
|
// Background system fallbacks
|
|
$css-color-background: var(--color-background, #{colors.$base-color-background}) !default;
|
|
$css-color-on-background: var(--color-on-background, #{colors.$base-color-on-background}) !default;
|
|
|
|
// Outline system fallbacks
|
|
$css-color-outline: var(--color-outline, #{colors.$base-color-outline}) !default;
|
|
$css-color-outline-variant: var(--color-outline-variant, #{colors.$base-color-outline-variant}) !default;
|
|
|
|
// Utility fallbacks
|
|
$css-color-shadow: var(--color-shadow, #{colors.$base-color-shadow}) !default;
|
|
$css-color-surface-tint: var(--color-surface-tint, #{colors.$base-color-surface-tint}) !default;
|
|
$css-color-scrim: var(--color-scrim, #{colors.$base-color-scrim}) !default;
|
|
|
|
// Glass effect fallbacks
|
|
$css-glass-blur-xs: var(--glass-blur-xs, #{glass.$base-glass-blur-xs}) !default;
|
|
$css-glass-blur-sm: var(--glass-blur-sm, #{glass.$base-glass-blur-sm}) !default;
|
|
$css-glass-blur-md: var(--glass-blur-md, #{glass.$base-glass-blur-md}) !default;
|
|
$css-glass-blur-lg: var(--glass-blur-lg, #{glass.$base-glass-blur-lg}) !default;
|
|
$css-glass-blur-xl: var(--glass-blur-xl, #{glass.$base-glass-blur-xl}) !default;
|
|
$css-glass-blur-2xl: var(--glass-blur-2xl, #{glass.$base-glass-blur-2xl}) !default;
|
|
$css-glass-blur-3xl: var(--glass-blur-3xl, #{glass.$base-glass-blur-3xl}) !default;
|
|
|
|
$css-glass-opacity-translucent: var(--glass-opacity-translucent, #{glass.$base-glass-opacity-translucent-light}) !default;
|
|
$css-glass-opacity-light: var(--glass-opacity-light, #{glass.$base-glass-opacity-light-light}) !default;
|
|
$css-glass-opacity-medium: var(--glass-opacity-medium, #{glass.$base-glass-opacity-medium-light}) !default;
|
|
$css-glass-opacity-heavy: var(--glass-opacity-heavy, #{glass.$base-glass-opacity-heavy-light}) !default;
|
|
$css-glass-opacity-frosted: var(--glass-opacity-frosted, #{glass.$base-glass-opacity-frosted-light}) !default;
|
|
|
|
$css-glass-background-base: var(--glass-background-base, #{glass.$base-glass-bg-light}) !default;
|
|
$css-glass-border-color: var(--glass-border-color, #{glass.$base-glass-border-light}) !default;
|
|
$css-glass-shadow-color: var(--glass-shadow-color, #{glass.$base-glass-shadow-light}) !default;
|
|
|
|
// ==========================================================================
|
|
// RUNTIME THEMING MIXIN
|
|
// ==========================================================================
|
|
// Mixin for applying CSS custom properties to components
|
|
// Use this to make components theme-aware
|
|
|
|
@mixin theme-aware-colors($properties: ()) {
|
|
@each $property, $css-variable in $properties {
|
|
#{$property}: var(--color-#{$css-variable});
|
|
}
|
|
}
|
|
|
|
// Example usage:
|
|
// .my-component {
|
|
// @include theme-aware-colors((
|
|
// 'color': 'on-surface',
|
|
// 'background-color': 'surface',
|
|
// 'border-color': 'outline'
|
|
// ));
|
|
// } |