@event4u/agent-config 5.10.1 → 6.0.0

package/dist/agent-src/skills/design-tokens/SKILL.md

@@ -0,0 +1,135 @@
+---
+model_tier: inherit
+name: design-tokens
+description: "Author a 3-layer DTCG token system (primitive → semantic → component) with light/dark theming; generate CSS vars + Tailwind colors and lint hardcoded values. Use on design tokens / CSS variables."
+domain: engineering
+personas:
+  - frontend-engineer
+workspaces:
+  - engineering
+packs:
+  - frontend-design
+trust:
+  level: professional
+install:
+  removable: true
+execution:
+  type: manual
+---
+
+# design-tokens
+
+> Token *authoring* skill: the 3-layer DTCG model
+> (**primitive → semantic → component**) with light/dark theming, a
+> Python toolchain (`scripts/tokens.py` — generate / validate / embed,
+> no Node dependency per ADR-061), and a starter template. Selection of
+> *which* token values fit the product comes grounded from
+> [`design-intelligence`](../design-intelligence/SKILL.md) (WCAG-adjusted
+> color sets, typography pairings); this skill turns the selection into a
+> maintained token system.
+
+Toolchain provenance: Python port of the upstream `.cjs` trio
+(`generate-tokens`, `validate-tokens`, `embed-tokens`) from
+`nextlevelbuilder/ui-ux-pro-max-skill` `design-system` sub-skill
+@ `b7e3af80f6e331f6fb456667b82b12cade7c9d35` (MIT, last checked
+2026-06-07); the HTML surface of upstream's `html-token-validator.py` is
+folded into `validate` so there is exactly **one** token-discipline
+linter. Obligations: [`design-intelligence/ATTRIBUTION.md`](../design-intelligence/ATTRIBUTION.md).
+
+## When to use
+
+- A project needs a token system (new design system, theme overhaul,
+  dark-mode introduction).
+- Hardcoded hex/px/rem values keep leaking into components — wire the
+  validate linter into review/polish.
+- The design brief landed WCAG-checked values that must become
+  maintainable CSS variables / Tailwind theme entries.
+
+## The 3-layer model
+
+| Layer | Names | References | Example |
+|---|---|---|---|
+| **Primitive** | raw scales | literal values only | `primitive.color.blue.600 = #2563EB` |
+| **Semantic** | meaning | primitives via `{primitive.…}` | `semantic.color.primary = {primitive.color.blue.600}` |
+| **Component** | per-widget | semantics via `{semantic.…}` | `component.button.bg = {semantic.color.primary}` |
+
+Rules: components never reference primitives directly; dark mode lives
+under `dark.semantic.*` overriding the same semantic names (emitted as a
+`.dark { … }` block); every value is a `{"$value": …, "$type": …}` pair
+(DTCG). Start from
+[the bundled starter template](templates/design-tokens-starter.json).
+
+## Toolchain (`scripts/tokens.py` — skill-relative, any cwd)
+
+```bash
+# tokens.json → CSS variables (primitives + semantic + components + .dark)
+python3 <skills-root>/design-tokens/scripts/tokens.py generate \
+  --config tokens.json -o assets/design-tokens.css
+
+# tokens.json → Tailwind theme.extend.colors snippet
+python3 …/tokens.py generate --config tokens.json --format tailwind
+
+# token-discipline lint: hardcoded hex/rgb/px/rem outside token files
+python3 …/tokens.py validate --dir src/ [--json]
+
+# embeddable inline CSS for standalone HTML artifacts
+python3 …/tokens.py embed --tokens assets/design-tokens.css --minimal --style
+```
+
+`validate --json` emits findings with `"kind": "token_violation"` — the
+exact finding kind the UI directive set's polish step auto-converts
+against `state.ui_audit.design_tokens`. Wire it into review/polish runs:
+scan the changed files, append the findings to
+`state.ui_review.findings`, and let the polish round fix them
+(`var(--token)` over hardcoded hex — the validation rule the council's
+four-operation split assigns to *rules/linters*, not the corpus).
+
+## Procedure
+
+1. **Inspect the existing styling surface** — detect the stack (Tailwind
+   config, global CSS, component conventions) and survey current
+   hard-coded values, so the token set covers what the codebase
+   actually uses.
+2. **Ground the values** — `design-intelligence` query gives the
+   WCAG-checked semantic color set + typography pairing for the product.
+3. **Author `tokens.json`** from the starter: fill primitives, point
+   semantics at them, add `dark.semantic` overrides.
+4. **Generate** CSS vars (and the Tailwind snippet when the stack is
+   Tailwind — see [`tailwind-engineer`](../tailwind-engineer/SKILL.md)).
+5. **Validate** the codebase; convert violations to `var(--token)`.
+6. Re-run `validate` until clean — exit code 0 is the evidence.
+
+## Output format
+
+1. `tokens.json` (DTCG, 3 layers + `dark.semantic`).
+2. Generated `design-tokens.css` (+ Tailwind `theme.extend.colors`
+   snippet when the stack is Tailwind).
+3. `validate` report — exit 0 evidence, or the violations list handed to
+   the polish round as `token_violation` findings.
+
+## Do NOT
+
+- Do NOT hand-edit generated CSS — `tokens.json` is the single source.
+- Do NOT let components reference primitives directly — semantic layer
+  in between, always.
+- Do NOT auto-fix validate findings blindly — `#000`/`#fff` and
+  runtime-computed values are legitimate; review each.
+- Do NOT port the brand→token pipeline without the watch-note trigger
+  (deferred per council).
+
+## Gotchas
+
+- `validate` intentionally skips `#000`/`#fff`(+6-digit forms), values on
+  lines already using `var(--…)`, comments, token-definition files, and
+  known external asset hosts — review its output, don't blindly allowlist.
+- Brand→token sync (`brand-guidelines.md` → scale generation) is
+  **deferred** per council 2026-06-07 (fork D2) — watch note:
+  `agents/settings/contexts/domain-watch/brand-token-pipeline.md`.
+- Keep `tokens.json` the single source; never hand-edit the generated CSS.
+
+## See also
+
+- [`design-intelligence`](../design-intelligence/SKILL.md) — grounded value selection.
+- [`tailwind-engineer`](../tailwind-engineer/SKILL.md) — utility-discipline consumer.
+- [`react-shadcn-ui`](../react-shadcn-ui/SKILL.md) — shadcn token conventions.
+- Tests: `tests/test_design_tokens_toolchain.py`.

