Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: improve font sizes #2713

Merged
merged 10 commits into from
Jul 5, 2024
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@
/showcases/nuxt-showcase/**
build-outputs/
build-showcases/
/output/vue/scripts/fix-any-types.ts
4 changes: 1 addition & 3 deletions .xo-config.cjs
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
module.exports = {
prettier: true,
ignores: [
'./showcases/nuxt-showcase/**'
],
ignores: ['./showcases/nuxt-showcase/**'],
overrides: [
{
files: ['./showcases/angular-showcase/**'],
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

70 changes: 60 additions & 10 deletions packages/foundations/docs/FontsSizes.md
Original file line number Diff line number Diff line change
@@ -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` to `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.

Expand All @@ -23,12 +48,37 @@ 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 **CSS 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);
}
```
260 changes: 251 additions & 9 deletions showcases/patternhub/pages/foundations/font-sizes/overview.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,266 @@
import { useState } from 'react';
import DefaultPage from '../../../components/default-page';
import { DBInfotext } from '../../../../../output/react/src';
import {
DBInfotext,
DBSwitch,
DBIcon,
DBSection
} from '../../../../../output/react/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>Font 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">
<strong>Note: </strong>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 <strong>9 body font sizes</strong> provided by foundations
can be set via <strong>css class</strong>,{' '}
<strong>data-attribute</strong>,{' '}
<strong>scss placeholder</strong> or{' '}
<strong>Tailwind class</strong> (
<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 <strong>Headline Font Sizes</strong> are mapped to the{' '}
<strong>headline tags (H1 - H6)</strong> 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 <strong>H1 - H6 tags</strong>
</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 <strong>9 headline sizes</strong> 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 <strong>custom properties</strong>.
</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>
<strong>They are available in the following sizes:</strong>
</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>
);
};
Expand Down
Loading