ui-foundations 0.3.2 → 0.6.0

package/docs/agentic/assistant-behavior-rules.md

@@ -1,3 +1,9 @@
+---
+title: Assistant rules (UI Foundations)
+status: active
+type: agent-guide
+---
+
 # Assistant rules (UI Foundations)
 
 1. Always follow foundation rules in `/docs/foundations` as the source of truth.
@@ -14,3 +20,45 @@
    - This decision is independent from token work: new tokens alone are not sufficient reason for a standalone component.
    - Apply the Snowflake check: local one-off solutions stay local; shared utility can enter the system.
    - Source of truth: `docs/foundations/foundation-009-component-boundaries-and-utility.md`.
+8. When creating a new component, always complete all integration surfaces:
+   - CSS pattern in `src/ui/patterns/<component>.css`
+   - Import in `src/ui/index.css`
+   - React wrapper in `src/react/<component>.js`
+   - Export in `src/react/index.js`
+   - Nunjucks macro in `site/_includes/macros/ui.njk` (source of truth; `dist/macros/ui.njk` is copied during build)
+   - Playground renderer in `site/assets/playground/renderers.js` — register the render function and add it to the `renderers` map
+   - Playground page in `site/components/<component>-playground.md` with `renderer: <component>` matching the key in the renderers map
+   - Docs page in `site/components/<component>.md`
+   - Code Connect file in `schemas/web-<component>.figma.ts`
+   Missing any of these (especially the playground renderer) will cause broken pages.
+9. Every new component must have its own Component-layer tokens. Never reuse tokens from another component (e.g. do not use `--input-checkbox-*` for a radio).
+   - Check `dist/tokens/css/components-ui.tokens.css` for existing tokens.
+   - If the component has no tokens in Figma yet, propose new ones following the naming pattern `--<component>-<part>-<property>-<state>` and add them to `components-ui.tokens.css`, referencing only Semantic or Core tokens.
+   - This keeps components independently themeable and avoids hidden coupling.
+10. Token alias references must point to tokens that actually exist in the system.
+    - Before adding a `$ref`, verify the target exists in `dist/tokens/css/` (Core, Modes, Semantics).
+    - Run `npm run tokens:generate` and check for "missing alias targets" warnings.
+    - Never invent Semantic/Core token names (e.g. `Color/Fill/Muted`, `Size/Spacing/50`) — use only what the system provides.
+    - If a needed Semantic token does not exist, flag it for creation in Figma first.
+11. CSS class naming must follow the project convention: bare component name (e.g. `.slider`, `.radio`, `.checkbox`).
+    - Never prefix with `.ui-` or other namespaces.
+    - CSS patterns must be wrapped in `@layer components { }`.
+12. React wrappers must follow the existing pattern:
+    - Named `export function` (not `export const`)
+    - No CSS imports inside React files
+    - Use `React.createElement`, not JSX
+    - Class array pattern: `const classes = ["component"]; if (className) classes.push(className);`
+13. Docs-only UI (code-tabs, mode toggles) must use docs-specific CSS, not component tokens.
+    - The `.code-tabs-bar` and `.docs-header` button groups are styled in `site/assets/docs.css` with hardcoded docs colors.
+    - They must not inherit brand theming from `data-brand`.
+
+## Modes
+
+The agent operates in different modes depending on the task:
+
+- **Implementation** → modify system
+- **Audit** → inspect only
+- **Pattern Discovery** → design patterns
+- **Token Proposal** → suggest tokens
+
+Mode-specific rules are defined in: `docs/agentic/modes/`

package/docs/agentic/skills/component-accessibility-audit.md

