ENG-3410: Drop Sass :export, create TS palette, enable Turbopack

[gilluminate]

Ticket ENG-3410

Description Of Changes

Completes the palette migration by removing the Sass :export block from palette.module.scss (which required webpack's CSS modules interop) and replacing it with a plain TypeScript module. This unblocks removing the --webpack flags from all Next.js scripts, enabling Turbopack builds (~31s vs ~1m44s).

Also fixes a few issues discovered during the migration:

• ToastLink.module.scss referenced a nonexistent --fidesui-font-size-md CSS var
• Tailwind config hardcoded the neutral scale instead of referencing CSS vars
• CustomTooltip.module.scss still used Sass map.get instead of CSS vars

Follow-up work to migrate all CSS variable generation into Ant Design's token system (eliminating the Sass/TS duplication) is tracked in ENG-3479.

Code Changes

• Created clients/fidesui/src/palette/palette.ts with all hex values as a typed TS object
• Updated default-theme.ts, dark-theme.ts, FidesUITheme.tsx, palette.stories.tsx to import from the TS module
• Removed :export block from palette.module.scss (Sass $colors map stays for CSS var generation in global.scss)
• Removed --webpack flags from all admin-ui scripts in package.json
• Fixed ToastLink.module.scss to use var(--ant-font-size) instead of nonexistent var(--fidesui-font-size-md)
• Pointed Tailwind neutral scale at CSS vars instead of hardcoded hex values
• Migrated CustomTooltip.module.scss from Sass map.get to CSS var

Steps to Confirm

1. cd clients && npm run build passes (now uses Turbopack)
2. cd clients/admin-ui && npm run dev starts and colors render correctly
3. No visual regressions in admin UI (spot-check a few pages)
4. Storybook palette story still renders: cd clients/fidesui && npm run storybook

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Apr 20, 2026 10:12pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Apr 20, 2026 10:12pm

[github-actions]

Dependency Review

✅ No vulnerabilities found.

Snapshot Warnings

⚠️: No snapshots were found for the head SHA 06aa6d9.

Ensure that dependencies are being submitted on PR branches and consider enabling retry-on-snapshot-warnings. See the documentation for more information and troubleshooting advice.

Scanned Files

None

[github-actions]

Title	Lines	Statements	Branches	Functions
admin-ui		6.29% (2771/44007)	5.5% (1376/25009)	4.41% (575/13024)
fides-js		78.98% (1962/2484)	65.55% (1214/1852)	72.57% (336/463)
privacy-center		85.97% (331/385)	81.36% (179/220)	78.87% (56/71)

[claude]

Code Review: ENG-3410 — Drop Sass :export, create TS palette, enable Turbopack

This is a clean, focused infrastructure migration. The goal is sound and the implementation is mostly correct. A few things worth calling out:

Notable Finding: Runtime Guard Removed in CustomTag.tsx

The old brandColor logic included a runtime key-existence check (FIDESUI_BG_${color.toUpperCase()} in palette) that would fall through to Ant's native color system for unknown values. The new code unconditionally generates a CSS var string for any string color prop.

This is safe under TypeScript because color is typed as BrandColor (an exhaustive union of CUSTOM_TAG_COLOR values), and all of those enum members have corresponding --fidesui-bg-* CSS variables in global.scss. However, it's a silent removal of a runtime safety net — any JS caller passing an arbitrary string (via an as BrandColor cast) will now get a silently broken background. A brief comment documenting the reliance on the BrandColor type would help (see inline comment).

Minor Issues

• FIDESUI_NEUTRAL_75 gap in Tailwind: palette.ts defines FIDESUI_NEUTRAL_75 and global.scss generates --fidesui-neutral-75, but tailwind.config.js maps only neutral-1 through neutral-10 (50–900), skipping 75. This means bg-neutral-75 won't work in Tailwind utility classes. Pre-existing gap, but more visible after this change.

• Sync comment in palette.module.scss should mention tailwind.config.js as a third location that needs to stay in sync, not just palette.ts.

• palette.ts JSDoc doesn't document the key-naming convention (SCREAMING_SNAKE_CASE ↔ kebab CSS var with fidesui- prefix). Easy win for future contributors adding colors.

Positive Signal

• Removing the Sass :export block is the correct architectural direction — it was a webpack-specific hack that blocked Turbopack adoption.
• CSS variable migration in CustomTag.module.scss and CustomTooltip.module.scss is clean and idiomatic.
• ToastLink.module.scss: switching from var(--fidesui-font-size-md) (undefined) to var(--ant-font-size) is a correct fix.
• The palette.ts as const assertion correctly infers literal types rather than string.
• The ENG-3479 sync comment is honest and appropriately scoped.
• Removing the --webpack flags and their explanation comment is satisfying to see.

🔬 Codegraph: connected (46845 nodes)

---

💡 Write /code-review in a comment to re-run this review.

[lucanovera]

Nice work! The build is much faster now. I've followed the steps and found no visual regressions.
Unfortunately, Storybook looks broken when I switch to the branch:

[gilluminate]

@lucanovera fixed storybook. It just had a "legacy" config option that was no longer needed.

[lucanovera]

Storybook fixed now with palette showing. Ship it!