Design system: Modular CSS support, Color palette, Ant theme update #5453

gilluminate · 2024-11-04T16:30:02Z

Description Of Changes

Adds Modular CSS support via SASS integration with NextJS. Creates new CSS module containing and exporting our custom color palette to match Figma work. Utilizes new palette to feed values in the Ant theme.

Code Changes

Add sass npm package, which NextJS will automatically recognize and support for CSS modules
Create new palette.module.scss with values input directly from the Figma palette
Reorder Ant theme components as alphabetical
Apply new palette values to the Ant theme
Adds notes to ant theme on priority order
Convert SearchBar component to use palette and global.css overrides instead of tailwind wrangling. Set as a proof-of-concept pattern to follow in the future.

Steps to Confirm

Visit Data map report (http://localhost:3000/reporting/datamap) and take a look at the search component to make sure styling is correct.
Visit the Ant POC page (http://localhost:3000/ant-poc) and make sure the colors still look correct

Pre-Merge Checklist

All CI Pipelines Succeeded
Issue Requirements are Met
Relevant Follow-Up Issues Created
Update CHANGELOG.md

vercel · 2024-11-04T16:30:08Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 4, 2024 10:23pm

cypress · 2024-11-04T17:07:06Z

fides Run #10771

Run Properties: Passed #10771 • c31ddf2839 ℹ️: Merge aa56277b1dd08ccd33176c7a7d28f591a1a67bc8 into e5f240d537c41c8ddb429f737928...

Project	`fides`
Branch Review	`refs/pull/5453/merge`
Run status	`Passed #10771`
Run duration	`00m 37s`
Commit	`c31ddf2839 ℹ️: Merge aa56277b1dd08ccd33176c7a7d28f591a1a67bc8 into e5f240d537c41c8ddb429f737928...`
Committer	`Jason Gill`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`4`
View all changes introduced in this branch ↗︎

codecov · 2024-11-04T19:13:08Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.47%. Comparing base (e5f240d) to head (2aeddcb).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5453      +/-   ##
==========================================
+ Coverage   77.00%   85.47%   +8.46%     
==========================================
  Files         384      384              
  Lines       24116    24116              
  Branches     2624     2624              
==========================================
+ Hits        18571    20612    +2041     
+ Misses       4971     2950    -2021     
+ Partials      574      554      -20

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

lucanovera

Great work! This is organized very neatly. Having a single source of truth for colors is very important. The flexibility for having the palettes be used for ant overrides, but also exported as variables and TS too is going to be very helpful. Left a tiny question about base styles. Thanks for also updating the PC. Approved.

lucanovera · 2024-11-04T19:01:12Z

clients/admin-ui/src/theme/ant.ts

-    colorError: "#d9534f",
-    colorLink: "#2272ce",
-    colorBgBase: "#ffffff",
+    colorPrimary: palette.FIDESUI_MINOS,


Very clean using the palette for overides.

lucanovera · 2024-11-04T19:02:29Z

clients/admin-ui/src/theme/global.scss

+ * Adds the color variables from the palette to the root element
+ */
+:root {
+  @each $color, $value in $colors {


Very helpful to have every color as a css variable.

clients/admin-ui/src/theme/tailwind.css

lucanovera · 2024-11-04T19:11:17Z

clients/fidesui/src/palette/palette.module.scss

@@ -0,0 +1,85 @@
+$colors: (


With all the different libraries, utilities, etc having a single source for colors is going to be much simpler. This is great, and the added TS export of colors is just chef kiss.

clients/admin-ui/src/theme/ant.ts

gilluminate · 2024-11-04T19:38:12Z

.github/workflows/frontend_checks.yml

-      - name: Build
-        run: npm run build
-


cy:start already runs a build, so this was slowing down everything considerably building everything twice!

Nice optimization

clients/admin-ui/cypress/e2e/datamap-report.cy.ts

gilluminate · 2024-11-04T19:40:14Z

clients/admin-ui/turbo.json

@@ -1,6 +1,6 @@
 {
  "extends": ["//"],
-  "pipeline": {
+  "tasks": {


new version update made this change automatically

gilluminate · 2024-11-04T19:42:55Z

clients/package.json

-  }
+    "turbo": "^2.2.3"
+  },
+  "packageManager": "[email protected]"


turbo upgrade made all of these additions automatically

gilluminate · 2024-11-04T19:44:33Z

clients/turbo.json

@@ -1,6 +1,6 @@
 {
  "$schema": "https://turbo.build/schema.v1.json",
-  "pipeline": {
+  "tasks": {


turbo upgrade made this change automatically

jpople

Looks great! Thanks for doing this, this'll make things a lot easier moving forward.

cypress · 2024-11-04T23:16:58Z

fides Run #10772

Run Properties: Passed #10772 • e3d2fe8c03: Design system: Modular CSS support, Color palette, Ant theme update (#5453)

Project	`fides`
Branch Review	`main`
Run status	`Passed #10772`
Run duration	`00m 37s`
Commit	`e3d2fe8c03: Design system: Modular CSS support, Color palette, Ant theme update (#5453)`
Committer	`Jason Gill`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`4`
View all changes introduced in this branch ↗︎

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from df4aeec to ad77763 Compare November 4, 2024 16:51

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from ad77763 to 646a181 Compare November 4, 2024 17:26

gilluminate requested review from lucanovera and jpople November 4, 2024 17:27

vercel bot had a problem deploying to Preview November 4, 2024 17:27 Failure

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch 2 times, most recently from e951f11 to a405e1b Compare November 4, 2024 17:46

gilluminate added 4 commits November 4, 2024 10:49

initialize new color palette

2ca644e

apply palette to Ant theme

e8932d4

POC: global style overrides

8ea65c8

Update CHANGELOG.md

aa56277

vercel bot deployed to Preview November 4, 2024 17:51 View deployment

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from a405e1b to aa56277 Compare November 4, 2024 17:52

lucanovera approved these changes Nov 4, 2024

View reviewed changes

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from 2aeddcb to aa49267 Compare November 4, 2024 19:21

vercel bot deployed to Preview November 4, 2024 19:26 View deployment

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from aa49267 to 44a657f Compare November 4, 2024 19:33

gilluminate commented Nov 4, 2024

View reviewed changes

clients/admin-ui/cypress/e2e/datamap-report.cy.ts Outdated Show resolved Hide resolved

gilluminate commented Nov 4, 2024

View reviewed changes

vercel bot deployed to Preview November 4, 2024 19:41 View deployment

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from b8eb274 to ba49a77 Compare November 4, 2024 19:42

gilluminate commented Nov 4, 2024

View reviewed changes

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from ba49a77 to f7970bc Compare November 4, 2024 19:44

gilluminate commented Nov 4, 2024

View reviewed changes

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from f7970bc to ea92c00 Compare November 4, 2024 19:46

vercel bot deployed to Preview November 4, 2024 19:52 View deployment

vercel bot deployed to Preview November 4, 2024 20:49 View deployment

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from 38b6148 to 4d16645 Compare November 4, 2024 21:39

vercel bot deployed to Preview November 4, 2024 21:44 View deployment

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from f7daffc to c01a4dd Compare November 4, 2024 22:00

jpople approved these changes Nov 4, 2024

View reviewed changes

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from c01a4dd to ecacfd1 Compare November 4, 2024 22:19

vercel bot deployed to Preview November 4, 2024 22:23 View deployment

gilluminate force-pushed the gill/HJ-146/design-system-modular-css branch from ecacfd1 to aa56277 Compare November 4, 2024 22:44

gilluminate merged commit e3d2fe8 into main Nov 4, 2024
21 of 22 checks passed

gilluminate deleted the gill/HJ-146/design-system-modular-css branch November 4, 2024 23:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design system: Modular CSS support, Color palette, Ant theme update #5453

Design system: Modular CSS support, Color palette, Ant theme update #5453

gilluminate commented Nov 4, 2024 •

edited

Loading

vercel bot commented Nov 4, 2024 •

edited

Loading

cypress bot commented Nov 4, 2024 •

edited

Loading

codecov bot commented Nov 4, 2024

lucanovera left a comment

lucanovera Nov 4, 2024

lucanovera Nov 4, 2024

lucanovera Nov 4, 2024

gilluminate Nov 4, 2024

lucanovera Nov 4, 2024

gilluminate Nov 4, 2024

gilluminate Nov 4, 2024

gilluminate Nov 4, 2024

jpople left a comment

cypress bot commented Nov 4, 2024

Design system: Modular CSS support, Color palette, Ant theme update #5453

Design system: Modular CSS support, Color palette, Ant theme update #5453

Conversation

gilluminate commented Nov 4, 2024 • edited Loading

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

vercel bot commented Nov 4, 2024 • edited Loading

cypress bot commented Nov 4, 2024 • edited Loading

codecov bot commented Nov 4, 2024

Codecov Report

lucanovera left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jpople left a comment

Choose a reason for hiding this comment

cypress bot commented Nov 4, 2024

gilluminate commented Nov 4, 2024 •

edited

Loading

vercel bot commented Nov 4, 2024 •

edited

Loading

cypress bot commented Nov 4, 2024 •

edited

Loading