ENG-3479: Rename Ant cssVar prefix to fidesui and migrate consumers#8066
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
gilluminate
added a commit
that referenced
this pull request
Apr 29, 2026
gilluminate
force-pushed
the
gill/eng-3479/rename-cssvar-prefix
branch
from
2350d00 to
b4ba691
Compare
Turn on Ant's cssVar so theme tokens are emitted as CSS variables that flip with the active theme, and register the FidesUI brand palette + neutral scale as custom tokens. This lays the foundation for dark-mode-aware styling without renaming or migrating any existing --fidesui-* consumers yet (the legacy Sass :root loop stays in place; consumer migration is Phase II of ENG-3479). darkAlgorithm doesn't know about custom keys, so brand tokens that need different dark values (minos/corinth pair) are flipped explicitly in darkBrandTokens.
…ss var generation
Phase II of ENG-3479. Renames every var(--fidesui-*) reference across the
codebase to its --ant-* equivalent (built-ins like --ant-color-error /
--ant-color-bg-container, brand custom tokens like --ant-brand-terracotta /
--ant-brand-bg-minos, neutral scale --ant-neutral-{50..900}). Deletes the
Sass :root @each loop and palette.module.scss now that Ant's cssVar block
is the only emitter of these vars.
After this PR: nothing references --fidesui-*, theme-aware vars are sourced
purely from Ant's token system, and the palette.ts file is the single
source of truth feeding ant-theme/default-theme.ts.
Also fixes a long-broken hover style in privacy-requests/configure.tsx
that referenced --fidesui-complimentary-500 (a var that never existed).
gilluminate
force-pushed
the
gill/eng-3479/migrate-fidesui-vars
branch
from
3573eb2 to
c616281
Compare
gilluminate
added a commit
that referenced
this pull request
Apr 29, 2026
gilluminate
force-pushed
the
gill/eng-3479/rename-cssvar-prefix
branch
from
b4ba691 to
ddae5ae
Compare
Contributor
Author
|
/code-review |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review: PR #8066 — Rename Ant cssVar prefix to fidesui and migrate consumers
Scope: Frontend only (139 files, ~540 CSS variable references renamed from --ant-* to --fidesui-*)
Summary
The bulk rename of var(--ant-*) references to var(--fidesui-*) is clean and consistent — no missed replacements were found across the codebase. The changelog entry matches the PR scope.
The one area that warrants explicit verification is the set of CSS custom property declarations used to override Ant Design's component-scoped tokens. These are not just var() references — they are property assignments that Ant reads back internally (e.g., --{prefix}-menu-item-margin-block, --{prefix}-font-size, --{prefix}-input-hover-bg). The rename from --ant-* to --fidesui-* for these declarations is correct in principle when cssVar: { prefix: "fidesui" } is configured, since Ant should emit and read them under the same prefix. However, if any antd 5.x component still hard-codes the --ant- prefix for certain derived token reads internally, those overrides will silently become no-ops with no console error.
Key behaviors to visually confirm in the Vercel preview:
- Nav menu item margins render at 0 (no gap between sidebar items in expanded state)
- Flyout menu item margins in the collapsed sidebar popout are correct
- Form help/extra text (
.ant-form-item-explain,.ant-form-item-extra) renders atfont-size-sm, not the default body size - Dark sidebar menu item hover background shows
neutral-800, not the Ant default dark hover color - Read-only inputs visually match disabled inputs (gray background, non-interactive border)
The PR description's DevTools verification step (getPropertyValue('--ant-color-primary') returning empty) confirms token emission works, but doesn't cover these component-internal token read-back scenarios.
Inline Comments
- NavMenu.module.scss:143-146 — Menu margin token declarations; verify sidebar item spacing in preview
- NavMenu.module.scss:214-215 — Same concern for flyout block
- global.scss:48 — Form item font-size token override; verify help/extra text size
- global.scss:73 — Dark menu hover background token; verify dark sidebar hover state
- global.scss:108-121 — Read-only input token overrides (largest cluster); verify read-only input styling
- SeverityGauge/constants.ts:20-22 — Pre-existing:
low→color-error,high→color-success; confirm domain semantics are intentional
🔬 Codegraph: unavailable
💡 Write /code-review in a comment to re-run this review.
gilluminate
force-pushed
the
gill/eng-3479/migrate-fidesui-vars
branch
from
c616281 to
bd3d946
Compare
…s outside Ant components Ant scopes its cssVar block to a generated class that it only auto-applies to descendants of Ant components. With the Sass :root loop deleted, that left SCSS modules styling plain divs (NavMenu, ActivityTimeline, etc.) with unresolved var() references. Set theme.cssVar.key to a stable "fidesui" so Ant emits a `.fidesui` selector, then attach the class to <body> on mount (instead of wrapping children in a <div>) so the whole document inherits the vars without inserting a new flex item that would distort the consuming app's layout.
The light theme's cssVar block is scoped to `.fidesui` and applied via the
wrapper div in FidesUIProvider. Without a distinct key, the dark theme's
inner ConfigProvider would emit a second `.fidesui { ... }` block in head,
overlapping the light one and applying globally instead of staying scoped to
the dark-mode subtree.
Override the dark theme's cssVar.key so antd emits a separate `.fidesui-dark`
block, then have HomeContainer apply that class to its inner wrapper when
resolvedMode === "dark". CSS custom properties cascade inward, so vars not
overridden by the dark block still inherit from the outer `.fidesui` light
block.
gilluminate
force-pushed
the
gill/eng-3479/migrate-fidesui-vars
branch
from
bd3d946 to
a17a0de
Compare
gilluminate
added a commit
that referenced
this pull request
Apr 29, 2026
gilluminate
force-pushed
the
gill/eng-3479/rename-cssvar-prefix
branch
from
ddae5ae to
5fed17a
Compare
Phase III. Changes the cssVar prefix on the Ant ThemeConfig from the default "ant" to "fidesui", then renames every var(--ant-*) and --ant-* override across the codebase to var(--fidesui-*) / --fidesui-*. After this PR, every Ant-derived CSS variable lives under the FidesUI brand namespace — both color tokens (--fidesui-color-primary, --fidesui-brand-*, --fidesui-neutral-*) and non-color tokens (--fidesui-line-height-sm, --fidesui-font-family, --fidesui-border-radius, etc.).
gilluminate
force-pushed
the
gill/eng-3479/rename-cssvar-prefix
branch
from
5fed17a to
9160f8e
Compare
lucanovera
pushed a commit
that referenced
this pull request
May 5, 2026
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
2 participants
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.
Ticket ENG-3479
Description Of Changes
Phase III, the final phase of ENG-3479. After Phase II moved every consumer onto Ant's
--ant-*cssVar names and deleted the Sass:rootloop, this PR completes the migration by renaming the Ant cssVar prefix from the defaultanttofidesui, then moving everyvar(--ant-*)reference (~140 files, ~540 refs including non-color vars like--ant-line-height-sm,--ant-font-family,--ant-border-radius, etc.) over tovar(--fidesui-*).After this PR, every Ant-derived CSS variable lives under the FidesUI brand namespace:
--fidesui-color-primary,--fidesui-color-error,--fidesui-brand-terracotta,--fidesui-brand-bg-minos,--fidesui-neutral-{50..900}, etc.--fidesui-line-height-sm,--fidesui-font-family,--fidesui-border-radius,--fidesui-padding-*,--fidesui-table-*, etc.The cssVar block selector also flips from
.fidesuito whatever Ant emits with the new prefix; the wrapper class onFidesUIProviderand the dark scope inHomeContainerare kept (stillfidesuiandfidesui-dark— those are antd'scssVar.keyvalues, independent of the var prefix).Code Changes
clients/fidesui/src/ant-theme/default-theme.ts— flipcssVar: { key: "fidesui" }tocssVar: { prefix: "fidesui", key: "fidesui" }. Tweak the styling-priority docstring to mention that palette colors flow through the token system.clients/fidesui/src/FidesUIProvider.tsx— comment update to reflect the new var prefix..tsx/.ts/.scss/.module.scss/.module.cssfiles acrossclients/admin-ui,clients/fidesui, andclients/privacy-center— bulk replace--ant-→--fidesui-. CSS class selectors (.ant-table,class="ant-form-item", etc.) stay untouched because they don't share the--ant-prefix.Steps to Confirm
<style>cssVar block selector is now.fidesuiand contents start with--fidesui-blue:#1677FF;…--fidesui-color-primary:#2b2e35;….getComputedStyle(<any element under .fidesui>).getPropertyValue('--fidesui-line-height-sm')returns1.6666….getComputedStyle(<any element>).getPropertyValue('--ant-color-primary')returns an empty string — no more--ant-*vars.main.alphaDarkMode); the.fidesui-darkblock now contains--fidesui-*vars too, and dark values still flip correctly viadarkAlgorithm.Pre-Merge Checklist
CHANGELOG.mdupdatedmaindowngrade()migration is correct and works