kurihada/cadence-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add harness workflow and Material showcase design system

Browse Source
This commit is contained in:
kurihada
2026-03-23 17:30:30 +08:00
parent c570431dba
commit 5d02bf9df4
46 changed files with 3343 additions and 1068 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/src/components/button.stories.tsx
+36 -5
View File
@@ -146,11 +146,42 @@ export const Motion: Story = {
}
},
render: () => (
<div className="grid w-[720px] gap-3 sm:grid-cols-2">
<Button>Premium primary</Button>
<Button variant="subtle">Subtle surface</Button>
<Button variant="secondary">Secondary action</Button>
<Button loading>Saving changes</Button>
<div className="relative grid w-[840px] gap-5 overflow-hidden rounded-[2.2rem] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-surface)_84%,white_16%),color-mix(in_oklch,var(--color-background)_90%,white_10%))] p-6 shadow-[0_24px_72px_color-mix(in_oklch,var(--color-primary)_10%,transparent)] sm:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
<div className="pointer-events-none absolute inset-0">
<div className="motion-drift absolute left-[-2rem] top-[-2rem] h-28 w-28 rounded-full bg-[color-mix(in_oklch,var(--color-primary-container)_62%,transparent)] blur-3xl" />
<div className="motion-breathe absolute right-0 top-10 h-24 w-24 rounded-full bg-[color-mix(in_oklch,var(--color-tertiary-container)_58%,transparent)] blur-3xl" />
</div>
<div className="relative grid gap-4">
<div className="space-y-2">
<p className="text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">
Material motion deck
</p>
<h3 className="max-w-md text-3xl font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]">
Buttons should feel like touchable capsules floating over tinted light.
</h3>
</div>
<div className="grid gap-3 sm:grid-cols-2">
<Button>Premium primary</Button>
<Button variant="subtle">Subtle surface</Button>
<Button variant="secondary">Secondary action</Button>
<Button loading>Saving changes</Button>
</div>
</div>
<div className="relative flex items-center justify-center">
<div className="motion-float absolute left-5 top-8 rounded-full border border-white/45 bg-[color-mix(in_oklch,var(--color-surface-container-low)_78%,white_22%)] px-4 py-2 text-xs font-medium tracking-[0.14em] text-[var(--color-muted-foreground)] shadow-[0_12px_30px_color-mix(in_oklch,var(--color-primary)_10%,transparent)]">
SOFT LIFT
</div>
<div className="motion-float-delayed absolute bottom-6 right-6 rounded-full bg-[var(--color-primary-container)] px-4 py-2 text-sm font-medium text-[var(--color-on-primary-container)] shadow-[0_14px_28px_color-mix(in_oklch,var(--color-primary)_12%,transparent)]">
PRESSED
</div>
<div className="grid w-full max-w-[16rem] gap-3 rounded-[2rem] border border-white/40 bg-[color-mix(in_oklch,var(--color-surface-container-low)_82%,white_18%)] p-4 shadow-[0_24px_60px_color-mix(in_oklch,var(--color-primary)_12%,transparent)]">
<div className="h-28 rounded-[1.5rem] bg-[linear-gradient(165deg,color-mix(in_oklch,var(--color-primary-container)_88%,white_12%),color-mix(in_oklch,var(--color-tertiary-container)_82%,white_18%))]" />
<Button>Shop set</Button>
<Button variant="ghost">Maybe later</Button>
</div>
</div>
</div>
)
};
apps/docs/src/components/card.stories.tsx
+40 -15
View File
@@ -52,21 +52,46 @@ export const Playground: Story = {
export const Grid: Story = {
render: () => (
<div className="grid w-[760px] gap-4 md:grid-cols-2">
<Card>
<CardHeader>
<CardTitle>Default tone</CardTitle>
<CardDescription>Standard elevated panel for data and form sections.</CardDescription>
</CardHeader>
<CardContent>Reliable baseline for most admin surfaces.</CardContent>
</Card>
<Card interactive tone="accent">
<CardHeader>
<CardTitle>Interactive accent</CardTitle>
<CardDescription>Hover-capable treatment for navigable cards.</CardDescription>
</CardHeader>
<CardContent>Use sparingly for overview screens with clear primary actions.</CardContent>
</Card>
<div className="relative grid w-[940px] gap-6 overflow-hidden rounded-[2.3rem] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-surface)_82%,white_18%),color-mix(in_oklch,var(--color-background)_88%,white_12%))] p-6 shadow-[0_24px_72px_color-mix(in_oklch,var(--color-primary)_10%,transparent)] md:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
<div className="pointer-events-none absolute inset-0">
<div className="motion-drift absolute left-[-1.5rem] top-6 h-24 w-24 rounded-full bg-[color-mix(in_oklch,var(--color-primary-container)_58%,transparent)] blur-3xl" />
<div className="motion-breathe absolute right-10 top-0 h-20 w-20 rounded-full bg-[color-mix(in_oklch,var(--color-tertiary-container)_52%,transparent)] blur-3xl" />
</div>
<div className="relative grid gap-4 self-start">
<div className="space-y-2">
<p className="text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">
Showcase slabs
</p>
<h3 className="max-w-sm text-3xl font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]">
Cards should feel like lit objects on a display plinth, not admin rectangles.
</h3>
</div>
<div className="grid gap-3 rounded-[1.6rem] bg-[color-mix(in_oklch,var(--color-surface-container)_82%,white_18%)] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.4)]">
<div className="h-40 rounded-[1.4rem] bg-[linear-gradient(160deg,color-mix(in_oklch,var(--color-primary-container)_78%,white_22%),color-mix(in_oklch,var(--color-tertiary-container)_74%,white_26%))]" />
<div className="grid gap-2">
<span className="h-3 w-24 rounded-full bg-[var(--color-foreground)]/12" />
<span className="h-3 w-40 rounded-full bg-[var(--color-foreground)]/9" />
</div>
</div>
</div>
<div className="relative grid gap-4">
<Card className="motion-float">
<CardHeader>
<CardTitle>Default tone</CardTitle>
<CardDescription>Standard elevated panel for data and form sections.</CardDescription>
</CardHeader>
<CardContent>Reliable baseline for most admin surfaces.</CardContent>
</Card>
<Card className="motion-float-delayed justify-self-end md:w-[88%]" interactive tone="accent">
<CardHeader>
<CardTitle>Interactive accent</CardTitle>
<CardDescription>Hover-capable treatment for navigable cards.</CardDescription>
</CardHeader>
<CardContent>Use sparingly for overview screens with clear primary actions.</CardContent>
</Card>
</div>
</div>
)
};
apps/docs/src/components/context-menu.stories.tsx
-2
View File
@@ -1,6 +1,5 @@
import {
Badge,
Button,
ContextMenu,
ContextMenuCheckboxItem,
ContextMenuContent,
@@ -9,7 +8,6 @@ import {
ContextMenuRadioGroup,
ContextMenuRadioItem,
ContextMenuSeparator,
ContextMenuShortcut,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
apps/docs/src/components/data-table.stories.tsx
+1
View File
@@ -414,6 +414,7 @@ function DataTablePlayground() {
</SelectContent>
</Select>
<Button
className="border-[var(--color-border-strong)] bg-[var(--color-background)] text-[var(--color-foreground)] hover:bg-[var(--color-surface)]"
size="sm"
variant="secondary"
onClick={resetView}
apps/docs/src/components/dropdown-menu.stories.tsx
-1
View File
@@ -8,7 +8,6 @@ import {
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
apps/docs/src/components/form.stories.tsx
+6 -1
View File
@@ -173,7 +173,12 @@ function LaunchSettingsForm() {
>
Reset
</Button>
<Button type="submit">Save settings</Button>
<Button
className="bg-[var(--color-foreground)] text-[var(--color-background)] hover:bg-[color-mix(in_oklch,var(--color-foreground)_88%,white_12%)]"
type="submit"
>
Save settings
</Button>
</div>
<div className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-background)] p-4">