Add comprehensive semantic design token system
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>
This commit is contained in:
skyai_dev
10
projects/shared-ui/src/styles/semantic/borders/_index.scss
Normal file
10
projects/shared-ui/src/styles/semantic/borders/_index.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC BORDERS INDEX
|
||||
// ==========================================================================
|
||||
// Contextual border system for components and UI elements
|
||||
// ==========================================================================
|
||||
|
||||
// Note: base tokens imported at semantic/index level
|
||||
|
||||
// Semantic border mappings
|
||||
@import 'semantic-borders';
|
||||
@@ -0,0 +1,132 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC BORDERS
|
||||
// ==========================================================================
|
||||
// Meaningful border tokens for components and UI elements
|
||||
// Maps base border values to contextual usage patterns
|
||||
// ==========================================================================
|
||||
@use '../../base/borders' as *;
|
||||
|
||||
// COMPONENT BORDERS - UI component border styles
|
||||
$semantic-border-button-width: $base-border-width-1 !default; // Standard button border
|
||||
$semantic-border-button-style: $base-border-style-solid !default; // Button border style
|
||||
$semantic-border-button-radius: $base-border-radius-md !default; // Button corner radius
|
||||
|
||||
$semantic-border-input-width: $base-border-width-1 !default; // Form input border
|
||||
$semantic-border-input-style: $base-border-style-solid !default; // Input border style
|
||||
$semantic-border-input-radius: $base-border-radius-md !default; // Input corner radius
|
||||
|
||||
$semantic-border-card-width: $base-border-width-1 !default; // Card border width
|
||||
$semantic-border-card-style: $base-border-style-solid !default; // Card border style
|
||||
$semantic-border-card-radius: $base-border-radius-lg !default; // Card corner radius
|
||||
|
||||
// INTERACTION BORDERS - State-based border styles
|
||||
$semantic-border-focus-width: $base-border-width-2 !default; // Focus state border
|
||||
$semantic-border-hover-width: $base-border-width-1 !default; // Hover state border
|
||||
$semantic-border-active-width: $base-border-width-2 !default; // Active state border
|
||||
$semantic-border-disabled-width: $base-border-width-1 !default; // Disabled state border
|
||||
|
||||
// FEEDBACK BORDERS - Status and validation borders
|
||||
$semantic-border-success-width: $base-border-width-1 !default; // Success state border
|
||||
$semantic-border-warning-width: $base-border-width-1 !default; // Warning state border
|
||||
$semantic-border-error-width: $base-border-width-1 !default; // Error state border
|
||||
$semantic-border-info-width: $base-border-width-1 !default; // Info state border
|
||||
|
||||
// LAYOUT BORDERS - Structure and separation
|
||||
$semantic-border-divider-width: $base-border-width-1 !default; // Content dividers
|
||||
$semantic-border-divider-style: $base-border-style-solid !default; // Divider style
|
||||
$semantic-border-separator-width: $base-border-width-hairline !default; // Subtle separators
|
||||
$semantic-border-separator-style: $base-border-style-solid !default; // Separator style
|
||||
|
||||
// NAVIGATION BORDERS - Menu and navigation elements
|
||||
$semantic-border-nav-width: $base-border-width-1 !default; // Navigation borders
|
||||
$semantic-border-nav-style: $base-border-style-solid !default; // Nav border style
|
||||
$semantic-border-nav-radius: $base-border-radius-sm !default; // Nav corner radius
|
||||
|
||||
$semantic-border-tab-width: $base-border-width-2 !default; // Tab borders
|
||||
$semantic-border-tab-style: $base-border-style-solid !default; // Tab border style
|
||||
$semantic-border-tab-radius: $base-border-radius-sm !default; // Tab corner radius
|
||||
|
||||
// CONTAINER BORDERS - Cards, panels, modals
|
||||
$semantic-border-modal-width: $base-border-width-0 !default; // Modal border (usually none)
|
||||
$semantic-border-modal-radius: $base-border-radius-xl !default; // Modal corner radius
|
||||
|
||||
$semantic-border-panel-width: $base-border-width-1 !default; // Side panel border
|
||||
$semantic-border-panel-style: $base-border-style-solid !default; // Panel border style
|
||||
$semantic-border-panel-radius: $base-border-radius-lg !default; // Panel corner radius
|
||||
|
||||
// SHAPE BORDERS - Geometric and utility borders
|
||||
$semantic-border-pill: $base-border-radius-pill !default; // Pill-shaped elements
|
||||
$semantic-border-circle: $base-border-radius-full !default; // Circular elements
|
||||
$semantic-border-rounded-sm: $base-border-radius-sm !default; // Small rounded corners
|
||||
$semantic-border-rounded-md: $base-border-radius-md !default; // Medium rounded corners
|
||||
$semantic-border-rounded-lg: $base-border-radius-lg !default; // Large rounded corners
|
||||
$semantic-border-rounded-xl: $base-border-radius-xl !default; // Extra large rounded corners
|
||||
|
||||
// TABLE BORDERS - Data table styling
|
||||
$semantic-border-table-width: $base-border-width-1 !default; // Table border width
|
||||
$semantic-border-table-style: $base-border-style-solid !default; // Table border style
|
||||
$semantic-border-table-radius: $base-border-radius-md !default; // Table corner radius
|
||||
|
||||
$semantic-border-table-cell-width: $base-border-width-hairline !default; // Table cell borders
|
||||
$semantic-border-table-cell-style: $base-border-style-solid !default; // Cell border style
|
||||
|
||||
// AVATAR AND IMAGE BORDERS
|
||||
$semantic-border-avatar-width: $base-border-width-2 !default; // Avatar border width
|
||||
$semantic-border-avatar-style: $base-border-style-solid !default; // Avatar border style
|
||||
$semantic-border-avatar-radius: $base-border-radius-full !default; // Avatar shape (circular)
|
||||
|
||||
$semantic-border-image-width: $base-border-width-1 !default; // Image border width
|
||||
$semantic-border-image-style: $base-border-style-solid !default; // Image border style
|
||||
$semantic-border-image-radius: $base-border-radius-md !default; // Image corner radius
|
||||
|
||||
// UTILITY BORDERS - Common border patterns
|
||||
$semantic-border-outline-width: $base-border-width-1 !default; // Outline/stroke borders
|
||||
$semantic-border-outline-style: $base-border-style-solid !default; // Outline border style
|
||||
|
||||
$semantic-border-dashed-width: $base-border-width-1 !default; // Dashed borders
|
||||
$semantic-border-dashed-style: $base-border-style-dashed !default; // Dashed border style
|
||||
|
||||
$semantic-border-dotted-width: $base-border-width-1 !default; // Dotted borders
|
||||
$semantic-border-dotted-style: $base-border-style-dotted !default; // Dotted border style
|
||||
|
||||
// ==========================================================================
|
||||
// BACKWARDS COMPATIBILITY ALIASES
|
||||
// ==========================================================================
|
||||
// Aliases for existing border radius patterns in the codebase
|
||||
|
||||
$semantic-border-radius-xs: $base-border-radius-xs !default; // Extra small radius
|
||||
$semantic-border-radius-sm: $base-border-radius-sm !default; // Small radius
|
||||
$semantic-border-radius-md: $base-border-radius-md !default; // Medium radius
|
||||
$semantic-border-radius-lg: $base-border-radius-lg !default; // Large radius
|
||||
$semantic-border-radius-xl: $base-border-radius-xl !default; // Extra large radius
|
||||
|
||||
// INDIVIDUAL SEMANTIC BORDER TOKENS - Direct access to all base border values
|
||||
|
||||
// BORDER WIDTHS
|
||||
$semantic-border-width-0: $base-border-width-0 !default;
|
||||
$semantic-border-width-1: $base-border-width-1 !default;
|
||||
$semantic-border-width-2: $base-border-width-2 !default;
|
||||
$semantic-border-width-3: $base-border-width-3 !default;
|
||||
$semantic-border-width-4: $base-border-width-4 !default;
|
||||
$semantic-border-width-5: $base-border-width-5 !default;
|
||||
$semantic-border-width-6: $base-border-width-6 !default;
|
||||
$semantic-border-width-7: $base-border-width-7 !default;
|
||||
$semantic-border-width-8: $base-border-width-8 !default;
|
||||
$semantic-border-width-10: $base-border-width-10 !default;
|
||||
$semantic-border-width-hairline: $base-border-width-hairline !default;
|
||||
|
||||
// BORDER RADIUS
|
||||
$semantic-border-radius-none: $base-border-radius-none !default;
|
||||
$semantic-border-radius-2xl: $base-border-radius-2xl !default;
|
||||
$semantic-border-radius-3xl: $base-border-radius-3xl !default;
|
||||
$semantic-border-radius-4xl: $base-border-radius-4xl !default;
|
||||
$semantic-border-radius-5xl: $base-border-radius-5xl !default;
|
||||
$semantic-border-radius-full: $base-border-radius-full !default;
|
||||
$semantic-border-radius-pill: $base-border-radius-pill !default;
|
||||
|
||||
// BORDER STYLES
|
||||
$semantic-border-style-none: $base-border-style-none !default;
|
||||
$semantic-border-style-solid: $base-border-style-solid !default;
|
||||
$semantic-border-style-dashed: $base-border-style-dashed !default;
|
||||
$semantic-border-style-dotted: $base-border-style-dotted !default;
|
||||
$semantic-border-style-double: $base-border-style-double !default;
|
||||
13
projects/shared-ui/src/styles/semantic/colors/_index.scss
Normal file
13
projects/shared-ui/src/styles/semantic/colors/_index.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC COLORS INDEX
|
||||
// ==========================================================================
|
||||
// Meaningful color system that bridges base tokens with component usage
|
||||
// ==========================================================================
|
||||
|
||||
// Note: base tokens imported at semantic/index level
|
||||
|
||||
// Semantic color mappings
|
||||
@import 'semantic-colors';
|
||||
|
||||
// Interactive state colors
|
||||
@import 'state-colors';
|
||||
@@ -0,0 +1,150 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC COLORS
|
||||
// ==========================================================================
|
||||
// Meaningful color tokens that map base tokens to contextual usage
|
||||
// These provide semantic meaning and make components more maintainable
|
||||
// ==========================================================================
|
||||
@use '../../base/colors' as *;
|
||||
@use '../../base/css-variables' as *;
|
||||
|
||||
// BRAND COLORS - Core brand identity (now CSS variable aware)
|
||||
$semantic-color-brand-primary: $css-color-primary !default;
|
||||
$semantic-color-brand-secondary: $css-color-secondary !default;
|
||||
$semantic-color-brand-tertiary: $css-color-tertiary !default;
|
||||
$semantic-color-brand-accent: $css-color-tertiary !default;
|
||||
|
||||
// BRAND ON COLORS - Text/icons on brand colors (now CSS variable aware)
|
||||
$semantic-color-on-brand-primary: $css-color-on-primary !default;
|
||||
$semantic-color-on-brand-secondary: $css-color-on-secondary !default;
|
||||
$semantic-color-on-brand-tertiary: $css-color-on-tertiary !default;
|
||||
|
||||
// FEEDBACK COLORS - User feedback and status
|
||||
$semantic-color-success: $css-color-tertiary !default; // Often green in M3
|
||||
$semantic-color-warning: #ff9800 !default; // Amber/orange
|
||||
$semantic-color-danger: $css-color-error !default; // Red/error
|
||||
$semantic-color-info: #2196f3 !default; // Blue
|
||||
$semantic-color-neutral-info: $base-color-neutral !default; // Neutral feedback
|
||||
|
||||
// FEEDBACK ON COLORS - Text/icons on feedback colors
|
||||
$semantic-color-on-success: $css-color-on-tertiary !default;
|
||||
$semantic-color-on-warning: #000000 !default;
|
||||
$semantic-color-on-danger: $css-color-on-error !default;
|
||||
$semantic-color-on-info: #ffffff !default;
|
||||
|
||||
// SURFACE COLORS - Background and container colors (now CSS variable aware)
|
||||
$semantic-color-surface-primary: $css-color-surface !default;
|
||||
$semantic-color-surface-secondary: $css-color-surface-variant !default;
|
||||
$semantic-color-surface-elevated: $css-color-surface-high !default;
|
||||
$semantic-color-surface-sunken: $css-color-surface-low !default;
|
||||
$semantic-color-surface-interactive: $css-color-surface-container !default;
|
||||
$semantic-color-surface-disabled: $css-color-surface-dim !default;
|
||||
|
||||
// TEXT COLORS - Typography and content (now CSS variable aware)
|
||||
$semantic-color-text-primary: $css-color-on-surface !default;
|
||||
$semantic-color-text-secondary: $css-color-on-surface-variant !default;
|
||||
$semantic-color-text-tertiary: $css-color-outline !default;
|
||||
$semantic-color-text-disabled: $css-color-outline-variant !default;
|
||||
$semantic-color-text-inverse: $css-color-inverse-on-surface !default;
|
||||
|
||||
// BORDER COLORS - Lines, dividers, outlines (now CSS variable aware)
|
||||
$semantic-color-border-primary: $css-color-outline !default;
|
||||
$semantic-color-border-secondary: $css-color-outline-variant !default;
|
||||
$semantic-color-border-subtle: $css-color-outline-variant !default;
|
||||
$semantic-color-border-focus: $css-color-primary !default;
|
||||
$semantic-color-focus: $css-color-primary !default; // General focus indicator color
|
||||
$semantic-color-border-error: $css-color-error !default;
|
||||
$semantic-color-border-disabled: $css-color-outline-variant !default;
|
||||
|
||||
// INTERACTIVE COLORS - Buttons, links, actions (now CSS variable aware)
|
||||
$semantic-color-interactive-primary: $css-color-primary !default;
|
||||
$semantic-color-interactive-secondary: $css-color-secondary !default;
|
||||
$semantic-color-interactive-tertiary: $css-color-tertiary !default;
|
||||
$semantic-color-interactive-neutral: $css-color-surface-variant !default;
|
||||
|
||||
// CONTAINER COLORS - Cards, panels, modals (now CSS variable aware)
|
||||
$semantic-color-container-primary: $css-color-primary-container !default;
|
||||
$semantic-color-container-secondary: $css-color-secondary-container !default;
|
||||
$semantic-color-container-tertiary: $css-color-tertiary-container !default;
|
||||
$semantic-color-container-error: $css-color-error-container !default;
|
||||
$semantic-color-container-surface: $css-color-surface-container !default;
|
||||
|
||||
// CONTAINER ON COLORS - Text/icons on containers (now CSS variable aware)
|
||||
$semantic-color-on-container-primary: $css-color-on-primary-container !default;
|
||||
$semantic-color-on-container-secondary: $css-color-on-secondary-container !default;
|
||||
$semantic-color-on-container-tertiary: $css-color-on-tertiary-container !default;
|
||||
$semantic-color-on-container-error: $css-color-on-error-container !default;
|
||||
|
||||
// UTILITY COLORS - Special purpose colors (partially CSS variable aware)
|
||||
$semantic-color-shadow: $css-color-shadow !default;
|
||||
$semantic-color-scrim: $css-color-scrim !default;
|
||||
$semantic-color-backdrop: rgba(0, 0, 0, 0.5) !default;
|
||||
$semantic-color-overlay: rgba(255, 255, 255, 0.1) !default;
|
||||
$semantic-color-focus-ring: rgba($base-color-primary, 0.12) !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC COLOR TOKENS - Direct access to all base color values
|
||||
|
||||
// KEY COLORS
|
||||
$semantic-color-primary-key: $base-color-primary-key !default;
|
||||
$semantic-color-secondary-key: $base-color-secondary-key !default;
|
||||
$semantic-color-tertiary-key: $base-color-tertiary-key !default;
|
||||
$semantic-color-quaternary-key: $base-color-quaternary-key !default;
|
||||
$semantic-color-neutral-key: $base-color-neutral-key !default;
|
||||
$semantic-color-error-key: $base-color-error-key !default;
|
||||
$semantic-color-neutral-variant-key: $base-color-neutral-variant-key !default;
|
||||
|
||||
// PRIMARY COLORS
|
||||
$semantic-color-primary: $base-color-primary !default;
|
||||
$semantic-color-on-primary: $base-color-on-primary !default;
|
||||
$semantic-color-primary-container: $base-color-primary-container !default;
|
||||
$semantic-color-on-primary-container: $base-color-on-primary-container !default;
|
||||
$semantic-color-inverse-primary: $base-color-inverse-primary !default;
|
||||
|
||||
// SECONDARY COLORS
|
||||
$semantic-color-secondary: $base-color-secondary !default;
|
||||
$semantic-color-on-secondary: $base-color-on-secondary !default;
|
||||
$semantic-color-secondary-container: $base-color-secondary-container !default;
|
||||
$semantic-color-on-secondary-container: $base-color-on-secondary-container !default;
|
||||
|
||||
// TERTIARY COLORS
|
||||
$semantic-color-tertiary: $base-color-tertiary !default;
|
||||
$semantic-color-on-tertiary: $base-color-on-tertiary !default;
|
||||
$semantic-color-tertiary-container: $base-color-tertiary-container !default;
|
||||
$semantic-color-on-tertiary-container: $base-color-on-tertiary-container !default;
|
||||
|
||||
// NEUTRAL COLORS
|
||||
$semantic-color-neutral: $base-color-neutral !default;
|
||||
$semantic-color-neutral-variant: $base-color-neutral-variant !default;
|
||||
|
||||
// SURFACE COLORS
|
||||
$semantic-color-surface: $base-color-surface !default;
|
||||
$semantic-color-surface-bright: $base-color-surface-bright !default;
|
||||
$semantic-color-surface-dim: $base-color-surface-dim !default;
|
||||
$semantic-color-on-surface: $base-color-on-surface !default;
|
||||
$semantic-color-surface-lowest: $base-color-surface-lowest !default;
|
||||
$semantic-color-surface-low: $base-color-surface-low !default;
|
||||
$semantic-color-surface-container: $base-color-surface-container !default;
|
||||
$semantic-color-surface-high: $base-color-surface-high !default;
|
||||
$semantic-color-surface-highest: $base-color-surface-highest !default;
|
||||
$semantic-color-surface-variant: $base-color-surface-variant !default;
|
||||
$semantic-color-on-surface-variant: $base-color-on-surface-variant !default;
|
||||
$semantic-color-inverse-surface: $base-color-inverse-surface !default;
|
||||
$semantic-color-inverse-on-surface: $base-color-inverse-on-surface !default;
|
||||
|
||||
// BACKGROUND COLORS
|
||||
$semantic-color-background: $base-color-background !default;
|
||||
$semantic-color-on-background: $base-color-on-background !default;
|
||||
|
||||
// ERROR COLORS
|
||||
$semantic-color-error: $base-color-error !default;
|
||||
$semantic-color-on-error: $base-color-on-error !default;
|
||||
$semantic-color-error-container: $base-color-error-container !default;
|
||||
$semantic-color-on-error-container: $base-color-on-error-container !default;
|
||||
|
||||
// OUTLINE COLORS
|
||||
$semantic-color-outline: $base-color-outline !default;
|
||||
$semantic-color-outline-variant: $base-color-outline-variant !default;
|
||||
|
||||
// UTILITY COLORS
|
||||
$semantic-color-shadow: $base-color-shadow !default;
|
||||
$semantic-color-surface-tint: $base-color-surface-tint !default;
|
||||
$semantic-color-scrim: $base-color-scrim !default;
|
||||
@@ -0,0 +1,66 @@
|
||||
// ==========================================================================
|
||||
// STATE COLORS
|
||||
// ==========================================================================
|
||||
// Interactive state colors for hover, active, focus, and disabled states
|
||||
// Based on Material Design 3 state layer system
|
||||
// ==========================================================================
|
||||
@use '../../base/colors' as *;
|
||||
@use '../../base/css-variables' as *;
|
||||
|
||||
// PRIMARY STATE COLORS
|
||||
$semantic-color-primary-hover: rgba($base-color-primary, 0.08) !default;
|
||||
$semantic-color-primary-focus: rgba($base-color-primary, 0.12) !default;
|
||||
$semantic-color-primary-pressed: rgba($base-color-primary, 0.16) !default;
|
||||
$semantic-color-primary-selected: rgba($base-color-primary, 0.12) !default;
|
||||
$semantic-color-primary-disabled: rgba($base-color-on-surface, 0.12) !default;
|
||||
|
||||
// SECONDARY STATE COLORS
|
||||
$semantic-color-secondary-hover: rgba($base-color-secondary, 0.08) !default;
|
||||
$semantic-color-secondary-focus: rgba($base-color-secondary, 0.12) !default;
|
||||
$semantic-color-secondary-pressed: rgba($base-color-secondary, 0.16) !default;
|
||||
$semantic-color-secondary-selected: rgba($base-color-secondary, 0.12) !default;
|
||||
$semantic-color-secondary-disabled: rgba($base-color-on-surface, 0.12) !default;
|
||||
|
||||
// SURFACE STATE COLORS
|
||||
$semantic-color-surface-hover: rgba($base-color-on-surface, 0.05) !default;
|
||||
$semantic-color-surface-focus: rgba($base-color-on-surface, 0.08) !default;
|
||||
$semantic-color-surface-pressed: rgba($base-color-on-surface, 0.12) !default;
|
||||
$semantic-color-surface-selected: rgba($base-color-primary, 0.08) !default;
|
||||
$semantic-color-surface-disabled: rgba($base-color-on-surface, 0.04) !default;
|
||||
|
||||
// ERROR STATE COLORS
|
||||
$semantic-color-error-hover: rgba($base-color-error, 0.08) !default;
|
||||
$semantic-color-error-focus: rgba($base-color-error, 0.12) !default;
|
||||
$semantic-color-error-pressed: rgba($base-color-error, 0.16) !default;
|
||||
$semantic-color-error-selected: rgba($base-color-error, 0.12) !default;
|
||||
|
||||
// SUCCESS STATE COLORS
|
||||
$semantic-color-success-hover: rgba($semantic-color-success, 0.08) !default;
|
||||
$semantic-color-success-focus: rgba($semantic-color-success, 0.12) !default;
|
||||
$semantic-color-success-pressed: rgba($semantic-color-success, 0.16) !default;
|
||||
$semantic-color-success-selected: rgba($semantic-color-success, 0.12) !default;
|
||||
|
||||
// WARNING STATE COLORS
|
||||
$semantic-color-warning-hover: rgba($semantic-color-warning, 0.08) !default;
|
||||
$semantic-color-warning-focus: rgba($semantic-color-warning, 0.12) !default;
|
||||
$semantic-color-warning-pressed: rgba($semantic-color-warning, 0.16) !default;
|
||||
$semantic-color-warning-selected: rgba($semantic-color-warning, 0.12) !default;
|
||||
|
||||
// OUTLINE STATE COLORS
|
||||
$semantic-color-outline-hover: rgba($base-color-outline, 0.08) !default;
|
||||
$semantic-color-outline-focus: $base-color-outline !default;
|
||||
$semantic-color-outline-pressed: rgba($base-color-outline, 0.12) !default;
|
||||
$semantic-color-outline-disabled: rgba($base-color-outline, 0.38) !default;
|
||||
|
||||
// TEXT STATE COLORS
|
||||
$semantic-color-text-hover: rgba($base-color-on-surface, 0.87) !default;
|
||||
$semantic-color-text-focus: $base-color-on-surface !default;
|
||||
$semantic-color-text-pressed: rgba($base-color-on-surface, 0.87) !default;
|
||||
$semantic-color-text-disabled: rgba($base-color-on-surface, 0.38) !default;
|
||||
|
||||
// ELEVATION STATE COLORS (for shadows and elevation changes)
|
||||
$semantic-color-elevation-1: rgba($base-color-shadow, 0.05) !default;
|
||||
$semantic-color-elevation-2: rgba($base-color-shadow, 0.08) !default;
|
||||
$semantic-color-elevation-3: rgba($base-color-shadow, 0.12) !default;
|
||||
$semantic-color-elevation-4: rgba($base-color-shadow, 0.16) !default;
|
||||
$semantic-color-elevation-5: rgba($base-color-shadow, 0.20) !default;
|
||||
@@ -0,0 +1,55 @@
|
||||
// ==========================================================================
|
||||
// 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;
|
||||
226
projects/shared-ui/src/styles/semantic/glass/_glass-mixins.scss
Normal file
226
projects/shared-ui/src/styles/semantic/glass/_glass-mixins.scss
Normal file
@@ -0,0 +1,226 @@
|
||||
// ==========================================================================
|
||||
// GLASS EFFECT MIXINS
|
||||
// ==========================================================================
|
||||
// Comprehensive mixins for implementing glass morphism effects
|
||||
// Includes animations, fallbacks, and responsive behavior
|
||||
// ==========================================================================
|
||||
@use '../../base/css-variables' as *;
|
||||
@use '../../base/motion' as *;
|
||||
@use '../../base/spacing' as *;
|
||||
@use '../../base/glass' as *;
|
||||
@use '../../base/breakpoints' as *;
|
||||
@use '../../base/z-index' as *;
|
||||
|
||||
@use '../spacing' as *;
|
||||
@use '../colors' as *;
|
||||
|
||||
@import 'glass-borders';
|
||||
|
||||
// CORE GLASS EFFECT MIXIN
|
||||
// Primary mixin for applying glass morphism with full customization
|
||||
@mixin glass-effect(
|
||||
$variant: 'medium',
|
||||
$blur: $css-glass-blur-md,
|
||||
$border: true,
|
||||
$shadow: true,
|
||||
$animate: false,
|
||||
$duration: var(--glass-duration-normal, 300ms)
|
||||
) {
|
||||
// Background with dynamic opacity
|
||||
background: rgba($css-glass-background-base, var(--glass-opacity-#{$variant}));
|
||||
|
||||
// Backdrop blur effect
|
||||
backdrop-filter: blur($blur);
|
||||
-webkit-backdrop-filter: blur($blur);
|
||||
|
||||
// Optional border
|
||||
@if $border {
|
||||
border: $semantic-glass-border-width-thin solid $css-glass-border-color;
|
||||
}
|
||||
|
||||
// Optional shadow
|
||||
@if $shadow {
|
||||
box-shadow:
|
||||
0 4px 6px $css-glass-shadow-color,
|
||||
0 1px 3px rgba($css-glass-background-base, 0.1);
|
||||
}
|
||||
|
||||
// Animation support
|
||||
@if $animate {
|
||||
transition:
|
||||
background $duration $base-glass-easing-smooth,
|
||||
backdrop-filter $duration $base-glass-easing-smooth,
|
||||
border-color $duration $base-glass-easing-smooth,
|
||||
box-shadow $duration $base-glass-easing-smooth;
|
||||
}
|
||||
|
||||
// Performance optimization
|
||||
will-change: backdrop-filter, background;
|
||||
|
||||
// Fallback for browsers without backdrop-filter support
|
||||
@supports not (backdrop-filter: blur(1px)) {
|
||||
background: rgba($css-glass-background-base, calc(var(--glass-opacity-#{$variant}) + 0.15));
|
||||
}
|
||||
}
|
||||
|
||||
// SIMPLIFIED GLASS VARIANTS
|
||||
// Quick mixins for common glass effect intensities
|
||||
@mixin glass-translucent($animate: false) {
|
||||
@include glass-effect('translucent', $css-glass-blur-sm, true, true, $animate);
|
||||
}
|
||||
|
||||
@mixin glass-light($animate: false) {
|
||||
@include glass-effect('light', $css-glass-blur-md, true, true, $animate);
|
||||
}
|
||||
|
||||
@mixin glass-medium($animate: false) {
|
||||
@include glass-effect('medium', $css-glass-blur-md, true, true, $animate);
|
||||
}
|
||||
|
||||
@mixin glass-heavy($animate: false) {
|
||||
@include glass-effect('heavy', $css-glass-blur-lg, true, true, $animate);
|
||||
}
|
||||
|
||||
@mixin glass-frosted($animate: false) {
|
||||
@include glass-effect('frosted', $css-glass-blur-xl, true, true, $animate);
|
||||
}
|
||||
|
||||
// GLASS TRANSITION MIXIN
|
||||
// Animates from one glass state to another
|
||||
@mixin glass-transition(
|
||||
$from-variant: 'opaque',
|
||||
$to-variant: 'medium',
|
||||
$duration: var(--glass-duration-normal, 300ms),
|
||||
$trigger: 'hover'
|
||||
) {
|
||||
// Initial state
|
||||
@if $from-variant == 'opaque' {
|
||||
background: rgb($css-glass-background-base);
|
||||
backdrop-filter: blur(0);
|
||||
-webkit-backdrop-filter: blur(0);
|
||||
border: $semantic-glass-border-width-thin solid transparent;
|
||||
} @else {
|
||||
@include glass-effect($from-variant, $css-glass-blur-md, true, true, false);
|
||||
}
|
||||
|
||||
// Smooth transition properties
|
||||
transition:
|
||||
background $duration $base-glass-easing-smooth,
|
||||
backdrop-filter $duration $base-glass-easing-smooth,
|
||||
border-color $duration $base-glass-easing-smooth,
|
||||
box-shadow $duration $base-glass-easing-smooth,
|
||||
transform $duration $base-glass-easing-smooth;
|
||||
|
||||
// Target state based on trigger
|
||||
@if $trigger == 'hover' {
|
||||
&:hover {
|
||||
@include glass-effect($to-variant, $css-glass-blur-md, true, true, false);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
} @else if $trigger == 'focus' {
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@include glass-effect($to-variant, $css-glass-blur-md, true, true, false);
|
||||
}
|
||||
} @else if $trigger == 'active' {
|
||||
&.glass-active,
|
||||
&[data-glass-active="true"] {
|
||||
@include glass-effect($to-variant, $css-glass-blur-md, true, true, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// GLASS BORDER ENHANCEMENT MIXIN
|
||||
// Adds subtle border highlights to enhance glass illusion
|
||||
@mixin glass-border-enhance($style: 'subtle') {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $semantic-glass-border-highlight-top;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $semantic-glass-border-highlight-bottom;
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// RESPONSIVE GLASS MIXIN
|
||||
// Adjusts glass intensity based on screen size
|
||||
@mixin glass-responsive($mobile-variant: 'light', $desktop-variant: 'medium') {
|
||||
@include glass-effect($mobile-variant);
|
||||
|
||||
@media (min-width: $base-breakpoint-md) {
|
||||
@include glass-effect($desktop-variant);
|
||||
}
|
||||
}
|
||||
|
||||
// GLASS COMPONENT MIXIN
|
||||
// Complete glass component styling with all enhancements
|
||||
@mixin glass-component(
|
||||
$variant: 'medium',
|
||||
$border-radius: $semantic-glass-border-radius-md,
|
||||
$padding: $semantic-spacing-component-md,
|
||||
$enhance-borders: true,
|
||||
$animate: true
|
||||
) {
|
||||
@include glass-effect($variant, $css-glass-blur-md, true, true, $animate);
|
||||
|
||||
border-radius: $border-radius;
|
||||
padding: $padding;
|
||||
|
||||
@if $enhance-borders {
|
||||
@include glass-border-enhance();
|
||||
}
|
||||
|
||||
// Ensure content is readable on glass background
|
||||
color: $semantic-color-text-primary;
|
||||
|
||||
// Prevent content from interfering with glass effect
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
// UTILITY MIXIN FOR GLASS ANIMATIONS
|
||||
@mixin glass-keyframes($name, $from-variant: 'opaque', $to-variant: 'medium') {
|
||||
@keyframes #{$name} {
|
||||
from {
|
||||
@if $from-variant == 'opaque' {
|
||||
background: rgb($css-glass-background-base);
|
||||
backdrop-filter: blur(0);
|
||||
} @else {
|
||||
background: rgba($css-glass-background-base, var(--glass-opacity-#{$from-variant}));
|
||||
backdrop-filter: blur($css-glass-blur-sm);
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
background: rgba($css-glass-background-base, var(--glass-opacity-#{$to-variant}));
|
||||
backdrop-filter: blur($css-glass-blur-md);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// GLASS DISABLED STATE MIXIN
|
||||
@mixin glass-disabled() {
|
||||
background: rgba($css-glass-background-base, calc($css-glass-opacity-light * 0.5));
|
||||
backdrop-filter: blur($css-glass-blur-xs);
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
// ==========================================================================
|
||||
// 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;
|
||||
@@ -0,0 +1,236 @@
|
||||
// ==========================================================================
|
||||
// GLASS UTILITY CLASSES
|
||||
// ==========================================================================
|
||||
// Ready-to-use utility classes for rapid prototyping with glass effects
|
||||
// Can be applied directly in HTML or used as @extend placeholders
|
||||
// ==========================================================================
|
||||
|
||||
@use '../../base/css-variables' as *;
|
||||
@use '../../base/motion' as *;
|
||||
@use '../../base/spacing' as *;
|
||||
@use '../../base/glass' as *;
|
||||
@use '../../base/glass' as *;
|
||||
@use '../../base/breakpoints' as *;
|
||||
@use '../../base/z-index' as *;
|
||||
|
||||
@use '../spacing' as *;
|
||||
@use '../colors' as *;
|
||||
|
||||
// CORE GLASS UTILITY CLASSES
|
||||
// Basic glass effect classes for each variant
|
||||
.glass-translucent {
|
||||
@include glass-translucent();
|
||||
}
|
||||
|
||||
.glass-light {
|
||||
@include glass-light();
|
||||
}
|
||||
|
||||
.glass-medium {
|
||||
@include glass-medium();
|
||||
}
|
||||
|
||||
.glass-heavy {
|
||||
@include glass-heavy();
|
||||
}
|
||||
|
||||
.glass-frosted {
|
||||
@include glass-frosted();
|
||||
}
|
||||
|
||||
// ANIMATED GLASS UTILITIES
|
||||
// Glass effects with built-in animations
|
||||
.glass-translucent-animated {
|
||||
@include glass-translucent(true);
|
||||
}
|
||||
|
||||
.glass-light-animated {
|
||||
@include glass-light(true);
|
||||
}
|
||||
|
||||
.glass-medium-animated {
|
||||
@include glass-medium(true);
|
||||
}
|
||||
|
||||
.glass-heavy-animated {
|
||||
@include glass-heavy(true);
|
||||
}
|
||||
|
||||
.glass-frosted-animated {
|
||||
@include glass-frosted(true);
|
||||
}
|
||||
|
||||
// TRANSITION UTILITIES
|
||||
// Classes for animating to glass effects on interaction
|
||||
.glass-on-hover {
|
||||
@include glass-transition('opaque', 'medium', var(--glass-duration-normal), 'hover');
|
||||
}
|
||||
|
||||
.glass-on-focus {
|
||||
@include glass-transition('opaque', 'light', var(--glass-duration-normal), 'focus');
|
||||
}
|
||||
|
||||
.glass-on-active {
|
||||
@include glass-transition('opaque', 'heavy', var(--glass-duration-normal), 'active');
|
||||
}
|
||||
|
||||
// SPECIFIC TRANSITION VARIANTS
|
||||
@each $variant in (translucent, light, medium, heavy, frosted) {
|
||||
.glass-hover-to-#{$variant} {
|
||||
@include glass-transition('opaque', $variant, var(--glass-duration-normal), 'hover');
|
||||
}
|
||||
|
||||
.glass-focus-to-#{$variant} {
|
||||
@include glass-transition('opaque', $variant, var(--glass-duration-normal), 'focus');
|
||||
}
|
||||
|
||||
.glass-active-to-#{$variant} {
|
||||
@include glass-transition('opaque', $variant, var(--glass-duration-normal), 'active');
|
||||
}
|
||||
}
|
||||
|
||||
// COMPONENT-SPECIFIC UTILITIES
|
||||
// Pre-configured glass effects for common components
|
||||
.glass-card {
|
||||
@include glass-component('medium', $semantic-glass-border-radius-lg);
|
||||
}
|
||||
|
||||
.glass-modal {
|
||||
@include glass-component('heavy', $semantic-glass-border-radius-xl);
|
||||
}
|
||||
|
||||
.glass-dropdown {
|
||||
@include glass-component('frosted', $semantic-glass-border-radius-md, $semantic-spacing-component-sm);
|
||||
}
|
||||
|
||||
.glass-tooltip {
|
||||
@include glass-component('light', $semantic-glass-border-radius-sm, $semantic-spacing-component-xs);
|
||||
}
|
||||
|
||||
.glass-navbar {
|
||||
@include glass-component('frosted', 0, $semantic-spacing-component-md, false);
|
||||
}
|
||||
|
||||
.glass-button {
|
||||
@include glass-component('light', $semantic-glass-border-radius-md, $semantic-spacing-component-sm);
|
||||
@include glass-transition('light', 'medium', var(--glass-duration-fast), 'hover');
|
||||
|
||||
&:active {
|
||||
@include glass-effect('heavy', $css-glass-blur-lg, true, true, false);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// BLUR-ONLY UTILITIES
|
||||
// For cases where you only want the blur effect without the glass background
|
||||
.blur-xs {
|
||||
backdrop-filter: blur($css-glass-blur-xs);
|
||||
-webkit-backdrop-filter: blur($css-glass-blur-xs);
|
||||
}
|
||||
|
||||
.blur-sm {
|
||||
backdrop-filter: blur($css-glass-blur-sm);
|
||||
-webkit-backdrop-filter: blur($css-glass-blur-sm);
|
||||
}
|
||||
|
||||
.blur-md {
|
||||
backdrop-filter: blur($css-glass-blur-md);
|
||||
-webkit-backdrop-filter: blur($css-glass-blur-md);
|
||||
}
|
||||
|
||||
.blur-lg {
|
||||
backdrop-filter: blur($css-glass-blur-lg);
|
||||
-webkit-backdrop-filter: blur($css-glass-blur-lg);
|
||||
}
|
||||
|
||||
.blur-xl {
|
||||
backdrop-filter: blur($css-glass-blur-xl);
|
||||
-webkit-backdrop-filter: blur($css-glass-blur-xl);
|
||||
}
|
||||
|
||||
// GLASS STATE MODIFIERS
|
||||
// Utility classes for different states
|
||||
.glass-disabled {
|
||||
@include glass-disabled();
|
||||
}
|
||||
|
||||
.glass-interactive {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// RESPONSIVE GLASS UTILITIES
|
||||
.glass-responsive {
|
||||
@include glass-responsive('light', 'medium');
|
||||
}
|
||||
|
||||
.glass-responsive-heavy {
|
||||
@include glass-responsive('medium', 'heavy');
|
||||
}
|
||||
|
||||
// GLASS OVERLAY UTILITIES
|
||||
.glass-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $base-z-index-overlay;
|
||||
@include glass-effect('translucent', $css-glass-blur-lg);
|
||||
}
|
||||
|
||||
.glass-modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $base-z-index-modal-backdrop;
|
||||
background: rgba($css-glass-background-base, calc($css-glass-opacity-translucent * 0.5));
|
||||
backdrop-filter: blur($css-glass-blur-md);
|
||||
-webkit-backdrop-filter: blur($css-glass-blur-md);
|
||||
}
|
||||
|
||||
// GLASS ANIMATION CLASSES
|
||||
// For JavaScript-triggered animations
|
||||
.glass-fade-in {
|
||||
animation: glassEffectFadeIn var(--glass-duration-normal) $base-glass-easing-smooth forwards;
|
||||
}
|
||||
|
||||
.glass-fade-out {
|
||||
animation: glassEffectFadeOut var(--glass-duration-normal) $base-glass-easing-smooth forwards;
|
||||
}
|
||||
|
||||
// KEYFRAME ANIMATIONS
|
||||
@keyframes glassEffectFadeIn {
|
||||
from {
|
||||
background: transparent;
|
||||
backdrop-filter: blur(0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
background: rgba($css-glass-background-base, $css-glass-opacity-medium);
|
||||
backdrop-filter: blur($css-glass-blur-md);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glassEffectFadeOut {
|
||||
from {
|
||||
background: rgba($css-glass-background-base, $css-glass-opacity-medium);
|
||||
backdrop-filter: blur($css-glass-blur-md);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
background: transparent;
|
||||
backdrop-filter: blur(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
12
projects/shared-ui/src/styles/semantic/glass/_index.scss
Normal file
12
projects/shared-ui/src/styles/semantic/glass/_index.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
// ==========================================================================
|
||||
// GLASS EFFECT SEMANTIC TOKENS
|
||||
// ==========================================================================
|
||||
// Complete glass morphism design system with semantic tokens, mixins, and utilities
|
||||
// Supports light/dark mode theming and responsive behavior
|
||||
// ==========================================================================
|
||||
|
||||
// Import all glass effect modules
|
||||
@import 'glass-surfaces';
|
||||
@import 'glass-borders';
|
||||
@import 'glass-mixins';
|
||||
@import 'glass-utilities';
|
||||
27
projects/shared-ui/src/styles/semantic/index.scss
Normal file
27
projects/shared-ui/src/styles/semantic/index.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC TOKENS ENTRY POINT
|
||||
// ==========================================================================
|
||||
// Semantic tokens built on top of base design tokens
|
||||
// Forward all semantic token categories for consumption by other projects
|
||||
// ==========================================================================
|
||||
|
||||
// Forward base tokens first (semantic tokens depend on base tokens)
|
||||
@forward '../base';
|
||||
|
||||
// Forward semantic token categories
|
||||
@forward 'colors/index';
|
||||
@forward 'typography/index';
|
||||
@forward 'spacing/index';
|
||||
@forward 'motion/index';
|
||||
//@forward 'elevation/index';
|
||||
//@forward 'layout/index';
|
||||
//@forward 'breakpoints/index';
|
||||
|
||||
// Forward additional semantic categories
|
||||
@forward 'borders/index';
|
||||
@forward 'shadows/index';
|
||||
@forward 'sizing/index';
|
||||
@forward 'glass/index';
|
||||
@forward 'z-index/index';
|
||||
@forward 'opacity/index';
|
||||
|
||||
10
projects/shared-ui/src/styles/semantic/motion/_index.scss
Normal file
10
projects/shared-ui/src/styles/semantic/motion/_index.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC MOTION INDEX
|
||||
// ==========================================================================
|
||||
// Contextual motion system for animations and interactions
|
||||
// ==========================================================================
|
||||
|
||||
// Note: base tokens imported at semantic/index level
|
||||
|
||||
// Semantic motion mappings
|
||||
@import 'semantic-motion';
|
||||
@@ -0,0 +1,287 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC MOTION
|
||||
// ==========================================================================
|
||||
// Meaningful motion tokens for animations and interactions
|
||||
// Maps base motion values to contextual usage patterns
|
||||
// ==========================================================================
|
||||
@use '../../base/motion' as *;
|
||||
|
||||
// DURATION TOKENS - Semantic timing values
|
||||
$semantic-duration-instant: $base-motion-duration-instant !default; // 50ms - Instant feedback
|
||||
$semantic-duration-fast: $base-motion-duration-fast !default; // 150ms - Quick interactions
|
||||
$semantic-duration-short: $base-motion-duration-normal !default; // 300ms - Standard transitions
|
||||
$semantic-duration-medium: $base-motion-duration-slow !default; // 500ms - Moderate animations
|
||||
$semantic-duration-long: $base-motion-duration-slower !default; // 700ms - Slower transitions
|
||||
|
||||
// EASING TOKENS - Semantic timing functions
|
||||
$semantic-easing-standard: $base-motion-easing-ease-in-out !default; // Standard easing curve
|
||||
$semantic-easing-decelerate: $base-motion-easing-ease-out !default; // Deceleration curve
|
||||
$semantic-easing-accelerate: $base-motion-easing-ease-in !default; // Acceleration curve
|
||||
$semantic-easing-spring: $base-motion-easing-spring !default; // Spring-like easing
|
||||
|
||||
// INTERACTION ANIMATIONS - User interface interactions
|
||||
$semantic-motion-button-hover: (
|
||||
duration: $base-motion-duration-fast,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: $base-motion-transition-property-colors,
|
||||
transform: $base-motion-hover-transform-scale-sm,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-button-press: (
|
||||
duration: $base-motion-duration-instant,
|
||||
timing: $base-motion-easing-ease-in,
|
||||
property: $base-motion-transition-property-transform,
|
||||
transform: scale(0.98),
|
||||
) !default;
|
||||
|
||||
$semantic-motion-link-hover: (
|
||||
duration: $base-motion-duration-fast,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: $base-motion-transition-property-colors,
|
||||
) !default;
|
||||
|
||||
// FORM ANIMATIONS - Input and form interactions
|
||||
$semantic-motion-input-focus: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: border-color box-shadow,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-input-error: (
|
||||
duration: $base-motion-duration-fast,
|
||||
timing: $base-motion-easing-spring,
|
||||
property: border-color,
|
||||
transform: translateX(-2px),
|
||||
) !default;
|
||||
|
||||
$semantic-motion-checkbox-check: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-spring,
|
||||
property: $base-motion-transition-property-transform,
|
||||
) !default;
|
||||
|
||||
// CARD ANIMATIONS - Card and container interactions
|
||||
$semantic-motion-card-hover: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: box-shadow transform,
|
||||
transform: $base-motion-hover-transform-lift-sm,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-card-press: (
|
||||
duration: $base-motion-duration-fast,
|
||||
timing: $base-motion-easing-ease-in,
|
||||
property: $base-motion-transition-property-transform,
|
||||
transform: $base-motion-hover-transform-scale-sm,
|
||||
) !default;
|
||||
|
||||
// NAVIGATION ANIMATIONS - Menu and navigation
|
||||
$semantic-motion-nav-item-hover: (
|
||||
duration: $base-motion-duration-fast,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: $base-motion-transition-property-colors,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-dropdown-enter: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: opacity transform,
|
||||
transform: translateY(-8px),
|
||||
) !default;
|
||||
|
||||
$semantic-motion-dropdown-exit: (
|
||||
duration: $base-motion-duration-fast,
|
||||
timing: $base-motion-easing-ease-in,
|
||||
property: opacity transform,
|
||||
) !default;
|
||||
|
||||
// MODAL AND OVERLAY ANIMATIONS
|
||||
$semantic-motion-modal-enter: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: opacity transform,
|
||||
transform: scale(0.95) translateY(-20px),
|
||||
) !default;
|
||||
|
||||
$semantic-motion-modal-exit: (
|
||||
duration: $base-motion-duration-fast,
|
||||
timing: $base-motion-easing-ease-in,
|
||||
property: opacity transform,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-backdrop-enter: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: $base-motion-transition-property-opacity,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-backdrop-exit: (
|
||||
duration: $base-motion-duration-fast,
|
||||
timing: $base-motion-easing-ease-in,
|
||||
property: $base-motion-transition-property-opacity,
|
||||
) !default;
|
||||
|
||||
// TOAST AND NOTIFICATION ANIMATIONS
|
||||
$semantic-motion-toast-enter: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-spring,
|
||||
property: opacity transform,
|
||||
transform: translateX(100%),
|
||||
) !default;
|
||||
|
||||
$semantic-motion-toast-exit: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-in,
|
||||
property: opacity transform,
|
||||
transform: translateX(100%),
|
||||
) !default;
|
||||
|
||||
// LOADING ANIMATIONS
|
||||
$semantic-motion-spinner: (
|
||||
duration: $base-motion-duration-slowest,
|
||||
timing: $base-motion-easing-linear,
|
||||
property: $base-motion-transition-property-transform,
|
||||
iteration-count: infinite,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-pulse: (
|
||||
duration: $base-motion-duration-slower,
|
||||
timing: $base-motion-easing-ease-in-out,
|
||||
property: $base-motion-transition-property-opacity,
|
||||
iteration-count: infinite,
|
||||
direction: alternate,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-skeleton: (
|
||||
duration: 1500ms,
|
||||
timing: $base-motion-easing-ease-in-out,
|
||||
property: background-position,
|
||||
iteration-count: infinite,
|
||||
) !default;
|
||||
|
||||
// PAGE TRANSITIONS
|
||||
$semantic-motion-page-enter: (
|
||||
duration: $base-motion-duration-slow,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: opacity transform,
|
||||
transform: translateY(20px),
|
||||
) !default;
|
||||
|
||||
$semantic-motion-page-exit: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-in,
|
||||
property: opacity transform,
|
||||
) !default;
|
||||
|
||||
// UTILITY MOTIONS - Common animation patterns
|
||||
$semantic-motion-fade-in: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: $base-motion-transition-property-opacity,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-fade-out: (
|
||||
duration: $base-motion-duration-fast,
|
||||
timing: $base-motion-easing-ease-in,
|
||||
property: $base-motion-transition-property-opacity,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-slide-up: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: opacity transform,
|
||||
transform: translateY(16px),
|
||||
) !default;
|
||||
|
||||
$semantic-motion-slide-down: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: opacity transform,
|
||||
transform: translateY(-16px),
|
||||
) !default;
|
||||
|
||||
// ACCESSIBILITY MOTIONS - Respecting user preferences
|
||||
$semantic-motion-reduced: (
|
||||
duration: $base-motion-duration-instant,
|
||||
timing: $base-motion-easing-linear,
|
||||
property: $base-motion-transition-property-none,
|
||||
) !default;
|
||||
|
||||
$semantic-motion-standard: (
|
||||
duration: $base-motion-duration-normal,
|
||||
timing: $base-motion-easing-ease-out,
|
||||
property: $base-motion-transition-property-all,
|
||||
) !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC MOTION DURATIONS - Direct access to duration values
|
||||
$semantic-motion-duration-instant: $base-motion-duration-instant !default;
|
||||
$semantic-motion-duration-fast: $base-motion-duration-fast !default;
|
||||
$semantic-motion-duration-normal: $base-motion-duration-normal !default;
|
||||
$semantic-motion-duration-slow: $base-motion-duration-slow !default;
|
||||
$semantic-motion-duration-slower: $base-motion-duration-slower !default;
|
||||
$semantic-motion-duration-slowest: $base-motion-duration-slowest !default;
|
||||
$semantic-motion-duration-ultra-slow: $base-motion-duration-ultra-slow !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC MOTION EASING - Direct access to easing functions
|
||||
$semantic-motion-easing-linear: $base-motion-easing-linear !default;
|
||||
$semantic-motion-easing-ease: $base-motion-easing-ease !default;
|
||||
$semantic-motion-easing-ease-in: $base-motion-easing-ease-in !default;
|
||||
$semantic-motion-easing-ease-out: $base-motion-easing-ease-out !default;
|
||||
$semantic-motion-easing-ease-in-out: $base-motion-easing-ease-in-out !default;
|
||||
$semantic-motion-easing-spring: $base-motion-easing-spring !default;
|
||||
$semantic-motion-easing-bounce: $base-motion-easing-bounce !default;
|
||||
$semantic-motion-easing-sharp: $base-motion-easing-sharp !default;
|
||||
$semantic-motion-easing-elastic: $base-motion-easing-elastic !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC TRANSITION PROPERTIES - Direct access to transition properties
|
||||
$semantic-motion-transition-property-none: $base-motion-transition-property-none !default;
|
||||
$semantic-motion-transition-property-all: $base-motion-transition-property-all !default;
|
||||
$semantic-motion-transition-property-colors: $base-motion-transition-property-colors !default;
|
||||
$semantic-motion-transition-property-opacity: $base-motion-transition-property-opacity !default;
|
||||
$semantic-motion-transition-property-shadow: $base-motion-transition-property-shadow !default;
|
||||
$semantic-motion-transition-property-transform: $base-motion-transition-property-transform !default;
|
||||
$semantic-motion-transition-property-spacing: $base-motion-transition-property-spacing !default;
|
||||
$semantic-motion-transition-property-size: $base-motion-transition-property-size !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC TRANSITION DURATIONS - Direct access to transition duration values
|
||||
$semantic-motion-transition-duration-0: $base-motion-transition-duration-0 !default;
|
||||
$semantic-motion-transition-duration-75: $base-motion-transition-duration-75 !default;
|
||||
$semantic-motion-transition-duration-100: $base-motion-transition-duration-100 !default;
|
||||
$semantic-motion-transition-duration-150: $base-motion-transition-duration-150 !default;
|
||||
$semantic-motion-transition-duration-200: $base-motion-transition-duration-200 !default;
|
||||
$semantic-motion-transition-duration-300: $base-motion-transition-duration-300 !default;
|
||||
$semantic-motion-transition-duration-500: $base-motion-transition-duration-500 !default;
|
||||
$semantic-motion-transition-duration-700: $base-motion-transition-duration-700 !default;
|
||||
$semantic-motion-transition-duration-1000: $base-motion-transition-duration-1000 !default;
|
||||
$semantic-motion-transition-duration-1500: $base-motion-transition-duration-1500 !default;
|
||||
$semantic-motion-transition-duration-2000: $base-motion-transition-duration-2000 !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC TRANSITION TIMING FUNCTIONS - Direct access to timing functions
|
||||
$semantic-motion-transition-timing-linear: $base-motion-transition-timing-linear !default;
|
||||
$semantic-motion-transition-timing-in: $base-motion-transition-timing-in !default;
|
||||
$semantic-motion-transition-timing-out: $base-motion-transition-timing-out !default;
|
||||
$semantic-motion-transition-timing-in-out: $base-motion-transition-timing-in-out !default;
|
||||
$semantic-motion-transition-timing-spring: $base-motion-transition-timing-spring !default;
|
||||
$semantic-motion-transition-timing-out-back: $base-motion-transition-timing-out-back !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC TRANSITION DELAYS - Direct access to transition delay values
|
||||
$semantic-motion-transition-delay-0: $base-motion-transition-delay-0 !default;
|
||||
$semantic-motion-transition-delay-75: $base-motion-transition-delay-75 !default;
|
||||
$semantic-motion-transition-delay-100: $base-motion-transition-delay-100 !default;
|
||||
$semantic-motion-transition-delay-150: $base-motion-transition-delay-150 !default;
|
||||
$semantic-motion-transition-delay-200: $base-motion-transition-delay-200 !default;
|
||||
$semantic-motion-transition-delay-300: $base-motion-transition-delay-300 !default;
|
||||
$semantic-motion-transition-delay-500: $base-motion-transition-delay-500 !default;
|
||||
$semantic-motion-transition-delay-700: $base-motion-transition-delay-700 !default;
|
||||
$semantic-motion-transition-delay-1000: $base-motion-transition-delay-1000 !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC HOVER TRANSFORMS - Direct access to hover transform values
|
||||
$semantic-motion-hover-transform-none: $base-motion-hover-transform-none !default;
|
||||
$semantic-motion-hover-transform-scale-sm: $base-motion-hover-transform-scale-sm !default;
|
||||
$semantic-motion-hover-transform-scale-md: $base-motion-hover-transform-scale-md !default;
|
||||
$semantic-motion-hover-transform-scale-lg: $base-motion-hover-transform-scale-lg !default;
|
||||
$semantic-motion-hover-transform-lift-sm: $base-motion-hover-transform-lift-sm !default;
|
||||
$semantic-motion-hover-transform-lift-md: $base-motion-hover-transform-lift-md !default;
|
||||
$semantic-motion-hover-transform-lift-lg: $base-motion-hover-transform-lift-lg !default;
|
||||
$semantic-motion-hover-transform-scale-lift-sm: $base-motion-hover-transform-scale-lift-sm !default;
|
||||
$semantic-motion-hover-transform-scale-lift-md: $base-motion-hover-transform-scale-lift-md !default;
|
||||
@@ -0,0 +1,7 @@
|
||||
// ==========================================================================
|
||||
// OPACITY INDEX
|
||||
// ==========================================================================
|
||||
// Main index file for semantic opacity tokens
|
||||
// ==========================================================================
|
||||
|
||||
@forward 'semantic-opacity';
|
||||
@@ -0,0 +1,80 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC OPACITY
|
||||
// ==========================================================================
|
||||
// Meaningful opacity tokens for visibility and transparency effects
|
||||
// Maps base opacity values to contextual usage patterns
|
||||
// ==========================================================================
|
||||
@use '../../base/opacity' as *;
|
||||
|
||||
// VISIBILITY HIERARCHY - Progressive transparency levels
|
||||
$semantic-opacity-invisible: $base-opacity-0 !default; // Completely transparent
|
||||
$semantic-opacity-subtle: $base-opacity-5 !default; // Barely visible
|
||||
$semantic-opacity-faint: $base-opacity-10 !default; // Very faint
|
||||
$semantic-opacity-light: $base-opacity-20 !default; // Light transparency
|
||||
$semantic-opacity-medium: $base-opacity-50 !default; // Half transparent
|
||||
$semantic-opacity-heavy: $base-opacity-75 !default; // Mostly opaque
|
||||
$semantic-opacity-opaque: $base-opacity-100 !default; // Fully opaque
|
||||
|
||||
// INTERACTION STATES - Element state opacity
|
||||
$semantic-opacity-disabled: $base-opacity-40 !default; // Disabled elements
|
||||
$semantic-opacity-hover: $base-opacity-80 !default; // Hover state
|
||||
$semantic-opacity-active: $base-opacity-90 !default; // Active/pressed state
|
||||
$semantic-opacity-focus: $base-opacity-100 !default; // Focused elements
|
||||
|
||||
// OVERLAY OPACITY - Background overlays and modals
|
||||
$semantic-opacity-backdrop: $base-opacity-50 !default; // Modal backdrop
|
||||
$semantic-opacity-scrim: $base-opacity-75 !default; // Dark overlay
|
||||
$semantic-opacity-overlay-light: $base-opacity-10 !default; // Light overlay
|
||||
$semantic-opacity-overlay-medium: $base-opacity-30 !default; // Medium overlay
|
||||
$semantic-opacity-overlay-heavy: $base-opacity-60 !default; // Heavy overlay
|
||||
|
||||
// TEXT OPACITY - Text visibility levels
|
||||
$semantic-opacity-text-primary: $base-opacity-100 !default; // Primary text
|
||||
$semantic-opacity-text-secondary: $base-opacity-70 !default; // Secondary text
|
||||
$semantic-opacity-text-tertiary: $base-opacity-50 !default; // Tertiary text
|
||||
$semantic-opacity-text-disabled: $base-opacity-30 !default; // Disabled text
|
||||
$semantic-opacity-text-placeholder: $base-opacity-60 !default; // Placeholder text
|
||||
|
||||
// BORDER OPACITY - Border visibility levels
|
||||
$semantic-opacity-border-subtle: $base-opacity-10 !default; // Subtle borders
|
||||
$semantic-opacity-border-normal: $base-opacity-20 !default; // Normal borders
|
||||
$semantic-opacity-border-emphasis: $base-opacity-40 !default; // Emphasized borders
|
||||
$semantic-opacity-border-strong: $base-opacity-60 !default; // Strong borders
|
||||
|
||||
// SHADOW OPACITY - Shadow transparency levels
|
||||
$semantic-opacity-shadow-subtle: $base-opacity-5 !default; // Subtle shadows
|
||||
$semantic-opacity-shadow-normal: $base-opacity-10 !default; // Normal shadows
|
||||
$semantic-opacity-shadow-emphasis: $base-opacity-25 !default; // Emphasized shadows
|
||||
$semantic-opacity-shadow-strong: $base-opacity-40 !default; // Strong shadows
|
||||
|
||||
// LOADING STATES - Loading animation opacity
|
||||
$semantic-opacity-loading-min: $base-opacity-30 !default; // Loading animation min
|
||||
$semantic-opacity-loading-max: $base-opacity-70 !default; // Loading animation max
|
||||
$semantic-opacity-skeleton: $base-opacity-10 !default; // Skeleton loading
|
||||
|
||||
// NOTIFICATION OPACITY - Alert and notification transparency
|
||||
$semantic-opacity-toast: $base-opacity-95 !default; // Toast notifications
|
||||
$semantic-opacity-alert: $base-opacity-90 !default; // Alert messages
|
||||
$semantic-opacity-badge: $base-opacity-100 !default; // Badge elements
|
||||
|
||||
// GLASS EFFECT OPACITY - Glassmorphism transparency levels
|
||||
$semantic-opacity-glass-light: $base-opacity-10 !default; // Light glass effect
|
||||
$semantic-opacity-glass-medium: $base-opacity-20 !default; // Medium glass effect
|
||||
$semantic-opacity-glass-heavy: $base-opacity-30 !default; // Heavy glass effect
|
||||
|
||||
// INDIVIDUAL SEMANTIC OPACITY TOKENS - Direct access to all base opacity values
|
||||
$semantic-opacity-0: $base-opacity-0 !default;
|
||||
$semantic-opacity-5: $base-opacity-5 !default;
|
||||
$semantic-opacity-10: $base-opacity-10 !default;
|
||||
$semantic-opacity-20: $base-opacity-20 !default;
|
||||
$semantic-opacity-25: $base-opacity-25 !default;
|
||||
$semantic-opacity-30: $base-opacity-30 !default;
|
||||
$semantic-opacity-40: $base-opacity-40 !default;
|
||||
$semantic-opacity-50: $base-opacity-50 !default;
|
||||
$semantic-opacity-60: $base-opacity-60 !default;
|
||||
$semantic-opacity-70: $base-opacity-70 !default;
|
||||
$semantic-opacity-75: $base-opacity-75 !default;
|
||||
$semantic-opacity-80: $base-opacity-80 !default;
|
||||
$semantic-opacity-90: $base-opacity-90 !default;
|
||||
$semantic-opacity-95: $base-opacity-95 !default;
|
||||
$semantic-opacity-100: $base-opacity-100 !default;
|
||||
14
projects/shared-ui/src/styles/semantic/shadows/_index.scss
Normal file
14
projects/shared-ui/src/styles/semantic/shadows/_index.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC SHADOWS INDEX
|
||||
// ==========================================================================
|
||||
// Contextual shadow system for elevation and depth hierarchy
|
||||
// ==========================================================================
|
||||
|
||||
// Note: base tokens imported at semantic/index level
|
||||
|
||||
// Import semantic colors for context-aware shadows
|
||||
//@import '../colors/semantic-colors';
|
||||
|
||||
// Semantic shadow mappings
|
||||
@import 'semantic-shadows';
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
// ==========================================================================
|
||||
// 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;
|
||||
10
projects/shared-ui/src/styles/semantic/sizing/_index.scss
Normal file
10
projects/shared-ui/src/styles/semantic/sizing/_index.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC SIZING INDEX
|
||||
// ==========================================================================
|
||||
// Contextual sizing system for components and layout elements
|
||||
// ==========================================================================
|
||||
|
||||
// Note: base tokens imported at semantic/index level
|
||||
|
||||
// Semantic sizing mappings
|
||||
@import 'semantic-sizing';
|
||||
@@ -0,0 +1,122 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC SIZING
|
||||
// ==========================================================================
|
||||
// Meaningful sizing tokens for components and layout elements
|
||||
// Maps base sizing values to contextual usage patterns
|
||||
// ==========================================================================
|
||||
@use '../../base/sizing' as *;
|
||||
|
||||
// COMPONENT SIZING - UI element dimensions
|
||||
$semantic-sizing-button-height-sm: $base-sizing-button-sm !default; // 32px - Small button height
|
||||
$semantic-sizing-button-height-md: $base-sizing-button-md !default; // 40px - Medium button height
|
||||
$semantic-sizing-button-height-lg: $base-sizing-button-lg !default; // 48px - Large button height
|
||||
|
||||
$semantic-sizing-input-height-sm: $base-sizing-input-sm !default; // 32px - Small input height
|
||||
$semantic-sizing-input-height-md: $base-sizing-input-md !default; // 40px - Medium input height
|
||||
$semantic-sizing-input-height-lg: $base-sizing-input-lg !default; // 48px - Large input height
|
||||
|
||||
// ICON SIZING - Icon dimensions for different contexts
|
||||
$semantic-sizing-icon-inline: $base-sizing-icon-sm !default; // 16px - Inline with text
|
||||
$semantic-sizing-icon-button: $base-sizing-icon-md !default; // 20px - In buttons
|
||||
$semantic-sizing-icon-navigation: $base-sizing-icon-lg !default; // 24px - Navigation items
|
||||
$semantic-sizing-icon-header: $base-sizing-icon-xl !default; // 32px - Page headers
|
||||
$semantic-sizing-icon-hero: $base-sizing-icon-3xl !default; // 48px - Hero sections
|
||||
$semantic-sizing-icon-feature: $base-sizing-icon-4xl !default; // 64px - Feature highlights
|
||||
|
||||
// AVATAR SIZING - User avatar dimensions
|
||||
$semantic-sizing-avatar-inline: $base-sizing-avatar-xs !default; // 24px - Inline avatars
|
||||
$semantic-sizing-avatar-comment: $base-sizing-avatar-sm !default; // 32px - Comment avatars
|
||||
$semantic-sizing-avatar-card: $base-sizing-avatar-md !default; // 40px - Card avatars
|
||||
$semantic-sizing-avatar-nav: $base-sizing-avatar-lg !default; // 48px - Navigation avatars
|
||||
$semantic-sizing-avatar-profile: $base-sizing-avatar-xl !default; // 64px - Profile avatars
|
||||
$semantic-sizing-avatar-hero: $base-sizing-avatar-2xl !default; // 80px - Hero profile avatars
|
||||
|
||||
// INTERACTION SIZING - Touch and click targets
|
||||
$semantic-sizing-touch-minimum: $base-sizing-touch-minimum !default; // 44px - Minimum touch target
|
||||
$semantic-sizing-touch-comfortable: $base-sizing-touch-comfortable !default; // 48px - Comfortable touch
|
||||
$semantic-sizing-touch-spacious: $base-sizing-touch-spacious !default; // 56px - Spacious touch
|
||||
|
||||
$semantic-sizing-clickable-minimum: $base-sizing-interaction-min-clickable !default; // 32px - Minimum clickable
|
||||
|
||||
// LAYOUT SIZING - Container and layout dimensions
|
||||
$semantic-sizing-sidebar-collapsed: $base-sizing-width-16 !default; // 4rem - Collapsed sidebar
|
||||
$semantic-sizing-sidebar-expanded: $base-sizing-width-64 !default; // 16rem - Expanded sidebar
|
||||
$semantic-sizing-sidebar-wide: $base-sizing-width-80 !default; // 20rem - Wide sidebar
|
||||
|
||||
$semantic-sizing-navbar-height: $base-sizing-height-16 !default; // 4rem - Navigation bar height
|
||||
$semantic-sizing-header-height: $base-sizing-height-20 !default; // 5rem - Page header height
|
||||
$semantic-sizing-footer-height: $base-sizing-height-24 !default; // 6rem - Footer height
|
||||
|
||||
// CONTENT SIZING - Text and content areas
|
||||
$semantic-sizing-content-narrow: $base-sizing-max-width-2xl !default; // 42rem - Narrow content
|
||||
$semantic-sizing-content-medium: $base-sizing-max-width-4xl !default; // 56rem - Medium content
|
||||
$semantic-sizing-content-wide: $base-sizing-max-width-6xl !default; // 72rem - Wide content
|
||||
$semantic-sizing-content-full: $base-sizing-max-width-full !default; // 100% - Full width content
|
||||
|
||||
$semantic-sizing-prose-width: $base-sizing-max-width-prose !default; // 65ch - Optimal reading width
|
||||
|
||||
// CARD SIZING - Card and panel dimensions
|
||||
$semantic-sizing-card-width-sm: $base-sizing-width-64 !default; // 16rem - Small cards
|
||||
$semantic-sizing-card-width-md: $base-sizing-width-80 !default; // 20rem - Medium cards
|
||||
$semantic-sizing-card-width-lg: $base-sizing-width-96 !default; // 24rem - Large cards
|
||||
|
||||
$semantic-sizing-card-height-sm: $base-sizing-height-32 !default; // 8rem - Small card height
|
||||
$semantic-sizing-card-height-md: $base-sizing-height-48 !default; // 12rem - Medium card height
|
||||
$semantic-sizing-card-height-lg: $base-sizing-height-64 !default; // 16rem - Large card height
|
||||
|
||||
// MODAL SIZING - Dialog and modal dimensions
|
||||
$semantic-sizing-modal-width-sm: $base-sizing-max-width-md !default; // 28rem - Small modals
|
||||
$semantic-sizing-modal-width-md: $base-sizing-max-width-lg !default; // 32rem - Medium modals
|
||||
$semantic-sizing-modal-width-lg: $base-sizing-max-width-2xl !default; // 42rem - Large modals
|
||||
$semantic-sizing-modal-width-xl: $base-sizing-max-width-4xl !default; // 56rem - Extra large modals
|
||||
|
||||
$semantic-sizing-modal-height-max: 80vh !default; // Maximum modal height
|
||||
|
||||
// BREAKPOINT SIZING - Responsive design breakpoints
|
||||
$semantic-sizing-breakpoint-mobile: $base-sizing-max-width-screen-sm !default; // 640px
|
||||
$semantic-sizing-breakpoint-tablet: $base-sizing-max-width-screen-md !default; // 768px
|
||||
$semantic-sizing-breakpoint-desktop: $base-sizing-max-width-screen-lg !default; // 1024px
|
||||
$semantic-sizing-breakpoint-wide: $base-sizing-max-width-screen-xl !default; // 1280px
|
||||
$semantic-sizing-breakpoint-ultra: $base-sizing-max-width-screen-2xl !default; // 1536px
|
||||
|
||||
// FORM SIZING - Form element dimensions
|
||||
$semantic-sizing-form-field-width-sm: $base-sizing-width-32 !default; // 8rem - Small form fields
|
||||
$semantic-sizing-form-field-width-md: $base-sizing-width-48 !default; // 12rem - Medium form fields
|
||||
$semantic-sizing-form-field-width-lg: $base-sizing-width-64 !default; // 16rem - Large form fields
|
||||
$semantic-sizing-form-field-width-full: $base-sizing-width-full !default; // 100% - Full width fields
|
||||
|
||||
// DIVIDER SIZING - Line and separator dimensions
|
||||
$semantic-sizing-divider-thin: $base-sizing-line-1 !default; // 1px - Thin dividers
|
||||
$semantic-sizing-divider-medium: $base-sizing-line-2 !default; // 2px - Medium dividers
|
||||
$semantic-sizing-divider-thick: $base-sizing-line-4 !default; // 4px - Thick dividers
|
||||
$semantic-sizing-divider-heavy: $base-sizing-line-8 !default; // 8px - Heavy dividers
|
||||
|
||||
// UTILITY SIZING - Common sizing patterns
|
||||
$semantic-sizing-full-viewport-width: 100vw !default; // Full viewport width
|
||||
$semantic-sizing-full-viewport-height: 100vh !default; // Full viewport height
|
||||
$semantic-sizing-half-viewport-height: 50vh !default; // Half viewport height
|
||||
|
||||
$semantic-sizing-container-padding: $base-sizing-width-4 !default; // 1rem - Container padding
|
||||
$semantic-sizing-container-padding-lg: $base-sizing-width-6 !default; // 1.5rem - Large container padding
|
||||
|
||||
// APPBAR SIZING - Application bar height variants
|
||||
$semantic-sizing-appbar-compact: $base-sizing-height-12 !default; // 3rem/48px - Compact appbar
|
||||
$semantic-sizing-appbar-standard: $base-sizing-height-16 !default; // 4rem/64px - Standard appbar
|
||||
$semantic-sizing-appbar-large: $base-sizing-height-20 !default; // 5rem/80px - Large appbar
|
||||
$semantic-sizing-appbar-prominent: $base-sizing-height-24 !default; // 6rem/96px - Prominent appbar
|
||||
|
||||
$semantic-sizing-touch-target: $base-sizing-touch-comfortable !default; // 48px - Touch target size
|
||||
|
||||
// LAYER/Z-INDEX TOKENS - Stacking order hierarchy
|
||||
$semantic-layer-base: 0 !default; // Base layer for content
|
||||
$semantic-layer-dropdown: 1000 !default; // Dropdowns and menus
|
||||
$semantic-layer-overlay: 2000 !default; // Overlays and backdrops
|
||||
$semantic-layer-modal: 3000 !default; // Modal dialogs
|
||||
$semantic-layer-tooltip: 4000 !default; // Tooltips and hints
|
||||
$semantic-layer-appbar: 100 !default; // App bars and navigation
|
||||
$semantic-layer-sidebar: 50 !default; // Side navigation
|
||||
$semantic-layer-banner: 200 !default; // Banners and alerts
|
||||
|
||||
// AI-SPECIFIC SIZING - Special AI/tech themed sizes
|
||||
$semantic-sizing-ai-indicator: $base-sizing-ai-indicator !default; // 20px - AI indicators
|
||||
$semantic-sizing-ai-glow: $base-sizing-ai-glow !default; // 40px - AI glow effects
|
||||
10
projects/shared-ui/src/styles/semantic/spacing/_index.scss
Normal file
10
projects/shared-ui/src/styles/semantic/spacing/_index.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC SPACING INDEX
|
||||
// ==========================================================================
|
||||
// Contextual spacing system for components and layouts
|
||||
// ==========================================================================
|
||||
|
||||
// Note: base tokens imported at semantic/index level
|
||||
|
||||
// Semantic spacing mappings
|
||||
@import 'semantic-spacing';
|
||||
@@ -0,0 +1,157 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC SPACING
|
||||
// ==========================================================================
|
||||
// Meaningful spacing tokens for layout and component design
|
||||
// Maps base spacing values to contextual usage patterns
|
||||
// ==========================================================================
|
||||
@use '../../base/spacing' as *;
|
||||
|
||||
// COMPONENT SPACING - Internal component spacing
|
||||
$semantic-spacing-component-xs: $base-spacing-1 !default; // 0.25rem - tight spacing
|
||||
$semantic-spacing-component-sm: $base-spacing-2 !default; // 0.5rem - small spacing
|
||||
$semantic-spacing-component-md: $base-spacing-3 !default; // 0.75rem - medium spacing
|
||||
$semantic-spacing-component-lg: $base-spacing-4 !default; // 1rem - large spacing
|
||||
$semantic-spacing-component-xl: $base-spacing-6 !default; // 1.5rem - extra large spacing
|
||||
|
||||
$semantic-spacing-component-padding-xs: $base-spacing-1 !default; // 0.25rem - tight padding
|
||||
$semantic-spacing-component-padding-sm: $base-spacing-2 !default; // 0.5rem - small padding
|
||||
$semantic-spacing-component-padding-md: $base-spacing-3 !default; // 0.75rem - medium padding
|
||||
$semantic-spacing-component-padding-lg: $base-spacing-4 !default; // 1rem - large padding
|
||||
$semantic-spacing-component-padding-xl: $base-spacing-6 !default; // 1.5rem - extra large padding
|
||||
|
||||
// LAYOUT SPACING - Between major layout elements
|
||||
$semantic-spacing-layout-section-xs: $base-spacing-8 !default; // 2rem - small section gap
|
||||
$semantic-spacing-layout-section-sm: $base-spacing-12 !default; // 3rem - medium section gap
|
||||
$semantic-spacing-layout-section-md: $base-spacing-16 !default; // 4rem - large section gap
|
||||
$semantic-spacing-layout-section-lg: $base-spacing-20 !default; // 5rem - extra large section gap
|
||||
$semantic-spacing-layout-section-xl: $base-spacing-24 !default; // 6rem - huge section gap
|
||||
|
||||
// CONTENT SPACING - Text and content flow
|
||||
$semantic-spacing-content-paragraph: $base-spacing-4 !default; // 1rem - paragraph spacing
|
||||
$semantic-spacing-content-heading: $base-spacing-6 !default; // 1.5rem - heading spacing
|
||||
$semantic-spacing-content-list-item: $base-spacing-2 !default; // 0.5rem - list item spacing
|
||||
$semantic-spacing-content-line-tight: $base-spacing-1 !default; // 0.25rem - tight line spacing
|
||||
$semantic-spacing-content-line-normal: $base-spacing-2 !default; // 0.5rem - normal line spacing
|
||||
|
||||
// INTERACTIVE SPACING - Clickable elements
|
||||
$semantic-spacing-interactive-button-padding-x: $base-spacing-4 !default; // 1rem - button horizontal padding
|
||||
$semantic-spacing-interactive-button-padding-y: $base-spacing-2 !default; // 0.5rem - button vertical padding
|
||||
$semantic-spacing-interactive-input-padding-x: $base-spacing-3 !default; // 0.75rem - input horizontal padding
|
||||
$semantic-spacing-interactive-input-padding-y: $base-spacing-2-5 !default; // 0.625rem - input vertical padding
|
||||
$semantic-spacing-interactive-touch-target: $base-spacing-11 !default; // 2.75rem - minimum touch target
|
||||
|
||||
// CARD AND CONTAINER SPACING
|
||||
$semantic-spacing-container-card-padding: $base-spacing-4 !default; // 1rem - card internal padding
|
||||
$semantic-spacing-container-card-padding-lg: $base-spacing-6 !default; // 1.5rem - large card padding
|
||||
$semantic-spacing-container-modal-padding: $base-spacing-6 !default; // 1.5rem - modal padding
|
||||
$semantic-spacing-container-sidebar-padding: $base-spacing-4 !default; // 1rem - sidebar padding
|
||||
|
||||
// NAVIGATION SPACING
|
||||
$semantic-spacing-nav-item-padding-x: $base-spacing-3 !default; // 0.75rem - nav item horizontal padding
|
||||
$semantic-spacing-nav-item-padding-y: $base-spacing-2 !default; // 0.5rem - nav item vertical padding
|
||||
$semantic-spacing-nav-section-gap: $base-spacing-6 !default; // 1.5rem - nav section gaps
|
||||
$semantic-spacing-nav-submenu-indent: $base-spacing-4 !default; // 1rem - submenu indentation
|
||||
|
||||
// GRID AND LAYOUT GAPS
|
||||
$semantic-spacing-grid-gap-xs: $base-spacing-2 !default; // 0.5rem - tight grid
|
||||
$semantic-spacing-grid-gap-sm: $base-spacing-3 !default; // 0.75rem - small grid
|
||||
$semantic-spacing-grid-gap-md: $base-spacing-4 !default; // 1rem - medium grid
|
||||
$semantic-spacing-grid-gap-lg: $base-spacing-6 !default; // 1.5rem - large grid
|
||||
$semantic-spacing-grid-gap-xl: $base-spacing-8 !default; // 2rem - extra large grid
|
||||
|
||||
// FORM SPACING
|
||||
$semantic-spacing-form-field-gap: $base-spacing-4 !default; // 1rem - gap between form fields
|
||||
$semantic-spacing-form-group-gap: $base-spacing-6 !default; // 1.5rem - gap between form groups
|
||||
$semantic-spacing-form-section-gap: $base-spacing-8 !default; // 2rem - gap between form sections
|
||||
$semantic-spacing-form-label-gap: $base-spacing-1 !default; // 0.25rem - label to input gap
|
||||
|
||||
// UTILITY SPACING - Common spacing needs
|
||||
$semantic-spacing-stack-xs: $base-spacing-1 !default; // 0.25rem - tight stack
|
||||
$semantic-spacing-stack-sm: $base-spacing-2 !default; // 0.5rem - small stack
|
||||
$semantic-spacing-stack-md: $base-spacing-4 !default; // 1rem - medium stack
|
||||
$semantic-spacing-stack-lg: $base-spacing-6 !default; // 1.5rem - large stack
|
||||
$semantic-spacing-stack-xl: $base-spacing-8 !default; // 2rem - extra large stack
|
||||
|
||||
// MICRO SPACING - Fine-tuned spacing
|
||||
$semantic-spacing-micro-hairline: $base-spacing-micro-hairline !default; // 0.5px - hairline
|
||||
$semantic-spacing-micro-tight: $base-spacing-0-5 !default; // 0.125rem - very tight
|
||||
$semantic-spacing-micro-icon-gap: $base-spacing-1-5 !default; // 0.375rem - icon to text gap
|
||||
|
||||
// ==========================================================================
|
||||
// BACKWARDS COMPATIBILITY ALIASES
|
||||
// ==========================================================================
|
||||
// Aliases for existing usage patterns in the codebase
|
||||
|
||||
// Component spacing aliases
|
||||
$semantic-spacing-component-2xs: $base-spacing-1 !default; // 0.25rem
|
||||
$semantic-spacing-component-xs: $base-spacing-2 !default; // 0.5rem
|
||||
$semantic-spacing-component-sm: $base-spacing-3 !default; // 0.75rem
|
||||
$semantic-spacing-component-md: $base-spacing-4 !default; // 1rem
|
||||
$semantic-spacing-component-lg: $base-spacing-6 !default; // 1.5rem
|
||||
$semantic-spacing-component-xl: $base-spacing-8 !default; // 2rem
|
||||
|
||||
// Layout spacing aliases
|
||||
$semantic-spacing-layout-xs: $base-spacing-2 !default; // 0.5rem
|
||||
$semantic-spacing-layout-sm: $base-spacing-4 !default; // 1rem
|
||||
$semantic-spacing-layout-md: $base-spacing-6 !default; // 1.5rem
|
||||
$semantic-spacing-layout-lg: $base-spacing-8 !default; // 2rem
|
||||
$semantic-spacing-layout-xl: $base-spacing-12 !default; // 3rem
|
||||
|
||||
// Section spacing aliases
|
||||
$semantic-spacing-section-xs: $base-spacing-8 !default; // 2rem
|
||||
$semantic-spacing-section-sm: $base-spacing-12 !default; // 3rem
|
||||
$semantic-spacing-section-md: $base-spacing-16 !default; // 4rem
|
||||
$semantic-spacing-section-lg: $base-spacing-20 !default; // 5rem
|
||||
$semantic-spacing-section-xl: $base-spacing-24 !default; // 6rem
|
||||
|
||||
// INDIVIDUAL SEMANTIC SPACING VARIABLES - Direct access to all base spacing values
|
||||
$semantic-spacing-0: $base-spacing-0 !default;
|
||||
$semantic-spacing-0-5: $base-spacing-0-5 !default;
|
||||
$semantic-spacing-1: $base-spacing-1 !default;
|
||||
$semantic-spacing-1-5: $base-spacing-1-5 !default;
|
||||
$semantic-spacing-2: $base-spacing-2 !default;
|
||||
$semantic-spacing-2-5: $base-spacing-2-5 !default;
|
||||
$semantic-spacing-3: $base-spacing-3 !default;
|
||||
$semantic-spacing-3-5: $base-spacing-3-5 !default;
|
||||
$semantic-spacing-4: $base-spacing-4 !default;
|
||||
$semantic-spacing-5: $base-spacing-5 !default;
|
||||
$semantic-spacing-6: $base-spacing-6 !default;
|
||||
$semantic-spacing-7: $base-spacing-7 !default;
|
||||
$semantic-spacing-8: $base-spacing-8 !default;
|
||||
$semantic-spacing-9: $base-spacing-9 !default;
|
||||
$semantic-spacing-10: $base-spacing-10 !default;
|
||||
$semantic-spacing-11: $base-spacing-11 !default;
|
||||
$semantic-spacing-12: $base-spacing-12 !default;
|
||||
$semantic-spacing-14: $base-spacing-14 !default;
|
||||
$semantic-spacing-16: $base-spacing-16 !default;
|
||||
$semantic-spacing-20: $base-spacing-20 !default;
|
||||
$semantic-spacing-24: $base-spacing-24 !default;
|
||||
$semantic-spacing-28: $base-spacing-28 !default;
|
||||
$semantic-spacing-32: $base-spacing-32 !default;
|
||||
$semantic-spacing-36: $base-spacing-36 !default;
|
||||
$semantic-spacing-40: $base-spacing-40 !default;
|
||||
$semantic-spacing-44: $base-spacing-44 !default;
|
||||
$semantic-spacing-48: $base-spacing-48 !default;
|
||||
$semantic-spacing-52: $base-spacing-52 !default;
|
||||
$semantic-spacing-56: $base-spacing-56 !default;
|
||||
$semantic-spacing-60: $base-spacing-60 !default;
|
||||
$semantic-spacing-64: $base-spacing-64 !default;
|
||||
$semantic-spacing-72: $base-spacing-72 !default;
|
||||
$semantic-spacing-80: $base-spacing-80 !default;
|
||||
$semantic-spacing-96: $base-spacing-96 !default;
|
||||
$semantic-spacing-128: $base-spacing-128 !default;
|
||||
$semantic-spacing-160: $base-spacing-160 !default;
|
||||
$semantic-spacing-192: $base-spacing-192 !default;
|
||||
$semantic-spacing-224: $base-spacing-224 !default;
|
||||
$semantic-spacing-256: $base-spacing-256 !default;
|
||||
|
||||
// SEMANTIC SIZE ALIASES - Common semantic size names
|
||||
$semantic-spacing-xs: $base-spacing-semantic-xs !default; // 0.5rem
|
||||
$semantic-spacing-sm: $base-spacing-semantic-sm !default; // 0.75rem
|
||||
$semantic-spacing-md: $base-spacing-semantic-md !default; // 1rem
|
||||
$semantic-spacing-lg: $base-spacing-semantic-lg !default; // 1.5rem
|
||||
$semantic-spacing-xl: $base-spacing-semantic-xl !default; // 2rem
|
||||
$semantic-spacing-2xl: $base-spacing-semantic-2xl !default; // 2.5rem
|
||||
$semantic-spacing-3xl: $base-spacing-semantic-3xl !default; // 3rem
|
||||
$semantic-spacing-4xl: $base-spacing-semantic-4xl !default; // 4rem
|
||||
$semantic-spacing-5xl: $base-spacing-semantic-5xl !default; // 5rem
|
||||
@@ -0,0 +1,10 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC TYPOGRAPHY INDEX
|
||||
// ==========================================================================
|
||||
// Contextual typography system for content hierarchy and UI components
|
||||
// ==========================================================================
|
||||
|
||||
// Note: base tokens imported at semantic/index level
|
||||
|
||||
// Semantic typography mappings
|
||||
@import 'semantic-typography';
|
||||
@@ -0,0 +1,271 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC TYPOGRAPHY
|
||||
// ==========================================================================
|
||||
// Meaningful typography tokens for content hierarchy and UI components
|
||||
// Maps base typography values to contextual usage patterns
|
||||
// ==========================================================================
|
||||
@use '../../base/typography' as *;
|
||||
|
||||
// CONTENT HIERARCHY - Semantic text roles
|
||||
$semantic-typography-heading-display: (
|
||||
font-family: $base-typography-font-family-display,
|
||||
font-size: $base-typography-font-size-4xl,
|
||||
font-weight: $base-typography-font-weight-bold,
|
||||
line-height: $base-typography-line-height-tight,
|
||||
letter-spacing: $base-typography-letter-spacing-tight,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-heading-h1: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-3xl,
|
||||
font-weight: $base-typography-font-weight-bold,
|
||||
line-height: $base-typography-line-height-tight,
|
||||
letter-spacing: $base-typography-letter-spacing-tight,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-heading-h2: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-2xl,
|
||||
font-weight: $base-typography-font-weight-semibold,
|
||||
line-height: $base-typography-line-height-snug,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-heading-h3: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-xl,
|
||||
font-weight: $base-typography-font-weight-semibold,
|
||||
line-height: $base-typography-line-height-snug,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-heading-h4: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-lg,
|
||||
font-weight: $base-typography-font-weight-medium,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-heading-h5: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-md,
|
||||
font-weight: $base-typography-font-weight-medium,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-font-family-sans: $base-typography-font-family-sans !default;
|
||||
$semantic-typography-font-family-serif: $base-typography-font-family-serif !default;
|
||||
$semantic-typography-font-family-mono: $base-typography-font-family-mono !default;
|
||||
$semantic-typography-font-family-display: $base-typography-font-family-display !default;
|
||||
|
||||
|
||||
|
||||
// INDIVIDUAL TOKENS - For easier access in component styles
|
||||
$semantic-typography-heading-h1-size: $base-typography-font-size-3xl !default;
|
||||
$semantic-typography-heading-h1-weight: $base-typography-font-weight-bold !default;
|
||||
$semantic-typography-heading-h1-line-height: $base-typography-line-height-tight !default;
|
||||
|
||||
$semantic-typography-heading-h2-size: $base-typography-font-size-2xl !default;
|
||||
$semantic-typography-heading-h2-weight: $base-typography-font-weight-semibold !default;
|
||||
$semantic-typography-heading-h2-line-height: $base-typography-line-height-snug !default;
|
||||
|
||||
$semantic-typography-heading-h3-size: $base-typography-font-size-xl !default;
|
||||
$semantic-typography-heading-h3-weight: $base-typography-font-weight-semibold !default;
|
||||
$semantic-typography-heading-h3-line-height: $base-typography-line-height-snug !default;
|
||||
|
||||
$semantic-typography-heading-h4-size: $base-typography-font-size-lg !default;
|
||||
$semantic-typography-heading-h4-weight: $base-typography-font-weight-medium !default;
|
||||
$semantic-typography-heading-h4-line-height: $base-typography-line-height-normal !default;
|
||||
|
||||
$semantic-typography-heading-h5-size: $base-typography-font-size-md !default;
|
||||
$semantic-typography-heading-h5-weight: $base-typography-font-weight-medium !default;
|
||||
$semantic-typography-heading-h5-line-height: $base-typography-line-height-normal !default;
|
||||
|
||||
// ICON TYPOGRAPHY - Icon sizing for different contexts
|
||||
$semantic-typography-icon-small-size: $base-typography-font-size-sm !default;
|
||||
$semantic-typography-icon-medium-size: $base-typography-font-size-lg !default;
|
||||
$semantic-typography-icon-large-size: $base-typography-font-size-xl !default;
|
||||
|
||||
// BREAKPOINT TOKENS - For responsive adjustments
|
||||
$semantic-breakpoint-sm: 640px !default;
|
||||
$semantic-breakpoint-md: 768px !default;
|
||||
$semantic-breakpoint-lg: 1024px !default;
|
||||
|
||||
// BODY TEXT - Content text styles
|
||||
$semantic-typography-body-large: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-lg,
|
||||
font-weight: $base-typography-font-weight-normal,
|
||||
line-height: $base-typography-line-height-relaxed,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-body-medium: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-md,
|
||||
font-weight: $base-typography-font-weight-normal,
|
||||
line-height: $base-typography-line-height-relaxed,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-body-small: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-sm,
|
||||
font-weight: $base-typography-font-weight-normal,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
// UI COMPONENT TEXT - Interface elements
|
||||
$semantic-typography-button-large: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-md,
|
||||
font-weight: $base-typography-font-weight-medium,
|
||||
line-height: $base-typography-line-height-none,
|
||||
letter-spacing: $base-typography-letter-spacing-wide,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-button-medium: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-sm,
|
||||
font-weight: $base-typography-font-weight-medium,
|
||||
line-height: $base-typography-line-height-none,
|
||||
letter-spacing: $base-typography-letter-spacing-wide,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-button-small: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-xs,
|
||||
font-weight: $base-typography-font-weight-medium,
|
||||
line-height: $base-typography-line-height-none,
|
||||
letter-spacing: $base-typography-letter-spacing-wider,
|
||||
) !default;
|
||||
|
||||
// FORM TEXT - Input and label styles
|
||||
$semantic-typography-label: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-sm,
|
||||
font-weight: $base-typography-font-weight-medium,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-input: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-md,
|
||||
font-weight: $base-typography-font-weight-normal,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-placeholder: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-md,
|
||||
font-weight: $base-typography-font-weight-normal,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
// NAVIGATION TEXT - Menu and navigation styles
|
||||
$semantic-typography-nav-primary: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-md,
|
||||
font-weight: $base-typography-font-weight-medium,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-nav-secondary: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-sm,
|
||||
font-weight: $base-typography-font-weight-normal,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
// UTILITY TEXT - Captions, tags, etc.
|
||||
$semantic-typography-caption: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-xs,
|
||||
font-weight: $base-typography-font-weight-normal,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-tag: (
|
||||
font-family: $base-typography-font-family-sans,
|
||||
font-size: $base-typography-font-size-xs,
|
||||
font-weight: $base-typography-font-weight-medium,
|
||||
line-height: $base-typography-line-height-none,
|
||||
letter-spacing: $base-typography-letter-spacing-wide,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-code-inline: (
|
||||
font-family: $base-typography-font-family-mono,
|
||||
font-size: $base-typography-font-size-sm,
|
||||
font-weight: $base-typography-font-weight-normal,
|
||||
line-height: $base-typography-line-height-normal,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
$semantic-typography-code-block: (
|
||||
font-family: $base-typography-font-family-mono,
|
||||
font-size: $base-typography-font-size-sm,
|
||||
font-weight: $base-typography-font-weight-normal,
|
||||
line-height: $base-typography-line-height-relaxed,
|
||||
letter-spacing: $base-typography-letter-spacing-normal,
|
||||
) !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC FONT WEIGHTS - Direct access to weight values
|
||||
$semantic-typography-font-weight-thin: $base-typography-font-weight-thin !default;
|
||||
$semantic-typography-font-weight-extralight: $base-typography-font-weight-extralight !default;
|
||||
$semantic-typography-font-weight-light: $base-typography-font-weight-light !default;
|
||||
$semantic-typography-font-weight-normal: $base-typography-font-weight-normal !default;
|
||||
$semantic-typography-font-weight-medium: $base-typography-font-weight-medium !default;
|
||||
$semantic-typography-font-weight-semibold: $base-typography-font-weight-semibold !default;
|
||||
$semantic-typography-font-weight-bold: $base-typography-font-weight-bold !default;
|
||||
$semantic-typography-font-weight-extrabold: $base-typography-font-weight-extrabold !default;
|
||||
$semantic-typography-font-weight-black: $base-typography-font-weight-black !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC FONT SIZES - Direct access to size values
|
||||
$semantic-typography-font-size-xs: $base-typography-font-size-xs !default;
|
||||
$semantic-typography-font-size-sm: $base-typography-font-size-sm !default;
|
||||
$semantic-typography-font-size-md: $base-typography-font-size-md !default;
|
||||
$semantic-typography-font-size-lg: $base-typography-font-size-lg !default;
|
||||
$semantic-typography-font-size-xl: $base-typography-font-size-xl !default;
|
||||
$semantic-typography-font-size-2xl: $base-typography-font-size-2xl !default;
|
||||
$semantic-typography-font-size-3xl: $base-typography-font-size-3xl !default;
|
||||
$semantic-typography-font-size-4xl: $base-typography-font-size-4xl !default;
|
||||
$semantic-typography-font-size-5xl: $base-typography-font-size-5xl !default;
|
||||
$semantic-typography-font-size-6xl: $base-typography-font-size-6xl !default;
|
||||
$semantic-typography-font-size-7xl: $base-typography-font-size-7xl !default;
|
||||
$semantic-typography-font-size-8xl: $base-typography-font-size-8xl !default;
|
||||
$semantic-typography-font-size-9xl: $base-typography-font-size-9xl !default;
|
||||
$semantic-typography-font-size-10xl: $base-typography-font-size-10xl !default;
|
||||
$semantic-typography-font-size-11xl: $base-typography-font-size-11xl !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC LINE HEIGHTS - Direct access to line height values
|
||||
$semantic-typography-line-height-none: $base-typography-line-height-none !default;
|
||||
$semantic-typography-line-height-tight: $base-typography-line-height-tight !default;
|
||||
$semantic-typography-line-height-snug: $base-typography-line-height-snug !default;
|
||||
$semantic-typography-line-height-normal: $base-typography-line-height-normal !default;
|
||||
$semantic-typography-line-height-relaxed: $base-typography-line-height-relaxed !default;
|
||||
$semantic-typography-line-height-loose: $base-typography-line-height-loose !default;
|
||||
$semantic-typography-line-height-3: $base-typography-line-height-3 !default;
|
||||
$semantic-typography-line-height-4: $base-typography-line-height-4 !default;
|
||||
$semantic-typography-line-height-5: $base-typography-line-height-5 !default;
|
||||
$semantic-typography-line-height-6: $base-typography-line-height-6 !default;
|
||||
$semantic-typography-line-height-7: $base-typography-line-height-7 !default;
|
||||
$semantic-typography-line-height-8: $base-typography-line-height-8 !default;
|
||||
$semantic-typography-line-height-9: $base-typography-line-height-9 !default;
|
||||
$semantic-typography-line-height-10: $base-typography-line-height-10 !default;
|
||||
|
||||
// INDIVIDUAL SEMANTIC LETTER SPACING - Direct access to letter spacing values
|
||||
$semantic-typography-letter-spacing-tighter: $base-typography-letter-spacing-tighter !default;
|
||||
$semantic-typography-letter-spacing-tight: $base-typography-letter-spacing-tight !default;
|
||||
$semantic-typography-letter-spacing-normal: $base-typography-letter-spacing-normal !default;
|
||||
$semantic-typography-letter-spacing-wide: $base-typography-letter-spacing-wide !default;
|
||||
$semantic-typography-letter-spacing-wider: $base-typography-letter-spacing-wider !default;
|
||||
$semantic-typography-letter-spacing-widest: $base-typography-letter-spacing-widest !default;
|
||||
@@ -0,0 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Z-INDEX INDEX
|
||||
// ==========================================================================
|
||||
// Main index file for semantic z-index tokens
|
||||
// ==========================================================================
|
||||
|
||||
@forward 'semantic-z-index';
|
||||
@@ -0,0 +1,64 @@
|
||||
// ==========================================================================
|
||||
// SEMANTIC Z-INDEX
|
||||
// ==========================================================================
|
||||
// Meaningful z-index tokens for layering and stacking context
|
||||
// Maps base z-index values to contextual usage patterns
|
||||
// ==========================================================================
|
||||
@use '../../base/z-index' as *;
|
||||
|
||||
// LAYERING HIERARCHY - Component and UI element stacking
|
||||
$semantic-z-index-background: $base-z-index-neg-1 !default; // Background elements
|
||||
$semantic-z-index-base: $base-z-index-0 !default; // Base layer elements
|
||||
$semantic-z-index-content: $base-z-index-10 !default; // Main content layer
|
||||
$semantic-z-index-elevated: $base-z-index-20 !default; // Elevated content
|
||||
$semantic-z-index-floating: $base-z-index-30 !default; // Floating elements
|
||||
|
||||
// NAVIGATION LAYERS - Menu and navigation stacking
|
||||
$semantic-z-index-nav-primary: $base-z-index-40 !default; // Primary navigation
|
||||
$semantic-z-index-nav-secondary: $base-z-index-50 !default; // Secondary navigation
|
||||
$semantic-z-index-breadcrumb: $base-z-index-10 !default; // Breadcrumb navigation
|
||||
|
||||
// INTERACTIVE LAYERS - User interaction elements
|
||||
$semantic-z-index-dropdown: $base-z-index-dropdown !default; // Dropdown menus
|
||||
$semantic-z-index-popover: $base-z-index-popover !default; // Popovers and tooltips
|
||||
$semantic-z-index-tooltip: $base-z-index-tooltip !default; // Tooltips
|
||||
$semantic-z-index-banner: $base-z-index-banner !default; // Notification banners
|
||||
|
||||
// OVERLAY LAYERS - Modal and overlay elements
|
||||
$semantic-z-index-sticky: $base-z-index-sticky !default; // Sticky elements
|
||||
$semantic-z-index-fixed: $base-z-index-fixed !default; // Fixed position elements
|
||||
$semantic-z-index-modal-backdrop: $base-z-index-modal-backdrop !default; // Modal backdrop
|
||||
$semantic-z-index-overlay: $base-z-index-overlay !default; // General overlays
|
||||
$semantic-z-index-modal: $base-z-index-modal !default; // Modal dialogs
|
||||
|
||||
// NOTIFICATION LAYERS - Alerts and notifications
|
||||
$semantic-z-index-toast: $base-z-index-toast !default; // Toast notifications
|
||||
$semantic-z-index-alert: $base-z-index-60 !default; // Alert messages
|
||||
$semantic-z-index-snackbar: $base-z-index-70 !default; // Snackbar notifications
|
||||
|
||||
// UTILITY LAYERS - Special purpose elements
|
||||
$semantic-z-index-loading: $base-z-index-80 !default; // Loading overlays
|
||||
$semantic-z-index-debug: $base-z-index-debug !default; // Debug/development elements
|
||||
$semantic-z-index-max: $base-z-index-max !default; // Maximum z-index value
|
||||
|
||||
// COMPONENT-SPECIFIC LAYERS
|
||||
$semantic-z-index-header: $base-z-index-30 !default; // Page/section headers
|
||||
$semantic-z-index-sidebar: $base-z-index-20 !default; // Sidebar panels
|
||||
$semantic-z-index-footer: $base-z-index-10 !default; // Page/section footers
|
||||
$semantic-z-index-card-hover: $base-z-index-10 !default; // Cards on hover
|
||||
$semantic-z-index-button-focus: $base-z-index-10 !default; // Focused buttons
|
||||
|
||||
// INDIVIDUAL SEMANTIC Z-INDEX TOKENS - Direct access to all base z-index values
|
||||
$semantic-z-index-neg-10: $base-z-index-neg-10 !default;
|
||||
$semantic-z-index-neg-1: $base-z-index-neg-1 !default;
|
||||
$semantic-z-index-0: $base-z-index-0 !default;
|
||||
$semantic-z-index-10: $base-z-index-10 !default;
|
||||
$semantic-z-index-20: $base-z-index-20 !default;
|
||||
$semantic-z-index-30: $base-z-index-30 !default;
|
||||
$semantic-z-index-40: $base-z-index-40 !default;
|
||||
$semantic-z-index-50: $base-z-index-50 !default;
|
||||
$semantic-z-index-60: $base-z-index-60 !default;
|
||||
$semantic-z-index-70: $base-z-index-70 !default;
|
||||
$semantic-z-index-80: $base-z-index-80 !default;
|
||||
$semantic-z-index-90: $base-z-index-90 !default;
|
||||
$semantic-z-index-100: $base-z-index-100 !default;
|
||||
Reference in New Issue
Block a user