Define the system's typographic styles on text decoration
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Volker_E
	Sep 17 2022, 2:57 AM

Description

Background/Goal

We need to define and document Codex' text-decoration styles. Text decoration styles are an important part of one of the most important components, the Link.
MediaWiki features two distinct values as default styles and also overridable as user preferences:
none and underline.
For diffing we also feature line-through.

User stories

As a designer, I need to have access to the system's typographic text decoration styles, so I'm aware of which styles I can apply, and where, when creating system compliant designs.

Figma specification sheet

Link to Figma

Acceptance criteria (or Done)

We are able to document each one of the text styles that compose the system's typographic text decoration styles

Details

Subject	Repo	Branch	Lines +/-
Update Codex from v0.2.1 to v0.2.2	mediawiki/core	master	+1 K -1 K
tokens: Use proper theme reference to `text-decoration` values & demo	design/codex	main	+13 -3
tokens: Add design-first `text-decoration` tokens	design/codex	main	+22 -0

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Duplicate		• STH	T302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
Invalid		None	T302025 Upgrade Codex to Beta version
Resolved		Volker_E	T293127 [EPIC] Design System Foundation: Design and define design tokens
Resolved		None	T314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
Resolved		bmartinezcalvo	T295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
Resolved		Volker_E	T296995 Define the system's color palette
Resolved		Volker_E	T297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
Resolved		Volker_E	T305236 Create visited red link color token
Resolved		Volker_E	T313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
Resolved		ldelench_wmf	T322833 Update Yellow 600 for warning color
Resolved		Volker_E	T324449 Add new colors used in Message component and update border colors to the darkest tone
Resolved		• EUdoh-WMF	T322960 Define `accent-color` design token
Resolved		Sarai-WMDE	T296998 [Epic] Define the system's typographic styles and scale
Resolved		DAbad	T318023 Define the system's typographic styles on text decoration
Resolved		Sarai-WMDE	T297000 Define the design system's size and spacing scale
Resolved		Catrope	T324367 Enable Codex tokens to work with different font sizes
Open		None	T326900 Vertical centering issues of text/multiline text and icons in several components
Resolved		ovasileva	T328053 Verify impact of Design Systems Team's Codex Update on Web properties
Resolved	BUG REPORT	Volker_E	T329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size
Resolved		Volker_E	T297001 Define the system's opacities
Resolved		Volker_E	T305084 Add 0.3 opacity
Resolved		Volker_E	T297003 Define the system's box shadow styles
Resolved		Volker_E	T310409 Button: Simplify focus styles application including `box-shadow`
Resolved		Sarai-WMDE	T297007 Define the system's iconography
Resolved		Volker_E	T300562 Define Border tokens
Resolved		bmartinezcalvo	T302181 Define the system's cursors
Resolved		Catrope	T304443 Document Motion tokens (animations and transitions)
Resolved		DAbad	T303522 Decide on CSS breakpoints for the design system
Resolved		Volker_E	T322712 tokens: Add `background-position` option and decision token with value `center`

Event Timeline

Volker_E created this task.Sep 17 2022, 2:57 AM

Restricted Application edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Product-Roadmap). · View Herald TranscriptSep 17 2022, 2:57 AM

Hey @Volker_E 👋🏻 Text decoration styles and their corresponding tokens (@text-decoration-none, @text-decoration-underline) were added a while back to the Figma exploration on Typography. In the latest version, line-through has also been included.