carbon: Problem with dark themes' `$ui-02` and '$ui-03` values are the same
Problem:
Dark theme’s $ui-02 and '$ui-03` are the same.
$ui-02
It appears $ui-02 has the same usage and values as $field-02 on all themes. Potentially we can drop $ui-02 if there’s never a use case for it.
$ui-03
$ui-03 are showing up in the following places:
- Accordion, divider lines
- Code snippet with numbers, divider line on the left between num and code
- Tabs, underline for unselected
- Progress indicator, progress bar
- Pagination, divider lines
- Overflow, rule
- Data table, header bar
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 21 (19 by maintainers)
I would be fine with calling this new token
decorative-01until we audit our token naming forv11.Values per theme:
#e0e0e0#e0e0e0#6f6f6f#525252Oh right sorry, reread above comments ^ we will need to create a new token to use instead of updating ui-03 token values. We don’t want to update values for ui-03 because then it will affect components negatively across the board that don’t have a light prop.
yaaasss
The way we have it defined is as follows:
As you can see, if we switch it to use the field as the background, every light will get 10 steps closer. This is fine for the light themes since they will be a step away from the rule. But on the dark themes, they will disappear since all 3 values will be the same.
If we are going to expand the application of
lightvariations within a theme, it seems like we need a new set of tokens that are explicitly used in these scenarios. I think this solution may be needed regardless, as even the white (g10 --> g20) and g10 (white --> g20) have variation in the contrast between the background and the rule.we are still trying to figure that out ! 😃
Proposing to change
$ui-03to these values#DCDCDC#DCDCDC#3D3D3D#3D3D3DTo do:
$ui-03value in the components listed above, then,carbon-elementsrepo to update the tokencarbon-websiterepo to update the token in website