feat(appearance): add accessible display preferences

packages/appearance/src/components/theme-config-card.tsx

@@ -1,5 +1,4 @@
 import { LocalizedText } from "@workspace/i18n"
-import { Badge } from "@workspace/ui/components/badge"
 import { MoonIcon, SunIcon } from "@workspace/ui/components/icon"
 import { cn } from "@workspace/ui/lib/utils"
 
@@ -13,33 +12,20 @@ import {
 import { ThemePreview } from "./theme-preview"
 
 export interface ThemeConfigCardProps {
-  active?: boolean
   className?: string
-  compacted?: boolean
   config: ThemeColorConfig
   onConfigChange: (config: ThemeColorConfig) => void
   scheme: ThemeScheme
 }
 
 export function ThemeConfigCard({
-  active = false,
   className,
-  compacted = false,
   config,
   onConfigChange,
   scheme,
 }: ThemeConfigCardProps) {
-  const titleMessage =
-    scheme === "light"
-      ? appearanceMessages.lightTheme
-      : appearanceMessages.darkTheme
-  const descriptionMessage =
-    scheme === "light"
-      ? appearanceMessages.lightThemeDescription
-      : appearanceMessages.darkThemeDescription
-
   return (
-    <section className={cn("w-md rounded-xl border", className)}>
+    <section className={cn("w-full max-w-md rounded-xl border", className)}>
       <header className="flex gap-4 border-b p-3">
         {scheme === "light" ? (
           <SunIcon className="size-5" />
@@ -47,19 +33,14 @@ export function ThemeConfigCard({
           <MoonIcon className="size-5" />
         )}
         <h2>
-          <LocalizedText message={titleMessage} />
+          <LocalizedText message={appearanceMessages.themeColors} />
         </h2>
-        {active && (
-          <Badge className="ml-auto">
-            <LocalizedText message={appearanceMessages.active} />
-          </Badge>
-        )}
       </header>
       <div className="space-y-4 p-4">
         <p>
-          <LocalizedText message={descriptionMessage} />
+          <LocalizedText message={appearanceMessages.themeColorsDescription} />
         </p>
-        <ThemePreview compacted={compacted} config={config} scheme={scheme} />
+        <ThemePreview config={config} scheme={scheme} />
         <ThemeColorPicker
           swatches={baseColorSwatches}
           title={<LocalizedText message={appearanceMessages.baseColor} />}
@@ -70,7 +51,7 @@ export function ThemeConfigCard({
         />
         <ThemeColorPicker
           swatches={accentColorSwatches}
-          title={<LocalizedText message={appearanceMessages.primaryColor} />}
+          title={<LocalizedText message={appearanceMessages.accentColor} />}
           value={config.accentColor}
           onValueChange={(accentColor) =>
             onConfigChange({ ...config, accentColor })