fix(ui): alias --dg-color-* to --color-* so dark mode reaches utilities#37
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
4 tasks
lukeocodes
added a commit
to deepgram/agent
that referenced
this pull request
May 11, 2026
#57) ## Summary Picks up [deepgram/ui#37](deepgram/ui#37) so the widget UMD ships with Tailwind v4 utility classes that actually follow `[data-dg-scheme="dark"]` overrides. ## Why this needs a manual PR The renovate.json on this repo sets `minimumReleaseAge: "11 days"`, so renovate would sit on `@deepgram/ui@0.1.4` until ~May 22 before proposing the bump. The 11-day soak is correct for third-party deps but the wrong shape for shipping our own fix end-to-end through the agent stack. ## The bug it unblocks downstream `@deepgram/ui` ships Tailwind v4 with `prefix(dg)`, so utility classes like `.dg:bg-card` read `var(--dg-color-card)`. The `@theme` block declares the public token as `--color-card` (Tailwind auto-pairs it to `--dg-color-card` at root), but every dark-mode override block only touched the unprefixed namespace — so in dark mode the utilities kept resolving to the light-mode `#f3f4f6` (visible as near-white mic/speaker toggles and a blown-out textarea border inside the widget). 0.1.4 aliases every `--dg-color-*` to `var(--color-*)` on `[data-dg-agent]`, so dark-mode and external theme overrides on the public `--color-*` API propagate through to the utilities. Inside this PR, the rebuilt `dist/widget.umd.js` now contains both `--dg-color-card: #f3f4f6` (the light-mode default Tailwind emits from `@theme`) **and** `--dg-color-card: var(--color-card)` scoped to `[data-dg-agent]`, so consumers in dark mode get the dark card colour through the alias. ## Test plan - [x] `bun install` — lockfile updated, no peer warnings - [x] `bun run --filter '@deepgram/agents-widget' build` — clean, UMD 390.83 KB (was 389.86 KB on CDN — alias block adds ~1 KB) - [x] `bun run --filter '@deepgram/agents-widget' test` — 29 pass / 0 fail - [x] Verified rebuilt UMD contains `--dg-color-card: var(--color-card)` alias and dark-mode override on `[data-dg-agent][data-dg-scheme="dark"]` still sets `--color-card: #222228` (so utilities resolve through the alias to the dark value) ## Unblocks - release-please picks this up → `@deepgram/agents-widget@0.1.7` - CDN deploy workflow rolls `/widgets/latest/widget.umd.js` - [deepgram-docs#777](deepgram/deepgram-docs#777) demos render correctly in dark mode (mic/speaker toggles, textarea, Aurora demo's custom token overrides) - Asana follow-up: [Ship @deepgram/agents-widget 0.1.7 with dark-mode CSS fix](https://app.asana.com/1/411927538413705/project/1210403316564421/task/1214722320021307)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Dark-mode and external theme overrides don't reach Tailwind v4 utilities because
prefix(dg)rewrites the utility-side var names. Adds an alias block so utilities resolve through the public--color-*API.The bug
With
prefix(dg)on the utilities import, Tailwind emits rules like:The
@themeblock declares the public token as--color-card, and Tailwind auto-generates a paired--dg-color-cardfrom it for the utility side. Two separate custom properties.Every dark-mode block in this file only touches the unprefixed namespace:
So in dark mode
.dg:bg-cardkeeps resolving to the light-mode#f3f4f6— visible as a near-white surface on mic-toggle, speaker-toggle, message bubbles, textarea border, etc. Outer container looks fine because it reads the unprefixed token directly in@layer base. Start button looks fine because the brand colour isn't overridden in dark mode, so light/dark resolve to the same green.Fix
One
[data-dg-agent]block aliases every prefixed theme token to its unprefixed counterpart. Anything that overrides--color-card— dark-mode block,prefers-color-schememedia,#demo-themedoverrides downstream — now propagates to--dg-color-cardthrough the cascade, and Tailwind utilities follow.Single source of truth stays on the
--color-*public API. Dark-mode override blocks stay one-namespace, no duplication.Test plan
bun run build— clean, outputstyles.cssshows the alias chain (--dg-color-card: var(--color-card)on[data-dg-agent],--color-card: #222228on the dark selector at the same element)bun run test— 13 pass / 0 failbun run typecheck— cleanUnblocks
Once
@deepgram/uiships the next patch, follow-ups land in order:@deepgram/agents-widgetbumps@deepgram/uidep, cuts a release/widgets/latest/widget.umd.jsrolls forwarddeepgram-docs#777demo styling renders correctly in dark mode (mic/speaker buttons, textarea, themed Aurora demo)