Page MenuHomePhabricator

Typography mixins: Improve the way we handle text styles in WiKit
Open, Needs TriagePublic

Description

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:

StyleConsuming components and/or style intentLink to specs
h1Main headinglink
h2Secondary headingslink
h3Tertiary (section) headingslink
h4Quaternary headings. Used to style titles within components (e.g. Dialog)link
h5Quinary headings. Used to style titles within components (e.g. Table)link
h6Heading with the lowest hierarchical levellink
BodyParagraph text. Style of dialog content, text area input text.link
Body SSmaller body size. Popover text.link
Label*Checkbox, Radio button, Dropdown, Input and input variants (DateInput, ExtendedNumberInput), OptionsMenu.link
Link*Default style of links.link
PlaceholderInput and all input variants.link
DescriptionStyle of complementary paragraphs. All components that include labels (e.g. inputs, dropdown) might also include an optional description.link

*Already exist as reusable styles (currently, mixins)

ACs:

  • The system provides implementers with pre-made typographic styles that can be easily applied to text in components or in application pages.

Note: Inspired by recent conversations and as seen in other design systems, it might be worth exploring the possibility of combining the current multiple typography tokens into reusable mixins to style text.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Prio Notes:

  • This task is a result of creating mixins to style the label element accompanying form controls.
  • The question to be explored is whether to create also reusable css rule sets to style other parts of text inside components.
  • This might be a task for the tokens library, to examine whether style dictionary also allows us to export css rule sets (in Sass, Less, possibly json) in addition to variables.
  • If this is poddible we would want to be able to create mixin "token sets" for easier reuse in implementing tokens.
ItamarWMDE renamed this task from Create typography mixins to Tokens: Investigate creating typography mixins.Nov 2 2020, 12:03 PM
ItamarWMDE moved this task from Incoming to Prioritized on the Wikidata Design System board.
Sarai-WMDE renamed this task from Tokens: Investigate creating typography mixins to Tokens: Investigate how to create typography mixins.Feb 15 2021, 12:54 PM
This comment was removed by Sarai-WMDE.

DS consulting devs – Grooming notes:

If the scope of this task is the DS (creating typographic mixins to be shared among components), then its priority should be low, since text styles mixins can be created within hikes when needed.

If the scope includes applications (allowing implementers to use mixins to style text), then the priority might be higher.

Sarai-WMDE renamed this task from Tokens: Investigate how to create typography mixins to Improve the way we handle typographic styles.Jun 1 2021, 8:46 AM
Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE renamed this task from Improve the way we handle typographic styles to Typography mixins: Improve the way we handle text styles in WiKit.Feb 10 2022, 3:02 PM