@db-ux/core-foundations 4.12.0 → 4.13.0-shell-f221975

package/build/styles/helpers/_divider.scss

@@ -1,6 +1,15 @@
 @use "../colors";
 @use "../variables";
 
+@mixin forced-color {
+	// border is the better implementation, but border height changes in windows based on pixel density
+	// we use it as a fallback for color contrast
+	/* stylelint-disable-next-line db-ux/use-border-color */
+	@media (forced-colors: active) {
+		@content;
+	}
+}
+
 // Workaround until we get Relative Color Syntax
 // https://codepen.io/bramus/pen/VwMZOQK
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1274133
@@ -19,32 +28,52 @@
 		background-color: var(--db-divider-bg-color);
 		position: absolute;
 
+		/* jscpd:ignore-start */
 		@if $position == "top" {
 			block-size: variables.$db-border-width-3xs;
 			inset-block-start: 0;
 			inset-inline: 0;
+
+			@include forced-color {
+				/* stylelint-disable-next-line db-ux/use-border-color */
+				border-block-start: variables.$db-border-width-3xs solid
+					var(--db-divider-bg-color);
+			}
 			/* stylelint-disable-next-line at-rule-empty-line-before */
 		} @else if $position == "bottom" {
 			block-size: variables.$db-border-width-3xs;
 			inset-block-end: 0;
 			inset-inline: 0;
+
+			@include forced-color {
+				/* stylelint-disable-next-line db-ux/use-border-color */
+				border-block-end: variables.$db-border-width-3xs solid
+					var(--db-divider-bg-color);
+			}
 			/* stylelint-disable-next-line at-rule-empty-line-before */
 		} @else if $position == "left" {
 			inline-size: variables.$db-border-width-3xs;
 			inset-inline-start: 0;
 			inset-block: 0;
+
+			@include forced-color {
+				/* stylelint-disable-next-line db-ux/use-border-color */
+				border-inline-start: variables.$db-border-width-3xs solid
+					var(--db-divider-bg-color);
+			}
 			/* stylelint-disable-next-line at-rule-empty-line-before */
 		} @else if $position == "right" {
 			inline-size: variables.$db-border-width-3xs;
 			inset-inline-end: 0;
 			inset-block: 0;
+
+			@include forced-color {
+				/* stylelint-disable-next-line db-ux/use-border-color */
+				border-inline-end: variables.$db-border-width-3xs solid
+					var(--db-divider-bg-color);
+			}
 		}
-	}
 
-	@media (forced-colors: active) {
-		// border is the better implementation, but border height changes in windows based on pixel density
-		// we use it as a fallback for color contrast
-		/* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-		border: variables.$db-border-width-3xs solid var(--db-divider-bg-color);
+		/* jscpd:ignore-end */
 	}
 }

package/build/styles/helpers/_interactive.scss

@@ -1 +1,18 @@
+@use "functions";
+
 $interactive-elements: 'button,input,textarea,summary,select,a[href],[tabindex]:not([tabindex="-1"])';
+
+/// Generates not-disabled > hover/active background-color states.
+/// @param {Color} $bg-hovered - The hovered background color token.
+/// @param {Color} $bg-pressed - The pressed background color token.
+@mixin interactive-bg($bg-hovered, $bg-pressed) {
+	@include functions.not-disabled {
+		@include functions.hover {
+			background-color: $bg-hovered;
+		}
+
+		@include functions.active {
+			background-color: $bg-pressed;
+		}
+	}
+}

package/build/styles/helpers/classes/all.css

@@ -26,18 +26,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-top-before,
-  [data-divider=top-before] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-top-before::before,
+  [data-divider=top-before]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-top-before::before,
+[data-divider=top-before]::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-top-after,
 [data-divider=top-after] {
@@ -53,18 +59,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-top-after,
-  [data-divider=top-after] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-top-after::after,
+  [data-divider=top-after]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-top-after::after,
+[data-divider=top-after]::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-bottom-before,
 [data-divider=bottom-before] {
@@ -80,18 +92,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-bottom-before,
-  [data-divider=bottom-before] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-bottom-before::before,
+  [data-divider=bottom-before]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-bottom-before::before,
+[data-divider=bottom-before]::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-bottom-after,
 [data-divider=bottom-after] {
@@ -107,18 +125,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-bottom-after,
-  [data-divider=bottom-after] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-bottom-after::after,
+  [data-divider=bottom-after]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-bottom-after::after,
+[data-divider=bottom-after]::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-left-before,
 [data-divider=left-before] {
@@ -134,18 +158,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-left-before,
-  [data-divider=left-before] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-left-before::before,
+  [data-divider=left-before]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-left-before::before,
+[data-divider=left-before]::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-left-after,
 [data-divider=left-after] {
@@ -161,18 +191,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-left-after,
-  [data-divider=left-after] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-left-after::after,
+  [data-divider=left-after]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-left-after::after,
+[data-divider=left-after]::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-right-before,
 [data-divider=right-before] {
@@ -188,17 +224,23 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-right-before,
-  [data-divider=right-before] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-right-before::before,
+  [data-divider=right-before]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-right-before::before,
+[data-divider=right-before]::before {
+  /* jscpd:ignore-end */
+}
 
 .db-divider-right-after,
 [data-divider=right-after] {
@@ -214,14 +256,20 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-right-after,
-  [data-divider=right-after] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-right-after::after,
+  [data-divider=right-after]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-right-after::after,
+[data-divider=right-after]::after {
+  /* jscpd:ignore-end */
+}

package/build/styles/helpers/classes/divider.css

@@ -15,18 +15,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-top-before,
-  [data-divider=top-before] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-top-before::before,
+  [data-divider=top-before]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-top-before::before,
+[data-divider=top-before]::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-top-after,
 [data-divider=top-after] {
@@ -42,18 +48,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-top-after,
-  [data-divider=top-after] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-top-after::after,
+  [data-divider=top-after]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-top-after::after,
+[data-divider=top-after]::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-bottom-before,
 [data-divider=bottom-before] {
@@ -69,18 +81,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-bottom-before,
-  [data-divider=bottom-before] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-bottom-before::before,
+  [data-divider=bottom-before]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-bottom-before::before,
+[data-divider=bottom-before]::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-bottom-after,
 [data-divider=bottom-after] {
@@ -96,18 +114,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-bottom-after,
-  [data-divider=bottom-after] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-bottom-after::after,
+  [data-divider=bottom-after]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-bottom-after::after,
+[data-divider=bottom-after]::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-left-before,
 [data-divider=left-before] {
@@ -123,18 +147,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-left-before,
-  [data-divider=left-before] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-left-before::before,
+  [data-divider=left-before]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-left-before::before,
+[data-divider=left-before]::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-left-after,
 [data-divider=left-after] {
@@ -150,18 +180,24 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-left-after,
-  [data-divider=left-after] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-left-after::after,
+  [data-divider=left-after]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-left-after::after,
+[data-divider=left-after]::after {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 
 .db-divider-right-before,
 [data-divider=right-before] {
@@ -177,17 +213,23 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-right-before,
-  [data-divider=right-before] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-right-before::before,
+  [data-divider=right-before]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-right-before::before,
+[data-divider=right-before]::before {
+  /* jscpd:ignore-end */
+}
 
 .db-divider-right-after,
 [data-divider=right-after] {
@@ -203,14 +245,20 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-divider-right-after,
-  [data-divider=right-after] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-divider-right-after::after,
+  [data-divider=right-after]::after {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-divider-right-after::after,
+[data-divider=right-after]::after {
+  /* jscpd:ignore-end */
+}

package/build/styles/icons/_icon-helpers.scss

@@ -43,7 +43,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
 	content: $icon;
 
 	// Hiding icon from screenreaders, https://www.w3.org/TR/css-content-3/#alt
-	// TODO: remove the @support wrapper as soon as we drop our partly-support for Firefox < version 128 (Enterprise ESR / Extended Support Release; expected to end in 2026, March / https://whattrainisitnow.com/calendar/)
+	// TODO: remove the @support wrapper as soon as we drop our partly-support for Firefox < version 128 (Enterprise ESR / Extended Support Release; expected to end in 2026, August / https://whattrainisitnow.com/calendar/)
 	@supports (content: ""/"") {
 		// stylelint-disable-next-line no-invalid-position-declaration
 		content: $icon / "";

package/build/styles/theme/_absolute.assets-paths.scss

@@ -1,5 +1,6 @@
 // If you serve your assets and your css on root level you might need those paths.
 @use "default.assets-paths" as assets-paths with (
 	$icons-path: "/assets/icons/",
-	$fonts-path: "/assets/fonts/"
+	$fonts-path: "/assets/fonts/",
+	$images-path: "/assets/images/"
 );

package/build/styles/theme/_default-images.scss

@@ -0,0 +1,14 @@
+@use "./default.assets-paths" as assets-paths;
+
+@mixin get-images {
+	--db-textarea-resizer-image: url("#{assets-paths.$images-path}resize_handle_corner.svg");
+	--db-textarea-scrollbar-button-decrement: url("#{assets-paths.$images-path}chevron_up.svg");
+	--db-textarea-scrollbar-button-increment: url("#{assets-paths.$images-path}chevron_down.svg");
+	--db-logo-aspect-ratio: 1;
+	--db-logo-url: url("#{assets-paths.$images-path}logo.svg");
+
+	// NOTE: --db-logo-url-short uses the same logo.svg as a placeholder.
+	// Override this token in your theme to provide a distinct short variant.
+	--db-logo-aspect-ratio-short: 1;
+	--db-logo-url-short: url("#{assets-paths.$images-path}logo.svg");
+}

package/build/styles/theme/_default.assets-paths.scss

@@ -1,2 +1,3 @@
 $icons-path: "../../assets/icons/" !default;
 $fonts-path: "../../assets/fonts/" !default;
+$images-path: "../../assets/images/" !default;

package/build/styles/theme/_rollup.assets-paths.scss

@@ -1,5 +1,6 @@
 // If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths.
 @use "default.assets-paths" as assets-paths with (
 	$icons-path: "@db-ux/core-foundations/assets/icons/",
-	$fonts-path: "@db-ux/core-foundations/assets/fonts/"
+	$fonts-path: "@db-ux/core-foundations/assets/fonts/",
+	$images-path: "@db-ux/core-foundations/assets/images/"
 );

package/build/styles/theme/_webpack.assets-paths.scss

@@ -1,5 +1,6 @@
 // If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths.
 @use "default.assets-paths" as assets-paths with (
 	$icons-path: "~@db-ux/core-foundations/assets/icons/",
-	$fonts-path: "~@db-ux/core-foundations/assets/fonts/"
+	$fonts-path: "~@db-ux/core-foundations/assets/fonts/",
+	$images-path: "~@db-ux/core-foundations/assets/images/"
 );