Update design tokens with latest values

[joshblack]

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

[joshblack]

@aagonzales are there any values in particular that stood out as wrong that I should add to the checklist to be changed before doing an overall audit?

[aagonzales]

Just the ones that were brought up in the discussion thread.

[joshblack]

@aagonzales I have highlight and toggle-off from that thread in the checklist, are there any others ones from the discussion? I wanted to confirm specific changes as I was unsure what the takeaways were in the discussion for tokens like text-error.

---

As a reference to those reading this issue, this is the discussion that we're referring to: #10247 (comment)

[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)

[tay1orjones]

@aagonzales $layer-disabled is used in a few spots:

• carbon-components
  • data-table-action
• @carbon/styles
  • code-snippet
  • data-table-action
  • tag
  • tile
  • toggle

This link shows each one in context. Do you think these should be updated to something else so we can remove layerDisabled, or should we keep it based on these usages?

[tay1orjones]

@aagonzales $field-disabled is used in a few spots too:

• carbon-components
  • date-picker
  • search
  • text-input
• @carbon/styles
  • date-picker
  • list-box
  • number-input
  • select
  • slider
  • text-area
  • text-input

This link shows each one in context. Same deal - I can update them if you'd like to aim for removing $field-disabled. Otherwise we can leave it in?

[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 #9832 (comment)