@@ -0,0 +1,132 @@
+# Component Accessibility Audit Skill
+
+## Purpose
+
+Create a repeatable, component-level accessibility audit workflow before implementation fixes.
+
+Use this skill to evaluate one interactive component at a time and produce findings in a consistent format that can drive small follow-up PRs.
+
+## Governance references (must read first)
+
+1. `DESIGN.md`
+2. `AGENTS.md`
+3. `docs/playbook.md`
+4. `docs/working-context.md`
+5. `docs/ui-foundations-rules.md`
+6. `docs/foundations/`
+7. `docs/agentic/assistant-behavior-rules.md`
+8. `IMPLEMENTATION.md`
+
+Never contradict these sources. Prefer explicit, verifiable findings over assumptions.
+
+## Scope
+
+Apply this skill to interactive components (e.g., Button, Link, Input, Select, Checkbox, Radio, Switch, Tabs, Accordion, Modal, Flyout, Dropdown, Tooltip, Pagination, Show More/Show Less, Tags).
+
+Do not use this skill to implement broad fixes in the same PR. This skill is audit-first.
+
+## Audit workflow (repeatable)
+
+1. **Plan**
+   - Select exactly one component target.
+   - Confirm component surfaces in scope (CSS pattern, macro/template, React wrapper, docs, tests).
+
+2. **Collect evidence**
+   - Inspect source implementation files.
+   - Inspect usage examples and docs.
+   - Inspect test coverage.
+   - Record exact file paths and relevant lines.
+
+3. **Run checks**
+   - Semantic HTML
+   - Accessible names
+   - Keyboard behavior
+   - Focus management
+   - ARIA/state handling
+   - Form association (where relevant)
+   - Icon-only usage
+   - Contrast/token risks
+   - Test coverage
+   - Documentation gaps
+   - Manual screen reader validation needs
+
+4. **Score severity**
+   - Assign one severity per finding using the model below.
+
+5. **Propose minimal fix**
+   - Suggest the smallest safe change that resolves the finding.
+   - Keep fixes scoped to one component per follow-up PR.
+
+6. **Report**
+   - Output findings using the template in this document.
+
+## Severity model
+
+Use one of these labels:
+
+- **blocker**
+  - Breaks core accessibility behavior (e.g., no accessible name, unusable keyboard path, broken form semantics, missing focus trap in modal).
+  - Should be fixed before release.
+
+- **high**
+  - Major accessibility risk with likely user impact, but possible workaround exists.
+  - Prioritize immediately after blockers.
+
+- **medium**
+  - Important gap or drift that reduces accessibility quality/reliability.
+  - Schedule in near-term follow-up.
+
+- **low**
+  - Minor issue, documentation gap, or optimization with limited immediate impact.
+  - Track and resolve in routine improvements.
+
+## Findings template
+
+Use this exact structure for each finding:
+
+- **Component:**
+- **Check area:** (semantic HTML / accessible name / keyboard / focus / ARIA-state / form association / icon-only / contrast-token / tests / docs / manual SR)
+- **Observed behavior:**
+- **Expected behavior:**
+- **Evidence:** (file paths + line refs)
+- **Severity:** blocker | high | medium | low
+- **Minimal fix strategy:**
+- **Follow-up test need:**
+- **Manual SR validation need:**
+
+## Minimal-fix strategy
+
+When proposing a fix:
+
+1. Prefer native semantics over custom ARIA.
+2. Change the smallest surface that safely resolves the issue.
+3. Keep API compatibility unless current API is inherently inaccessible.
+4. Update docs and tests in the same small PR when behavior changes.
+5. Avoid cross-component refactors in accessibility fix PRs.
+
+## Manual screen reader validation guidance
+
+For each audited component, explicitly state whether manual SR validation is needed and why.
+
+Recommended baseline matrix:
+- VoiceOver + Safari (macOS)
+- NVDA + Firefox (Windows)
+- Optional: JAWS + Chrome for enterprise parity
+
+Validate at minimum:
+- role announcement
+- name announcement
+- state announcement
+- focus order
+- action feedback after interaction
+
+## Example audit prompt (single component)
+
+> Audit the `Link` component only using the Component Accessibility Audit Skill. Check semantic HTML, accessible names, keyboard behavior, focus management, ARIA/state handling, icon-only usage, contrast/token risks, tests, docs, and manual screen reader validation needs. Output findings using the required template and assign severity with blocker/high/medium/low. Do not implement fixes.
+
+## Output expectations
+
+- Be explicit and evidence-based.
+- Distinguish verified findings from assumptions.
+- Keep findings actionable for small follow-up PRs.
+- If not verified, mark as "not verified".

package/docs/agentic/skills/ux-writing-coach.md

