feat(docs): add appearance sandbox example

docs/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@icones/react": "^0.0.1",
+    "@workspace/appearance": "workspace:*",
     "@workspace/i18n": "workspace:*",
     "@workspace/media": "workspace:*",
     "@workspace/preferences": "workspace:*",

docs/src/index.css

@@ -1,4 +1,5 @@
 @import "@workspace/ui/globals.css";
+@import "@workspace/appearance/globals.css";
 @import "@workspace/media/globals.css";
 @import "@workspace/search/globals.css";
 

docs/src/sandboxes/appearance/theme-toggle/AccentPicker.tsx

@@ -0,0 +1,24 @@
+import {
+  ThemeColorPicker,
+  accentColorSwatches,
+} from "@workspace/appearance/components/theme-color-picker"
+import type { ThemeColorConfig } from "@workspace/appearance/theme"
+
+export function AccentPicker({
+  config,
+  onConfigChange,
+}: {
+  config: ThemeColorConfig
+  onConfigChange: (config: ThemeColorConfig) => void
+}) {
+  return (
+    <ThemeColorPicker
+      title="Accent color"
+      swatches={accentColorSwatches}
+      value={config.accentColor}
+      onValueChange={(accentColor) =>
+        onConfigChange({ ...config, accentColor })
+      }
+    />
+  )
+}

docs/src/sandboxes/appearance/theme-toggle/App.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { ThemePreview } from "@workspace/appearance/components/theme-preview"
+import type { ThemeColorConfig } from "@workspace/appearance/theme"
+
+import { AccentPicker } from "./AccentPicker"
+
+export default function ThemeColorsExample() {
+  const [config, setConfig] = React.useState<ThemeColorConfig>({
+    accentColor: "indigo",
+    baseColor: "neutral",
+  })
+
+  return (
+    <div className="mx-auto flex max-w-xl flex-col gap-6">
+      <ThemePreview config={config} scheme="light" />
+      <AccentPicker config={config} onConfigChange={setConfig} />
+    </div>
+  )
+}

docs/src/sandboxes/appearance/theme-toggle/sandbox.ts

@@ -0,0 +1,12 @@
+import { defineSandbox } from "../../../components/sandbox"
+
+export default defineSandbox({
+  id: "appearance/theme-colors",
+  title: "Controlled theme colors",
+  entry: () => import("./App"),
+  files: {
+    "App.tsx": () => import("./App.tsx?raw"),
+    "AccentPicker.tsx": () => import("./AccentPicker.tsx?raw"),
+  },
+  defaultFile: "App.tsx",
+})