mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-11 22:02:16 +00:00
style(ui): use semantic tokens for mood and feedback indicators
Closes the v1.4.6 deferred polish item — feedback / mood / medication
status indicators now ask for *meaning* (success / warning / info)
instead of hard-coding `text-dracula-green` / `bg-dracula-orange/15`.
Adds three CSS aliases to `globals.css`:
--success → dracula-green (positive outcome)
--warning → dracula-orange (caution / attention)
--info → dracula-cyan (neutral informational)
Dark mode (Dracula): each alias resolves to the same hex as before, so
the visual is pixel-identical to v1.4.6 — what changes is the *intent*
of the class.
Light mode (Alucard): the raw Dracula greens and oranges fail AA
contrast on a white card. The new tokens get higher-contrast
counterparts (#14720a, #a34d14, #036a96) that match the existing
`--destructive` / `--chart-*` light-mode swap.
Migrated callers:
- `src/components/admin/feedback-inbox-section.tsx`:
- BUG category badge → `destructive` (semantic — bug *is* broken)
- "published to GitHub" badge → `success`
- `src/components/medications/medication-card.tsx`:
- in-window status → `success`
- very-overdue status → `warning`
- "late" intermediate stays on `dracula-yellow` (yellow doesn't
map to either semantic bucket — it's mid-warning)
- `src/components/settings/ai-section.tsx`:
- "ChatGPT connected" badge + success toast → `success`
- "Connection expired" badge + raw-data warning → `warning`
Charts (`src/components/charts/**`) untouched per
`feedback_charts_visual_identity.md`. Other dracula-token callsites in
settings/* (telegram, ntfy, web-push, account, about, test-connection)
are deferred to v1.5.1 — broader sweep, not in tonight's scope.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
788c8ad335
commit
569300eaca
4 files changed
+46
-10
No files matched your search
@@ -55,6 +55,20 @@
|
||||
--color-dracula-red: var(--dracula-red);
|
||||
--color-dracula-yellow: var(--dracula-yellow);
|
||||
--color-dracula-lavender: var(--dracula-lavender);
|
||||
|
||||
/*
|
||||
* Semantic feedback tokens — aliases over the Dracula palette so badges,
|
||||
* banners, and status pills can stop hard-coding `text-dracula-green` /
|
||||
* `bg-dracula-orange/15` and ask for the *meaning* instead. Each is a
|
||||
* straight alias of the existing colour at the time of introduction so
|
||||
* the visual stays pixel-identical to v1.4.6 — what changes is intent.
|
||||
* - success → dracula-green (positive outcome, e.g. published)
|
||||
* - warning → dracula-orange (caution / non-blocking attention)
|
||||
* - info → dracula-cyan (neutral informational note)
|
||||
*/
|
||||
--color-success: var(--success);
|
||||
--color-warning: var(--warning);
|
||||
--color-info: var(--info);
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -78,6 +92,16 @@
|
||||
--dracula-yellow: #f1fa8c;
|
||||
--dracula-lavender: #d6acff;
|
||||
|
||||
/*
|
||||
* Semantic feedback tokens (see @theme `--color-success` / `--color-warning`
|
||||
* / `--color-info` re-exports). Aliased over the Dracula palette so existing
|
||||
* dark-mode visuals stay identical; light mode (Alucard) below provides the
|
||||
* higher-contrast counterpart so AA contrast lands on the white card.
|
||||
*/
|
||||
--success: var(--dracula-green);
|
||||
--warning: var(--dracula-orange);
|
||||
--info: var(--dracula-cyan);
|
||||
|
||||
--radius: 0.625rem;
|
||||
}
|
||||
|
||||
@@ -135,6 +159,14 @@
|
||||
--accent: #dcdeef;
|
||||
--accent-foreground: #1f1f1f;
|
||||
--destructive: #cb3a2a;
|
||||
/*
|
||||
* Alucard light-mode overrides for the semantic tokens — straight Dracula
|
||||
* green/orange/cyan would fail AA contrast on a white card. These match the
|
||||
* darker palette already used for `--destructive`/`--chart-*` in light mode.
|
||||
*/
|
||||
--success: #14720a;
|
||||
--warning: #a34d14;
|
||||
--info: #036a96;
|
||||
--border: #cfcfde;
|
||||
--input: #cfcfde;
|
||||
--ring: #644ac9;
|
||||
|
||||
Reference in new issue
Block a user