From 582b8b27821db75edb5edae1aa93e5bdd715e8d6 Mon Sep 17 00:00:00 2001 From: Bruno Schadeck Date: Mon, 1 Jul 2024 14:42:14 +0200 Subject: [PATCH] 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 |{' '}