Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WNMGDS-2895] Update font and focus color design tokens in CMS.gov theme #3227

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
+104 −20
Open

[WNMGDS-2895] Update font and focus color design tokens in CMS.gov theme #3227

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d484ee3
synced figma tokens to github
Sep 11, 2024
27f7ac5
Revived .env.example file
Sep 12, 2024
92b9349
Manually add in font arrays
jack-ryan-nava-pbc Sep 12, 2024
f87f669
update unit test snapshots
jack-ryan-nava-pbc Sep 12, 2024
f334221
Updated snapshot for browser tests
jack-ryan-nava-pbc Sep 12, 2024
a6ed4e9
missed a storybook snapshot
jack-ryan-nava-pbc Sep 12, 2024
1dc4b8d
removed Open Sans from fallbacks
Sep 18, 2024
bb3e158
Merge branch 'main' into wnmgds-2895-design-tokens-cms-theme
jack-ryan-nava-pbc Sep 18, 2024
35d8048
Wow a lot of snap shots changed
jack-ryan-nava-pbc Sep 18, 2024
45ce5f7
Interaction test snapshot updates
jack-ryan-nava-pbc Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions packages/design-system-tokens/.env.example
View file
Open in desktop

This file was deleted.

30 changes: 20 additions & 10 deletions packages/design-system-tokens/src/tokens/Theme.cmsgov.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@
}
},
"focus-dark": {
"$value": "{color.orchid.500}",
"$value": "{color.copper.500}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -943,7 +943,7 @@
},
"family": {
"heading": {
"$value": "{font.family.open-sans}",
"$value": "{font.family.lexend}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -953,7 +953,7 @@
}
},
"body": {
"$value": "{font.family.open-sans}",
"$value": "{font.family.public-sans}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -963,7 +963,7 @@
}
},
"button": {
"$value": "{font.family.open-sans}",
"$value": "{font.family.public-sans}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -973,7 +973,7 @@
}
},
"link": {
"$value": "{font.family.open-sans}",
"$value": "{font.family.public-sans}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -986,7 +986,7 @@
"weight": {
"heading": {
"5xl": {
"$value": "{theme.font.weight.bold}",
"$value": "{theme.font.weight.semibold}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -1016,7 +1016,7 @@
}
},
"2xl": {
"$value": "{theme.font.weight.bold}",
"$value": "{theme.font.weight.semibold}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -1026,7 +1026,7 @@
}
},
"xl": {
"$value": "{theme.font.weight.bold}",
"$value": "{theme.font.weight.semibold}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -1036,7 +1036,7 @@
}
},
"lg": {
"$value": "{theme.font.weight.bold}",
"$value": "{theme.font.weight.semibold}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand All @@ -1046,7 +1046,7 @@
}
},
"md": {
"$value": "{theme.font.weight.bold}",
"$value": "{theme.font.weight.semibold}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
Expand Down Expand Up @@ -1149,6 +1149,16 @@
"codeSyntax": {}
}
}
},
"semibold": {
"$value": "{font.weight.600}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["ALL_SCOPES"],
"codeSyntax": {}
}
}
}
}
}
Expand Down
10 changes: 10 additions & 0 deletions packages/design-system-tokens/src/tokens/Theme.core.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1149,6 +1149,16 @@
"codeSyntax": {}
}
}
},
"semibold": {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just a heads up that this could cause issues. semibold has no meaning on the web.

  1. some fonts don't have a semibold/600 value
  2. as far as markup is concerned, there's no "semibold" tag to use in CMS (content management systems) - we only have normal text tags (like <p>) and <strong>

I wonder if it makes sense to abstract the idea of bold vs not-bold for future theming? Will themes have a need for nuanced weights (probably not since non-retina screens won't be able to differentiate), so maybe having a token representing font weights as "normal" or "default" and "heavy" (or whatever standin word for your bolded type) could prevent the issues presented above?

What I mean is all themes would have a "normal" and "heavy" font weight token, but the value of those tokens could differ across themes. Mgov could have its "heavy" as 700 and CMS could have its heavy as 600 without the need to give all themes all weights.

Copy link
Collaborator Author

@malloryiden malloryiden Sep 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this! Digging this idea. Could you speak more on the use cases where this would introduce issues? I think variable fonts also can solve part of this (your point 1), but perhaps we'd still run into the CMS issue.

Could this introduce other issues in a case where a theme wants to use two "heavy" weights (like both 600 and 700)?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure thing!

so first, we used to support bold, semibold and regular font weights (i think also thin at one point?) but we reduced them to the current selection to shrink our bundle size.

the variable "semibold" was recently deprecated from the DS (as of 3 weeks ago). but the value for it (600 weight) is still active in the system. you can see this on the mgov tokens

variable fonts could solve this problem, but are also large file sizes, so there's a tradeoff as far as asset downloads go. the same asset size issue exists when adding additional font weight files.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great context, thank you! (Also lol for deprecating semibold and then introducing it again now).

"$value": "{font.weight.600}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["ALL_SCOPES"],
"codeSyntax": {}
}
}
}
}
}
Expand Down
10 changes: 10 additions & 0 deletions packages/design-system-tokens/src/tokens/Theme.healthcare.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1149,6 +1149,16 @@
"codeSyntax": {}
}
}
},
"semibold": {
"$value": "{font.weight.600}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["ALL_SCOPES"],
"codeSyntax": {}
}
}
}
}
}
Expand Down
10 changes: 10 additions & 0 deletions packages/design-system-tokens/src/tokens/Theme.medicare.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1158,6 +1158,16 @@
"codeSyntax": {}
}
}
},
"semibold": {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is what i'm talking about above - the "bold" token is mapped to the 600 weight, meaning there is no true bold/700 weight font in mgov

"$value": "{font.weight.600}",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["ALL_SCOPES"],
"codeSyntax": {}
}
}
}
}
}
Expand Down