docs(appearance): document display preferences

packages/appearance/docs/en-US/advanced/atomic-composition.mdx

@@ -15,11 +15,14 @@ toc:
 
 ## Controlled atoms {#controlled-atoms}
 
-`ThemeModeField`, `CompactLayoutField`, `ThemeColorPicker`, and `ThemeToggle` are driven by values and callbacks. They do not require preference context, so they can work with forms, preview tools, or another state library.
+`ThemeModeField`, `ColorVisionModeField`, `TextScaleField`, `MotionModeField`, `BrightnessField`, `ThemeColorPicker`, and `ThemeToggle` are driven by values and callbacks. They do not require preference context, so they can work with forms, preview tools, or another state library.
 
 ```tsx
 <ThemeModeField value={mode} onValueChange={setMode} />
-<CompactLayoutField checked={compacted} onCheckedChange={setCompacted} />
+<ColorVisionModeField value={colorVisionMode} onValueChange={setColorVisionMode} />
+<TextScaleField value={textScale} onValueChange={setTextScale} />
+<MotionModeField value={motionMode} onValueChange={setMotionMode} />
+<BrightnessField value={brightness} onValueChange={setBrightness} />
 ```
 
 ## Compose a theme card {#compose-card}
@@ -28,11 +31,9 @@ toc:
 
 ```tsx
 <ThemeConfigCard
-  active={resolvedTheme === "light"}
-  compacted={compacted}
-  config={lightTheme}
-  onConfigChange={setLightTheme}
-  scheme="light"
+  config={{ baseColor, accentColor }}
+  onConfigChange={setThemeColors}
+  scheme={resolvedTheme}
 />
 ```