5983722793
Added extensive component library with feedback components (empty state, loading spinner, skeleton loader), enhanced form components (autocomplete, date picker, file upload, form field, time picker), navigation components (pagination), and overlay components (backdrop, drawer, modal, overlay container). Updated demo application with comprehensive showcase components and enhanced styling throughout the project. Excluded font files from repository to reduce size. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
158 lines
10 KiB
SCSS
158 lines
10 KiB
SCSS
// ==========================================================================
|
|
// 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-4-5: $base-spacing-4-5 !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 |