ui-foundations 0.3.2 → 0.6.0

package/dist/ui/patterns/avatar.css

@@ -0,0 +1,57 @@
+@layer components {
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--size-radius-full);
+    overflow: hidden;
+    background: var(--color-fill-subtle);
+    color: var(--color-text-default);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-600);
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    font-size: var(--font-size-sm);
+  }
+
+  /* ── Sizes ── */
+
+  .avatar.xs {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    font-size: var(--font-size-xs);
+  }
+
+  .avatar.sm {
+    inline-size: 2rem;
+    block-size: 2rem;
+    font-size: var(--font-size-xs);
+  }
+
+  .avatar.lg {
+    inline-size: 3rem;
+    block-size: 3rem;
+    font-size: var(--font-size-md);
+  }
+
+  .avatar.xl {
+    inline-size: 4rem;
+    block-size: 4rem;
+    font-size: var(--font-size-lg);
+  }
+
+  /* ── Image ── */
+
+  .avatar > img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  /* ── Initials ── */
+
+  .avatar__initials {
+    user-select: none;
+    text-transform: uppercase;
+  }
+}

package/dist/ui/patterns/badge.css

@@ -0,0 +1,49 @@
+@layer components {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--badge-gap, 0.25rem);
+    border-radius: var(--badge-border-radius, 625rem);
+    font-family: var(--badge-font-family, inherit);
+    font-weight: var(--badge-font-weight, 700);
+    white-space: nowrap;
+    background: var(--badge-default-container-background);
+    color: var(--badge-default-text-color);
+    font-size: var(--badge-font-size-md);
+    line-height: var(--badge-line-height-md);
+    padding-inline: var(--badge-padding-inline-md);
+    padding-block: var(--badge-padding-block-md);
+  }
+
+  /* ── Sizes ── */
+
+  .badge.sm {
+    font-size: var(--badge-font-size-sm);
+    line-height: var(--badge-line-height-sm);
+    padding-inline: var(--badge-padding-inline-sm);
+    padding-block: var(--badge-padding-block-sm);
+  }
+
+  /* ── Variants ── */
+
+  .badge.brand {
+    background: var(--badge-brand-container-background);
+    color: var(--badge-brand-text-color);
+  }
+
+  .badge.success {
+    background: var(--badge-success-container-background);
+    color: var(--badge-success-text-color);
+  }
+
+  .badge.danger {
+    background: var(--badge-danger-container-background);
+    color: var(--badge-danger-text-color);
+  }
+
+  /* ── Icon slot ── */
+
+  .badge > .icon {
+    flex: 0 0 auto;
+  }
+}

package/dist/ui/patterns/checkbox.css

@@ -7,12 +7,12 @@
     font-weight: var(--typography-label-font-weight);
     font-size: var(--typography-label-font-size);
     line-height: var(--typography-label-line-height);
-    color: var(--color-text-default);
+    color: var(--input-checkbox-text-color-default);
     cursor: pointer;
   }
 
   .checkbox-field.is-disabled {
-    color: var(--color-text-disabled);
+    color: var(--input-checkbox-text-color-disabled);
     cursor: not-allowed;
   }
 
@@ -24,52 +24,91 @@
     display: inline-grid;
     place-content: center;
     border-style: solid;
