From b0745fbcb3b35ef901adc5abcf73833cf262746c Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Mon, 3 Jun 2024 11:44:13 +0200 Subject: [PATCH 1/5] docs: adds advantages and when to use sections --- packages/foundations/docs/FontsSizes.md | 18 ++++++++++++++---- .../pages/foundations/font-sizes/overview.tsx | 7 ++++--- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/packages/foundations/docs/FontsSizes.md b/packages/foundations/docs/FontsSizes.md index da84ae805c8..655681f1731 100644 --- a/packages/foundations/docs/FontsSizes.md +++ b/packages/foundations/docs/FontsSizes.md @@ -4,7 +4,7 @@ > **_NOTE:_** Some sizes may stay the same because of screen-width or density. -## How to include colors +## How to include Font-Sizes 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. @@ -21,6 +21,16 @@ Then you can use e.g. `sm` font-size by extending our SCSS placeholders like thi } ``` +### Advantages of using DB Font-Sizes + +By using **css classes** / **data-attributes**, **scss placeholders** or **tailwind classes** to set the **font-size**, it is guaranteed that `font-size` and `line-height` are applied appropriately to each other. +The **Font-Sizes** also set **css custom-properties**, which are used by components to calculate heights, for example. + +### When to use + +- Set **Font-Size** for a HTML tag or a component +- Define **Font-Size** for a container and all elements in it. This works as long as the font-size is not explicitly set. + ### How to use We're providing an [overview for all possible font-sizes](./overview). @@ -29,6 +39,6 @@ There are several variants: `3xl`, `2xl`, `xl`, `lg`, `md`, `sm`, `xs`, `2xs`, ` **We use `XX` here you should replace it with a variant from above.** -| Variant | CSS | SCSS | Tailwind | -| :-----: | ------------------------- | ------------------------------------ | ------------------------- | -| `XX` | `class="db-font-size-XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` | +| Variant | CSS class | CSS data-attribute | SCSS | Tailwind | +| :-----: | ------------------------- | --------------------- | ------------------------------------ | ------------------------- | +| `XX` | `class="db-font-size-XX"` | `data-font-size="XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` | diff --git a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx index 77baab85ca1..25746bf2a66 100644 --- a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx +++ b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx @@ -4,11 +4,12 @@ import { DBInfotext } from '../../../components/src'; const ColorOverview = () => { return ( -

FontsSizes Overview

+

Fonts-Sizes Overview

Body

