Page MenuHomePhabricator

Update active color state for link component
Open, Needs TriagePublic

Description

Background/Goal

Currently our active links in production are using yellow and we should use Accent30 #2A4B8D as specified in our Figma spec sheet. Also, yellow is not accessible for this active state.

Captura de pantalla 2022-02-22 a las 20.11.18.png (948×2 px, 1 MB)
Captura de pantalla 2022-02-22 a las 20.14.37.png (738×956 px, 223 KB)

User stories

As a designer I need to have the same states in both Figma file and code. As a web user I need to have an accessible color for active links.

Acceptance criteria (or Done)

  • Update active link for Blue links
  • Update active link for Red links

Event Timeline

bmartinezcalvo renamed this task from Update Active link color to Update active color state for link component.Feb 22 2022, 7:14 PM
bmartinezcalvo updated the task description. (Show Details)

Dear @bmartinezcalvo
My name is Moshtagh Maveddat.

I’m a UX Designer and the owner of Moshtagh Design studio in Tehran. by this message, I wanted to Announce my readiness to help in MediaWiki product Design.

So it would be amazing if you guide me to access the Figma file or show me another way to contribute.

Warm regards
Moshtagh

Thank you @Moshtagh.maveddat, we are excited to have your interest in contributing to the design system!

Right now, we are in a testing phase with the design system. Our Figma files, as well as our current workflows, are undergoing many changes. We plan to open design contributions up to volunteers once we have completed our design tokens in Figma, since they are the foundation for all of the design systems work. Our roadmap can be found on our team's MediaWiki page if you'd like to learn more about what's next and stay updated on our timing. There will be many updates coming up in April, and we hope we can work with you soon!

Dear @STHart
Thanks a lot for sharing the roadmap. Yes, The design tokens are very necessary to keep every single detail in consistency in a team work. I can’t wait to do my first contributions after it opens on may 😎😍

I also have some years of experience in creating and managing Design tokens so just send me an email if I could do any help.

Warm regards
Moshtagh

Sgs subscribed.

Hi, is this task meant to fix the current production issue? It's being raised as an accessibility concern in T307752#7938996. I have filed T308700: Active link color is not accessible since I could not find other tasks mentioning this problem.

Hi, is this task meant to fix the current production issue? It's being raised as an accessibility concern in T307752#7938996. I have filed T308700: Active link color is not accessible since I could not find other tasks mentioning this problem.

@Sgs this task is also related with applying the same color tokens that we've defined in T296995 (view Figma spec sheet here). Also, the color defined for Active Link is #2A4B8D in our Link component Figma spec sheet.

Captura de pantalla 2022-05-23 a las 13.45.22.png (812×1 px, 202 KB)

This #2A4B8D fits with our accessibility contrast and also it's the color defined as an active color token.

Captura de pantalla 2022-05-23 a las 13.48.02.png (432×434 px, 19 KB)
Captura de pantalla 2022-05-23 a las 13.47.24.png (782×1 px, 114 KB)