search

CityOfDetroit / COD-Design-System

Design system for the City of Detroit.
https://cityofdetroit.github.io/COD-Design-System/
MIT License
1 stars 3 forks source link

Update display fonts to match headers #251

Closed sreidthomas closed 3 months ago

sreidthomas commented 3 months ago

Description:

This PR introduces custom display font sizes to our _bootstrap_variables.scss file to ensure consistency with the DetroitMI style guide. The custom sizes will override the default Bootstrap heading font sizes.

Issue:

The default Bootstrap heading font sizes do not align with our design requirements. We need to define custom sizes to maintain visual consistency across our project.

Changes:

Defined a new map variable $display-font-sizes with custom display font sizes. Updated the default heading font size variables ($h1-font-size, $h2-font-size, etc.) to use values from the $display-font-sizes map.

PICTURE OF THE DISPLAY SIZES:

displaysizes

LINK TO ISSUE: https://github.com/orgs/CityOfDetroit/projects/36/views/1?pane=issue&itemId=72099163

sreidthomas commented 3 months ago

One comment on the code, otherwise this is great. Would you please test your changes by adding some headers and display font styled elements inside a component then take a screenshot to confirm they are the same size and weight?

You want to pick just any component inside the design system? And do I save the changes? @maxatdetroit

maxatdetroit commented 3 months ago

You want to pick just any component inside the design system? And do I save the changes?

Any component where the headers and display fonts are inside the shadow DOM would be an OK test. For example, the card component has the card body inside the shadow DOM so you could create a card and test that way. No, you don't need to save the changes, just make sure the behavior is right and share a screenshot on the PR description (so others can verify how you tested and for future reference).