Page MenuHomePhabricator
Create Task
Maniphest T309158

Update Wikimedia Design Style Guide with typeface choices
Closed, DuplicatePublic
Actions

Description

Background

With the decision in T305920: Define the system's sans, serif and monospace typefaces, we also need to update Design Style Guide's typefaces documentation.

Acceptance criteria for Done

  • Update all resources/pages on DSG with new DS typeface choices.

Under consideration
We should probably also consider updating our font stacks, not only on DSG, but everywhere in production.
For example moving from current monospace choice
'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace; to
'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;

Last point was raised in T303587#7926496

Related Objects
Search...

StatusSubtypeAssignedTask
 Duplicate• STHT302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
 InvalidNoneT302025 Upgrade Codex to Beta version
 ResolvedVolker_ET293127 [EPIC] Design System Foundation: Design and define design tokens
 ResolvedNoneT314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
 ResolvedbmartinezcalvoT295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
 ResolvedVolker_ET296995 Define the system's color palette
 ResolvedVolker_ET297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
 ResolvedVolker_ET305236 Create visited red link color token
 ResolvedVolker_ET313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
 Resolvedldelench_wmfT322833 Update Yellow 600 for warning color
 ResolvedVolker_ET324449 Add new colors used in Message component and update border colors to the darkest tone
 Resolved• EUdoh-WMFT322960 Define `accent-color` design token
 ResolvedSarai-WMDET296998 [Epic] Define the system's typographic styles and scale
 Resolved• DAbadT305920 Define the system's sans, serif and monospace typefaces
 DuplicateNoneT309158 Update Wikimedia Design Style Guide with typeface choices
 ResolvedSarai-WMDET297000 Define the design system's size and spacing scale
 ResolvedCatropeT324367 Enable Codex tokens to work with different font sizes
 OpenNoneT326900 Vertical centering issues of text/multiline text and icons in several components
ResolvedovasilevaT328053 Verify impact of Design Systems Team's Codex Update on Web properties
 ResolvedBUG REPORTVolker_ET329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size
 ResolvedVolker_ET297001 Define the system's opacities
 ResolvedVolker_ET305084 Add 0.3 opacity
 ResolvedVolker_ET297003 Define the system's box shadow styles
 ResolvedVolker_ET310409 Button: Simplify focus styles application including `box-shadow`
 ResolvedSarai-WMDET297007 Define the system's iconography
 ResolvedVolker_ET300562 Define Border tokens
 ResolvedbmartinezcalvoT302181 Define the system's cursors
 ResolvedCatropeT304443 Document Motion tokens (animations and transitions)
Resolved• DAbadT303522 Decide on CSS breakpoints for the design system
 ResolvedVolker_ET322712 tokens: Add `background-position` option and decision token with value `center`

Event Timeline

Volker_E created this task.May 25 2022, 4:59 AM
Volker_E mentioned this in T303587: Choose typographies (Sans Serif and Serif) for designing our text styles in Figma in different languages.
Sarai-WMDE mentioned this in T305920: Define the system's sans, serif and monospace typefaces.May 25 2022, 10:14 AM
Volker_E mentioned this in T296998: [Epic] Define the system's typographic styles and scale.Jul 26 2022, 8:42 PM
ldelench_wmf triaged this task as Lowest priority.Jan 20 2023, 7:06 PM
ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.Jan 20 2023, 7:07 PM
Sarai-WMDE added a comment.Jun 9 2023, 11:53 AM

Was about to resolve this task, when I noticed that we're not documenting our monospace stack correctly in Codex's Style guide:

Screenshot 2023-06-09 at 13.46.33.png (570×1 px, 104 KB)

This snippet should be updated to

'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;

We should also add the title "Code" before the snippet to improve understanding.

bmartinezcalvo mentioned this in T333437: Create MVP version of DSG documentation in Codex .Jun 9 2023, 12:00 PM
CCiufo-WMF subscribed.Jun 9 2023, 8:14 PM

@Sarai-WMDE maybe we merge this with T338598: Update Typography guidelines in Codex Style guide instead and then close this?

Sarai-WMDE added a comment.Jun 12 2023, 9:40 AM

Those tickets have different levels of granularity 🤔 I went with creating a subtask of T338598 to capture what's left to do here: T338775: Update Monospace stack documentation in Codex's Style guide. I think this task can be resolved now.

CCiufo-WMF closed this task as a duplicate of T338775: Update Monospace stack documentation in Codex's Style guide.Jun 12 2023, 1:18 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL