This task covers adding new font modes to Codex. Other tasks cover testing and documentation of these modes.
Lookup table before and with font modes
| Design token Less var | OLD: current | NEW: default (medium) | small | large | x-large |
|---|---|---|---|---|---|
| @font-size-x-small | 0.75rem | 0.75rem | 0.625rem | 0.875rem | 1rem |
| @font-size-small | 0.875rem | 0.875rem | 0.75rem | 1rem | 1.125rem |
| @font-size-medium | 1rem | 1rem | 0.875rem | 1.125rem | 1.25rem |
| @font-size-large | 1.125rem | 1.125rem | 1rem | 1.25rem | 1.375rem |
| @font-size-x-large | 1.25rem | 1.25rem | 1.125rem | 1.375rem | 1.5rem |
| @font-size-xx-large | 1.5rem | 1.5rem | 1.375rem | 1.625rem | 1.75rem |
| @font-size-xxx-large | 1.75rem | 1.75rem | 1.625rem | 1.875rem | 2rem |
| @line-height-xxx-small | 1.25 | 1.25rem | 1.125rem | 1.375rem | 1.625rem |
| @line-height-xx-small | 1.375 | 1.375rem | 1.25rem | 1.625rem | 1.75rem |
| @line-height-x-small | none | 1.4285714rem | 1.125rem | 1.625rem | 1.75rem |
| @line-height-small | 1.5714285 | 1.5714285rem | 1.25rem | 1.75rem | 1.875rem |
| @line-height-medium | 1.6 | 1.625rem | 1.375rem | 1.75rem | 1.875rem |
| @line-height-large | none | 1.75rem | 1.625rem | 1.875rem | 2rem |
| @line-height-x-large | none | 1.875rem | 1.75rem | 2rem | 2.125rem |
| @line-height-xx-large | none | 2.125rem | 2rem | 2.25rem | 2.375rem |
| @line-height-xxx-large | none | 2.375rem | 2.25rem | 2.5rem | 2.625rem |
Breaking change
Since font-size, line-height, and size-icon tokens will now point to CSS custom properties, they will no longer work in Less functions or in mathematical operations without the CSS calc() function. See subtasks for mitigation of known issues.
Known issue(s)
- Checkbox and Radio height/centering is a pixel off in large and x-large - this has been discussed and we have determined that this would likely require a rebuild of these components, and that for now we will prioritize making small and default font modes look good here, which has been done.
- The small font mode features a 10px font-size equivalent with font-size-x-small: 0.625rem. This is the only occurrence of a font-size under the accessibility guidance of 12px as smallest element, but for product reasons we kept it as exception in the mode.
Acceptance criteria
Implementation
- New font modes tokens files are added to the design tokens package
- Font modes with 14px, 16px, 18px, and 20px base font sizes are are covered
- No breaking design token changes - tokens are backward-compatible and none are removed
- Typography mixins are created and made public to Codex users
- Component changes have been thoroughly reviewed at each font mode and are acceptable with no major unintended visual changes
Documentation
- Each DST engineer has reviewed the ADR and the main patch, posing questions as needed to understand the work
- Update Typography style guide page with new font scale and modes