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:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-09 17:18:56 +02:00
1 parent 788c8ad335
commit 569300eaca
4 files changed
+46 -10

No files matched your search

@@ -206,7 +206,11 @@ function FeedbackCategoryBadge({
> = {
BUG: {
label: t("admin.feedback.categoryBug"),
className: "bg-dracula-red/15 text-dracula-red border-dracula-red/30",
// Bug = something that's broken → semantic `destructive` token instead
// of raw `dracula-red`. Visually identical in dark mode (both resolve
// to #ff5555); light mode now picks up the AA-contrast `#cb3a2a`.
className:
"bg-destructive/15 text-destructive border-destructive/30",
},
FEATURE_REQUEST: {
label: t("admin.feedback.categoryFeature"),
@@ -500,7 +504,7 @@ function FeedbackDetailDialog({
</Button>
)}
{issueUrl && (
<Badge className="border-dracula-green/30 bg-dracula-green/15 text-dracula-green ml-auto">
<Badge className="border-success/30 bg-success/15 text-success ml-auto">
{t("admin.feedback.publishedToGithub")}
</Badge>
)}