ui-foundations 0.3.1 → 0.4.1

package/dist/tokens/json/semantics-(roles).tokens.json

@@ -1,203 +0,0 @@
-{
-  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
-  "Typography": {
-    "Heading": {
-      "Font Family": {
-        "$type": "fontFamily",
-        "$value": {
-          "$ref": "Brand/Font/Lead"
-        }
-      },
-      "Font Size": {
-        "md": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Font/Size/md"
-          }
-        },
-        "xs": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Font/Size/xs"
-          }
-        },
-        "sm": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Font/Size/sm"
-          }
-        },
-        "lg": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Font/Size/lg"
-          }
-        },
-        "xl": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Font/Size/xl"
-          }
-        },
-        "xxl": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Font/Size/xxl"
-          }
-        },
-        "xxxl": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Font/Size/xxxl"
-          }
-        }
-      },
-      "Font Weight": {
-        "$type": "fontWeight",
-        "$value": {
-          "$ref": "Font/Weight/700"
-        }
-      },
-      "Line Height": {
-        "md": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Line Height/md"
-          }
-        },
-        "xs": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Line Height/xs"
-          }
-        },
-        "sm": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Line Height/sm"
-          }
-        },
-        "lg": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Line Height/lg"
-          }
-        },
-        "xl": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Line Height/xl"
-          }
-        },
-        "xxl": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Line Height/xxl"
-          }
-        },
-        "xxxl": {
-          "$type": "number",
-          "$value": {
-            "$ref": "Line Height/xxxl"
-          }
-        }
-      }
-    },
-    "Code": {
-      "$type": "fontFamily",
-      "$value": {
-        "$ref": "Font/Family/Mono"
-      }
-    },
-    "Label": {
-      "Font Family": {
-        "$type": "fontFamily",
-        "$value": {
-          "$ref": "Brand/Font/Lead"
-        }
-      },
-      "Font Weight": {
-        "$type": "fontWeight",
-        "$value": {
-          "$ref": "Font/Weight/600"
-        }
-      },
-      "Font Size": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Font/Size/md"
-        }
-      },
-      "Line Height": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Line Height/md"
-        }
-      },
-      "Gap": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Size/Spacing/200"
-        }
-      }
-    },
-    "Body": {
-      "Font Family": {
-        "$type": "fontFamily",
-        "$value": {
-          "$ref": "Brand/Font/Base"
-        }
-      },
-      "Font Weight": {
-        "$type": "fontWeight",
-        "$value": {
-          "$ref": "Font/Weight/400"
-        }
-      },
-      "Font Size": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Font/Size/md"
-        }
-      },
-      "Line Height": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Line Height/md"
-        }
-      }
-    }
-  },
-  "Corner": {
-    "Button Radius": {
-      "$type": "number",
-      "$value": {
-        "$ref": "Brand/Corner/Button"
-      }
-    },
-    "Card Radius": {
-      "$type": "number",
-      "$value": {
-        "$ref": "Brand/Corner/Card"
-      }
-    },
-    "Modal Radius": {
-      "$type": "number",
-      "$value": {
-        "$ref": "Brand/Corner/Modal"
-      }
-    },
-    "Form Radius": {
-      "$type": "number",
-      "$value": {
-        "$ref": "Brand/Corner/Card"
-      }
-    },
-    "Checkbox Radius": {
-      "$type": "number",
-      "$value": {
-        "$ref": "Brand/Corner/Input"
-      }
-    }
-  }
-}

package/dist/tokens/json/themes-(brands).tokens.brand-a.json

@@ -1,115 +0,0 @@
-{
-  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
-  "Brand": {
-    "Color": {
-      "Functional": {
-        "Success": {
-          "$type": "color",
-          "$value": {
-            "$ref": "Color/Brand A/Green"
-          }
-        },
-        "Danger": {
-          "$type": "color",
-          "$value": {
-            "$ref": "Color/Brand A/Red"
-          }
-        },
-        "Base": {
-          "$type": "color",
-          "$value": {
-            "$ref": "Color/Brand A/Blue/700"
-          }
-        },
-        "Base Dark": {
-          "$type": "color",
-          "$value": {
-            "$ref": "Color/Brand A/Blue/800"
-          }
-        }
-      },
-      "Primary": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Brand A/Purple/600"
-        }
-      },
-      "Accent": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Brand A/Blue/500"
-        }
-      },
-      "Primary Dark": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Brand A/Purple/800"
-        }
-      },
-      "Accent Dark": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Brand A/Blue/700"
-        }
-      },
-      "Subtle": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Neutral/500"
-        }
-      },
-      "Subtle Dark": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Neutral/800"
-        }
-      },
-      "Subtle Light": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Neutral/200"
-        }
-      }
-    },
-    "Font": {
-      "Base": {
-        "$type": "string",
-        "$value": {
-          "$ref": "Font/Family/Sans"
-        }
-      },
-      "Lead": {
-        "$type": "string",
-        "$value": {
-          "$ref": "Font/Family/Serif"
-        }
-      }
-    },
-    "Corner": {
-      "Button": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Size/Radius/700"
-        }
-      },
-      "Card": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Size/Radius/200"
-        }
-      },
-      "Modal": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Size/Radius/400"
-        }
-      },
-      "Input": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Size/Radius/200"
-        }
-      }
-    }
-  }
-}

