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>
130 lines
6.1 KiB
SCSS
130 lines
6.1 KiB
SCSS
// ==========================================================================
|
|
// 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; |