refactor(styles): improve light-mode contrast across surfaces and muted text
Dark mode unchanged. Targets that were reported as "barely visible" in light theme: Surfaces / dividers - --color-border-subtle (light) bumped from rgb(0 0 0 / 0.05) to --neutral-300 (matches the Input underline variant's border color and yields a visible hairline on bg-surface / bg-paper). - New bg-subtle utility (same color as border-subtle but as background-color) — used by Divider component and the TypographyMenu inline column separator. Replaces ad-hoc 'bg-black/5 dark:bg-white/10' and 'bg-black/10 dark:bg-white/10' bands. - FontSearch + ComparisonView Search wrapper borders switched from hand-written 'border-swiss-black/5 dark:border-white/10' to border-subtle so they participate in the palette. Muted text - Button tertiary inactive text (light) bumped neutral-400 → neutral-600 (~2.7:1 → ~7.5:1 contrast). Covers the A/B toggle and the font-list rows in the sidebar. - Label/TechText muted variant (light) bumped neutral-400 → neutral-600. Covers the ComboControl value text. - Link text aligned to neutral-500 / neutral-400 (subtle but visible). No behavior changes; pure styling.
This commit is contained in:
@@ -16,7 +16,7 @@
|
||||
|
||||
/* Semantic mode-switching colors. These are redefined inside `.dark`
|
||||
so utilities that reference them auto-adapt without a `dark:` variant. */
|
||||
--color-border-subtle: rgb(0 0 0 / 0.05);
|
||||
--color-border-subtle: var(--neutral-300);
|
||||
--color-text-subtle: var(--neutral-500);
|
||||
--color-skeleton: var(--neutral-200);
|
||||
|
||||
@@ -336,6 +336,13 @@
|
||||
border-color: var(--color-border-subtle);
|
||||
}
|
||||
|
||||
/* Same color as border-subtle, applied via background-color — for 1px
|
||||
dividers, inline separator strips, and other hairlines that aren't
|
||||
element borders. */
|
||||
@utility bg-subtle {
|
||||
background-color: var(--color-border-subtle);
|
||||
}
|
||||
|
||||
/* Muted text color — paired with `border-subtle` naming. The previous
|
||||
name `text-secondary` collided with Tailwind v4 auto-generating a
|
||||
utility from `--color-secondary` (the shadcn near-white surface token
|
||||
|
||||
Reference in New Issue
Block a user