// ========================================================================== // 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;