feat(web): indigo brand token + status tokens + Badge success/warning variants (#49)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/objects/visibility-badge.stories.tsx

@@ -26,16 +26,17 @@ export const Draft: Story = {
   args: { visibility: 'draft' },
 }
 
-// The single project-wide CssCheck. VisibilityBadge applies `bg-green-100` for
-// the `public` visibility (see STYLES in visibility-badge.tsx). A concrete
-// resolved background colour proves the shared preview actually loaded the app's
-// Tailwind stylesheet — an unstyled badge would report a transparent background.
+// The single project-wide CssCheck. VisibilityBadge applies the `success`
+// variant for the `public` visibility (`bg-success/10`, see VARIANT in
+// visibility-badge.tsx). A concrete resolved background colour proves the shared
+// preview actually loaded the app's Tailwind stylesheet — an unstyled badge
+// would report a transparent background.
 export const CssCheck: Story = {
   args: { visibility: 'public' },
   play: async ({ canvas }) => {
     const badge = canvas.getByText('Public')
     await expect(getComputedStyle(badge).backgroundColor).toBe(
-      'oklch(0.962 0.044 156.743)',
+      'oklab(0.627 -0.166662 0.0992956 / 0.1)',
     )
   },
 }

web/src/objects/visibility-badge.tsx

@@ -5,18 +5,16 @@ import { Badge } from "@/components/ui/badge";
 
 type Visibility = components["schemas"]["Visibility"];
 
-const STYLES: Record<Visibility, string> = {
-  draft: "bg-neutral-100 text-neutral-600",
-  internal: "bg-amber-100 text-amber-800",
-  public: "bg-green-100 text-green-800",
+const VARIANT: Record<Visibility, "secondary" | "warning" | "success"> = {
+  draft: "secondary",
+  internal: "warning",
+  public: "success",
 };
 
 export function VisibilityBadge({ visibility }: { visibility: Visibility }) {
   const { t } = useTranslation();
 
   return (
-    <Badge variant="outline" className={STYLES[visibility]}>
-      {t(`visibility.${visibility}`)}
-    </Badge>
+    <Badge variant={VARIANT[visibility]}>{t(`visibility.${visibility}`)}</Badge>
   );
 }