Apply & Reconcile Design System Styles

[kevinfiol]

This is a continuation of #9023

FRONTEND PULL REQUEST

Related Issue

https://github.com/CDCgov/prime-simplereport/issues/9098

Changes Proposed

• DIBBS design system styles have been isolated to scss/base/_design-system.scss
• Semantic color tokens for USWDS have been isolated to scss/settings/_uswds-tokens.scss. These follow the same naming conventions as the token names from https://designsystem.digital.gov/design-tokens/color/system-tokens/
• Some deprecated styles have been removed from _prime-styles.scss to maintain compatibility with the design system
• Many component styles have been updated to use semantic color tokens instead of hex values (#e8f5ff -> $blue-5v)

Additional Information

• USAGovBanner needed to be updated to align with USWDS styles. It was converted to a function component along the way.

Testing

• The app is currently deployed to dev2. It can also be run locally. Please review and check out issues identified by Sarah in this google doc: https://docs.google.com/document/d/1FeFMcLIF-AgnputWi4g0uFKUtOM0KteSqVEfKM-nMmM/edit?tab=t.0#heading=h.3a0l3e30n5cr

Screenshots / Demos

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[mpbrown]

Is there a release plan or timeline on when we plan to actually go live with these changes in production? Asking because the original spike ticket seemed unclear on this. Should we be updating the static site at the same time? Digital assets like SR email templates?

[kevinfiol]

Is there a release plan or timeline on when we plan to actually go live with these changes in production? Asking because the original spike ticket seemed unclear on this. Should we be updating the static site at the same time? Digital assets like SR email templates?

I believe we wanted to wait until @KeepAustinWired is back from PTO to discuss the rollout, but the actual work here is ready for review by eng/design.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[changecourse]

Design Review

Figma Design System available here.

Typography

• [ ] Only the H1 should be using Merriweather; all other sizes should be using Public Sans. Additional typography guidelines here if needed
• [ ] Typescale overrides from "_utility-builder" are causing our H1-6 to be smaller than expected; H1 for instance should be 2rem (32px) but is currently computing at 1.34rem/21.44px

Color

• [ ] We may wish to do a broader analysis, but colors should generally align (aside from state colors) to these three sets of shades within our core palette For instance, most header and paragraph text should be Gray Cool 90

Buttons

• [ ] Our buttons should follow the following approach for primary, secondary, and tertiary use cases, utilizing Violet Warm 60 and Blue Cool 50 where appropriate.
• [ ] This is true for links as well, which should be Blue Cool 50, bold, and no underline

(Potentially) Out of Scope Design System Changes

• [ ] Misc icons throughout adopting a nested set of original color definitions (such as the trashcan icon in Org management adopting the original USWDS Primary Blue value)
• [ ] Table styles (such as border colors) map to our updated approach
• [ ] Updating the profile dropdown to reflect appropriate color and link styles
• [ ] Replacing logo with new approach [on hold]
• [ ] Additional, component specific guidance and alignment to the DIBBs design system for things like Search fields, Dropdowns, and other inputs throughout
• [ ] Doing an icon audit and decoupling our use of scattered approaches across multiple libraries/weights/styles into a more singular approach
• [ ] Updating status alerts and overlays/modals to be universally consistent in terms of spacing and placement of close X's

@kevinfiol I also noticed that you do not currently have dev mode access in Figma, which would allow you to inspect CSS properties for each element; let me know if you would like me to add you.