theming-components — Skillopedia

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 langu…

): # Skip metadata\n continue\n\n current_path = path + [key]\n key_lower = key.lower()\n\n # Check for physical properties\n for physical in physical_terms:\n if physical in key_lower:\n # Exception: Allow 'inset-inline-start' even though it contains 'start'\n if any(logical in key_lower for logical in logical_terms):\n continue\n\n errors.append(\n f\"❌ Token uses physical property '{physical}': {'.'.join(current_path)}\"\n )\n break\n\n # Recurse\n check_token_names(value, current_path)\n\n # Check all token files\n token_files_checked = 0\n for json_file in tokens_dir.rglob('*.json'):\n try:\n with open(json_file, 'r') as f:\n tokens = json.load(f)\n check_token_names(tokens)\n token_files_checked += 1\n except json.JSONDecodeError as e:\n warnings.append(f\"⚠️ Invalid JSON in {json_file}: {e}\")\n\n # Report\n print(\"\\n\" + \"=\" * 70)\n print(\"RTL VALIDATION REPORT\")\n print(\"=\" * 70)\n\n if errors:\n print(f\"\\n❌ ERRORS ({len(errors)}):\")\n for error in errors:\n print(f\" {error}\")\n print(\"\\n💡 Tip: Use logical properties for RTL support:\")\n print(\" ✅ Use: inline, block, inline-start, inline-end\")\n print(\" ❌ Avoid: left, right, top, bottom\")\n\n if warnings:\n print(f\"\\n⚠️ WARNINGS ({len(warnings)}):\")\n for warning in warnings:\n print(f\" {warning}\")\n\n if not errors and not warnings:\n print(\"\\n✅ All tokens use CSS logical properties! RTL-ready.\")\n\n print(f\"\\n📊 Checked {token_files_checked} token files\")\n print(\"=\" * 70)\n\n sys.exit(0 if not errors else 1)\n\n\nif __name__ == '__main__':\n validate_logical_properties()\n","content_type":"text/x-python; charset=utf-8","language":"python","size":3086,"content_sha256":"2de14f032ab9782d534d343f965e2763a7a4df66616729f788667217bf348a6d"},{"filename":"scripts/validate_tokens.py","content":"#!/usr/bin/env python3\n\"\"\"\nValidate design token structure and naming conventions.\n\nChecks:\n- W3C format compliance ($value, $type, $description)\n- Naming conventions (lowercase, hyphens)\n- Token references are valid\n- Required token categories exist\n\"\"\"\n\nimport json\nimport os\nimport re\nimport sys\nfrom pathlib import Path\n\n\nclass TokenValidator:\n def __init__(self, tokens_dir):\n self.tokens_dir = Path(tokens_dir)\n self.errors = []\n self.warnings = []\n self.all_tokens = {}\n\n def validate_all(self):\n \"\"\"Run all validations.\"\"\"\n print(\"🔍 Validating design tokens...\")\n\n # Load all tokens\n self.load_tokens()\n\n # Run validations\n self.validate_token_structure()\n self.validate_naming_conventions()\n self.validate_references()\n self.validate_required_categories()\n\n # Report results\n self.report()\n\n return len(self.errors) == 0\n\n def load_tokens(self):\n \"\"\"Load all token JSON files.\"\"\"\n for json_file in self.tokens_dir.rglob('*.json'):\n try:\n with open(json_file, 'r') as f:\n tokens = json.load(f)\n rel_path = str(json_file.relative_to(self.tokens_dir))\n self.all_tokens[rel_path] = tokens\n except json.JSONDecodeError as e:\n self.errors.append(f\"❌ Invalid JSON in {json_file}: {e}\")\n\n def validate_token_structure(self):\n \"\"\"Validate W3C format compliance.\"\"\"\n for file_path, tokens in self.all_tokens.items():\n self._validate_token_node(tokens, file_path, [])\n\n def _validate_token_node(self, node, file_path, path):\n \"\"\"Recursively validate token nodes.\"\"\"\n if not isinstance(node, dict):\n return\n\n # Check if this is a token (has $value)\n if '$value' in node:\n # Must have $type\n if '$type' not in node:\n self.errors.append(\n f\"❌ {file_path} - Token at {'.'.join(path)} missing $type\"\n )\n\n # $description is recommended\n if '$description' not in node:\n self.warnings.append(\n f\"⚠️ {file_path} - Token at {'.'.join(path)} missing $description (recommended)\"\n )\n\n # Validate $type values\n valid_types = [\n 'color', 'dimension', 'fontSize', 'fontWeight', 'fontFamily',\n 'number', 'duration', 'cubicBezier', 'shadow'\n ]\n if node.get('$type') not in valid_types:\n self.warnings.append(\n f\"⚠️ {file_path} - Token at {'.'.join(path)} has non-standard $type: {node.get('$type')}\"\n )\n\n # Recurse into children\n for key, value in node.items():\n if not key.startswith('

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

): # Skip metadata fields\n self._validate_token_node(value, file_path, path + [key])\n\n def validate_naming_conventions(self):\n \"\"\"Validate token naming conventions.\"\"\"\n for file_path, tokens in self.all_tokens.items():\n self._validate_names(tokens, file_path, [])\n\n def _validate_names(self, node, file_path, path):\n \"\"\"Recursively validate token names.\"\"\"\n if not isinstance(node, dict):\n return\n\n for key, value in node.items():\n if key.startswith('

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

): # Skip metadata\n continue\n\n # Check naming convention (lowercase, hyphens, no underscores)\n if not re.match(r'^[a-z0-9]+(-[a-z0-9]+)*

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

