// ========================================================================== // GLASS SURFACE SEMANTIC TOKENS // ========================================================================== // Semantic tokens for glass morphism surface effects // Uses CSS variables to support dynamic light/dark mode switching // ========================================================================== @use '../../base/glass' as *; @use '../../base/css-variables' as *; // CORE GLASS SURFACE VARIANTS // 5 opacity levels with CSS variable support for dynamic theming $semantic-glass-surface-translucent: rgba($css-glass-background-base, $css-glass-opacity-translucent) !default; $semantic-glass-surface-light: rgba($css-glass-background-base, $css-glass-opacity-light) !default; $semantic-glass-surface-medium: rgba($css-glass-background-base, $css-glass-opacity-medium) !default; $semantic-glass-surface-heavy: rgba($css-glass-background-base, $css-glass-opacity-heavy) !default; $semantic-glass-surface-frosted: rgba($css-glass-background-base, $css-glass-opacity-frosted) !default; // COMPONENT-SPECIFIC GLASS SURFACES // Common UI component glass effects using semantic variants $semantic-glass-card: $semantic-glass-surface-medium !default; $semantic-glass-card-elevated: $semantic-glass-surface-heavy !default; $semantic-glass-card-subtle: $semantic-glass-surface-light !default; $semantic-glass-modal: $semantic-glass-surface-heavy !default; $semantic-glass-modal-backdrop: $semantic-glass-surface-translucent !default; $semantic-glass-dropdown: $semantic-glass-surface-frosted !default; $semantic-glass-dropdown-item: $semantic-glass-surface-light !default; $semantic-glass-tooltip: $semantic-glass-surface-light !default; $semantic-glass-popover: $semantic-glass-surface-medium !default; $semantic-glass-navbar: $semantic-glass-surface-frosted !default; $semantic-glass-sidebar: $semantic-glass-surface-medium !default; $semantic-glass-notification: $semantic-glass-surface-heavy !default; $semantic-glass-alert: $semantic-glass-surface-medium !default; $semantic-glass-overlay: $semantic-glass-surface-translucent !default; $semantic-glass-overlay-heavy: $semantic-glass-surface-light !default; // INTERACTIVE GLASS SURFACES // Glass effects for interactive elements $semantic-glass-button: $semantic-glass-surface-light !default; $semantic-glass-button-hover: $semantic-glass-surface-medium !default; $semantic-glass-button-active: $semantic-glass-surface-heavy !default; $semantic-glass-input: $semantic-glass-surface-translucent !default; $semantic-glass-input-focus: $semantic-glass-surface-light !default; // LAYOUT GLASS SURFACES // Glass effects for layout components $semantic-glass-header: $semantic-glass-surface-frosted !default; $semantic-glass-footer: $semantic-glass-surface-medium !default; $semantic-glass-panel: $semantic-glass-surface-light !default; $semantic-glass-panel-elevated: $semantic-glass-surface-medium !default; // STATUS-BASED GLASS SURFACES // Glass effects with status/state implications $semantic-glass-success: $semantic-glass-surface-light !default; $semantic-glass-warning: $semantic-glass-surface-medium !default; $semantic-glass-error: $semantic-glass-surface-heavy !default; $semantic-glass-info: $semantic-glass-surface-light !default; // GLASS SURFACE MAP // Easy access to all glass surface variants $semantic-glass-surfaces: ( translucent: $semantic-glass-surface-translucent, light: $semantic-glass-surface-light, medium: $semantic-glass-surface-medium, heavy: $semantic-glass-surface-heavy, frosted: $semantic-glass-surface-frosted, card: $semantic-glass-card, modal: $semantic-glass-modal, dropdown: $semantic-glass-dropdown, tooltip: $semantic-glass-tooltip, navbar: $semantic-glass-navbar, button: $semantic-glass-button, input: $semantic-glass-input, overlay: $semantic-glass-overlay, panel: $semantic-glass-panel ) !default; // INDIVIDUAL SEMANTIC GLASS TOKENS - Direct access to all base glass values // GLASS BLUR INTENSITIES $semantic-glass-blur-none: $base-glass-blur-none !default; $semantic-glass-blur-xs: $base-glass-blur-xs !default; $semantic-glass-blur-sm: $base-glass-blur-sm !default; $semantic-glass-blur-md: $base-glass-blur-md !default; $semantic-glass-blur-lg: $base-glass-blur-lg !default; $semantic-glass-blur-xl: $base-glass-blur-xl !default; $semantic-glass-blur-2xl: $base-glass-blur-2xl !default; $semantic-glass-blur-3xl: $base-glass-blur-3xl !default; // GLASS OPACITY VARIANTS - LIGHT MODE $semantic-glass-opacity-translucent-light: $base-glass-opacity-translucent-light !default; $semantic-glass-opacity-light-light: $base-glass-opacity-light-light !default; $semantic-glass-opacity-medium-light: $base-glass-opacity-medium-light !default; $semantic-glass-opacity-heavy-light: $base-glass-opacity-heavy-light !default; $semantic-glass-opacity-frosted-light: $base-glass-opacity-frosted-light !default; // GLASS OPACITY VARIANTS - DARK MODE $semantic-glass-opacity-translucent-dark: $base-glass-opacity-translucent-dark !default; $semantic-glass-opacity-light-dark: $base-glass-opacity-light-dark !default; $semantic-glass-opacity-medium-dark: $base-glass-opacity-medium-dark !default; $semantic-glass-opacity-heavy-dark: $base-glass-opacity-heavy-dark !default; $semantic-glass-opacity-frosted-dark: $base-glass-opacity-frosted-dark !default; // GLASS BACKGROUND COLORS $semantic-glass-bg-light: $base-glass-bg-light !default; $semantic-glass-bg-dark: $base-glass-bg-dark !default; // GLASS BORDER COLORS $semantic-glass-border-light: $base-glass-border-light !default; $semantic-glass-border-dark: $base-glass-border-dark !default; // GLASS SHADOW COLORS $semantic-glass-shadow-light: $base-glass-shadow-light !default; $semantic-glass-shadow-dark: $base-glass-shadow-dark !default; // GLASS ANIMATION DURATIONS $semantic-glass-duration-fast: $base-glass-duration-fast !default; $semantic-glass-duration-normal: $base-glass-duration-normal !default; $semantic-glass-duration-slow: $base-glass-duration-slow !default; // GLASS ANIMATION EASINGS $semantic-glass-easing-smooth: $base-glass-easing-smooth !default; $semantic-glass-easing-bounce: $base-glass-easing-bounce !default;