Shopify/polaris-tokens

Update color yellow dark for accessibility

sarahill opened this issue · 8 comments

sarahill commented

Update color-yellow-dark for accessibility

Problem

Yellow dark is currently used for text and icons to convey a warning to the merchant in the UI. It doesn't currently pass WCAG constrast standards of 4.5:1.

We started to run into the issue when updating the ExceptionList. See for details Shopify/polaris#813

Solution

I slightly adjusted the brightness to help with contrast. Update yellow dark to use #8A6116 instead of #9c6f19.

image

Follow these steps

  • If you haven’t yet, clone this repository 
    dev clone polaris-tokens
dev up
  • Fetch tokens from Invision DSM (Design System Manager) 
    dev cd polaris-tokens
git checkout master
git pull
git checkout -B update-color-tokens
yarn getTokensFromInvisionDSM
yarn dist
yarn test -u
  • Update CHANGELOG.md
  • Commit & push the changes 
    git commit -am "Update color tokens to the latest version"
git push origin update-color-tokens
  • Open a pull request
kaelig commented

Sounds like a good change, do you need help to ship it? Happy to walk through the process together.

sarahill commented

I think I remember how to do it. I will reach out with questions though. Thank you!

  • 👍1
sarahill commented

I'm having some trouble when I run the following.

yarn get-tokens-from-invision-dsm
yarn dist
yarn test -u

After I pull the colors from DSM it seems to be deleting all of the colors except purple. I thought I had done something wrong previously so I closed the branch and started over but same thing. Any ideas @kaelig ? I didn't edit anything except for yellow-dark in the DSM Sketch plugin.

What I'm seeing locally:

screen shot 2019-01-03 at 5 52 48 pm

kaelig commented

Sorry about that! It seems like the order in which color palettes come from the API has changed. Our script was picking up the first palette, which in this case is now the purple palette.

I just pushed a fix to master in 4ea8f91, can you try again?

sarahill commented

That worked! Thanks, Kaelig :) PR opened.

kaelig commented

Note: this was released as part of @shopify/polaris-tokens v2.1.0

kaelig commented

👋 your project is using an outdated version of polaris-tokens and would benefit from this accessibility fix. Updating to 2.1.1 is warmly recommended 😊

  • Shopify/online-store-web (cc @Shopify/online-store-web)
  • Shopify/polaris-extended-styleguide (cc @tmlayton)
  • Shopify/android (cc @Shopify/mobile-foundations-android)
  • Shopify/ios (cc @Shopify/mobile-foundations-ios)

Upgrade instructions from v1

  • CSS: remove -base. For example: var(--color-ink-base) → var(--color-ink).
  • Sass: remove -base. For example: $color-ink-base → $color-ink.
  • JSON: remove -base. For example: tokens['color-ink-base'] → tokens['color-ink'].
  • Android: remove _base. For example: polaris_color_blue_base → polaris_color_blue.
  • JavaScript: remove Base. For example: colorPurpleBase → colorPurple.

Full release notes

dannbeau commented

Thanks @kaelig
Question would the iOS upgrade instructions be the same as Android or another of the cases you listed above:
#42 (comment)

never mind I see Dan already created an issue for us on iOS!

  • 👍1