, key):\n self.errors.append(\n f\"❌ {file_path} - Invalid name '{key}' at {'.'.join(path)}. Use lowercase with hyphens only.\"\n )\n\n # Recurse\n self._validate_names(value, file_path, path + [key])\n\n def validate_references(self):\n \"\"\"Validate that token references ({xxx}) point to valid tokens.\"\"\"\n for file_path, tokens in self.all_tokens.items():\n self._validate_refs(tokens, file_path, [])\n\n def _validate_refs(self, node, file_path, path):\n \"\"\"Recursively validate token references.\"\"\"\n if not isinstance(node, dict):\n return\n\n if '$value' in node:\n value = node['$value']\n if isinstance(value, str) and value.startswith('{') and value.endswith('}'):\n ref = value[1:-1] # Remove { }\n # TODO: Validate ref exists\n # This would require building a full token map first\n pass\n\n for key, value in node.items():\n if not key.startswith('

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

):\n self._validate_refs(value, file_path, path + [key])\n\n def validate_required_categories(self):\n \"\"\"Validate that required token categories exist.\"\"\"\n required = ['colors.json', 'spacing.json', 'typography.json']\n existing = set(self.all_tokens.keys())\n\n for req_file in required:\n found = any(req_file in path for path in existing)\n if not found:\n self.warnings.append(\n f\"⚠️ Missing recommended token file: {req_file}\"\n )\n\n def report(self):\n \"\"\"Print validation report.\"\"\"\n print(\"\\n\" + \"=\" * 60)\n print(\"VALIDATION REPORT\")\n print(\"=\" * 60)\n\n if self.errors:\n print(f\"\\n❌ ERRORS ({len(self.errors)}):\")\n for error in self.errors:\n print(f\" {error}\")\n\n if self.warnings:\n print(f\"\\n⚠️ WARNINGS ({len(self.warnings)}):\")\n for warning in self.warnings:\n print(f\" {warning}\")\n\n if not self.errors and not self.warnings:\n print(\"\\n✅ All tokens are valid!\")\n\n print(f\"\\n📊 Summary:\")\n print(f\" Files checked: {len(self.all_tokens)}\")\n print(f\" Errors: {len(self.errors)}\")\n print(f\" Warnings: {len(self.warnings)}\")\n print(\"=\" * 60)\n\n\ndef main():\n # Determine tokens directory\n script_dir = Path(__file__).parent\n tokens_dir = script_dir.parent / 'tokens'\n\n if not tokens_dir.exists():\n print(f\"❌ Tokens directory not found: {tokens_dir}\")\n sys.exit(1)\n\n # Run validation\n validator = TokenValidator(tokens_dir)\n success = validator.validate_all()\n\n sys.exit(0 if success else 1)\n\n\nif __name__ == '__main__':\n main()\n","content_type":"text/x-python; charset=utf-8","language":"python","size":6448,"content_sha256":"b29f33e71242da2883a8ac29c0566aa827c307cc9bef71266f1eb377750d6d5d"},{"filename":"SKILL_CHAINING_ARCHITECTURE.md","content":"# Design Tokens Skill Chaining Architecture\n\n**Document Version:** 1.0\n**Date:** November 13, 2025\n**Purpose:** Define HOW component skills consume design tokens for consistent, themeable styling\n\n---\n\n## Executive Summary\n\nThis document defines the **foundational architecture** for skill chaining between `design-tokens` and all component skills (`data-viz`, `forms`, `tables`, etc.). It ensures:\n\n- ✅ **Visual consistency** across all components\n- ✅ **Automatic theming** (light/dark/high-contrast/custom brands)\n- ✅ **RTL support** via CSS logical properties\n- ✅ **Zero coupling** between component behavior and visual styling\n- ✅ **Infinite customization** without code changes\n\n**Critical Principle:**\n```\nComponent Skills = Behavior + Structure (NO visual styling)\nDesign Tokens = Visual Styling Variables (colors, spacing, typography)\nThemes = Token value overrides (light, dark, brand-specific)\n```\n\n---\n\n## Table of Contents\n\n1. [Architecture Overview](#architecture-overview)\n2. [Token Consumption Patterns](#token-consumption-patterns)\n3. [Component Token Naming Convention](#component-token-naming-convention)\n4. [CSS Logical Properties (RTL Support)](#css-logical-properties-rtl-support)\n5. [Theme Switching Mechanism](#theme-switching-mechanism)\n6. [Component Integration Checklist](#component-integration-checklist)\n7. [Examples](#examples)\n\n---\n\n## Architecture Overview\n\n### The Token Hierarchy\n\n```\n┌─────────────────────────────────────────────────────────┐\n│ LEVEL 1: PRIMITIVE TOKENS (Foundation) │\n│ Raw values, not used directly │\n│ │\n│ --color-blue-500: #3B82F6 │\n│ --space-4: 16px │\n│ --font-size-base: 16px │\n└─────────────────────────────────────────────────────────┘\n ↓ referenced by\n┌─────────────────────────────────────────────────────────┐\n│ LEVEL 2: SEMANTIC TOKENS (Purpose) │\n│ Meaningful names based on role │\n│ │\n│ --color-primary: var(--color-blue-500) │\n│ --spacing-md: var(--space-4) │\n│ --text-base: var(--font-size-base) │\n└─────────────────────────────────────────────────────────┘\n ↓ referenced by\n┌─────────────────────────────────────────────────────────┐\n│ LEVEL 3: COMPONENT TOKENS (Specific) │\n│ Component-specific styling │\n│ │\n│ --button-bg-primary: var(--color-primary) │\n│ --button-padding-inline: var(--spacing-md) │\n│ --button-font-size: var(--text-base) │\n└─────────────────────────────────────────────────────────┘\n ↓ used by\n┌─────────────────────────────────────────────────────────┐\n│ COMPONENT SKILLS (forms, data-viz, tables, etc.) │\n│ Use component tokens for ALL styling │\n│ │\n│ .button { │\n│ background: var(--button-bg-primary); │\n│ padding-inline: var(--button-padding-inline); │\n│ font-size: var(--button-font-size); │\n│ } │\n└─────────────────────────────────────────────────────────┘\n```\n\n---\n\n## Token Consumption Patterns\n\n### Pattern 1: Component Token Usage (Recommended)\n\n**Component skills reference component-specific tokens:**\n\n```tsx\n// ✅ CORRECT - Uses component tokens\nfunction Button({ variant = 'primary', children }) {\n return (\n \u003cbutton\n style={{\n backgroundColor: `var(--button-bg-${variant})`,\n color: `var(--button-text-${variant})`,\n paddingInline: 'var(--button-padding-inline)',\n paddingBlock: 'var(--button-padding-block)',\n borderRadius: 'var(--button-border-radius)',\n fontSize: 'var(--button-font-size)',\n fontWeight: 'var(--button-font-weight)',\n border: 'none',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n }}\n >\n {children}\n \u003c/button>\n );\n}\n```\n\n**Why this works:**\n- Theme changes automatically apply\n- Component stays decoupled from token values\n- Brand customization requires NO code changes\n- Component tokens can be overridden in themes\n\n---\n\n### Pattern 2: CSS Modules/Stylesheets\n\n```css\n/* Button.module.css */\n.button {\n background-color: var(--button-bg-primary);\n color: var(--button-text-primary);\n padding-inline: var(--button-padding-inline);\n padding-block: var(--button-padding-block);\n border-radius: var(--button-border-radius);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n border: none;\n cursor: pointer;\n transition: var(--transition-fast);\n}\n\n.button:hover {\n background-color: var(--button-bg-primary-hover);\n}\n\n.button--secondary {\n background-color: var(--button-bg-secondary);\n color: var(--button-text-secondary);\n}\n\n.button:disabled {\n background-color: var(--button-bg-disabled);\n color: var(--button-text-disabled);\n cursor: not-allowed;\n}\n```\n\n---\n\n### Pattern 3: Semantic Tokens (When No Component Token Exists)\n\n**If a component-specific token isn't defined, use semantic tokens:**\n\n```tsx\n// ✅ ACCEPTABLE - Uses semantic tokens as fallback\nfunction Alert({ type = 'info', children }) {\n const bgColor = `var(--color-${type}-bg)`; // Semantic\n const borderColor = `var(--color-${type}-border)`; // Semantic\n const textColor = `var(--color-${type}-text)`; // Semantic\n\n return (\n \u003cdiv\n style={{\n backgroundColor: bgColor,\n borderInlineStart: `4px solid ${borderColor}`,\n color: textColor,\n padding: 'var(--spacing-md)',\n borderRadius: 'var(--radius-md)',\n }}\n >\n {children}\n \u003c/div>\n );\n}\n```\n\n---\n\n### ❌ Anti-Pattern: Hardcoded Values\n\n```tsx\n// ❌ WRONG - Hardcoded values, no theming support\nfunction Button({ children }) {\n return (\n \u003cbutton\n style={{\n backgroundColor: '#3B82F6', // ❌ Hardcoded\n color: '#FFFFFF', // ❌ Hardcoded\n padding: '12px 24px', // ❌ Hardcoded\n borderRadius: '8px', // ❌ Hardcoded\n fontSize: '16px', // ❌ Hardcoded\n }}\n >\n {children}\n \u003c/button>\n );\n}\n```\n\n**Why this is bad:**\n- Breaks theme switching\n- Requires code changes for brand customization\n- No dark mode support\n- Inconsistent with other components\n\n---\n\n## Component Token Naming Convention\n\n### Standard Format\n\n```\n--{component}-{property}-{variant?}-{state?}\n```\n\n**Examples:**\n```css\n/* Button Component */\n--button-bg-primary /* Background for primary variant */\n--button-bg-primary-hover /* Background on hover */\n--button-bg-primary-active /* Background when active/pressed */\n--button-text-primary /* Text color for primary variant */\n--button-padding-inline /* Horizontal padding (RTL-aware) */\n--button-padding-block /* Vertical padding */\n--button-border-radius /* Corner radius */\n--button-font-size /* Text size */\n--button-font-weight /* Text weight */\n\n/* Input Component */\n--input-bg /* Background color */\n--input-border-color /* Border color (normal state) */\n--input-border-color-focus /* Border color when focused */\n--input-border-color-error /* Border color for error state */\n--input-text-color /* Text color */\n--input-placeholder-color /* Placeholder text color */\n--input-padding-inline /* Horizontal padding */\n--input-height /* Fixed height */\n\n/* Chart Component (data-viz skill) */\n--chart-color-1 /* First data series color */\n--chart-color-2 /* Second data series color */\n--chart-axis-color /* Axis line color */\n--chart-grid-color /* Grid line color */\n--chart-tooltip-bg /* Tooltip background */\n--chart-font-family /* Chart text font */\n```\n\n### Naming Rules\n\n1. **Always prefix with component name**: `--button-`, `--input-`, `--chart-`\n2. **Use logical property names**: `padding-inline`, `margin-block-start` (NOT `padding-left`, `margin-top`)\n3. **Include variant if applicable**: `-primary`, `-secondary`, `-tertiary`\n4. **Include state if applicable**: `-hover`, `-active`, `-disabled`, `-focus`, `-error`\n5. **Be specific and descriptive**: `--button-bg-primary` not `--btn-bg-p`\n\n---\n\n## CSS Logical Properties (RTL Support)\n\n### **CRITICAL: All component skills MUST use logical properties**\n\n**Why?**\n- Automatic RTL (Right-to-Left) support for Arabic, Hebrew, Persian, Urdu\n- No separate RTL stylesheets needed\n- Scales to all languages with zero code changes\n\n### Physical → Logical Mapping\n\n| Physical Property (❌ AVOID) | Logical Property (✅ USE) | Auto-Flips in RTL? |\n|------------------------------|---------------------------|--------------------|\n| `margin-left` | `margin-inline-start` | ✅ Yes |\n| `margin-right` | `margin-inline-end` | ✅ Yes |\n| `margin-top` | `margin-block-start` | ❌ No (vertical) |\n| `margin-bottom` | `margin-block-end` | ❌ No (vertical) |\n| `padding-left` | `padding-inline-start` | ✅ Yes |\n| `padding-right` | `padding-inline-end` | ✅ Yes |\n| `border-left` | `border-inline-start` | ✅ Yes |\n| `border-right` | `border-inline-end` | ✅ Yes |\n| `left: 0` | `inset-inline-start: 0` | ✅ Yes |\n| `right: 0` | `inset-inline-end: 0` | ✅ Yes |\n| `text-align: left` | `text-align: start` | ✅ Yes |\n| `text-align: right` | `text-align: end` | ✅ Yes |\n\n### Shorthand Properties\n\n```css\n/* Inline (horizontal in LTR, auto-flips in RTL) */\npadding-inline: 16px; /* Both start and end */\nmargin-inline: 8px 16px; /* Start, end */\n\n/* Block (vertical, same in all languages) */\npadding-block: 12px; /* Both start and end */\nmargin-block: 8px 16px; /* Start, end */\n```\n\n### Token Examples with Logical Properties\n\n```css\n/* ✅ CORRECT - Uses logical properties */\n:root {\n --button-padding-inline: 24px; /* Horizontal padding */\n --button-padding-block: 12px; /* Vertical padding */\n --button-margin-inline-start: 8px; /* Space before button */\n --icon-margin-inline-end: 4px; /* Space after icon */\n --dropdown-arrow-inset-inline-end: 12px; /* Arrow position */\n}\n\n/* Component usage */\n.button {\n padding-inline: var(--button-padding-inline);\n padding-block: var(--button-padding-block);\n margin-inline-start: var(--button-margin-inline-start);\n}\n\n/* LTR: padding-left: 24px, padding-right: 24px, margin-left: 8px */\n/* RTL: padding-right: 24px, padding-left: 24px, margin-right: 8px */\n```\n\n```css\n/* ❌ WRONG - Uses physical properties */\n:root {\n --button-padding-left: 24px; /* ❌ Won't flip in RTL */\n --button-padding-right: 24px; /* ❌ Won't flip in RTL */\n --button-margin-left: 8px; /* ❌ Won't flip in RTL */\n}\n```\n\n### Browser Support (2025)\n\n**Excellent Support:**\n- Chrome/Edge: Since 2018\n- Firefox: Since 2018\n- Safari: Since 2018\n- All modern browsers fully support logical properties\n\n---\n\n## Theme Switching Mechanism\n\n### How It Works\n\n**1. Set `data-theme` attribute on `\u003chtml>`:**\n\n```html\n\u003c!-- Light theme (default) -->\n\u003chtml lang=\"en\" data-theme=\"light\">\n\n\u003c!-- Dark theme -->\n\u003chtml lang=\"en\" data-theme=\"dark\">\n\n\u003c!-- Custom brand theme -->\n\u003chtml lang=\"en\" data-theme=\"acme-brand\">\n```\n\n**2. Theme-specific token overrides:**\n\n```css\n/* Base theme (light) */\n:root {\n --color-primary: #3B82F6;\n --color-background: #FFFFFF;\n --color-text-primary: #1F2937;\n}\n\n/* Dark theme */\n:root[data-theme=\"dark\"] {\n --color-primary: #60A5FA; /* Lighter primary for dark bg */\n --color-background: #111827; /* Dark background */\n --color-text-primary: #F9FAFB; /* Light text */\n}\n\n/* Brand theme */\n:root[data-theme=\"acme-brand\"] {\n --color-primary: #FF6B35; /* Brand orange */\n --color-secondary: #004E89; /* Brand blue */\n --font-sans: 'Poppins', sans-serif; /* Brand font */\n}\n```\n\n**3. JavaScript theme switcher:**\n\n```javascript\n// Set theme\nfunction setTheme(themeName) {\n document.documentElement.setAttribute('data-theme', themeName);\n localStorage.setItem('theme', themeName);\n}\n\n// Load saved theme\nconst savedTheme = localStorage.getItem('theme') || 'light';\nsetTheme(savedTheme);\n\n// Toggle theme\nfunction toggleTheme() {\n const current = document.documentElement.getAttribute('data-theme');\n const next = current === 'dark' ? 'light' : 'dark';\n setTheme(next);\n}\n```\n\n**4. React Theme Provider Pattern:**\n\n```tsx\nimport { createContext, useContext, useState, useEffect } from 'react';\n\nconst ThemeContext = createContext({\n theme: 'light',\n setTheme: (theme: string) => {},\n});\n\nexport function ThemeProvider({ children }) {\n const [theme, setTheme] = useState('light');\n\n useEffect(() => {\n document.documentElement.setAttribute('data-theme', theme);\n localStorage.setItem('theme', theme);\n }, [theme]);\n\n return (\n \u003cThemeContext.Provider value={{ theme, setTheme }}>\n {children}\n \u003c/ThemeContext.Provider>\n );\n}\n\nexport const useTheme = () => useContext(ThemeContext);\n\n// Usage in component\nfunction ThemeToggle() {\n const { theme, setTheme } = useTheme();\n\n return (\n \u003cbutton onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>\n {theme === 'light' ? '🌙 Dark Mode' : '☀️ Light Mode'}\n \u003c/button>\n );\n}\n```\n\n---\n\n## Component Integration Checklist\n\nWhen creating or updating a component skill, follow this checklist:\n\n### ✅ Design Phase\n- [ ] Identify all visual styling properties (colors, spacing, typography, etc.)\n- [ ] Map properties to token categories (color, spacing, typography, border, shadow, motion)\n- [ ] Define component-specific tokens in naming convention\n- [ ] Document token usage in component init.md\n\n### ✅ Implementation Phase\n- [ ] Use CSS custom properties for ALL styling (`var(--token-name)`)\n- [ ] Use logical properties for layout (`padding-inline`, `margin-block`)\n- [ ] NO hardcoded color values\n- [ ] NO hardcoded spacing values\n- [ ] NO hardcoded font sizes\n- [ ] NO `margin-left`, `padding-right`, etc. (use logical properties)\n\n### ✅ Token Definition Phase\n- [ ] Define component tokens in `design-tokens/tokens/components/{component}.json`\n- [ ] Use W3C format: `$value`, `$type`, `$description`\n- [ ] Reference semantic tokens (not primitives directly)\n- [ ] Include all variants (primary, secondary, etc.)\n- [ ] Include all states (hover, active, focus, disabled, error)\n\n### ✅ Documentation Phase\n- [ ] Add \"Styling & Theming\" section to component SKILL.md\n- [ ] List all component-specific tokens used\n- [ ] Provide custom theming example\n- [ ] Reference `design-tokens/` skill for complete documentation\n\n### ✅ Testing Phase\n- [ ] Test with light theme\n- [ ] Test with dark theme\n- [ ] Test with high-contrast theme\n- [ ] Test in RTL mode (`\u003chtml dir=\"rtl\">`)\n- [ ] Verify no hardcoded values\n- [ ] Verify theme switching works\n\n---\n\n## Examples\n\n### Example 1: Button Component (forms skill)\n\n**Component Tokens (design-tokens/tokens/components/button.json):**\n\n```json\n{\n \"button\": {\n \"bg\": {\n \"primary\": {\n \"$value\": \"{semantic.color.primary}\",\n \"$type\": \"color\",\n \"$description\": \"Background color for primary buttons\"\n },\n \"primary-hover\": {\n \"$value\": \"{semantic.color.primary-hover}\",\n \"$type\": \"color\"\n },\n \"secondary\": {\n \"$value\": \"{semantic.color.secondary}\",\n \"$type\": \"color\"\n },\n \"disabled\": {\n \"$value\": \"{semantic.color.disabled}\",\n \"$type\": \"color\"\n }\n },\n \"text\": {\n \"primary\": {\n \"$value\": \"{semantic.color.text-inverse}\",\n \"$type\": \"color\"\n }\n },\n \"padding\": {\n \"inline\": {\n \"$value\": \"{semantic.spacing.lg}\",\n \"$type\": \"dimension\"\n },\n \"block\": {\n \"$value\": \"{semantic.spacing.sm}\",\n \"$type\": \"dimension\"\n }\n },\n \"border-radius\": {\n \"$value\": \"{semantic.radius.md}\",\n \"$type\": \"dimension\"\n },\n \"font-size\": {\n \"$value\": \"{semantic.font-size.base}\",\n \"$type\": \"fontSize\"\n }\n }\n}\n```\n\n**Component Implementation:**\n\n```tsx\n// Button.tsx\nexport function Button({ variant = 'primary', children, ...props }) {\n return (\n \u003cbutton\n className=\"btn\"\n data-variant={variant}\n {...props}\n >\n {children}\n \u003c/button>\n );\n}\n```\n\n```css\n/* Button.module.css */\n.btn {\n background-color: var(--button-bg-primary);\n color: var(--button-text-primary);\n padding-inline: var(--button-padding-inline);\n padding-block: var(--button-padding-block);\n border-radius: var(--button-border-radius);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n border: none;\n cursor: pointer;\n transition: var(--transition-fast);\n}\n\n.btn:hover {\n background-color: var(--button-bg-primary-hover);\n}\n\n.btn[data-variant=\"secondary\"] {\n background-color: var(--button-bg-secondary);\n}\n\n.btn:disabled {\n background-color: var(--button-bg-disabled);\n cursor: not-allowed;\n}\n```\n\n---\n\n### Example 2: Chart Component (data-viz skill)\n\n**Component Tokens:**\n\n```json\n{\n \"chart\": {\n \"color\": {\n \"1\": { \"$value\": \"#648FFF\", \"$type\": \"color\" },\n \"2\": { \"$value\": \"#785EF0\", \"$type\": \"color\" },\n \"3\": { \"$value\": \"#DC267F\", \"$type\": \"color\" },\n \"4\": { \"$value\": \"#FE6100\", \"$type\": \"color\" },\n \"5\": { \"$value\": \"#FFB000\", \"$type\": \"color\" }\n },\n \"axis\": {\n \"color\": { \"$value\": \"{semantic.color.border}\", \"$type\": \"color\" }\n },\n \"grid\": {\n \"color\": { \"$value\": \"{semantic.color.border-subtle}\", \"$type\": \"color\" }\n },\n \"tooltip\": {\n \"bg\": { \"$value\": \"{semantic.color.bg-overlay}\", \"$type\": \"color\" }\n },\n \"font-family\": {\n \"$value\": \"{semantic.font.sans}\",\n \"$type\": \"fontFamily\"\n }\n }\n}\n```\n\n**Component Implementation (Recharts):**\n\n```tsx\nimport { LineChart, Line, XAxis, YAxis } from 'recharts';\n\nexport function SalesChart({ data }) {\n return (\n \u003cLineChart data={data}>\n \u003cXAxis stroke=\"var(--chart-axis-color)\" />\n \u003cYAxis stroke=\"var(--chart-axis-color)\" />\n \u003cLine\n type=\"monotone\"\n dataKey=\"sales\"\n stroke=\"var(--chart-color-1)\"\n strokeWidth={2}\n />\n \u003c/LineChart>\n );\n}\n```\n\n---\n\n## Summary\n\n**Key Takeaways:**\n\n1. ✅ **All component skills MUST use design tokens** for visual styling\n2. ✅ **Use CSS logical properties** for RTL support (`padding-inline`, not `padding-left`)\n3. ✅ **Component tokens follow naming convention**: `--{component}-{property}-{variant?}-{state?}`\n4. ✅ **No hardcoded values** - everything must be tokenized\n5. ✅ **Theme switching is automatic** via `data-theme` attribute\n6. ✅ **W3C format required**: Use `$value`, `$type`, `$description` in token files\n\n**This architecture enables:**\n- 🎨 Automatic theming (light/dark/custom brands)\n- 🌍 RTL support for international languages\n- ♿ Accessibility (high-contrast themes)\n- 🔄 Zero-coupling between behavior and styling\n- 🚀 Infinite customization without code changes\n\n---\n\n**END OF SKILL CHAINING ARCHITECTURE**\n\n*This document defines the contract between design-tokens and all component skills, ensuring consistent, themeable, and accessible UI styling across the entire component library.*\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":21172,"content_sha256":"c524c781e3326523c1e5443f3023007b45f6ad9fbea33071deda05f7a12e283d"},{"filename":"tokens/components/button.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"$description\": \"Button component tokens - for forms skill\",\n \"button\": {\n \"bg\": {\n \"primary\": {\n \"$value\": \"{semantic.color.primary}\",\n \"$type\": \"color\",\n \"$description\": \"Primary button background\"\n },\n \"primary-hover\": {\n \"$value\": \"{semantic.color.primary-hover}\",\n \"$type\": \"color\"\n },\n \"primary-active\": {\n \"$value\": \"{semantic.color.primary-active}\",\n \"$type\": \"color\"\n },\n \"secondary\": {\n \"$value\": \"{semantic.color.bg-secondary}\",\n \"$type\": \"color\"\n },\n \"secondary-hover\": {\n \"$value\": \"{semantic.color.bg-tertiary}\",\n \"$type\": \"color\"\n },\n \"tertiary\": {\n \"$value\": \"transparent\",\n \"$type\": \"color\"\n },\n \"disabled\": {\n \"$value\": \"{semantic.color.disabled}\",\n \"$type\": \"color\"\n },\n \"danger\": {\n \"$value\": \"{semantic.color.error}\",\n \"$type\": \"color\"\n },\n \"danger-hover\": {\n \"$value\": \"{color.red.600}\",\n \"$type\": \"color\"\n }\n },\n \"text\": {\n \"primary\": {\n \"$value\": \"{semantic.color.text-inverse}\",\n \"$type\": \"color\"\n },\n \"secondary\": {\n \"$value\": \"{semantic.color.text-primary}\",\n \"$type\": \"color\"\n },\n \"tertiary\": {\n \"$value\": \"{semantic.color.primary}\",\n \"$type\": \"color\"\n },\n \"disabled\": {\n \"$value\": \"{semantic.color.text-disabled}\",\n \"$type\": \"color\"\n }\n },\n \"padding\": {\n \"inline\": {\n \"$value\": \"{semantic.spacing.lg}\",\n \"$type\": \"dimension\",\n \"$description\": \"Horizontal padding - uses logical property\"\n },\n \"block\": {\n \"$value\": \"{semantic.spacing.sm}\",\n \"$type\": \"dimension\",\n \"$description\": \"Vertical padding - uses logical property\"\n }\n },\n \"border\": {\n \"radius\": {\n \"$value\": \"{semantic.radius.md}\",\n \"$type\": \"dimension\"\n },\n \"width\": {\n \"$value\": \"{border.width.thin}\",\n \"$type\": \"dimension\"\n },\n \"color-secondary\": {\n \"$value\": \"{semantic.color.border}\",\n \"$type\": \"color\"\n }\n },\n \"font\": {\n \"size\": {\n \"$value\": \"{font.size.base}\",\n \"$type\": \"fontSize\"\n },\n \"weight\": {\n \"$value\": \"{font.weight.medium}\",\n \"$type\": \"fontWeight\"\n }\n },\n \"height\": {\n \"sm\": {\n \"$value\": \"2rem\",\n \"$type\": \"dimension\",\n \"$description\": \"32px - small button\"\n },\n \"md\": {\n \"$value\": \"2.5rem\",\n \"$type\": \"dimension\",\n \"$description\": \"40px - medium button (default)\"\n },\n \"lg\": {\n \"$value\": \"3rem\",\n \"$type\": \"dimension\",\n \"$description\": \"48px - large button\"\n }\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":2867,"content_sha256":"80c35b4b66f9ab72074faf0238dbadf0f0fe944a6ef4a86b2f9fd5176640b706"},{"filename":"tokens/components/chart.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"$description\": \"Chart component tokens - for data-viz skill (colorblind-safe palette)\",\n \"chart\": {\n \"color\": {\n \"1\": {\n \"$value\": \"#648FFF\",\n \"$type\": \"color\",\n \"$description\": \"Blue - IBM colorblind-safe palette\"\n },\n \"2\": {\n \"$value\": \"#785EF0\",\n \"$type\": \"color\",\n \"$description\": \"Purple\"\n },\n \"3\": {\n \"$value\": \"#DC267F\",\n \"$type\": \"color\",\n \"$description\": \"Magenta\"\n },\n \"4\": {\n \"$value\": \"#FE6100\",\n \"$type\": \"color\",\n \"$description\": \"Orange\"\n },\n \"5\": {\n \"$value\": \"#FFB000\",\n \"$type\": \"color\",\n \"$description\": \"Yellow\"\n },\n \"6\": {\n \"$value\": \"#228833\",\n \"$type\": \"color\",\n \"$description\": \"Green - Paul Tol palette\"\n },\n \"7\": {\n \"$value\": \"#4477AA\",\n \"$type\": \"color\",\n \"$description\": \"Blue\"\n },\n \"8\": {\n \"$value\": \"#EE6677\",\n \"$type\": \"color\",\n \"$description\": \"Red\"\n }\n },\n \"axis\": {\n \"color\": {\n \"$value\": \"{semantic.color.border}\",\n \"$type\": \"color\"\n },\n \"font-size\": {\n \"$value\": \"{font.size.sm}\",\n \"$type\": \"fontSize\"\n }\n },\n \"grid\": {\n \"color\": {\n \"$value\": \"{semantic.color.bg-tertiary}\",\n \"$type\": \"color\",\n \"$description\": \"Subtle grid lines\"\n }\n },\n \"tooltip\": {\n \"bg\": {\n \"$value\": \"{semantic.color.bg-inverse}\",\n \"$type\": \"color\"\n },\n \"text\": {\n \"$value\": \"{semantic.color.text-inverse}\",\n \"$type\": \"color\"\n },\n \"shadow\": {\n \"$value\": \"{shadow.md}\",\n \"$type\": \"shadow\"\n }\n },\n \"font\": {\n \"family\": {\n \"$value\": \"{semantic.font.sans}\",\n \"$type\": \"fontFamily\"\n }\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":1913,"content_sha256":"e9f640b47e6f92c5beae9f7618d4cd8572fbd029d6f6a7a570e79e92da95b2a6"},{"filename":"tokens/components/input.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"$description\": \"Input component tokens - for forms skill\",\n \"input\": {\n \"bg\": {\n \"$value\": \"{semantic.color.bg-primary}\",\n \"$type\": \"color\"\n },\n \"bg-disabled\": {\n \"$value\": \"{semantic.color.bg-secondary}\",\n \"$type\": \"color\"\n },\n \"text\": {\n \"color\": {\n \"$value\": \"{semantic.color.text-primary}\",\n \"$type\": \"color\"\n },\n \"placeholder\": {\n \"$value\": \"{semantic.color.text-tertiary}\",\n \"$type\": \"color\"\n },\n \"disabled\": {\n \"$value\": \"{semantic.color.text-disabled}\",\n \"$type\": \"color\"\n }\n },\n \"border\": {\n \"color\": {\n \"$value\": \"{semantic.color.border}\",\n \"$type\": \"color\",\n \"$description\": \"Default border color\"\n },\n \"color-hover\": {\n \"$value\": \"{semantic.color.border-hover}\",\n \"$type\": \"color\"\n },\n \"color-focus\": {\n \"$value\": \"{semantic.color.border-focus}\",\n \"$type\": \"color\"\n },\n \"color-error\": {\n \"$value\": \"{semantic.color.border-error}\",\n \"$type\": \"color\"\n },\n \"width\": {\n \"$value\": \"{border.width.thin}\",\n \"$type\": \"dimension\"\n },\n \"radius\": {\n \"$value\": \"{semantic.radius.md}\",\n \"$type\": \"dimension\"\n }\n },\n \"padding\": {\n \"inline\": {\n \"$value\": \"{semantic.spacing.md}\",\n \"$type\": \"dimension\",\n \"$description\": \"Horizontal padding - uses logical property\"\n },\n \"block\": {\n \"$value\": \"{semantic.spacing.sm}\",\n \"$type\": \"dimension\",\n \"$description\": \"Vertical padding - uses logical property\"\n }\n },\n \"font\": {\n \"size\": {\n \"$value\": \"{font.size.base}\",\n \"$type\": \"fontSize\"\n }\n },\n \"height\": {\n \"$value\": \"2.5rem\",\n \"$type\": \"dimension\",\n \"$description\": \"40px - standard input height\"\n },\n \"shadow\": {\n \"focus\": {\n \"$value\": {\n \"offsetX\": \"0\",\n \"offsetY\": \"0\",\n \"blur\": \"0\",\n \"spread\": \"3px\",\n \"color\": \"rgba(59, 130, 246, 0.3)\"\n },\n \"$type\": \"shadow\",\n \"$description\": \"Focus ring shadow\"\n }\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":2245,"content_sha256":"7f8902b12ad3f35472bafb4aabfe24186fd5f2fafcba1ae8389dc3da80177428"},{"filename":"tokens/global/borders.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"border\": {\n \"width\": {\n \"0\": {\n \"$value\": \"0\",\n \"$type\": \"dimension\"\n },\n \"thin\": {\n \"$value\": \"1px\",\n \"$type\": \"dimension\",\n \"$description\": \"Standard border width\"\n },\n \"medium\": {\n \"$value\": \"2px\",\n \"$type\": \"dimension\"\n },\n \"thick\": {\n \"$value\": \"4px\",\n \"$type\": \"dimension\"\n },\n \"heavy\": {\n \"$value\": \"8px\",\n \"$type\": \"dimension\"\n }\n }\n },\n \"radius\": {\n \"none\": {\n \"$value\": \"0\",\n \"$type\": \"dimension\",\n \"$description\": \"No border radius\"\n },\n \"sm\": {\n \"$value\": \"0.25rem\",\n \"$type\": \"dimension\",\n \"$description\": \"4px - small radius\"\n },\n \"md\": {\n \"$value\": \"0.5rem\",\n \"$type\": \"dimension\",\n \"$description\": \"8px - medium radius\"\n },\n \"lg\": {\n \"$value\": \"0.75rem\",\n \"$type\": \"dimension\",\n \"$description\": \"12px - large radius\"\n },\n \"xl\": {\n \"$value\": \"1rem\",\n \"$type\": \"dimension\",\n \"$description\": \"16px - extra large radius\"\n },\n \"2xl\": {\n \"$value\": \"1.5rem\",\n \"$type\": \"dimension\",\n \"$description\": \"24px\"\n },\n \"full\": {\n \"$value\": \"9999px\",\n \"$type\": \"dimension\",\n \"$description\": \"Fully rounded - pills and circles\"\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":1380,"content_sha256":"931d577500c6b8fed42ed47495c9d780c0482f194b89aef8125c9678cf5b81e1"},{"filename":"tokens/global/colors.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"color\": {\n \"white\": {\n \"$value\": \"#FFFFFF\",\n \"$type\": \"color\",\n \"$description\": \"Pure white\"\n },\n \"black\": {\n \"$value\": \"#000000\",\n \"$type\": \"color\",\n \"$description\": \"Pure black\"\n },\n \"gray\": {\n \"50\": {\n \"$value\": \"#F9FAFB\",\n \"$type\": \"color\",\n \"$description\": \"Lightest gray - backgrounds\"\n },\n \"100\": {\n \"$value\": \"#F3F4F6\",\n \"$type\": \"color\"\n },\n \"200\": {\n \"$value\": \"#E5E7EB\",\n \"$type\": \"color\"\n },\n \"300\": {\n \"$value\": \"#D1D5DB\",\n \"$type\": \"color\"\n },\n \"400\": {\n \"$value\": \"#9CA3AF\",\n \"$type\": \"color\"\n },\n \"500\": {\n \"$value\": \"#6B7280\",\n \"$type\": \"color\",\n \"$description\": \"Base gray\"\n },\n \"600\": {\n \"$value\": \"#4B5563\",\n \"$type\": \"color\"\n },\n \"700\": {\n \"$value\": \"#374151\",\n \"$type\": \"color\"\n },\n \"800\": {\n \"$value\": \"#1F2937\",\n \"$type\": \"color\"\n },\n \"900\": {\n \"$value\": \"#111827\",\n \"$type\": \"color\",\n \"$description\": \"Darkest gray - text on light backgrounds\"\n }\n },\n \"blue\": {\n \"50\": {\n \"$value\": \"#EFF6FF\",\n \"$type\": \"color\"\n },\n \"100\": {\n \"$value\": \"#DBEAFE\",\n \"$type\": \"color\"\n },\n \"200\": {\n \"$value\": \"#BFDBFE\",\n \"$type\": \"color\"\n },\n \"300\": {\n \"$value\": \"#93C5FD\",\n \"$type\": \"color\"\n },\n \"400\": {\n \"$value\": \"#60A5FA\",\n \"$type\": \"color\"\n },\n \"500\": {\n \"$value\": \"#3B82F6\",\n \"$type\": \"color\",\n \"$description\": \"Base blue - primary brand color\"\n },\n \"600\": {\n \"$value\": \"#2563EB\",\n \"$type\": \"color\"\n },\n \"700\": {\n \"$value\": \"#1D4ED8\",\n \"$type\": \"color\"\n },\n \"800\": {\n \"$value\": \"#1E40AF\",\n \"$type\": \"color\"\n },\n \"900\": {\n \"$value\": \"#1E3A8A\",\n \"$type\": \"color\"\n }\n },\n \"purple\": {\n \"50\": {\n \"$value\": \"#FAF5FF\",\n \"$type\": \"color\"\n },\n \"100\": {\n \"$value\": \"#F3E8FF\",\n \"$type\": \"color\"\n },\n \"200\": {\n \"$value\": \"#E9D5FF\",\n \"$type\": \"color\"\n },\n \"300\": {\n \"$value\": \"#D8B4FE\",\n \"$type\": \"color\"\n },\n \"400\": {\n \"$value\": \"#C084FC\",\n \"$type\": \"color\"\n },\n \"500\": {\n \"$value\": \"#A855F7\",\n \"$type\": \"color\",\n \"$description\": \"Base purple - secondary brand color\"\n },\n \"600\": {\n \"$value\": \"#9333EA\",\n \"$type\": \"color\"\n },\n \"700\": {\n \"$value\": \"#7E22CE\",\n \"$type\": \"color\"\n },\n \"800\": {\n \"$value\": \"#6B21A8\",\n \"$type\": \"color\"\n },\n \"900\": {\n \"$value\": \"#581C87\",\n \"$type\": \"color\"\n }\n },\n \"green\": {\n \"50\": {\n \"$value\": \"#F0FDF4\",\n \"$type\": \"color\"\n },\n \"100\": {\n \"$value\": \"#DCFCE7\",\n \"$type\": \"color\"\n },\n \"200\": {\n \"$value\": \"#BBF7D0\",\n \"$type\": \"color\"\n },\n \"300\": {\n \"$value\": \"#86EFAC\",\n \"$type\": \"color\"\n },\n \"400\": {\n \"$value\": \"#4ADE80\",\n \"$type\": \"color\"\n },\n \"500\": {\n \"$value\": \"#22C55E\",\n \"$type\": \"color\",\n \"$description\": \"Base green - success states\"\n },\n \"600\": {\n \"$value\": \"#16A34A\",\n \"$type\": \"color\"\n },\n \"700\": {\n \"$value\": \"#15803D\",\n \"$type\": \"color\"\n },\n \"800\": {\n \"$value\": \"#166534\",\n \"$type\": \"color\"\n },\n \"900\": {\n \"$value\": \"#14532D\",\n \"$type\": \"color\"\n }\n },\n \"yellow\": {\n \"50\": {\n \"$value\": \"#FEFCE8\",\n \"$type\": \"color\"\n },\n \"100\": {\n \"$value\": \"#FEF9C3\",\n \"$type\": \"color\"\n },\n \"200\": {\n \"$value\": \"#FEF08A\",\n \"$type\": \"color\"\n },\n \"300\": {\n \"$value\": \"#FDE047\",\n \"$type\": \"color\"\n },\n \"400\": {\n \"$value\": \"#FACC15\",\n \"$type\": \"color\"\n },\n \"500\": {\n \"$value\": \"#EAB308\",\n \"$type\": \"color\",\n \"$description\": \"Base yellow - warning states\"\n },\n \"600\": {\n \"$value\": \"#CA8A04\",\n \"$type\": \"color\"\n },\n \"700\": {\n \"$value\": \"#A16207\",\n \"$type\": \"color\"\n },\n \"800\": {\n \"$value\": \"#854D0E\",\n \"$type\": \"color\"\n },\n \"900\": {\n \"$value\": \"#713F12\",\n \"$type\": \"color\"\n }\n },\n \"red\": {\n \"50\": {\n \"$value\": \"#FEF2F2\",\n \"$type\": \"color\"\n },\n \"100\": {\n \"$value\": \"#FEE2E2\",\n \"$type\": \"color\"\n },\n \"200\": {\n \"$value\": \"#FECACA\",\n \"$type\": \"color\"\n },\n \"300\": {\n \"$value\": \"#FCA5A5\",\n \"$type\": \"color\"\n },\n \"400\": {\n \"$value\": \"#F87171\",\n \"$type\": \"color\"\n },\n \"500\": {\n \"$value\": \"#EF4444\",\n \"$type\": \"color\",\n \"$description\": \"Base red - error/danger states\"\n },\n \"600\": {\n \"$value\": \"#DC2626\",\n \"$type\": \"color\"\n },\n \"700\": {\n \"$value\": \"#B91C1C\",\n \"$type\": \"color\"\n },\n \"800\": {\n \"$value\": \"#991B1B\",\n \"$type\": \"color\"\n },\n \"900\": {\n \"$value\": \"#7F1D1D\",\n \"$type\": \"color\"\n }\n },\n \"orange\": {\n \"50\": {\n \"$value\": \"#FFF7ED\",\n \"$type\": \"color\"\n },\n \"100\": {\n \"$value\": \"#FFEDD5\",\n \"$type\": \"color\"\n },\n \"200\": {\n \"$value\": \"#FED7AA\",\n \"$type\": \"color\"\n },\n \"300\": {\n \"$value\": \"#FDBA74\",\n \"$type\": \"color\"\n },\n \"400\": {\n \"$value\": \"#FB923C\",\n \"$type\": \"color\"\n },\n \"500\": {\n \"$value\": \"#F97316\",\n \"$type\": \"color\",\n \"$description\": \"Base orange - accent color\"\n },\n \"600\": {\n \"$value\": \"#EA580C\",\n \"$type\": \"color\"\n },\n \"700\": {\n \"$value\": \"#C2410C\",\n \"$type\": \"color\"\n },\n \"800\": {\n \"$value\": \"#9A3412\",\n \"$type\": \"color\"\n },\n \"900\": {\n \"$value\": \"#7C2D12\",\n \"$type\": \"color\"\n }\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":6397,"content_sha256":"b2b69b40c8f4de58134e08bc0394d4c8018eb97e844de5824a59cc4dfc45d1dc"},{"filename":"tokens/global/motion.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"duration\": {\n \"instant\": {\n \"$value\": \"100ms\",\n \"$type\": \"duration\",\n \"$description\": \"Instant transition\"\n },\n \"fast\": {\n \"$value\": \"150ms\",\n \"$type\": \"duration\",\n \"$description\": \"Fast transition - hover states\"\n },\n \"normal\": {\n \"$value\": \"200ms\",\n \"$type\": \"duration\",\n \"$description\": \"Normal transition - standard interactions\"\n },\n \"moderate\": {\n \"$value\": \"300ms\",\n \"$type\": \"duration\",\n \"$description\": \"Moderate transition - panel open/close\"\n },\n \"slow\": {\n \"$value\": \"500ms\",\n \"$type\": \"duration\",\n \"$description\": \"Slow transition - large movements\"\n },\n \"slower\": {\n \"$value\": \"700ms\",\n \"$type\": \"duration\",\n \"$description\": \"Very slow transition\"\n }\n },\n \"ease\": {\n \"linear\": {\n \"$value\": [0, 0, 1, 1],\n \"$type\": \"cubicBezier\",\n \"$description\": \"Linear easing - constant speed\"\n },\n \"in\": {\n \"$value\": [0.4, 0, 1, 1],\n \"$type\": \"cubicBezier\",\n \"$description\": \"Ease in - slow start\"\n },\n \"out\": {\n \"$value\": [0, 0, 0.2, 1],\n \"$type\": \"cubicBezier\",\n \"$description\": \"Ease out - slow end (most common)\"\n },\n \"in-out\": {\n \"$value\": [0.4, 0, 0.2, 1],\n \"$type\": \"cubicBezier\",\n \"$description\": \"Ease in-out - slow start and end\"\n },\n \"bounce\": {\n \"$value\": [0.68, -0.55, 0.265, 1.55],\n \"$type\": \"cubicBezier\",\n \"$description\": \"Bounce easing - playful animations\"\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":1579,"content_sha256":"b3e06477a3b3087e5d0bfa1ad42bbcfaaab833614c4031c760d2d55ab3e11513"},{"filename":"tokens/global/shadows.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"shadow\": {\n \"none\": {\n \"$value\": \"none\",\n \"$type\": \"shadow\",\n \"$description\": \"No shadow\"\n },\n \"xs\": {\n \"$value\": {\n \"offsetX\": \"0\",\n \"offsetY\": \"1px\",\n \"blur\": \"2px\",\n \"spread\": \"0\",\n \"color\": \"rgba(0, 0, 0, 0.05)\"\n },\n \"$type\": \"shadow\",\n \"$description\": \"Extra small shadow\"\n },\n \"sm\": {\n \"$value\": {\n \"offsetX\": \"0\",\n \"offsetY\": \"2px\",\n \"blur\": \"4px\",\n \"spread\": \"0\",\n \"color\": \"rgba(0, 0, 0, 0.07)\"\n },\n \"$type\": \"shadow\",\n \"$description\": \"Small shadow - subtle elevation\"\n },\n \"md\": {\n \"$value\": {\n \"offsetX\": \"0\",\n \"offsetY\": \"4px\",\n \"blur\": \"8px\",\n \"spread\": \"0\",\n \"color\": \"rgba(0, 0, 0, 0.1)\"\n },\n \"$type\": \"shadow\",\n \"$description\": \"Medium shadow - standard elevation\"\n },\n \"lg\": {\n \"$value\": {\n \"offsetX\": \"0\",\n \"offsetY\": \"8px\",\n \"blur\": \"16px\",\n \"spread\": \"0\",\n \"color\": \"rgba(0, 0, 0, 0.12)\"\n },\n \"$type\": \"shadow\",\n \"$description\": \"Large shadow - elevated cards\"\n },\n \"xl\": {\n \"$value\": {\n \"offsetX\": \"0\",\n \"offsetY\": \"12px\",\n \"blur\": \"24px\",\n \"spread\": \"0\",\n \"color\": \"rgba(0, 0, 0, 0.15)\"\n },\n \"$type\": \"shadow\",\n \"$description\": \"Extra large shadow - modals\"\n },\n \"2xl\": {\n \"$value\": {\n \"offsetX\": \"0\",\n \"offsetY\": \"24px\",\n \"blur\": \"48px\",\n \"spread\": \"0\",\n \"color\": \"rgba(0, 0, 0, 0.2)\"\n },\n \"$type\": \"shadow\",\n \"$description\": \"Largest shadow - high elevation\"\n },\n \"inner\": {\n \"$value\": {\n \"inset\": true,\n \"offsetX\": \"0\",\n \"offsetY\": \"2px\",\n \"blur\": \"4px\",\n \"spread\": \"0\",\n \"color\": \"rgba(0, 0, 0, 0.1)\"\n },\n \"$type\": \"shadow\",\n \"$description\": \"Inset shadow for pressed states\"\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":2029,"content_sha256":"713f9659ed4f45ed00cc146dafe25ebf457a218c30cff40be8cac7e73a352e8c"},{"filename":"tokens/global/spacing.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"space\": {\n \"0\": {\n \"$value\": \"0\",\n \"$type\": \"dimension\",\n \"$description\": \"Zero spacing\"\n },\n \"1\": {\n \"$value\": \"0.25rem\",\n \"$type\": \"dimension\",\n \"$description\": \"4px - smallest spacing unit\"\n },\n \"2\": {\n \"$value\": \"0.5rem\",\n \"$type\": \"dimension\",\n \"$description\": \"8px\"\n },\n \"3\": {\n \"$value\": \"0.75rem\",\n \"$type\": \"dimension\",\n \"$description\": \"12px\"\n },\n \"4\": {\n \"$value\": \"1rem\",\n \"$type\": \"dimension\",\n \"$description\": \"16px - base spacing unit\"\n },\n \"5\": {\n \"$value\": \"1.25rem\",\n \"$type\": \"dimension\",\n \"$description\": \"20px\"\n },\n \"6\": {\n \"$value\": \"1.5rem\",\n \"$type\": \"dimension\",\n \"$description\": \"24px\"\n },\n \"8\": {\n \"$value\": \"2rem\",\n \"$type\": \"dimension\",\n \"$description\": \"32px\"\n },\n \"10\": {\n \"$value\": \"2.5rem\",\n \"$type\": \"dimension\",\n \"$description\": \"40px\"\n },\n \"12\": {\n \"$value\": \"3rem\",\n \"$type\": \"dimension\",\n \"$description\": \"48px\"\n },\n \"16\": {\n \"$value\": \"4rem\",\n \"$type\": \"dimension\",\n \"$description\": \"64px\"\n },\n \"20\": {\n \"$value\": \"5rem\",\n \"$type\": \"dimension\",\n \"$description\": \"80px\"\n },\n \"24\": {\n \"$value\": \"6rem\",\n \"$type\": \"dimension\",\n \"$description\": \"96px\"\n },\n \"32\": {\n \"$value\": \"8rem\",\n \"$type\": \"dimension\",\n \"$description\": \"128px\"\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":1532,"content_sha256":"8452450e0526d0efa3eebb09256c4ea5f95f322419d35eb1eefe70260172f3f7"},{"filename":"tokens/global/typography.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"font\": {\n \"family\": {\n \"sans\": {\n \"$value\": \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif\",\n \"$type\": \"fontFamily\",\n \"$description\": \"Primary sans-serif font stack\"\n },\n \"serif\": {\n \"$value\": \"'Georgia', 'Times New Roman', serif\",\n \"$type\": \"fontFamily\",\n \"$description\": \"Serif font stack\"\n },\n \"mono\": {\n \"$value\": \"'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace\",\n \"$type\": \"fontFamily\",\n \"$description\": \"Monospace font stack for code\"\n }\n },\n \"size\": {\n \"xs\": {\n \"$value\": \"0.75rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"12px - extra small text\"\n },\n \"sm\": {\n \"$value\": \"0.875rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"14px - small text\"\n },\n \"base\": {\n \"$value\": \"1rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"16px - base body text size\"\n },\n \"lg\": {\n \"$value\": \"1.125rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"18px - large text\"\n },\n \"xl\": {\n \"$value\": \"1.25rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"20px\"\n },\n \"2xl\": {\n \"$value\": \"1.5rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"24px\"\n },\n \"3xl\": {\n \"$value\": \"1.875rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"30px\"\n },\n \"4xl\": {\n \"$value\": \"2.25rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"36px\"\n },\n \"5xl\": {\n \"$value\": \"3rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"48px\"\n },\n \"6xl\": {\n \"$value\": \"3.75rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"60px\"\n },\n \"7xl\": {\n \"$value\": \"4.5rem\",\n \"$type\": \"fontSize\",\n \"$description\": \"72px\"\n }\n },\n \"weight\": {\n \"thin\": {\n \"$value\": \"100\",\n \"$type\": \"fontWeight\"\n },\n \"extralight\": {\n \"$value\": \"200\",\n \"$type\": \"fontWeight\"\n },\n \"light\": {\n \"$value\": \"300\",\n \"$type\": \"fontWeight\"\n },\n \"normal\": {\n \"$value\": \"400\",\n \"$type\": \"fontWeight\",\n \"$description\": \"Regular weight\"\n },\n \"medium\": {\n \"$value\": \"500\",\n \"$type\": \"fontWeight\"\n },\n \"semibold\": {\n \"$value\": \"600\",\n \"$type\": \"fontWeight\"\n },\n \"bold\": {\n \"$value\": \"700\",\n \"$type\": \"fontWeight\"\n },\n \"extrabold\": {\n \"$value\": \"800\",\n \"$type\": \"fontWeight\"\n },\n \"black\": {\n \"$value\": \"900\",\n \"$type\": \"fontWeight\"\n }\n },\n \"line-height\": {\n \"none\": {\n \"$value\": \"1\",\n \"$type\": \"number\",\n \"$description\": \"No line height spacing\"\n },\n \"tight\": {\n \"$value\": \"1.25\",\n \"$type\": \"number\",\n \"$description\": \"Tight line spacing for headings\"\n },\n \"snug\": {\n \"$value\": \"1.375\",\n \"$type\": \"number\"\n },\n \"normal\": {\n \"$value\": \"1.5\",\n \"$type\": \"number\",\n \"$description\": \"Normal line spacing for body text\"\n },\n \"relaxed\": {\n \"$value\": \"1.625\",\n \"$type\": \"number\"\n },\n \"loose\": {\n \"$value\": \"2\",\n \"$type\": \"number\",\n \"$description\": \"Loose line spacing\"\n }\n },\n \"letter-spacing\": {\n \"tighter\": {\n \"$value\": \"-0.05em\",\n \"$type\": \"dimension\"\n },\n \"tight\": {\n \"$value\": \"-0.025em\",\n \"$type\": \"dimension\"\n },\n \"normal\": {\n \"$value\": \"0\",\n \"$type\": \"dimension\"\n },\n \"wide\": {\n \"$value\": \"0.025em\",\n \"$type\": \"dimension\"\n },\n \"wider\": {\n \"$value\": \"0.05em\",\n \"$type\": \"dimension\"\n },\n \"widest\": {\n \"$value\": \"0.1em\",\n \"$type\": \"dimension\"\n }\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":4036,"content_sha256":"c398169544fd7530f7c47ae6c232623ef1aaff2fea8ad6b54649d6992dc458ae"},{"filename":"tokens/global/z-index.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"z\": {\n \"base\": {\n \"$value\": \"0\",\n \"$type\": \"number\",\n \"$description\": \"Base z-index for normal content\"\n },\n \"dropdown\": {\n \"$value\": \"1000\",\n \"$type\": \"number\",\n \"$description\": \"Dropdown menus\"\n },\n \"sticky\": {\n \"$value\": \"1020\",\n \"$type\": \"number\",\n \"$description\": \"Sticky positioned elements\"\n },\n \"fixed\": {\n \"$value\": \"1030\",\n \"$type\": \"number\",\n \"$description\": \"Fixed positioned elements\"\n },\n \"modal-backdrop\": {\n \"$value\": \"1040\",\n \"$type\": \"number\",\n \"$description\": \"Modal backdrop/overlay\"\n },\n \"modal\": {\n \"$value\": \"1050\",\n \"$type\": \"number\",\n \"$description\": \"Modal dialogs\"\n },\n \"popover\": {\n \"$value\": \"1060\",\n \"$type\": \"number\",\n \"$description\": \"Popovers and context menus\"\n },\n \"tooltip\": {\n \"$value\": \"1070\",\n \"$type\": \"number\",\n \"$description\": \"Tooltips\"\n },\n \"notification\": {\n \"$value\": \"1080\",\n \"$type\": \"number\",\n \"$description\": \"Toast notifications - highest layer\"\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":1157,"content_sha256":"689b256ff50d0a2ffe210af13646aa99f8523fba7bf71d51865c688f7879d450"},{"filename":"tokens/languages/ar.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"$description\": \"Arabic language overrides - font and spacing adjustments\",\n \"semantic\": {\n \"font\": {\n \"sans\": {\n \"$value\": \"'Cairo', 'Noto Kufi Arabic', -apple-system, sans-serif\",\n \"$type\": \"fontFamily\",\n \"$description\": \"Arabic-optimized font stack\"\n }\n },\n \"font-line-height-base\": {\n \"$value\": \"1.75\",\n \"$type\": \"number\",\n \"$description\": \"Arabic needs more line height for diacritics\"\n },\n \"font-letter-spacing-base\": {\n \"$value\": \"0.01em\",\n \"$type\": \"dimension\",\n \"$description\": \"Slightly more spacing for Arabic\"\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":672,"content_sha256":"9dfb29c4448b8a0a85ca4ab4e5f13d028475613395ccd9174cf2021c7b0e67bf"},{"filename":"tokens/languages/ja.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"$description\": \"Japanese language overrides - font and spacing adjustments\",\n \"semantic\": {\n \"font\": {\n \"sans\": {\n \"$value\": \"'Noto Sans JP', -apple-system, sans-serif\",\n \"$type\": \"fontFamily\",\n \"$description\": \"Japanese-optimized font stack\"\n }\n },\n \"font-line-height-base\": {\n \"$value\": \"1.7\",\n \"$type\": \"number\",\n \"$description\": \"Japanese characters benefit from taller line height\"\n },\n \"font-letter-spacing-base\": {\n \"$value\": \"0.02em\",\n \"$type\": \"dimension\",\n \"$description\": \"Japanese letter spacing adjustment\"\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":671,"content_sha256":"284769545452494e1cca7798d8245cab56afec3f9b37ed5ec2c79b8e3a390ae2"},{"filename":"tokens/themes/dark.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"$description\": \"Dark theme - overrides for dark mode (only changed values)\",\n \"semantic\": {\n \"color\": {\n \"primary\": {\n \"$value\": \"{color.blue.400}\",\n \"$type\": \"color\",\n \"$description\": \"Lighter primary for dark backgrounds\"\n },\n \"primary-hover\": {\n \"$value\": \"{color.blue.300}\",\n \"$type\": \"color\"\n },\n \"primary-active\": {\n \"$value\": \"{color.blue.200}\",\n \"$type\": \"color\"\n },\n \"text-primary\": {\n \"$value\": \"{color.gray.50}\",\n \"$type\": \"color\",\n \"$description\": \"Light text for dark backgrounds\"\n },\n \"text-secondary\": {\n \"$value\": \"{color.gray.400}\",\n \"$type\": \"color\"\n },\n \"text-tertiary\": {\n \"$value\": \"{color.gray.600}\",\n \"$type\": \"color\"\n },\n \"text-disabled\": {\n \"$value\": \"{color.gray.700}\",\n \"$type\": \"color\"\n },\n \"text-inverse\": {\n \"$value\": \"{color.gray.900}\",\n \"$type\": \"color\",\n \"$description\": \"Dark text on light backgrounds (inverse of light theme)\"\n },\n \"bg-primary\": {\n \"$value\": \"{color.gray.900}\",\n \"$type\": \"color\",\n \"$description\": \"Dark background\"\n },\n \"bg-secondary\": {\n \"$value\": \"{color.gray.800}\",\n \"$type\": \"color\"\n },\n \"bg-tertiary\": {\n \"$value\": \"{color.gray.700}\",\n \"$type\": \"color\"\n },\n \"bg-inverse\": {\n \"$value\": \"{color.white}\",\n \"$type\": \"color\"\n },\n \"bg-overlay\": {\n \"$value\": \"rgba(0, 0, 0, 0.7)\",\n \"$type\": \"color\",\n \"$description\": \"Darker overlay for dark mode\"\n },\n \"border\": {\n \"$value\": \"{color.gray.700}\",\n \"$type\": \"color\"\n },\n \"border-hover\": {\n \"$value\": \"{color.gray.600}\",\n \"$type\": \"color\"\n },\n \"success-bg\": {\n \"$value\": \"rgba(34, 197, 94, 0.1)\",\n \"$type\": \"color\",\n \"$description\": \"Semi-transparent success background for dark mode\"\n },\n \"warning-bg\": {\n \"$value\": \"rgba(234, 179, 8, 0.1)\",\n \"$type\": \"color\"\n },\n \"error-bg\": {\n \"$value\": \"rgba(239, 68, 68, 0.1)\",\n \"$type\": \"color\"\n },\n \"info-bg\": {\n \"$value\": \"rgba(59, 130, 246, 0.1)\",\n \"$type\": \"color\"\n }\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":2386,"content_sha256":"4916d6dd777a55c01bc021f5eb6644341e7ac94dfb1c1f1b2c377061f9e19899"},{"filename":"tokens/themes/high-contrast.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"$description\": \"High-contrast theme - WCAG AAA (7:1 contrast ratio)\",\n \"semantic\": {\n \"color\": {\n \"primary\": {\n \"$value\": \"#0000FF\",\n \"$type\": \"color\",\n \"$description\": \"Pure blue for maximum contrast\"\n },\n \"primary-hover\": {\n \"$value\": \"#0000CC\",\n \"$type\": \"color\"\n },\n \"primary-active\": {\n \"$value\": \"#000099\",\n \"$type\": \"color\"\n },\n \"text-primary\": {\n \"$value\": \"{color.black}\",\n \"$type\": \"color\",\n \"$description\": \"Pure black text\"\n },\n \"text-secondary\": {\n \"$value\": \"#333333\",\n \"$type\": \"color\"\n },\n \"text-link\": {\n \"$value\": \"#0000FF\",\n \"$type\": \"color\"\n },\n \"text-link-hover\": {\n \"$value\": \"#0000CC\",\n \"$type\": \"color\"\n },\n \"bg-primary\": {\n \"$value\": \"{color.white}\",\n \"$type\": \"color\"\n },\n \"bg-secondary\": {\n \"$value\": \"#F5F5F5\",\n \"$type\": \"color\"\n },\n \"border\": {\n \"$value\": \"{color.black}\",\n \"$type\": \"color\",\n \"$description\": \"High contrast borders\"\n },\n \"border-focus\": {\n \"$value\": \"#0000FF\",\n \"$type\": \"color\"\n },\n \"success\": {\n \"$value\": \"#008000\",\n \"$type\": \"color\",\n \"$description\": \"Dark green for high contrast\"\n },\n \"warning\": {\n \"$value\": \"#FF8C00\",\n \"$type\": \"color\",\n \"$description\": \"Dark orange\"\n },\n \"error\": {\n \"$value\": \"#CC0000\",\n \"$type\": \"color\",\n \"$description\": \"Dark red\"\n }\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":1666,"content_sha256":"24a6a33b50bbe070e26cd638c91d0c5b34775b2ea74c2d7c023d284bb9ba438f"},{"filename":"tokens/themes/light.json","content":"{\n \"$schema\": \"https://www.designtokens.org/tr/2025.10/\",\n \"$description\": \"Light theme - semantic token mappings for light mode\",\n \"semantic\": {\n \"color\": {\n \"primary\": {\n \"$value\": \"{color.blue.500}\",\n \"$type\": \"color\",\n \"$description\": \"Primary brand color\"\n },\n \"primary-hover\": {\n \"$value\": \"{color.blue.600}\",\n \"$type\": \"color\"\n },\n \"primary-active\": {\n \"$value\": \"{color.blue.700}\",\n \"$type\": \"color\"\n },\n \"secondary\": {\n \"$value\": \"{color.purple.500}\",\n \"$type\": \"color\",\n \"$description\": \"Secondary brand color\"\n },\n \"accent\": {\n \"$value\": \"{color.orange.500}\",\n \"$type\": \"color\",\n \"$description\": \"Accent color\"\n },\n \"success\": {\n \"$value\": \"{color.green.500}\",\n \"$type\": \"color\"\n },\n \"success-bg\": {\n \"$value\": \"{color.green.50}\",\n \"$type\": \"color\"\n },\n \"success-border\": {\n \"$value\": \"{color.green.200}\",\n \"$type\": \"color\"\n },\n \"warning\": {\n \"$value\": \"{color.yellow.500}\",\n \"$type\": \"color\"\n },\n \"warning-bg\": {\n \"$value\": \"{color.yellow.50}\",\n \"$type\": \"color\"\n },\n \"warning-border\": {\n \"$value\": \"{color.yellow.200}\",\n \"$type\": \"color\"\n },\n \"error\": {\n \"$value\": \"{color.red.500}\",\n \"$type\": \"color\"\n },\n \"error-bg\": {\n \"$value\": \"{color.red.50}\",\n \"$type\": \"color\"\n },\n \"error-border\": {\n \"$value\": \"{color.red.200}\",\n \"$type\": \"color\"\n },\n \"info\": {\n \"$value\": \"{color.blue.500}\",\n \"$type\": \"color\"\n },\n \"info-bg\": {\n \"$value\": \"{color.blue.50}\",\n \"$type\": \"color\"\n },\n \"info-border\": {\n \"$value\": \"{color.blue.200}\",\n \"$type\": \"color\"\n },\n \"text-primary\": {\n \"$value\": \"{color.gray.900}\",\n \"$type\": \"color\",\n \"$description\": \"Primary text color for body content\"\n },\n \"text-secondary\": {\n \"$value\": \"{color.gray.600}\",\n \"$type\": \"color\",\n \"$description\": \"Secondary text color for subdued content\"\n },\n \"text-tertiary\": {\n \"$value\": \"{color.gray.400}\",\n \"$type\": \"color\",\n \"$description\": \"Tertiary text color for placeholders\"\n },\n \"text-disabled\": {\n \"$value\": \"{color.gray.300}\",\n \"$type\": \"color\"\n },\n \"text-inverse\": {\n \"$value\": \"{color.white}\",\n \"$type\": \"color\",\n \"$description\": \"Text color on dark backgrounds\"\n },\n \"text-link\": {\n \"$value\": \"{color.blue.500}\",\n \"$type\": \"color\"\n },\n \"text-link-hover\": {\n \"$value\": \"{color.blue.600}\",\n \"$type\": \"color\"\n },\n \"bg-primary\": {\n \"$value\": \"{color.white}\",\n \"$type\": \"color\",\n \"$description\": \"Primary background color\"\n },\n \"bg-secondary\": {\n \"$value\": \"{color.gray.50}\",\n \"$type\": \"color\",\n \"$description\": \"Secondary background color\"\n },\n \"bg-tertiary\": {\n \"$value\": \"{color.gray.100}\",\n \"$type\": \"color\"\n },\n \"bg-inverse\": {\n \"$value\": \"{color.gray.900}\",\n \"$type\": \"color\"\n },\n \"bg-overlay\": {\n \"$value\": \"rgba(0, 0, 0, 0.5)\",\n \"$type\": \"color\",\n \"$description\": \"Semi-transparent overlay for modals\"\n },\n \"border\": {\n \"$value\": \"{color.gray.300}\",\n \"$type\": \"color\",\n \"$description\": \"Default border color\"\n },\n \"border-hover\": {\n \"$value\": \"{color.gray.400}\",\n \"$type\": \"color\"\n },\n \"border-focus\": {\n \"$value\": \"{color.blue.500}\",\n \"$type\": \"color\"\n },\n \"border-error\": {\n \"$value\": \"{color.red.500}\",\n \"$type\": \"color\"\n },\n \"disabled\": {\n \"$value\": \"{color.gray.200}\",\n \"$type\": \"color\"\n }\n },\n \"spacing\": {\n \"xs\": {\n \"$value\": \"{space.1}\",\n \"$type\": \"dimension\",\n \"$description\": \"4px - extra small spacing\"\n },\n \"sm\": {\n \"$value\": \"{space.2}\",\n \"$type\": \"dimension\",\n \"$description\": \"8px - small spacing\"\n },\n \"md\": {\n \"$value\": \"{space.4}\",\n \"$type\": \"dimension\",\n \"$description\": \"16px - medium spacing (most common)\"\n },\n \"lg\": {\n \"$value\": \"{space.6}\",\n \"$type\": \"dimension\",\n \"$description\": \"24px - large spacing\"\n },\n \"xl\": {\n \"$value\": \"{space.8}\",\n \"$type\": \"dimension\",\n \"$description\": \"32px - extra large spacing\"\n },\n \"2xl\": {\n \"$value\": \"{space.12}\",\n \"$type\": \"dimension\",\n \"$description\": \"48px\"\n },\n \"3xl\": {\n \"$value\": \"{space.16}\",\n \"$type\": \"dimension\",\n \"$description\": \"64px\"\n }\n },\n \"font\": {\n \"sans\": {\n \"$value\": \"{font.family.sans}\",\n \"$type\": \"fontFamily\"\n },\n \"serif\": {\n \"$value\": \"{font.family.serif}\",\n \"$type\": \"fontFamily\"\n },\n \"mono\": {\n \"$value\": \"{font.family.mono}\",\n \"$type\": \"fontFamily\"\n }\n },\n \"radius\": {\n \"sm\": {\n \"$value\": \"{radius.sm}\",\n \"$type\": \"dimension\"\n },\n \"md\": {\n \"$value\": \"{radius.md}\",\n \"$type\": \"dimension\"\n },\n \"lg\": {\n \"$value\": \"{radius.lg}\",\n \"$type\": \"dimension\"\n },\n \"full\": {\n \"$value\": \"{radius.full}\",\n \"$type\": \"dimension\"\n }\n }\n }\n}\n","content_type":"application/json; charset=utf-8","language":"json","size":5596,"content_sha256":"492392d0bc10b775e85f525557b42743a89aaee39f5289c18e4a83cb892842a4"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Design Tokens & Theming System","type":"text"}]},{"type":"paragraph","content":[{"text":"Comprehensive design token system providing the foundational styling architecture for all component skills, enabling brand customization, theme switching, RTL support, and consistent visual design.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"Design tokens are the ","type":"text"},{"text":"single source of truth","type":"text","marks":[{"type":"strong"}]},{"text":" for all visual design decisions. This skill provides:","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Complete Token Taxonomy","type":"text","marks":[{"type":"strong"}]},{"text":": 7 core categories (color, typography, spacing, borders, shadows, motion, z-index)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Theme Switching","type":"text","marks":[{"type":"strong"}]},{"text":": Light/dark mode, high-contrast, custom brand themes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"RTL/i18n Support","type":"text","marks":[{"type":"strong"}]},{"text":": CSS logical properties for automatic right-to-left language support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multi-Platform Export","type":"text","marks":[{"type":"strong"}]},{"text":": CSS variables, SCSS, iOS Swift, Android XML, JavaScript","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Component Integration","type":"text","marks":[{"type":"strong"}]},{"text":": Skill chaining architecture for consistent styling across all components","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Critical Architectural Principle:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"Component Skills (Behavior + Structure) → Use tokens for ALL visual styling\nDesign Tokens (Styling Variables) → Define colors, spacing, typography\nTheme Files (Token Overrides) → Light, dark, brand-specific values","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Using Tokens in Components","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 1: Reference tokens in your component:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":".button {\n background-color: var(--button-bg-primary);\n color: var(--button-text-primary);\n padding-inline: var(--button-padding-inline);\n padding-block: var(--button-padding-block);\n border-radius: var(--button-border-radius);\n transition: var(--transition-fast);\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Step 2: Themes automatically apply:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"html"},"content":[{"text":"\u003c!-- Light theme -->\n\u003chtml data-theme=\"light\">\n \u003cbutton class=\"button\">Primary Button\u003c/button>\n\u003c/html>\n\n\u003c!-- Dark theme (same component, different appearance) -->\n\u003chtml data-theme=\"dark\">\n \u003cbutton class=\"button\">Primary Button\u003c/button>\n\u003c/html>","type":"text"}]},{"type":"paragraph","content":[{"text":"No code changes needed","type":"text","marks":[{"type":"strong"}]},{"text":" - theme switching is automatic!","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Basic Theme Switching","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"javascript"},"content":[{"text":"function setTheme(themeName) {\n document.documentElement.setAttribute('data-theme', themeName);\n localStorage.setItem('theme', themeName);\n}\n\nfunction toggleTheme() {\n const current = document.documentElement.getAttribute('data-theme');\n setTheme(current === 'dark' ? 'light' : 'dark');\n}\n\n// Load saved theme on page load\nsetTheme(localStorage.getItem('theme') || 'light');","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Token Taxonomy (7 Core Categories)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"1. Color Tokens","type":"text"}]},{"type":"paragraph","content":[{"text":"3-tier hierarchy: Primitive → Semantic → Component","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"/* Primitive (9-shade scales) */\n--color-blue-500: #3B82F6;\n\n/* Semantic (purpose-based) */\n--color-primary: var(--color-blue-500);\n--color-success: var(--color-green-500);\n--color-error: var(--color-red-500);\n\n/* Component-specific */\n--button-bg-primary: var(--color-primary);","type":"text"}]},{"type":"paragraph","content":[{"text":"Complete color system:","type":"text","marks":[{"type":"strong"}]},{"text":" See ","type":"text"},{"text":"references/color-system.md","type":"text","marks":[{"type":"code_inline"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"2. Spacing Tokens","type":"text"}]},{"type":"paragraph","content":[{"text":"4px base scale:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"--space-1: 4px; --space-2: 8px; --space-4: 16px;\n--space-6: 24px; --space-8: 32px; --space-12: 48px;\n\n/* Semantic */\n--spacing-sm: var(--space-2); /* 8px */\n--spacing-md: var(--space-4); /* 16px */\n--spacing-lg: var(--space-6); /* 24px */","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"3. Typography Tokens","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"--font-sans: 'Inter', -apple-system, sans-serif;\n--font-mono: 'Fira Code', monospace;\n\n--font-size-sm: 14px;\n--font-size-base: 16px;\n--font-size-lg: 18px;\n\n--font-weight-normal: 400;\n--font-weight-semibold: 600;\n--font-weight-bold: 700;","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"4. Border & Radius Tokens","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"--border-width-thin: 1px;\n--border-width-medium: 2px;\n\n--radius-sm: 4px;\n--radius-md: 8px;\n--radius-lg: 12px;\n--radius-full: 9999px;","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"5. Shadow Tokens","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.07);\n--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);\n--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);\n\n--shadow-focus-primary: 0 0 0 3px rgba(59, 130, 246, 0.3);","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"6. Motion Tokens","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"--duration-fast: 150ms;\n--duration-normal: 200ms;\n\n--ease-out: cubic-bezier(0, 0, 0.2, 1);\n--transition-fast: all var(--duration-fast) var(--ease-out);","type":"text"}]},{"type":"paragraph","content":[{"text":"Reduced motion support:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"@media (prefers-reduced-motion: reduce) {\n :root { --transition-fast: none; }\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"7. Z-Index Tokens","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"--z-dropdown: 1000;\n--z-modal-backdrop: 1040;\n--z-modal: 1050;\n--z-tooltip: 1070;","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Theme Architecture","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Light/Dark Themes","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"/* themes/light.css */\n:root {\n --color-primary: #3B82F6;\n --color-background: #FFFFFF;\n --color-text-primary: #1F2937;\n}\n\n/* themes/dark.css */\n:root[data-theme=\"dark\"] {\n --color-primary: #60A5FA;\n --color-background: #111827;\n --color-text-primary: #F9FAFB;\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Custom Brand Theme","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":":root[data-theme=\"my-brand\"] {\n --color-primary: #FF6B35;\n --font-sans: 'Poppins', sans-serif;\n --radius-md: 12px;\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Complete theme guide:","type":"text","marks":[{"type":"strong"}]},{"text":" See ","type":"text"},{"text":"references/theme-switching.md","type":"text","marks":[{"type":"code_inline"}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"CSS Logical Properties (RTL Support)","type":"text"}]},{"type":"paragraph","content":[{"text":"Use logical properties for automatic RTL language support:","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Physical (Avoid)","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Logical (Use)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"margin-left","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"margin-inline-start","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"padding-right","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"padding-inline-end","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"text-align: left","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"text-align: start","type":"text","marks":[{"type":"code_inline"}]}]}]}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"/* Correct - auto-flips in RTL */\n.button {\n padding-inline: var(--button-padding-inline);\n margin-inline-start: var(--spacing-sm);\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Complete RTL guide:","type":"text","marks":[{"type":"strong"}]},{"text":" See ","type":"text"},{"text":"references/logical-properties.md","type":"text","marks":[{"type":"code_inline"}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component Integration","type":"text"}]},{"type":"paragraph","content":[{"text":"All component skills use this naming convention:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"--{component}-{property}-{variant?}-{state?}","type":"text"}]},{"type":"paragraph","content":[{"text":"Examples:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"--button-bg-primary\n--button-bg-primary-hover\n--input-border-color-focus\n--chart-color-1","type":"text"}]},{"type":"paragraph","content":[{"text":"Components use tokens for ALL styling:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":".button {\n background-color: var(--button-bg-primary);\n border-radius: var(--button-border-radius);\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Theme changes automatically update all components.","type":"text"}]},{"type":"paragraph","content":[{"text":"Complete integration guide:","type":"text","marks":[{"type":"strong"}]},{"text":" See ","type":"text"},{"text":"references/component-integration.md","type":"text","marks":[{"type":"code_inline"}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Accessibility","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"WCAG 2.1 AA Compliance","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Normal text","type":"text","marks":[{"type":"strong"}]},{"text":": 4.5:1 contrast minimum","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Large text (18px+)","type":"text","marks":[{"type":"strong"}]},{"text":": 3:1 minimum","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"UI components","type":"text","marks":[{"type":"strong"}]},{"text":": 3:1 minimum","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"High-Contrast Theme","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":":root[data-theme=\"high-contrast\"] {\n --color-primary: #0000FF;\n --color-text-primary: #000000;\n /* 7:1 contrast (WCAG AAA) */\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Reduced Motion","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"css"},"content":[{"text":"@media (prefers-reduced-motion: reduce) {\n :root {\n --duration-fast: 0ms;\n --transition-fast: none;\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Complete accessibility guide:","type":"text","marks":[{"type":"strong"}]},{"text":" See ","type":"text"},{"text":"references/accessibility-tokens.md","type":"text","marks":[{"type":"code_inline"}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Platform Exports (Style Dictionary)","type":"text"}]},{"type":"paragraph","content":[{"text":"Transform tokens to any platform:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"JSON Tokens → Style Dictionary → CSS Variables\n → iOS Swift\n → Android XML\n → JavaScript","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"npm run build-tokens","type":"text"}]},{"type":"paragraph","content":[{"text":"Complete setup guide:","type":"text","marks":[{"type":"strong"}]},{"text":" See ","type":"text"},{"text":"references/style-dictionary-setup.md","type":"text","marks":[{"type":"code_inline"}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"W3C Token Format","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"json"},"content":[{"text":"{\n \"color\": {\n \"primary\": {\n \"$value\": \"#3B82F6\",\n \"$type\": \"color\"\n }\n }\n}","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Scripts","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# Generate color scale from base color\npython scripts/generate_color_scale.py --base \"#3B82F6\"\n\n# Validate token structure\npython scripts/validate_tokens.py\n\n# Check WCAG contrast ratios\npython scripts/validate_contrast.py\n\n# Build all platforms\nnpm run build-tokens","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"References","type":"text"}]},{"type":"paragraph","content":[{"text":"Core Systems:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/color-system.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Complete color scales and semantics","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/typography-system.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Type scales and fonts","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/spacing-system.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Spacing scale and rhythm","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Implementation:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/theme-switching.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Light/dark mode, custom themes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/component-integration.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" - How skills use tokens","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/logical-properties.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" - RTL support patterns","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Tools & Accessibility:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/style-dictionary-setup.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Multi-platform build","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/accessibility-tokens.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" - WCAG compliance","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Key Takeaways","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Design tokens are the foundation","type":"text","marks":[{"type":"strong"}]},{"text":" - All visual styling flows from tokens","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"3-level hierarchy","type":"text","marks":[{"type":"strong"}]},{"text":" - Primitive → Semantic → Component tokens","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"7 core categories","type":"text","marks":[{"type":"strong"}]},{"text":" - Color, spacing, typography, borders, shadows, motion, z-index","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Theme switching built-in","type":"text","marks":[{"type":"strong"}]},{"text":" - Light, dark, high-contrast, custom brands","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"RTL support automatic","type":"text","marks":[{"type":"strong"}]},{"text":" - CSS logical properties enable right-to-left languages","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessibility first","type":"text","marks":[{"type":"strong"}]},{"text":" - WCAG compliance, reduced motion, high contrast","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Referenced by all skills","type":"text","marks":[{"type":"strong"}]},{"text":" - Every component skill uses design tokens","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"paragraph","content":[{"text":"Progressive disclosure:","type":"text","marks":[{"type":"strong"}]},{"text":" This SKILL.md provides overview and quick start. Detailed documentation in ","type":"text"},{"text":"references/","type":"text","marks":[{"type":"code_inline"}]},{"text":" directory.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Skill chaining architecture:","type":"text","marks":[{"type":"strong"}]},{"text":" See ","type":"text"},{"text":"SKILL_CHAINING_ARCHITECTURE.md","type":"text","marks":[{"type":"code_inline"}]}]}]},"metadata":{"date":"2026-06-05","name":"theming-components","author":"@skillopedia","source":{"stars":368,"repo_name":"ai-design-components","origin_url":"https://github.com/ancoleman/ai-design-components/blob/HEAD/skills/theming-components/SKILL.md","repo_owner":"ancoleman","body_sha256":"d05f70ef1eeba8107157d9fb323105235628e6052b7cff8f9eedbd6a00a4bbff","cluster_key":"8fb07ce27acd3aca22e6a8aad759df2201efa645b578146d2b6814083a4f98a4","clean_bundle":{"format":"clean-skill-bundle-v1","source":"ancoleman/ai-design-components/skills/theming-components/SKILL.md","attachments":[{"id":"a608bf7f-9ecf-5f60-a708-c68c392a1e88","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/a608bf7f-9ecf-5f60-a708-c68c392a1e88/attachment.md","path":"README.md","size":15494,"sha256":"825c6dcc77a04b84ade0ab373b88a39de18ab9741d0bd34eb257bef1f79b68d6","contentType":"text/markdown; charset=utf-8"},{"id":"1571c0b8-5c77-55ed-b5e1-7f02d7d2f861","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/1571c0b8-5c77-55ed-b5e1-7f02d7d2f861/attachment.md","path":"SKILL_CHAINING_ARCHITECTURE.md","size":21172,"sha256":"c524c781e3326523c1e5443f3023007b45f6ad9fbea33071deda05f7a12e283d","contentType":"text/markdown; charset=utf-8"},{"id":"5f98193c-812f-5c5a-bc16-edaf4bd75c3b","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/5f98193c-812f-5c5a-bc16-edaf4bd75c3b/attachment.js","path":"config.js","size":3752,"sha256":"691e6bcd7b854b3030c2e211519636b83e39be5dbf945f9773fabeb8e83d5c28","contentType":"application/javascript; charset=utf-8"},{"id":"a0a7f3ff-78f4-57e1-a79d-47db1b2d864c","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/a0a7f3ff-78f4-57e1-a79d-47db1b2d864c/attachment.tsx","path":"examples/ThemeProvider.tsx","size":3386,"sha256":"5a545c80e089d0a9dad5bcffbe563fc5a27829587936407072023587b796fe05","contentType":"text/typescript; charset=utf-8"},{"id":"bad28a81-c524-52b6-bd6c-6e7ecb919adb","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/bad28a81-c524-52b6-bd6c-6e7ecb919adb/attachment.tsx","path":"examples/ThemeToggle.tsx","size":2392,"sha256":"86bd6d107b311b27185742f72cf7a5561c085f4009da5be5cc5027ed21b5e2ab","contentType":"text/typescript; charset=utf-8"},{"id":"161961fd-22c4-5430-a8dc-f78fed5a51fc","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/161961fd-22c4-5430-a8dc-f78fed5a51fc/attachment.tsx","path":"examples/TokenUsageExample.tsx","size":8633,"sha256":"271ae7c4f91b8397ee815d5642422be60bd5a3a8a4e016b1a74af390e2ef2193","contentType":"text/typescript; charset=utf-8"},{"id":"3c2b3419-ac6f-5552-b03c-530435236492","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/3c2b3419-ac6f-5552-b03c-530435236492/attachment.html","path":"examples/theme-switcher.html","size":5622,"sha256":"b20dbf1edd391db26c55d76552ce2fd470d73c93ae3c749411bd1d600a26d98c","contentType":"text/html; charset=utf-8"},{"id":"b8702de8-04ca-5594-ad94-793062453eb1","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/b8702de8-04ca-5594-ad94-793062453eb1/attachment.yaml","path":"outputs.yaml","size":14905,"sha256":"0c211b4c6f89ccb012228ea8a131ff20e609139980993e8efbd590eafe5d80ec","contentType":"application/yaml; charset=utf-8"},{"id":"1ef75ba9-c8c9-5c1e-99fa-75f37449b73d","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/1ef75ba9-c8c9-5c1e-99fa-75f37449b73d/attachment.json","path":"package.json","size":1056,"sha256":"ba502f04098cac8b87d54e6135f89c8ad96cbc34c1c11571a53edd9713fbd785","contentType":"application/json; charset=utf-8"},{"id":"c32a43fa-b836-54f5-9ab2-88a7b446342a","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/c32a43fa-b836-54f5-9ab2-88a7b446342a/attachment.md","path":"references/accessibility-tokens.md","size":6128,"sha256":"2b06f455afc6a84caba40d4452b2c91ce3fc87d30f5fe401f3844ee6e37bb296","contentType":"text/markdown; charset=utf-8"},{"id":"bef28ba8-bdd4-5864-868c-97a1bea3f914","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/bef28ba8-bdd4-5864-868c-97a1bea3f914/attachment.md","path":"references/color-system.md","size":3940,"sha256":"183302a9e47c676c4943836a57220234b1a3c61d307579414060ec490bef9cd4","contentType":"text/markdown; charset=utf-8"},{"id":"2ff0920b-aa27-53ab-86bb-29bd96a741cb","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/2ff0920b-aa27-53ab-86bb-29bd96a741cb/attachment.md","path":"references/component-integration.md","size":9819,"sha256":"57d00ed3ca84b6dc9808c227b25e5661cdc91c176ba37e6d3241b453b6191dfa","contentType":"text/markdown; charset=utf-8"},{"id":"69c207cc-8485-5a66-a868-f7e205e7b33c","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/69c207cc-8485-5a66-a868-f7e205e7b33c/attachment.md","path":"references/logical-properties.md","size":7188,"sha256":"f6cd538671197097af8110c13b496a4228fa8186af759e1d78a5b59e191c675a","contentType":"text/markdown; charset=utf-8"},{"id":"929ae075-eead-552b-b87c-14b9da841ad5","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/929ae075-eead-552b-b87c-14b9da841ad5/attachment.md","path":"references/spacing-system.md","size":3789,"sha256":"3ef8d281b67b570d4b2df2aeda442e3d78770746e3be067830ae4be2a819a7bc","contentType":"text/markdown; charset=utf-8"},{"id":"84e341b3-c1a6-580c-a847-68f3318791e8","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/84e341b3-c1a6-580c-a847-68f3318791e8/attachment.md","path":"references/style-dictionary-setup.md","size":6814,"sha256":"630010e8f2516eab86693e67e9518d5751a31ccd8b2c2942e2118e0ad82b2bf4","contentType":"text/markdown; charset=utf-8"},{"id":"6baee4b3-79fc-5224-91c8-adb94834cf6f","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/6baee4b3-79fc-5224-91c8-adb94834cf6f/attachment.md","path":"references/theme-switching.md","size":11167,"sha256":"bf6b3af9043d48468e622e8b8804d5f4b393aaf244ec5ff4a7bd8c012baf3f4a","contentType":"text/markdown; charset=utf-8"},{"id":"088a9cca-fc84-5bd0-99c9-2fdbb0c5ba5f","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/088a9cca-fc84-5bd0-99c9-2fdbb0c5ba5f/attachment.md","path":"references/typography-system.md","size":3602,"sha256":"9f97c7d68c1be510a84a19c95800a53d97aeec19c9c93f29d20a7f21f910a2cd","contentType":"text/markdown; charset=utf-8"},{"id":"0a151a24-9672-5c0a-ab0f-a8311cbf3b5c","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/0a151a24-9672-5c0a-ab0f-a8311cbf3b5c/attachment.py","path":"scripts/generate_color_scale.py","size":3093,"sha256":"c8db3ea29a4da3c8ca1b134ec3dcbfa6809ed96ffd31e771d692475b70c5e516","contentType":"text/x-python; charset=utf-8"},{"id":"835ce5a8-493b-5fab-a968-e3dc51291ce5","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/835ce5a8-493b-5fab-a968-e3dc51291ce5/attachment.py","path":"scripts/validate_contrast.py","size":5005,"sha256":"8406380c1e23390b3489d724fd69d8b277b73b48bef96dee6a7402ee912e1ed9","contentType":"text/x-python; charset=utf-8"},{"id":"aca8d92c-8e90-5962-acf6-2aae80f551ab","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/aca8d92c-8e90-5962-acf6-2aae80f551ab/attachment.py","path":"scripts/validate_logical_properties.py","size":3086,"sha256":"2de14f032ab9782d534d343f965e2763a7a4df66616729f788667217bf348a6d","contentType":"text/x-python; charset=utf-8"},{"id":"fca306c3-0d4a-575b-b32f-c01e0f4f0afd","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/fca306c3-0d4a-575b-b32f-c01e0f4f0afd/attachment.py","path":"scripts/validate_tokens.py","size":6448,"sha256":"b29f33e71242da2883a8ac29c0566aa827c307cc9bef71266f1eb377750d6d5d","contentType":"text/x-python; charset=utf-8"},{"id":"45c0dc4c-cbc5-5c80-a343-0a5abf2dfcfc","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/45c0dc4c-cbc5-5c80-a343-0a5abf2dfcfc/attachment.json","path":"tokens/components/button.json","size":2867,"sha256":"80c35b4b66f9ab72074faf0238dbadf0f0fe944a6ef4a86b2f9fd5176640b706","contentType":"application/json; charset=utf-8"},{"id":"f5d56dba-3f94-5f6b-ba31-0d0985fa850f","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/f5d56dba-3f94-5f6b-ba31-0d0985fa850f/attachment.json","path":"tokens/components/chart.json","size":1913,"sha256":"e9f640b47e6f92c5beae9f7618d4cd8572fbd029d6f6a7a570e79e92da95b2a6","contentType":"application/json; charset=utf-8"},{"id":"fa8e3ba1-9661-5348-b360-cf643c40b05c","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/fa8e3ba1-9661-5348-b360-cf643c40b05c/attachment.json","path":"tokens/components/input.json","size":2245,"sha256":"7f8902b12ad3f35472bafb4aabfe24186fd5f2fafcba1ae8389dc3da80177428","contentType":"application/json; charset=utf-8"},{"id":"061efaa2-aa10-558a-93ab-661558cd33b9","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/061efaa2-aa10-558a-93ab-661558cd33b9/attachment.json","path":"tokens/global/borders.json","size":1380,"sha256":"931d577500c6b8fed42ed47495c9d780c0482f194b89aef8125c9678cf5b81e1","contentType":"application/json; charset=utf-8"},{"id":"6639e560-ef78-563c-aa16-b2b091f5aaf1","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/6639e560-ef78-563c-aa16-b2b091f5aaf1/attachment.json","path":"tokens/global/colors.json","size":6397,"sha256":"b2b69b40c8f4de58134e08bc0394d4c8018eb97e844de5824a59cc4dfc45d1dc","contentType":"application/json; charset=utf-8"},{"id":"eaa38352-2a45-5176-a9f2-23c04701fe21","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/eaa38352-2a45-5176-a9f2-23c04701fe21/attachment.json","path":"tokens/global/motion.json","size":1579,"sha256":"b3e06477a3b3087e5d0bfa1ad42bbcfaaab833614c4031c760d2d55ab3e11513","contentType":"application/json; charset=utf-8"},{"id":"37c31fa6-1c45-5aa8-9549-a16b82229027","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/37c31fa6-1c45-5aa8-9549-a16b82229027/attachment.json","path":"tokens/global/shadows.json","size":2029,"sha256":"713f9659ed4f45ed00cc146dafe25ebf457a218c30cff40be8cac7e73a352e8c","contentType":"application/json; charset=utf-8"},{"id":"1a38ad1c-e767-583e-a538-82865e5a2e11","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/1a38ad1c-e767-583e-a538-82865e5a2e11/attachment.json","path":"tokens/global/spacing.json","size":1532,"sha256":"8452450e0526d0efa3eebb09256c4ea5f95f322419d35eb1eefe70260172f3f7","contentType":"application/json; charset=utf-8"},{"id":"28b81f18-e2d1-5795-b09c-c9d1c9abcec0","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/28b81f18-e2d1-5795-b09c-c9d1c9abcec0/attachment.json","path":"tokens/global/typography.json","size":4036,"sha256":"c398169544fd7530f7c47ae6c232623ef1aaff2fea8ad6b54649d6992dc458ae","contentType":"application/json; charset=utf-8"},{"id":"d9d84c34-f7ca-5c0e-93a1-a0e838cedc48","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/d9d84c34-f7ca-5c0e-93a1-a0e838cedc48/attachment.json","path":"tokens/global/z-index.json","size":1157,"sha256":"689b256ff50d0a2ffe210af13646aa99f8523fba7bf71d51865c688f7879d450","contentType":"application/json; charset=utf-8"},{"id":"0e44e0ab-86cd-5784-8700-5e2be0ad76ee","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/0e44e0ab-86cd-5784-8700-5e2be0ad76ee/attachment.json","path":"tokens/languages/ar.json","size":672,"sha256":"9dfb29c4448b8a0a85ca4ab4e5f13d028475613395ccd9174cf2021c7b0e67bf","contentType":"application/json; charset=utf-8"},{"id":"24d7e1ec-c234-501f-a142-6c90ed452d6f","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/24d7e1ec-c234-501f-a142-6c90ed452d6f/attachment.json","path":"tokens/languages/ja.json","size":671,"sha256":"284769545452494e1cca7798d8245cab56afec3f9b37ed5ec2c79b8e3a390ae2","contentType":"application/json; charset=utf-8"},{"id":"38dbf48b-3d4d-5672-8b1b-d58ed7e0900d","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/38dbf48b-3d4d-5672-8b1b-d58ed7e0900d/attachment.json","path":"tokens/themes/dark.json","size":2386,"sha256":"4916d6dd777a55c01bc021f5eb6644341e7ac94dfb1c1f1b2c377061f9e19899","contentType":"application/json; charset=utf-8"},{"id":"614caf96-ee87-5e1c-a508-41b2af39cc76","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/614caf96-ee87-5e1c-a508-41b2af39cc76/attachment.json","path":"tokens/themes/high-contrast.json","size":1666,"sha256":"24a6a33b50bbe070e26cd638c91d0c5b34775b2ea74c2d7c023d284bb9ba438f","contentType":"application/json; charset=utf-8"},{"id":"d6b1edbd-901f-59c6-98e7-90cf660ce46f","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/d6b1edbd-901f-59c6-98e7-90cf660ce46f/attachment.json","path":"tokens/themes/light.json","size":5596,"sha256":"492392d0bc10b775e85f525557b42743a89aaee39f5289c18e4a83cb892842a4","contentType":"application/json; charset=utf-8"}],"bundle_sha256":"d1151fac00ed0679ab6965c058af556eae070e2afd6c476e689cd4cefe83fafb","attachment_count":36,"text_attachments":36,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":1,"skill_md_path":"skills/theming-components/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"web-development","category_label":"Web"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"web-development","import_tag":"clean-skills-v1","description":"Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages."}},"renderedAt":1782986778553}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.