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

refactor(appearance): adopt accent and highlight tokens

Browse Source
This commit is contained in:
Maofeng
2026-09-29 17:08:08 +08:00
parent d5cec8342d
commit 91e010cff7
4 changed files with 254 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/appearance/src/components/theme-preview.tsx
+5 -5
View File
@@ -26,7 +26,7 @@ export function ThemePreview({
...Object.fromEntries(
Object.entries(themeVariables).map(([key, value]) => [`--${key}`, value])
),
"--preview-base": baseTheme.cssVars[scheme].primary,
"--preview-base": baseTheme.cssVars[scheme].accent,
} as CSSProperties
return (
@@ -41,7 +41,7 @@ export function ThemePreview({
<div className="flex gap-3">
<div className="flex w-16 flex-col gap-1 py-5 [&>div]:bg-foreground/10">
<div className="h-2.5 w-full rounded-r-full" />
<div className="h-2.5 w-full rounded-r-full bg-primary!" />
<div className="h-2.5 w-full rounded-r-full bg-accent!" />
<div className="h-2.5 w-full rounded-r-full" />
<div className="h-2.5 w-full rounded-r-full" />
<div className="mt-auto h-2.5 w-full rounded-r-full" />
@@ -52,7 +52,7 @@ export function ThemePreview({
<div className="h-2.5 w-3 rounded-sm" />
<div className="ml-auto size-2.5 rounded-sm" />
<div className="h-2.5 w-3.75 rounded-sm" />
<div className="h-2.5 w-5 rounded-sm bg-primary!" />
<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">
@@ -87,8 +87,8 @@ export function ThemePreview({
<div className="h-1 w-6 rounded-xs bg-(--preview-base)/55 compacted:hidden" />
</div>
<div className="flex items-center gap-1">
<div className="h-2 w-6 rounded-sm bg-primary" />
<div className="h-2 w-6 rounded-sm bg-primary/75" />
<div className="h-2 w-6 rounded-sm bg-accent" />
<div className="h-2 w-6 rounded-sm bg-accent/75" />
</div>
</div>
<div className="h-18" />