Page MenuHomePhabricator

Add missing Red Link states in our OOUI library
Closed, DeclinedPublic

Assigned To
None
Authored By
bmartinezcalvo
Feb 22 2022, 7:02 PM
Referenced Files
F35046567: RedLink_02.png
Apr 11 2022, 8:39 AM
F35039519: Captura de pantalla 2022-04-05 a las 13.43.16.png
Apr 5 2022, 11:54 AM
F35039530: RedLink_01.png
Apr 5 2022, 11:54 AM
F35039533: RedLink_02.png
Apr 5 2022, 11:54 AM
F35033517: Tokens.png
Apr 1 2022, 11:04 AM
F35030207: Captura de pantalla 2022-03-30 a las 16.40.15.png
Mar 30 2022, 2:56 PM
F35030224: Tokens-colors.png
Mar 30 2022, 2:56 PM
F34962192: Captura de pantalla 2022-02-22 a las 19.53.48.png
Feb 22 2022, 7:02 PM
Tokens
"Like" token, awarded by Volker_E.

Description

Background/Goal

Currently our Red Link component are not well define in our OOUI Figma library since we only have the Default state. The following states are missed:

  • Hover
  • Active
  • Focus
  • Visited (#AA5555)
  • Disabled

Captura de pantalla 2022-02-22 a las 19.53.48.png (304×1 px, 269 KB)

User stories

As a designer, I need to have available all states for red links to use them in my designs.

Acceptance criteria (or Done)

Design

Code

  • Check that all states match the design

Event Timeline

Hi @Volker_E

I've added all the missing states to the progressive and destructive link component in Figma:

  • Progressive link: added Disabled state
  • Destructive link: added Hover, Active, Focus, Visited and Disabled (we had in Figma the default states but the rest of states were missing)

Captura de pantalla 2022-03-30 a las 16.40.15.png (786×2 px, 419 KB)

As we need to add the visited state for destructive link, we need to add the #AA5555 in our global and decision color tokens.

  • As global token, we could add it as color-red650 (between red700 and red600).
  • As decision token, we could add it as content-color-visited--destructive (in the visited section)

Tokens.png (1×3 px, 158 KB)

Here you can view the Figma file with the all link states added and the proposal to add #AA5555 as color token.

cc: @iamjessklein

bmartinezcalvo changed the task status from Open to In Progress.Mar 30 2022, 3:04 PM

Link colors are a mess, and priority for me has to be T213778, a wholesome approach.
Also, the current Vector 2010 new (red) color has been the influence for the current red visited, which is #aa5858.

Please compare above, we should define the new link visited around #d33, in design harmony and under contrast req perspective.

Link colors are a mess, and priority for me has to be T213778, a wholesome approach.

I'm not proposing to update our link colors, with this task I was only trying to define in Figma what we currently have in production. And, defining all states I realized that we currently don't have the visited red link #aa5858 in our color tokens, so we need to think in how to solve it.

Please compare above, we should define the new link visited around #d33, in design harmony and under contrast req perspective.

We shouldn't use #d33 for red visited link since we are already using #d33 for default red link, and we need to visually differentiate between non visited and visited links for both blue and red links.

Captura de pantalla 2022-04-05 a las 13.43.16.png (1×2 px, 692 KB)

About using #aa5858 for visited red links, we have the following solutions (I update the solutions since yesterday I talked about it with @iamjessklein
and also with the rest of the design system team during our DST Weekly meeting):

  • Option 1: Add #aa5858 as red color: As global token, we could add it as color-red650 as global token and content-color-visited--destructive as decision token (in the visited section of content colors).

RedLink_01.png (1×3 px, 164 KB)

  • Option 2: Add #aa5858 as visited color. We would rename the "Purple" section to "Visited" and we would have color-visited-purple and color-visited-red.

RedLink_02.png (1×3 px, 152 KB)

cc: requesting feedback from @iamjessklein

But wouldn't #aa5858 be a legacy token to start with? Looking at Option 1 it already shows my issue with adding it vividly. The color just doesn't fit in. It has never seen Wikimedia Design team's attention, that was/is an inherited color.
If we tackle it, we should look at the whole link component with all its states and complexity and choose a WikimediaUI palette harmonious color.

But wouldn't #aa5858 be a legacy token to start with? Looking at Option 1 it already shows my issue with adding it vividly. The color just doesn't fit in. It has never seen Wikimedia Design team's attention, that was/is an inherited color.
If we tackle it, we should look at the whole link component with all its states and complexity and choose a WikimediaUI palette harmonious color.

@Volker_E I know #aa5858 is not a Wikimedia Design color and it doesn't fit well in the red palette. But, if we decide to add the purple link in our palette (which is not a color form our Wikimedia Design either) the logical solution would be add the visited red link color too, since both purple and red will be used only for visited blue and red links states.

As red visited link doesn't fit in our red palette, what we can do is use the option 2 and add #aa5858 as visited color. We would rename the "Purple" section to "Visited" and we would have color-visited-purple and color-visited-red.

RedLink_02.png (1×3 px, 152 KB)

bmartinezcalvo changed the task status from In Progress to Stalled.Apr 19 2022, 8:57 AM

@iamjessklein I assign you the task so you can do the Design Review and provide feedback in the task.

I think that you should move forward with documenting the current red link states and then any changes that need to be made should be added as future issues.

ldelench_wmf subscribed.

Moving from sprint board to backlog per our defined goals at sprint planning; please holler if there's a reason to bump up the priority.

Removing inactive assignee. (Please reset assignees of open tasks when offboarding staff.)

bmartinezcalvo renamed this task from Add all Red Link states in our Figma library to Add missing Red Link states in our OOUI library.EditedAug 25 2022, 12:00 PM
bmartinezcalvo edited projects, added OOUI; removed Codex.
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo removed a subscriber: iamjessklein.

Removed the Codex project tag since this is a task related with the OOUI Figma library and the Link component for Codex is being worked in T313507

We're not going to use Red Links as this special entity in our DS is

  • not part of OOUI technically and
  • a rarely used MW-only component

Therefore we won't invest more time into this and focus on the Codex Red Link component only.