@@ -0,0 +1,116 @@
+# UX Writing Coach
+
+## Purpose
+
+Provide multilingual UX writing review for digital product copy.
+
+This skill improves user-facing text for clarity, consistency, accessibility, usability, and tone-of-voice alignment.
+
+## Scope
+
+Use this skill when reviewing or rewriting:
+- UI labels
+- button text
+- links and CTAs
+- helper text
+- validation and error messages
+- empty states
+- success and feedback messages
+- transactional or task-supporting product copy
+
+Default language is English. Core supported languages are English, German, and French.
+
+## Language behaviour
+
+- Start in English by default.
+- If the user writes in German, respond in German.
+- If the user writes in French, respond in French.
+- If the user requests another language, adapt if possible.
+- Preserve the language of the source text unless translation is explicitly requested.
+
+## Working principles
+
+- Be concise, practical, and supportive.
+- Focus on the most relevant improvements first.
+- Do not over-edit.
+- Do not make text longer, more formal, or more complex unless it clearly improves usability.
+- If the text is already strong, say so and suggest only meaningful refinements.
+- Encourage the user to decide which suggestions to adopt.
+
+## Review criteria
+
+Check the text for:
+- grammar
+- spelling
+- punctuation
+- clarity
+- consistency
+- inclusivity
+- accessibility
+- formatting
+- tone of voice
+
+## UX writing principles
+
+Prefer copy that is:
+- clear
+- concise
+- consistent
+- empathetic
+- helpful
+- action-oriented
+- error-preventing
+
+## Accessibility rules
+
+- Use plain language.
+- Avoid ambiguity and unnecessary jargon.
+- Make links, buttons, and CTAs specific and understandable out of context.
+- Ensure instructions, feedback, and next steps are easy to understand.
+- Use inclusive language.
+
+## Typographic and formatting conventions
+
+- Distinguish between user-facing copy and technical or system-facing content.
+- Use ISO 8601 for technical, structured, machine-readable, or cross-market content.
+- ISO 8601 date format: YYYY-MM-DD
+- ISO 8601 date-time format: YYYY-MM-DDTHH:mm
+- Use localized date and time formats for user-facing UX copy when readability is more important.
+- Use the 24-hour time format unless context clearly requires otherwise.
+- Use leading zeros where appropriate.
+- Use an en dash (–) for ranges.
+- Never mix date systems inconsistently within the same output.
+- For German copy, use standard German weekday and month abbreviations where needed.
+
+## Tone of voice
+
+Aim for copy that is:
+- clear
+- friendly
+- confident
+- helpful
+- human
+
+Avoid copy that feels robotic, overly formal, or unnecessarily promotional.
+
+## Preferred response structure
+
+1. Brief assessment
+2. Key improvements
+3. Suggested rewrite
+4. Clean final copy
+
+## Operating instructions
+
+When given text to review:
+1. Analyse the text carefully.
+2. Identify the most important issues first.
+3. Explain the issues briefly and clearly.
+4. Suggest an improved version.
+5. Provide a clean final version ready to copy.
+
+## Prompt template
+
+Use this prompt shape when applying the skill:
+
+> Review the following text according to the rules above, accessibility standards, formatting conventions, and the tone of voice of tui.com: "[text to review]"

package/docs/foundations/README.md

@@ -0,0 +1,31 @@
+# Foundations
+
+## Purpose
+
+Foundations docs describe the canonical token, naming, theming, parity, and
+format rules that other layers build on.
+
+## Canonical files
+
+The detailed foundation ADRs are the source of truth:
+
+| File | Topic |
+|---|---|
+| `foundation-001-token-layering.md` | Core -> Color Modes -> Semantics -> Components token layering |
+| `foundation-002-naming-and-grouping.md` | Token naming, grouping, and variant-first structure |
+| `foundation-003-color-semantics-and-status.md` | Semantic color roles, status vs interaction state |
+| `foundation-004-typography-scale-and-line-height.md` | Typography scale, line height, and role composition |
+| `foundation-005-responsive-breakpoints-and-containers.md` | Breakpoints, container thresholds, and responsive separation |
+| `foundation-006-z-index-layering.md` | Z-index tokenization and overlay layering |
+| `foundation-007-typography-selectors-and-specificity.md` | Typography selectors, class API, and specificity rules |
+| `foundation-008-mode-activation-and-consumer-control.md` | Light/dark mode scoping and consumer-owned activation |
+| `foundation-009-component-boundaries-and-utility.md` | Standalone component boundary test and utility check |
+| `foundation-010-implementation-and-pipeline-workflow.md` | Token-first implementation workflow and validation commands |
+| `foundation-011-branching-and-release-governance.md` | Feature-branch, PR, and release governance |
+| `foundation-012-minimal-markup-and-composition.md` | Minimal markup, composition, and wrapper discipline |
+
+## Who should read this
+
+- Designers defining token and naming decisions
+- Engineers implementing or validating token-driven UI
+- Agents doing token, component, or parity work

