Update design tokens with latest values

Before our RC0 release, we need to go through the tokens defined in our themes package and verify that the values match the latest in: https://carbondesignsystem.notion.site/final-List-of-new-tokens-c507394e43fe4daa9f0cd0eedb25d1e4

Checklist

• Correct the values for the following tokens
  • highlight should be blue-80 in g100
  • toggle-off should be gray-60 in g100
• Compare the netlify preview with the final token list in Notion
• For any changes, update the values for the token in the corresponding theme file under: https://github.com/carbon-design-system/carbon/tree/main/packages/themes/src/next
• Create a PR with updates

[aagonzales]

Yeah I know I talked to @joshblack about this and maybe we never opened a ticket for it but anywhere where $field-disabled is used we’re just going back to using $field and same with $layer-disabled (should be replaced with just $layer.

So they’re in use now but they shouldn’t be. Code needs to be updated to replace the disabled tokens.

Update: Here’s the issue https://github.com/carbon-design-system/carbon/issues/9832#issuecomment-984082532

[aagonzales]

Color token value audit When auditing the tokens today, I’ve noticed a lot of the hover state tokens are still using the old adjustLightness function instead of the new IDL hover tokens. Here is the list that needs to be updated along with other bugs I found. They almost all are related to the hover color so idk what’s up with that.

White theme

• backgroundInverseHover: Gray-80-hover
• backgroundSelectedHover: Gray-20-hover
• layerHover01: Gray-10-hover
• layerHover02: White-hover
• layerHover03: Gray-10-hover
• layerDisabled: remove?
• layerAccentHover01: Gray-20-hover
• layerAccentHover02: Gray-20-hover
• layerAccentHover03: Gray-20-hover
• fieldHover01: Gray-10-hover
• fieldHover02: White-hover
• fieldHover03: Gray-10-hover
• fieldDisabled: remove?
• iconDisabled: adjustAlpha(iconPrimary, 0.25);

Gray 10 theme

• backgroundHover: Gray-10-hover
• backgroundInverseHover: Gray-80-hover
• backgroundSelectedHover: Gray-20-hover
• layerDisabled: remove?
• layerAccentHover01: Gray-20-hover
• layerAccentHover02: Gray-20-hover
• layerAccentHover03: Gray-20-hover
• fieldDisabled: remove?
• skeletonBackground: Gray-10-hover
• iconDisabled: adjustAlpha(iconPrimary, 0.25);

Gray 90 theme

• backgroundHover: Gray-90-hover
• backgroundInverseHover: Gray-10-hover
• backgroundSelectedHover: Gray-80-hover
• layerHover01: Gray-80-hover
• layerDisabled: remove?
• layerAccentHover01: Gray-70-hover
• layerAccentHover02: Gray-60-hover
• fieldHover01: Gray-80-hover
• fieldDisabled: remove?
• iconDisabled: adjustAlpha(iconPrimary, 0.25);
• skeletonBackground: Gray-90-hover
• supportInfoInverse: Blue-70

Gray 100 theme

• backgroundHover: Gray-100-hover
• backgroundInverseHover: Gray-10-hover
• backgroundSelectedHover: Gray-90-hover
• layerHover01: Gray-90-hover
• layerDisabled: remove?
• layerAccentHover01: Gray-80-hover
• fieldDisabled: remove?
• textError: Red-40
• iconDisabled: adjustAlpha(iconPrimary, 0.25);
• supportInfoInverse: Blue-70
• highlight: Blue 80
• toggleOff: Gray 60

Button tokens

• $button-danger-hover
  • themes.$white: #b81922 (Red 60 hover)
  • themes.$g10: #b81922 (Red 60 hover)
• $button-primary-hover
  • themes.$white: #0050e6 (Blue 60 hover)
  • themes.$g10: #0050e6 (Blue 60 hover)
  • themes.$g90: #0050e6 (Blue 60 hover)
  • themes.$g100: #0050e6 (Blue 60 hover)
• $button-secondary-hover
  • themes.$white: #474747 (Gray 80 hover)
  • themes.$g10: #474747 (Gray 80 hover)
  • themes.$g90: #5e5e5e (Gray 60 hover)
  • themes.$g100: #5e5e5e (Gray 60 hover)
• $button-tertiary-hover
  • themes.$white: #0050e6 (Blue 60 hover)
  • themes.$g10: #0050e6 (Blue 60 hover)