From 5d02bf9df4457aa2974a1b7721e381324b6b0ec6 Mon Sep 17 00:00:00 2001 From: kurihada Date: Mon, 23 Mar 2026 17:30:30 +0800 Subject: [PATCH] Add harness workflow and Material showcase design system --- .github/workflows/harness-validate.yml | 64 ++ AGENTS.md | 34 + CONTRIBUTING.md | 32 +- DESIGN.md | 290 +++++++++ README.md | 45 +- apps/docs/.storybook/preview.ts | 27 +- apps/docs/src/components/button.stories.tsx | 41 +- apps/docs/src/components/card.stories.tsx | 55 +- .../src/components/context-menu.stories.tsx | 2 - .../src/components/data-table.stories.tsx | 1 + .../src/components/dropdown-menu.stories.tsx | 1 - apps/docs/src/components/form.stories.tsx | 7 +- apps/docs/src/foundation.stories.tsx | 11 +- apps/docs/src/style-contract.stories.tsx | 429 ++++++++----- apps/docs/src/style-matrix.stories.tsx | 333 +++++----- apps/docs/src/tokens.stories.tsx | 20 +- .../2026-03-23-harness-foundation.md | 68 ++ docs/exec-plans/2026-03-23-harness-rollout.md | 71 +++ .../2026-03-23-material-you-convergence.md | 77 +++ docs/exec-plans/README.md | 44 ++ docs/exec-plans/TEMPLATE.md | 46 ++ docs/harness-engineering.md | 138 +++++ docs/orchestration.md | 97 +++ docs/rfcs/multi-style-architecture.md | 6 +- package.json | 15 + packages/tokens/src/index.ts | 343 +++++++++-- packages/tokens/src/motion.css | 114 +++- packages/tokens/src/tokens.css | 182 +++--- packages/ui/src/components/accordion.test.tsx | 10 +- packages/ui/src/components/card.variants.ts | 3 +- packages/ui/src/components/combobox.test.tsx | 2 +- packages/ui/src/components/combobox.tsx | 2 +- packages/ui/src/components/date-picker.tsx | 187 +++--- packages/ui/src/components/switch.variants.ts | 2 +- packages/ui/src/lib/motion.ts | 6 + packages/ui/src/lib/skin.test.ts | 8 +- packages/ui/src/lib/skin.ts | 18 +- packages/ui/src/skins.css | 581 ++++++------------ pnpm-lock.yaml | 3 + scripts/harness/core.mjs | 379 ++++++++++++ scripts/harness/orchestrate.mjs | 94 +++ scripts/harness/run-storybook-a11y.mjs | 238 +++++++ scripts/harness/select-suites.mjs | 92 +++ scripts/harness/validate.mjs | 160 +++++ tests/e2e/storybook-smoke.spec.ts | 24 +- tests/package-consumer/smoke.mjs | 9 +- 46 files changed, 3343 insertions(+), 1068 deletions(-) create mode 100644 .github/workflows/harness-validate.yml create mode 100644 DESIGN.md create mode 100644 docs/exec-plans/2026-03-23-harness-foundation.md create mode 100644 docs/exec-plans/2026-03-23-harness-rollout.md create mode 100644 docs/exec-plans/2026-03-23-material-you-convergence.md create mode 100644 docs/exec-plans/README.md create mode 100644 docs/exec-plans/TEMPLATE.md create mode 100644 docs/harness-engineering.md create mode 100644 docs/orchestration.md create mode 100644 scripts/harness/core.mjs create mode 100644 scripts/harness/orchestrate.mjs create mode 100644 scripts/harness/run-storybook-a11y.mjs create mode 100644 scripts/harness/select-suites.mjs create mode 100644 scripts/harness/validate.mjs diff --git a/.github/workflows/harness-validate.yml b/.github/workflows/harness-validate.yml new file mode 100644 index 0000000..b7aaa25 --- /dev/null +++ b/.github/workflows/harness-validate.yml @@ -0,0 +1,64 @@ +name: Harness Validate + +on: + pull_request: + types: + - opened + - reopened + - synchronize + - ready_for_review + push: + branches: + - main + +permissions: + contents: read + +jobs: + harness-validate: + if: github.event_name != 'pull_request' || !github.event.pull_request.draft + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + version: 10.25.0 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 24 + cache: pnpm + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Determine harness diff range + id: range + shell: bash + run: | + set -euo pipefail + + if [[ "${GITHUB_EVENT_NAME}" == "pull_request" ]]; then + echo "from=${{ github.event.pull_request.base.sha }}" >> "$GITHUB_OUTPUT" + else + echo "from=${{ github.event.before }}" >> "$GITHUB_OUTPUT" + fi + + echo "to=${GITHUB_SHA}" >> "$GITHUB_OUTPUT" + + - name: Show selected harness suites + run: pnpm harness:select -- --from "${{ steps.range.outputs.from }}" --to "${{ steps.range.outputs.to }}" + + - name: Run changed harness suites on pull requests + if: github.event_name == 'pull_request' + run: pnpm harness:validate:changed -- --from "${{ steps.range.outputs.from }}" --to "${{ steps.range.outputs.to }}" + + - name: Run PR harness suite on main + if: github.event_name == 'push' + run: pnpm harness:validate:pr diff --git a/AGENTS.md b/AGENTS.md index 532267a..933690d 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -24,10 +24,44 @@ Sub-agents should use this context policy: - Keep shared integration files owned by the main thread whenever possible - If a sub-agent needs a shared dependency or a shared export change, have it report that back rather than editing unrelated files +## Harness Workflow + +Agents should treat the following files as the default system of record before making non-trivial +changes: + +- `DESIGN.md` +- `README.md` +- `CONTRIBUTING.md` +- `roadmap.md` +- `packages/ui/src/lib/contracts.ts` +- `apps/docs/src/component-authoring.stories.tsx` +- `docs/harness-engineering.md` +- `docs/orchestration.md` + +When work spans multiple surfaces or changes public behavior, start by creating or updating an +execution plan in `docs/exec-plans/`. + +Prefer the narrowest useful harness suite while working: + +- `pnpm harness:select` +- `pnpm harness:validate:changed` +- `pnpm harness:validate:static` +- `pnpm harness:validate:component` +- `pnpm harness:validate:docs` +- `pnpm harness:validate:docs-smoke` +- `pnpm harness:validate:consumers` +- `pnpm harness:validate:pr` +- `pnpm harness:validate:release` + +Every suite writes a JSON report under `.artifacts/harness/`. +Worktree-backed orchestration runs use `pnpm harness:orch -- ` and store state under +`.artifacts/orch/`. + ## Priority If there is any conflict between older default delegation habits and this file: +- follow `DESIGN.md` for the active visual language and motion direction - follow this file for sub-agent model selection - follow this file for sub-agent reasoning effort - follow this file for context fallback behavior diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e022a50..d0b31cd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,19 +8,23 @@ discipline instead of introducing parallel patterns. Read the current contract and docs baseline first: +- `DESIGN.md` - `roadmap.md` - `packages/ui/src/lib/contracts.ts` - `apps/docs/src/component-authoring.stories.tsx` +- `docs/harness-engineering.md` +- `docs/orchestration.md` when the work may be split across agents Then inspect the closest existing component before adding a new one. ## Default workflow -1. Confirm the component or change fits the current system layers. -2. Reuse the existing contract helpers, slot names, state naming, and variant conventions. -3. Add or update Storybook stories so behavior is reviewable. -4. Add or update tests before treating the component as done. -5. Run the relevant validation commands locally. +1. Create or update an execution plan in `docs/exec-plans/` when the change is non-trivial. +2. Confirm the component or change fits the current system layers. +3. Reuse the existing contract helpers, slot names, state naming, and variant conventions. +4. Add or update Storybook stories so behavior is reviewable. +5. Add or update tests before treating the component as done. +6. Run the relevant validation commands locally. ## Authoring rules @@ -107,6 +111,17 @@ pnpm typecheck pnpm test ``` +Harness shortcuts: + +```bash +pnpm harness:select +pnpm harness:validate:static +pnpm harness:validate:changed +pnpm harness:validate:component +pnpm harness:validate:docs +pnpm harness:validate:consumers +``` + Docs and smoke checks: ```bash @@ -115,6 +130,13 @@ pnpm build:docs pnpm test:e2e:smoke ``` +Broader gates: + +```bash +pnpm harness:validate:pr +pnpm harness:validate:release +``` + ## Practical repo guidance - Keep shared integration points small. If you only need a new component, avoid unrelated changes. diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..e19b81f --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,290 @@ +# Design System: Cadence UI Material Runtime +**Repository:** cadence-ui +**Status:** Active direction as of 2026-03-23 + +## 1. Visual Theme & Atmosphere + +Cadence UI should feel like a **softly lit Material You showcase**, not a generic dashboard kit +and not a rotating gallery of unrelated skins. The visual language is **pastel-tonal, ambient, +rounded, and slightly theatrical**, borrowing the warmth and optimism of Google's Material You +presentations while staying usable as a real product UI system. + +The overall mood is **luminous and calm**. Surfaces should feel like layered slabs of tinted light: +cream canvas, lilac containers, sage accents, and soft violet action tones. The system should feel +**premium without becoming severe**, **expressive without becoming noisy**, and **mobile-informed +without becoming toy-like**. + +The experience should evoke the feeling of a polished launch demo: +- soft environmental glow instead of hard contrast +- large rounded geometry instead of sharp technical edges +- tonal surfaces instead of flat white cards +- gentle spatial motion instead of bouncy micro-interaction clutter +- one coherent design language instead of multiple competing visual personalities + +**Key characteristics:** +- Warm cream backgrounds with subtle tinted atmospheric light +- Rounded "slab" components with generous radii +- Tonal color relationships derived from a single seed color +- Pastel purple and sage-green emphasis by default +- Mobile-product elegance scaled to desktop docs and app surfaces +- Motion that feels staged, floaty, and spatial rather than mechanical + +## 2. Color Palette & Roles + +Cadence UI is **dynamic-color first**. New screens should be described in terms of **roles**, not +hardcoded one-off fills. The seed color may change, but the role structure should stay stable. + +### Default Seed Presets + +- **Violet Seed** (`#6750A4`) - the default Material baseline. Use when no stronger palette + choice exists. +- **Jade Seed** (`#0B8F83`) - cooler, calmer, more aquatic. Good for operational or wellness-like + product surfaces. +- **Sunset Seed** (`#B75A46`) - warmer and more human. Good for editorial, consumer, or + lifestyle-heavy screens. + +### Default Tonal Foundation + +These are the current default fallback values when the active palette is not overridden: + +- **Warm Cream Canvas** (`hsl(22 18% 96%)`) - primary page background +- **Soft Surface Cream** (`hsl(22 12% 94%)`) - general surface background +- **Lilac Mist Surface** (`hsl(274 18% 92%)`) - default tonal container +- **Lilac Lifted Surface** (`hsl(274 22% 89%)`) - elevated tonal container +- **Sage Mist Surface** (`hsl(117 18% 86%)`) - strongest supporting container / accent slab +- **Ink Violet Text** (`hsl(259 6% 15%)`) - primary text and icon color +- **Muted Violet Text** (`hsl(259 10% 38%)`) - secondary text +- **Primary Violet** (`hsl(264 38% 45%)`) - active emphasis and focus color +- **Primary Violet Container** (`hsl(270 34% 87%)`) - filled action and highlighted slab +- **Tertiary Sage** (`hsl(128 18% 40%)`) - supporting accent color +- **Tertiary Sage Container** (`hsl(112 20% 86%)`) - soft secondary accent background +- **Outline Violet Gray** (`hsl(259 10% 56%)`) - structural outline color +- **Outline Variant** (`hsl(259 10% 84%)`) - low-emphasis borders and separators + +### Role Rules + +- **Backgrounds** should read as tinted light, never as flat white. +- **Containers** should come from surface-container roles, not arbitrary translucent cards. +- **Primary actions** should usually use `primary-container` rather than a fully saturated fill. +- **Secondary emphasis** should prefer sage/tertiary-container instead of introducing a new accent. +- **Borders** should be whisper-soft or transparent. Hard dividers are the exception, not the default. +- **Errors** should use the error container family rather than loud red fills. + +### Dynamic Color Principle + +When generating new screens, treat color like this: + +1. Pick a seed color. +2. Generate a full tonal family from that seed. +3. Map the resulting tones to stable semantic roles. +4. Keep the component geometry and motion language unchanged. + +Do **not** solve personalization by introducing a new skin. Personalization comes from **seed-driven +tonal shifts**, not from changing the entire design language. + +## 3. Typography Rules + +**Primary Font Family:** Google Sans Text / Google Sans / Roboto Flex / Roboto +**Display Font Family:** Google Sans Display / Google Sans / Roboto Flex / Roboto + +The typography should feel **friendly, modern, and softly engineered**. It should not feel +editorial-serif, brutalist, developer-minimal, or luxury-fashion. The character is **rounded, +high-legibility, and quietly optimistic**. + +### Hierarchy & Weights + +- **Display Headlines:** Semibold weight, `clamp(2.75rem, 4vw, 4.75rem)`, tight tracking + (`-0.02em`), line-height `1.1` +- **Primary Section Headlines:** Semibold weight, `2.25rem` or `1.75rem`, line-height `1.1-1.3` +- **Card / Panel Titles:** Semibold weight, `1.375rem`, line-height `1.3` +- **Body Text:** Regular weight, `1rem`, line-height `1.5` +- **Supporting Text:** Regular weight, `0.875rem`, line-height `1.5` +- **Eyebrow / Small Label Text:** `0.75rem` or `0.875rem`, uppercase only when used sparingly, + tracking around `0.12em` +- **Buttons:** Medium to semibold presence through weight and shape, never all-caps shouting + +### Typography Principles + +- Headline scale should feel **heroic but rounded**, not sharp or corporate. +- Body copy should feel **quiet and readable**, letting color and space carry the emotional load. +- Eyebrow text is allowed, but only as a small framing device. +- Avoid serif display typography, condensed newspaper styling, and overly technical monospace accents. +- Large headlines should often be **left-aligned** and allowed to breathe. + +## 4. Component Stylings + +### Buttons + +- **Shape:** fully pill or near-pill; default radius should feel almost capsule-like +- **Primary Button:** use `primary-container` with darker on-primary-container text +- **Secondary Button:** use the sage / tertiary container family +- **Ghost Button:** no visible container at rest; reveal a tonal hover plate on interaction +- **Subtle Button:** pale lifted slab, close to the surrounding tonal field +- **Hover Behavior:** gentle lift (`translateY(-1px)`), slight scale, soft shadow bloom +- **Press Behavior:** subtle compression, never dramatic squash +- **Tone:** polished and tactile, not loud, glossy, metallic, or game-like + +### Cards & Surfaces + +- **Corner Radius:** large and soft; standard cards should feel more like 28px slabs than desktop cards +- **Borders:** usually transparent +- **Depth:** use soft diffused shadow and tonal contrast before introducing visible strokes +- **Accent Card:** use primary-container tinting, never a neon or glass effect +- **Interactive Cards:** lift gently and scale microscopically; feel buoyant, not jumpy + +### Inputs + +- **Shape:** rounded but not full-pill in most cases +- **Background:** lifted tonal field rather than pure white +- **Border:** often transparent by default +- **Focus State:** soft violet glow ring plus tonal shadow bloom +- **Placeholder:** muted violet-gray +- **Overall Feel:** touch-friendly, calm, and integrated into the tonal field + +### Panels, Dialogs, Popovers + +- **Background:** elevated tonal container with slightly brighter internal light +- **Border:** transparent by default +- **Shadow:** deeper than cards, but still diffused and soft +- **Overlay:** blurred and dimmed, never harsh black +- **Motion:** smooth rise/fade with restrained speed; should feel spatial and deliberate + +### Switches & Toggles + +- **Track:** soft tonal channel +- **Checked Track:** primary-container, not fully saturated primary +- **Thumb:** bright neutral at rest, richer violet when active +- **Behavior:** smooth slide with calm easing; no spring snap + +### Skeletons & Loaders + +- **Skeleton Color:** muted tonal slab +- **Shimmer:** soft highlight pass that feels like light moving over frosted material +- **Spinners:** clean and minimal; motion should feel controlled and premium + +## 5. Motion Language + +Cadence UI should use **one motion language** plus a **static accessibility fallback**. Motion is +not a style pack. It is part of how the system communicates state and hierarchy. + +### Motion Personality + +- Calm, floaty, and spatial +- Slightly cinematic in hero/showcase moments +- Never bouncy, elastic, or playful-for-its-own-sake +- Built on ease-out curves that feel like soft deceleration + +### Timing Guidance + +- **Instant feedback:** ~120ms +- **Core state change:** ~180ms +- **Larger surface movement:** ~280ms +- **Deliberate ambient choreography:** ~360ms and above + +### Approved Motion Patterns + +- Soft rise / fade for surface entry +- Hover lift with small shadow bloom +- Press compression with minimal scale-down +- Slow floating or drifting ambient motion for showcase-only compositions +- Breathing accent glows or tonal pulses for decorative context + +### Motion Rules + +- Animate **transform**, **opacity**, and **shadow**; avoid layout-heavy animation +- Ambient motion belongs in showcase or hero surfaces, not on every control +- Exit motion should be faster than enter motion +- Respect reduced/static motion at all times +- Never use bounce, elastic easing, jitter, or constant busy loops across core UI + +## 6. Layout Principles + +### Structural Direction + +Cadence UI layouts should feel like a **mobile-first visual language expanded to desktop**. Even on +large canvases, interfaces should maintain the rounded, stacked, tonal quality of contemporary +mobile surfaces. + +### Spacing & Rhythm + +- Use generous spacing to create a sense of premium calm +- Tighten within components, relax between sections +- Default spacing should feel deliberate, not grid-default or generic Tailwind spacing everywhere +- Prefer larger top-level section gaps than dense dashboard compression + +### Alignment + +- Headlines and body content should generally be left-aligned +- Centering is reserved for hero/showcase moments and empty states +- Use layered blocks and offset compositions when you need drama, not arbitrary asymmetry + +### Showcase / Marketing-like Surfaces + +For high-visibility demo pages: + +- Use environmental light pools and blurred radial tints +- Layer device-like slabs or floating cards with overlap +- Let one hero composition dominate rather than filling the canvas with equal-weight content +- Create a clear front plane, middle plane, and background glow plane + +### Product / Application Surfaces + +For practical product screens: + +- Use tonal grouping instead of borders to define regions +- Keep hierarchy obvious in under two seconds +- Maintain touch-friendly control sizes and generous internal padding +- Avoid the generic "card grid + icon + heading + paragraph" AI layout pattern + +## 7. Design System Notes for Stitch / AI Generation + +When using Stitch or any other AI design generator, this file should be treated as the +**source of truth for design direction**. + +### Language to Use + +Use phrases like: + +- "softly lit Material You showcase" +- "pastel-tonal slabs with large rounded geometry" +- "warm cream canvas with lilac and sage tonal containers" +- "dynamic color derived from a single seed" +- "ambient spatial motion with restrained hover lift" + +Avoid phrases like: + +- "multiple skins" +- "glassmorphism" +- "neon" +- "cyber" +- "dark dashboard" +- "minimal monochrome admin panel" +- "brutalist" + +### Component Prompt Examples + +- "Create a dashboard hero using large rounded tonal slabs, warm cream background, lilac and sage containers, and softly staged Material motion." +- "Design a primary action button using a primary-container fill, dark violet text, pill geometry, and a gentle hover lift." +- "Build a settings card with a large 28px slab radius, transparent border, soft diffused shadow, and a tonal input field embedded into the same color family." +- "Generate a dialog that feels like an elevated Material container, with blurred overlay, soft entry rise, and large rounded corners." + +### Iteration Rules + +When refining screens: + +1. Change one layer at a time: color, spacing, geometry, or motion. +2. Preserve the single Material language. +3. Prefer changing tonal roles before changing component structure. +4. Prefer changing seed color before inventing a new theme family. +5. If a screen starts to look like a different design system, pull it back. + +### Non-Negotiables + +- One visual language +- Dynamic color from a seed +- Tonal surfaces over flat white cards +- Large radii +- Calm spatial motion +- Reduced/static fallback + +This repository should feel like **one memorable system**, not a catalog of styling experiments. diff --git a/README.md b/README.md index d7da59c..7a70a48 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ default styling with its own tokens, motion recipes, and component contract. - The public UI surface now includes the core form and overlay set plus advanced patterns such as `DataTable`, `Command`, `Combobox`, `Sheet`, and `EmptyState`. - The default distribution path is package-first: `@ai-ui/ui` and `@ai-ui/tokens` are versioned and validated for package consumption. - The internal source-copy registry flow remains available as an optional mode for teams that want local ownership of copied component source. +- The active visual direction is documented in [DESIGN.md](/Users/xd/project/cadence-ui/DESIGN.md): a single Material You inspired language with dynamic color, tonal surfaces, large radii, and one shared motion system. ## System principles @@ -27,6 +28,20 @@ default styling with its own tokens, motion recipes, and component contract. - Accessibility by default: keyboard, focus, ARIA, and reduced motion are baseline expectations. - Motion with purpose: animation should communicate state and hierarchy, not decorate at random. +## System Of Record + +When changing public visuals, docs, or interaction behavior, treat these files as the baseline +context before making non-trivial changes: + +- [DESIGN.md](/Users/xd/project/cadence-ui/DESIGN.md) +- [README.md](/Users/xd/project/cadence-ui/README.md) +- [CONTRIBUTING.md](/Users/xd/project/cadence-ui/CONTRIBUTING.md) +- [roadmap.md](/Users/xd/project/cadence-ui/roadmap.md) +- [packages/ui/src/lib/contracts.ts](/Users/xd/project/cadence-ui/packages/ui/src/lib/contracts.ts) +- [apps/docs/src/component-authoring.stories.tsx](/Users/xd/project/cadence-ui/apps/docs/src/component-authoring.stories.tsx) +- [docs/harness-engineering.md](/Users/xd/project/cadence-ui/docs/harness-engineering.md) +- [docs/orchestration.md](/Users/xd/project/cadence-ui/docs/orchestration.md) + ## Getting started Requirements: @@ -103,7 +118,7 @@ import { Button } from "@ai-ui/ui"; This keeps the app on one UI package import path while still pulling in token and skin styles together. Consumers that want lower-level control can still import `@ai-ui/tokens/styles.css` and `@ai-ui/ui/skins.css` separately. If you need token helpers -such as `setTheme`, add `@ai-ui/tokens` directly as well. +such as `setTheme` or `setDynamicColor`, add `@ai-ui/tokens` directly as well. If you need source ownership instead of package upgrades, use the optional registry installer to copy component source into another project: @@ -166,6 +181,34 @@ uses: - Playwright smoke coverage for core Storybook flows - Storybook a11y checks as part of the docs review surface +## Harness engineering + +Cadence UI now includes a first-pass harness workflow for agent-friendly engineering. The goal is +to make the repository easier to understand, plan against, and validate mechanically. + +- System guidance lives in [docs/harness-engineering.md](/Users/xd/project/cadence-ui/docs/harness-engineering.md). +- Non-trivial work should start with an execution plan under + [docs/exec-plans](/Users/xd/project/cadence-ui/docs/exec-plans/README.md). +- Shared validation suites are exposed through the root `pnpm harness:*` scripts. +- Worktree-oriented orchestration defaults live in + [docs/orchestration.md](/Users/xd/project/cadence-ui/docs/orchestration.md). + +Useful commands: + +```bash +pnpm harness:select +pnpm harness:suites +pnpm harness:validate:static +pnpm harness:validate:changed +pnpm harness:validate:component +pnpm harness:validate:docs +pnpm harness:validate:docs-smoke +pnpm harness:validate:consumers +pnpm harness:validate:pr +pnpm harness:validate:release +pnpm harness:orch -- status --run +``` + ## Contributing Read [CONTRIBUTING.md](/Users/xd/project/cadence-ui/CONTRIBUTING.md) before adding or diff --git a/apps/docs/.storybook/preview.ts b/apps/docs/.storybook/preview.ts index 8a49302..57dd63c 100644 --- a/apps/docs/.storybook/preview.ts +++ b/apps/docs/.storybook/preview.ts @@ -1,12 +1,7 @@ import "../src/preview.css"; import type { Preview } from "@storybook/react"; -import { - defaultSkin, - setSkin, - skinDetails, - skinNames -} from "@ai-ui/ui"; +import { defaultSkin, setSkin } from "@ai-ui/ui"; import { defaultMotionMode, defaultTheme, @@ -21,7 +16,7 @@ import { const preview: Preview = { globalTypes: { theme: { - description: "Preview theme", + description: "Preview dynamic seed preset", toolbar: { icon: "paintbrush", dynamicTitle: true, @@ -32,7 +27,7 @@ const preview: Preview = { } }, motionMode: { - description: "Preview motion mode", + description: "Preview motion baseline", toolbar: { icon: "contrast", dynamicTitle: true, @@ -41,22 +36,10 @@ const preview: Preview = { title: motionModeDetails[modeName].label })) } - }, - skin: { - description: "Preview component skin", - toolbar: { - icon: "mirror", - dynamicTitle: true, - items: skinNames.map((skinName) => ({ - value: skinName, - title: skinDetails[skinName].label - })) - } } }, initialGlobals: { motionMode: defaultMotionMode, - skin: defaultSkin, theme: defaultTheme }, parameters: { @@ -82,11 +65,11 @@ const preview: Preview = { if (typeof document !== "undefined") { setTheme(context.globals.theme ?? defaultTheme); setMotionMode(context.globals.motionMode ?? defaultMotionMode); - setSkin(context.globals.skin ?? defaultSkin); + setSkin(defaultSkin); document.body.dataset.theme = context.globals.theme ?? defaultTheme; document.body.dataset.motion = context.globals.motionMode ?? defaultMotionMode; - document.body.dataset.skin = context.globals.skin ?? defaultSkin; + document.body.dataset.skin = defaultSkin; } return Story(); diff --git a/apps/docs/src/components/button.stories.tsx b/apps/docs/src/components/button.stories.tsx index ab7aa65..d0ddcb8 100644 --- a/apps/docs/src/components/button.stories.tsx +++ b/apps/docs/src/components/button.stories.tsx @@ -146,11 +146,42 @@ export const Motion: Story = { } }, render: () => ( -
- - - - +
+
+
+
+
+ +
+
+

