diff --git a/packages/components/src/styles/tag-components.scss b/packages/components/src/styles/tag-components.scss index 774c0b3267e6..0be103534d47 100644 --- a/packages/components/src/styles/tag-components.scss +++ b/packages/components/src/styles/tag-components.scss @@ -2,11 +2,18 @@ @use "@db-ui/foundations/build/scss/color/color-variants" as *; @use "@db-ui/foundations/build/scss/helpers/component" as *; +@mixin overwrite-strong-white() { + /* We force white as color for strong tags */ + --db-current-color: #fff; + color: var(--db-current-color); +} + @mixin get-tag-colors() { @extend %db-bg-neutral-strong; &[data-emphasis="strong"] { @extend %db-neutral-component; + @include overwrite-strong-white(); } @each $name, $colors in $component-variants { @@ -16,24 +23,32 @@ &[data-emphasis="strong"] { @extend %db-critical-component; + + @include overwrite-strong-white(); } } @else if ($name == "informational") { @extend %db-bg-informational; &[data-emphasis="strong"] { @extend %db-informational-component; + + @include overwrite-strong-white(); } } @else if ($name == "warning") { @extend %db-bg-warning; &[data-emphasis="strong"] { @extend %db-warning-component; + + @include overwrite-strong-white(); } } @else if ($name == "successful") { @extend %db-bg-successful; &[data-emphasis="strong"] { @extend %db-successful-component; + + @include overwrite-strong-white(); } } @@ -45,6 +60,10 @@ } @mixin get-tag-colors-interactive() { + &[data-emphasis="strong"] { + @include overwrite-strong-white(); + } + &:has(input:not(:checked)) { @extend %db-bg-neutral; } @@ -54,6 +73,7 @@ &[data-emphasis="strong"] { @extend %db-neutral-component-ia; + @include overwrite-strong-white(); } @each $name, $colors in $component-variants { @@ -63,24 +83,32 @@ &[data-emphasis="strong"] { @extend %db-critical-component-ia; + + @include overwrite-strong-white(); } } @else if ($name == "informational") { @extend %db-bg-informational-ia; &[data-emphasis="strong"] { @extend %db-informational-component-ia; + + @include overwrite-strong-white(); } } @else if ($name == "warning") { @extend %db-bg-warning-ia; &[data-emphasis="strong"] { @extend %db-warning-component-ia; + + @include overwrite-strong-white(); } } @else if ($name == "successful") { @extend %db-bg-successful-ia; &[data-emphasis="strong"] { @extend %db-successful-component-ia; + + @include overwrite-strong-white(); } }