@db-ux/core-foundations 4.4.2 → 4.4.3

package/CHANGELOG.md

@@ -1,10 +1,14 @@
 # @db-ux/core-foundations
 
-## 4.4.2
+## 4.4.3
 
 _version bump_
 
 
+## 4.4.2
+
+_version bump_
+
 ## 4.4.1
 
 ### Patch Changes

package/build/styles/_screen-sizes.scss

@@ -81,10 +81,8 @@ $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 	}
 }
 
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
+// @mixin screen-min-max
+// @param $data an object like (min:"sm", max:"lg") or (min: "sm")
 @mixin screen-min-max($data) {
 	$min: "";
 	$max: "";

package/build/styles/_variables.scss

@@ -1,4 +1,4 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+// Use sizing values for fixed heights/widths e.g. the db-button has always a fixed height
 $db-sizing-3xs: var(--db-sizing-3xs);
 $db-sizing-2xs: var(--db-sizing-2xs);
 $db-sizing-xs: var(--db-sizing-xs);
@@ -9,7 +9,7 @@ $db-sizing-xl: var(--db-sizing-xl);
 $db-sizing-2xl: var(--db-sizing-2xl);
 $db-sizing-3xl: var(--db-sizing-3xl);
 
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+// Use fixed spacings for all kinds of distances (margin, padding, ...)
 $db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);
 $db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);
 $db-spacing-fixed-xs: var(--db-spacing-fixed-xs);
@@ -20,8 +20,8 @@ $db-spacing-fixed-xl: var(--db-spacing-fixed-xl);
 $db-spacing-fixed-2xl: var(--db-spacing-fixed-2xl);
 $db-spacing-fixed-3xl: var(--db-spacing-fixed-3xl);
 
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+// The primary use-case for responsive spacings are
+// paddings/gaps in an application e.g. the <main> should have a responsive padding.
 $db-spacing-responsive-3xs: var(--db-spacing-responsive-3xs);
 $db-spacing-responsive-2xs: var(--db-spacing-responsive-2xs);
 $db-spacing-responsive-xs: var(--db-spacing-responsive-xs);
@@ -32,13 +32,13 @@ $db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
 $db-spacing-responsive-2xl: var(--db-spacing-responsive-2xl);
 $db-spacing-responsive-3xl: var(--db-spacing-responsive-3xl);
 
-/* Elevation */
+// Elevation
 
 $db-elevation-sm: var(--db-elevation-sm);
 $db-elevation-md: var(--db-elevation-md);
 $db-elevation-lg: var(--db-elevation-lg);
 
-/* Border */
+// Border
 
 $db-border-width-3xs: var(--db-border-width-3xs);
 $db-border-width-2xs: var(--db-border-width-2xs);
@@ -60,7 +60,7 @@ $db-border-radius-2xl: var(--db-border-radius-2xl);
 $db-border-radius-3xl: var(--db-border-radius-3xl);
 $db-border-radius-full: var(--db-border-radius-full);
 
-/* Opacity */
+// Opacity
 
 $db-opacity-3xs: var(--db-opacity-3xs);
 $db-opacity-2xs: var(--db-opacity-2xs);
@@ -73,7 +73,7 @@ $db-opacity-2xl: var(--db-opacity-2xl);
 $db-opacity-3xl: var(--db-opacity-3xl);
 $db-opacity-full: var(--db-opacity-full);
 
-/* Transitions */
+// Transitions
 
 $db-transition-duration-extra-slow: var(--db-transition-duration-extra-slow);
 $db-transition-duration-slow: var(--db-transition-duration-slow);
@@ -89,7 +89,7 @@ $db-transition-straight-functional: var(--db-transition-straight-functional);
 $db-transition-straight-show: var(--db-transition-straight-show);
 $db-transition-straight-hide: var(--db-transition-straight-hide);
 
-/* Screen sizes */
+// Screen sizes
 
 $db-screen-xs: var(--db-screen-xs);
 $db-screen-sm: var(--db-screen-sm);
@@ -97,7 +97,7 @@ $db-screen-md: var(--db-screen-md);
 $db-screen-lg: var(--db-screen-lg);
 $db-screen-xl: var(--db-screen-xl);
 
-/* Container sizes */
+// Container sizes
 
 $db-container-3xs: var(--db-container-3xs);
 $db-container-2xs: var(--db-container-2xs);

package/build/styles/absolute.css

