bvandeusen/minstrel
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 52 Wiki Activity

fix(web): text on a tint of its own hue uses the house -fg tokens (#3150)
release / web (push) Successful in 1m22s
Details
release / govulncheck (push) Successful in 38s
Details
release / go (push) Successful in 1m48s
Details
release / integration (push) Successful in 5m1s
Details
release / android (push) Successful in 5m41s
Details
release / Build signed APK (releases and dev) (push) Successful in 5m11s
Details
release / Attach APK to the Release (tag releases only) (push) Skipped
Details
release / Build + push container image (push) Successful in 1m17s
Details
release / Verify release artifacts (tag releases only) (push) Skipped
Details

Browse Source 
A hue painted as text on a color-mix tint of itself sits close to the
surface under it. On Minstrel's surfaces the raw accent on its 15% tint
measures 1.97:1 at worst (dark mode, hover surface), against AA's 4.5.

- tokens.json gains colors.fg: the five FabledSword -fg formulas (accent
  45%, success 45%, warning, error and info 50%), each mixed toward
  parchment so one declaration serves both modes. Success is Minstrel's
  moss. tokens-to-css emits them in :root.
- Tailwind exposes them as text-accent-fg, text-warning-fg, text-error-fg
  and text-info-fg.
- 23 sites swapped: 14 Tailwind class strings (PlayerBar and the admin
  count pills) and 9 CSS rules (StatusPill's four tones and five accent
  chips). Worst case after: accent-fg 5.03, error-fg 4.75, warning-fg
  4.92, success-fg 4.85.
- scripts/check-tint-contrast.js finds the pair in either spelling. Its
  test scans src in the web Vitest lane and fails on any new site, with
  fixture cases showing it can fail.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bvandeusen
2026-10-07 22:51:52 -04:00
co-authored by Claude Opus 5.5
parent c17f4273c6
commit fdee77eaec
18 changed files with 211 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/DiscoverResultCard.svelte
+1 -1
View File
@@ -169,7 +169,7 @@
font-size: 11px;
line-height: 14px;
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
color: var(--fs-accent);
color: var(--fs-accent-fg);
}
/* Muted rather than accented: a parked card should recede, not compete
with the live suggestions around it. Same geometry as .kept-pill so the
web/src/lib/components/PlayerBar.svelte
+6 -6
View File
@@ -184,7 +184,7 @@
aria-pressed={player.shuffle}
onclick={toggleShuffle}
class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.shuffle
? 'bg-accent-tint text-accent'
? 'bg-accent-tint text-accent-fg'
: 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
>
<Shuffle size={16} strokeWidth={1.5} />
@@ -194,7 +194,7 @@
aria-label={repeatLabel}
onclick={cycleRepeat}
class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.repeat !== 'off'
? 'bg-accent-tint text-accent'
? 'bg-accent-tint text-accent-fg'
: 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
>
{#if player.repeat === 'one'}
@@ -209,7 +209,7 @@
aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'}
aria-pressed={player.queueDrawerOpen}
class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen
? 'bg-accent-tint text-accent'
? 'bg-accent-tint text-accent-fg'
: 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
>
<ListMusic size={16} strokeWidth={1.5} />
@@ -392,7 +392,7 @@
aria-pressed={player.shuffle}
onclick={toggleShuffle}
class="flex h-9 w-9 items-center justify-center rounded-full transition-colors {player.shuffle
? 'bg-accent-tint text-accent'
? 'bg-accent-tint text-accent-fg'
: 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
>
<Shuffle size={18} strokeWidth={1.5} />
@@ -402,7 +402,7 @@
aria-label={repeatLabel}
onclick={cycleRepeat}
class="flex h-9 w-9 items-center justify-center rounded-full transition-colors {player.repeat !== 'off'
? 'bg-accent-tint text-accent'
? 'bg-accent-tint text-accent-fg'
: 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
>
{#if player.repeat === 'one'}
@@ -417,7 +417,7 @@
aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'}
aria-pressed={player.queueDrawerOpen}
class="flex h-9 w-9 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen
? 'bg-accent-tint text-accent'
? 'bg-accent-tint text-accent-fg'
: 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
>
<ListMusic size={18} strokeWidth={1.5} />
web/src/lib/components/StatusPill.svelte
+4 -4
View File
@@ -37,18 +37,18 @@
}
.pill[data-tone='warning'] {
background: color-mix(in srgb, var(--fs-warning) 15%, transparent);
color: var(--fs-warning);
color: var(--fs-warning-fg);
}
.pill[data-tone='info'] {
background: color-mix(in srgb, var(--fs-info) 15%, transparent);
color: var(--fs-info);
color: var(--fs-info-fg);
}
.pill[data-tone='success'] {
background: color-mix(in srgb, var(--fs-moss) 15%, transparent);
color: var(--fs-moss);
color: var(--fs-success-fg);
}
.pill[data-tone='error'] {
background: color-mix(in srgb, var(--fs-error) 15%, transparent);
color: var(--fs-error);
color: var(--fs-error-fg);
}
</style>
web/src/lib/styles/tokens.generated.css
+5
View File
@@ -15,6 +15,11 @@
--fs-info: #3D5A6E;
--fs-accent: #4A6B5C;
--fs-on-action: #E8E4D8;
--fs-accent-fg: color-mix(in srgb, var(--fs-accent) 45%, var(--fs-parchment));
--fs-success-fg: color-mix(in srgb, var(--fs-moss) 45%, var(--fs-parchment));
--fs-warning-fg: color-mix(in srgb, var(--fs-warning) 50%, var(--fs-parchment));
--fs-error-fg: color-mix(in srgb, var(--fs-error) 50%, var(--fs-parchment));
--fs-info-fg: color-mix(in srgb, var(--fs-info) 50%, var(--fs-parchment));
--fs-radius-sm: 4px;
--fs-radius-md: 8px;
--fs-radius-lg: 12px;
web/src/lib/styles/tokens.json
+7
View File
@@ -27,6 +27,13 @@
"info": "#3D5A6E",
"accent": "#4A6B5C",
"on-action": "#E8E4D8"
},
"fg": {
"accent-fg": "color-mix(in srgb, var(--fs-accent) 45%, var(--fs-parchment))",
"success-fg": "color-mix(in srgb, var(--fs-moss) 45%, var(--fs-parchment))",
"warning-fg": "color-mix(in srgb, var(--fs-warning) 50%, var(--fs-parchment))",
"error-fg": "color-mix(in srgb, var(--fs-error) 50%, var(--fs-parchment))",
"info-fg": "color-mix(in srgb, var(--fs-info) 50%, var(--fs-parchment))"
}
},
"radii": { "sm": "4px", "md": "8px", "lg": "12px", "xl": "16px" },
web/src/routes/admin/duplicates/+page.svelte
+2 -2
View File
@@ -138,7 +138,7 @@
<h2 class="font-display text-2xl font-medium text-text-primary">Duplicates</h2>
{#if total > 0}
<span
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
data-testid="duplicates-count-pill"
>
{total}
@@ -302,7 +302,7 @@
<!-- The proposed copy to keep, with the rule that chose it.
A default the merge will let the operator override. -->
<span
class="shrink-0 rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
class="shrink-0 rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
data-testid="survivor-badge"
title="Proposed to keep: {group.survivor_reason}"
>
web/src/routes/admin/missing-files/+page.svelte
+1 -1
View File
@@ -53,7 +53,7 @@
<h2 class="font-display text-2xl font-medium text-text-primary">Missing files</h2>
{#if total > 0}
<span
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
data-testid="missing-count-pill"
>
{total}
web/src/routes/admin/playback-errors/+page.svelte
+2 -2
View File
@@ -167,7 +167,7 @@
</p>
</div>
{#if !query.isPending && !query.isError && !resolved}
<span class="rounded-full bg-accent/15 px-3 py-1 text-sm text-accent">
<span class="rounded-full bg-accent/15 px-3 py-1 text-sm text-accent-fg">
{rows.length} unresolved
</span>
{/if}
@@ -220,7 +220,7 @@
{kindLabel(r.kind)}
</span>
{#if resolved && r.resolution}
<span class="rounded bg-accent/15 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-accent">
<span class="rounded bg-accent/15 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-accent-fg">
{resolutionLabel(r.resolution)}
</span>
{/if}
web/src/routes/admin/quarantine/+page.svelte
+2 -2
View File
@@ -150,7 +150,7 @@
<h2 class="font-display text-2xl font-medium text-text-primary">Quarantine</h2>
{#if totalReports > 0}
<span
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
data-testid="report-count-pill"
>
{totalReports}
@@ -392,6 +392,6 @@
font-size: 11px;
line-height: 14px;
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
color: var(--fs-accent);
color: var(--fs-accent-fg);
}
</style>
web/src/routes/admin/requests/+page.svelte
+2 -2
View File
@@ -183,7 +183,7 @@
{tab.label}
{#if isActive}
<span
class="ml-1.5 inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
class="ml-1.5 inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
data-testid="active-tab-count"
>
{rows.length}
@@ -377,7 +377,7 @@
font-size: 11px;
line-height: 14px;
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
color: var(--fs-accent);
color: var(--fs-accent-fg);
text-transform: capitalize;
}
</style>
web/src/routes/admin/users/+page.svelte
+1 -1
View File
@@ -274,7 +274,7 @@
<span class="text-base font-medium text-text-primary">{u.username}</span>
{#if u.is_admin}
<span
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
data-testid="admin-badge"
>admin</span>
{/if}
web/src/routes/library/hidden/+page.svelte
+1 -1
View File
@@ -100,6 +100,6 @@
font-size: 11px;
line-height: 14px;
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
color: var(--fs-accent);
color: var(--fs-accent-fg);
}
</style>
web/src/routes/requests/+page.svelte
+1 -1
View File
@@ -160,7 +160,7 @@
font-size: 11px;
line-height: 14px;
background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
color: var(--fs-accent);
color: var(--fs-accent-fg);
text-transform: capitalize;
}
</style>