Replace `icon-accessory` with `icon-subtle`
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Volker_E
	Mar 7 2023, 5:11 PM

Description

Background

We've replaced color-accessory with color-subtle in the color token nomenclature.
We should do the same with icon-accessory in order to make relations clear. It features 0.67. "Equals #555 on background-color: #fff`, closest to #54595d".
Often the icon CSS selectors have been close to the label selectors with color-accessory in the past.
The only time we currently use them is TextInputWidget in OOUI and Codex.

Codesearch

Acceptance criteria for Done

Replace opacity-icon-accessory with opacity-icon-subtle
- in the Figma exploration file and in the Figma library
- in Codex

Details

	Subject	Repo	Branch	Lines +/-
	mediawiki.less: Introduce @opacity-icon-subtle & deprecate `-accessory`	mediawiki/core	master	+4 -1
	tokens: Replace `opacity-icon-accessory` with `opacity-icon-subtle`	design/codex	main	+6 -2

Customize query in gerrit

Event Timeline

Volker_E created this task.Mar 7 2023, 5:11 PM

Restricted Application triaged this task as High priority. · View Herald TranscriptMar 7 2023, 5:11 PM

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

Volker_E updated the task description. (Show Details)Mar 8 2023, 4:10 PM

Volker_E updated the task description. (Show Details)Mar 8 2023, 4:17 PM

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

[design/codex@main] tokens: Replace `opacity-icon-accessory` with `opacity-icon-subtle`

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

gerritbot added a project: Patch-For-Review.Mar 8 2023, 4:19 PM

Volker_E assigned this task to Sarai-WMDE.Mar 8 2023, 4:20 PM

Volker_E moved this task from Committed to Design Review on the Design-System-Team (Design-System-Sprint) board.

Change 895829 merged by jenkins-bot:

[design/codex@main] tokens: Replace `opacity-icon-accessory` with `opacity-icon-subtle`

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

Maintenance_bot removed a project: Patch-For-Review.Mar 8 2023, 6:30 PM

Volker_E changed the task status from Open to In Progress.Mar 8 2023, 6:37 PM

Volker_E updated the task description. (Show Details)

Volker_E moved this task from Design Review to In Design on the Design-System-Team (Design-System-Sprint) board.

Sarai-WMDE updated the task description. (Show Details)Mar 9 2023, 10:33 AM

bmartinezcalvo updated the task description. (Show Details)Mar 9 2023, 10:36 AM

bmartinezcalvo updated the task description. (Show Details)

Is opacity-icon-subtle being overridden/ignored somehow in the TextInput demo? Although the token is applied to the icons used by the TextInput component, these only display the colors color-base (enabled input), color-placeholder (resting input) and color-disabled (disabled input). This corresponds with the component's specs, where active field icons do not display any opacity either (they're color-base).

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

[mediawiki/core@master] mediawiki.less: Introduce @opacity-icon-subtle & deprecate `-accessory`

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

gerritbot added a project: Patch-For-Review.Mar 9 2023, 3:55 PM

Volker_E claimed this task.Mar 9 2023, 6:12 PM

Volker_E moved this task from In Design to Code Review on the Design-System-Team (Design-System-Sprint) board.

Volker_E added a subscriber: Sarai-WMDE.

Change 896120 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.less: Introduce @opacity-icon-subtle & deprecate `-accessory`

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

Catrope closed this task as Resolved.Mar 9 2023, 7:45 PM

Maintenance_bot removed a project: Patch-For-Review.Mar 9 2023, 8:11 PM

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.27; 2023-03-13).Mar 9 2023, 11:00 PM

In T331457#8679239, @Sarai-WMDE wrote:

Is opacity-icon-subtle being overridden/ignored somehow in the TextInput demo? Although the token is applied to the icons used by the TextInput component, these only display the colors color-base (enabled input), color-placeholder (resting input) and color-disabled (disabled input). This corresponds with the component's specs, where active field icons do not display any opacity either (they're color-base).

Missed the fact that the opacity is intended for usage with the icons in the CSS only version of the TextInput component. All good!

In T331457#8682921, @Sarai-WMDE wrote:

In T331457#8679239, @Sarai-WMDE wrote:

Is opacity-icon-subtle being overridden/ignored somehow in the TextInput demo? Although the token is applied to the icons used by the TextInput component, these only display the colors color-base (enabled input), color-placeholder (resting input) and color-disabled (disabled input). This corresponds with the component's specs, where active field icons do not display any opacity either (they're color-base).