@db-ux/core-foundations 1.0.0-test-13b991d

package/build/styles/density/_densities.scss

@@ -0,0 +1,13 @@
+@use "variables";
+@use "typography-placeholder";
+@use "scaling-placeholder";
+@use "../fonts";
+
+@each $density in variables.$densities {
+	%db-density-#{$density} {
+		@extend %db-scaling-#{$density};
+		@extend %db-typography-headline-#{$density};
+		@extend %db-typography-body-#{$density};
+		@extend %db-overwrite-font-size-md;
+	}
+}

package/build/styles/density/_index.scss

@@ -0,0 +1,5 @@
+@forward "../fonts";
+@forward "scaling-placeholder";
+@forward "typography-placeholder";
+@forward "variables";
+@forward "densities";

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

@@ -0,0 +1,57 @@
+@use "variables";
+@use "../screen-sizes";
+
+@function get-variable($key, $density, $size, $device: "") {
+	@return var(--db-#{$key}-#{$density}-#{$device}#{$size});
+}
+
+@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",
+						$density,
+						$res,
+						"tablet-"
+					)};
+			}
+		}
+
+		@include screen-sizes.screen("md") {
+			@each $res in variables.$sizings {
+				--db-spacing-responsive-#{$res}: #{get-variable(
+						"spacing-responsive",
+						$density,
+						$res,
+						"desktop-"
+					)};
+			}
+		}
+	}
+}

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

@@ -0,0 +1,86 @@
+@use "sass:string";
+@use "variables";
+@use "../screen-sizes";
+
+@function get-typography(
+	$density,
+	$device,
+	$size,
+	$type,
+	$attribute: "font-size"
+) {
+	@return var(
+		string.unquote(
+			"--db-typography-#{$density}-#{$device}-#{$type}-#{$size}-#{$attribute}"
+		)
+	);
+}
+
+@mixin get-font($density, $device, $size, $type: "body") {
+	--db-type-#{$type}-font-size-#{$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") {
+	--db-base-#{$type}-icon-weight-#{$size}: #{string.unquote(
+			"var(--db-base-icon-weight-#{$density}-#{$device}-#{$type}-#{$size})"
+		)};
+	--db-base-#{$type}-icon-font-size-#{$size}: #{string.unquote(
+			"var(--db-base-icon-font-size-#{$density}-#{$device}-#{$type}-#{$size})"
+		)};
+}
+
+@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");
+		}
+
+		@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("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);
+		}
+
+		@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("md") {
+			@each $size in variables.$sizings {
+				@include get-font($density, "desktop", $size);
+				@include get-icons($density, "mobile", $size);
+			}
+		}
+	}
+}

package/build/styles/density/_variables.scss

@@ -0,0 +1,3 @@
+$densities: ("expressive", "regular", "functional");
+
+$sizings: "3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl";

package/build/styles/density/classes/_get-class.scss

@@ -0,0 +1,10 @@
+@use "../densities";
+@use "../../fonts";
+
+@mixin init($density) {
+	.db-density-#{$density},
+	[data-density="#{$density}"] {
+		@extend %db-density-#{$density};
+		@extend %db-font-size-md;
+	}
+}