bourdon/simple-react-app-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(appearance): document control variants

Browse Source
This commit is contained in:
Maofeng
2026-09-29 21:29:49 +08:00
parent 983ebead02
commit 352db2c4c0
6 changed files with 49 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/appearance/docs/en-US/advanced/atomic-composition.mdx
+19 -3
View File
@@ -15,19 +15,23 @@ toc:
## Controlled atoms {#controlled-atoms}
`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.
`ThemeModeField`, `ThemeModeOptionList`, `ColorVisionModeField`, `TextScaleField`, `TextScaleOptionList`, `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} />
<ThemeModeOptionList value={mode} onValueChange={setMode} />
<ColorVisionModeField value={colorVisionMode} onValueChange={setColorVisionMode} />
<TextScaleField value={textScale} onValueChange={setTextScale} />
<MotionModeField value={motionMode} onValueChange={setMotionMode} />
<BrightnessField value={brightness} onValueChange={setBrightness} />
<TextScaleOptionList value={textScale} onValueChange={setTextScale} />
```
`AppearanceOptionList` is the reusable radio list behind `TextScaleOptionList`. Give its `items` a `value`, `label`, and optional `icon` and `description` to build theme, motion, color-vision, or brightness selectors with the same presentation. It uses native radio inputs for keyboard navigation and form semantics.
## Compose a theme card {#compose-card}
`ThemeConfigCard` combines a preview with base and accent color controls while keeping the configuration owned by the caller.
`ThemeConfigCard` combines base and accent color controls while keeping the configuration owned by the caller.
```tsx
<ThemeConfigCard
@@ -37,7 +41,19 @@ toc:
/>
```
For a more granular layout, compose `ThemePreview`, `baseColorSwatches`, `accentColorSwatches`, and `ThemeColorSwatchButton` directly.
For a more granular layout, compose `baseColorSwatches`, `accentColorSwatches`, and `ThemeColorSwatchButton` directly.
`ThemeColorPicker` uses the labeled `pill` style by default. For tighter layouts, switch to the color-only `swatch` style with its selected indicator:
```tsx
<ThemeColorPicker
title="Accent color"
swatches={accentColorSwatches}
value={accentColor}
variant="swatch"
onValueChange={setAccentColor}
/>
```
## State bindings {#connected-layer}
packages/appearance/docs/en-US/overview.mdx
+1 -2
View File
@@ -25,8 +25,7 @@ The controlled components can be composed independently without preference conte
- `MotionModeField` follows the system, reduces motion, or enables full motion.
- `BrightnessField` selects dim, normal, or bright interface surfaces.
- `ThemeColorPicker` and `ThemeColorSwatchButton` select theme colors.
- `ThemePreview` previews a set of theme variables.
- `ThemeConfigCard` combines the preview, base color, and accent color controls.
- `ThemeConfigCard` combines the base color and accent color controls.
- `ThemeToggle` switches between light and dark themes.
`AppearanceSettings`, `AppearanceDialog`, and `AppearanceController` are optional composition layers built from these atoms.