Merge branch 'main' into refactor-add-to-project

.xo-config.cjs

@@ -1,6 +1,10 @@
 module.exports = {
 	prettier: true,
-	ignores: ['./showcases/nuxt-showcase/**', './packages/migration/**'],
+	ignores: [
+		'./showcases/nuxt-showcase/**',
+		'./packages/migration/**',
+		'./packages/foundations/assets/**'
+	],
 	overrides: [
 		{
 			files: ['./showcases/angular-showcase/**'],

docs/how-to-develop-a-component.md

@@ -21,11 +21,11 @@
 
 Starting with `packages/components/src/components/my-awesome-component/my-awesome-component.scss` there are something you should know:
 
-1. The most important dependency are the `variables` included via `@use "@db-ui/foundations/build/scss/variables";`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc.
-2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ui/foundations/build/scss/density/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`.
+1. The most important dependency are the `variables` included via `@use "@db-ui/foundations/build/styles/variables";`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc.
+2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ui/foundations/build/styles/density/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`.
 3. Some components have an 'adaptive' styling. We exclude it in an own file `@use "@db-ui/components/build/scss/styles/component";` so you might use this dependency. As a reference look at another component e.g. [`packages/components/src/components/button/button.scss`](../packages/components/src/components/button/button.scss).
-4. If you have to set a specific color (informational, warning, etc.) directly you can use `@use "@db-ui/foundations/build/scss/colors";`. You can take a look at the `notification` component for an example `packages/components/src/components/notification/notification.scss` you might use the `@each` to reduce the amount of code for color-variants.
-5. To set a fixed icon you might use `@use "@db-ui/foundations/build/scss/icon/icons.helpers" as icons;` as dependency and e.g. `@include icons.icon("arrow_forward"), "after");`. For a dynamic icon you could prefer integrating it in HTML code with the `data-icon` attribute.
+4. If you have to set a specific color (informational, warning, etc.) directly you can use `@use "@db-ui/foundations/build/styles/colors";`. You can take a look at the `notification` component for an example `packages/components/src/components/notification/notification.scss` you might use the `@each` to reduce the amount of code for color-variants.
+5. To set a fixed icon you might use `@use "@db-ui/foundations/build/styles/icon/icons.helpers" as icons;` as dependency and e.g. `@include icons.icon("arrow_forward"), "after");`. For a dynamic icon you could prefer integrating it in HTML code with the `data-icon` attribute.
 
 ### Component structure with HTML
 

docs/migration/alpha-beta.md

@@ -9,7 +9,7 @@
 | 🔄 renamed `Tonality` to `Density` | class names and data-attributes changed from <br/>`.db-ui-#{$tonality},[data-tonality="#{$tonality}"] {` to <br/>`.db-#{density},[data-density="#{density}"] {`                                                                                           | search `tonality` & replace with `density`                                                                                                                                                                    |
 | ❌ removed `opacity` tokens        | we use only 1 opacity (0.4) for all components                                                                                                                                                                                                            | If you use some of the tokens like `--db-opacity-sm` you might run into issues with your layout                                                                                                               |
 | 🔄 updated `border` tokens         | we add all shirt-sizes `3xs`-`3xl` as tokens                                                                                                                                                                                                              | If you use some of the tokens like `db-border-height-sm` you might run into issues with your layout, because the values behind it changed                                                                     |
-| 🔄 moved `_font-sizes.scss`        | We moved the file to another folder to align the same structure as icons or colors. We add `css` classes, you can use them by importing `@db-ui/foundations/scss/fonts/classes/all.css`                                                                   | If you use some placeholder like `%db-overwrite-font-size-sm` you might need to import the `_font-sizes.scss` like this: `@use "@db-ui/foundations/build/scss/fonts";`                                        |
+| 🔄 moved `_font-sizes.scss`        | We moved the file to another folder to align the same structure as icons or colors. We add `css` classes, you can use them by importing `@db-ui/foundations/scss/fonts/classes/all.css`                                                                   | If you use some placeholder like `%db-overwrite-font-size-sm` you might need to import the `_font-sizes.scss` like this: `@use "@db-ui/foundations/build/scss/fonts";`                                      |
 | 🔄 ❗ refactored `colors`          | All colors changed. We use color-palettes to generate speaking-names (check `@db-ui/foundations/scss/colors/_variables.scss` to see a list of available tokens). We removed `base` color, it was the same like `neutral`. Add different background level. | 1. Replace all `base` colors with `neutral`<br/>2. If you use the color class replace `db-bg-x` with `db-x-bg-lvl-1`<br/>3. Replace `border-strong`/ `border-weak` tokens with `contrast-high`/`contrast-low` |
 | 🔄 renamed timing variables        | renamed `$db-transition-emotional-timing` to `$db-transition-timing-emotional` / `--db-transition-emotional-timing` to `--db-transition-timing-emotional`                                                                                                 | Replace `transition-emotional-timing` by `transition-timing-emotional`                                                                                                                                        |
 

output/angular/README.md

@@ -21,16 +21,16 @@ npm i @db-ui/ngx-components
 
 Import the styles in `scss` or `css`. Based on your technology the file names could be different.
 
--   Default (db-ui-42): points to `../assets`
--   Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets`
--   Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets`
+-   Default (relative): points to `../assets`
+-   Rollup (rollup): points to `@db-ui/foundations/assets`
+-   Webpack (webpack): points to `~@db-ui/foundations/assets`
 
 <details>
   <summary><strong>SCSS</strong></summary>
 
 ```scss styles.scss
 // styles.scss
-@forward "@db-ui/components/build/styles/db-ui-42-rollup";
+@forward "@db-ui/components/build/styles/rollup";
 ```
 
 </details>
@@ -39,12 +39,12 @@ Import the styles in `scss` or `css`. Based on your technology the file names co
 
 ```css styles.css
 /* styles.css */
-@import "@db-ui/components/build/styles/db-ui-42-rollup.css";
+@import "@db-ui/components/build/styles/rollup.css";
 ```
 
 </details>
 
-> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
+> **Note:** The `relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
 
 ### Resolve assets
 

output/react/README.md

@@ -21,16 +21,16 @@ npm i @db-ui/react-components
 
 Import the styles in scss or css. Based on your technology the file names could be different.
 
--   Default (db-ui-42): points to `../assets`
--   Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets`
--   Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets`
+-   Default (relative): points to `../assets`
+-   Rollup (rollup): points to `@db-ui/foundations/assets`
+-   Webpack (webpack): points to `~@db-ui/foundations/assets`
 
 <details>
   <summary><strong>SCSS</strong></summary>
 
 ```scss
 // index.scss
-@forward "@db-ui/components/build/styles/db-ui-42-rollup";
+@forward "@db-ui/components/build/styles/rollup";
 ```
 
 </details>
@@ -39,12 +39,12 @@ Import the styles in scss or css. Based on your technology the file names could
 
 ```tsx
 // main.tsx
-import "@db-ui/components/build/styles/db-ui-42-rollup.css";
+import "@db-ui/components/build/styles/rollup.css";
 ```
 
 </details>
 
-> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
+> **Note:** The `@db-ui/components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
 
 ## Usage
 

output/stencil/README.md

@@ -19,16 +19,16 @@ npm i @db-ui/web-components
 
 Import the styles in scss or css. Based on your technology the file names could be different.
 
--   Default (db-ui-42): points to `../assets`
--   Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets`
--   Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets`
+-   Default (relative): points to `../assets`
+-   Rollup (rollup): points to `@db-ui/foundations/assets`
+-   Webpack (webpack): points to `~@db-ui/foundations/assets`
 
 <details>
   <summary><strong>SCSS</strong></summary>
 
 ```scss
 // index.scss
-@forward "@db-ui/components/build/styles/db-ui-42-rollup";
+@forward "@db-ui/components/build/styles/rollup";
 ```
 
 </details>
@@ -37,12 +37,12 @@ Import the styles in scss or css. Based on your technology the file names could
 
 ```js
 // main.js
-import "@db-ui/components/build/styles/db-ui-42-rollup.css";
+import "@db-ui/components/build/styles/rollup.css";
 ```
 
 </details>
 
-> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
+> **Note:** The `@db-ui/components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
 
 ## Usage
 

output/stencil/package.json

@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@stencil/core": "4.23.0",
+    "@stencil/core": "4.23.1",
     "cem-plugin-expanded-types": "^1.3.2",
     "custom-element-jet-brains-integration": "^1.6.2",
     "custom-element-vs-code-integration": "^1.4.1",

output/vue/README.md

@@ -21,16 +21,16 @@ npm i @db-ui/v-components
 
 Import the styles in scss or css. Based on your technology the file names could be different.
 
--   Default (db-ui-42): points to `../assets`
--   Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets`
--   Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets`
+-   Default (relative): points to `../assets`
+-   Rollup (rollup): points to `@db-ui/foundations/assets`
+-   Webpack (webpack): points to `~@db-ui/foundations/assets`
 
 <details>
   <summary><strong>SCSS</strong></summary>
 
 ```scss
 // style.scss
-@forward "@db-ui/components/build/styles/db-ui-42-rollup";
+@forward "@db-ui/components/build/styles/rollup";
 ```
 
 ```ts
@@ -44,12 +44,12 @@ import "./style.scss";
 
 ```ts
 // main.ts
-import "@db-ui/components/build/styles/db-ui-42-rollup.css";
+import "@db-ui/components/build/styles/rollup.css";
 ```
 
 </details>
 
-> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
+> **Note:** The `@db-ui/components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
 
 ## Usage