Disabled Toggles inside Data Tables are wrong color

[Camille-R-C]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

When inside of a Data Table, small disabled toggles are the
wrong color. This causes accessibility issues because they then fade into the
background of the table.

Is this issue related to a specific component?

Small Toggle (disabled), Data Table

What did you expect to happen? What happened instead? What would you like to
see changed?

The colors of the toggles should be different when the toggles are inside of a Data Table.

What browser are you working in?

Firefox

What offering/product do you work on?

IBM Cloud Power Virtual Server

Steps to reproduce the issue

1. Create a Data Table with a Small Toggle as the value in one of its cells
2. Set that Small Toggle to Disabled
3. Run the IBM Accessibility checker tool

Please create a reduced test case in CodeSandbox

• React:
  https://codesandbox.io/s/serene-bohr-t7bh4

This can also be re-created on the Carbon Design System website. On the Code tab of the
DataTable page, in the live demo, replace {cell.value} with {<ToggleSmall disabled />}.

[emyarod]

color token updates will be required for this fix, will await confirmation from design on the updated token value

[tw15egan]

@carbon-design-system/design any ideas on what the small toggle colors should be when disabled inside Data Table? Current:

[aagonzales]

Hmm without changing the value of the tokens themselves I would say just pump up each disabled token to the next step. It starts to get a little close to the off colors but I think that's all we can do without introducing a new token or change a value across the board.

Pill: $disabled-02
Circle: $disabled-03