Design Tokens: Technical discovery for typography tokens

[jessicawoodin]

Description

After Jessica completes design discovery and documentation, Narin/Tim will review the proposed plan and do any additional technical discovery for typography tokens.

Acceptance Criteria

• [x] Review Jessica's notes and questions in the Design Tokens doc
• [x] Determine how VADS has defined their typography tokens by inspecting node_modules/@department-of-veterans-affairs/css-library/dist/tokens/json/variables.json
• [x] Discuss with Jessica what units we are using for font sizes/weights and determine if we need to create tokens for these units for the font tokens to reference
• [x] Determine if which (if any) of VADS's typography tokens should be referenced/or copied into our tokens
• [x] Based on the above, look into what changes to our style-dictionary configs would be required

[narin]

VADS typography token re-use

VADS's typography tokens can be found in the css-library repo in their fonts.json file.

Based on the differences in React Native and CSS style, there are very few tokens we could share/reuse with the web. Style (normal/italic) may be the only one.

• family: we only use the custom fonts we have, so there’s no need for fallback fonts (e.g. Helvetica Neue, Helvetica, Roboto, etc)
• weight: When using custom fonts, the fontWeight style doesn’t work and we need to instead point to the *-Regular and *-Bold ttf’s which we’ve defined
• size: sizes in react native are unitless so we won’t be able to use VADS font sizes since they have the “rem” unit

While the token values may have to be different between mobile and web, we should be able to use the same template and token names to be as aligned as possible.

Units

There was a question of what unit to use for font sizes and spacing. React Native has a concept of "unitless" units, or sometimes called dp which is based on the pixel density of the screen. We are already using this somewhat to determine sizing of some of our components based on the fontScale of the device. There are ways to calculate the actual pixel size based on the PixelRatio. Example code snippet:

import { PixelRatio } from 'react-native';

const dpToPx = (dp) => PixelRatio.getPixelSizeForLayoutSize(dp);
const pxToDp = (px) => px / PixelRatio.get();

// Example usage:
const fontSizeInDp = 24; // 24dp
const fontSizeInPx = dpToPx(fontSizeInDp); // Converts 24dp to equivalent px
console.log(`Font size in px: ${fontSizeInPx}`);

There is also a library called react-native-responsive-fontsize which takes a base font size and adjusts it according to the screen size.

Given this info, I still think it may be best to define the tokens as if we are using pixels, and allow React Native to handle the font scaling based on the device's font scale setting. If the user has their fontScale set to the default (1), then 1px should appear like "1 unit" in React Native.

style-dictionary

Based on my research, I think we can use VADS's font.json format and the built in javascript/es6 format in style-dictionary to output the tokens we need in JavaScript. We shouldn't need any additional formatting.