Release experimental styles and CSS variable set of Codex design tokens for use in MediaWiki
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	egardner
	Feb 2 2024, 8:21 PM

Description

This task is about how we "productionize" the initial prototype developed for T353172. In order to support the continued work of the Web Team on a dark mode feature (initially targeting Minerva), we need to generate a set of new artifacts from the Codex build process, and we need to integrate them into MediaWiki in a basic way.

Codex Artifacts

Design Tokens

Produce a plain CSS file with a filtered set of tokens as CSS vars in a :root block
Produce a LESS file that replaces the value of those same filtered tokens with var( --whatever )

Codex components

Define an "experimental" build mode that replaces references to theme-wikimedia-ui.less with the above LESS file so that component styles include cals to var( --whatever )
Any styles which rely on LESS functions (like Tabs) need to be fixed because we cannot rely on these features any more (T356541)

Out of scope

Supporting legacy browsers that do not understand CSS variables

Blocked By (to be resolved during current sprint)

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from v1.3.2 to v1.3.3	mediawiki/core	master	+1 K -164
	build, tokens: Add "experimental" tokens and stylesheets	design/codex	main	+142 -18

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		DTorsani-WMF	T355147 [EPIC] Dark Mode
Resolved		egardner	T356537 Release experimental styles and CSS variable set of Codex design tokens for use in MediaWiki
Resolved		AnneT	T356540 Make CSS-only icons compatible with CSS variables
Resolved	BUG REPORT	Jdlrobson	T357845 Regression: Minerva bell icon is black not gray
Resolved		AnneT	T356541 Stop using Less functions on color tokens
Resolved		Catrope	T356542 Integrate Codex's experimental CSS variables-based styles into MediaWiki

Event Timeline

egardner created this task.Feb 2 2024, 8:21 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptFeb 2 2024, 8:21 PM

Catrope added a project: Codex.Feb 2 2024, 8:30 PM

CCiufo-WMF added a parent task: T355147: [EPIC] Dark Mode.Feb 2 2024, 9:12 PM

CCiufo-WMF triaged this task as High priority.Feb 2 2024, 9:14 PM

CCiufo-WMF moved this task from Inbox to Infrastructure on the Codex board.Feb 2 2024, 9:22 PM

Catrope mentioned this in T356542: Integrate Codex's experimental CSS variables-based styles into MediaWiki.Feb 2 2024, 9:23 PM

Catrope updated the task description. (Show Details)Feb 2 2024, 9:32 PM

CCiufo-WMF renamed this task from Codex: Release experimental styles and CSS variable set of design tokens for use in MediaWiki to Release experimental styles and CSS variable set of Codex design tokens for use in MediaWiki.Feb 5 2024, 6:58 PM

Volker_E added a project: CSS.Feb 5 2024, 7:05 PM

Volker_E updated the task description. (Show Details)

Volker_E subscribed.

CCiufo-WMF updated the task description. (Show Details)Feb 5 2024, 7:06 PM

CCiufo-WMF set the point value for this task to 5.

CCiufo-WMF moved this task from Up Next to DST-Sprint-16 (2024-02-05 to 2024-02-16) on the Design-System-Team board.

CCiufo-WMF edited projects, added Design-System-Team (DST-Sprint-16 (2024-02-05 to 2024-02-16)); removed Design-System-Team.

egardner claimed this task.Feb 5 2024, 7:51 PM

egardner moved this task from Committed to Blocked ⛔ on the Design-System-Team (DST-Sprint-16 (2024-02-05 to 2024-02-16)) board.

egardner updated the task description. (Show Details)

Volker_E updated the task description. (Show Details)Feb 5 2024, 11:37 PM

Volker_E added a project: MediaWiki-General.

AnneT changed the status of subtask T356540: Make CSS-only icons compatible with CSS variables from Open to In Progress.Feb 6 2024, 11:47 PM

AnneT changed the status of subtask T356541: Stop using Less functions on color tokens from Open to In Progress.Feb 7 2024, 4:31 PM

alistair3149 subscribed.Feb 8 2024, 10:10 PM

Catrope changed the status of subtask T356542: Integrate Codex's experimental CSS variables-based styles into MediaWiki from Open to In Progress.Feb 14 2024, 11:21 PM

Catrope moved this task from Blocked ⛔ to Committed on the Design-System-Team (DST-Sprint-16 (2024-02-05 to 2024-02-16)) board.Feb 14 2024, 11:26 PM

egardner changed the task status from Open to In Progress.Feb 15 2024, 7:15 PM

egardner moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-16 (2024-02-05 to 2024-02-16)) board.

I'm working on an updated patch for this that does not require changes to the token source files.

Instead, I'm running a filter on the tokens (which are organized by CSS property) to expose as variables any token which contains one of the following in its path: color, background-color, border-color, or border. This also catches the box-shadow-color and outline-color tokens (since these are organized under a nested color property).

Here's the full set of variables this produces:

