@db-ux/core-components 3.1.20 → 4.0.1-0-540218c

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @db-ux/core-components
 
+## 4.0.1
+
+_version bump_
+
+
+## 4.0.0
+
+### Major Changes
+
+- feat: Switch stable rework - [see commit cb2deb0](https://github.com/db-ux-design-system/core-web/commit/cb2deb0f1c54900d1967483aea05d81279c02f59):
+  - **BREAKING CHANGE**: remove `emphasis` property
+  - introduce validation (invalid and valid)
+  - configurable label position
+
+- **BREAKING CHANGE**: refactor(Custom Select): renamed `ariaListLabel` property to `listLabel` - [see commit 966d5ad](https://github.com/db-ux-design-system/core-web/commit/966d5ad01f00d0ca1707cc316a63e2d431fff1e9)
+
 ## 3.1.20
 
 ### Patch Changes

package/agent/_instructions.md

@@ -2,8 +2,13 @@
 
 ### `DBButton` or `db-button`
 
-- available variants are `outline`, `brand`, `filled`, `ghost`
-- always use variant `outline` as default
+- available variants are `outlined`, `brand`, `filled`, `ghost`
+- always use variant `outlined` as default
 - use variant `brand` as CTA or primary action
 - if `noText`/`no-text` property is used add a `DBTooltip` or `db-tooltip` inside the Button
 - always add a `type` as property as best practise
+
+### `DBStack` or `db-stack`
+
+- there is no property `gap="fix-md"`, available values are `small`, `medium`, etc.
+- there is no property `direction="horizontal"`, available values are `row`, `column`, etc.

package/build/components/accordion-item/accordion-item.css

@@ -161,7 +161,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -250,6 +251,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/badge/badge.css

@@ -127,6 +127,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-badge {
   font-weight: 700;
   white-space: nowrap;

package/build/components/brand/brand.css

@@ -113,6 +113,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-brand {
   gap: var(--db-spacing-fixed-sm);
   align-items: center;

package/build/components/button/button.css

@@ -123,6 +123,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/checkbox/checkbox.css

@@ -82,7 +82,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -181,6 +182,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
@@ -294,6 +297,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-successful-on-bg-basic-emphasis-80-pressed
   );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-successful-on-bg-inverted-default
+  );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
@@ -319,15 +325,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:checked {
-  --db-icon-color: var(--db-successful-on-bg-inverted-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
-  	--db-successful-bg-inverted-contrast-high-default
+  	--db-successful-bg-inverted-contrast-low-default
   );
   --db-adaptive-bg-basic-transparent-full-hovered: var(
-  	--db-successful-bg-inverted-contrast-high-hovered
+  	--db-successful-bg-inverted-contrast-low-hovered
   );
   --db-adaptive-bg-basic-transparent-full-pressed: var(
-  	--db-successful-bg-inverted-contrast-high-pressed
+  	--db-successful-bg-inverted-contrast-low-pressed
   );
 }
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
@@ -343,6 +348,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-successful-on-bg-basic-emphasis-80-pressed
   );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-successful-on-bg-inverted-default
+  );
 }
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
@@ -371,15 +379,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:checked, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:checked {
-  --db-icon-color: var(--db-successful-on-bg-inverted-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
-  	--db-successful-bg-inverted-contrast-high-default
+  	--db-successful-bg-inverted-contrast-low-default
   );
   --db-adaptive-bg-basic-transparent-full-hovered: var(
-  	--db-successful-bg-inverted-contrast-high-hovered
+  	--db-successful-bg-inverted-contrast-low-hovered
   );
   --db-adaptive-bg-basic-transparent-full-pressed: var(
-  	--db-successful-bg-inverted-contrast-high-pressed
+  	--db-successful-bg-inverted-contrast-low-pressed
   );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) {
@@ -395,6 +402,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-critical-on-bg-basic-emphasis-80-pressed
   );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-critical-on-bg-inverted-default
+  );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
@@ -416,15 +426,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:checked {
-  --db-icon-color: var(--db-critical-on-bg-inverted-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
-  	--db-critical-bg-inverted-contrast-high-default
+  	--db-critical-bg-inverted-contrast-low-default
   );
   --db-adaptive-bg-basic-transparent-full-hovered: var(
-  	--db-critical-bg-inverted-contrast-high-hovered
+  	--db-critical-bg-inverted-contrast-low-hovered
   );
   --db-adaptive-bg-basic-transparent-full-pressed: var(
-  	--db-critical-bg-inverted-contrast-high-pressed
+  	--db-critical-bg-inverted-contrast-low-pressed
   );
 }
 .db-checkbox:has(input[data-custom-validity=invalid]), .db-checkbox[data-custom-validity=invalid] {
@@ -440,6 +449,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
   	--db-critical-on-bg-basic-emphasis-80-pressed
   );
