fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(ui): tone-based icon palette for app-tile, dark-mode aware

Browse Source 
Adds an iconTone API (blue, violet, red, orange, amber, emerald, cyan,
pink, green, neutral) to appTile() that derives both icon background and
color from a single hue via color-mix(). Light mode keeps the pastel-pill
look; dark mode picks subtle dark-tinted backgrounds with bright accent
icons so tiles read clearly on the dark background.

The existing iconBg/iconColor escape hatch stays for callers that need a
custom hex (admin/stats); the nine settings tiles migrate to iconTone.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-25 09:11:35 +02:00
parent c14d42f198
commit fdbf30379c
4 changed files with 46 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/css/components/app-tile.css
View File

@@ -34,9 +34,12 @@
padding: var(--app-spacing);
}
/* Tone palette — single hue per tone, bg + icon-color derived via color-mix
so dark-mode automatically produces a subtle dark-tinted bg + bright icon. */
.app-tile {
--tile-icon-bg: var(--app-tile-icon-bg);
--tile-icon-color: var(--app-tile-icon-color);
--tile-tone: hsl(220 12% 50%);
--tile-icon-bg: color-mix(in oklab, var(--tile-tone) 14%, white);
--tile-icon-color: var(--tile-tone);
--tile-count-color: var(--app-tile-count-color);
--tile-label-color: var(--app-tile-label-color);
--tile-link-color: var(--app-tile-link-color);
@@ -70,6 +73,31 @@
font-size: var(--text-lg);
}
/* Per-tone hues — pick one base color, light/dark blocks derive bg + icon. */
.app-tile[data-tone="blue"] { --tile-tone: hsl(217 91% 55%); }
.app-tile[data-tone="violet"] { --tile-tone: hsl(263 80% 58%); }
.app-tile[data-tone="red"] { --tile-tone: hsl(0 75% 55%); }
.app-tile[data-tone="orange"] { --tile-tone: hsl(20 90% 55%); }
.app-tile[data-tone="amber"] { --tile-tone: hsl(38 95% 55%); }
.app-tile[data-tone="emerald"] { --tile-tone: hsl(160 75% 40%); }
.app-tile[data-tone="cyan"] { --tile-tone: hsl(190 85% 45%); }
.app-tile[data-tone="pink"] { --tile-tone: hsl(330 80% 58%); }
.app-tile[data-tone="green"] { --tile-tone: hsl(142 70% 45%); }
.app-tile[data-tone="neutral"] { --tile-tone: hsl(220 10% 55%); }
/* Dark-mode tone derivation: subtle dark-tinted bg + brighter icon for contrast.
Mirrors the existing :root/[data-theme] split used in variables.base.css. */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) .app-tile {
--tile-icon-bg: color-mix(in oklab, var(--tile-tone) 22%, var(--app-background-color));
--tile-icon-color: color-mix(in oklab, var(--tile-tone) 80%, white);
}
}
[data-theme="dark"] .app-tile {
--tile-icon-bg: color-mix(in oklab, var(--tile-tone) 22%, var(--app-background-color));
--tile-icon-color: color-mix(in oklab, var(--tile-tone) 80%, white);
}
.app-tile-count {
position: absolute;
top: calc(var(--app-spacing) * 1);