@@ -41,16 +41,6 @@
   font-weight: 900;
   src: url("/assets/fonts/OpenSans-ExtraBold-EU.woff2") format("woff2");
 }
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 blockquote:not([class]), [data-mode], :root,
 :host {
@@ -6023,12 +6013,6 @@ html::after {
   inherits: true;
 }
 /* Use this file if you want the default color and density in your project */
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -6112,12 +6096,6 @@ code {
 
 @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")
- */
 @layer variables {}
 
 :root,
@@ -10475,7 +10453,6 @@ head:has([name=color-scheme][content=dark]) + body {
   --db-color-scheme: dark;
 }
 
-/* TODO: Switch to attr() as soon as this one is fully supported */
 [data-mode=light] {
   color-scheme: light;
 }

package/build/styles/colors/_variables.additional-palette.scss

@@ -1,6 +1,6 @@
-/* Palette for additional colors */
+// Palette for additional colors
 
-/* Note: In general you don't need this file. Use this only if you really know what you do! */
+// Note: In general you don't need this file. Use this only if you really know what you do!
 
 // yellow
 $db-yellow-0: var(--db-yellow-0);

package/build/styles/colors/_variables.palette.scss

@@ -1,6 +1,6 @@
-/* Palette colors */
+// Palette colors
 
-/* Note: In general you don't need this file. Use this only if you really know what you do! */
+// Note: In general you don't need this file. Use this only if you really know what you do!
 
 // brand
 $db-brand-0: var(--db-brand-0);

package/build/styles/defaults/default-required.scss

@@ -53,7 +53,7 @@ head {
 	}
 }
 
-/* TODO: Switch to attr() as soon as this one is fully supported */
+// TODO: Switch to attr() as soon as this one is fully supported
 [data-mode="light"] {
 	color-scheme: light;
 }

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -126,12 +110,6 @@ 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")
- */
 .db-density-expressive,
 [data-density=expressive] {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */

package/build/styles/density/classes/expressive.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -120,12 +104,6 @@ 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")
- */
 .db-density-expressive,
 [data-density=expressive] {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */

package/build/styles/density/classes/functional.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -120,12 +104,6 @@ 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")
- */
 @layer variables {}
 
 @layer variables {}

package/build/styles/density/classes/regular.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -120,12 +104,6 @@ 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")
- */
 @layer variables {}
 
 .db-density-regular,

package/build/styles/fonts/_font-sizes.scss

@@ -32,12 +32,10 @@
 
 $font-sizes: "3xl", "2xl", "xl", "lg", "md", "sm", "xs", "2xs", "3xs";
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
+// Generates 3 types of placeholders, e.g.:
+// - %db-component-variables-md
+// - %db-font-size-md
+// - %db-overwrite-font-size-md
 @mixin generate-font-sizes() {
 	@each $font-size in $font-sizes {
 		%db-component-variables-#{$font-size} {

package/build/styles/fonts/_variables.scss

@@ -1,4 +1,4 @@
-/* Use for body tags like <p> */
+// Use for body tags like <p>
 
 $db-type-body-3xs: var(--db-type-body-3xs);
 $db-type-body-2xs: var(--db-type-body-2xs);
@@ -10,7 +10,7 @@ $db-type-body-xl: var(--db-type-body-xl);
 $db-type-body-2xl: var(--db-type-body-2xl);
 $db-type-body-3xl: var(--db-type-body-3xl);
 
-/* Use for headline tags like <h1> */
+// Use for headline tags like <h1>
 
 $db-type-headline-3xs: var(--db-type-headline-3xs);
 $db-type-headline-2xs: var(--db-type-headline-2xs);

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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 .db-font-size-3xl,
@@ -318,6 +302,3 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
   }
 }
-
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */

package/build/styles/fonts/classes/body/2xl.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -114,6 +98,3 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 @layer variables {}
-
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */

package/build/styles/fonts/classes/body/2xs.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -114,6 +98,3 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 @layer variables {}
-
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */

package/build/styles/fonts/classes/body/3xl.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 .db-font-size-3xl,
@@ -114,6 +98,3 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 @layer variables {}
-
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */

package/build/styles/fonts/classes/body/3xs.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -114,6 +98,3 @@ 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> */

package/build/styles/fonts/classes/body/all.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 .db-font-size-3xl,
@@ -210,6 +194,3 @@ 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> */

package/build/styles/fonts/classes/body/lg.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -114,6 +98,3 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 @layer variables {}
-
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */

package/build/styles/fonts/classes/body/md.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -114,6 +98,3 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 @layer variables {}
 
 @layer variables {}
-
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */