refactor: replaced font leftovers of release 2.x (#4695)

* refactor: replaced leftovers of release 2.x

* Update showcases/patternhub/pages/foundations/font-sizes/overview.tsx

Co-authored-by: Copilot <[email protected]>

* refactor: prettier

* auto update snapshots (#4726)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Michael Kraus <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: 4 people

__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png

@@ -79,7 +79,6 @@ In some cases it may make sense to set the `font-size` and `line-height` manuall
 
 ```css
 .text-element {
-	font-size: var(--db-type-body-font-size-XX);
-	line-height: var(--db-type-body-line-height-XX);
+	font: var(--db-type-body-XX);
 }
 ```

__snapshots__/popover/showcase/webkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png

@@ -10,35 +10,31 @@ import IntrinsicElements = React.JSX.IntrinsicElements;
 
 const overwriteHeadlineMarkdown = `/* Select a headline tag to be overwritten */
 h1 {
-	font-size: var(--db-type-headline-font-size-XX);
-	line-height: var(--db-type-headline-line-height-XX);
+	font: var(--db-type-headline-XX);
 
 	/* spacings may vary depending on the project */
 	margin-block: var(--db-spacing-fixed-XX);
 }
 `;
 
 const getCodeExampleBodyFontSize = (size: string) => `.db-font-size-${size} {
-	font-size: var(--db-type-body-font-size-${size});
-	line-height: var(--db-type-body-line-height-${size});
+	font: var(--db-type-body-${size});
 
 	/* custom properties only for components */
 	--db-icon-font-weight: var(--db-base-body-icon-weight-${size});
 	--db-icon-font-size: var(--db-base-body-icon-font-size-${size});
 }
 `;
 const getCodeExampleHeadlineTag = (tag: string, size: string) => `${tag} {
-    line-height: var(--db-type-headline-line-height-${size});
-    font-size: var(--db-type-headline-font-size-${size});
+    font: var(--db-type-headline-${size});
     margin-block: var(--db-spacing-fixed-${size});
 }
 `;
 
 const getCodeExampleHeadlineSizes = (
 	size: string
 ) => `.custom-headline-selector {
-    line-height: var(--db-type-headline-line-height-${size});
-    font-size: var(--db-type-headline-font-size-${size});
+    font: var(--db-type-headline-${size});
     margin-block: var(--db-spacing-fixed-${size});
 }
 `;
@@ -200,8 +196,7 @@ const ColorOverview = () => {
 						<>
 							<h3
 								style={{
-									fontSize: `var(--db-type-headline-font-size-${size})`,
-									lineHeight: `var(--db-type-headline-line-height-${size})`,
+									font: `var(--db-type-headline-${size})`,
 									marginBlock: `var(--db-spacing-fixed-${size})`
 								}}>
 								Headline with size: <u>{size}</u>
@@ -240,9 +235,9 @@ const ColorOverview = () => {
 				<p>
 					<b>These custom properties must be used for overwrites:</b>
 				</p>
-				<code>--db-type-headline-font-size-XX</code>
-				<br />
-				<code>--db-type-headline-line-height-XX</code>
+				<code>--db-type-headline-XX</code> (This shorthand custom
+				property sets both <code>font-size</code> and{' '}
+				<code>line-height</code>)
 				<br />
 				<code>--db-spacing-fixed-XX</code> (optional e.g. for margin)
 				<p>

packages/foundations/docs/FontsSizes.md

@@ -7,8 +7,7 @@
 	text-align: center;
 
 	h2 {
-		font-size: var(--db-type-headline-font-size-3xs);
-		line-height: var(--db-type-headline-line-height-3xs);
+		font: var(--db-type-headline-3xs);
 		margin-block: var(--db-spacing-fixed-3xs);
 	}