Page MenuHomePhabricator

Implement typographic public mixin
Open, Stalled, Needs TriagePublic5 Estimated Story Points

Description

Goal

With T296998: [Epic] Define the system's typographic styles and scale resolved we've been also defining typographic combinators for font-size and line-height.

Proposal

We're adding those combinators as public Codex Less mixins

Previous work

WiKit used similar mixins.

Open questions

Nomenclature:

  • WiKit's approach was limited and could be confusing in application. Having something like
.supplementary-text {
  color: @color-base; 
  .description();
  margin: @spacing-25 0;
}

doesn't really tell what .description() contains.

.font- prefix would be somewhat misleading as we care about font-family, line-height and color in those.
.typo- is in English language slightly hilarious, but might be our best way.

Acceptance criteria for done

  • Provide all Codex Figma typography combinators in code

Event Timeline

Figma spec questions to resolve:

  • Major: Nomenclature, not t-shirt sizes for headings? Or aliases? It's an unnecessary learning curve for devs to have <h1> consume a .cdx-mixin-type( heading-x-large )
  • Major: I don't think color should be part of the mixin, it creates an unexpected outcome, when referencing mixin-type.
  • Minor: -large, -small instead of -l as everywhere else

Answering in line based on recent decisions/actions:

Figma spec questions to resolve:

  • Major: Nomenclature, not t-shirt sizes for headings? Or aliases? It's an unnecessary learning curve for devs to have <h1> consume a .cdx-mixin-type( heading-x-large )

The name of heading styles was updated from t-shirt sizing to numerals (i.e. Heading XL is now Heading 1). Both the scale documentation and the Figma styles were modified.

  • Major: I don't think color should be part of the mixin, it creates an unexpected outcome, when referencing mixin-type.

Color specifications were removed from individual styles' annotation. Instead, a "default color" was documented for the different type groups.

  • Minor: -large, -small instead of -l as everywhere else

Realizing now that we didn't reach a decision here, but happy to update the names of the body and UI text styles (from e.g., Body M to Body Medium) if needed.

Decisions from last design sync meeting:

  • We’ll rename heading styles from t-shirt sizes to numericals. (Heading XL to Heading 1)
  • We won't feature color as output when typographic mixin is called
  • We'll use long-form of t-shirt sizes for the rest

Change 927311 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] styles: Add typographic scale parametric mixin

https://gerrit.wikimedia.org/r/927311

As of today's refinement meeting we decided that this task can happen after the 1.0 release if necessary. I'm moving back into backlog accordingly.

AnneT set the point value for this task to 5.Jan 8 2024, 6:38 PM
CCiufo-WMF triaged this task as Medium priority.Jan 23 2024, 9:06 PM

@Volker_E in yesterday's sprint planning, we were wondering if it would make sense to lower the estimate and pull this task into the current sprint. The -1 on the patch seemed easily resolvable.

CCiufo-WMF changed the task status from Open to Stalled.Mar 13 2024, 5:28 PM
CCiufo-WMF removed Volker_E as the assignee of this task.
CCiufo-WMF raised the priority of this task from Medium to Needs Triage.
CCiufo-WMF moved this task from Up Next to Backlog on the Design-System-Team board.

This is blocked pending next steps from the discussions in T358038.

Note to myself: Where does styles like kbd fit in a public Codex typography mixin? See T358861 for context.