import { colorTokens, createDynamicColorVariables, defaultTheme, defaultMotionMode, motionTokens, motionModeDetails, radiusTokens, shadowTokens, themeDetails, themeNames, typographyTokens, type MotionModeName, type ThemeName } from "@ai-ui/tokens"; import type { Meta, StoryObj } from "@storybook/react"; import type { CSSProperties } from "react"; type TokensOverviewProps = { motionMode: MotionModeName; theme: ThemeName; }; function ResolvedTokenValue({ cssVar }: { cssVar: string }) { const value = typeof document === "undefined" ? "" : getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim(); return {value || cssVar}; } function TokenSwatch({ cssVar, name, role }: { cssVar: string; name: string; role: string; }) { return (
); } function ThemeCard({ themeName }: { themeName: ThemeName }) { const theme = themeDetails[themeName]; return (

{theme.label}

{theme.note}

{themeName}
); } function TokensOverview({ motionMode, theme }: TokensOverviewProps) { return (

AI UI / Phase 1

The first stable token layer defines color, type, surface depth, and motion rhythm around a Material You style system.

Seed color now drives the palette. Components inherit tonal surfaces and emphasis roles from the token layer instead of shipping disconnected visual skins.

Active Seed Preset

{themeDetails[theme].label}

Motion

{motionModeDetails[motionMode].label}

Seed presets

These cards render their own seed-derived palettes, so the tonal system can be reviewed side by side without changing component code.

{themeNames.map((themeName) => ( ))}

Color roles

Semantic color tokens replace hardcoded brand values. Components consume roles such as primary, muted, destructive, or surface.

{colorTokens.map((token) => ( ))}

Typography scale

The system now separates display voice, body readability, and metadata density into named text roles.

{typographyTokens.map((token) => (
{token.name} {token.fontVar} {token.familyVar}

{token.sample}

))}

Radius scale

{radiusTokens.map((token) => (

{token.name}

{token.cssVar}
))}

Shadow scale

{shadowTokens.map((token) => (

{token.name}

{token.cssVar}
))}

Motion tokens

Timing and motion scale now live in variables that components can consume directly. The toolbar now switches between the interactive micro-feedback layer and the static fallback.

Durations

{motionTokens.durations.map((token) => (
{token.name}
))}

Distances

{motionTokens.distances.map((token) => (
{token.name}
))}

Starter recipes

`motion.css` now includes a small recipe layer for transitions, press feedback, enters, and overlays.

{[ "motion-transition", "motion-pressable", "motion-enter-fade", "motion-enter-rise", "motion-overlay-enter", "motion-overlay-exit" ].map((recipe) => (
{recipe} recipe
))}
); } const meta = { title: "Foundation/Tokens", component: TokensOverview, parameters: { layout: "fullscreen" } } satisfies Meta; export default meta; type Story = StoryObj; export const Overview: Story = { args: { motionMode: defaultMotionMode, theme: defaultTheme }, render: (_args, context) => ( ) };