[Bug]: $border-subtle is using previous step's value

[janhassel]

Package

@carbon/styles

Browser

No response

Package version

1.37.0

React version

No response

Description

It seems like the $border-subtle tokens are always one step behind compared to the rest of the layering tokens.

This means that a UI element with a $layer-02 background will be paired with a $border-subtle-01 border. In the dark themes, these two values are the same though, resulting in the border being invisible.

Reproduction/example

https://stackblitz.com/edit/github-recj8l?file=src%2FApp.jsx

Steps to reproduce

see above

Suggested Severity

None

Application/PAL

No response

Code of Conduct

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

[guidari]

Hey @carbon-design-system/design can you guys help with that one? Please

Looks like the background is being paried with the wrong border-subtle.

In this file it's saying we should pair the layer-02 with border-subtle-02, but in the current example showed in Stackblitz we don't have that.

Here a PR to clarify the combination: #12355
We have also have this PR from @tw15egan
Something seem weird about the dark theme

[tw15egan]

It's definitely a weird issue, since border has 4 values, and all other layer tokens have 3. I recall some issues that came up when some of these elements that use a border-subtle were placed in a Modal.

[tay1orjones]

Here's some next steps we discussed today as a team:

1. Spin up a stackblitz with a dropdown on a background, dropdown on layer 1, layer 2, layer 3
2. It's also super noticeable with Accordion
3. Review the issue with design by showing them this example
4. Determine next steps and how to fix

[janhassel]

@tay1orjones Here's a stackblitz demo: https://stackblitz.com/edit/github-tysskn?file=src%2FApp.jsx

The demo element is using $layer as the background and has a 1px $border-subtle.

[alexandrutatarciuc]

The current implementation #15415, while functional, is a workaround that doesn't address the underlying issue. In fact, it creates a discrepancy between code and design and is problematic for those building upon the Carbon Design System, as it requires the implementation of a similar workaround.

The root cause appears to be that the $border-subtle contextual tokens point to the wrong layering tokens. Please compare the token definitions (g90 theme) in code to the documentation/Figma files:

Code:

Documentation/Figma:

What I believe needs to be done is to change the implementation of emit-layer-tokens mixin in the _layer-tokens.scss to account for the $border-subtle-00 use case.