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
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user