Skip to content

feat(dash0): tonal gradients between the flat and the shiny look - #603

Merged
fclairamb merged 2 commits into
mainfrom
feat/dash0-tonal-gradients
Oct 18, 2026
Merged

fclairamb merged 2 commits into
mainfrom
feat/dash0-tonal-gradients

Conversation

@fclairamb

Copy link
Copy Markdown
Owner

The flat redesign (#582) removed every gradient and the dashboard read as dull. This brings a few back, tonal and without glow.

What changed

One gradient token

  • --primary-gradient: cyan-blue to electric blue (hue 245 to 270), never blue to violet. Same in both themes.
  • It paints the default button, the page-header tile and the progress fill, always over bg-primary-fill.
  • Hover slides it to its darker half (a background-position transition). The button does not move.
  • White text clears 4.5:1 on every stop. The resting half clears 3:1 against the page, the card and the progress track in both themes (theme-tokens.test.ts).

Status washes

  • KpiTile takes a tone (primary, ok, warning, error, neutral): a colored icon chip and a faint wash from its corner. Zero down or zero incidents stay neutral, so color only shows up where it means something.
  • The dashboard status banner is washed with its status color from the left edge, instead of a 4px left border.
  • Onboarding card: a 2px primary line on top, the gradient tile, a wash on the "next up" row.

Still out

  • No tinted shadow, no blurred blob, no hover lift, no page glow in the org app. Switches, checkboxes, badges, cards and the other button variants stay flat.

The design reference documents the new rules (Buttons & badges → Gradients, KPI tiles, status banner, color tokens).

Tests

  • Unit: token values and contrast, button/progress/page-header/KPI class contracts, cn() handling of bg-primary-gradient. 2665 pass.
  • e2e (run on a SQLite side-car): the four electric-identity-* and destructive-button-shadow specs pass. The content-area scan now allows only the primary gradient and washes that fade to transparent, with positive controls for a glow and an opaque gradient.
  • dashboard.spec.ts and empty-state-onboarding.spec.ts pass. onboarding-checklist.spec.ts "dismissing survives a full reload" failed once on SQLite: a pre-existing race (it reloads before the dismissal PUT lands), unrelated to this change, tracked separately.

🤖 Generated with Claude Code

The flat redesign (#582) removed every gradient and the dashboard read as
dull. This brings a few back, tonal and without glow.

- One gradient token, --primary-gradient: cyan-blue to electric blue,
  never violet. It paints the default button, the page-header tile and the
  progress fill. Hover slides it to its darker half. White text clears
  4.5:1 on every stop.
- KPI tiles take a tone (primary, ok, warning, error, neutral): a colored
  icon chip and a faint wash from its corner. Zero down or zero incidents
  stay neutral.
- The status banner is washed with its status color from the left edge,
  instead of a 4px left border.
- Onboarding card: a 2px primary line on top, the gradient tile, a wash on
  the "next up" row.
- Still no tinted shadow, no blurred blob, no hover lift, no page glow in
  the org app.

Unit and e2e tests and the design reference document the new rules.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@codecov

codecov Bot commented Oct 18, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.30%. Comparing base (fb0e5bf) to head (847da62).

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #603      +/-   ##
==========================================
- Coverage   83.34%   83.30%   -0.05%     
==========================================
  Files        1238     1238              
  Lines      127020   127020              
==========================================
- Hits       105868   105813      -55     
- Misses      21143    21198      +55     
  Partials        9        9              

see 14 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@fclairamb
fclairamb merged commit 741d8d7 into main Oct 18, 2026
33 checks passed
@fclairamb
fclairamb deleted the feat/dash0-tonal-gradients branch October 18, 2026 20:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant