Fix Storybook a11y violations

apps/docs/src/components/data-table.stories.tsx

@@ -149,7 +149,15 @@ const routingColumns: DataTableColumn<RoutingLaneRow>[] = [
     accessor: "state",
     cell: (row) => (
       <div className="flex flex-wrap items-center gap-3">
-        <Badge size="sm" tone={getStateTone(row.state)} variant="solid">
+        <Badge
+          size="sm"
+          style={{
+            backgroundColor: "var(--color-background)",
+            color: "var(--color-foreground)"
+          }}
+          tone={getStateTone(row.state)}
+          variant="outline"
+        >
           {row.state}
         </Badge>
         <span className="text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">

apps/docs/src/components/select.stories.tsx

@@ -36,7 +36,7 @@ export const Playground: Story = {
   render: () => (
     <div className="w-[320px]">
       <Select defaultValue="editorial">
-        <SelectTrigger>
+        <SelectTrigger aria-label="Review lane">
           <SelectValue placeholder="Choose a review lane" />
         </SelectTrigger>
         <SelectContent>
@@ -47,7 +47,7 @@ export const Playground: Story = {
             <SelectItem value="legal">Legal review</SelectItem>
           </SelectGroup>
         </SelectContent>
-        </Select>
+      </Select>
     </div>
   ),
   play: async ({ canvasElement }) => {

apps/docs/src/components/switch.stories.tsx

@@ -31,7 +31,14 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {};
+export const Playground: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Switch id="switch-playground" {...args} />
+      <Label htmlFor="switch-playground">Live publishing</Label>
+    </div>
+  )
+};
 
 export const States: Story = {
   render: () => (

apps/docs/src/style-contract.stories.tsx

@@ -125,7 +125,11 @@ function SkinPanel({
             <span className="text-sm font-medium text-[var(--color-foreground)]">
               Preview controls
             </span>
-            <Switch checked={enabled} onCheckedChange={setEnabled} />
+            <Switch
+              aria-label={`${skinDetails[name].label} preview controls`}
+              checked={enabled}
+              onCheckedChange={setEnabled}
+            />
           </div>
           <Input
             aria-label={`${name} skin search`}

apps/docs/src/style-matrix.stories.tsx

@@ -112,12 +112,19 @@ function ComparisonCell({
           </CardDescription>
         </CardHeader>
         <CardContent className="grid gap-3">
-          <Input defaultValue="Launch notes approved" readOnly />
+          <Input
+            aria-label={`${motionPack} ${skin} release note status`}
+            defaultValue="Launch notes approved"
+            readOnly
+          />
           <div className="flex items-center justify-between gap-3">
             <span className="text-sm text-[var(--color-muted-foreground)]">
               Quiet notifications
             </span>
-            <Switch checked />
+            <Switch
+              aria-label={`${motionPack} ${skin} quiet notifications`}
+              checked
+            />
           </div>
           <div className="flex flex-wrap gap-3">
             <Button>Primary</Button>

packages/ui/src/skins.css

@@ -164,7 +164,7 @@
   );
   --ui-button-primary-bg: color-mix(in oklch, var(--color-primary) 72%, white 28%);
   --ui-button-primary-hover-bg: color-mix(in oklch, var(--color-primary) 78%, white 22%);
-  --ui-button-primary-fg: var(--color-primary-foreground);
+  --ui-button-primary-fg: var(--color-foreground);
   --ui-button-primary-border: color-mix(in oklch, white 28%, var(--color-primary));
   --ui-button-primary-shadow: 0 16px 34px oklch(0.24 0.06 250 / 0.18);
   --ui-button-secondary-bg: color-mix(in oklch, var(--color-secondary) 52%, transparent);