From 8eee815e9a941e57f95878c5a738122828f74dd1 Mon Sep 17 00:00:00 2001 From: Ilia Mashkov Date: Mon, 25 May 2026 10:56:51 +0300 Subject: [PATCH] refactor(styles): improve light-mode contrast across surfaces and muted text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/app/styles/app.css | 9 ++++++++- .../ui/TypographyMenu/TypographyMenu.svelte | 2 +- src/shared/ui/Button/Button.svelte | 6 ++++-- src/shared/ui/Divider/Divider.svelte | 2 +- src/shared/ui/Label/config.ts | 4 +++- src/shared/ui/Link/Link.svelte | 2 +- src/widgets/ComparisonView/ui/Search/Search.svelte | 2 +- src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte | 4 ++-- 8 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/app/styles/app.css b/src/app/styles/app.css index 9febc0a..0de879a 100644 --- a/src/app/styles/app.css +++ b/src/app/styles/app.css @@ -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 diff --git a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte index e434ec4..a4f3e47 100644 --- a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte +++ b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte @@ -168,7 +168,7 @@ $effect(() => { {#each typographySettingsStore.controls as control, i (control.id)} {#if i > 0} -
+
{/if} = { tertiary: cn( // Font override — must come after base in cn() to win via tailwind-merge 'font-secondary font-medium normal-case tracking-normal', - // Inactive state + // Inactive state — bumped in light mode for readable contrast against + // bg-surface (~7.5:1 vs. the prior ~2.7:1 with neutral-400). Dark + // unchanged because the existing tone reads well on dark-bg. 'bg-transparent', - 'text-neutral-400 dark:text-neutral-400', + 'text-neutral-600 dark:text-neutral-400', 'border border-transparent', // Hover (inactive) — semi-transparent lift, no bg-paper token 'hover:bg-paper/50 dark:hover:bg-dark-card/50', diff --git a/src/shared/ui/Divider/Divider.svelte b/src/shared/ui/Divider/Divider.svelte index 74baa67..7cdf9fa 100644 --- a/src/shared/ui/Divider/Divider.svelte +++ b/src/shared/ui/Divider/Divider.svelte @@ -25,7 +25,7 @@ let {
= { export const labelVariantConfig: Record = { default: 'text-neutral-900 dark:text-neutral-100', accent: 'text-brand', - muted: 'text-neutral-400 dark:text-neutral-500', + /* Light mode bumped from neutral-400 (~2.7:1 contrast, barely visible) + to neutral-600 (~7.5:1). Dark mode unchanged. */ + muted: 'text-neutral-600 dark:text-neutral-500', success: 'text-green-600 dark:text-green-400', warning: 'text-yellow-600 dark:text-yellow-400', error: 'text-brand', diff --git a/src/shared/ui/Link/Link.svelte b/src/shared/ui/Link/Link.svelte index 653caab..4ed5d10 100644 --- a/src/shared/ui/Link/Link.svelte +++ b/src/shared/ui/Link/Link.svelte @@ -34,7 +34,7 @@ let { -
+
-
-
+
+