Create new border-color tokens for warning status
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	bmartinezcalvo
	Jun 18 2025, 12:27 PM

Project Tags

Referenced Files

None

Subscribers

Description

Background

We need to create the following border-color tokens that will be used in T394713: EditCheck: Improve interactions and they could be potentially reused in other projects since they follow the same structure other color status tokens:

State	Option token used	Proposed Codex JSON application token
Hover	color.yellow800	`border-color.warning--hover`
Active	color.yellow900	`border-color.warning--active`

*We could evaluate including the same tokens for border-color-success (hover, active) to provide the same decision tokens for all status colors (error, warning, success).

Acceptance criteria (or Done)

Implement the new tokens in Codex
Add new tokens in the Figma library

Details

Related Changes in Gerrit:

Subject	Author	Repo	Branch	Lines +/-
Update Codex from v2.2.1 to v2.3.1	LorenMora	mediawiki/core	master	+732 -575
Update Codex from v2.2.1 to v2.3.0	LorenMora	mediawiki/core	master	+657 -531
tokens: Add `border-color-warning--*` interaction states	VolkerE	design/codex	main	+12 -0

Customize query in gerrit

Related Objects

Mentioned In: T394713: EditCheck: Improve interactions
Mentioned Here: T394713: EditCheck: Improve interactions

Event Timeline

bmartinezcalvo created this task.Jun 18 2025, 12:27 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptJun 18 2025, 12:27 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

bmartinezcalvo mentioned this in T394713: EditCheck: Improve interactions.Jun 18 2025, 12:28 PM

If we're making these, can we make hover/active tokens for all of the "status type" tokens? ('notice', 'warning', 'error', 'success')

CCiufo-WMF moved this task from Backlog to Inbox on the Codex board.Jun 18 2025, 8:45 PM

Notice: We don't have Edit Checks with Notice status. Anyway, in case we need, it could use the existing tokens background-color-interactive--hover, background-color- interactive--active, border-color-interactive--hover, and border-color-interactive--active
Error: there are existing tokens for background-error-subtle--hover, background-error-subtle--active, border-color-error--hover, and border-color-error--hover
Warning: We will need to include these new tokens described in the task
Success: @DLynch I don't think we will use these interactive colors for success Edit Checks, so I would not include them for now

I don't think we will use these interactive colors for success Edit Checks, so I would not include them for now

My concern is mostly around inconsistencies in the token set. In a group of tokens like this, the entire thing becomes hard to use if logical categories of tokens don't exist -- it makes sense if every statusType token has variants, but it's weird if only some of them do. Particularly since we're talking about adding them to Codex, which is no longer getting a predictable release schedule -- I wouldn't care if this was just tokens defined locally inside editcheck, but a library should be held to a higher standard.

@DLynch the approach of Codex design tokens is to create them only if they are going to be reused. So, in this case, although success would fit in that scale, we will not have any case to reuse those tokens for now. Regarding creating these warning tokens locally, as commented in the task T394713: EditCheck: Improve interactions, we could create them as component tokens for now if we see that they are going to be reused just in Edit Check, or in case the addition to Codex is later than the deadline for T394713.

I can see both cases, to add a complete set, and to not. Curious what you think is the right approach here @Volker_E?

DTorsani-WMF moved this task from Inbox to Upcoming on the Codex board.Jul 9 2025, 3:49 PM

Volker_E added a project: CSS.Jul 10 2025, 9:40 PM

Volker_E updated the task description. (Show Details)

I wouldn't be too concerned with incomplete token sets in this case. As these are not widely used tokens and I also can't foresee wide usage, it seems slightly better to go with @bmartinezcalvo approach for now and add just the warning ones.
@bmartinezcalvo Do you want to provide the patch yourself or do you want me to go ahead?

I would actually hold off on creating these tokens. @bmartinezcalvo and I have been discussing the design solution that this task helps solve. It seems like we're not going to need the background tokens.

bmartinezcalvo removed a project: Design-System-Team.Jul 11 2025, 2:37 PM

bmartinezcalvo updated the task description. (Show Details)

El T397327#10993868, @DTorsani-WMF escribió:

I would actually hold off on creating these tokens. @bmartinezcalvo and I have been discussing the design solution that this task helps solve. It seems like we're not going to need the background tokens.

I've updated the Interactions states proposal in T394713: EditCheck: Improve interactions and we will not finally need those background color tokens, so I've removed them from this task's description. Finally, we will only need 2 possible new decision tokens for the borders in the hover and active state of warning.

bmartinezcalvo updated the task description. (Show Details)Jul 11 2025, 2:41 PM

Okay great, thanks! I think once you feel like this design solution is final, then we can move this to "Ready for design/dev" and any one of us can take it on.

bmartinezcalvo renamed this task from Create new warning background and border tokens to Create new border-color tokens for warning status.Jul 21 2025, 2:44 PM

DTorsani-WMF assigned this task to bmartinezcalvo.Jul 24 2025, 3:03 PM

DTorsani-WMF triaged this task as Low priority.

DTorsani-WMF moved this task from Upcoming to Ready for Design/Dev on the Codex board.

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

[design/codex@main] tokens: Add `border-color-warning--*` interaction states

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

gerritbot added a project: Patch-For-Review.Jul 26 2025, 9:29 AM

Volker_E moved this task from Ready for Design/Dev to Code Review on the Codex board.Jul 26 2025, 9:33 AM

bmartinezcalvo updated the task description. (Show Details)Jul 29 2025, 11:23 AM

DTorsani-WMF updated the task description. (Show Details)Jul 29 2025, 1:54 PM

DTorsani-WMF moved this task from Code Review to Pending Release on the Codex board.

Change #1172796 merged by jenkins-bot:

[design/codex@main] tokens: Add `border-color-warning--*` interaction states

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

Maintenance_bot removed a project: Patch-For-Review.Jul 29 2025, 2:32 PM

Change #1178961 had a related patch set uploaded (by LorenMora; author: LorenMora):

[mediawiki/core@master] Update Codex from v2.2.1 to v2.3.0

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

gerritbot added a project: Patch-For-Review.Aug 14 2025, 9:00 PM

Test wiki created on Patch demo by LMora-WMF using patch(es) linked to this task:
https://52ad408a3b.catalyst.wmcloud.org/w/

Change #1178961 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.2.1 to v2.3.0

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

Maintenance_bot removed a project: Patch-For-Review.Aug 15 2025, 2:31 AM

Change #1180982 had a related patch set uploaded (by LorenMora; author: LorenMora):

[mediawiki/core@master] Update Codex from v2.2.1 to v2.3.1

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

gerritbot added a project: Patch-For-Review.Aug 21 2025, 9:45 PM

Test wiki created on Patch demo by LMora-WMF using patch(es) linked to this task:
https://590db65713.catalyst.wmcloud.org/w/

Change #1180982 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.2.1 to v2.3.1

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

Maintenance_bot removed a project: Patch-For-Review.Aug 21 2025, 11:32 PM

Volker_E closed this task as Resolved.Aug 22 2025, 9:27 AM

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

~~https://590db65713.catalyst.wmcloud.org/w/~~