Skip to content

Commit

Permalink
Fix links
Browse files Browse the repository at this point in the history
  • Loading branch information
jessicawoodin committed Dec 9, 2024
1 parent 76a503d commit ec25902
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Text is a typography component for headings, body copy, and display text.

### Body
**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/text--body) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=7101-3675&t=iL0TKvx4LGQO6STF-4)
<iframe width="620" height="200" title="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/text--body&full=1&shortcuts=false&singleStory=true" allowfullscreen></iframe>
<iframe width="620" height="400" title="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/text--body&full=1&shortcuts=false&singleStory=true" allowfullscreen></iframe>

### Display
**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/text--display) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=7101-3675&t=iL0TKvx4LGQO6STF-4)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,30 @@ Typography tokens define each property of a text style. They include font family
- The default line height is set to 1.5x the font size. For headings, the line height is set to 1.2x. Line heights follow [accessibility best practices](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/QA/QualityAssuranceProcess/Accessibility/a11y-checklist-ux-designers) and should not be decreased without consulting an accessibility specialist.

### Primitive
**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/design-tokens-typography--docs#primitive)
<iframe width="800" height="800" title="Image of design tokens in Figma" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/design/rdLIEaC9rVwX70QbIGkMvG/%F0%9F%93%90-Design-Tokens-Library---Design-System---VA-Mobile?node-id=2318-2705&t=CwihCLOelO0fGAMq-4" allowfullscreen></iframe>

### Semantic
**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/design-tokens-typography--docs#semantic)
<iframe width="800" height="1200" title="Image of design tokens in Figma" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/design/rdLIEaC9rVwX70QbIGkMvG/%F0%9F%93%90-Design-Tokens-Library---Design-System---VA-Mobile?node-id=2321-2924&t=CwihCLOelO0fGAMq-4" allowfullscreen></iframe>

## Text styles

Text styles (also known as composite tokens) combine each individual typography token into a defined style. They include styles for headings, body copy, and more. All properties are set using typography tokens, except for paragraph spacing. In the mobile app, spacing tokens are used to define paragraph spacing in a text style.

### Headings
**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/design-tokens-typography--docs#headings)
<iframe width="800" height="800" title="Image of design tokens in Figma" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/design/rdLIEaC9rVwX70QbIGkMvG/%F0%9F%93%90-Design-Tokens-Library---Design-System---VA-Mobile?node-id=2321-2925&t=CwihCLOelO0fGAMq-4" allowfullscreen></iframe>

### Body
**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/design-tokens-typography--docs#body)
<iframe width="800" height="800" title="Image of design tokens in Figma" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/design/rdLIEaC9rVwX70QbIGkMvG/%F0%9F%93%90-Design-Tokens-Library---Design-System---VA-Mobile?node-id=2321-2926&t=CwihCLOelO0fGAMq-4" allowfullscreen></iframe>

### Other
**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/design-tokens-typography--docs#other)
<iframe width="800" height="500" title="Image of design tokens in Figma" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/design/rdLIEaC9rVwX70QbIGkMvG/%F0%9F%93%90-Design-Tokens-Library---Design-System---VA-Mobile?node-id=2321-2927&t=CwihCLOelO0fGAMq-4" allowfullscreen></iframe>

## How to use typography tokens

Designers and engineers are encouraged to use typography tokens to ensure a consistent look and feel throughout the app. Multiple typography tokens are combined to create composite tokens (aka text styles). To use typography tokens and text styles in the app, we recommend a few different approaches:

- For Headings and Body copy, use the [Text component](/va-mobile-app/design/Components/Text/Text).
- For larger Display copy, use the [Text component](/va-mobile-app/design/Components/Text/Text).
- For Headings and Body copy, use the [Text component](/va-mobile-app/design/Components/Typography/Text).
- For larger Display copy, use the [Text component](/va-mobile-app/design/Components/Typography/Text).
- For smaller Navigation copy (such as the bottom tab bar), apply the Navigation text style directly to a text box.

**Coming soon**
Expand Down

0 comments on commit ec25902

Please sign in to comment.