docs(appearance): document control variants

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

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

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

@@ -1,5 +1,4 @@
 import React from "react"
-import { ThemePreview } from "@workspace/appearance/components/theme-preview"
 import type { ThemeColorConfig } from "@workspace/appearance/theme"
 
 import { AccentPicker } from "./AccentPicker"
@@ -12,8 +11,12 @@ export default function ThemeColorsExample() {
 
   return (
     <div className="mx-auto flex max-w-xl flex-col gap-6">
-      <ThemePreview config={config} scheme="light" />
       <AccentPicker config={config} onConfigChange={setConfig} />
+      <AccentPicker
+        config={config}
+        variant="swatch"
+        onConfigChange={setConfig}
+      />
     </div>
   )
 }