tokens: Implement new static layout background-color tokens
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	Volker_E
	Apr 15 2023, 2:30 PM

Description

Background

Description: Currently in a huge number of skins and extensions, Gray 100 #f8f9fa and Gray 200 #eaecf0 ]] are used as backgrounds in various places to add visual structure to the layout. So far we have defined both values only in component specific tokens, that shouldn't be used for the structure case for semantic reasons.
History (if needed): In mediawiki.ui/variables are featuring colorGray14 and colorGray15 which are (mis)used for exactly that reasons, to structure layouts
Known use case(s):
- wikitable table header are among the more clearly defined use cases,
- others in CodeSearch for #f8f9fa and in CodeSearch mediawiki.ui var/hex code for #eaecf0
  - Special:Search: .searchResultImage-thumbnail-placeholder, #mw-searchoptions, Special:Contribute: .mw-contribute-tabs-content
  - pre, code, .mw-code backgrounds

Previous implementations

Codex demo: Codex background-color token demo
Design style guide: In the DSG both colors are used too, the lighter as image figure background, the darker as page background (header).

User stories

As designer, there are page/view layout structuring needs, where subtle grays Gray 100 and Gray 200 are used for.

Design spec

Figma spec sheet

Open questions

Nomenclature semantically important
- Considerations: Nomenclature definition:
  - @background-color-light/@background-color-lightest or
  - background-color-page-xxx or
  - background-color-area-xxx

Decision: We've turned the decision on the head and went for naming the interactive backgrounds intentionally. It's clearer in the bigger token application, as most interactive elements are aimed to come out of premade Codex components, while page layouts will be mixed inside and majority outside Codex via skin variables.

Acceptance criteria for Done

Design

Design the Figma spec sheet and add it in this task
Add the new tokens as Figma variables in the library. This step will be done by a DST member.
Replace the color tokens in the components needed: Framed Tabs background, Thumbnail Placeholder, and ChipInput (when chips are separated from the input)

Code

Implement the tokens in Codex
Update downstream repositories, orienting on T332541 to resolve this application gap
- Update components that use this token (if needed) https://gerrit.wikimedia.org/r/c/mediawiki/core/+/997978

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from 1.3.4 to 1.3.5	mediawiki/core	master	+115 -70
	tokens: Add area background color tokens and apply	design/codex	main	+18 -8

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		Jdrewniak	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Open		Jdrewniak	T341632 [EPIC] Palette customizations and dark mode
Open		ovasileva	T354835 [epic] Release night mode as a beta feature on desktop and mobile
Resolved		Jdlrobson	T354836 [goal] Allow desktop and mobile page chrome to appear in night mode ahead of beta release
Open		ovasileva	T354842 [Night mode] All global navigation open by default appear in night mode on desktop
Open		ovasileva	T354843 [Night mode] Make all open-by-default global navigation appear in night mode on mobile
Resolved		Jdlrobson	T356074 Implement the dark mode color palette and switch LESS variables in Minerva to use it, degrade support for browsers that do not support CSS custom properties
Resolved		ovasileva	T356900 Regression: Issues with color-subtle (Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables)
Resolved	BUG REPORT	Jdlrobson	T356928 Regression: Visited links on mobile appearing as black
Resolved	BUG REPORT	JScherer-WMF	T357381 Regression: Active link color is broken on mobile
Open		None	T356344 [Night mode] Templates can be fixed by editors when necessary for night mode
Resolved		ovasileva	T357998 Address color contrast issues in .wikitable
Resolved	BUG REPORT	ovasileva	T357179 Page issues as rendered in article is not compatible with night mode
Open		ovasileva	T358192 [Bug] Page issues icon disappearing on click
Resolved	BUG REPORT	ovasileva	T356822 Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode
Resolved	BUG REPORT	abi_	T356821 Make <languages> compatible with night mode by using Codex design tokens
Resolved	BUG REPORT	Nikerabbit	T358381 Make Translate outdated translations text compatible with night mode
Resolved	BUG REPORT	ovasileva	T359081 [Bug] Page previews currently does not work in night mode.
Open		None	T360877 [Bug] Page previews gradient not working in night mode
Resolved	BUG REPORT	Jdlrobson	T358822 Translate extension needs to import mediawiki.skin.variables to get night mode
In Progress		DTorsani-WMF	T355147 [EPIC] Dark Mode
Resolved		ovasileva	T357166 Categories appear in light theme
Resolved		Volker_E	T334790 tokens: Implement new static layout background-color tokens

Event Timeline

Volker_E created this task.Apr 15 2023, 2:30 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 15 2023, 2:30 PM

Volker_E updated the task description. (Show Details)Apr 15 2023, 2:38 PM

Volker_E updated the task description. (Show Details)Apr 15 2023, 6:39 PM

ldelench_wmf edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Apr 19 2023, 9:07 PM

Restricted Application triaged this task as High priority. · View Herald TranscriptApr 19 2023, 9:07 PM

CCiufo-WMF mentioned this in T332541: Replace mediawiki.ui variables with mediawiki.skin.variables.Apr 19 2023, 9:25 PM

CCiufo-WMF moved this task from Design-System-Sprint to Needs Refinement on the Design-System-Team board.Apr 24 2023, 12:50 PM

CCiufo-WMF edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Sprint).

ldelench_wmf moved this task to Backlog on the Design-System-Team board.Apr 24 2023, 3:30 PM

CCiufo-WMF moved this task from Backlog to Needs Refinement on the Design-System-Team board.Apr 24 2023, 3:30 PM

Volker_E updated the task description. (Show Details)Apr 25 2023, 10:43 AM

Volker_E updated the task description. (Show Details)Apr 25 2023, 11:15 AM

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

