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

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

@@ -1,23 +1,29 @@
+@use "../helpers";
+
 @mixin set-component-variables($size) {
-	/* Those variables are only for components to calculate heights and change icons */
-	--db-icon-font-weight: var(--db-base-body-icon-weight-#{$size});
-	--db-icon-font-size: var(--db-base-body-icon-font-size-#{$size});
+	/* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+	@layer #{helpers.$layer-variables} {
+		/* Those variables are only for components to calculate heights and change icons */
+		--db-icon-font-weight: var(--db-base-body-icon-weight-#{$size});
+		--db-icon-font-size: var(--db-base-body-icon-font-size-#{$size});
+	}
 }
 
 @mixin set-font-size($size) {
-	line-height: var(--db-type-body-line-height-#{$size});
-	font-size: var(--db-type-body-font-size-#{$size});
+	font: var(--db-type-body-#{$size});
 }
 
 @mixin set-headline-variables($size) {
-	/* Those variables are only for components to calculate heights and change icons */
-	--db-icon-font-weight: var(--db-base-headline-icon-weight-#{$size});
-	--db-icon-font-size: var(--db-base-headline-icon-font-size-#{$size});
+	/* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+	@layer #{helpers.$layer-variables} {
+		/* Those variables are only for components to calculate heights and change icons */
+		--db-icon-font-weight: var(--db-base-headline-icon-weight-#{$size});
+		--db-icon-font-size: var(--db-base-headline-icon-font-size-#{$size});
+	}
 }
 
 @mixin set-headline-size($size) {
-	line-height: var(--db-type-headline-line-height-#{$size});
-	font-size: var(--db-type-headline-font-size-#{$size});
+	font: var(--db-type-headline-#{$size});
 }
 
 $font-sizes: "3xl", "2xl", "xl", "lg", "md", "sm", "xs", "2xs", "3xs";
@@ -39,13 +45,13 @@ $font-sizes: "3xl", "2xl", "xl", "lg", "md", "sm", "xs", "2xs", "3xs";
 		}
 
 		%db-overwrite-font-size-#{$font-size} {
-			@include set-component-variables($font-size);
 			@include set-font-size($font-size);
+			@include set-component-variables($font-size);
 		}
 
 		%db-overwrite-headline-size-#{$font-size} {
-			@include set-headline-variables($font-size);
 			@include set-headline-size($font-size);
+			@include set-headline-variables($font-size);
 		}
 	}
 }

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

@@ -1,167 +1,313 @@
+/* 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 {}
+
 .db-font-size-3xl,
 [data-font-size="3xl"] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-3xl);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-3xl);
-  line-height: var(--db-type-body-line-height-3xl);
-  font-size: var(--db-type-body-font-size-3xl);
+  font: var(--db-type-body-3xl);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-font-size-3xl,
+  [data-font-size="3xl"] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-3xl);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-3xl);
+  }
 }
 
 .db-headline-size-3xl,
 [data-headline-size="3xl"] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
-  line-height: var(--db-type-headline-line-height-3xl);
-  font-size: var(--db-type-headline-font-size-3xl);
+  font: var(--db-type-headline-3xl);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-headline-size-3xl,
+  [data-headline-size="3xl"] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
+    --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
+  }
 }
 
+@layer variables {}
+
 .db-font-size-2xl,
 [data-font-size="2xl"] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
-  line-height: var(--db-type-body-line-height-2xl);
-  font-size: var(--db-type-body-font-size-2xl);
+  font: var(--db-type-body-2xl);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-font-size-2xl,
+  [data-font-size="2xl"] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
+  }
 }
 
 .db-headline-size-2xl,
 [data-headline-size="2xl"] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
-  line-height: var(--db-type-headline-line-height-2xl);
-  font-size: var(--db-type-headline-font-size-2xl);
+  font: var(--db-type-headline-2xl);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-headline-size-2xl,
+  [data-headline-size="2xl"] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
+    --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
+  }
 }
 
+@layer variables {}
+
 .db-font-size-xl,
 [data-font-size=xl] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-xl);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-xl);
-  line-height: var(--db-type-body-line-height-xl);
-  font-size: var(--db-type-body-font-size-xl);
+  font: var(--db-type-body-xl);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-font-size-xl,
+  [data-font-size=xl] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-xl);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-xl);
+  }
 }
 
 .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 {}
+
 .db-font-size-lg,
 [data-font-size=lg] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-lg);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-lg);
-  line-height: var(--db-type-body-line-height-lg);
-  font-size: var(--db-type-body-font-size-lg);
+  font: var(--db-type-body-lg);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-font-size-lg,
+  [data-font-size=lg] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-lg);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-lg);
+  }
 }
 
 .db-headline-size-lg,
 [data-headline-size=lg] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
-  line-height: var(--db-type-headline-line-height-lg);
-  font-size: var(--db-type-headline-font-size-lg);
+  font: var(--db-type-headline-lg);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-headline-size-lg,
+  [data-headline-size=lg] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
+    --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
+  }
 }
 
+@layer variables {}
+
 .db-font-size-md,
 [data-font-size=md] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
-  line-height: var(--db-type-body-line-height-md);
-  font-size: var(--db-type-body-font-size-md);
+  font: var(--db-type-body-md);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-font-size-md,
+  [data-font-size=md] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+  }
 }
 
 .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 {}
+
 .db-font-size-sm,
 [data-font-size=sm] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
-  line-height: var(--db-type-body-line-height-sm);
-  font-size: var(--db-type-body-font-size-sm);
+  font: var(--db-type-body-sm);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-font-size-sm,
+  [data-font-size=sm] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
+  }
 }
 
 .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 {}
 
 .db-font-size-xs,
 [data-font-size=xs] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
-  line-height: var(--db-type-body-line-height-xs);
-  font-size: var(--db-type-body-font-size-xs);
+  font: var(--db-type-body-xs);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-font-size-xs,
+  [data-font-size=xs] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
+  }
 }
 
 .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 {}
 
 .db-font-size-2xs,
 [data-font-size="2xs"] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
-  line-height: var(--db-type-body-line-height-2xs);
-  font-size: var(--db-type-body-font-size-2xs);
+  font: var(--db-type-body-2xs);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-font-size-2xs,
+  [data-font-size="2xs"] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
+  }
 }
 
 .db-headline-size-2xs,
 [data-headline-size="2xs"] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
-  line-height: var(--db-type-headline-line-height-2xs);
-  font-size: var(--db-type-headline-font-size-2xs);
+  font: var(--db-type-headline-2xs);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-headline-size-2xs,
+  [data-headline-size="2xs"] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
+    --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
+  }
 }
 
+@layer variables {}
+
 .db-font-size-3xs,
 [data-font-size="3xs"] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
-  line-height: var(--db-type-body-line-height-3xs);
-  font-size: var(--db-type-body-font-size-3xs);
+  font: var(--db-type-body-3xs);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-font-size-3xs,
+  [data-font-size="3xs"] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
+  }
 }
 
 .db-headline-size-3xs,
 [data-headline-size="3xs"] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
-  --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
-  line-height: var(--db-type-headline-line-height-3xs);
-  font-size: var(--db-type-headline-font-size-3xs);
+  font: var(--db-type-headline-3xs);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-headline-size-3xs,
+  [data-headline-size="3xs"] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
+    --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
+  }
 }

package/build/styles/fonts/classes/body/2xl.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 {}
+
 .db-font-size-2xl,
 [data-font-size="2xl"] {
-  /* Those variables are only for components to calculate heights and change icons */
-  --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
-  --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
-  line-height: var(--db-type-body-line-height-2xl);
-  font-size: var(--db-type-body-font-size-2xl);
+  font: var(--db-type-body-2xl);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
+@layer variables {
+  .db-font-size-2xl,
+  [data-font-size="2xl"] {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
+  }
+}
+
+@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 {}
+
+@layer variables {}
+
+@layer variables {}