[Feature] Add atomic font tokens #540

TimRoe · 2024-10-14T20:05:54Z

Description of Change

Added 6 new sets of tokens forming the atomic basis for fonts:

family
letterSpacing
lineHeight
paragraphSpacing
size
style

Added new token attributes:

type that refines category (e.g. type family on category font)
figma that is set to true if the token should be part of figma export
npm that is set to true if the token should be part of the NPM/dist export

Updated style-dictionary config/builds:

Added filters (added note to style-dictionary update ticket that the first 4 may potentially be able to be combined into 1 filter after the update):
- filter/font/family-npm
- filter/font/letterSpacing-npm
- filter/font/size-npm
- filter/font/lineHeight-npm
- filter/font-figma
Removed formats:
- javascript/es6/vads-colors
- typescript/es6-declarations/colors
- javascript/es6/vads-spacing
- typescript/es6-declarations/spacing
Added formats:
- javascript/es6/simple-key-value, used by colors/spacing + all new font tokens
  - Should be able to handle all simple key-value pair tokens in the future with only adding a config
- typescript/es6-declarations/simple-key-value, used by colors/spacing + all new font tokens
  - Should be able to handle all simple key-value pair tokens in the future with only adding a config
- javascript/es6/fontIndex, index within js/font folder
- typescript/es6-declarations/fontIndex, index within types/font
Updated formats:
- json/dtcg to handle new tokens
- javascript/es6/vads-module-export to be more easily modified in the future by looping through a list of files
- typescript/es6-declarations/module to be more easily modified in the future by looping through a list of files

Figma groupings were split to #495 in hopes of finding a more convenient way to handle them than opting to build the JSON stringwise like we do for other output files.

Testing Packages

0.17.2-alpha.0

Testing

Validated spacing/colors tokens still worked as expected. Validated new font tokens appear to work. Note: Bitter-Regular font family worked in web, but did not work in mobile as we don't have the font included yet (ticket #538).

One issue noted: when typing font. the global values documentation was not showing for the various token sets. It was unclear why this is the case since spacing does work and is typed as much the same it can be; additionally CMD + clicking into the set (e.g. font.family) and hovering over the typing there does show the global tooltip doc. Played with this for a bit and was unable to get it to work, but the tooltip doc values on the tokens themselves works fine so this was deemed acceptable since, if anyone is using these directly anyway vs typography tokens, they will almost certainly know which type of font tokens are needed in that line and once they have font.family. or similar the tooltip does have the doc of the token value.

Tested on iOS
Tested on Android
Tested on Web

PR Checklist

Code reviewer validation:

General
- PR is linked to ticket(s)
- PR has changelog label applied if it's to be included in the changelog
- Acceptance criteria:
  - All satisfied or
  - Documented reason for not being performed or
  - Split to separate ticket and ticket is linked by relevant AC(s)
- Above PR sections adequately filled out
- If any breaking changes, in accordance with the pre-1.0.0 versioning guidelines: a CU ticket has been created for the VA Mobile App detailing necessary adjustments with the package version that will be published by this ticket
Code
- Tests are included if appropriate (or split to separate ticket)
- New functions have proper TSDoc annotations

Publish

If changes warrant a new version per the versioning guidelines and the PR is approved and ready to merge:

Merge main into branch
Merge branch to main
Verify that Check Component Integrations workflow ran successfully
Publish new version after merging

…ng, size, and style), add font Figma output generation

…ing tokens by path

TimRoe · 2024-10-15T19:32:25Z

packages/tokens/config.js