- + Some font-sizes are the same for a specific device type. For - example in mobile all `xl` sizes are the same. + example in mobile allxlsizes are the + same.
{['3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs', '3xs'].map( From b708c6170a9f4c4ec3c65e98c0e04f894abe44ad Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Tue, 4 Jun 2024 15:32:59 +0200 Subject: [PATCH 2/5] docs: improve font docs --- packages/foundations/docs/FontsSizes.md | 73 +++-- .../pages/foundations/font-sizes/overview.tsx | 254 +++++++++++++++++- showcases/patternhub/styles/globals.scss | 4 + 3 files changed, 306 insertions(+), 25 deletions(-) diff --git a/packages/foundations/docs/FontsSizes.md b/packages/foundations/docs/FontsSizes.md index db90e35b437..24109ec5236 100644 --- a/packages/foundations/docs/FontsSizes.md +++ b/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 `

` 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 Font-Sizes +- 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 `

`, `` 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 `

` 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. @@ -21,24 +46,38 @@ Then you can use e.g. `sm` font-size by extending our SCSS placeholders like thi } ``` -### Advantages of using DB Font-Sizes +### How to use -By using **css classes** / **data-attributes**, **scss placeholders** or **tailwind classes** to set the **font-size**, it is guaranteed that `font-size` and `line-height` are applied appropriately to each other. -The **Font-Sizes** also set **css custom-properties**, which are used by components to calculate heights, for example. +The following options are recommended for applying **Body-Font-Sizes**: -### When to use +- CSS classes +- CSS data-attributes +- SCSS placeholders +- Tailwind classes -- Set **Font-Size** for a HTML tag or a component -- Define **Font-Size** for a container and all elements in it. This works as long as the font-size is not explicitly set. +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. -### How to use +> All available variants / sizes, [see also the detailed overview](./overview): +> +> `3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs` + +**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"` | -We're providing an [overview for all possible font-sizes](./overview). +#### Advanced use: CSS custom properties -There are several variants: `3xl`, `2xl`, `xl`, `lg`, `md`, `sm`, `xs`, `2xs`, `3xs`. +> **_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. -**We use `XX` here you should replace it with a variant from above.** +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. -| Variant | CSS class | CSS data-attribute | SCSS | Tailwind | -| :-----: | ------------------------- | --------------------- | ------------------------------------ | ------------------------- | -| `XX` | `class="db-font-size-XX"` | `data-font-size="XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` | +**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); +} +``` diff --git a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx index 25746bf2a66..abb2ca37332 100644 --- a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx +++ b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx @@ -1,25 +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 (

Fonts-Sizes Overview

-

Body

- - Some font-sizes are the same for a specific device type. For - example in mobile allxlsizes are the +
    +
  1. + Body-Font-Sizes +
    2. +
  2. + Default Headlines H1 - H6 +
    3. +
  3. + Available Headline-Font-Sizes +
    4. +
+ + Note: Some font-sizes are the same for a specific device + type. For example in mobile all xl sizes are the same. +

Body-Font-Sizes

+

+ All 9 body font sizes provided by foundations can be set + via css class, data-attribute,{' '} + scss placeholder or Tailwind class ( + How to use). 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. +

+

+ Therefore, if possible, these db-font-size classes should + be used to change the font size of certain text elements such as{' '} + p or containers with other texts. +

+ + The display of icons works correctly in all sizes except{' '} + 3xl and 3xs. That is why they are + hidden there. + +
+ { + setShowCodeBody(event.target.checked); + }}> + Show CSS applied by using db-font-size-XX classes + +
+
+ {['3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs', '3xs'].map( (size) => ( -

- I am size: {size} -

+ <> +

+ I am size: {size}{' '} + {size !== '3xl' && size !== '3xs' && ( + + )} +

+ 
+								
+									{getCodeExampleBodyFontSize(size)}
+								
+
+ ) )} + + +

Default Headlines H1 - H6

+

+ Certain Headline-Font-Sizes are mapped to the{' '} + headline tags (H1 - H6) by default. Accordingly, it is + sufficient to use the native headline tags, as in this example. +

+ + There are currently no CSS classes or data-attributes to set a + predefined headline size for a specific element. + +
+
+ { + setShowCodeHeadlines(event.target.checked); + }}> + Show CSS applied by using H1 - H6 tags +
+
+ + {( + [ + { 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.toUpperCase()} - default mapped size is:{' '} + {size} + + 
+							
+								{getCodeExampleHeadlineTag(Tag, size)}
+							
+
+ + ))} + + +

Available Headline-Font-Sizes

+

+ This overview shows all 9 headline sizes that are + available in foundations. These can be used, for example, to + (globally) overwrite the default mapping. Instructions on how + overwriting works are below. +

+ +
+
+ { + setShowCodeHeadlineSizes(event.target.checked); + }}> + Show CSS for custom usage of headline sizes + +
+
+ + + {['3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs', '3xs'].map( + (size) => ( + <> +

+ Headline with size: {size} +

+ 
+								
+									{getCodeExampleHeadlineSizes(size)}
+								
+
+ + ) + )} + + +

How to overwrite headlines default mapping

+

+ To overwrite the default mapping of the foundations, a suitable + selector (H1 - H6 or css class) is used to set{' '} + font-size and line-height (and{' '} + margin-block if necessary) to the desired size + using the supplied custom properties. +

+ + + In order to maintain a uniform typography, custom properties for{' '} + font-size and line-height must{' '} + be selected with the same size (e.g. md). + +
+ +

+ These custom properties must be used for overwrites: +

+ --db-type-headline-font-size-XX +
+ --db-type-headline-line-height-XX +
+ --db-spacing-fixed-XX (optional e.g. for margin) +

+ They are available in the following sizes: +

+

+ 3xl | 2xl | xl |{' '} + lg | md | sm |{' '} + xs | 2xs | 3xs +

+ +
+ 
+				
+					{overwriteHeadlineMarkdown}
+				
+
); }; diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss index 18cd96ee61f..a402c6ad2d5 100644 --- a/showcases/patternhub/styles/globals.scss +++ b/showcases/patternhub/styles/globals.scss @@ -541,3 +541,7 @@ h6 { } } } + +.db-switch { + justify-content: flex-start; +} From d1c85a93a59714011a4f4cc471117d6f834d85b3 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Wed, 5 Jun 2024 22:20:53 +0200 Subject: [PATCH 3/5] docs: removes pseudo fix concerning other pr --- showcases/patternhub/styles/globals.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss index a402c6ad2d5..18cd96ee61f 100644 --- a/showcases/patternhub/styles/globals.scss +++ b/showcases/patternhub/styles/globals.scss @@ -541,7 +541,3 @@ h6 { } } } - -.db-switch { - justify-content: flex-start; -} From 87f3de3de527c6da4cafb02b7456d0346734bf09 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Wed, 5 Jun 2024 23:05:27 +0200 Subject: [PATCH 4/5] docs: removes most dashes between words like font sizes --- packages/foundations/docs/FontsSizes.md | 29 ++++++++++--------- .../pages/foundations/font-sizes/overview.tsx | 14 ++++----- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/foundations/docs/FontsSizes.md b/packages/foundations/docs/FontsSizes.md index 24109ec5236..c33610729a6 100644 --- a/packages/foundations/docs/FontsSizes.md +++ b/packages/foundations/docs/FontsSizes.md @@ -1,17 +1,17 @@ -# DB Font-Sizes +# DB Font Sizes -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**). +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). -**Body-Font-Sizes** +**Body Font Sizes** -- 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. +- 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** +**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. +- 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** @@ -19,14 +19,14 @@ All sizes of both sets are automatically adjusted by the selected [density](./.. ## When to use -- Use our provided **Body-Font-Sizes** to explicitly change the size of text elements like `

`, `` 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. +- Use our provided **Body Font Sizes** to explicitly change the size of text elements like `

`, `` 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. +> - Some sizes may stay the same because of screen width or density. > - Elements such as `

` 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 @@ -48,7 +48,7 @@ Then you can use e.g. `sm` font-size by extending our SCSS placeholders like thi ### How to use -The following options are recommended for applying **Body-Font-Sizes**: +The following options are recommended for applying **Body Font Sizes**: - CSS classes - CSS data-attributes @@ -71,7 +71,8 @@ All options (except the last one) set `font-size`, `line-height` and some **cust > **_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. +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:** diff --git a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx index abb2ca37332..40c11780d0e 100644 --- a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx +++ b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx @@ -51,24 +51,24 @@ const ColorOverview = () => { return ( -

Fonts-Sizes Overview

+

Font Sizes Overview

  1. - Body-Font-Sizes + Body Font Sizes
  2. Default Headlines H1 - H6
  3. - Available Headline-Font-Sizes + Available Headline Font Sizes
- Note: Some font-sizes are the same for a specific device + Note: Some font sizes are the same for a specific device type. For example in mobile all xl sizes are the same. -

Body-Font-Sizes

+

Body Font Sizes

All 9 body font sizes provided by foundations can be set via css class, data-attribute,{' '} @@ -124,7 +124,7 @@ const ColorOverview = () => {

Default Headlines H1 - H6

- Certain Headline-Font-Sizes are mapped to the{' '} + Certain Headline Font Sizes are mapped to the{' '} headline tags (H1 - H6) by default. Accordingly, it is sufficient to use the native headline tags, as in this example.

@@ -173,7 +173,7 @@ const ColorOverview = () => { ))} -

Available Headline-Font-Sizes

+

Available Headline Font Sizes

This overview shows all 9 headline sizes that are available in foundations. These can be used, for example, to From 582b8b27821db75edb5edae1aa93e5bdd715e8d6 Mon Sep 17 00:00:00 2001 From: Bruno Schadeck Date: Mon, 1 Jul 2024 14:42:14 +0200 Subject: [PATCH 5/5] Apply suggestions from code review Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> --- packages/foundations/docs/FontsSizes.md | 16 +++++++-------- .../pages/foundations/font-sizes/overview.tsx | 20 +++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/foundations/docs/FontsSizes.md b/packages/foundations/docs/FontsSizes.md index c33610729a6..cf2d58254b7 100644 --- a/packages/foundations/docs/FontsSizes.md +++ b/packages/foundations/docs/FontsSizes.md @@ -3,17 +3,17 @@ 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). -**Body Font Sizes** +## Body Font Sizes - 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** +## 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. +- 6 Headline Sizes are mapped to native headline tags (`h1` to `h6`) by default. Headlines can therefore be used directly. -**Available variants / sizes** +## Available variants / sizes `3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs` @@ -27,7 +27,7 @@ All sizes of both sets are automatically adjusted by the selected [density](./.. ### Notes > - Some sizes may stay the same because of screen width or density. -> - Elements such as `

