From 06cc1b5e72df019de9cf7e0cac4f0f56277c27bd Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Sun, 2 Jun 2024 22:01:11 +0200 Subject: [PATCH 1/2] docs: replace some code formatting by bold formatting --- packages/foundations/README.md | 16 ++++++------ packages/foundations/docs/Colors.md | 14 +++++----- packages/foundations/docs/CustomIcons.md | 8 +++--- packages/foundations/docs/Densities.md | 16 ++++++------ packages/foundations/docs/FontsSizes.md | 8 +++--- packages/foundations/docs/Icons.md | 14 +++++----- packages/foundations/docs/Variables.md | 26 +++++++++---------- .../pages/foundations/variables/examples.tsx | 2 +- 8 files changed, 52 insertions(+), 52 deletions(-) diff --git a/packages/foundations/README.md b/packages/foundations/README.md index 8ae65942496..8c7789ff9e7 100644 --- a/packages/foundations/README.md +++ b/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: > ``` -> **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 diff --git a/packages/foundations/docs/Colors.md b/packages/foundations/docs/Colors.md index 287dfbe2a12..5d05e5eb406 100644 --- a/packages/foundations/docs/Colors.md +++ b/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 `
` with the `[data-color-scheme]` to avoid issues. diff --git a/packages/foundations/docs/CustomIcons.md b/packages/foundations/docs/CustomIcons.md index 39acb43eb69..82697abe7c0 100644 --- a/packages/foundations/docs/CustomIcons.md +++ b/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 diff --git a/packages/foundations/docs/Densities.md b/packages/foundations/docs/Densities.md index dc9c90da5ae..429ef4f5fe4 100644 --- a/packages/foundations/docs/Densities.md +++ b/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 `
`: ```html
@@ -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 diff --git a/packages/foundations/docs/FontsSizes.md b/packages/foundations/docs/FontsSizes.md index da84ae805c8..fc2e12e3634 100644 --- a/packages/foundations/docs/FontsSizes.md +++ b/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 `

` etc. +- You should use our provided **Font-Sizes** to change the size of text elements like `

` 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 */ diff --git a/packages/foundations/docs/Icons.md b/packages/foundations/docs/Icons.md index e61c627e608..78294ae27f9 100644 --- a/packages/foundations/docs/Icons.md +++ b/packages/foundations/docs/Icons.md @@ -1,12 +1,12 @@ # 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 @@ -14,13 +14,13 @@ 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) diff --git a/packages/foundations/docs/Variables.md b/packages/foundations/docs/Variables.md index 75e6ef759d2..d2d1d5bd4f6 100644 --- a/packages/foundations/docs/Variables.md +++ b/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). diff --git a/showcases/patternhub/pages/foundations/variables/examples.tsx b/showcases/patternhub/pages/foundations/variables/examples.tsx index aa36cc03f1a..5d6e4820175 100644 --- a/showcases/patternhub/pages/foundations/variables/examples.tsx +++ b/showcases/patternhub/pages/foundations/variables/examples.tsx @@ -20,7 +20,7 @@ const Example = () => {

  • Don't use it like this in a real app. πŸ’’For example - `width: var(--db-spacing-fixed-md)`πŸ’₯ +  width: var(--db-spacing-fixed-md) πŸ’₯
    • From c5880d10c4d725ad073a7f5d2d3024cf5aaf0330 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Mon, 3 Jun 2024 09:49:40 +0200 Subject: [PATCH 2/2] fix: removes not necessary non-breaking-space --- showcases/patternhub/pages/foundations/variables/examples.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/showcases/patternhub/pages/foundations/variables/examples.tsx b/showcases/patternhub/pages/foundations/variables/examples.tsx index 5d6e4820175..cddaa0e1a59 100644 --- a/showcases/patternhub/pages/foundations/variables/examples.tsx +++ b/showcases/patternhub/pages/foundations/variables/examples.tsx @@ -19,8 +19,8 @@ const Example = () => { variable.
  • - 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{' '} + width: var(--db-spacing-fixed-md) πŸ’₯