@@ -47,7 +91,7 @@ module.exports = {
          filter: 'filter/spacing/is-spacing',
        },
        {
-          destination: 'types/theme.d.ts',
+          destination: 'types/themes.d.ts',


Renamed to match JS file/export const naming.

TimRoe · 2024-10-17T19:02:11Z

Added @jessicawoodin to the PR to validate the modified tokens match her expectations and no values ended up out of sorts.

jessicawoodin

Looks great to me!

narin

Some minor suggestions but overall looks good.

Lots of nice improvements to make the formats more generic. Wasn't aware of options which makes reusing formats way easier. Great work.

narin · 2024-10-21T16:32:18Z

packages/tokens/build.js

@@ -43,6 +43,13 @@ const stripModeReducer = (result, token) => {
  return result
 }

+/** Filter function to return tokens of category 'font', type from filter, and npm true */
+const fontFilter = (token, fontType) => {


Nit, but suggest we follow the filterX naming pattern and group with the other filters above.

narin · 2024-10-21T16:54:29Z

packages/tokens/build.js

+
+/** Filter to tokens of category 'font', type 'letterSpacing', and npm true */
+StyleDictionary.registerFilter({
+  name: 'filter/font/letterSpacing-npm',


Suggest we stick to kebab case instead of mixing camel and kebab

Updated.

Was naming it this way for the source file name, but looking at it holistically using the type name (kebab to follow the raw token name) probably makes more sense.

narin · 2024-10-21T16:54:37Z

packages/tokens/build.js

+
+/** Filter to tokens of category 'font', type 'line-height', and npm true */
+StyleDictionary.registerFilter({
+  name: 'filter/font/lineHeight-npm',


narin · 2024-10-21T17:12:59Z

packages/tokens/build.js

-    if (dictionary.allTokens?.[0].attributes?.category === 'spacing') {
+    const category = dictionary.allTokens?.[0].attributes?.category
+    // Leave spacing and font tokens sorted by source (size)
+    if (category === 'spacing' || category === 'font') {


Would it be worth adding a noSort option here as well?

Yeah, did Figma first and didn't figure out the options stuff until later. Updated.

TimRoe and others added 5 commits October 14, 2024 15:04

Add font tokens (family, letter spacing, line height, paragraph spaci…

3a69d70

…ng, size, and style), add font Figma output generation

Merge branch 'main' into feature/494-AddAtomicFontTokens

7120c39

Prototype different source format as potential method to handle group…

66da6d1

…ing tokens by path

Revert prototype format change

369ab08

JS dist for font, general reworks to share build logic

df2a705

TimRoe commented Oct 15, 2024

View reviewed changes

TimRoe and others added 2 commits October 17, 2024 11:28

Typescript config/build updates for font

3141ebe

Version bump: tokens-v0.17.2-alpha.0

92ef31b

TimRoe added the changelog label Oct 17, 2024

TimRoe marked this pull request as ready for review October 17, 2024 19:01

TimRoe requested a review from a team as a code owner October 17, 2024 19:01

TimRoe requested a review from jessicawoodin October 17, 2024 19:01

jessicawoodin approved these changes Oct 18, 2024

View reviewed changes

TimRoe requested a review from narin October 18, 2024 16:04

Merge branch 'main' into feature/494-AddAtomicFontTokens

bea3972

narin approved these changes Oct 21, 2024

View reviewed changes

TimRoe and others added 3 commits October 21, 2024 13:22

Update naming, shift figma to using noSort option

aa4fda8

Merge branch 'main' into feature/494-AddAtomicFontTokens

951b0b1

Fix comment accuracy

a4488d6

TimRoe merged commit 3b2e9a4 into main Oct 21, 2024
4 of 5 checks passed

TimRoe deleted the feature/494-AddAtomicFontTokens branch October 21, 2024 18:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature] Add atomic font tokens #540

[Feature] Add atomic font tokens #540

TimRoe commented Oct 14, 2024 •

edited

Loading

TimRoe Oct 15, 2024

TimRoe commented Oct 17, 2024

jessicawoodin left a comment

narin left a comment

narin Oct 21, 2024

TimRoe Oct 21, 2024

narin Oct 21, 2024

TimRoe Oct 21, 2024

narin Oct 21, 2024

TimRoe Oct 21, 2024

narin Oct 21, 2024

TimRoe Oct 21, 2024

[Feature] Add atomic font tokens #540

[Feature] Add atomic font tokens #540

Conversation

TimRoe commented Oct 14, 2024 • edited Loading

Description of Change

Testing Packages

Testing

PR Checklist

Publish

Choose a reason for hiding this comment

TimRoe commented Oct 17, 2024

jessicawoodin left a comment

Choose a reason for hiding this comment

narin 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

TimRoe commented Oct 14, 2024 •

edited

Loading