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

Assigned To

None

Authored By

	Volker_E
	Apr 3 2023, 9:54 PM

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

Details

	Subject	Repo	Branch	Lines +/-
	styles: Add typographic scale parametric mixin	design/codex	main	+258 -1

Customize query in gerrit

Related Objects

Mentioned In: T363845: [EPIC] Typography scale and font sizing
T346259: [WtC-M2] [EPIC] Replace WiKit tokens by available Codex tokens
T338598: Update Typography guidelines in Codex Style guide
Mentioned Here: T358861: Figma content to Codex: include Keyboard Navigation in Codex
T358038: Discuss how to handle font-size tokens in different skins with different base font sizes
T296998: [Epic] Define the system's typographic styles and scale

Event Timeline

Volker_E created this task.Apr 3 2023, 9:54 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 3 2023, 9:54 PM

ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.Apr 19 2023, 9:10 PM

Volker_E added a project: CSS.May 16 2023, 9:42 PM

Volker_E updated the task description. (Show Details)May 16 2023, 10:32 PM

Volker_E updated the task description. (Show Details)May 17 2023, 2:02 AM

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:

In T333890#8878028, @Volker_E wrote:

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

gerritbot added a project: Patch-For-Review.Jun 5 2023, 11:38 PM

• Sarai-WMDE mentioned this in T338598: Update Typography guidelines in Codex Style guide.Jun 9 2023, 11:21 AM

• Sarai-WMDE mentioned this in T346259: [WtC-M2] [EPIC] Replace WiKit tokens by available Codex tokens.Sep 22 2023, 8:27 AM

egardner moved this task from Backlog to Needs Refinement on the Design-System-Team board.Sep 29 2023, 5:22 PM

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.

egardner moved this task from Needs Refinement to Backlog on the Design-System-Team board.Oct 2 2023, 6:51 PM

DTorsani-WMF subscribed.Oct 12 2023, 4:05 PM

egardner moved this task from Backlog to Needs Refinement on the Design-System-Team board.Oct 30 2023, 5:42 PM

Volker_E claimed this task.Nov 13 2023, 9:08 AM

CCiufo-WMF moved this task from Needs Refinement to 2024 Quiet Week on the Design-System-Team board.Dec 21 2023, 5:29 PM

AnneT moved this task from 2024 Quiet Week to Up Next on the Design-System-Team board.Jan 8 2024, 5:46 PM

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.

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.

CCiufo-WMF mentioned this in T363845: [EPIC] Typography scale and font sizing.Apr 30 2024, 4:17 PM

Implement typographic public mixinOpen, Stalled, Needs TriagePublic5 Estimated Story PointsActions