Merge pull request #1361 from db-ui/refactor-font-sizes

refactor: naming of body-styles.scss fix issue for font-size overwrites

packages/components/src/components/button/button.scss

@@ -1,5 +1,5 @@
 @charset "utf-8";
-@use "@db-ui/foundations/build/scss/body-styles" as *;
+@use "@db-ui/foundations/build/scss/helpers/font" as *;
 @use "@db-ui/foundations/build/scss/variables" as *;
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/color-placeholder" as *;
@@ -28,7 +28,7 @@
 	}
 
 	&[data-size="small"] {
-		@extend %db-body-sm;
+		@extend %db-overwrite-font-size-sm;
 		block-size: $db-sizing-sm;
 
 		&:not(.is-icon-text-replace) {

packages/components/src/components/checkbox/checkbox.scss

@@ -80,11 +80,11 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height));
 
 	// Sizes
 	&%size-Small {
-		@extend %db-body-sm;
+		@extend %db-overwrite-font-size-sm;
 
 		// TODO: we still need to scale this
 		& + label {
-			@extend %db-body-sm;
+			@extend %db-overwrite-font-size-sm;
 			margin-inline-start: $db-spacing-fixed-2xs;
 		}
 	}

packages/components/src/components/infotext/infotext.scss

@@ -1,11 +1,11 @@
 @use "sass:map";
-@use "@db-ui/foundations/build/scss/body-styles" as *;
+@use "@db-ui/foundations/build/scss/helpers/font" as *;
 @use "@db-ui/foundations/build/scss/variables" as *;
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/color/color-variants" as *;
 
 .db-infotext {
-	@extend %db-body-sm;
+	@extend %db-overwrite-font-size-sm;
 
 	display: flex;
 
@@ -16,7 +16,7 @@
 	}
 
 	&[data-size="small"] {
-		@extend %db-body-xs;
+		@extend %db-overwrite-font-size-xs;
 
 		&::before {
 			display: none;

packages/components/src/components/input/input.scss

@@ -5,7 +5,7 @@
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/helpers/functions" as *;
 @use "@db-ui/foundations/build/scss/icon/icons.helpers" as *;
-@use "@db-ui/foundations/build/scss/body-styles" as *;
+@use "@db-ui/foundations/build/scss/helpers/font" as *;
 @use "@db-ui/foundations/build/scss/color-placeholder" as *;
 @use "@db-ui/foundations/build/scss/color/color-variants" as *;
 @use "@db-ui/foundations/build/scss/helpers/component" as *;
@@ -136,7 +136,7 @@
 		--icon-font-family: var(--db-base-icon-font-family);
 		--icon-font-size: var(--db-base-icon-font-size);
 
-		@extend %db-body-sm;
+		@extend %db-overwrite-font-size-sm;
 
 		font-size: var(--icon-font-size);
 
@@ -198,7 +198,7 @@
 	}
 
 	.description {
-		@extend %db-body-xs;
+		@extend %db-overwrite-font-size-xs;
 		margin: $db-spacing-fixed-2xs $db-spacing-fixed-sm 0;
 
 		display: flex;
@@ -282,7 +282,7 @@
 		&[type="time"],
 		&[type="url"],
 		&[type="week"] {
-			@extend %db-body-sm;
+			@extend %db-overwrite-font-size-sm;
 
 			&:not([type="date"]):not([type="datetime-local"]):not(
 					[type="month"]

packages/components/src/components/link/link.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-@use "@db-ui/foundations/build/scss/body-styles" as *;
+@use "@db-ui/foundations/build/scss/helpers/font" as *;
 @use "@db-ui/foundations/build/scss/variables" as *;
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/scaling-placeholder" as *;
@@ -80,6 +80,6 @@
 	&[data-size="small"] {
 		--icon-font-size: var(--db-base-icon-font-size);
 		--icon-margin-before: var(--db-spacing-fixed-3xs);
-		@extend %db-body-sm;
+		@extend %db-overwrite-font-size-sm;
 	}
 }

packages/components/src/components/radio/radio.scss

@@ -2,7 +2,7 @@
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/helpers/functions" as *;
 @use "@db-ui/foundations/build/scss/color-placeholder" as *;
-@use "@db-ui/foundations/build/scss/body-styles" as *;
+@use "@db-ui/foundations/build/scss/helpers/font" as *;
 @use "@db-ui/foundations/build/scss/helpers/component" as *;
 @use "@db-ui/foundations/build/scss/color/color-variants" as *;
 
@@ -84,10 +84,10 @@ $font-size-height: calc(var(--db-base-font-size) * var(--db-base-line-height));
 
 	// Sizes
 	&[data-size="small"] {
-		@extend %db-body-sm;
+		@extend %db-overwrite-font-size-sm;
 
 		& + label {
-			@extend %db-body-sm;
+			@extend %db-overwrite-font-size-sm;
 			margin-inline-start: $db-spacing-fixed-2xs;
 		}
 	}

packages/components/src/components/select/select.scss

@@ -7,7 +7,7 @@
 @use "@db-ui/foundations/build/scss/helpers/component";
 @use "@db-ui/foundations/build/scss/color/color-variants" as *;
 @use "@db-ui/foundations/build/scss/icon/icons.helpers" as *;
-@use "@db-ui/foundations/build/scss/body-styles" as *;
+@use "@db-ui/foundations/build/scss/helpers/font" as *;
 @use "../../styles/form-components" as *;
 
 %select-icon {
@@ -25,7 +25,7 @@
 }
 
 %select-label {
-	@extend %db-body-md;
+	@extend %db-overwrite-font-size-md;
 	inset-block-start: calc(
 		($db-sizing-md - var(--db-base-font-size) * var(--db-base-line-height)) /
 			2
@@ -35,7 +35,7 @@
 .db-select {
 	--has-before: 0;
 	--has-status: 0;
-	@extend %db-body-sm;
+	@extend %db-overwrite-font-size-sm;
 	@extend %select-icon;
 	@extend %bg-transparent-hover;
 	@extend %default-interactive-component;
@@ -97,7 +97,7 @@
 	}
 
 	label {
-		@extend %db-body-2xs;
+		@extend %db-overwrite-font-size-2xs;
 		inset-block-start: $db-spacing-fixed-2xs;
 		transition:
 			left,
@@ -122,7 +122,7 @@
 	}
 
 	.icon-state {
-		@extend %db-body-sm;
+		@extend %db-overwrite-font-size-sm;
 
 		display: flex;
 		inset-inline-end: calc($db-sizing-md - $db-spacing-fixed-xs);
@@ -135,7 +135,7 @@
 		// angular specific nesting
 
 		.db-icon {
-			@extend %db-body-sm;
+			@extend %db-overwrite-font-size-sm;
 
 			&::before {
 				--icon-font-family: var(--db-base-icon-font-family-filled);
@@ -145,7 +145,7 @@
 	}
 
 	& ~ .description {
-		@extend %db-body-xs;
+		@extend %db-overwrite-font-size-xs;
 		margin-inline: $db-spacing-fixed-sm;
 		margin-block: $db-spacing-fixed-2xs 0;
 	}

packages/components/src/components/tag/tag.scss

@@ -5,7 +5,7 @@
 @use "@db-ui/foundations/build/scss/color-placeholder" as *;
 @use "@db-ui/foundations/build/scss/helpers/component" as *;
 @use "@db-ui/foundations/build/scss/color/color-variants" as *;
-@use "@db-ui/foundations/build/scss/body-styles" as *;
+@use "@db-ui/foundations/build/scss/helpers/font" as *;
 @use "../../styles/button-components";
 @use "@db-ui/foundations/build/scss/helpers/functions" as *;
 
@@ -112,7 +112,7 @@
 	@extend %focus-placeholder;
 	@extend %default-interactive-component;
 	@extend %component-border;
-	@extend %db-body-sm;
+	@extend %db-overwrite-font-size-sm;
 	@extend %default-button;
 
 	block-size: $db-sizing-sm;
@@ -135,7 +135,7 @@
 	}
 
 	.tag-label {
-		@extend %db-body-sm;
+		@extend %db-overwrite-font-size-sm;
 		display: block;
 
 		&:not(.is-icon-text-replace) {

packages/components/src/styles/form-components.scss

@@ -1,5 +1,5 @@
 @use "@db-ui/foundations/build/scss/icon/icons.helpers" as *;
-@use "@db-ui/foundations/build/scss/body-styles" as *;
+@use "@db-ui/foundations/build/scss/helpers/font" as *;
 @use "@db-ui/foundations/build/scss/variables" as *;
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 

packages/foundations/scss/_tonality.scss

@@ -2,17 +2,23 @@
 @use "font-faces" as *;
 @use "typography-placeholder" as *;
 @use "scaling-placeholder" as *;
-@use "body-styles" as *;
+@use "helpers/font" as *;
 
-body,
-* {
-	@extend %db-body-md;
+body {
 	font-family: $db-font-family-sans;
 }
 
+:root {
+	@extend %db-component-variables-md;
+}
+
+* {
+	@extend %db-font-size-md;
+}
+
 small,
 code {
-	@extend %db-body-sm;
+	@extend %db-overwrite-font-size-sm;
 }
 
 h1,

packages/foundations/scss/helpers/_font.scss

@@ -0,0 +1,44 @@
+@mixin set-component-variables($size) {
+	/* Those variables are only for components to calculate heights and change icons */
+	--db-base-icon-font-size: var(--db-base-icon-font-size-#{$size});
+	--db-base-icon-font-family: var(--db-base-icon-font-family-#{$size});
+	/* prettier-ignore */
+	--db-base-icon-font-family-filled: var(--db-base-icon-font-family-filled-#{$size});
+	--db-base-line-height: var(--db-type-body-line-height-#{$size});
+	--db-base-font-size: var(--db-type-body-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});
+}
+
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+@mixin styles($styles...) {
+	@for $i from 0 to length($styles) {
+		%db-component-variables-#{nth($styles, $i + 1)} {
+			@include set-component-variables(nth($styles, $i + 1));
+		}
+
+		%db-font-size-#{nth($styles, $i + 1)} {
+			@include set-font-size(nth($styles, $i + 1));
+		}
+
+		%db-overwrite-font-size-#{nth($styles, $i + 1)} {
+			@include set-component-variables(nth($styles, $i + 1));
+			@include set-font-size(nth($styles, $i + 1));
+
+			& > * {
+				@include set-component-variables(nth($styles, $i + 1));
+				@include set-font-size(nth($styles, $i + 1));
+			}
+		}
+	}
+}
+
+@include styles("2xl", "xl", "lg", "md", "sm", "xs", "2xs");

showcases/patternhub/styles/globals.scss

@@ -102,7 +102,7 @@ table th {
 div[class^="ch-"] {
 	div,
 	span {
-		@extend %db-body-sm;
+		@extend %db-overwrite-font-size-sm;
 		color: $db-colors-secondary-on-enabled;
 	}
 }