+  --db-adaptive-on-bg-inverted-default: var(
+  	--db-critical-on-bg-inverted-default
+  );
 }
 .db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
 .db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
@@ -463,15 +475,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-checkbox:has(input[data-custom-validity=invalid]) input:checked, .db-checkbox[data-custom-validity=invalid] input:checked {
-  --db-icon-color: var(--db-critical-on-bg-inverted-default);
   --db-adaptive-bg-basic-transparent-full-default: var(
-  	--db-critical-bg-inverted-contrast-high-default
+  	--db-critical-bg-inverted-contrast-low-default
   );
   --db-adaptive-bg-basic-transparent-full-hovered: var(
-  	--db-critical-bg-inverted-contrast-high-hovered
+  	--db-critical-bg-inverted-contrast-low-hovered
   );
   --db-adaptive-bg-basic-transparent-full-pressed: var(
-  	--db-critical-bg-inverted-contrast-high-pressed
+  	--db-critical-bg-inverted-contrast-low-pressed
   );
 }
 .db-checkbox input {

package/build/components/checkbox/checkbox.scss

@@ -24,56 +24,6 @@
 	}
 }
 
-@mixin get-validity-color-check($key: "valid") {
-	$variant: successful;
-
-	@if $key != "valid" {
-		$variant: critical;
-	}
-
-	--db-check-element-border-color: var(
-		--db-#{$variant}-on-bg-basic-emphasis-70-default
-	);
-	--db-adaptive-on-bg-basic-emphasis-100-default: var(
-		--db-#{$variant}-on-bg-basic-emphasis-80-default
-	);
-	--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
-		--db-#{$variant}-on-bg-basic-emphasis-80-hovered
-	);
-	--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
-		--db-#{$variant}-on-bg-basic-emphasis-80-pressed
-	);
-
-	@include form-components.get-validity-message($key);
-
-	input {
-		&:not(:checked) {
-			--db-adaptive-bg-basic-transparent-full-default: var(
-				--db-#{$variant}-bg-basic-transparent-full-default
-			);
-			--db-adaptive-bg-basic-transparent-full-hovered: var(
-				--db-#{$variant}-bg-basic-transparent-full-hovered
-			);
-			--db-adaptive-bg-basic-transparent-full-pressed: var(
-				--db-#{$variant}-bg-basic-transparent-full-pressed
-			);
-		}
-
-		&:checked {
-			--db-icon-color: var(--db-#{$variant}-on-bg-inverted-default);
-			--db-adaptive-bg-basic-transparent-full-default: var(
-				--db-#{$variant}-bg-inverted-contrast-high-default
-			);
-			--db-adaptive-bg-basic-transparent-full-hovered: var(
-				--db-#{$variant}-bg-inverted-contrast-high-hovered
-			);
-			--db-adaptive-bg-basic-transparent-full-pressed: var(
-				--db-#{$variant}-bg-inverted-contrast-high-pressed
-			);
-		}
-	}
-}
-
 .db-checkbox {
 	@extend %helper-message;
 	@include form-components.set-default-check-element;
@@ -85,12 +35,12 @@
 
 	@include form-components.get-validity(check) {
 		&:has(.db-infotext[data-semantic="successful"]) {
-			@include get-validity-color-check("valid");
+			@include form-components.get-validity-color-checkbox("valid");
 		}
 	}
 
 	@include form-components.get-validity(check, "invalid") {
-		@include get-validity-color-check("invalid");
+		@include form-components.get-validity-color-checkbox("invalid");
 	}
 
 	input {

package/build/components/custom-select/custom-select.css

@@ -551,7 +551,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -678,6 +679,8 @@ input[type=radio]:checked) > label {
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-custom-select summary {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }
@@ -833,6 +836,18 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
     content: "*"/"";
   }
 }
+.db-custom-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-valid) label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-custom-select[data-variant=floating]:has(select[data-custom-validity=valid]) label, .db-custom-select[data-variant=floating][data-custom-validity=valid] label {
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
+}
+.db-custom-select[data-variant=floating]:has(select:not([data-custom-validity]):is(:required):user-invalid) label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
+.db-custom-select[data-variant=floating]:has(select[data-custom-validity=invalid]) label, .db-custom-select[data-variant=floating][data-custom-validity=invalid] label {
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
+}
 .db-custom-select[data-variant=floating] > label {
   opacity: var(--db-opacity-xl);
   position: absolute;
@@ -850,6 +865,14 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
   transition: none;
   opacity: 0;
 }
+.db-custom-select[data-variant=floating] summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  transition: none;
+  opacity: 0;
+}
 .db-custom-select[data-variant=floating] summary {
   /* stylelint-disable-next-line db-ux/use-spacings */
   padding-block-start: var(--db-base-body-icon-font-size-2xs);
@@ -893,6 +916,34 @@ input[type=radio]:checked) [id$=-placeholder] {
     transition: opacity var(--db-transition-straight-emotional);
   }
 }