package/dist/tokens/json/themes-(brands).tokens.brand-b.json

@@ -1,115 +0,0 @@
-{
-  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
-  "Brand": {
-    "Color": {
-      "Functional": {
-        "Success": {
-          "$type": "color",
-          "$value": {
-            "$ref": "Color/Brand A/Green"
-          }
-        },
-        "Danger": {
-          "$type": "color",
-          "$value": {
-            "$ref": "Color/Brand A/Red"
-          }
-        },
-        "Base": {
-          "$type": "color",
-          "$value": {
-            "$ref": "Color/Brand A/Blue/700"
-          }
-        },
-        "Base Dark": {
-          "$type": "color",
-          "$value": {
-            "$ref": "Color/Brand A/Blue/800"
-          }
-        }
-      },
-      "Primary": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Brand A/Purple/600"
-        }
-      },
-      "Accent": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Brand A/Blue/500"
-        }
-      },
-      "Primary Dark": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Brand A/Purple/800"
-        }
-      },
-      "Accent Dark": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Brand A/Blue/700"
-        }
-      },
-      "Subtle": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Neutral/500"
-        }
-      },
-      "Subtle Dark": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Neutral/800"
-        }
-      },
-      "Subtle Light": {
-        "$type": "color",
-        "$value": {
-          "$ref": "Color/Neutral/200"
-        }
-      }
-    },
-    "Font": {
-      "Base": {
-        "$type": "string",
-        "$value": {
-          "$ref": "Font/Family/Sans"
-        }
-      },
-      "Lead": {
-        "$type": "string",
-        "$value": {
-          "$ref": "Font/Family/Serif"
-        }
-      }
-    },
-    "Corner": {
-      "Button": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Size/Radius/700"
-        }
-      },
-      "Card": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Size/Radius/200"
-        }
-      },
-      "Modal": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Size/Radius/400"
-        }
-      },
-      "Input": {
-        "$type": "number",
-        "$value": {
-          "$ref": "Size/Radius/200"
-        }
-      }
-    }
-  }
-}

package/docs/agentic/skills/README.md

@@ -1,51 +0,0 @@
-# Agentic Skills
-
-This directory contains repo-specific skills for AI-assisted design-system work.
-
-## Available skills
-
-### design-ops-specialist
-
-Use for tactical, proposal-first work:
-
-- minimal component drafts
-- token naming proposals
-- CSS pattern structure suggestions
-- optional React wrapper API sketches
-- docs/playground integration plans
-
-Best when the question is close to implementation and should stay incremental and non-breaking.
-
-Path:
-- `docs/agentic/skills/design-ops-specialist/SKILL.md`
-
-### design-system-architect
-
-Use for strategic, system-level work:
-
-- foundation reviews
-- token governance decisions
-- component boundary decisions
-- Figma/code reconciliation
-- architecture-level handoff and system recommendations
-
-Best when the question is about whether something belongs in the system at all, how foundations should evolve, or how to restore consistency across Figma, tokens, code, and docs.
-
-Path:
-- `docs/agentic/skills/design-system-architect/SKILL.md`
-
-## Quick selection guide
-
-Use `design-ops-specialist` when the question sounds like:
-
-- "Propose a draft for this component"
-- "How should the token names look?"
-- "What files would change?"
-- "How would the CSS and docs be structured?"
-
-Use `design-system-architect` when the question sounds like:
-
-- "Should this be a standalone component or composition?"
-- "Do we need new semantic tokens?"
-- "Are the foundations still coherent?"
-- "How do we reconcile Figma and code drift?"

package/docs/agentic/skills/design-ops-specialist/SKILL.md

