Skip to content

v0.2.2 — Fix invisible gradient surfaces in light mode

Choose a tag to compare

@hallelx2 hallelx2 released this 07 May 03:50
· 136 commits to main since this release

Patch on top of v0.2.1.

What

The Audio Overview hero card in the Studio panel — and every other gradient-backed surface (Deep Research banner, Quiz Config banner, Studio Output completion card, Audio Overview modal header + player) — rendered as a near-invisible smudge in light mode, with the white text on top vanishing into the white canvas.

Why

Tailwind v4's arbitrary-value parser resolves `bg-[var(--ds-accent-gradient)]` to `background-color: var(--ds-accent-gradient)`. The variable holds a `linear-gradient(...)` string, which is only valid as `background-image` — so the declaration silently failed, leaving the element with no background. In dark mode the dark canvas hid it; in light mode the white canvas showed straight through.

Fix

Use Tailwind v4's type hint to force the image channel:

```diff

  • className="bg-[var(--ds-accent-gradient)] ..."
  • className="bg-[image:var(--ds-accent-gradient)] ..."
    ```

Six occurrences fixed across StudioPanel, AudioOverviewModal, StudioOutputView, StudioOutputModal, DeepResearchModal, QuizConfigModal.

Commits

```
bf77b93 fix(ui): use image type-hint on gradient bg utility — bump 0.2.2
```

Full diff: v0.2.1...v0.2.2