-    border-width: var(--size-border-100);
-    border-color: var(--color-border-default);
-    border-radius: var(--brand-corner-input);
-    background: var(--color-fill-surface);
-    color: var(--color-text-inverse);
+    border-width: var(--checkbox-border-size-default);
+    border-color: var(--input-checkbox-border-color-default);
+    border-radius: var(--corner-checkbox-radius);
+    background: var(--input-checkbox-container-background-default);
+    color: var(--input-checkbox-text-color-active);
     cursor: pointer;
   }
 
   .checkbox::after {
     content: "";
+    display: block;
   }
 
   .checkbox:checked,
   .checkbox.is-checked {
-    border-color: var(--color-border-brand);
-    background: var(--color-fill-brand);
+    border-color: var(--input-checkbox-border-color-active);
+    background: var(--input-checkbox-container-background-active);
   }
 
   .checkbox:checked::after,
   .checkbox.is-checked::after {
-    content: "\2713";
-    font-size: var(--typography-label-font-size);
-    line-height: var(--typography-label-line-height);
+    content: "";
+    inline-size: 0.75em;
+    block-size: 0.75em;
+    background-color: currentColor;
+    -webkit-mask-image: url("/assets/icons/checkmark.svg");
+    mask-image: url("/assets/icons/checkmark.svg");
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+  }
+
+  .checkbox:indeterminate,
+  .checkbox.is-indeterminate {
+    border-color: var(--input-checkbox-border-color-active);
+    background: var(--input-checkbox-container-background-active);
+  }
+
+  .checkbox:indeterminate::after,
+  .checkbox.is-indeterminate::after {
+    inline-size: 0.75rem;
+    block-size: var(--size-border-200);
+    border-radius: 999px;
+    background: currentColor;
   }
 
   .checkbox:hover,
   .checkbox.is-hover {
     background:
       linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
-      var(--color-fill-surface);
-    border-color: var(--color-border-brand);
+      var(--input-checkbox-container-background-hover);
+    color: var(--input-checkbox-text-color-hover);
+    border-color: var(--input-checkbox-border-color-hover);
+    border-width: var(--checkbox-border-size-hover);
   }
 
   .checkbox:checked:hover,
   .checkbox.is-checked.is-hover {
     background:
       linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
-      var(--color-fill-brand);
+      var(--input-checkbox-container-background-active);
+    color: var(--input-checkbox-text-color-hover);
+    border-color: var(--input-checkbox-border-color-hover);
+    border-width: var(--checkbox-border-size-hover);
+  }
+
+  .checkbox:indeterminate:hover,
+  .checkbox.is-indeterminate.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--input-checkbox-container-background-active);
+    color: var(--input-checkbox-text-color-hover);
+    border-color: var(--input-checkbox-border-color-hover);
+    border-width: var(--checkbox-border-size-hover);
   }
 
   .checkbox:active,
   .checkbox.is-active {
     background:
       linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
-      var(--color-fill-surface);
-    border-color: var(--color-border-brand);
+      var(--input-checkbox-container-background-default);
+    border-color: var(--input-checkbox-border-color-active);
     border-width: var(--size-border-200);
   }
 
@@ -77,21 +116,31 @@
   .checkbox.is-checked.is-active {
     background:
       linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
-      var(--color-fill-brand);
+      var(--input-checkbox-container-background-active);
+    border-color: var(--input-checkbox-border-color-active);
+  }
+
+  .checkbox:indeterminate:active,
+  .checkbox.is-indeterminate.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--input-checkbox-container-background-active);
+    border-color: var(--input-checkbox-border-color-active);
   }
 
   .checkbox:focus-visible,
   .checkbox.is-focus-visible {
-    border-color: var(--color-border-brand);
+    border-color: var(--input-checkbox-border-color-focus);
     outline: none;
     box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
   }
 
   .checkbox:disabled,
   .checkbox.is-disabled {
-    border-color: var(--color-border-disabled);
-    background: var(--color-fill-disabled);
-    color: var(--color-text-disabled);
+    border-width: var(--checkbox-border-size-disabled);
+    border-color: var(--input-checkbox-border-color-disabled);
+    background: var(--input-checkbox-container-background-disabled);
+    color: var(--input-checkbox-text-color-disabled);
     cursor: not-allowed;
   }
 }

package/dist/ui/patterns/divider.css

@@ -0,0 +1,25 @@
+@layer components {
+  .divider {
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: var(--divider-color, var(--color-border-default));
+    block-size: var(--size-border-100);
+    inline-size: 100%;
+    align-self: stretch;
+  }
+
+  /* ── Vertical orientation ── */
+
+  .divider[aria-orientation="vertical"] {
+    block-size: auto;
+    inline-size: var(--size-border-100);
+    align-self: stretch;
+  }
+
+  /* ── Subtle variant ── */
+
+  .divider.subtle {
+    --divider-color: var(--color-border-subtle);
+  }
+}

package/dist/ui/patterns/radio.css

@@ -0,0 +1,109 @@
+@layer components {
+  .radio-field {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--typography-label-gap);
+    font-family: var(--typography-label-font-family);
+    font-weight: var(--typography-label-font-weight);
+    font-size: var(--typography-label-font-size);
+    line-height: var(--typography-label-line-height);
+    color: var(--input-radio-text-color-default);
+    cursor: pointer;
+  }
+
+  .radio-field.is-disabled {
+    color: var(--input-radio-text-color-disabled);
+    cursor: not-allowed;
+  }
+
+  .radio {
+    inline-size: var(--size-spacing-600);
+    block-size: var(--size-spacing-600);
+    margin: 0;
+    appearance: none;
+    display: inline-grid;
+    place-content: center;
+    border-style: solid;
+    border-width: var(--radio-border-size-default);
+    border-color: var(--input-radio-border-color-default);
+    border-radius: var(--size-radius-full);
+    background: var(--input-radio-container-background-default);
+    cursor: pointer;
+  }
+
+  .radio::after {
+    content: "";
+    display: block;
+    inline-size: 0;
+    block-size: 0;
+    border-radius: var(--size-radius-full);
+    background: currentColor;
+    transition: all 120ms ease;
+  }
+
+  .radio:checked,
+  .radio.is-checked {
+    border-color: var(--input-radio-border-color-active);
+    background: var(--input-radio-container-background-default);
+    color: var(--input-radio-text-color-active);
+  }
+
+  .radio:checked::after,
+  .radio.is-checked::after {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    background: var(--input-radio-border-color-active);
+  }
+
+  .radio:hover,
+  .radio.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--input-radio-container-background-hover);
+    color: var(--input-radio-text-color-hover);
+    border-color: var(--input-radio-border-color-hover);
+    border-width: var(--radio-border-size-hover);
+  }
+
+  .radio:checked:hover,
+  .radio.is-checked.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--input-radio-container-background-default);
+    border-color: var(--input-radio-border-color-hover);
+    border-width: var(--radio-border-size-hover);
+  }
+
+  .radio:active,
+  .radio.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--input-radio-container-background-default);
+    border-color: var(--input-radio-border-color-active);
+    border-width: var(--size-border-200);
+  }
+
+  .radio:checked:active,
+  .radio.is-checked.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--input-radio-container-background-default);
+    border-color: var(--input-radio-border-color-active);
+  }
+
+  .radio:focus-visible,
+  .radio.is-focus-visible {
+    border-color: var(--input-radio-border-color-focus);
+    outline: none;
+    box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
+  }
+
+  .radio:disabled,
+  .radio.is-disabled {
+    border-width: var(--radio-border-size-disabled);
+    border-color: var(--input-radio-border-color-disabled);
+    background: var(--input-radio-container-background-disabled);
+    color: var(--input-radio-text-color-disabled);
+    cursor: not-allowed;
+  }
+}

package/dist/ui/patterns/tabs.css

@@ -0,0 +1,71 @@
+@layer components {
+  .tabs {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tab-list {
+    display: flex;
+    gap: 0;
+    border-block-end: var(--size-border-100) solid var(--color-border-default);
+  }
+
+  .tab-list[aria-orientation="vertical"] {
+    flex-direction: column;
+    border-block-end: none;
+    border-inline-end: var(--size-border-100) solid var(--color-border-default);
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--size-spacing-400);
+    padding-block: var(--size-spacing-300);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-500);
+    line-height: var(--line-height-md);
+    color: var(--color-text-default);
+    background: transparent;
+    border: none;
+    border-block-end: var(--size-border-200) solid transparent;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: border-color 0.15s ease, color 0.15s ease;
+  }
+
+  .tab:hover,
+  .tab.is-hover {
+    color: var(--color-text-brand);
+    border-block-end-color: var(--color-border-subtle);
+  }
+
+  .tab[aria-selected="true"],
+  .tab.is-selected {
+    color: var(--color-text-brand);
+    font-weight: var(--font-weight-600);
+    border-block-end-color: var(--color-border-brand);
+  }
+
+  .tab:focus-visible,
+  .tab.is-focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--shadow-focus) var(--color-focus);
+  }
+
+  .tab:disabled,
+  .tab.is-disabled {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+    border-block-end-color: transparent;
+  }
+
+  .tab-panel {
+    padding-block: var(--size-spacing-400);
+  }
+
+  .tab-panel[hidden] {
+    display: none;
+  }
+}

package/dist/ui/patterns/textarea.css

@@ -0,0 +1,50 @@
+@layer components {
+  .textarea {
+    display: block;
+    inline-size: 100%;
+    min-block-size: calc(var(--line-height-md) * 3 + var(--size-spacing-300) * 2);
+    padding-inline: var(--size-spacing-300);
+    padding-block: var(--size-spacing-300);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-md);
+    color: var(--color-text-default);
+    background: var(--color-fill-surface);
+    border: var(--size-border-100) solid var(--color-border-default);
+    border-radius: var(--size-radius-300);
+    resize: vertical;
+    transition: border-color 0.15s ease;
+  }
+
+  .textarea::placeholder {
+    color: var(--color-text-disabled);
+  }
+
+  .textarea:hover,
+  .textarea.is-hover {
+    border-color: var(--color-border-strong);
+  }
+
+  .textarea:focus-visible,
+  .textarea.is-focus-visible {
+    border-color: var(--color-focus);
+    outline: none;
+    box-shadow: 0 0 0 var(--shadow-focus) var(--color-focus);
+  }
+
+  .textarea:disabled,
+  .textarea.is-disabled {
+    color: var(--color-text-disabled);
+    background: var(--color-fill-disabled);
+    border-color: var(--color-border-disabled);
+    cursor: not-allowed;
+    resize: none;
+  }
+
+  .textarea[readonly] {
+    background: var(--color-fill-surface);
+    border-color: var(--color-border-default);
+    cursor: default;
+    resize: none;
+  }
+}