package/docs/foundations/foundation-001-token-layering.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-001 – Token Layering Principles
+status: active
+type: foundation-decision
+---
+
 # Foundation-001: Token Layering Principles
 
 ## Purpose

package/docs/foundations/foundation-002-naming-and-grouping.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-002 – Naming and Grouping Conventions
+status: active
+type: foundation-decision
+---
+
 # Foundation-002: Naming and Grouping Conventions
 
 ## Purpose

package/docs/foundations/foundation-003-color-semantics-and-status.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-003 – Color Semantics, Status vs State
+status: active
+type: foundation-decision
+---
+
 # Foundation-003: Color Semantics, Status vs State
 
 ## Purpose

package/docs/foundations/foundation-004-typography-scale-and-line-height.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-004 – Typography Scale and Line Height
+status: active
+type: foundation-decision
+---
+
 # Foundation-004: Typography Scale and Line Height
 
 ## Purpose

package/docs/foundations/foundation-005-responsive-breakpoints-and-containers.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-005 – Responsive Strategy (Breakpoints and Containers)
+status: active
+type: foundation-decision
+---
+
 # Foundation-005: Responsive Strategy (Breakpoints and Containers)
 
 ## Purpose

package/docs/foundations/foundation-006-z-index-layering.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-006 – Z-Index and Layering Strategy
+status: active
+type: foundation-decision
+---
+
 # Foundation-006: Z-Index and Layering Strategy
 
 ## Purpose

package/docs/foundations/foundation-007-typography-selectors-and-specificity.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-007 – Typography Selectors and Specificity
+status: active
+type: foundation-decision
+---
+
 # Foundation-007: Typography Selectors and Specificity
 
 ## Purpose
@@ -16,7 +22,7 @@ Provide a consistent typography API with low selector specificity and predictabl
 
 4. Use `:where()` for zero-specificity size/scale selectors where possible.
 
-5. Reserve data attributes (for example `[data-theme]`, `[data-density]`) for context/state, not as primary styling API.
+5. Reserve data attributes (for example `[data-brand]`, `[data-mode]`, `[data-density]`) for context/state, not as primary styling API.
 
 ## Implications
 

package/docs/foundations/foundation-008-mode-activation-and-consumer-control.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-008 – Mode Activation and Consumer Control
+status: active
+type: foundation-decision
+---
+
 # Foundation-008: Mode Activation and Consumer Control
 
 ## Purpose

package/docs/foundations/foundation-009-component-boundaries-and-utility.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-009 – Component Boundaries and Utility Test
+status: active
+type: foundation-decision
+---
+
 # Foundation-009: Component Boundaries and Utility Test
 
 ## Purpose

package/docs/foundations/foundation-010-implementation-and-pipeline-workflow.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-010 – Implementation and Pipeline Workflow
+status: active
+type: foundation-decision
+---
+
 # Foundation-010: Implementation and Pipeline Workflow
 
 ## Purpose

package/docs/foundations/foundation-011-branching-and-release-governance.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-011 – Branching and Release Governance
+status: active
+type: foundation-decision
+---
+
 # Foundation-011: Branching and Release Governance
 
 ## Purpose

package/docs/foundations/foundation-012-minimal-markup-and-composition.md