[design/codex@main] [WIP] tokens: Add area background color tokens and apply

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

gerritbot added a project: Patch-For-Review.Apr 25 2023, 12:14 PM

Volker_E updated the task description. (Show Details)Apr 26 2023, 5:29 PM

RHo mentioned this in T339269: StepIndicator dots colors: create new color tokens.Jun 20 2023, 11:26 AM

egardner raised the priority of this task from High to Needs Triage.Oct 2 2023, 9:14 PM

egardner moved this task from Needs Refinement to Backlog on the Design-System-Team board.

Jdlrobson subscribed.Jan 31 2024, 3:45 PM

Jdlrobson added a project: FY2023-24-WE 2.1 Typography and palette customizations.Feb 9 2024, 6:28 PM

Jdlrobson mentioned this in T357166: Categories appear in light theme.

Jdlrobson moved this task from Backlog to Night mode (mobile) on the FY2023-24-WE 2.1 Typography and palette customizations board.Feb 9 2024, 6:30 PM

Jdlrobson added a project: Web-Team-Backlog (Needs Prioritization (Tech)).Feb 22 2024, 4:39 PM

Jdlrobson triaged this task as High priority.Feb 22 2024, 6:56 PM

Jdlrobson moved this task from Backlog to Night mode coordination on the Web-Team-Backlog (Needs Prioritization (Tech)) board.

Jdlrobson mentioned this in T358449: MinervaNeue: Assign a default background color for tables using "wikitable" class.Feb 26 2024, 5:44 PM

CCiufo-WMF moved this task from Backlog to Up Next on the Design-System-Team board.Feb 27 2024, 4:40 PM

Jdlrobson added subtasks: T357166: Categories appear in light theme, T357998: Address color contrast issues in .wikitable.Feb 27 2024, 4:43 PM

ovasileva subscribed.Feb 29 2024, 8:18 AM

bmartinezcalvo updated the task description. (Show Details)Mar 1 2024, 3:45 PM

bmartinezcalvo updated the task description. (Show Details)

bmartinezcalvo updated the task description. (Show Details)Mar 1 2024, 4:03 PM

I've included the new background color tokens in the Figma library and I've updated the following components n the Figma library with these new colors: ChipInput (when the chips are outside the input), Thumbnail's placeholder and Framed Tabs background.

@bmartinezcalvo what about tables, code blocks and categories? Should they also use @background-color-neutral-subtle ?
On https://en.wikipedia.org/wiki/Barcelona

Screenshot 2024-03-01 at 8.18.26 AM.png (1×548 px, 108 KB)

On https://www.mediawiki.org/wiki/User:Jdlrobson/codeblock

Screenshot 2024-03-01 at 8.21.40 AM.png (132×204 px, 8 KB)

In T334790#9591109, @Jdlrobson wrote:

@bmartinezcalvo what about tables, code blocks and categories? Should they also use @background-color-neutral-subtle ?
On https://en.wikipedia.org/wiki/Barcelona

I've updated just the components in the Figma libraries and we don't have this as Figma component. But in code this should be updated as well with the new @background-color-neutral-subtle #F8F9FA.

On https://www.mediawiki.org/wiki/User:Jdlrobson/codeblock

The new Codex Table T303320 will not use these grays (Figma exploration file). But the new background colors will be updated in this non-Codex table.

Any component in code using grays for non-interactive backgrounds should be updated with these new tokens.

Jdlrobson updated the task description. (Show Details)Mar 1 2024, 7:50 PM

Jdlrobson awarded a token.

CCiufo-WMF set the point value for this task to 2.Mar 4 2024, 7:33 PM

CCiufo-WMF moved this task from Up Next to DST-Sprint-18 (2024-03-04 to 2024-03-15) on the Design-System-Team board.

CCiufo-WMF edited projects, added Design-System-Team (DST-Sprint-18 (2024-03-04 to 2024-03-15)); removed Design-System-Team.

CCiufo-WMF added a parent task: T355147: [EPIC] Dark Mode.Mar 5 2024, 3:44 PM

CCiufo-WMF removed a subtask: T357166: Categories appear in light theme.

CCiufo-WMF added a parent task: T357166: Categories appear in light theme.

CCiufo-WMF removed a subtask: T357998: Address color contrast issues in .wikitable.Mar 5 2024, 3:46 PM

CCiufo-WMF added a parent task: T357998: Address color contrast issues in .wikitable.

CCiufo-WMF changed the task status from Open to In Progress.Mar 5 2024, 3:48 PM

CCiufo-WMF assigned this task to Volker_E.

CCiufo-WMF moved this task from Committed to Code Review on the Design-System-Team (DST-Sprint-18 (2024-03-04 to 2024-03-15)) board.

Volker_E updated the task description. (Show Details)Mar 5 2024, 4:09 PM

Volker_E renamed this task from Evaluate new layout background-color tokens in Codex to tokens: Implement new static layout background-color tokens.Mar 6 2024, 3:16 PM

Volker_E updated the task description. (Show Details)

Jdlrobson mentioned this in T357998: Address color contrast issues in .wikitable.Mar 12 2024, 12:12 AM

egardner moved this task from Code Review to Pending Release on the Design-System-Team (DST-Sprint-18 (2024-03-04 to 2024-03-15)) board.Mar 18 2024, 4:11 PM

Change 911851 merged by jenkins-bot:

[design/codex@main] tokens: Add area background color tokens and apply

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

Maintenance_bot removed a project: Patch-For-Review.Mar 18 2024, 4:30 PM

Change 1012737 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from 1.3.4 to 1.3.5

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

gerritbot added a project: Patch-For-Review.Mar 19 2024, 6:47 PM

Change 1012737 merged by jenkins-bot: