[Bug]: Token "field-disabled" not involved into layering model

[Eugeno]

Package

@carbon/colors

Browser

No response

Package version

v11 beta 2

Description

For example, we have a theme gray10, there is a white card (layering model). So disabled field is white on white background.
Looks like there should be filed-disabled-01, -02, -03.

CodeSandbox example

—

Steps to reproduce

check https://github.com/carbon-design-system/carbon/blob/36a6fdc307/packages/themes/src/next/g10.js

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[joshblack]

cc @aagonzales just wanted to check-in if this was something that we missed when implementing the layer sets or if there is something else going on here 👀

[Eugeno]

Same for placeholder.
Theme: gray90. field-03.
What is the result? gray-60 text on gray-60 background

[aagonzales]

For the field-disabled colors we've actually decided to not add those into the layer sets and we're actually going to remove $field-disabled entirely for the sake of simplicity because the color was actually change between enabled and disabled. So for the disabled state the input just keep $field-01 ect and the other elements indicate the input is disable like the text color change and removing the border bottom.

But you are right is we kept a distinct token for disabled field then we would need one for all three sets.

[aagonzales]

Also you are right, looks like we need to update some of the text tokens in the dark themes

G90 updates

• $text-placeholder should be updated to Gray 50 (that will get it visible on all fields, it never passes color contrast)
• $text-helper should be update to Gray 30 so it will be contrast accessible.

G100 updates

• $text-helper should be update to Gray 40 so it will be contrast accessible.

[aagonzales]

Re-opening issue as all concerns weren't addressed.

To-dos:

• Remove $field-disabled token
• Remove $layer-disabled token

Consequences:
Any place were $field-disabled and layer-disabled were used will now simply just continue using $field and $layer. There is not visual change in the backgrounds of disabled elements. Only text and icons change color and there these tokens are not needed.

Components that were using these tokens and will need to be updated:

• text input
• search
• select
• number input
• date picker
• dropdown
• text area