Add comprehensive component library and demo application
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
@@ -0,0 +1,225 @@
|
||||
@use "../../../../../shared-ui/src/styles/tokens" as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
// ==========================================================================
|
||||
// MENU DEMO COMPONENT
|
||||
// ==========================================================================
|
||||
// Demonstration component showcasing all menu variants and capabilities
|
||||
// ==========================================================================
|
||||
|
||||
.menu-demo {
|
||||
padding: $semantic-spacing-component-xl;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-layout-lg;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid $semantic-color-interactive-primary;
|
||||
padding-bottom: $semantic-spacing-component-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-xl;
|
||||
border: 1px solid $semantic-color-border-secondary;
|
||||
border-radius: $semantic-border-radius-lg;
|
||||
padding: $semantic-spacing-component-xl;
|
||||
background: $semantic-color-surface-elevated;
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-component-xl;
|
||||
padding-bottom: $semantic-spacing-component-sm;
|
||||
border-bottom: 2px solid $semantic-color-border-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: $semantic-spacing-component-xl;
|
||||
margin-bottom: $semantic-spacing-layout-md;
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: $semantic-color-text-secondary;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
text-align: center;
|
||||
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
|
||||
background-color: $semantic-color-surface-secondary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-single {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: $semantic-color-text-secondary;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
text-align: center;
|
||||
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
|
||||
background-color: $semantic-color-surface-secondary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// USAGE EXAMPLES SECTION
|
||||
// ==========================================================================
|
||||
|
||||
.usage-examples {
|
||||
background: $semantic-color-surface-secondary;
|
||||
padding: $semantic-spacing-component-xl;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
border-left: 4px solid $semantic-color-interactive-primary;
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
margin-top: $semantic-spacing-component-lg;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
background: none;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background: $semantic-color-surface-primary;
|
||||
padding: $semantic-spacing-component-md;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
overflow-x: auto;
|
||||
margin: $semantic-spacing-component-sm 0 $semantic-spacing-component-lg 0;
|
||||
border: 1px solid $semantic-color-border-secondary;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: $semantic-color-text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// INTERACTIVE DEMO SECTION
|
||||
// ==========================================================================
|
||||
|
||||
.interactive-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $semantic-spacing-component-lg;
|
||||
}
|
||||
|
||||
.demo-feedback {
|
||||
padding: $semantic-spacing-component-md;
|
||||
background: $semantic-color-container-primary;
|
||||
color: $semantic-color-on-container-primary;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
border: 1px solid $semantic-color-border-secondary;
|
||||
text-align: center;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// RESPONSIVE DESIGN
|
||||
// ==========================================================================
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.menu-demo {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: $semantic-spacing-component-lg;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.usage-examples {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
pre {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.menu-demo {
|
||||
padding: $semantic-spacing-component-md;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
padding: $semantic-spacing-component-md;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
gap: $semantic-spacing-component-md;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// ACCESSIBILITY ENHANCEMENTS
|
||||
// ==========================================================================
|
||||
|
||||
// Focus indicators for better keyboard navigation
|
||||
.menu-demo {
|
||||
.demo-section:focus-within {
|
||||
outline: 2px solid $semantic-color-border-focus;
|
||||
outline-offset: 4px;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
}
|
||||
}
|
||||
|
||||
// High contrast mode support
|
||||
@media (prefers-contrast: high) {
|
||||
.demo-section {
|
||||
border: 2px solid $semantic-color-border-primary;
|
||||
}
|
||||
|
||||
.demo-feedback {
|
||||
border: 2px solid $semantic-color-border-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Reduced motion support
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.menu-demo * {
|
||||
transition: none;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user