carbon-design-system/carbon-design-kit

[Color tokens]: add new inverse-link interactive state tokens

laurenmrice opened this issue · 2 comments

laurenmrice commented

Acceptance criteria

  • We recently added two new color tokens, $link-inverse-hover and $link-inverse-visited, to the system to be used in inverse situations where links are present to achieve correct color contrast across the different themes. (Example: In toggletip)

  • Also noticed an older color token $link-inverse-active needs to be added as well because it is used for the link active state in inverse situations.

  • Add the color tokens to the Color page table

  • Need to check: see if we need to add this to any variables or not? TBD

  • Need to check: adjust link color styles in the Toggletip component

$link-inverse-hover

Token: $link-inverse-hover
Role: Hover color for links on $background-inverse backgrounds

White theme Gray 10 theme Gray 90 theme Gray 100 theme
Blue 30 (#a6c8ff) Blue 30 (#a6c8ff) Blue 70 (#0043ce) Blue 70 (#0043ce)

$link-inverse-active

Token: $link-inverse-active
Role: Active color for links on $background-inverse backgrounds

White theme Gray 10 theme Gray 90 theme Gray 100 theme
Gray 10 (#f4f4f4) Gray 10 (#f4f4f4) Gray 100 (#161616) Gray 100 (#161616)

$link-inverse-visited

Token: $link-inverse-visited
Role: Color for visited links on $background-inverse backgrounds

White theme Gray 10 theme Gray 90 theme Gray 100 theme
Purple 40 (#be95ff) Purple 40 (#be95ff) Purple 60 (#8a3ffc) Purple 60 (#8a3ffc)
thyhmdo commented

This could be more like 3.

  • Added tokens to the Local variables
  • Added tokens to the old themes (Gray 10, Gray 90, Gray 100) and linked them to the All theme kit
  • Updated Link component colors + Prototype hovering for inverse color tokens
  • Linked link component to the Toggletip so I linked them (Link component was not linked with Toggle tip body)
  • 👀1
thyhmdo commented

Reviewed with Lauren and Juan