:root { 
  --background-color-base: #fff;
  --background-color-interactive: #eaecf0;
  --background-color-interactive-subtle: #f8f9fa;
  --background-color-disabled: #c8ccd1; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
  --background-color-disabled-subtle: #eaecf0; /* Components like TextInputs, Selects…. */
  --background-color-progressive: #36c;
  --background-color-progressive--hover: #447ff5;
  --background-color-progressive--active: #2a4b8d;
  --background-color-progressive--focus: #36c;
  --background-color-progressive-subtle: #eaf3ff;
  --background-color-destructive: #d73333;
  --background-color-destructive--hover: #ff4242;
  --background-color-destructive--active: #b32424;
  --background-color-destructive--focus: #d73333;
  --background-color-destructive-subtle: #fee7e6;
  --background-color-error: #d73333;
  --background-color-error--hover: #ff4242;
  --background-color-error--active: #b32424;
  --background-color-error-subtle: #fee7e6;
  --background-color-warning-subtle: #fef6e7;
  --background-color-success-subtle: #d5fdf4;
  --background-color-notice-subtle: #eaecf0;
  --background-color-backdrop-light: rgba( 255, 255, 255, 0.65 ); /* Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. */
  --background-color-backdrop-dark: rgba( 0, 0, 0, 0.65 );
  --background-color-transparent: rgba( 255, 255, 255, 0 );
  --background-color-button-quiet--hover: rgba( 0, 24, 73, 0.027 );
  --background-color-button-quiet--active: rgba( 0, 24, 73, 0.082 );
  --background-color-input-binary--checked: #36c;
  --background-color-primary--hover: rgba( 51, 102, 204, 0.1 );
  --background-color-tab-list-item-framed--hover: rgba( 255, 255, 255, 0.3 );
  --background-color-tab-list-item-framed--active: rgba( 255, 255, 255, 0.65 );
  --color-base: #202122;
  --color-base--hover: #404244; /* Aimed to be replaced by `color.gray600` in future. */
  --color-emphasized: #000;
  --color-subtle: #54595d;
  --color-placeholder: #72777d;
  --color-disabled: #72777d;
  --color-inverted: #fff;
  --color-progressive: #36c; /* 'Progressive' Color and states */
  --color-progressive--hover: #447ff5;
  --color-progressive--active: #2a4b8d;
  --color-progressive--focus: #36c;
  --color-destructive: #d73333; /* 'Destructive' Color and states */
  --color-destructive--hover: #ff4242;
  --color-destructive--active: #b32424;
  --color-destructive--focus: #d73333;
  --color-visited: #6b4ba1; /* 'Visited' color. In combination with progressive. Used for default links. */
  --color-error: #d73333;
  --color-warning: #edab00; /* Note, this is only meant for warning icon for contrast reasons. */
  --color-success: #14866d; /* Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White. */
  --color-notice: #202122;
  --color-base--subtle: #72777d;
  --color-link-red: #d73333; /* Red ('new') Link color and states */
  --color-link-red--hover: #ff4242;
  --color-link-red--active: #b32424;
  --color-link-red--focus: #d73333;
  --color-link-red--visited: #a55858;
  --border-color-base: #a2a9b1;
  --border-color-interactive: #72777d;
  --border-color-disabled: #c8ccd1;
  --border-color-subtle: #c8ccd1;
  --border-color-muted: #eaecf0;
  --border-color-inverted: #fff;
  --border-color-progressive: #36c;
  --border-color-progressive--hover: #447ff5;
  --border-color-progressive--active: #2a4b8d;
  --border-color-progressive--focus: #36c;
  --border-color-destructive: #d73333;
  --border-color-destructive--hover: #ff4242;
  --border-color-destructive--active: #b32424;
  --border-color-destructive--focus: #d73333;
  --border-color-error: #b32424;
  --border-color-error--hover: #ff4242;
  --border-color-warning: #ac6600;
  --border-color-success: #096450;
  --border-color-notice: #54595d;
  --border-color-transparent: transparent;
  --border-color-divider: #a2a9b1;
  --border-color-input--hover: #72777d;
  --border-color-input-binary: #72777d;
  --border-color-input-binary--hover: #447ff5;
  --border-color-input-binary--active: #2a4b8d;
  --border-color-input-binary--focus: #36c;
  --border-color-input-binary--checked: #36c;
  --border-base: 1px solid #a2a9b1;
  --border-subtle: 1px solid #c8ccd1;
  --border-progressive: 1px solid #36c;
  --border-destructive: 1px solid #d73333;
  --box-shadow-color-base: #000;
  --box-shadow-color-progressive--active: #2a4b8d;
  --box-shadow-color-progressive--focus: #36c;
  --box-shadow-color-progressive-selected: #36c;
  --box-shadow-color-progressive-selected--hover: #447ff5;
  --box-shadow-color-progressive-selected--active: #2a4b8d;
  --box-shadow-color-destructive--focus: #d73333;
  --box-shadow-color-inverted: #fff;
  --box-shadow-color-transparent: transparent;
  --outline-color-progressive--focus: #36c; /* Use in places where no more customized focus styles are provided, for example on generic `:focus`. */
}