docs: improve font sizes

packages/foundations/docs/FontsSizes.md

@@ -1,10 +1,35 @@
-# Font-Sizes
+# DB Font-Sizes
 
--   You should use our provided **Font-Sizes** to change the size of text elements like `<p>` etc.
+The Font-Sizes of foundations consist of [two different sets](./overview) (9 sizes each) for general texts (**Body-Font-Sizes**) and headlines (**Headline-Font-Sizes**).
+All sizes of both sets are automatically adjusted by the selected [density](./../densities/readme).
 
-> **_NOTE:_** Some sizes may stay the same because of screen-width or density.
+**Body-Font-Sizes**
 
-## How to include colors
+-   By default, the Body-Font-Size `md` is set to the body tag.
+-   These 9 Body-Font-Sizes can also be explicitly set as classes on elements in order to change their font size.
+
+**Headline-Font-Sizes**
+
+-   9 Headline-Sizes are available and are usable by custom properties
+-   6 Headline-Sizes are mapped to native headline tags (H1 - H6) by default. Headlines can therefore be used directly.
+
+**Available variants / sizes**
+
+`3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`
+
+## When to use
+
+-   Use our provided **Body-Font-Sizes** to explicitly change the size of text elements like `<p>`, `<span>` etc.
+-   Use a **Body-Font-Size** for a container and all text elements in it (does not affect components font-sizes) .
+-   **Headline-Font-Sizes** can be used to override the default mapping of the `h1` - `h6` tags.
+-   _Advanced: use standardised *custom properties* to define `font-size` and `line-height` in your own components._
+
+### Notes
+
+> -   Some sizes may stay the same because of screen-width or density.
+> -   Elements such as `<p>` and all headings (H1 - H6) as well as **DB-UI components** have font sizes assigned by default so that they can be used without further customisation.
+
+### How to include
 
 For **CSS** and **Tailwind** you need to use the import `@import "@db-ui/foundations/build/css/fonts/classes/all.css";` in your root `.css` file.
 
@@ -23,12 +48,36 @@ Then you can use e.g. `sm` font-size by extending our SCSS placeholders like thi
 
 ### How to use
 
-We're providing an [overview for all possible font-sizes](./overview).
+The following options are recommended for applying **Body-Font-Sizes**:
+
+-   CSS classes
+-   CSS data-attributes
+-   SCSS placeholders
+-   Tailwind classes
 
-There are several variants: `3xl`, `2xl`, `xl`, `lg`, `md`, `sm`, `xs`, `2xs`, `3xs`.
+All options (except the last one) set `font-size`, `line-height` and some **custom properties** for an element. These custom properties are internally required by some components to be displayed correctly.
 
-**We use `XX` here you should replace it with a variant from above.**
+> All available variants / sizes, [see also the detailed overview](./overview):
+>
+> `3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`
 
-| Variant | CSS                       | SCSS                                 | Tailwind                  |
-| :-----: | ------------------------- | ------------------------------------ | ------------------------- |
-|  `XX`   | `class="db-font-size-XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` |
+**Note: We use `XX` here. You should replace it with a size from above.**
+
+|         CSS class         | CSS data-attribute    | SCSS                                 | Tailwind                  |
+| :-----------------------: | --------------------- | ------------------------------------ | ------------------------- |
+| `class="db-font-size-XX"` | `data-font-size="XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` |
+
+#### Advanced use: CSS custom properties
+
+> **_Note:_** The direct use of custom properties to set font sizes should be avoided if possible. If this is unavoidable, existing restrictions should be taken into account.
+
+All of the above options are available for applying the **Body-Font-Sizes** to HTML elements within custom components. In some cases it may make sense to set the `font-size` and `line-height` manually in the css.
+
+**Please replace `XX` in the custom-properties with one of the sizes:**
+
+```css
+.text-element {
+	font-size: var(--db-type-body-font-size-XX);
+	line-height: var(--db-type-body-line-height-XX);
+}
+```

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

@@ -1,24 +1,263 @@
+import { useState } from 'react';
 import DefaultPage from '../../../components/default-page';
