Kunthawat Greethong
8a0edd225d
- Extract 9 nested skills from website-creator/ to root skills/ - Remove duplicate seo-analyzers, seo-geo, seo-multi-channel from website-creator - Add new ui-ux-pro-max skill with full UI/UX data - Update install-skills.sh to sync properly - Remove .DS_Store artifacts Moved skills: - api-and-interface-design - banner-design - brand - design-system - design - frontend-ui-engineering - slides - spec-driven-development - ui-styling
4.1 KiB
4.1 KiB
Semantic Tokens
Purpose-based aliases referencing primitive tokens.
Color Semantics
Background & Foreground
:root {
/* Page background */
--color-background: var(--color-gray-50);
--color-foreground: var(--color-gray-900);
/* Card/surface background */
--color-card: white;
--color-card-foreground: var(--color-gray-900);
/* Popover/dropdown */
--color-popover: white;
--color-popover-foreground: var(--color-gray-900);
}
Primary
:root {
--color-primary: var(--color-blue-600);
--color-primary-hover: var(--color-blue-700);
--color-primary-active: var(--color-blue-800);
--color-primary-foreground: white;
}
Secondary
:root {
--color-secondary: var(--color-gray-100);
--color-secondary-hover: var(--color-gray-200);
--color-secondary-foreground: var(--color-gray-900);
}
Muted
:root {
--color-muted: var(--color-gray-100);
--color-muted-foreground: var(--color-gray-500);
}
Accent
:root {
--color-accent: var(--color-gray-100);
--color-accent-foreground: var(--color-gray-900);
}
Destructive
:root {
--color-destructive: var(--color-red-600);
--color-destructive-hover: var(--color-red-700);
--color-destructive-foreground: white;
}
Status Colors
:root {
--color-success: var(--color-green-600);
--color-success-foreground: white;
--color-warning: var(--color-yellow-500);
--color-warning-foreground: var(--color-gray-900);
--color-error: var(--color-red-600);
--color-error-foreground: white;
--color-info: var(--color-blue-500);
--color-info-foreground: white;
}
Border & Ring
:root {
--color-border: var(--color-gray-200);
--color-input: var(--color-gray-200);
--color-ring: var(--color-blue-500);
}
Spacing Semantics
:root {
/* Component internal spacing */
--spacing-component-xs: var(--space-1);
--spacing-component-sm: var(--space-2);
--spacing-component: var(--space-3);
--spacing-component-lg: var(--space-4);
/* Section spacing */
--spacing-section-sm: var(--space-8);
--spacing-section: var(--space-12);
--spacing-section-lg: var(--space-16);
/* Page margins */
--spacing-page-x: var(--space-4);
--spacing-page-y: var(--space-6);
}
Typography Semantics
:root {
/* Headings */
--font-heading: var(--font-size-2xl);
--font-heading-lg: var(--font-size-3xl);
--font-heading-xl: var(--font-size-4xl);
/* Body */
--font-body: var(--font-size-base);
--font-body-sm: var(--font-size-sm);
--font-body-lg: var(--font-size-lg);
/* Labels & Captions */
--font-label: var(--font-size-sm);
--font-caption: var(--font-size-xs);
}
Interactive States
:root {
/* Focus ring */
--ring-width: 2px;
--ring-offset: 2px;
--ring-color: var(--color-ring);
/* Opacity for disabled */
--opacity-disabled: 0.5;
/* Transitions */
--transition-colors: color, background-color, border-color;
--transition-transform: transform;
--transition-all: all;
}
Dark Mode Overrides
.dark {
--color-background: var(--color-gray-950);
--color-foreground: var(--color-gray-50);
--color-card: var(--color-gray-900);
--color-card-foreground: var(--color-gray-50);
--color-popover: var(--color-gray-900);
--color-popover-foreground: var(--color-gray-50);
--color-muted: var(--color-gray-800);
--color-muted-foreground: var(--color-gray-400);
--color-secondary: var(--color-gray-800);
--color-secondary-foreground: var(--color-gray-50);
--color-accent: var(--color-gray-800);
--color-accent-foreground: var(--color-gray-50);
--color-border: var(--color-gray-800);
--color-input: var(--color-gray-800);
}
Usage Patterns
Applying Semantic Tokens
/* Good - uses semantic tokens */
.card {
background: var(--color-card);
color: var(--color-card-foreground);
border: 1px solid var(--color-border);
}
/* Bad - uses primitive tokens directly */
.card {
background: var(--color-gray-50);
color: var(--color-gray-900);
}
Theme Switching
Semantic tokens enable instant theme switching:
// Toggle dark mode
document.documentElement.classList.toggle('dark');