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

Add comprehensive component library and demo application

Browse Source 
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>
This commit is contained in:
skyai_dev
2025-09-03 05:38:09 +10:00
parent c803831f60
commit 5983722793
246 changed files with 52845 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
projects/demo-ui-essentials/src/scss/_variables.scss Normal file
View File

@@ -0,0 +1,81 @@
// ==========================================================================
// 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 '../../../shared-ui/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;