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

feat(appearance): add accessible display preferences

Browse Source
This commit is contained in:
Maofeng
2026-09-29 20:58:35 +08:00
parent 75d8cbbfc3
commit aae02d1502
23 changed files with 786 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/appearance/src/components/theme-preview.tsx
+8 -14
View File
@@ -9,17 +9,11 @@ import { cn } from "@workspace/ui/lib/utils"
export interface ThemePreviewProps {
className?: string
compacted?: boolean
config: ThemeColorConfig
scheme: ThemeScheme
}
export function ThemePreview({
scheme,
config,
className,
compacted = false,
}: ThemePreviewProps) {
export function ThemePreview({ scheme, config, className }: ThemePreviewProps) {
const themeVariables = getThemeCssVariables(scheme, config)
const baseTheme = getTheme(config.baseColor) ?? getTheme("neutral")!
const style = {
@@ -47,7 +41,7 @@ export function ThemePreview({
<div className="mt-auto h-2.5 w-full rounded-r-full" />
</div>
<div className="flex-1 py-5">
<div className={cn("space-y-2.5", { "px-7.5": compacted })}>
<div className="space-y-2.5">
<div className="flex h-2.5 items-center gap-2 [&>div]:bg-foreground/10">
<div className="h-2.5 w-3 rounded-sm" />
<div className="ml-auto size-2.5 rounded-sm" />
@@ -55,7 +49,7 @@ export function ThemePreview({
<div className="h-2.5 w-5 rounded-sm bg-accent!" />
</div>
<div className="grid grid-cols-3 gap-2 [&>div]:rounded-sm [&>div]:bg-foreground/10">
<div className="flex h-18 items-end gap-2 p-2 compacted:gap-1">
<div className="flex h-18 items-end gap-2 p-2">
<div className="h-6 w-2 rounded-t-sm bg-(--preview-base)/55" />
<div className="h-4 w-2 rounded-t-sm bg-(--preview-base)/55" />
<div className="h-11 w-2 rounded-t-sm bg-(--preview-base)/55" />
@@ -73,18 +67,18 @@ export function ThemePreview({
<div className="flex flex-wrap gap-1">
<div className="size-1 rounded-xs bg-(--preview-base)/55" />
<div className="h-1 w-6 rounded-xs bg-(--preview-base)/55" />
<div className="h-1 w-3 rounded-xs bg-(--preview-base)/55 compacted:w-4" />
<div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
<div className="h-1 w-5 rounded-xs bg-(--preview-base)/55" />
<div className="h-1 w-5 rounded-xs bg-(--preview-base)/55" />
<div className="size-1 rounded-xs bg-(--preview-base)/55" />
<div className="h-1 w-5 rounded-xs bg-(--preview-base)/55" />
<div className="h-1 w-2 rounded-xs bg-(--preview-base)/55 compacted:w-1" />
<div className="size-1 rounded-xs bg-(--preview-base)/55 compacted:w-5" />
<div className="h-1 w-2 rounded-xs bg-(--preview-base)/55" />
<div className="size-1 rounded-xs bg-(--preview-base)/55" />
<div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
<div className="size-1 rounded-xs bg-(--preview-base)/55" />
<div className="h-1 w-3 rounded-xs bg-(--preview-base)/55" />
<div className="size-1 rounded-xs bg-(--preview-base)/55 compacted:w-3" />
<div className="h-1 w-6 rounded-xs bg-(--preview-base)/55 compacted:hidden" />
<div className="size-1 rounded-xs bg-(--preview-base)/55" />
<div className="h-1 w-6 rounded-xs bg-(--preview-base)/55" />
</div>
<div className="flex items-center gap-1">
<div className="h-2 w-6 rounded-sm bg-accent" />