` 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. +> - Elements such as `

` 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 @@ -51,11 +51,11 @@ Then you can use e.g. `sm` font-size by extending our SCSS placeholders like thi The following options are recommended for applying **Body Font Sizes**: - CSS classes -- CSS data-attributes +- CSS `data-`attributes - SCSS placeholders - Tailwind classes -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. +All options (except the last one) set `font-size`, `line-height` and some **CSS Custom Properties** for an element. These custom properties are internally required by some components to be displayed correctly. > All available variants / sizes, [see also the detailed overview](./overview): > @@ -67,7 +67,7 @@ All options (except the last one) set `font-size`, `line-height` and some **cust | :-----------------------: | --------------------- | ------------------------------------ | ------------------------- | | `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 +#### 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. diff --git a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx index 40c11780d0e..c72cb58c159 100644 --- a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx +++ b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx @@ -64,15 +64,15 @@ const ColorOverview = () => { - Note: Some font sizes are the same for a specific device + Note: Some font sizes are the same for a specific device type. For example in mobile all xl sizes are the same.

Body Font Sizes

- All 9 body font sizes provided by foundations can be set - via css class, data-attribute,{' '} - scss placeholder or Tailwind class ( + All 9 body font sizes provided by foundations can be set + via css class, data-attribute,{' '} + scss placeholder or Tailwind class ( How to use). 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 @@ -124,8 +124,8 @@ const ColorOverview = () => {

Default Headlines H1 - H6

- Certain Headline Font Sizes are mapped to the{' '} - headline tags (H1 - H6) by default. Accordingly, it is + Certain Headline Font Sizes are mapped to the{' '} + headline tags (H1 - H6) by default. Accordingly, it is sufficient to use the native headline tags, as in this example.

@@ -138,7 +138,7 @@ const ColorOverview = () => { change={(event) => { setShowCodeHeadlines(event.target.checked); }}> - Show CSS applied by using H1 - H6 tags + Show CSS applied by using H1 - H6 tags

@@ -175,7 +175,7 @@ const ColorOverview = () => {

Available Headline Font Sizes

- This overview shows all 9 headline sizes that are + This overview shows all 9 headline sizes that are available in foundations. These can be used, for example, to (globally) overwrite the default mapping. Instructions on how overwriting works are below. @@ -225,7 +225,7 @@ const ColorOverview = () => { selector (H1 - H6 or css class) is used to set{' '} font-size and line-height (and{' '} margin-block if necessary) to the desired size - using the supplied custom properties. + using the supplied custom properties.

@@ -244,7 +244,7 @@ const ColorOverview = () => {
--db-spacing-fixed-XX (optional e.g. for margin)

- They are available in the following sizes: + They are available in the following sizes:

3xl | 2xl | xl |{' '}