Merge branch 'main' into fix-2678-tag-default-html

db-ui · Jun 17, 2024 · 86c4809 · 86c4809
2 parents e125f97 + bd87e31
commit 86c4809
Show file tree

Hide file tree

Showing 82 changed files with 3,215 additions and 3,597 deletions.
diff --git a/docs/migration/alpha-beta.md b/docs/migration/alpha-beta.md
@@ -6,11 +6,12 @@
 
 | Name                               | Description                                                                                                                                                                                                                                               | Action                                                                                                                                                                                                        |
 | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 🔄 renamed `Tonality` to `Density` | class names and data-attributes changed from <br/>`.db-ui-#{$tonality},[data-tonality="#{$tonality}"] {` to <br/>`.db-ui-#{density},[data-density="#{density}"] {`                                                                                        | search `tonality` & replace with `density`                                                                                                                                                                    |
+| 🔄 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";`                                        |
 | 🔄 ❗ 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`                                                                                                                                        |
 
 ### Internal
 
@@ -69,3 +70,10 @@ This is related to the following properties:
 -   `slotHeadline`
 -   `slotDrawerHeader`
 -   `slotSubNavigation`
+
+## Styling
+
+We add some more information about our styling and try to generate classes and data-attributes to use in the project, based on user-preferences.
+Moreover, we add all optional styles to `db-ui-42` which may increase the size, but reduces the complexity for using the Design-System with all features.
+
+If you encounter performance issues try to reduce your loaded styles with this [documentation](https://github.com/db-ui/mono/blob/main/packages/components/README.md#optimize-dependencies) or by using a tool like [purgecss](https://purgecss.com/).
diff --git a/e2e/package.json b/e2e/package.json
@@ -30,7 +30,7 @@
     "fs-extra": "^11.1.0",
     "http-server": "14.1.1",
     "npm-run-all": "4.1.5",
-    "tslib": "^2.5.0",
+    "tslib": "^2.6.3",
     "typescript": "^5.3.3"
   }
 }
diff --git a/output/angular/README.md b/output/angular/README.md
@@ -15,11 +15,11 @@ An Angular library containing all styles & components of [DB UX Design System (t
 npm i @db-ui/ngx-components
 ```
 
-> **Note:** This will install `@db-ui/foundations` and `@db-ui/components` as well which contains the `css`/`scss` files
+> **Note:** This will install [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations) and [`@db-ui/components`](https://www.npmjs.com/package/@db-ui/components) as well which contains the `css`/`scss` files
 
 ## Styling Dependencies
 
-Import the styles in scss or css. Based on your technology the file names could be different.
+Import the styles in `scss` or `css`. Based on your technology the file names could be different.
 
 -   Default (db-ui-42): points to `../assets`
 -   Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets`
@@ -44,6 +44,8 @@ Import the styles in scss or css. Based on your technology the file names could
 
 </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.
+
 ### Resolve assets
 
 The current default development config in `angular.json` doesn't use output hashing. This may cause an issue loading the fonts. Look at [this](https://github.com/angular/angular-cli/issues/26347) for more information.

diff --git a/output/angular/package.json b/output/angular/package.json
@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "17.3.8",
-    "@angular/common": "17.3.10",
+    "@angular/common": "17.3.11",
     "ng-packagr": "17.3.0",
     "typescript": "^5.4.5"
   },

diff --git a/output/react/README.md b/output/react/README.md
@@ -15,7 +15,7 @@ A React library containing all styles & components of [DB UX Design System (tech
 npm i @db-ui/react-components
 ```
 
-> **Note:** This will install `@db-ui/foundations` and `@db-ui/components` as well which contains the `css`/`scss` files
+> **Note:** This will install [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations) and [`@db-ui/components`](https://www.npmjs.com/package/@db-ui/components) as well which contains the `css`/`scss` files
 
 ## Styling Dependencies
 
@@ -44,6 +44,8 @@ import "@db-ui/components/build/styles/db-ui-42-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.
+
 ## Usage
 
 ```tsx

diff --git a/output/react/package.json b/output/react/package.json
@@ -29,7 +29,7 @@
     "@types/react": "^18.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sass": "^1.77.3"
+    "sass": "^1.77.5"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

diff --git a/output/vue/README.md b/output/vue/README.md
@@ -15,7 +15,7 @@ A Vue library containing all styles & components of [DB UX Design System (techni
 npm i @db-ui/v-components
 ```
 
-> **Note:** This will install `@db-ui/foundations` and `@db-ui/components` as well which contains the `css`/`scss` files
+> **Note:** This will install [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations) and [`@db-ui/components`](https://www.npmjs.com/package/@db-ui/components) as well which contains the `css`/`scss` files
 
 ## Styling Dependencies
 
@@ -51,6 +51,8 @@ import "@db-ui/v-components/dist/style.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.
+
 ## Usage
 
 ```vue

diff --git a/output/vue/package.json b/output/vue/package.json
@@ -38,15 +38,15 @@
     "test:components": "playwright test -c playwright.config.ts"
   },
   "dependencies": {
-    "vue": "^3.4.27"
+    "vue": "^3.4.29"
   },
   "devDependencies": {
     "@playwright/experimental-ct-vue": "1.44.1",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "sass": "^1.77.3",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "sass": "^1.77.5",
     "typescript": "^5.4.5",
-    "vite": "^5.2.12",
-    "vue-tsc": "^2.0.19"
+    "vite": "^5.3.1",
+    "vue-tsc": "^2.0.21"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",