+ Material motion deck +

+

+ Buttons should feel like touchable capsules floating over tinted light. +

+
+
+ + + + +
+
+ +
+
+ SOFT LIFT +
+
+ PRESSED +
+
+
+ + +
+
) }; diff --git a/apps/docs/src/components/card.stories.tsx b/apps/docs/src/components/card.stories.tsx index b9f8903..372f484 100644 --- a/apps/docs/src/components/card.stories.tsx +++ b/apps/docs/src/components/card.stories.tsx @@ -52,21 +52,46 @@ export const Playground: Story = { export const Grid: Story = { render: () => ( -
- - - Default tone - Standard elevated panel for data and form sections. - - Reliable baseline for most admin surfaces. - - - - Interactive accent - Hover-capable treatment for navigable cards. - - Use sparingly for overview screens with clear primary actions. - +
+
+
+
+
+ +
+
+

+ Showcase slabs +

+

+ Cards should feel like lit objects on a display plinth, not admin rectangles. +

+
+
+
+
+ + +
+
+
+ +
+ + + Default tone + Standard elevated panel for data and form sections. + + Reliable baseline for most admin surfaces. + + + + Interactive accent + Hover-capable treatment for navigable cards. + + Use sparingly for overview screens with clear primary actions. + +
) }; diff --git a/apps/docs/src/components/context-menu.stories.tsx b/apps/docs/src/components/context-menu.stories.tsx index b9e7f2a..ec7ca92 100644 --- a/apps/docs/src/components/context-menu.stories.tsx +++ b/apps/docs/src/components/context-menu.stories.tsx @@ -1,6 +1,5 @@ import { Badge, - Button, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, @@ -9,7 +8,6 @@ import { ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, - ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, diff --git a/apps/docs/src/components/data-table.stories.tsx b/apps/docs/src/components/data-table.stories.tsx index 86218b0..57eaba7 100644 --- a/apps/docs/src/components/data-table.stories.tsx +++ b/apps/docs/src/components/data-table.stories.tsx @@ -414,6 +414,7 @@ function DataTablePlayground() { - +
diff --git a/apps/docs/src/foundation.stories.tsx b/apps/docs/src/foundation.stories.tsx index 2591e7a..58ef39b 100644 --- a/apps/docs/src/foundation.stories.tsx +++ b/apps/docs/src/foundation.stories.tsx @@ -8,14 +8,15 @@ function FoundationShowcase() {

- AI UI / Phase 0 + AI UI / Foundation

- Monorepo scaffolding for a source-owned component system. + Source-owned infrastructure for a Material-first component system.

- The repo now has workspace packages for tokens, UI utilities, and docs. - The next phase can focus on component contracts instead of repo setup. + The workspace foundation now supports dynamic seed color, a shared UI package, + and a Storybook review surface. The next work can stay focused on component + quality instead of repo setup.

@@ -46,7 +47,7 @@ function FoundationShowcase() {