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>
55 lines
2.7 KiB
SCSS
55 lines
2.7 KiB
SCSS
// ==========================================================================
|
|
// GLASS BORDER SEMANTIC TOKENS
|
|
// ==========================================================================
|
|
// Semantic tokens for glass morphism border effects
|
|
// Enhances glass surfaces with subtle borders and edge highlights
|
|
// ==========================================================================
|
|
@use '../../base/glass' as *;
|
|
@use '../../base/borders' as *;
|
|
@use '../../base/css-variables' as *;
|
|
|
|
// CORE GLASS BORDER VARIANTS
|
|
// Border styles that complement glass surfaces
|
|
$semantic-glass-border-subtle: $css-glass-border-color !default;
|
|
$semantic-glass-border-medium: rgba($css-glass-background-base, calc($css-glass-opacity-light + 0.1)) !default;
|
|
$semantic-glass-border-prominent: rgba($css-glass-background-base, calc($css-glass-opacity-medium + 0.1)) !default;
|
|
|
|
// EDGE HIGHLIGHT EFFECTS
|
|
// Subtle highlights that enhance the glass illusion
|
|
$semantic-glass-border-highlight-top: rgba(255, 255, 255, 0.3) !default;
|
|
$semantic-glass-border-highlight-bottom: rgba(0, 0, 0, 0.1) !default;
|
|
|
|
// COMPONENT-SPECIFIC GLASS BORDERS
|
|
$semantic-glass-border-card: $semantic-glass-border-subtle !default;
|
|
$semantic-glass-border-modal: $semantic-glass-border-medium !default;
|
|
$semantic-glass-border-dropdown: $semantic-glass-border-prominent !default;
|
|
$semantic-glass-border-tooltip: $semantic-glass-border-subtle !default;
|
|
$semantic-glass-border-button: $semantic-glass-border-medium !default;
|
|
$semantic-glass-border-input: $semantic-glass-border-subtle !default;
|
|
|
|
// INTERACTIVE GLASS BORDERS
|
|
$semantic-glass-border-hover: rgba($css-glass-background-base, calc($css-glass-opacity-medium + 0.2)) !default;
|
|
$semantic-glass-border-focus: rgba($css-glass-background-base, calc($css-glass-opacity-heavy + 0.1)) !default;
|
|
$semantic-glass-border-active: rgba($css-glass-background-base, calc($css-glass-opacity-frosted + 0.1)) !default;
|
|
|
|
// GLASS BORDER WIDTHS
|
|
$semantic-glass-border-width-thin: 1px !default;
|
|
$semantic-glass-border-width-medium: 2px !default;
|
|
$semantic-glass-border-width-thick: 3px !default;
|
|
|
|
// GLASS BORDER RADIUS
|
|
// Complement existing border radius tokens with glass-specific values
|
|
$semantic-glass-border-radius-sm: $base-border-radius-sm !default;
|
|
$semantic-glass-border-radius-md: $base-border-radius-md !default;
|
|
$semantic-glass-border-radius-lg: $base-border-radius-lg !default;
|
|
$semantic-glass-border-radius-xl: $base-border-radius-xl !default;
|
|
|
|
// GLASS BORDER MAP
|
|
$semantic-glass-borders: (
|
|
subtle: $semantic-glass-border-subtle,
|
|
medium: $semantic-glass-border-medium,
|
|
prominent: $semantic-glass-border-prominent,
|
|
hover: $semantic-glass-border-hover,
|
|
focus: $semantic-glass-border-focus,
|
|
active: $semantic-glass-border-active
|
|
) !default; |