Add harness workflow and Material showcase design system

apps/docs/src/tokens.stories.tsx

@@ -1,5 +1,6 @@
 import {
   colorTokens,
+  createDynamicColorVariables,
   defaultTheme,
   defaultMotionMode,
   motionTokens,
@@ -13,6 +14,7 @@ import {
   type ThemeName
 } from "@ai-ui/tokens";
 import type { Meta, StoryObj } from "@storybook/react";
+import type { CSSProperties } from "react";
 
 type TokensOverviewProps = {
   motionMode: MotionModeName;
@@ -63,8 +65,8 @@ function ThemeCard({ themeName }: { themeName: ThemeName }) {
 
   return (
     <article
-      data-theme={themeName}
       className="rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-background)] p-5 text-[var(--color-foreground)] shadow-[var(--shadow-sm)]"
+      style={createDynamicColorVariables(theme.seed) as CSSProperties}
     >
       <div className="flex items-start justify-between gap-4">
         <div>
@@ -143,19 +145,19 @@ function TokensOverview({
               }}
             >
               The first stable token layer defines color, type, surface depth, and
-              motion rhythm.
+              motion rhythm around a Material You style system.
             </h1>
             <p className="max-w-3xl text-[var(--text-lg)] leading-[var(--leading-loose)] text-[var(--color-muted-foreground)]">
-              Theme switching now happens at the token layer, not inside component
-              implementations. Motion is also represented as named tokens and starter
-              recipes rather than ad hoc transition values.
+              Seed color now drives the palette. Components inherit tonal surfaces and
+              emphasis roles from the token layer instead of shipping disconnected visual
+              skins.
             </p>
           </div>
 
           <div className="grid gap-3 sm:grid-cols-2">
             <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] px-4 py-3 shadow-[var(--shadow-xs)]">
               <p className="text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">
-                Active Theme
+                Active Seed Preset
               </p>
               <p className="mt-2 text-sm font-medium text-[var(--color-foreground)]">
                 {themeDetails[theme].label}
@@ -175,10 +177,10 @@ function TokensOverview({
         <section className="space-y-4">
           <div className="flex items-center justify-between gap-4">
             <div>
-              <h2 className="text-2xl font-semibold">Theme scaffolds</h2>
+              <h2 className="text-2xl font-semibold">Seed presets</h2>
               <p className="mt-1 text-sm text-[var(--color-muted-foreground)]">
-                These cards render their own nested theme roots, so tokens can be
-                validated side by side without touching component code.
+                These cards render their own seed-derived palettes, so the tonal system
+                can be reviewed side by side without changing component code.
               </p>
             </div>
           </div>