[Feature] Add composite typography tokens

[narin]

Description of Change

This PR creates a new composite.json file which contains composite tokens made up from our font family, line height, paragraph spacing, and letter spacing tokens.

• Add filter/font/composite-npm filter for font tokens of type composite
• Add typescript/es6-declarations/composite format to generate TS declarations composite tokens
  • Handles tokens with values of object type
  • Infers value types using typeof
  • Includes comment for TSdoc/IDEs
• The JS export for this is font.styles. I realize styles can be a little confusing alongside style.json which contains Bold, Italic, etc. but that file is for Figma only and not exported to NPM. Open to different names for this export.

Check npm for sample output

Testing Packages

• 0.19.1-alpha.0
• 0.19.1-alpha.1
• 0.19.1-alpha.2
• 0.19.1-alpha.3
• 0.19.1-alpha.4

Screenshots/Video

N/A

Testing

Tested by importing into components package.

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

[narin]

@jessicawoodin Could you please review composite.json to check the values for accuracy? Thanks.

[TimRoe]

Three big things:

1. A late change broke the TS output file which needs fixing
2. The tacked-on AC about adding groupings to the Figma output didn't fall into this ticket as it didn't touch the Figma output, it should be propagated to a standalone ticket to ensure we don't forget that was still desired by design/Jessica
3. I think all instances of styles and composite should be typography

Searching typography gives the following from Wikipedia:

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, letter spacing, and spaces between pairs of letters.

which is exactly what these tokens are: an amalgamation of those base font building blocks into a coherent unit. While we don't imminently have any future sets of composite tokens I'm aware of, composite seems like a general classification of tokens made from other tokens while typography are the specific tokens that these composites are and these should be named accordingly.

Beyond that, just some other minor suggestions/comments/questions.

[jessicawoodin]

Overall, this PR looks great to me. All of the values appear correct.

Narin and I re-visited the paragraph spacing tokens based on how things were going with the Text component. We decided to remove all paragraph spacing tokens, and only use spacing tokens instead. I will update Figma and the Design Tokens spreadsheet to reflect this change. In the meantime, attached is an image showing the new spacing tokens that should be used for marginBottom in the composite tokens.

[narin]

• Renamed composite/styles to typography
• Updated marginBottom (paragraph spacing) in composite tokens to use spacing tokens instead
• Fixed config files sorting

Ready for second review. @jessicawoodin if you could please take a look at the updated typography.json to double check the updated marginBottom values that'd be great.

Created separate ticket to look into combining figma export into single file: #577

[TimRoe]

Was there some further discussion I missed? If not, I think this ticket is a bit off. The font file for figma is already one file, it's just not grouped so things don't parse out into style/size/etc. in Figma as desired. This is the first I'm hearing of any desire to roll spacing/colors/font into a single file.

Had some discussion with @jessicawoodin but may have misinterpreted the desired outcome. Will clarify in stand-up.

[TimRoe]

Should these also be updated to typography?

[TimRoe]

If so, think the filter (name) would also need to be updated.

[TimRoe]

Approved with just one last optional minor comment/suggestion.