package/dist/agent-src/skills/design-tokens/evals/triggers.json

@@ -0,0 +1,16 @@
+{
+  "skill": "design-tokens",
+  "description": "5 should-trigger + 5 should-not-trigger queries. Should-trigger covers token authoring, generation, and discipline linting; should-not-trigger covers value selection, Tailwind usage discipline, and component work.",
+  "queries": [
+    {"q": "set up a design token system with light and dark mode", "trigger": true},
+    {"q": "generate CSS variables from our tokens.json", "trigger": true},
+    {"q": "find hardcoded hex values that should use tokens", "trigger": true},
+    {"q": "erstelle ein DTCG Token-System für das Projekt", "trigger": true},
+    {"q": "emit the Tailwind theme colors from the token file", "trigger": true},
+    {"q": "which color palette fits a fintech product?", "trigger": false, "note": "design-intelligence — value selection, not authoring"},
+    {"q": "style this button with Tailwind utilities", "trigger": false, "note": "tailwind-engineer usage discipline"},
+    {"q": "add the dialog component via shadcn", "trigger": false, "note": "react-shadcn-ui installer"},
+    {"q": "audit contrast ratios on this screen", "trigger": false, "note": "accessibility-auditor"},
+    {"q": "sync brand guidelines into tokens", "trigger": false, "note": "brand->token pipeline deferred (watch note)"}
+  ]
+}

package/dist/agent-src/skills/design-tokens/scripts/tokens.py