package/dist/ui/patterns/tooltip.css

@@ -0,0 +1,64 @@
+@layer components {
+  .tooltip {
+    position: absolute;
+    z-index: var(--zindex-tooltip);
+    max-inline-size: 15rem;
+    padding-inline: var(--size-spacing-300);
+    padding-block: var(--size-spacing-200);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-text-inverse);
+    background: var(--color-neutral-900);
+    border-radius: var(--size-radius-300);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .tooltip.is-visible {
+    opacity: 1;
+  }
+
+  /* ── Placement ── */
+
+  .tooltip[data-placement="top"] {
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    margin-block-end: var(--size-spacing-200);
+  }
+
+  .tooltip[data-placement="bottom"] {
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    margin-block-start: var(--size-spacing-200);
+  }
+
+  .tooltip[data-placement="left"] {
+    inset-inline-end: 100%;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    margin-inline-end: var(--size-spacing-200);
+  }
+
+  .tooltip[data-placement="right"] {
+    inset-inline-start: 100%;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    margin-inline-start: var(--size-spacing-200);
+  }
+
+  /* ── Trigger wrapper ── */
+
+  .tooltip-trigger {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .tooltip-trigger:hover > .tooltip,
+  .tooltip-trigger:focus-within > .tooltip {
+    opacity: 1;
+  }
+}

package/docs/README.md

@@ -0,0 +1,38 @@
+# Documentation Map
+
+## Purpose
+
+This directory is the human- and agent-readable map of UI Foundations.
+Use it to find the right level of documentation before diving into implementation
+details or local agent configuration.
+
+## Canonical sections
+
+| Section | What belongs here | Start with |
+|---|---|---|
+| `playbook.md` | Reading order, operating model, and agent roles | `docs/playbook.md` |
+| `foundations/` | Token architecture, naming, theming, parity, and format guidance | `docs/foundations/README.md` |
+| `principles/` | Perception, heuristics, and accessibility intent | `docs/principles/README.md` |
+| `patterns/` | Pattern-level composition guidance | `docs/patterns/README.md` |
+| `components/` | Component-facing entry docs and TODO gaps | `docs/components/README.md` |
+| `agentic/` | Agent behavior, workflows, prompts, and migration context | `docs/agentic/README.md` |
+| `adr/` | Architecture decision records and documentation migration notes | `docs/adr/README.md` |
+| `validation/` | Validation checklists, CI, token parity, and accessibility checks | `docs/validation/README.md` |
+
+## Legacy docs kept in place
+
+- `docs/ui-foundations-rules.md`
+- `docs/token-pipeline.md`
+- `docs/working-context.md`
+- `docs/context-manifest.json`
+- `docs/foundations/foundation-*.md`
+
+These remain valid source material. New docs should point to them rather than
+rewriting them unless a targeted migration is clearly safe.
+
+## Related docs
+
+- `AGENTS.md`
+- `README.md`
+- `IMPLEMENTATION.md`
+- `DESIGN.md`

package/docs/agentic/README.md

@@ -0,0 +1,35 @@
+# Agentic Docs
+
+## Purpose
+
+This section explains how different agents should read, plan, validate, and act
+in the repository.
+
+## Canonical files
+
+| File | Topic |
+|---|---|
+| `assistant-behavior-rules.md` | Detailed component and token checklist |
+| `kiro-workflow.md` | Kiro steering, specs, and workflow guidance |
+| `goose-workflow.md` | Goose audit and validation workflow guidance |
+| `codex-workflow.md` | Codex execution workflow guidance |
+| `rule-pipeline.md` | Principles -> Patterns -> Components -> Validation -> CI |
+
+## Supporting files
+
+| File | Topic |
+|---|---|
+| `rule-pipeline-audit.md` | Audit findings, target architecture, and gap table |
+| `MIGRATION.md` | Historical migration context |
+| `prompts/` | Prompt templates and placeholders |
+| `modes/` | Task-specific agent modes |
+
+## Who should read this
+
+- Agents planning or executing repo work
+- Engineers maintaining local agent workflows
+
+## Skills
+
+- `skills/ux-writing-coach.md` — multilingual UX writing review skill for product copy
+- `skills/component-accessibility-audit.md` — repeatable workflow and template for single-component accessibility audits