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>
93 lines
5.9 KiB
SCSS
93 lines
5.9 KiB
SCSS
// ==========================================================================
|
|
// SEMANTIC SHADOWS
|
|
// ==========================================================================
|
|
// Meaningful shadow tokens for elevation and depth hierarchy
|
|
// Maps base shadow values to contextual usage patterns
|
|
// ==========================================================================
|
|
@use '../../base/shadows' as *;
|
|
@use '../colors' as *; // Add this line
|
|
|
|
|
|
// ELEVATION HIERARCHY - Material Design inspired depth levels
|
|
$semantic-shadow-elevation-0: $base-shadow-none !default; // No elevation - flat elements
|
|
$semantic-shadow-elevation-1: $base-shadow-xs !default; // Subtle lift - cards at rest
|
|
$semantic-shadow-elevation-2: $base-shadow-sm !default; // Light hover - interactive cards
|
|
$semantic-shadow-elevation-3: $base-shadow-md !default; // Medium lift - dropdowns, popovers
|
|
$semantic-shadow-elevation-4: $base-shadow-lg !default; // High lift - modals, dialogs
|
|
$semantic-shadow-elevation-5: $base-shadow-xl !default; // Maximum lift - tooltips, notifications
|
|
|
|
// COMPONENT SHADOWS - Specific component contexts
|
|
$semantic-shadow-card-rest: $base-shadow-xs !default; // Cards in default state
|
|
$semantic-shadow-card-hover: $base-shadow-sm !default; // Cards on hover
|
|
$semantic-shadow-card-active: $base-shadow-md !default; // Cards when pressed/active
|
|
$semantic-shadow-card-featured: $base-shadow-lg !default; // Featured/highlighted cards
|
|
|
|
// INTERACTIVE SHADOWS - User interaction feedback
|
|
$semantic-shadow-button-rest: $base-shadow-none !default; // Buttons in default state
|
|
$semantic-shadow-button-hover: $base-shadow-xs !default; // Buttons on hover
|
|
$semantic-shadow-button-active: $base-shadow-sm !default; // Buttons when pressed
|
|
$semantic-shadow-button-focus: 0 0 0 3px rgba($semantic-color-brand-primary, 0.12) !default; // Button focus ring
|
|
//$semantic-shadow-button-focus: 0 0 0 3px rgba($base-color-primary, 0.12) !default; // Button focus ring
|
|
|
|
// OVERLAY SHADOWS - Floating elements
|
|
$semantic-shadow-dropdown: $base-shadow-md !default; // Dropdown menus
|
|
$semantic-shadow-popover: $base-shadow-lg !default; // Popovers and tooltips
|
|
$semantic-shadow-modal: $base-shadow-2xl !default; // Modal dialogs
|
|
$semantic-shadow-drawer: $base-shadow-xl !default; // Side drawers/panels
|
|
|
|
// FORM SHADOWS - Input and form elements
|
|
$semantic-shadow-input-rest: $base-shadow-none !default; // Inputs in default state
|
|
$semantic-shadow-input-focus: 0 0 0 2px rgba($semantic-color-brand-primary, 0.12) !default; // Input focus ring
|
|
$semantic-shadow-input-error: 0 0 0 2px rgba($semantic-color-brand-primary, 0.12) !default; // Input error state
|
|
$semantic-shadow-input-inner: $base-shadow-inner !default; // Inset input shadow
|
|
|
|
// NAVIGATION SHADOWS - Menu and navigation elements
|
|
$semantic-shadow-nav-primary: $base-shadow-sm !default; // Primary navigation bar
|
|
$semantic-shadow-nav-secondary: $base-shadow-xs !default; // Secondary navigation elements
|
|
$semantic-shadow-nav-submenu: $base-shadow-md !default; // Submenu dropdowns
|
|
|
|
// SURFACE SHADOWS - Background and container elements
|
|
$semantic-shadow-surface-raised: $base-shadow-xs !default; // Slightly raised surfaces
|
|
$semantic-shadow-surface-floating: $base-shadow-sm !default; // Floating surfaces
|
|
$semantic-shadow-surface-overlay: $base-shadow-lg !default; // Overlay surfaces
|
|
|
|
// UTILITY SHADOWS - Special purpose shadows
|
|
$semantic-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.1) !default; // Text shadow for legibility
|
|
$semantic-shadow-image: $base-shadow-sm !default; // Image/media shadows
|
|
$semantic-shadow-separator: $base-shadow-inner !default; // Divider/separator shadows
|
|
|
|
// AI-SPECIFIC SHADOWS - Special AI/tech themed shadows
|
|
$semantic-shadow-ai-element: $base-shadow-ai-glow !default; // AI/tech themed glow
|
|
$semantic-shadow-ai-active: $base-shadow-ai-pulse !default; // Active AI elements
|
|
$semantic-shadow-ai-subtle: $base-shadow-ai-soft !default; // Subtle AI theming
|
|
|
|
// CONTEXT-AWARE SHADOWS - Theme and context sensitive
|
|
$semantic-shadow-success: 0 0 0 2px rgba($semantic-color-success, 0.12) !default; // Success state
|
|
$semantic-shadow-warning: 0 0 0 2px rgba($semantic-color-warning, 0.12) !default; // Warning state
|
|
$semantic-shadow-danger: 0 0 0 2px rgba($semantic-color-danger, 0.12) !default; // Danger state
|
|
$semantic-shadow-info: 0 0 0 2px rgba($semantic-color-info, 0.12) !default; // Info state
|
|
|
|
// ==========================================================================
|
|
// BACKWARDS COMPATIBILITY ALIASES
|
|
// ==========================================================================
|
|
// Aliases for existing shadow patterns in the codebase
|
|
|
|
$semantic-shadow-elevated: $base-shadow-md !default; // General elevated elements
|
|
$semantic-shadow-floating: $base-shadow-lg !default; // Floating elements
|
|
|
|
// INDIVIDUAL SEMANTIC SHADOW TOKENS - Direct access to all base shadow values
|
|
|
|
// STANDARD SHADOWS
|
|
$semantic-shadow-xs: $base-shadow-xs !default;
|
|
$semantic-shadow-sm: $base-shadow-sm !default;
|
|
$semantic-shadow-md: $base-shadow-md !default;
|
|
$semantic-shadow-lg: $base-shadow-lg !default;
|
|
$semantic-shadow-xl: $base-shadow-xl !default;
|
|
$semantic-shadow-2xl: $base-shadow-2xl !default;
|
|
$semantic-shadow-inner: $base-shadow-inner !default;
|
|
$semantic-shadow-none: $base-shadow-none !default;
|
|
|
|
// AI SHADOWS
|
|
$semantic-shadow-ai-glow: $base-shadow-ai-glow !default;
|
|
$semantic-shadow-ai-pulse: $base-shadow-ai-pulse !default;
|
|
$semantic-shadow-ai-soft: $base-shadow-ai-soft !default; |