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

package/build/styles/density/_scaling-placeholder.scss

@@ -1,5 +1,6 @@
 @use "variables";
 @use "../screen-sizes";
+@use "../helpers";
 
 @function get-variable($key, $density, $size, $device: "") {
 	@return var(--db-#{$key}-#{$density}-#{$device}#{$size});
@@ -7,51 +8,69 @@
 
 @each $density in variables.$densities {
 	%db-scaling-#{$density} {
-		@each $sizing in variables.$sizings {
-			--db-sizing-#{$sizing}: #{get-variable(
-					"sizing",
-					$density,
-					$sizing
-				)};
-		}
-
-		@each $fix in variables.$sizings {
-			--db-spacing-fixed-#{$fix}: #{get-variable(
-					"spacing-fixed",
-					$density,
-					$fix
-				)};
-		}
-
-		@each $res in variables.$sizings {
-			--db-spacing-responsive-#{$res}: #{get-variable(
-					"spacing-responsive",
-					$density,
-					$res,
-					"mobile-"
-				)};
-		}
-
-		@include screen-sizes.screen() {
-			@each $res in variables.$sizings {
-				--db-spacing-responsive-#{$res}: #{get-variable(
-						"spacing-responsive",
+		/* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+		@layer #{helpers.$layer-variables} {
+			@each $sizing in variables.$sizings {
+				--db-sizing-#{$sizing}: #{get-variable(
+						"sizing",
 						$density,
-						$res,
-						"tablet-"
+						$sizing
 					)};
 			}
-		}
 
-		@include screen-sizes.screen("md") {
-			@each $res in variables.$sizings {
-				--db-spacing-responsive-#{$res}: #{get-variable(
-						"spacing-responsive",
+			@each $fix in variables.$sizings {
+				--db-spacing-fixed-#{$fix}: #{get-variable(
+						"spacing-fixed",
 						$density,
-						$res,
-						"desktop-"
+						$fix
 					)};
 			}
+
+			@include screen-sizes.screen-min-max(
+				(
+					max: "sm"
+				)
+			) {
+				@each $res in variables.$sizings {
+					--db-spacing-responsive-#{$res}: #{get-variable(
+							"spacing-responsive",
+							$density,
+							$res,
+							"mobile-"
+						)};
+				}
+			}
+
+			@include screen-sizes.screen-min-max(
+				(
+					min: "sm",
+					max: "md"
+				)
+			) {
+				@each $res in variables.$sizings {
+					--db-spacing-responsive-#{$res}: #{get-variable(
+							"spacing-responsive",
+							$density,
+							$res,
+							"tablet-"
+						)};
+				}
+			}
+
+			@include screen-sizes.screen-min-max(
+				(
+					min: "md"
+				)
+			) {
+				@each $res in variables.$sizings {
+					--db-spacing-responsive-#{$res}: #{get-variable(
+							"spacing-responsive",
+							$density,
+							$res,
+							"desktop-"
+						)};
+				}
+			}
 		}
 	}
 }

package/build/styles/density/_typography-placeholder.scss

@@ -1,35 +1,23 @@
 @use "sass:string";
 @use "variables";
 @use "../screen-sizes";
+@use "../helpers";
 
-@function get-typography(
-	$density,
-	$device,
-	$size,
-	$type,
-	$attribute: "font-size"
-) {
+@function get-typography($density, $device, $size, $type) {
 	@return var(
 		string.unquote(
-			"--db-typography-#{$density}-#{$device}-#{$type}-#{$size}-#{$attribute}"
+			"--db-typography-#{$density}-#{$device}-#{$type}-#{$size}"
 		)
 	);
 }
 
 @mixin get-font($density, $device, $size, $type: "body") {
-	--db-type-#{$type}-font-size-#{$size}: #{get-typography(
+	--db-type-#{$type}-#{$size}: #{get-typography(
 			$density,
 			$device,
 			$size,
 			$type
 		)};
-	--db-type-#{$type}-line-height-#{$size}: #{get-typography(
-			$density,
-			$device,
-			$size,
-			$type,
-			"line-height"
-		)};
 }
 
 @mixin get-icons($density, $device, $size, $type: "body") {
@@ -43,43 +31,79 @@
 
 @each $density in variables.$densities {
 	%db-typography-headline-#{$density} {
-		@each $size in variables.$sizings {
-			@include get-font($density, "mobile", $size, "headline");
-			@include get-icons($density, "mobile", $size, "headline");
-		}
+		/* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+		@layer #{helpers.$layer-variables} {
+			@include screen-sizes.screen-min-max(
+				(
+					max: "sm"
+				)
+			) {
+				@each $size in variables.$sizings {
+					@include get-font($density, "mobile", $size, "headline");
+					@include get-icons($density, "mobile", $size, "headline");
+				}
+			}
 
-		@include screen-sizes.screen() {
-			@each $size in variables.$sizings {
-				@include get-font($density, "tablet", $size, "headline");
-				@include get-icons($density, "tablet", $size, "headline");
+			@include screen-sizes.screen-min-max(
+				(
+					min: "sm",
+					max: "md"
+				)
+			) {
+				@each $size in variables.$sizings {
+					@include get-font($density, "tablet", $size, "headline");
+					@include get-icons($density, "tablet", $size, "headline");
+				}
 			}
-		}
 
-		@include screen-sizes.screen("md") {
-			@each $size in variables.$sizings {
-				@include get-font($density, "desktop", $size, "headline");
-				@include get-icons($density, "desktop", $size, "headline");
+			@include screen-sizes.screen-min-max(
+				(
+					min: "md"
+				)
+			) {
+				@each $size in variables.$sizings {
+					@include get-font($density, "desktop", $size, "headline");
+					@include get-icons($density, "desktop", $size, "headline");
+				}
 			}
 		}
 	}
 
 	%db-typography-body-#{$density} {
-		@each $size in variables.$sizings {
-			@include get-font($density, "mobile", $size);
-			@include get-icons($density, "mobile", $size);
-		}
+		/* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+		@layer #{helpers.$layer-variables} {
+			@include screen-sizes.screen-min-max(
+				(
+					max: "sm"
+				)
+			) {
+				@each $size in variables.$sizings {
+					@include get-font($density, "mobile", $size);
+					@include get-icons($density, "mobile", $size);
+				}
+			}
 
-		@include screen-sizes.screen() {
-			@each $size in variables.$sizings {
-				@include get-font($density, "tablet", $size);
-				@include get-icons($density, "mobile", $size);
+			@include screen-sizes.screen-min-max(
+				(
+					min: "sm",
+					max: "md"
+				)
+			) {
+				@each $size in variables.$sizings {
+					@include get-font($density, "tablet", $size);
+					@include get-icons($density, "tablet", $size);
+				}
 			}
-		}
 
-		@include screen-sizes.screen("md") {
-			@each $size in variables.$sizings {
-				@include get-font($density, "desktop", $size);
-				@include get-icons($density, "mobile", $size);
+			@include screen-sizes.screen-min-max(
+				(
+					min: "md"
+				)
+			) {
+				@each $size in variables.$sizings {
+					@include get-font($density, "desktop", $size);
+					@include get-icons($density, "desktop", $size);
+				}
 			}
 		}
 	}