@@ -1,60 +0,0 @@
----
-name: design-ops-specialist
-description: "Tactical proposal-first guidance for token-first component work in this repo and package consumers. Use when a request asks for a minimal component draft, token naming proposal, CSS pattern structure under src/ui/patterns, optional React wrapper API, docs/playground integration, or a concrete implementation plan that should stay incremental and non-breaking. Prefer design-system-architect instead when the request is about foundations, token governance, component-boundary decisions, Figma/code drift, or system-wide architecture."
----
-
-# Design Ops Specialist
-
-## Intent
-
-Use this skill for tactical, proposal-first work before or just ahead of implementation.
-
-This skill is narrower than `design-system-architect`.
-
-- Use `design-ops-specialist` for concrete component drafts and repo-shaped implementation proposals.
-- Use `design-system-architect` for system-wide reviews, governance, and architecture decisions.
-
-## Workflow
-
-1. Confirm scope and constraints:
-   - component name
-   - parts / variants / states
-   - platform or framework constraints
-   - whether the ask is proposal-only or implementation-adjacent
-2. Align with source rules:
-   - `docs/foundations/`
-   - `docs/agentic/assistant-behavior-rules.md`
-   - `docs/agentic/team-ai-playbook.md`
-3. If the request implies a new system component, call out that boundary validation is required and defer the strategic decision to `design-system-architect` when needed.
-4. Produce a concise proposal by default, with no code changes unless explicitly requested.
-5. Keep proposals minimal, incremental, and non-breaking.
-
-## Output format
-
-Provide these sections:
-
-1. Boundary assumption
-   - whether this is assumed to be composition or a valid standalone candidate
-   - if unclear, say so briefly
-2. Token naming proposal
-   - prefix, variants, parts, states
-   - alignment to foundations naming rules
-3. CSS pattern structure
-   - target files under `src/ui/patterns` or existing family integration
-   - expected class names and token hookups
-4. Optional React wrapper API
-   - only when requested or clearly needed
-   - props mapped to token variants/states
-5. Docs + playground integration
-   - required docs pages/sections
-   - playground additions or updates
-6. Implementation surface
-   - exact repo paths likely to change
-
-## Guardrails
-
-- Prefer extending existing patterns over introducing new frameworks.
-- Keep recommendations compatible with token-first and Figma-aligned architecture.
-- Do not broaden into foundations governance unless explicitly asked.
-- If requirements are underspecified, ask targeted clarifying questions or state minimal assumptions.
-- If the task is really about whether something belongs in the system at all, hand off conceptually to `design-system-architect`.

package/docs/agentic/skills/design-system-architect/SKILL.md

@@ -1,106 +0,0 @@
----
-name: design-system-architect
-description: "Strategic design-system architecture for this repo. Use when reviewing or evolving foundations, deciding token governance, evaluating component boundaries, reconciling Figma/code drift, auditing semantic coverage, or making architecture-level decisions that span beyond a single component proposal. Prefer this skill over design-ops-specialist when the request is system-wide, governance-heavy, or about whether something should enter the system at all."
----
-
-# Design System Architect
-
-## Intent
-
-Use this skill for system-level decisions, reviews, and governance.
-
-This skill is broader than `design-ops-specialist`.
-
-- Use `design-ops-specialist` for tactical, proposal-first component drafts.
-- Use `design-system-architect` for architecture, boundaries, token governance, and Figma/code alignment decisions.
-
-## Required source alignment
-
-Before responding, align to these repo sources:
-
-- `docs/foundations/`
-- `docs/agentic/assistant-behavior-rules.md`
-- `docs/agentic/team-ai-playbook.md`
-
-At minimum, check these when relevant:
-
-- `docs/foundations/foundation-001-token-layering.md`
-- `docs/foundations/foundation-002-naming-and-grouping.md`
-- `docs/foundations/foundation-003-color-semantics-and-status.md`
-- `docs/foundations/foundation-009-component-boundaries-and-utility.md`
-- `docs/foundations/foundation-010-implementation-and-pipeline-workflow.md`
-- `docs/foundations/foundation-011-branching-and-release-governance.md`
-
-## Task types
-
-### 1. Foundation review
-
-Use when reviewing the health of the system.
-
-Check for:
-
-- layering integrity
-- semantic gaps
-- naming drift
-- duplicate concepts
-- hard-coded or leaky component decisions
-- weak state coverage
-- Figma/code mismatch
-
-### 2. Token governance
-
-Use when deciding whether to create, alias, rename, or reject token changes.
-
-Report:
-
-- correct layer
-- rationale
-- consumer scope
-- theme/mode impact
-- migration implications
-
-### 3. Boundary decision
-
-Use before proposing or implementing a new component.
-
-Decide:
-
-- composition inside an existing family, or
-- standalone system component
-
-Apply the Snowflake check from `foundation-009`.
-
-### 4. Figma/code reconciliation
-
-Use when system contracts drift between Figma and implementation.
-
-Review:
-
-- token exports in `figma/exports/`
-- Code Connect mappings in `figma/connections/`
-- implementation in `src/ui/` and `src/react/`
-- docs/playground representation in `site/components/`
-
-### 5. System handoff
-
-Use when another designer or engineer needs a structured architectural recommendation.
-
-## Output format
-
-Provide these sections when relevant:
-
-1. Task type
-2. Current system reading
-3. Decision
-4. Rationale
-5. Repo surfaces affected
-6. Risks / mismatches
-7. Recommended next step
-
-## Guardrails
-
-- Do not invent raw values inside components.
-- Keep the 4-layer architecture intact.
-- Treat token work and component boundary decisions as separate questions.
-- Prefer small, reviewable changes and feature-branch delivery.
-- Say explicitly when something should remain local instead of entering the system.