@@ -0,0 +1,296 @@
+#!/usr/bin/env python3
+"""design-tokens · tokens — DTCG token toolchain (generate / validate / embed).
+
+Python port (no Node runtime dependency — ADR-061 fork, unanimous) of the
+upstream `.cjs` trio from `nextlevelbuilder/ui-ux-pro-max-skill`
+`design-system/scripts/{generate-tokens,validate-tokens,embed-tokens}.cjs`
+@ b7e3af80f6e331f6fb456667b82b12cade7c9d35 · MIT · last checked 2026-06-07.
+The HTML surface of `html-token-validator.py` is folded into `validate`
+(one token-discipline linter, not two).
+
+Usage (skill-relative; works from any cwd):
+  python3 tokens.py generate --config tokens.json [-o out.css] [--format css|tailwind]
+  python3 tokens.py validate --dir src/ [--ignore extra_dir] [--json]
+  python3 tokens.py embed --tokens assets/design-tokens.css [--minimal] [--style]
+
+Pure stdlib · read-only except `generate -o` · no network · no subprocess.
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import re
+import sys
+from pathlib import Path
+
+# --------------------------------------------------------------- generate
+def resolve_reference(value: object, tokens: dict) -> object:
+    """Resolve `{primitive.color.blue.600}`-style references recursively."""
+    if not isinstance(value, str) or not value.startswith("{"):
+        return value
+    path = value.strip("{}").split(".")
+    node: object = tokens
+    for key in path:
+        if not isinstance(node, dict):
+            return value
+        node = node.get(key)
+        if node is None:
+            return value
+    if isinstance(node, dict) and "$value" in node:
+        return resolve_reference(node["$value"], tokens)
+    return node if node is not None else value
+
+
+def flatten_tokens(obj: dict, tokens: dict, prefix: list | None = None,
+                   result: dict | None = None) -> dict:
+    """Flatten a DTCG token tree into `--css-var → resolved value`."""
+    prefix = prefix or []
+    result = result if result is not None else {}
+    for key, value in obj.items():
+        current = prefix + [key]
+        if isinstance(value, dict):
+            if "$value" in value:
+                css_var = "--" + "-".join(current).replace(".", "-")
+                result[css_var] = resolve_reference(value["$value"], tokens)
+            else:
+                flatten_tokens(value, tokens, current, result)
+    return result
+
+
+def generate_css(tokens: dict) -> str:
+    primitive = flatten_tokens(tokens.get("primitive") or {}, tokens, ["primitive"])
+    semantic = flatten_tokens(tokens.get("semantic") or {}, tokens, [])
+    component = flatten_tokens(tokens.get("component") or {}, tokens, [])
+    dark = flatten_tokens((tokens.get("dark") or {}).get("semantic") or {}, tokens, [])
+
+    def block(entries: dict) -> str:
+        return "\n".join(f"  {k}: {v};" for k, v in entries.items())
+
+    css = (
+        "/* Design Tokens - Auto-generated */\n"
+        "/* Do not edit directly - modify tokens.json instead */\n\n"
+        f"/* === PRIMITIVES === */\n:root {{\n{block(primitive)}\n}}\n\n"
+        f"/* === SEMANTIC === */\n:root {{\n{block(semantic)}\n}}\n\n"
+        f"/* === COMPONENTS === */\n:root {{\n{block(component)}\n}}\n"
+    )
+    if dark:
+        css += f"\n/* === DARK MODE === */\n.dark {{\n{block(dark)}\n}}\n"
+    return css
+
+
+def generate_tailwind(tokens: dict) -> str:
+    semantic = flatten_tokens(tokens.get("semantic") or {}, tokens, [])
+    colors = {
+        key.replace("--color-", "").replace("-", "."): f"var({key})"
+        for key in semantic
+        if "color" in key
+    }
+    body = json.dumps(colors, indent=2).replace('"', "'")
+    return (
+        "// Tailwind color config - Auto-generated\n"
+        "// Add to tailwind.config.ts theme.extend.colors\n\n"
+        f"module.exports = {{\n  colors: {body}\n}};\n"
+    )
+
+
+# --------------------------------------------------------------- validate
+PATTERNS = {
+    "hexColor": (
+        re.compile(r"#([0-9A-Fa-f]{3}){1,2}\b"),
+        "Hardcoded hex color", "Use var(--color-*) token",
+    ),
+    "rgbColor": (
+        re.compile(r"rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*[\d.]+\s*)?\)", re.I),
+        "Hardcoded RGB(A) color", "Use var(--color-*) token",
+    ),
+    "pixelValue": (
+        re.compile(r":\s*(\d{2,})px"),
+        "Hardcoded pixel value", "Use var(--space-*) or var(--radius-*) token",
+    ),
+    "remValue": (
+        re.compile(r":\s*\d+\.?\d*rem"),
+        "Hardcoded rem value", "Use var(--space-*) or var(--font-size-*) token",
+    ),
+}
+EXTENSIONS = {".css", ".scss", ".tsx", ".jsx", ".ts", ".js", ".vue",
+              ".svelte", ".html", ".blade.php"}
+SKIP_FILE_PATTERNS = (
+    re.compile(r"\.min\.(css|js)$"),
+    re.compile(r"tailwind\.config"),
+    re.compile(r"globals\.css"),
+    re.compile(r"tokens\.(css|json)"),
+)
+HEX_EXCEPTIONS = {"#000", "#FFF", "#000000", "#FFFFFF"}
+DEFAULT_IGNORE = {"node_modules", ".git", "dist", "build", ".next", "vendor"}
+ALLOWED_HOST_HINTS = ("fonts.googleapis.com", "fonts.gstatic.com",
+                      "unsplash.com", "pexels.com")
+
+
+def _iter_files(root: Path, ignore: set) -> list:
+    files: list[Path] = []
+    for path in sorted(root.rglob("*")):
+        if any(part in ignore for part in path.parts):
+            continue
+        suffix = "".join(path.suffixes[-2:]) if path.name.endswith(".blade.php") else path.suffix
+        if path.is_file() and suffix in EXTENSIONS:
+            if any(p.search(str(path)) for p in SKIP_FILE_PATTERNS):
+                continue
+            files.append(path)
+    return files
+
+
+def scan_file(path: Path) -> list:
+    violations = []
+    try:
+        lines = path.read_text(encoding="utf-8", errors="replace").split("\n")
+    except OSError:
+        return violations
+    for lineno, line in enumerate(lines, 1):
+        stripped = line.strip()
+        if stripped.startswith(("//", "/*", "*")) or "var(--" in line:
+            continue
+        if any(host in line for host in ALLOWED_HOST_HINTS):
+            continue
+        for kind, (regex, message, suggestion) in PATTERNS.items():
+            for match in regex.findall(line):
+                value = match if isinstance(match, str) else regex.search(line).group(0)
+                if kind == "hexColor":
+                    whole = regex.search(line).group(0)
+                    if whole.upper() in HEX_EXCEPTIONS:
+                        continue
+                    value = whole
+                violations.append({
+                    "file": str(path), "line": lineno, "type": kind,
+                    "value": value, "message": message,
+                    "suggestion": suggestion,
+                    "context": stripped[:80],
+                    # Maps onto the UI directive set's finding kind so the
+                    # polish step can auto-convert against audit tokens.
+                    "kind": "token_violation",
+                })
+                break  # one finding per pattern per line is enough
+    return violations
+
+
+def format_report(violations: list) -> str:
+    if not violations:
+        return "✅ No token violations found"
+    out = [f"⚠️  Found {len(violations)} potential token violations:", ""]
+    by_file: dict = {}
+    for v in violations:
+        by_file.setdefault(v["file"], []).append(v)
+    for file, items in by_file.items():
+        out.append(f"📁 {file}")
+        for v in items:
+            out += [
+                f"   Line {v['line']}: {v['message']}",
+                f"   Found: {v['value']}",
+                f"   Suggestion: {v['suggestion']}",
+                f"   Context: {v['context']}", "",
+            ]
+    counts: dict = {}
+    for v in violations:
+        counts[v["message"]] = counts.get(v["message"], 0) + 1
+    out.append("📊 Summary:")
+    out += [f"   {msg}: {n}" for msg, n in counts.items()]
+    return "\n".join(out)
+
+
+# --------------------------------------------------------------- embed
+MINIMAL_TOKEN_PREFIXES = (
+    "--primitive-spacing-", "--primitive-fontSize-", "--primitive-fontWeight-",
+    "--primitive-lineHeight-", "--primitive-radius-", "--primitive-shadow-glow-",
+    "--primitive-gradient-", "--primitive-duration-", "--color-primary",
+    "--color-secondary", "--color-accent", "--color-background",
+    "--color-surface", "--color-foreground", "--color-border",
+    "--typography-font-", "--card-",
+)
+
+
+def extract_tokens(css: str, minimal: bool = False) -> str:
+    blocks = re.findall(r":root\s*\{([^}]+)\}", css)
+    all_vars: list[str] = []
+    for block in blocks:
+        all_vars += re.findall(r"--[\w-]+:\s*[^;]+;", block)
+    if minimal:
+        all_vars = [v for v in all_vars
+                    if any(p in v for p in MINIMAL_TOKEN_PREFIXES)]
+    seen: list[str] = []
+    for v in all_vars:
+        if v not in seen:
+            seen.append(v)
+    return ":root {\n  " + "\n  ".join(seen) + "\n}"
+
+
+# --------------------------------------------------------------- CLI
+def main(argv: list | None = None) -> int:
+    parser = argparse.ArgumentParser(prog="tokens", description=__doc__)
+    sub = parser.add_subparsers(dest="op", required=True)
+
+    p_gen = sub.add_parser("generate", help="tokens.json → CSS vars / Tailwind colors")
+    p_gen.add_argument("--config", "-c", required=True)
+    p_gen.add_argument("--output", "-o", default=None)
+    p_gen.add_argument("--format", "-f", choices=["css", "tailwind"], default="css")
+
+    p_val = sub.add_parser("validate", help="find hardcoded values that should be tokens")
+    p_val.add_argument("--dir", "-d", required=True)
+    p_val.add_argument("--ignore", "-i", action="append", default=[])
+    p_val.add_argument("--json", action="store_true",
+                       help="Emit findings as JSON (kind=token_violation)")
+
+    p_emb = sub.add_parser("embed", help="emit embeddable inline CSS from a tokens.css")
+    p_emb.add_argument("--tokens", "-t", required=True,
+                       help="Path to the generated design-tokens.css")
+    p_emb.add_argument("--minimal", action="store_true")
+    p_emb.add_argument("--style", action="store_true", help="Wrap in <style> tags")
+
+    args = parser.parse_args(argv)
+
+    if args.op == "generate":
+        config = Path(args.config)
+        if not config.exists():
+            print(f"Error: Config file not found: {config}", file=sys.stderr)
+            return 1
+        tokens = json.loads(config.read_text(encoding="utf-8"))
+        output = generate_tailwind(tokens) if args.format == "tailwind" else generate_css(tokens)
+        if args.output:
+            out = Path(args.output)
+            out.parent.mkdir(parents=True, exist_ok=True)
+            out.write_text(output, encoding="utf-8")
+            print(f"Generated: {out}")
+        else:
+            print(output)
+        return 0
+
+    if args.op == "validate":
+        root = Path(args.dir)
+        if not root.exists():
+            print(f"Error: Directory not found: {root}", file=sys.stderr)
+            return 1
+        ignore = DEFAULT_IGNORE | set(args.ignore)
+        violations: list = []
+        for file in _iter_files(root, ignore):
+            violations += scan_file(file)
+        if args.json:
+            print(json.dumps(violations, indent=2))
+        else:
+            print(format_report(violations))
+        return 1 if violations else 0
+
+    # embed
+    tokens_path = Path(args.tokens)
+    if not tokens_path.exists():
+        print(f"Error: tokens css not found: {tokens_path}", file=sys.stderr)
+        return 1
+    output = extract_tokens(tokens_path.read_text(encoding="utf-8"), args.minimal)
+    header = "/* Design Tokens (embedded for standalone HTML) */"
+    if args.style:
+        print(f"<style>\n{header}\n{output}\n</style>")
+    else:
+        print(f"{header}\n{output}")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

package/dist/agent-src/skills/design-tokens/templates/design-tokens-starter.json

@@ -0,0 +1,143 @@
+{
+  "$schema": "https://design-tokens.org/schema.json",
+  "primitive": {
+    "color": {
+      "gray": {
+        "50": { "$value": "#F9FAFB", "$type": "color" },
+        "100": { "$value": "#F3F4F6", "$type": "color" },
+        "200": { "$value": "#E5E7EB", "$type": "color" },
+        "300": { "$value": "#D1D5DB", "$type": "color" },
+        "400": { "$value": "#9CA3AF", "$type": "color" },
+        "500": { "$value": "#6B7280", "$type": "color" },
+        "600": { "$value": "#4B5563", "$type": "color" },
+        "700": { "$value": "#374151", "$type": "color" },
+        "800": { "$value": "#1F2937", "$type": "color" },
+        "900": { "$value": "#111827", "$type": "color" },
+        "950": { "$value": "#030712", "$type": "color" }
+      },
+      "blue": {
+        "50": { "$value": "#EFF6FF", "$type": "color" },
+        "500": { "$value": "#3B82F6", "$type": "color" },
+        "600": { "$value": "#2563EB", "$type": "color" },
+        "700": { "$value": "#1D4ED8", "$type": "color" },
+        "800": { "$value": "#1E40AF", "$type": "color" }
+      },
+      "red": {
+        "500": { "$value": "#EF4444", "$type": "color" },
+        "600": { "$value": "#DC2626", "$type": "color" },
+        "700": { "$value": "#B91C1C", "$type": "color" }
+      },
+      "green": {
+        "500": { "$value": "#22C55E", "$type": "color" },
+        "600": { "$value": "#16A34A", "$type": "color" }
+      },
+      "yellow": {
+        "500": { "$value": "#EAB308", "$type": "color" }
+      },
+      "white": { "$value": "#FFFFFF", "$type": "color" }
+    },
+    "spacing": {
+      "0": { "$value": "0", "$type": "dimension" },
+      "1": { "$value": "0.25rem", "$type": "dimension" },
+      "2": { "$value": "0.5rem", "$type": "dimension" },
+      "3": { "$value": "0.75rem", "$type": "dimension" },
+      "4": { "$value": "1rem", "$type": "dimension" },
+      "5": { "$value": "1.25rem", "$type": "dimension" },
+      "6": { "$value": "1.5rem", "$type": "dimension" },
+      "8": { "$value": "2rem", "$type": "dimension" },
+      "10": { "$value": "2.5rem", "$type": "dimension" },
+      "12": { "$value": "3rem", "$type": "dimension" },
+      "16": { "$value": "4rem", "$type": "dimension" }
+    },
+    "fontSize": {
+      "xs": { "$value": "0.75rem", "$type": "dimension" },
+      "sm": { "$value": "0.875rem", "$type": "dimension" },
+      "base": { "$value": "1rem", "$type": "dimension" },
+      "lg": { "$value": "1.125rem", "$type": "dimension" },
+      "xl": { "$value": "1.25rem", "$type": "dimension" },
+      "2xl": { "$value": "1.5rem", "$type": "dimension" },
+      "3xl": { "$value": "1.875rem", "$type": "dimension" },
+      "4xl": { "$value": "2.25rem", "$type": "dimension" }
+    },
+    "radius": {
+      "none": { "$value": "0", "$type": "dimension" },
+      "sm": { "$value": "0.125rem", "$type": "dimension" },
+      "default": { "$value": "0.25rem", "$type": "dimension" },
+      "md": { "$value": "0.375rem", "$type": "dimension" },
+      "lg": { "$value": "0.5rem", "$type": "dimension" },
+      "xl": { "$value": "0.75rem", "$type": "dimension" },
+      "full": { "$value": "9999px", "$type": "dimension" }
+    },
+    "shadow": {
+      "none": { "$value": "none", "$type": "shadow" },
+      "sm": { "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "$type": "shadow" },
+      "default": { "$value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", "$type": "shadow" },
+      "md": { "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", "$type": "shadow" },
+      "lg": { "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", "$type": "shadow" }
+    },
+    "duration": {
+      "fast": { "$value": "150ms", "$type": "duration" },
+      "normal": { "$value": "200ms", "$type": "duration" },
+      "slow": { "$value": "300ms", "$type": "duration" }
+    }
+  },
+  "semantic": {
+    "color": {
+      "background": { "$value": "{primitive.color.gray.50}", "$type": "color" },
+      "foreground": { "$value": "{primitive.color.gray.900}", "$type": "color" },
+      "primary": { "$value": "{primitive.color.blue.600}", "$type": "color" },
+      "primary-hover": { "$value": "{primitive.color.blue.700}", "$type": "color" },
+      "primary-foreground": { "$value": "{primitive.color.white}", "$type": "color" },
+      "secondary": { "$value": "{primitive.color.gray.100}", "$type": "color" },
+      "secondary-foreground": { "$value": "{primitive.color.gray.900}", "$type": "color" },
+      "muted": { "$value": "{primitive.color.gray.100}", "$type": "color" },
+      "muted-foreground": { "$value": "{primitive.color.gray.500}", "$type": "color" },
+      "destructive": { "$value": "{primitive.color.red.600}", "$type": "color" },
+      "destructive-foreground": { "$value": "{primitive.color.white}", "$type": "color" },
+      "border": { "$value": "{primitive.color.gray.200}", "$type": "color" },
+      "ring": { "$value": "{primitive.color.blue.500}", "$type": "color" }
+    },
+    "spacing": {
+      "component": { "$value": "{primitive.spacing.4}", "$type": "dimension" },
+      "section": { "$value": "{primitive.spacing.12}", "$type": "dimension" }
+    }
+  },
+  "component": {
+    "button": {
+      "bg": { "$value": "{semantic.color.primary}", "$type": "color" },
+      "fg": { "$value": "{semantic.color.primary-foreground}", "$type": "color" },
+      "hover-bg": { "$value": "{semantic.color.primary-hover}", "$type": "color" },
+      "padding-x": { "$value": "{primitive.spacing.4}", "$type": "dimension" },
+      "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" },
+      "radius": { "$value": "{primitive.radius.md}", "$type": "dimension" },
+      "font-size": { "$value": "{primitive.fontSize.sm}", "$type": "dimension" }
+    },
+    "input": {
+      "bg": { "$value": "{semantic.color.background}", "$type": "color" },
+      "border": { "$value": "{semantic.color.border}", "$type": "color" },
+      "focus-ring": { "$value": "{semantic.color.ring}", "$type": "color" },
+      "padding-x": { "$value": "{primitive.spacing.3}", "$type": "dimension" },
+      "padding-y": { "$value": "{primitive.spacing.2}", "$type": "dimension" },
+      "radius": { "$value": "{primitive.radius.md}", "$type": "dimension" }
+    },
+    "card": {
+      "bg": { "$value": "{primitive.color.white}", "$type": "color" },
+      "border": { "$value": "{semantic.color.border}", "$type": "color" },
+      "shadow": { "$value": "{primitive.shadow.default}", "$type": "shadow" },
+      "padding": { "$value": "{primitive.spacing.6}", "$type": "dimension" },
+      "radius": { "$value": "{primitive.radius.lg}", "$type": "dimension" }
+    }
+  },
+  "dark": {
+    "semantic": {
+      "color": {
+        "background": { "$value": "{primitive.color.gray.950}", "$type": "color" },
+        "foreground": { "$value": "{primitive.color.gray.50}", "$type": "color" },
+        "secondary": { "$value": "{primitive.color.gray.800}", "$type": "color" },
+        "muted": { "$value": "{primitive.color.gray.800}", "$type": "color" },
+        "muted-foreground": { "$value": "{primitive.color.gray.400}", "$type": "color" },
+        "border": { "$value": "{primitive.color.gray.800}", "$type": "color" }
+      }
+    }
+  }
+}