@db-ux/core-foundations 2.0.0-0-custom-select-16b8cce → 2.0.1

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

@@ -1,14 +1,109 @@
+/* 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 */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@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 {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
 .db-headline-size-md,
 [data-headline-size=md] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
-  line-height: var(--db-type-headline-line-height-md);
-  font-size: var(--db-type-headline-font-size-md);
+  font: var(--db-type-headline-md);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
+@layer variables {
+  .db-headline-size-md,
+  [data-headline-size=md] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
+    --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
+  }
+}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}

package/build/styles/fonts/classes/headline/sm.css

@@ -1,14 +1,109 @@
+/* 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 */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@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 {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
 .db-headline-size-sm,
 [data-headline-size=sm] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
-  line-height: var(--db-type-headline-line-height-sm);
-  font-size: var(--db-type-headline-font-size-sm);
+  font: var(--db-type-headline-sm);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
+@layer variables {
+  .db-headline-size-sm,
+  [data-headline-size=sm] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
+    --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
+  }
+}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}

package/build/styles/fonts/classes/headline/xl.css

@@ -1,14 +1,109 @@
+/* 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 */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@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 {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
 .db-headline-size-xl,
 [data-headline-size=xl] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-xl);
-  line-height: var(--db-type-headline-line-height-xl);
-  font-size: var(--db-type-headline-font-size-xl);
+  font: var(--db-type-headline-xl);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
+@layer variables {
+  .db-headline-size-xl,
+  [data-headline-size=xl] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
+    --db-icon-font-size: var(--db-base-headline-icon-font-size-xl);
+  }
+}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}

package/build/styles/fonts/classes/headline/xs.css

@@ -1,14 +1,109 @@
+/* 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 */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@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 {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
 .db-headline-size-xs,
 [data-headline-size=xs] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-xs);
-  line-height: var(--db-type-headline-line-height-xs);
-  font-size: var(--db-type-headline-font-size-xs);
+  font: var(--db-type-headline-xs);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
+@layer variables {
+  .db-headline-size-xs,
+  [data-headline-size=xs] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
+    --db-icon-font-size: var(--db-base-headline-icon-font-size-xs);
+  }
+}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}

package/build/styles/helpers/_divider.scss

@@ -20,22 +20,22 @@
 		position: absolute;
 
 		@if $position == "top" {
-			block-size: variables.$db-border-height-3xs;
+			block-size: variables.$db-border-width-3xs;
 			inset-block-start: 0;
 			inset-inline: 0;
 			/* stylelint-disable-next-line at-rule-empty-line-before */
 		} @else if $position == "bottom" {
-			block-size: variables.$db-border-height-3xs;
+			block-size: variables.$db-border-width-3xs;
 			inset-block-end: 0;
 			inset-inline: 0;
 			/* stylelint-disable-next-line at-rule-empty-line-before */
 		} @else if $position == "left" {
-			inline-size: variables.$db-border-height-3xs;
+			inline-size: variables.$db-border-width-3xs;
 			inset-inline-start: 0;
 			inset-block: 0;
 			/* stylelint-disable-next-line at-rule-empty-line-before */
 		} @else if $position == "right" {
-			inline-size: variables.$db-border-height-3xs;
+			inline-size: variables.$db-border-width-3xs;
 			inset-inline-end: 0;
 			inset-block: 0;
 		}
@@ -45,6 +45,6 @@
 		// 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 */
-		border: variables.$db-border-height-3xs solid var(--db-divider-bg-color);
+		border: variables.$db-border-width-3xs solid var(--db-divider-bg-color);
 	}
 }

package/build/styles/helpers/_focus.scss

@@ -3,13 +3,13 @@
 
 %focus-placeholder {
 	&:not([data-disable-focus="true"]) {
-		outline: #{variables.$db-border-height-2xs} solid
+		outline: #{variables.$db-border-width-2xs} solid
 			var(
 				--db-focus-outline-color,
 				#{colors.$db-informational-on-bg-basic-emphasis-80-default}
 			);
-		outline-offset: variables.$db-border-height-xs;
-		box-shadow: 0 0 0 #{variables.$db-border-height-xs}
+		outline-offset: variables.$db-border-width-xs;
+		box-shadow: 0 0 0 #{variables.$db-border-width-xs}
 			var(--db-focus-box-shadow-bg-color, transparent);
 
 		&:not([type="radio"], [role="switch"]) {

package/build/styles/helpers/_index.scss

@@ -4,3 +4,4 @@
 @forward "shadow-dom";
 @forward "focus";
 @forward "divider";
+@forward "layer";

package/build/styles/helpers/_layer.scss

@@ -0,0 +1 @@
+$layer-variables: variables;

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

@@ -6,11 +6,41 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Border */
 /* Transitions */
 /* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
 .db-focus-default:not([data-disable-focus=true]),
 [data-focus=default]:not([data-disable-focus=true]) {
-  outline: var(--db-border-height-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-80-default));
-  outline-offset: var(--db-border-height-xs);
-  box-shadow: 0 0 0 var(--db-border-height-xs) var(--db-focus-box-shadow-bg-color, transparent);
+  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-80-default));
+  outline-offset: var(--db-border-width-xs);
+  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
 }
 .db-focus-default:not([data-disable-focus=true]):not([type=radio], [role=switch]),
 [data-focus=default]:not([data-disable-focus=true]):not([type=radio], [role=switch]) {
@@ -37,7 +67,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
-  block-size: var(--db-border-height-3xs);
+  block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -46,7 +76,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-divider-top-before,
   [data-divider=top-before] {
     /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -64,7 +94,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
-  block-size: var(--db-border-height-3xs);
+  block-size: var(--db-border-width-3xs);
   inset-block-start: 0;
   inset-inline: 0;
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -73,7 +103,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-divider-top-after,
   [data-divider=top-after] {
     /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -91,7 +121,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
-  block-size: var(--db-border-height-3xs);
+  block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -100,7 +130,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-divider-bottom-before,
   [data-divider=bottom-before] {
     /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -118,7 +148,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
-  block-size: var(--db-border-height-3xs);
+  block-size: var(--db-border-width-3xs);
   inset-block-end: 0;
   inset-inline: 0;
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -127,7 +157,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-divider-bottom-after,
   [data-divider=bottom-after] {
     /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -145,7 +175,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
-  inline-size: var(--db-border-height-3xs);
+  inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -154,7 +184,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-divider-left-before,
   [data-divider=left-before] {
     /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -172,7 +202,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
-  inline-size: var(--db-border-height-3xs);
+  inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -181,7 +211,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-divider-left-after,
   [data-divider=left-after] {
     /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -199,7 +229,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
-  inline-size: var(--db-border-height-3xs);
+  inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
 }
@@ -207,7 +237,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-divider-right-before,
   [data-divider=right-before] {
     /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 
@@ -225,7 +255,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
-  inline-size: var(--db-border-height-3xs);
+  inline-size: var(--db-border-width-3xs);
   inset-inline-end: 0;
   inset-block: 0;
 }
@@ -233,6 +263,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   .db-divider-right-after,
   [data-divider=right-after] {
     /* stylelint-disable-next-line db-ux/use-border-color */
-    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }