Update Yellow 600 for warning color
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	bmartinezcalvo
	Nov 10 2022, 11:14 AM

Description

Background goal

Warning color needs to be updated in T322428. We need to add and update the following tokens:

Option tokens:

Renamed “Yellow 600” to yellow500 (we won't use this option token as decision token at the moment, so we don't need to create it now)
Added new yellow600 #edab00

Decision tokens:

color-warning will use yellow600/ #edab00
border-color-warning will use yellow600/ #edab00

NOTE: We will only create as option tokens the ones that will be used as decisions. In this case, yellow500 won't be created as option tokens at the moment and it will be only used in design as primitive colors for other non coded elements such as illustrations.

Design spec

Figma spec sheet here

Acceptance criteria (or Done)

Design:

Create new version of the colors Figma spec sheet and add it in the task
Update and publish the colors in the Design Tokens library

Code:

Update tokens in Codex
Update variables in WikimedaUI Base
Release new WikimediaUI Base version and pull-through in OOUI

Details

Subject	Repo	Branch	Lines +/-
Update OOUI to v0.46.0	mediawiki/core	master	+139 -85
icons: Update warning color to new design-first `#edab00`	oojs/ui	master	+15 -15
build: Update wikimedia-ui-base to 0.21.0	oojs/ui	master	+8 -8

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		ldelench_wmf	T322833 Update Yellow 600 for warning color
Resolved		Sarai-WMDE	T296998 [Epic] Define the system's typographic styles and scale
Resolved		• DAbad	T305920 Define the system's sans, serif and monospace typefaces
Resolved		Volker_E	T305947 Define the system's typographic scale (font sizes and line-heights)
Resolved		bmartinezcalvo	T321470 Use the system's typographic scale tokens (font size and line-heights)
Resolved		• KieranMcCann	T303587 Choose typographies (Sans Serif and Serif) for designing our text styles in Figma in different languages
Open		None	T331612 Document internationalization limitations of Figma font selection in Typography guidelines
Duplicate		None	T309158 Update Wikimedia Design Style Guide with typeface choices
Resolved		Volker_E	T313693 Implement system typeface choices in Codex tokens
Resolved		• DAbad	T318023 Define the system's typographic styles on text decoration
Resolved		Volker_E	T322707 Provide `tab-size` option and decision token
Resolved		• DAbad	T322811 Provide (legacy) font families as Codex tokens
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

bmartinezcalvo created this task.Nov 10 2022, 11:14 AM

bmartinezcalvo mentioned this in T322428: Update Message component colors.Nov 10 2022, 11:17 AM

bmartinezcalvo updated the task description. (Show Details)Nov 30 2022, 10:25 AM

bmartinezcalvo updated the task description. (Show Details)Nov 30 2022, 10:28 AM

Volker_E updated the task description. (Show Details)Nov 30 2022, 10:49 AM

@bmartinezcalvo @RHo @KieranMcCann My understanding from our last exchange was that we're not inventing new colors (while we agreed to bring back those colors to OOUI for consistency) for one border use case right now…?! As it would, without wider use and underlying guidance end up in different Yellows/Greens all over the place.
We'd also have to bring the new color back to the old nomenclature in WikimediaUI Base, as we haven't prioritized changing the old nomenclature to the new. Our prios were getting everything correct in Codex:

@wmui-color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
@wmui-color-yellow50: #fc3;    // = HSB 45°, 80%, 100%
@wmui-color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%

@wmui-color-green30:  #14866d; // = HSB 167°, 85%, 53%
@wmui-color-green50:  #00af89; // = HSB 167°, 100%, 69%
@wmui-color-green90:  #d5fdf4; // = HSB 166°, 16%, 99%

One way forward could be to ignore the inconsistencies right now and just care about Codex. But I personally would only focus on exchanging Yellow 600/Yellow50 and leave the border color issue stalled.
Mind the long-tail of necessary changes (example of just old Yellow 50):
https://codesearch.wmcloud.org/search/?q=%23fc3&i=nope&files=&excludeFiles=&repos=

Volker_E added a project: WikimediaUI-Base.Nov 30 2022, 12:14 PM

Volker_E updated the task description. (Show Details)

bmartinezcalvo renamed this task from Add new colors for messages to Update warning color.Dec 5 2022, 11:46 AM

bmartinezcalvo updated the task description. (Show Details)

In T322833#8431577, @Volker_E wrote:

@bmartinezcalvo @RHo @KieranMcCann My understanding from our last exchange was that we're not inventing new colors (while we agreed to bring back those colors to OOUI for consistency) for one border use case right now…?! As it would, without wider use and underlying guidance end up in different Yellows/Greens all over the place.

@Volker_E updated this task description to be used just to implement the new yellow600 #EDAB00 for both color-warning and border-color-warning. I've created this other task T324449 to update the message border colors to the darkest tone in the future (and add the new green700 #096450 color for the success dark border).