ui-foundations 0.3.2 → 0.6.0

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/dist/tokens/ts/core-(primitives).tokens.ts

@@ -1,152 +0,0 @@
-// Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.731Z
-
-export const tokens = {
-  "colors": {
-    "--color-neutral-100": "rgb(230 230 230)",
-    "--color-neutral-200": "rgb(204 204 204)",
-    "--color-neutral-300": "rgb(179 179 179)",
-    "--color-neutral-400": "rgb(128 128 128)",
-    "--color-neutral-500": "rgb(128 128 128)",
-    "--color-neutral-600": "rgb(102 102 102)",
-    "--color-neutral-700": "rgb(77 77 77)",
-    "--color-neutral-800": "rgb(51 51 51)",
-    "--color-neutral-900": "rgb(26 26 26)",
-    "--color-neutral-1000": "rgb(0 0 0)",
-    "--color-neutral-alpha-100": "rgba(0 0 0 / 0.1)",
-    "--color-neutral-alpha-200": "rgba(0 0 0 / 0.2)",
-    "--color-neutral-alpha-300": "rgba(0 0 0 / 0.3)",
-    "--color-neutral-alpha-400": "rgba(0 0 0 / 0.4)",
-    "--color-neutral-alpha-500": "rgba(0 0 0 / 0.5)",
-    "--color-neutral-alpha-600": "rgba(0 0 0 / 0.6)",
-    "--color-neutral-alpha-700": "rgba(0 0 0 / 0.7)",
-    "--color-neutral-alpha-800": "rgba(0 0 0 / 0.8)",
-    "--color-neutral-alpha-900": "rgba(0 0 0 / 0.9)",
-    "--color-neutral-alpha-000": "rgba(0 0 0 / 0)",
-    "--color-neutral-000": "rgb(255 255 255)",
-    "--color-brand-a-purple-200": "rgb(222 192 255)",
-    "--color-brand-a-purple-600": "rgb(151 71 255)",
-    "--color-brand-a-purple-800": "rgb(85 26 139)",
-    "--color-brand-a-blue-200": "rgb(226 244 253)",
-    "--color-brand-a-blue-500": "rgb(112 203 244)",
-    "--color-brand-a-blue-700": "rgb(12 75 243)",
-    "--color-brand-a-blue-800": "rgb(27 17 92)",
-    "--color-brand-a-green": "rgb(19 174 92)",
-    "--color-brand-a-red": "rgb(255 0 0)",
-    "--color-brand-b-purple-200": "rgb(196 143 255)",
-    "--color-brand-b-purple-600": "rgb(122 20 255)",
-    "--color-brand-b-purple-800": "rgb(58 18 95)",
-    "--color-brand-b-blue-200": "rgb(179 226 250)",
-    "--color-brand-b-blue-500": "rgb(66 186 240)",
-    "--color-brand-b-blue-700": "rgb(10 60 194)",
-    "--color-brand-b-blue-800": "rgb(14 9 47)",
-    "--color-brand-b-red": "rgb(204 0 0)",
-    "--color-brand-b-green": "rgb(14 129 68)",
-    "--color-transparent": "rgba(0 0 0 / 0)"
-  },
-  "typography": {
-    "--font-size-md": "1rem",
-    "--font-size-xs": ".75rem",
-    "--font-size-sm": ".875rem",
-    "--font-size-lg": "1.25rem",
-    "--font-size-xl": "1.5rem",
-    "--font-size-xxl": "2rem",
-    "--font-size-xxxl": "2.5rem",
-    "--font-weight-100": 100,
-    "--font-weight-200": 200,
-    "--font-weight-300": 300,
-    "--font-weight-400": 400,
-    "--font-weight-500": 500,
-    "--font-weight-600": 600,
-    "--font-weight-700": 700,
-    "--font-weight-800": 800,
-    "--font-weight-900": 900,
-    "--font-family-sans": "Inter",
-    "--font-family-serif": "Rokkitt",
-    "--font-family-mono": "SFMono-Regular",
-    "--line-height-xs": "1rem",
-    "--line-height-sm": "1.25rem",
-    "--line-height-md": "1.5rem",
-    "--line-height-lg": "1.75rem",
-    "--line-height-xl": "2rem",
-    "--line-height-xxl": "2.75rem",
-    "--line-height-xxxl": "3.5rem"
-  },
-  "spacing": {
-    "--size-spacing-100": ".25rem",
-    "--size-spacing-200": ".5rem",
-    "--size-spacing-300": ".75rem",
-    "--size-spacing-400": "1rem",
-    "--size-spacing-500": "1.25rem",
-    "--size-spacing-600": "1.5rem",
-    "--size-spacing-700": "2rem",
-    "--size-spacing-800": "2.5rem",
-    "--size-spacing-900": "3rem",
-    "--size-spacing-1000": "4rem",
-    "--size-spacing-000": "0"
-  },
-  "radii": {
-    "--size-radius-100": ".125rem",
-    "--size-radius-200": ".25rem",
-    "--size-radius-300": ".375rem",
-    "--size-radius-400": ".5rem",
-    "--size-radius-500": ".75rem",
-    "--size-radius-600": "1rem",
-    "--size-radius-700": "1.25rem",
-    "--size-radius-800": "1.5rem",
-    "--size-radius-900": "2rem",
-    "--size-radius-000": "0",
-    "--size-radius-full": "625rem"
-  },
-  "shadows": {
-    "--shadow-focus": ".5rem"
-  },
-  "components": {
-    "--size-border-100": ".0625rem",
-    "--size-border-200": ".125rem",
-    "--size-border-300": ".1875rem",
-    "--size-border-000": "0",
-    "--layout-columns": 12,
-    "--layout-gutter": "1rem",
-    "--layout-max-width": "1236px",
-    "--layout-column-max-width": "412px",
-    "--layout-float-breakpoint": "1220px",
-    "--layout-base-grid": ".25rem",
-    "--zindex-fixed": 1030,
-    "--zindex-sticky": 1020,
-    "--zindex-dropdown": 1000,
-    "--zindex-dropdown-base": 900,
-    "--zindex-modal": 1050,
-    "--zindex-base": 0,
-    "--zindex-tooltip": 1070,
-    "--zindex-raised": 1,
-    "--zindex-popover": 1060,
-    "--zindex-modal-overlay": 1040,
-    "--zindex-hidden": -1
-  },
-  "breakpoints": {
-    "--breakpoint-100": "580px",
-    "--breakpoint-200": "760px",
-    "--breakpoint-300": "960px",
-    "--breakpoint-400": "1200px",
-    "--breakpoint-500": "1440px",
-    "--breakpoint-600": "1920px"
-  },
-  "containers": {
-    "--container-100": "192px",
-    "--container-200": "384px",
-    "--container-300": "576px",
-    "--container-400": "768px",
-    "--container-500": "960px",
-    "--container-600": "1152px"
-  }
-} as const;
-
-export type ColorToken = keyof typeof tokens.colors;
-export type TypographyToken = keyof typeof tokens.typography;
-export type SpacingToken = keyof typeof tokens.spacing;
-export type RadiusToken = keyof typeof tokens.radii;
-export type ShadowToken = keyof typeof tokens.shadows;
-export type BreakpointToken = keyof typeof tokens.breakpoints;
-export type ContainerToken = keyof typeof tokens.containers;
-export type ComponentToken = keyof typeof tokens.components;

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`.