[Bug]: <Tag type=outline /> background-color is incorrect on Layer 1/2/3

[justindm234]

Package

@carbon/react

Browser

Chrome

Package version

1.55.0

React version

18.2.0

Description

When rendered on Layer 1, 2, or 3, the background color of a Tag with type=outline is incorrect. The background color is --cds-background instead of --cds-layer.

Reproduction/example

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

Steps to reproduce

Render a Tag with type=outline on layer 1, 2, or 3

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

IBM Z Hardware Management Console

Code of Conduct

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

[tay1orjones]

I'm not sure if this is intentional or not. @carbon-design-system/design could you weigh in?

[laurenmrice]

Recently we have been doing a lot of work on revamping our tag component and adding new variants. I am thinking we should change the enabled background color to be transparent if it is being used on$background in some cases, and being used on different $layer sets. I actually did expect the outline tag to have a "hollow" background effect.

Using transparent as the background for outline tag, will also help differentiate it from a Selectable tag variant which was recently added to the system and uses $layer. I will create a spec exploration to make sure this works correctly.

• Create design spec

[RaghavRR]

Hello! If this issue is still open, I would love to contribute to solving it.