-import { DBInfotext } from '../../../components/src';
+import {
+	DBInfotext,
+	DBSwitch,
+	DBIcon,
+	DBSection
+} from '../../../components/src';
+
+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);
+
+	/* 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});
+
+	/* 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});
+	--db-base-line-height: var(--db-type-body-line-height-${size});
+	--db-base-font-size: var(--db-type-body-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});
+    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});
+    margin-block: var(--db-spacing-fixed-${size});
+}
+`;
 
 const ColorOverview = () => {
+	const [showCodeBody, setShowCodeBody] = useState(false);
+	const [showCodeHeadlines, setShowCodeHeadlines] = useState(false);
+	const [showCodeHeadlineSizes, setShowCodeHeadlineSizes] = useState(false);
+
 	return (
 		<DefaultPage>
-			<h1>FontsSizes Overview</h1>
-			<h2>Body</h2>
-			<DBInfotext semantic="warning">
-				Some font-sizes are the same for a specific device type. For
-				example in mobile all `xl` sizes are the same.
+			<h1>Fonts-Sizes Overview</h1>
+			<ol>
+				<li>
+					<b>Body-Font-Sizes</b>
+				</li>
+				<li>
+					<b>Default Headlines H1 - H6</b>
+				</li>
+				<li>
+					<b>Available Headline-Font-Sizes</b>
+				</li>
+			</ol>
+			<DBInfotext data-font-size="md" semantic="informational">
+				<b>Note: </b>Some font-sizes are the same for a specific device
+				type. For example in mobile all <code>xl</code> sizes are the
+				same.
 			</DBInfotext>
+			<h2>Body-Font-Sizes</h2>
+			<p>
+				All <b>9 body font sizes</b> provided by foundations can be set
+				via <b>css class</b>, <b>data-attribute</b>,{' '}
+				<b>scss placeholder</b> or <b>Tailwind class</b> (
+				<a href="./readme">How to use</a>). This ensures that all custom
+				properties are defined by the class to match the font size, so
+				that certain child components fit correctly. For example, this
+				allows DBIcon component to display its icon in the correct
+				height and weight according to the chosen font-size.
+			</p>
+			<p>
+				Therefore, if possible, these <b>db-font-size</b> classes should
+				be used to change the font size of certain text elements such as{' '}
+				<code>p</code> or containers with other texts.
+			</p>
+			<DBInfotext data-font-size="md" semantic="informational">
+				The display of icons works correctly in all sizes except{' '}
+				<code>3xl</code> and <code>3xs</code>. That is why they are
+				hidden there.
+			</DBInfotext>
+			<br />
 			<div>
+				<DBSwitch
+					change={(event) => {
+						setShowCodeBody(event.target.checked);
+					}}>
+					Show CSS applied by using <b>db-font-size-XX</b> classes
+				</DBSwitch>
+			</div>
+			<br />
+			<DBSection spacing="small" className="db-neutral-bg-lvl-2">
 				{['3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs', '3xs'].map(
 					(size) => (
-						<p className={`db-font-size-${size}`}>
-							I am size: <strong>{size}</strong>
-						</p>
+						<>
+							<p className={`db-font-size-${size}`}>
+								I am size: <strong>{size}</strong>{' '}
+								{size !== '3xl' && size !== '3xs' && (
+									<DBIcon icon="download" />
+								)}
+							</p>
+							<pre
+								style={{
+									display: showCodeBody ? 'block' : 'none'
+								}}>
+								<code className="language-css">
+									{getCodeExampleBodyFontSize(size)}
+								</code>
+							</pre>
+						</>
 					)
 				)}
+			</DBSection>
+
+			<h2>Default Headlines H1 - H6</h2>
+			<p>
+				Certain <b>Headline-Font-Sizes</b> are mapped to the{' '}
+				<b>headline tags (H1 - H6)</b> by default. Accordingly, it is
+				sufficient to use the native headline tags, as in this example.
+			</p>
+			<DBInfotext data-font-size="md" semantic="informational">
+				There are currently no CSS classes or data-attributes to set a
+				predefined headline size for a specific element.
+			</DBInfotext>
+			<br />
+			<div>
+				<DBSwitch
+					change={(event) => {
+						setShowCodeHeadlines(event.target.checked);
+					}}>
+					Show CSS applied by using <b>H1 - H6 tags</b>
+				</DBSwitch>
 			</div>
+			<br />
+			<DBSection spacing="small" className="db-neutral-bg-lvl-2">
+				{(
+					[
+						{ Tag: 'h1', size: 'xl' },
+						{ Tag: 'h2', size: 'lg' },
+						{ Tag: 'h3', size: 'md' },
+						{ Tag: 'h4', size: 'sm' },
+						{ Tag: 'h5', size: 'xs' },
+						{ Tag: 'h6', size: '2xs' }
+					] as Array<{
+						Tag: keyof JSX.IntrinsicElements;
+						size: string;
+					}>
+				).map(({ Tag, size }) => (
+					<>
+						<Tag>
+							{Tag.toUpperCase()} - default mapped size is:{' '}
+							<u>{size}</u>
+						</Tag>
+						<pre
+							style={{
+								display: showCodeHeadlines ? 'block' : 'none'
+							}}>
+							<code className="language-css">
+								{getCodeExampleHeadlineTag(Tag, size)}
+							</code>
+						</pre>
+					</>
+				))}
+			</DBSection>
+
+			<h2>Available Headline-Font-Sizes</h2>
+			<p>
+				This overview shows all <b>9 headline sizes</b> that are
+				available in foundations. These can be used, for example, to
+				(globally) overwrite the default mapping. Instructions on how
+				overwriting works are below.
+			</p>
+
+			<br />
+			<div>
+				<DBSwitch
+					change={(event) => {
+						setShowCodeHeadlineSizes(event.target.checked);
+					}}>
+					Show CSS for custom usage of headline sizes
+				</DBSwitch>
+			</div>
+			<br />
+
+			<DBSection spacing="small" className="db-neutral-bg-lvl-2">
+				{['3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs', '3xs'].map(
+					(size) => (
+						<>
+							<h3
+								style={{
+									fontSize: `var(--db-type-headline-font-size-${size})`,
+									lineHeight: `var(--db-type-headline-line-height-${size})`,
+									marginBlock: `var(--db-spacing-fixed-${size})`
+								}}>
+								Headline with size: <u>{size}</u>
+							</h3>
+							<pre
+								style={{
+									display: showCodeHeadlineSizes
+										? 'block'
+										: 'none'
+								}}>
+								<code className="language-css">
+									{getCodeExampleHeadlineSizes(size)}
+								</code>
+							</pre>
+						</>
+					)
+				)}
+			</DBSection>
+
+			<h3>How to overwrite headlines default mapping</h3>
+			<p>
+				To overwrite the default mapping of the foundations, a suitable
+				selector (H1 - H6 or css class) is used to set{' '}
+				<code>font-size</code> and <code>line-height</code> (and{' '}
+				<code>margin-block</code> if necessary) to the desired size
+				using the supplied <b>custom properties</b>.
+			</p>
+
+			<DBInfotext data-font-size="md" semantic="warning">
+				In order to maintain a uniform typography, custom properties for{' '}
+				<code>font-size</code> and <code>line-height</code> <u>must</u>{' '}
+				be selected with the same size (e.g. <code>md</code>).
+			</DBInfotext>
+			<br />
+			<DBSection spacing="small" className="db-neutral-bg-lvl-2">
+				<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>
+				<br />
+				<code>--db-spacing-fixed-XX</code> (optional e.g. for margin)
+				<p>
+					<b>They are available in the following sizes:</b>
+				</p>
+				<p>
+					<code>3xl</code> | <code>2xl</code> | <code>xl</code> |{' '}
+					<code>lg</code> | <code>md</code> | <code>sm</code> |{' '}
+					<code>xs</code> | <code>2xs</code> | <code>3xs</code>
+				</p>
+			</DBSection>
+			<br />
+			<pre>
+				<code className="language-css">
+					{overwriteHeadlineMarkdown}
+				</code>
+			</pre>
 		</DefaultPage>
 	);
 };

showcases/patternhub/styles/globals.scss

@@ -541,3 +541,7 @@ h6 {
 		}
 	}
 }
+
+.db-switch {
+	justify-content: flex-start;
+}