Merge pull request #2700 from db-ui/docs-improve-globally

docs: replace some code formatting by bold formatting

packages/foundations/README.md

@@ -31,14 +31,14 @@ First of all you need to import a theme which contains all tokens (css-propertie
 
 Afterward, you may import helper classes / placeholders to easily consume the tokens from your theme. There are some categories:
 
--   `init`: Global styles which apply to all or a large group of selectors. Make sure to import `inits/required.css` to normalize tags like `body` etc. Furthermore, we provide some default styles.
--   `icons`: Icons classes to load `woff2` files and adds `[data-icon]` and `[data-icon-after]` to enable icons for all tags and components.
--   `helpers`: Use dividers or focus border
--   `fonts`:Overwrite default font-size, line-height and icon-size
--   `density`:Overwrite default density to scale adaptive components inside container using density
--   `colors`:Sets an adaptive color to a container, which passes all required css-properties to children
+-   **init**: Global styles which apply to all or a large group of selectors. Make sure to import `inits/required.css` to normalize tags like `body` etc. Furthermore, we provide some default styles.
+-   **icons**: Icons classes to load **woff2** files and adds `[data-icon]` and `[data-icon-after]` to enable icons for all tags and components.
+-   **helpers**: Use dividers or focus border
+-   **fonts**: Overwrite default `font-size`, `line-height` and `icon-size`
+-   **density**: Overwrite default density to scale adaptive components inside container using density
+-   **colors**: Sets an adaptive color to a container, which passes all required css-properties to children
 
-You can import the complete `init` styles with `db-ui-foundations[-absolute|-rollup|-webpack].css` which apply the default:
+You can import the complete **init** styles with `db-ui-foundations[-absolute|-rollup|-webpack].css` which apply the default:
 
 -   [Density](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/principles/densities): `regular`
 -   [Adaptive Coloring](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/principles/adaptive-styles): `neutral-bg-lvl-1`
@@ -113,7 +113,7 @@ In HTML:
 ></div>
 ```
 
-> **Note:** In CSS you might to use the classes or data-attributes even more because you cannot use placeholders or mixins like we have it in `scss`. If you use a 3rd party library and cannot apply classes or data-attributes you might want to copy the content of our helper classes to apply it to the 3rd party class.
+> **Note:** In CSS you might to use the classes or data-attributes even more because you cannot use placeholders or mixins like we have it in **scss**. If you use a 3rd party library and cannot apply classes or data-attributes you might want to copy the content of our helper classes to apply it to the 3rd party class.
 
 ### SCSS
 

packages/foundations/docs/Colors.md

@@ -1,18 +1,18 @@
 # Colors
 
--   You use `Colors` to highlight an area with a specific color.
+-   You use **Colors** to highlight an area with a specific color.
 -   You can also use it to change the text color for components with the `*-transparent-semi` colors.
 -   Most classes/placeholders will change `color` and `background-color` and will set properties, which will be passed down to adaptive components.
 
 ## How to include colors
 
-For `CSS` and `Tailwind` you need to use the import `@import "@db-ui/foundations/build/css/color/classes/all.css";` in your root `.css` file.
-Or if you only want a single variant e.g. `informational` you can import `@import "@db-ui/foundations/build/css/color/classes/informational.css";`.
+For **CSS** and **Tailwind** you need to use the import `@import "@db-ui/foundations/build/css/color/classes/all.css";` in your root `.css` file.
+Or if you only want a single variant e.g. **informational** you can import `@import "@db-ui/foundations/build/css/color/classes/informational.css";`.
 
 In case that you're either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly.
 
-For `SCSS` you need to use the import `@use @db-ui/foundations/build/scss/color/placeholder` in your `.scss` file, where you need to reference the specific variable.
-Then you can use e.g. `informational` color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.
+For **SCSS** you need to use the import `@use @db-ui/foundations/build/scss/color/placeholder` in your `.scss` file, where you need to reference the specific variable.
+Then you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.
 
 ### How to use
 
@@ -32,7 +32,7 @@ There are several variants: `base`, `brand`, `neutral`, `critical`, `information
 
 ### Dark- & Light-Mode
 
-We provide tokens for both dark- and light-mode. If you include the `db-ui-42` style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools.
+We provide tokens for both dark- and light-mode. If you include the **db-ui-42** style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools.
 We recommend using the default media query based on the user preference, but if you want to force a mode for your page or a container you can do it with adding the attributes `data-color-scheme="dark"` or `data-color-scheme="light"`:
 
 #### HTML
@@ -43,4 +43,4 @@ We recommend using the default media query based on the user preference, but if
 
 We're providing an example in our [color schemes documentation](./color-schemes).
 
-We need to set the `base` background to the element with `[data-color-scheme]` so if you want to change the background to another color, make sure to use a wrapping tag like `div` with the `[data-color-scheme]` to avoid issues.
+We need to set the **base** background to the element with `[data-color-scheme]` so if you want to change the background to another color, make sure to use a wrapping tag like `<div>` with the `[data-color-scheme]` to avoid issues.

packages/foundations/docs/CustomIcons.md

@@ -1,6 +1,6 @@
 # Custom Icons
 
-If you have custom icons and want to use them for [foundations](https://www.npmjs.com/package/@db-ui/foundations) and/or in [components](https://www.npmjs.com/package/@db-ui/components), you need to generate a `woff2` file.
+If you have custom icons and want to use them for [foundations](https://www.npmjs.com/package/@db-ui/foundations) and/or in [components](https://www.npmjs.com/package/@db-ui/components), you need to generate a **woff2** file.
 
 ## Generate
 
@@ -12,7 +12,7 @@ npx @db-ui/gif --src ./my-path-to/icons --fontName my-name
 
 We search for all `**/*.svg` files inside the `src` directory and create a new icon font with the provided name. You can preview all generated icons here: `./my-path-to/icons/fonts/all/index.html`.
 
-> **_NOTE:_** We use four different sizes for components (16, 20, 24, 32) to show more or less details. You can do the same by providing another file with a size suffix for example "icon_file_name_16.svg".
+> **_NOTE:_** We use four different sizes for components (16, 20, 24, 32) to show more or less details. You can do the same by providing another file with a size suffix for example `icon_file_name_16.svg`.
 
 For more information run:
 
@@ -39,7 +39,7 @@ Now you can use your icons with your `font-family: my-name`, e.g.:
 
 ### SCSS
 
-When using `scss` you can also use `@forward` to include the generated files:
+When using **scss** you can also use `@forward` to include the generated files:
 
 ```scss
 @forward "public/font-face";
@@ -69,7 +69,7 @@ You can overwrite custom-icons for our components with CSS as well:
 
 ## Foundation Developer
 
-If you update a `svg` inside `assets/icons/functional/images` you need to recreate the `woff2` file.
+If you update a **svg** inside `assets/icons/functional/images` you need to recreate the **woff2** file.
 
 For this you just need to run
 

packages/foundations/docs/Densities.md

@@ -1,24 +1,24 @@
 # Densities
 
--   You could use `Densities` to create visual "volume levels"
+-   You could use **Densities** to create visual "volume levels"
 -   You could change the appearance of a container rather than a component
 -   Best example is the navigation on our [main page](https://db-ui.github.io/mono/review/main/). Above the navigation is a smaller meta-navigation and even the component inside is smaller as well as all the spacings. The meta-navigation is above the real navigation, but focus of the user is on the real navigation, because the meta-navigation has less "volume"
 
-There are three different `Densities`, you can use them to change the volume of a specific container or even the entire page based on the use-case, so change the default `density` when:
+There are three different **Densities**, you can use them to change the volume of a specific container or even the entire page based on the use-case, so change the default **density** when:
 
-1. `functional`: e.g. use this for business apps with large tables
-2. `regular`: e.g. use this for normal consumer apps
-3. `expressive`: e.g. use this for marketing apps/ single pages
+1. **functional**: e.g. use this for business apps with large tables
+2. **regular**: e.g. use this for normal consumer apps
+3. **expressive**: e.g. use this for marketing apps/ single pages
 
 ## How to include
 
-For `CSS`, `SCSS` and `Tailwind` you don't have to include a specific file, just follow the documentation for [foundations](../../foundations/readme).
+For **CSS**, **SCSS** and **Tailwind** you don't have to include a specific file, just follow the documentation for [foundations](../../foundations/readme).
 
 ### How to use
 
 We're providing [examples](./examples) to see the differences.
 
-We set the `data-density` on a container like a `div`:
+We set the `data-density` on a container like a `<div>`:
 
 ```html
 <div data-density="functional">
@@ -36,7 +36,7 @@ Variants:
 | `regular` (default) | `data-density="regular"`    |
 |    `expressive`     | `data-density="expressive"` |
 
-To change the `density` of the entire page use:
+To change the **density** of the entire page use:
 
 ```html
 <body data-density="functional">

packages/foundations/docs/FontsSizes.md

@@ -1,17 +1,17 @@
 # Font-Sizes
 
--   You should use our provided `Font-Sizes` to change the size of text elements like `<p>` etc.
+-   You should use our provided **Font-Sizes** to change the size of text elements like `<p>` etc.
 
 > **_NOTE:_** Some sizes may stay the same because of screen-width or density.
 
 ## How to include colors
 
-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.
+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.
 
-For `SCSS` you can use the `css` file, or you can use a placeholder by importing `@use @db-ui/foundations/build/scss/fonts` in your `.scss` file, where you need to reference the specific font size.
+For **SCSS** you can use the `.css` file, or you can use a placeholder by importing `@use @db-ui/foundations/build/scss/fonts` in your `.scss` file, where you need to reference the specific font size.
 Then you can use e.g. `sm` font-size by extending our SCSS placeholders like this: `@extend %db-overwrite-font-size-sm`.
 
-> **_NOTE:_** Make sure that you import the file after all other `foundation` css files, otherwise you should overwrite a specific `font-size` with the global selector
+> **_NOTE:_** Make sure that you import the file after all other **foundation** css files, otherwise you should overwrite a specific `font-size` with the global selector
 
 ```css
 /* Global selector */

packages/foundations/docs/Icons.md

@@ -1,26 +1,26 @@
 # Icons
 
--   We use icon fonts as `woff2` files for all our icons.
+-   We use icon fonts as **woff2** files for all our icons.
 -   We auto generate these files out of `.svg` files.
 -   A lot of our [components](../../components/readme) have an `icon` property you can pass in.
 
 ## How to include icons
 
-For `CSS`, `SCSS` and `Tailwind` you don't have to include a specific file, just follow the documentation for [foundations](../../foundations/readme).
+For **CSS**, **SCSS** and **Tailwind** you don't have to include a specific file, just follow the documentation for [foundations](../../foundations/readme).
 
 ### How to use
 
 We're providing an [overview for all of our icons](./overview).
 
 You can add an icon before or after a tag, by adding an `data-` attribute to your HTML code, like for example:
 
-| Variant |                  Data                  |
-| ------- | :------------------------------------: |
-| before  |    `data-icon="icon-from-overview"`    |
-| after   | `data-icon-after="icon-from-overview"` |
+| Variant  |                  Data                  |
+| -------- | :------------------------------------: |
+| `before` |    `data-icon="icon-from-overview"`    |
+| `after`  | `data-icon-after="icon-from-overview"` |
 
 ## Custom Icons
 
-If you have custom icons and want to use them for foundations and/or in components, you need to generate a `woff2` file.
+If you have custom icons and want to use them for foundations and/or in components, you need to generate a **woff2** file.
 
 [More information](./CustomIcons.md)

packages/foundations/docs/Variables.md

@@ -7,27 +7,27 @@
 
 ## How to include variables
 
-For `CSS` and `Tailwind` you don't have to include a specific file, just follow the documentation for [foundations](../../foundations/readme).
+For **CSS** and **Tailwind** you don't have to include a specific file, just follow the documentation for [foundations](../../foundations/readme).
 
-For `SCSS` you need to `@use` the import `@use @db-ui/foundations/build/scss/variables` in your `.scss` file, where you want to reference the specific variable.
+For **SCSS** you need to `@use` the import `@use @db-ui/foundations/build/scss/variables` in your `.scss` file, where you want to reference the specific variable.
 
 ## Simple overview for advanced
 
-| Variable type      | T-Shirts 👕                                | Base |
-| ------------------ | ------------------------------------------ | ---- |
-| spacing fixed      | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | `md` |
-| spacing responsive | `xs`, `sm`, `md`, `lg`, `xl`               | `md` |
-| sizing             | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md` |
+| Variable type          | T-Shirts 👕                                | Base |
+| ---------------------- | ------------------------------------------ | ---- |
+| **spacing fixed**      | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | `md` |
+| **spacing responsive** | `xs`, `sm`, `md`, `lg`, `xl`               | `md` |
+| **sizing**             | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md` |
 
 ## Spacing fixed
 
--   We use `spacing fixed` to add margins, paddings, gaps, etc.
+-   We use **spacing fixed** to add margins, paddings, gaps, etc.
 -   We don't use them for `width` or `height`.
 -   Those are the main variables you use all the time to build your page or component.
 
 ### How to use
 
-We use `padding` as an example for this variable.
+We use **padding** as an example for this variable.
 
 You can see a visual preview [spacings fixed examples page](./examples).
 
@@ -43,14 +43,14 @@ You can see a visual preview [spacings fixed examples page](./examples).
 
 ## Spacing responsive
 
--   We use `spacing responsive` to add spacings which should change based on the users' device.
+-   We use **spacing responsive** to add spacings which should change based on the users' device.
 -   We don't use them for `width` or `height`.
 -   Best example would be the padding for your `main` region which should be larger on a desktop device than mobile.
 -   We recommend using `DBSection` from our [components library](../../components/readme). The component handles the responsive Layout for your app, you don't have to struggle which spacing would be the correct one.
 
 ### How to use
 
-We use `padding` as an example for this variable.
+We use **padding** as an example for this variable.
 
 You can see a visual preview [spacings responsive examples page](./examples).
 
@@ -64,13 +64,13 @@ You can see a visual preview [spacings responsive examples page](./examples).
 
 ## Sizing
 
--   We use `sizing` to set a fixed height to components (Button, Input, ...).
+-   We use **sizing** to set a fixed height to components (Button, Input, ...).
 -   We don't use them for `padding` or `margin` except for absolute elements inside a component with a fixed height.
 -   You should use a sizing variable if you want to align a custom component with another component, which has a fixed height.
 
 ### How to use
 
-We use `height` as an example for this variable.
+We use **height** as an example for this variable.
 
 You can see a visual preview [sizings examples page](./examples).
 

showcases/patternhub/pages/foundations/variables/examples.tsx

@@ -19,8 +19,8 @@ const Example = () => {
 						variable.
 					</li>
 					<li>
-						Don't use it like this in a real app. 💢For example
-						`width: var(--db-spacing-fixed-md)`💥
+						Don't use it like this in a real app. 💢For example{' '}
+						<code>width: var(--db-spacing-fixed-md)</code> 💥
 					</li>
 				</ul>
 			</blockquote>