The problem

With the new proposal of the color overlay token to be Black # 00000, @ 60 % across all themes (white, gray 10, gray 90, gray 100) for better contrast. We have concluded in exploration that side panel has a border and it would be great to have that consistency of a border to be around Modal and Tearseet/Stacking Tearsheet using $border-sublte-01.

Key links:

• [Overlay token] Audit #19996
• [Overlay token] Design iterations #19999
• [Overlay token] Create design spec #19997

Figma file link:

• Figma file link of all exploration

The solution

• Add a border around the Modal (also eventually Tearsheet / Stacking Tearsheet) for React and Web Components using $border-subtle-01

Examples

White theme example:

Gray 10 theme example:

Gray 90 theme example:

Gray 100 theme example:

Design impact

Yes, visual design

Documentation impact

• The website documentation (carbondesignsystem.com)
• Figma kit documentation
• Storybook(s) documentation
• I'm not sure

Package

@carbon/web-components, @carbon/react, @carbon/colors

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct