Page MenuHomePhabricator

Add new colors used in Message component and update border colors to the darkest tone
Closed, ResolvedPublic3 Estimated Story Points

Description

Background goal

Message border colors should use the darkest tone in T322428 in order to increase the contrast of the message on different background colors.

Captura de Pantalla 2022-12-05 a las 12.30.11.png (1×1 px, 102 KB)

Also green700 color is currently #14866d and it should be replaced with #096450 in order to follow the same darkness level as in the Red and Yellow scale.

Captura de Pantalla 2022-12-05 a las 12.29.51.png (538×2 px, 506 KB)

The following tokens need to be created or updated:

Option tokens:

Green:

  • Rename current “green700” to green600
  • Rename current “green600” to green500 (we won't use this option token as decision token at the moment, so we don't need to create it now)
  • Added new green700 #096450
Decision tokens:

Message border colors will use a darker tone to increase the contrast of the border.

Captura de Pantalla 2022-11-10 a las 12.02.55.png (524×1 px, 304 KB)

  • border-color-success will use the new green700 #096450
  • border-color-error will use red700 #b32424
  • border-color-warning will use yellow700 #ac6600
  • border-color-notice will use gray600 #54595d (notice will use a lighter tone to avoid using a black border for a notice message)
NOTE: We will only create as option tokens the ones that will be used as decisions. In this case, green500 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

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 WikimediaUI-Base
  • Release new WikimediaUI Base version and pull-through in OOUI

Related Objects

StatusSubtypeAssignedTask
Duplicate STH
InvalidNone
ResolvedVolker_E
ResolvedNone
Resolvedbmartinezcalvo
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
ResolvedDAbad
ResolvedVolker_E
Resolvedbmartinezcalvo
Resolved KieranMcCann
OpenNone
DuplicateNone
ResolvedVolker_E
ResolvedDAbad
ResolvedVolker_E
ResolvedDAbad
ResolvedSarai-WMDE
ResolvedCatrope
OpenNone
Resolvedovasileva
ResolvedBUG REPORTVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
ResolvedVolker_E
Resolvedbmartinezcalvo
ResolvedCatrope
ResolvedDAbad
ResolvedVolker_E

Event Timeline

bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo moved this task from Incoming to Done on the Design board.
bmartinezcalvo moved this task from Inbox to Needs Refinement on the Design-System-Team board.
Volker_E renamed this task from Update Border feedback colors to the darkest tone to Add colors and update Border feedback colors to the darkest tone.Dec 8 2022, 5:16 AM
ldelench_wmf added a subscriber: ldelench_wmf.

Bumping to high priority based on its parent's priority - please lower to medium priority if our target completion is more than 1 month from now. Thanks!

bmartinezcalvo lowered the priority of this task from High to Medium.Jan 23 2023, 4:15 PM
bmartinezcalvo renamed this task from Add colors and update Border feedback colors to the darkest tone to Message component: add new colors and update Border feedback colors to the darkest tone.Mar 21 2023, 5:31 PM

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

[design/codex@main] tokens, Message, InfoChip: Use darker border colors

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

Restricted Application raised the priority of this task from Medium to High. · View Herald TranscriptApr 13 2023, 10:17 AM

Have to put that into the sprint in context of rollout of tokens to MediaWiki core and extensions.

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

[wikimedia-ui-base@master] Add `green700` and use darker colors for Message borders

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

Volker_E changed the task status from Open to In Progress.Apr 13 2023, 12:23 PM
Volker_E claimed this task.

Change 908504 merged by jenkins-bot:

[wikimedia-ui-base@master] Add `green700` and use darker colors for Message borders

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

Change 908495 merged by jenkins-bot:

[design/codex@main] tokens, Message, InfoChip: Use darker border colors

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

Volker_E added a project: WikimediaUI-Base.
Volker_E updated the task description. (Show Details)

@bmartinezcalvo Moving back to Design for the Codex Figma updates.

bmartinezcalvo renamed this task from Message component: add new colors and update Border feedback colors to the darkest tone to Add new colors used in Message component and update border colors to the darkest tone.Apr 14 2023, 11:33 AM
bmartinezcalvo updated the task description. (Show Details)

@Volker_E added colors in the Figma library and published library.

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

[mediawiki/core@master] mediawiki.ui: Apply darker Message border colors

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

Change 908524 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.ui: Apply darker Message border colors

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

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

[mediawiki/core@master] Update Codex from v0.9.0 to v0.9.1

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

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/9a9f20a61d/w

Change 911932 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.9.0 to v0.9.1

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

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/9a9f20a61d/w/

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

[oojs/ui@master] build: Update 'wikimedia-ui-base' to 0.22.0

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

Change 920751 merged by jenkins-bot:

[oojs/ui@master] build: Update 'wikimedia-ui-base' to 0.22.0

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

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

[mediawiki/core@master] Update OOUI to v0.47.0

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

Change 921070 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.47.0

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

Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)
Volker_E set the point value for this task to 3.