⚓ T306396 Extend the system's cursors

	Subject	Repo	Branch	Lines +/-
	Update Codex from v0.1.0-alpha.9 to v0.1.0-alpha.10	mediawiki/core	master	+261 -112
	tokens, styles: Add further cursor tokens on theme option and base level	design/codex	main	+64 -23

Status	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	T306396 Extend the system's cursors

Volker_E created this task.Apr 18 2022, 9:42 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 18 2022, 9:42 PM

@bmartinezcalvo In the conversation we've surfaced that the cursors should probably live as token Figma files, not being part of the documentation assets. The cursors are actually needed for component functional definitions.

bmartinezcalvo updated the task description. (Show Details)Apr 19 2022, 11:51 AM

@STHart I move this task to our sprint board since tokens (cursor tokens in this case) are part of our priorities.

bmartinezcalvo moved this task from Committed to Ready for Design on the Design-System-Team (Design-System-Sprint) board.Apr 19 2022, 11:53 AM

bmartinezcalvo moved this task from Ready for Design to In Design on the Design-System-Team (Design-System-Sprint) board.Apr 20 2022, 9:34 AM

bmartinezcalvo moved this task from In Design to Ready for Design on the Design-System-Team (Design-System-Sprint) board.

Volker_E mentioned this in T295991: Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma.Apr 25 2022, 1:43 AM

bmartinezcalvo moved this task from Ready for Design to In Design on the Design-System-Team (Design-System-Sprint) board.Apr 25 2022, 2:52 PM

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

[design/codex@main] tokens: Add further cursor tokens on theme option level

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

gerritbot added a project: Patch-For-Review.Apr 25 2022, 4:59 PM

Based on last feedback from @Volker_E about the Cursor Tokens, I've created 2 new proposals to test if we want to use the CSS names for options or decisions:

Option 1: using CSS names for options and using new names for decisions (using a middle section in the name to differentiate option names from decisions e.g. cursor-select-grab)
Option 2: using generic names for option tokens (e.g. cursor-hand-open) and using CSS names for all decisions except for base ones to indicate which are the base cursors (base, base-hover and base-disabled)

Here you can view and compare both proposals.

For the redesign of grab and grabbing, I've prepared this new proposal with a simpler version of the hand icons:

Captura de pantalla 2022-04-27 a las 18.57.42.png (1×2 px, 632 KB)

Tokens nomenclature

After last feedback from @Volker_E in this Figma comment we will move forward with Option 2 using he following nomenclature:

Options: we will use generic names for option tokens (e.g. cursor-hand-open)
Decisions: we will use the CSS names (e.g. cursor-grab) for all decisions except for base ones which will indicate our base cursors (base, base-hover and base-disabled)

Question:

Should we add cursor-arrow-forbidden as option token? We are not using it as decision since we use default cursor for base-hover--disabled. I think we should delete arrow-forbiden if we are not going to use it as decision.

Captura de pantalla 2022-04-28 a las 15.39.21.png (514×916 px, 97 KB)

Captura de pantalla 2022-04-28 a las 15.40.42.png (938×718 px, 227 KB)

Grab and Grabbing proposal

Regarding the grab and grabbing cursors, I created this new proposal for them. If you agree I can update these cursors with this new simpler proposal.

Captura de pantalla 2022-04-28 a las 15.38.31.png (872×1 px, 363 KB)

bmartinezcalvo moved this task from In Design to Design Review on the Design-System-Team (Design-System-Sprint) board.Apr 28 2022, 1:48 PM

bmartinezcalvo updated the task description. (Show Details)

• STH triaged this task as Medium priority.May 1 2022, 12:54 PM

@Volker_E I assign you the task, if you review it and find something to update please tell me. About grab and grabbing, what do you think about the new proposal?

AAlhazwani-WMF unsubscribed.May 3 2022, 4:07 PM

Volker_E moved this task from Ready for Development to Code Review on the Design-System-Team (Design-System-Sprint) board.May 10 2022, 2:09 AM

• STH changed the task status from Open to In Progress.May 26 2022, 12:19 AM

Volker_E moved this task from Code Review to Design Sign-Off on the Design-System-Team (Design-System-Sprint) board.May 31 2022, 3:34 PM

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

Can we please update with the status of this task and next steps?

• DAbad added a parent task: T314086: Design System Foundation: Define & Implement Critical "Global" Visual Styles.Jul 28 2022, 10:29 PM

Change 785890 merged by jenkins-bot:

[design/codex@main] tokens, styles: Add further cursor tokens on theme option and base level

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

Volker_E reassigned this task from Volker_E to • Sarai-WMDE.Aug 1 2022, 4:03 PM

Volker_E removed a project: Patch-For-Review.