Change Details

Currently, each time that the text style of a component (e.g. placeholder) or a typographic style of an application's interface (e.g h3) need to be specified, several individual typography tokens need to be defined again. There's no way to store and reuse the system's typographic styles in a way that would reduce time and ensure consistency. **ACs**: - The need to specify styles for components' text repeatedly is removed (e.g. as it was already done with the Label element) - System implementers can applying styles to text in the application in a simple way that ensures consistency. Note: Inspired by [[ https://docs.google.com/document/d/1bS34ARSi51zIORmMRp06VS9HYmi98SyHcqV8ecOQHrs/edit?ts=5f2bfa8b#bookmark=id.u44zf7iw0hja | recent conversations ]] and as seen in [[ https://designsystem.digital.gov/design-tokens/typesetting/overview/ | other design systems ]], it might be worth exploring the possibility of combining the current multiple typography tokens into reusable mixins to style component text.

Currently, several individual typography tokens have to be specified and used each time a text style needs to be applied to a component (e.g. placeholder) or to a piece of copy in an application's interface (e.g. h3). There's no way to store and reuse the system's typographic styles (i.e. that combination of tokens) in a way that would eliminate the need to specify the same style repeatedly, reduce time and ensure consistency. Map of typographic styles & component text styles: | **Style** | **Consuming components and/or intent** | **Link to specs** | h1 | Main heading | h2 | Secondary headings | h3 | Tertiary (section) headings | h4| Quaternary headings. Used to style titles within components (e.g. Dialog) | h5| Quinary headings. Used to style titles within components (e.g. Table) | h6| Heading with the lowest hierarchical level | Body| Button text, Dropdown text, Paragraph text | Body S| Smaller body size. Popover text. | Label* | Checkbox, Radio button, Dropdown, Input and input variants (DateInput, ExtendedNumberInput), OptionsMenu | Link* | Default style of links | Placeholder | Input and all input variants | UI text | Style of text input of all input variants, table | UI text - bold| Button text, Dropdown text | Description| Style of complementary paragraphs. All components with labels might also include an optional description. | Small text| Smallest UI text. Used to style cells’ subtext in the Table component *Already exist as reusable styles (currently, mixins) **ACs**: - The need to specify styles for components' text repeatedly is removed (e.g. as it was already done with the Label element). Designers only need to provide the name of the style in the specs - System implementers can applying styles to text in the application in a simple way that ensures consistency. Note: Inspired by [[ https://docs.google.com/document/d/1bS34ARSi51zIORmMRp06VS9HYmi98SyHcqV8ecOQHrs/edit?ts=5f2bfa8b#bookmark=id.u44zf7iw0hja | recent conversations ]] and as seen in [[ https://designsystem.digital.gov/design-tokens/typesetting/overview/ | other design systems ]], it might be worth exploring the possibility of combining the current multiple typography tokens into reusable mixins to style component text.

Currently, each time that the text style of a componentseveral individual typography tokens have to be specified and used each time a text style needs to be applied to a component (e.g. placeholder) or to a piece of copy in an application's interface (e.g. h3). placeholder) or a typographic style of an application's interface (e.g h3) need to be specified,There's no way to store and reuse the system's typographic styles (i.e. several individual typography tokensthat combination of tokens) in a way that would eliminate the need to be defined again.specify the same style repeatedly, There's no way to store and reuse the system's typographic styles in a way that would reduce time and ensure consistency. Map of typographic styles & component text styles: | **Style** | **Consuming components and/or intent** | **Link to specs** | h1 | Main heading | h2 | Secondary headings | h3 | Tertiary (section) headings | h4| Quaternary headings. Used to style titles within components (e.g. Dialog) | h5| Quinary headings. Used to style titles within components (e.g. Table) | h6| Heading with the lowest hierarchical level | Body| Button text, Dropdown text, Paragraph text | Body S| Smaller body size. Popover text. | Label* | Checkbox, Radio button, Dropdown, Input and input variants (DateInput, ExtendedNumberInput), OptionsMenu | Link* | Default style of links | Placeholder | Input and all input variants | UI text | Style of text input of all input variants, table | UI text - bold| Button text, Dropdown text | Description| Style of complementary paragraphs. All components with labels might also include an optional description. | Small text| Smallest UI text. Used to style cells’ subtext in the Table component *Already exist as reusable styles (currently, mixins) **ACs**: - The need to specify styles for components' text repeatedly is removed (e.g. as it was already done with the Label element). Designers only need to provide the name of the style in the specs - System implementers can applying styles to text in the application in a simple way that ensures consistency. Note: Inspired by [[ https://docs.google.com/document/d/1bS34ARSi51zIORmMRp06VS9HYmi98SyHcqV8ecOQHrs/edit?ts=5f2bfa8b#bookmark=id.u44zf7iw0hja | recent conversations ]] and as seen in [[ https://designsystem.digital.gov/design-tokens/typesetting/overview/ | other design systems ]], it might be worth exploring the possibility of combining the current multiple typography tokens into reusable mixins to style component text.