theming-componentslisted

# Design Tokens & Theming System Comprehensive design token system providing the foundational styling architecture for all component skills, enabling brand customization, theme switching, RTL support, and consistent visual design. ## Overview Design tokens are the **single source of truth** for all visual design decisions. This skill provides: 1. **Complete Token Taxonomy**: 7 core categories (color, typography, spacing, borders, shadows, motion, z-index) 2. **Theme Switching**: Light/dark mode, high-contrast, custom brand themes 3. **RTL/i18n Support**: CSS logical properties for automatic right-to-left language support 4. **Multi-Platform Export**: CSS variables, SCSS, iOS Swift, Android XML, JavaScript 5. **Component Integration**: Skill chaining architecture for consistent styling across all components **Critical Architectural Principle:** ``` Component Skills (Behavior + Structure) → Use tokens for ALL visual styling Design Tokens (Styling Variables) → Define colors, spacing, typography Theme Files (Token Overrides) → Light, dark, brand-specific values ``` --- ## Quick Start ### Using Tokens in Components **Step 1: Reference tokens in your component:** ```css .button { background-color: var(--button-bg-primary); color: var(--button-text-primary); padding-inline: var(--button-padding-inline); padding-block: var(--button-padding-block); border-radius: var(--button-border-radius); transition: var(--transition-fast); } ``` **Step 2: The