@@ -1,3 +1,9 @@
+---
+title: Foundation-012 – Minimal Markup and Composition
+status: active
+type: foundation-decision
+---
+
 # Foundation-012: Minimal Markup and Composition
 
 ## Purpose

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-foundations",
-  "version": "0.3.2",
+  "version": "0.6.0",
   "description": "Token-first UI foundations with CSS, tokens, and React exports.",
   "license": "MIT",
   "repository": {
@@ -29,26 +29,31 @@
     "./react/input": "./dist/react/input.js",
     "./react/label": "./dist/react/label.js",
     "./assets/*": "./dist/assets/*",
-    "./tokens/core.css": "./dist/tokens/css/core-(primitives).tokens.css",
-    "./tokens/primitives.css": "./dist/tokens/css/core-(primitives).tokens.css",
-    "./tokens/brand-a.css": "./dist/tokens/css/themes-(brands).tokens.brand-a.css",
-    "./tokens/brand-b.css": "./dist/tokens/css/themes-(brands).tokens.brand-b.css",
-    "./tokens/color.css": "./dist/tokens/css/appearance-(modes).tokens.mode-light.css",
-    "./tokens/color-light.css": "./dist/tokens/css/appearance-(modes).tokens.mode-light.css",
-    "./tokens/color-dark.css": "./dist/tokens/css/appearance-(modes).tokens.mode-dark.css",
-    "./tokens/semantic.css": "./dist/tokens/css/semantics-(roles).tokens.css",
-    "./tokens/components.css": "./dist/tokens/css/components-(ui).tokens.css"
+    "./tokens/core.css": "./dist/tokens/css/core-primitives.tokens.css",
+    "./tokens/primitives.css": "./dist/tokens/css/core-primitives.tokens.css",
+    "./tokens/brand-a.css": "./dist/tokens/css/themes-brands.tokens.brand-a.css",
+    "./tokens/brand-b.css": "./dist/tokens/css/themes-brands.tokens.brand-b.css",
+    "./tokens/brand-c.css": "./dist/tokens/css/themes-brands.tokens.brand-c.css",
+    "./tokens/color.css": "./dist/tokens/css/appearance-modes.tokens.mode-light.css",
+    "./tokens/color-light.css": "./dist/tokens/css/appearance-modes.tokens.mode-light.css",
+    "./tokens/color-dark.css": "./dist/tokens/css/appearance-modes.tokens.mode-dark.css",
+    "./tokens/semantic.css": "./dist/tokens/css/semantics-roles.tokens.css",
+    "./tokens/components.css": "./dist/tokens/css/components-ui.tokens.css",
+    "./macros/ui.njk": "./dist/macros/ui.njk"
   },
   "scripts": {
     "icons:generate-list": "node scripts/generate-icon-list.mjs",
+    "plugin:meta": "node scripts/generate-plugin-meta.mjs",
     "lint:js": "node scripts/lint-js.mjs",
     "lint": "npm run lint:js",
     "test:unit": "node --test tests/*.test.mjs",
     "test": "npm run test:unit",
     "smoke:check": "node scripts/smoke-check.mjs",
     "assets:check": "node scripts/check-asset-refs.mjs",
+    "rules:validate": "node scripts/validate-rule-pipeline.mjs",
     "tokens:generate": "node scripts/extract-tokens.js",
     "tokens:validate": "node scripts/validate-tokens.mjs",
+    "dtcg:validate": "node scripts/validate-dtcg.mjs",
     "tokens:build": "npm run tokens:generate",
     "build:css": "node scripts/build-css.mjs",
     "build:all": "npm run icons:generate-list && npm run tokens:generate && npm run build:css",
@@ -62,7 +67,7 @@
     "release:publish": "npm publish",
     "docs:build": "eleventy",
     "docs:site": "npm run build:all && npm run docs:build",
-    "ci:check": "npm run lint && npm run test:unit && npm run build:all && npm run smoke:check && npm run tokens:validate && npm run assets:check && npm run docs:build",
+    "ci:check": "npm run lint && npm run test:unit && npm run build:all && npm run smoke:check && npm run tokens:validate && npm run dtcg:validate && npm run assets:check && npm run rules:validate && npm run docs:build",
     "docs:dev": "npm run build:all && eleventy --serve"
   },
   "devDependencies": {

package/dist/tokens/css/core-(primitives).tokens.css

@@ -1,127 +0,0 @@
-/* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.731Z */
-
-:root {
-  --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);
-  --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;
-  --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;
-  --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;
-  --shadow-focus: .5rem;
-  --breakpoint-100: 580px;
-  --breakpoint-200: 760px;
-  --breakpoint-300: 960px;
-  --breakpoint-400: 1200px;
-  --breakpoint-500: 1440px;
-  --breakpoint-600: 1920px;
-  --container-100: 192px;
-  --container-200: 384px;
-  --container-300: 576px;
-  --container-400: 768px;
-  --container-500: 960px;
-  --container-600: 1152px;
-  --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;
-}