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>
2025-09-02 10:24:04 +10:00
parent cd3211101c
commit c803831f60
193 changed files with 23363 additions and 0 deletions
--- a/projects/shared-ui/src/styles/semantic/glass/_glass-borders.scss
+++ b/projects/shared-ui/src/styles/semantic/glass/_glass-borders.scss
@@ -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;
--- a/projects/shared-ui/src/styles/semantic/glass/_glass-mixins.scss
+++ b/projects/shared-ui/src/styles/semantic/glass/_glass-mixins.scss
@@ -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;
+  }
+}
--- a/projects/shared-ui/src/styles/semantic/glass/_glass-surfaces.scss
+++ b/projects/shared-ui/src/styles/semantic/glass/_glass-surfaces.scss
@@ -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;
--- a/projects/shared-ui/src/styles/semantic/glass/_glass-utilities.scss
+++ b/projects/shared-ui/src/styles/semantic/glass/_glass-utilities.scss
@@ -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;
+  }
+}
--- a/projects/shared-ui/src/styles/semantic/glass/_index.scss
+++ b/projects/shared-ui/src/styles/semantic/glass/_index.scss
@@ -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';