Page MenuHomePhabricator

Create visited red link color token
Closed, ResolvedPublic

Description

Background/Goal

We need to create the visited red link color #a55858 as token since we need to use it to create the Red link in T313507

Proposal

During our DST design sync on 2022-08-04 we decided to use the following tokens for Links:

  • Blue link will use the color-progressive tokens
  • Red links won't use color-destructive tokens since these tokens were created for destructive elements. We will create the red link colors as component tokens instead. We won't create decision tokens for Red links. As #a55858 will be used for visited red link we need to create it as option token to create then the component token.

Figma file

Acceptance criteria (or Done)

Design

  • Add #a55858 as option token in our colors
  • Create the visited color in the Figma components library (we won't add it in the Design Tokens library)

Code

  • Create #a55858 as:
    • Option token
    • Once the option token is created we will use it as component token to use it for visited red links

Related Objects

StatusSubtypeAssignedTask
Duplicate STH
InvalidNone
ResolvedVolker_E
ResolvedNone
Resolvedbmartinezcalvo
ResolvedVolker_E
ResolvedSarai-WMDE
Resolved DAbad
ResolvedVolker_E
Resolvedbmartinezcalvo
Resolved KieranMcCann
OpenNone
DuplicateNone
ResolvedVolker_E
Resolved DAbad
ResolvedVolker_E
Resolved DAbad
ResolvedSarai-WMDE
ResolvedCatrope
OpenNone
Resolvedovasileva
ResolvedBUG REPORTVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedSarai-WMDE
ResolvedVolker_E
Resolvedbmartinezcalvo
ResolvedCatrope
Resolved DAbad
ResolvedVolker_E
In Progress DAbad
ResolvedCCiufo-WMF
DeclinedNone
ResolvedVolker_E

Event Timeline

Think this has come up in a design system designer meeting: Why would we even want to feature a different visited color than violet to visited red links? Isn't the sole qualifier enough that it has been visited. Do we really loose user benefit without an additional color? @bmartinezcalvo
(Red would feature 5 shades, vs blue 4 then)

cc: @Sarai-WMDE @alexhollender_WMF

Think this has come up in a design system designer meeting: Why would we even want to feature a different visited color than violet to visited red links? Isn't the sole qualifier enough that it has been visited. Do we really loose user benefit without an additional color? @bmartinezcalvo
(Red would feature 5 shades, vs blue 4 then)

cc: @Sarai-WMDE @alexhollender_WMF

As I commented during the DS sync, we need to differentiate visited-red from visited-blue since if we use use the same violet color for both the user won't know which visited link is a new page.

Captura de Pantalla 2022-08-25 a las 13.44.46.png (204×1 px, 180 KB)
Captura de Pantalla 2022-08-25 a las 13.44.38.png (226×1 px, 189 KB)
non visited linksvisited red and blue links

Apart form which color to use as visited red link, I think this task could be declined since in other DS sync we decided not to create the red link colors as decision tokens (since our red decision color tokens are used for destructive actions and we decided not to create new red decision tokens just for this red link). Review the Link component task T313507 for more details.

So I'm going to decline this task and we will open it again in the future if needed.

If we decide to differentiate visited new links from normal links (following the current version of the link spec file), then I think that it does make sense to record this decision as a token! We would be applying here the same logic that made us create the option token purple, which is only reused once as a value by the decision token color-visited. I see two options:

  1. Add the new shade of red to the options palette and document it as a content color. We'd need to find a new name for color-visited
  2. Add the new shade of red to the options' palette, so we can use the value to create the necessary "component tokens" (we could evaluate whether this is something we want to also do with Purple: which would entail removing the single use token color-visited)

In both cases, the style(s) could still be documented in Figma as you already did in the file, @bmartinezcalvo.

+1 to @bmartinezcalvo's point:

we need to differentiate visited-red from visited-blue since if we use use the same violet color for both the user won't know which visited link is a new page

I don't fully understand the workflows and use cases regarding red links (i.e. links to pages that haven't been created yet), but if we assume there is value in having red links, I think we then assume there is value in keeping that information available even if the link has been visited. If we used the normal link color for red links that have been visited, we would be loosing that information.

Hey @alexhollender_WMF. We're indeed planning to keep differentiating visited new links in Codex (find specs here). The new hex value would be #A55858. This shade of red still needs to be documented as a token in our palette.

After a catch up with @Sarai-WMDE where we've revisited our DS sync notes, we've realized that we decided not to add the visited red link as decision token but add it as component token, so we should add #a55858 as option token to be created as component token. So I'm reopening the task in order to add this new option token.


The proposal is the following:

  1. Add #a55858 as option token color-maroon (view Figma here)
  2. Use this option token to create the component token (Red link colors won't be created as decision tokens but as component tokens)

@Sarai-WMDE @bmartinezcalvo awesome — you can see the visited red link color in production by clicking one of the red links on this page: https://en.wikipedia.org/wiki/User:Jdlrobson/sandbox/links?useskin=vector-2022

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

[design/codex@main] tokens: Add 'maroon' color option token and Red Link component tokens

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

Change 830719 merged by jenkins-bot:

[design/codex@main] tokens: Add 'maroon' color option token and Red Link component tokens

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

The color of visited new links has been correctly added to our tokens package as an option (color-maroon) and as a component token (color-link-red--visited) to be applied to the very specific use case. It's also been documented as an option in our Figma Design tokens palette, and as a style in the Link component exploration file (will be imported to the Codex components library in Figma once said designs are incorporated to it).

With that, all ACs are met, and the task can be signed off.

Change 831947 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.1.1 to v0.2.1

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

Change 831947 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.1.1 to v0.2.1

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

Volker_E claimed this task.
Volker_E added a subscriber: DAbad.

Became part of Codex in v0.2.1.