fix: tag colors for emphasis strong (#1454)

* fix: colors for tag to work with dark-mode

* fix: tag colors for strong emphasis

Author: nmerget

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();
 					}
 				}