876eb301a0
- Move layout components from layouts/ directory to components/layout/ - Reorganize divider component from data-display to layout category - Add comprehensive layout component collection including aspect-ratio, bento-grid, box, breakpoint-container, center, column, dashboard-shell, feed-layout, flex, grid-container, hstack, list-detail-layout, scroll-container, section, sidebar-layout, stack, supporting-pane-layout, tabs-container, and vstack - Update all demo components to match new layout structure - Refactor routing and index exports to reflect reorganized component architecture 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
81 lines
4.0 KiB
SCSS
81 lines
4.0 KiB
SCSS
// ==========================================================================
|
|
// SKYUI PROJECT VARIABLES
|
|
// ==========================================================================
|
|
// Project-specific variable overrides that build upon the shared-ui token system
|
|
// Import order: base tokens → semantic tokens → project overrides
|
|
// NOTE: Semantic tokens are imported in styles.scss and available here
|
|
// ==========================================================================
|
|
|
|
// ==========================================================================
|
|
// FONT FAMILY OVERRIDES
|
|
// ==========================================================================
|
|
// Override base font families to use Comfortaa
|
|
$base-typography-font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
|
$base-typography-font-family-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
|
|
|
@import '../../../ui-design-system/src/styles/semantic';
|
|
|
|
// These overrides will cascade through all semantic typography tokens
|
|
// that use $base-typography-font-family-sans and $base-typography-font-family-display
|
|
|
|
// ==========================================================================
|
|
// PROJECT-SPECIFIC OVERRIDES
|
|
// ==========================================================================
|
|
// Custom values that override semantic tokens for SkyUI project needs
|
|
// Use semantic tokens as base values to maintain design system consistency
|
|
|
|
// BRAND CUSTOMIZATION
|
|
// Override brand colors while maintaining semantic structure
|
|
$skyui-brand-primary: $semantic-color-brand-primary !default;
|
|
$skyui-brand-secondary: $semantic-color-brand-secondary !default;
|
|
$skyui-brand-accent: $semantic-color-brand-tertiary !default;
|
|
|
|
// SURFACE CUSTOMIZATION
|
|
// Project-specific surface treatments
|
|
$skyui-surface-elevated: $semantic-color-surface-elevated !default;
|
|
$skyui-surface-sunken: $semantic-color-surface-sunken !default;
|
|
$skyui-surface-interactive: $semantic-color-surface-interactive !default;
|
|
|
|
// TYPOGRAPHY SCALE ADJUSTMENTS
|
|
// Semantic typography tokens can be overridden for project-specific needs
|
|
$skyui-heading-display: $semantic-typography-heading-display !default;
|
|
$skyui-heading-h1: $semantic-typography-heading-h1 !default;
|
|
$skyui-heading-h2: $semantic-typography-heading-h2 !default;
|
|
$skyui-body-large: $semantic-typography-body-large !default;
|
|
$skyui-body-medium: $semantic-typography-body-medium !default;
|
|
|
|
// SPACING CUSTOMIZATION
|
|
// Build on semantic spacing tokens
|
|
$skyui-space-component: $semantic-spacing-component-md !default;
|
|
$skyui-space-layout: $semantic-spacing-layout-lg !default;
|
|
$skyui-space-section: $semantic-spacing-section-xl !default;
|
|
|
|
// INTERACTIVE ELEMENTS
|
|
// Button and form element customizations
|
|
$skyui-interactive-primary: $semantic-color-interactive-primary !default;
|
|
$skyui-interactive-secondary: $semantic-color-interactive-secondary !default;
|
|
$skyui-border-radius-component: $semantic-border-radius-md !default;
|
|
$skyui-border-radius-container: $semantic-border-radius-lg !default;
|
|
|
|
// ELEVATION & SHADOWS
|
|
// Project-specific shadow treatments
|
|
$skyui-shadow-elevated: $semantic-shadow-elevated !default;
|
|
$skyui-shadow-floating: $semantic-shadow-floating !default;
|
|
|
|
// ==========================================================================
|
|
// COMPONENT-SPECIFIC OVERRIDES
|
|
// ==========================================================================
|
|
// Variables for specific component customizations
|
|
|
|
// Dashboard specific
|
|
$skyui-dashboard-grid-gap: $semantic-spacing-layout-md !default;
|
|
$skyui-dashboard-card-padding: $semantic-spacing-component-lg !default;
|
|
|
|
// Navigation specific
|
|
$skyui-nav-height: 64px !default;
|
|
$skyui-sidebar-width: 280px !default;
|
|
$skyui-sidebar-collapsed-width: 72px !default;
|
|
|
|
// Form specific
|
|
$skyui-input-border-radius: $semantic-border-radius-sm !default;
|
|
$skyui-input-padding: $semantic-spacing-component-sm !default; |