jules/ui-essentials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive semantic design token system

Browse Source 
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
2025-09-02 10:24:04 +10:00
parent cd3211101c
commit c803831f60
193 changed files with 23363 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
projects/shared-ui/src/styles/semantic/spacing/_semantic-spacing.scss Normal file
View File

@@ -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