+.db-custom-select[data-variant=floating]:has(summary:focus-within,
+summary:is(input, textarea):not(:placeholder-shown),
+> select option:checked:not(.placeholder),
+input[type=checkbox]:checked,
+input[type=radio]:checked) summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-block-start: var(--db-base-body-icon-font-size-2xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-custom-select[data-variant=floating]:has(summary:focus-within,
+  summary:is(input, textarea):not(:placeholder-shown),
+  > select option:checked:not(.placeholder),
+  input[type=checkbox]:checked,
+  input[type=radio]:checked) summary:is([type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=week],
+  [type=time]):not(:user-valid)::-webkit-datetime-edit {
+    transition: opacity var(--db-transition-straight-emotional);
+  }
+}
 .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
 > db-infotext > .db-infotext[data-semantic=successful]) {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -1005,6 +1056,15 @@ input[type=radio]:checked) [id$=-placeholder] {
   font-family: var(--db-font-family-sans);
   font-style: italic;
 }
+.db-custom-select summary:is([type=date],
+[type=datetime-local],
+[type=month],
+[type=week],
+[type=time]):not(:user-valid)::-webkit-datetime-edit {
+  opacity: var(--db-opacity-xl);
+  font-family: var(--db-font-family-sans);
+  font-style: italic;
+}
 .db-custom-select summary {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   caret-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);

package/build/components/custom-select-dropdown/custom-select-dropdown.css

@@ -358,6 +358,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-custom-select-dropdown {
   position: absolute;
   z-index: 32;

package/build/components/custom-select-form-field/custom-select-form-field.css

@@ -122,6 +122,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/custom-select-list/custom-select-list.css

@@ -122,6 +122,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/custom-select-list-item/custom-select-list-item.css

@@ -146,6 +146,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/header/header.css

@@ -117,6 +117,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 @layer variables {}
 
 @layer variables {}

package/build/components/infotext/infotext.css

@@ -123,6 +123,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
+/* Use for body tags like <p> */
+/* Use for headline tags like <h1> */
 .db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
   color: var(--db-icon-color, inherit);
   display: inline-block;
@@ -143,7 +145,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
   block-size: var(--db-icon-font-size, 1.5rem);
-  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
   content: var(--db-icon, attr(data-icon));
 }
 @supports (content: ""/"") {
@@ -180,13 +183,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
 .db-infotext[data-semantic=adaptive], .db-infotext:not([data-semantic]) {
-  color: var(--db-adaptive-bg-inverted-contrast-high-default);
+  color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=adaptive]::before, .db-infotext:not([data-semantic])::before {
   --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
 }
 .db-infotext[data-semantic=neutral] {
-  color: var(--db-neutral-bg-inverted-contrast-high-default);
+  color: var(--db-neutral-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=neutral]:not([data-icon])::before {
   --db-icon: "information_circle";
@@ -198,7 +201,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-infotext[data-semantic=critical] {
-  color: var(--db-critical-bg-inverted-contrast-high-default);
+  color: var(--db-critical-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=critical]:not([data-icon])::before {
   --db-icon: "exclamation_mark_circle";
@@ -210,7 +213,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-infotext[data-semantic=successful] {
-  color: var(--db-successful-bg-inverted-contrast-high-default);
+  color: var(--db-successful-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=successful]:not([data-icon])::before {
   --db-icon: "check_circle";
@@ -221,7 +224,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-infotext[data-semantic=warning] {
-  color: var(--db-warning-bg-inverted-contrast-high-default);
+  color: var(--db-warning-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=warning]:not([data-icon])::before {
   --db-icon: "exclamation_mark_triangle";
@@ -233,7 +236,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   );
 }
 .db-infotext[data-semantic=informational] {
-  color: var(--db-informational-bg-inverted-contrast-high-default);
+  color: var(--db-informational-on-bg-basic-emphasis-80-default);
 }
 .db-infotext[data-semantic=informational]:not([data-icon])::before {
   --db-icon: "information_circle";

package/build/components/infotext/infotext.scss

@@ -22,7 +22,7 @@
 
 	&[data-semantic="adaptive"],
 	&:not([data-semantic]) {
-		color: colors.$db-adaptive-bg-inverted-contrast-high-default;
+		color: colors.$db-adaptive-on-bg-basic-emphasis-80-default;
 
 		&::before {
 			--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
@@ -33,7 +33,7 @@
 		&[data-semantic="#{$name}"] {
 			@include icons.variant-icons($name);
 
-			color: var(--db-#{$name}-bg-inverted-contrast-high-default);
+			color: var(--db-#{$name}-on-bg-basic-emphasis-80-default);
 
 			&::before {
 				--db-icon-color: var(