Add comprehensive semantic design token system
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
@@ -0,0 +1,319 @@
|
||||
// ==========================================================================
|
||||
// CONTENT CONTAINERS
|
||||
// ==========================================================================
|
||||
// Theme-agnostic content container structures
|
||||
// Focus on layout, spacing, and behavior - not visual styling
|
||||
// ==========================================================================
|
||||
|
||||
// PAGE CONTAINERS
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.page-centered {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.page-top-aligned {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: var(--z-page-header, 50);
|
||||
|
||||
&.page-header-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.page-header-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
// MAIN CONTENT AREAS
|
||||
.main-content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: var(--content-max-width, none);
|
||||
margin: 0 auto;
|
||||
padding: var(--content-padding, 24px);
|
||||
|
||||
&.main-content-narrow {
|
||||
max-width: var(--content-max-width-narrow, 768px);
|
||||
}
|
||||
|
||||
&.main-content-wide {
|
||||
max-width: var(--content-max-width-wide, 1400px);
|
||||
}
|
||||
|
||||
&.main-content-full {
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// CONTENT SECTIONS
|
||||
.content-section {
|
||||
margin-bottom: var(--section-spacing, 48px);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.content-section-compact {
|
||||
margin-bottom: var(--section-spacing-compact, 24px);
|
||||
}
|
||||
|
||||
&.content-section-spacious {
|
||||
margin-bottom: var(--section-spacing-spacious, 72px);
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: var(--section-header-spacing, 24px);
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 var(--section-title-spacing, 8px) 0;
|
||||
font-size: var(--section-title-size, 1.5rem);
|
||||
font-weight: var(--section-title-weight, 600);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.section-actions {
|
||||
margin-top: var(--section-actions-spacing, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// ARTICLE CONTAINERS
|
||||
.article-container {
|
||||
max-width: var(--article-max-width, 65ch);
|
||||
margin: 0 auto;
|
||||
padding: var(--article-padding, 24px);
|
||||
|
||||
.article-header {
|
||||
margin-bottom: var(--article-header-spacing, 32px);
|
||||
text-align: center;
|
||||
|
||||
.article-title {
|
||||
margin: 0 0 var(--article-title-spacing, 16px) 0;
|
||||
font-size: var(--article-title-size, 2rem);
|
||||
font-weight: var(--article-title-weight, 700);
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
margin-bottom: var(--article-meta-spacing, 24px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.article-content {
|
||||
line-height: var(--article-line-height, 1.6);
|
||||
|
||||
> * + * {
|
||||
margin-top: var(--article-element-spacing, 1.5em);
|
||||
}
|
||||
}
|
||||
|
||||
.article-footer {
|
||||
margin-top: var(--article-footer-spacing, 48px);
|
||||
padding-top: var(--article-footer-padding, 24px);
|
||||
border-top: 1px solid var(--border-color, #e5e5e5);
|
||||
}
|
||||
}
|
||||
|
||||
// SIDEBAR CONTAINERS
|
||||
.content-with-sidebar {
|
||||
display: flex;
|
||||
gap: var(--sidebar-gap, 32px);
|
||||
align-items: flex-start;
|
||||
|
||||
.main-column {
|
||||
flex: 1;
|
||||
min-width: 0; // Prevents flex item overflow
|
||||
}
|
||||
|
||||
.sidebar-column {
|
||||
flex-shrink: 0;
|
||||
width: var(--sidebar-width, 300px);
|
||||
}
|
||||
|
||||
&.sidebar-left {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.sidebar-right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content-with-sidebar {
|
||||
flex-direction: column;
|
||||
gap: var(--sidebar-gap-mobile, 24px);
|
||||
|
||||
.sidebar-column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.sidebar-right {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CARD CONTAINERS
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
background-clip: border-box;
|
||||
|
||||
.card-header {
|
||||
flex-shrink: 0;
|
||||
padding: var(--card-header-padding, 16px 24px);
|
||||
border-bottom: 1px solid var(--border-color, transparent);
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
|
||||
&.card-header-borderless {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1;
|
||||
padding: var(--card-body-padding, 24px);
|
||||
|
||||
&.card-body-compact {
|
||||
padding: var(--card-body-padding-compact, 16px);
|
||||
}
|
||||
|
||||
&.card-body-spacious {
|
||||
padding: var(--card-body-padding-spacious, 32px);
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
flex-shrink: 0;
|
||||
padding: var(--card-footer-padding, 16px 24px);
|
||||
border-top: 1px solid var(--border-color, transparent);
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
&.card-footer-borderless {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SPLIT CONTAINERS
|
||||
.split-container {
|
||||
display: flex;
|
||||
min-height: 0; // Allows flex children to shrink
|
||||
|
||||
&.split-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.split-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.split-pane {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.split-resizer {
|
||||
flex-shrink: 0;
|
||||
background: var(--resizer-background, transparent);
|
||||
position: relative;
|
||||
z-index: var(--z-resizer, 10);
|
||||
|
||||
&.split-resizer-horizontal {
|
||||
width: var(--resizer-size, 4px);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&.split-resizer-vertical {
|
||||
height: var(--resizer-size, 4px);
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--resizer-background-hover, rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SCROLLABLE CONTAINERS
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
|
||||
&.scrollable-x {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
&.scrollable-y {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
&.scrollable-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// CENTERED CONTAINERS
|
||||
.centered-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: var(--centered-min-height, 400px);
|
||||
|
||||
&.centered-full-height {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
&.centered-content {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user