Merge branch 'feat-color-palette' into chore-rename-tab-to-tab-item

# Conflicts:
#	packages/components/src/components/tab-item/tab-item.scss
#	packages/components/src/components/tabs/tabs.lite.tsx
#	showcases/patternhub/pages/components/router-usage.mdx
#	showcases/react-showcase/src/components/form/index.tsx
#	showcases/vue-showcase/src/components/tab-item/TabItem.vue

.github/workflows/02-e2e.yml

@@ -50,12 +50,7 @@ jobs:
       - name: 🚋 Get working directory
         id: workingDirectory
         shell: bash
-        run: |
-          if [[ ${{ matrix.framework }} == "vue" ]]; then
-            echo "dir=vue/vue3" >> $GITHUB_OUTPUT
-          else
-            echo "dir=${{ matrix.framework }}" >> $GITHUB_OUTPUT
-          fi
+        run: echo "dir=${{ matrix.framework }}" >> $GITHUB_OUTPUT
 
       - name: 👩‍🔬 Test with Playwright 🎭
         working-directory: ./output/${{ steps.workingDirectory.outputs.dir }}

.gitignore

@@ -11,7 +11,6 @@ dependencyGraph.json
 source/_meta/_head.mustache
 source/_meta/_foot.mustache
 
-tailwind.config.js
 !e2e/.env
 .env
 **/*/.env

.jscpd.json

@@ -31,14 +31,14 @@
 		"showcases/shared/*.json",
 		"showcases/patternhub/out/**",
 		"packages/components/src/components/**/index.html",
-		"packages/components/src/components/alert/alert.lite.tsx",
-		"showcases/react-showcase/src/components/alert/index.tsx",
+		"packages/components/src/components/notification/notification.lite.tsx",
+		"showcases/react-showcase/src/components/notification/index.tsx",
 		"packages/components/src/components/checkbox/checkbox.lite.tsx",
 		"showcases/react-showcase/src/components/checkbox/index.tsx",
 		"packages/components/src/components/radio/radio.lite.tsx",
 		"showcases/react-showcase/src/components/radio/index.tsx",
 		"showcases/react-showcase/src/components/radio/index.tsx",
-		"showcases/react-showcase/src/components/alert/index.tsx",
+		"showcases/react-showcase/src/components/notification/index.tsx",
 		"showcases/vue-showcase/src/components/form/Form.vue",
 		"showcases/angular-showcase/.angular/cache/**",
 		"packages/components/src/components/**/*.spec.tsx",

README.md

@@ -29,7 +29,7 @@ designers, and content authors build, maintain, and scale best of class digital
 | [components](https://github.com/db-ui/mono/tree/main/packages/components)   | CSS/SCSS styles for components      | [![@db-ui/components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/components "DB UI – on NPM")             |
 | [ngx-components](https://github.com/db-ui/mono/tree/main/output/angular)    | Native Angular components           | [![@db-ui/ngx-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/ngx-components "DB UI – on NPM")     |
 | [react-components](https://github.com/db-ui/mono/tree/main/output/react)    | Native React components             | [![@db-ui/react-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/react-components "DB UI – on NPM") |
-| [v-components](https://github.com/db-ui/mono/tree/main/output/vue/vue3)     | Native Vue components               | [![@db-ui/v-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/v-components "DB UI – on NPM")         |
+| [v-components](https://github.com/db-ui/mono/tree/main/output/vue)          | Native Vue 3 components             | [![@db-ui/v-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/v-components "DB UI – on NPM")         |
 
 ## How to use
 
@@ -85,6 +85,12 @@ This is mainly a platform providing the space and technology for a common basis
 is mainly driven by the community and adapted out of the work done in projects and through the huge amount of feedback
 that we're gaining out of the community. So please support us in any way possible, this is greatly appreciated!
 
+## Migration
+
+Check our migration docs for breaking changes
+
+1. [Alpha ➡ Beta](https://github.com/db-ui/mono/tree/main/docs) (0.0.x➡0.x.x)
+
 ## How to start develop / contribute
 
 ```shell

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

@@ -24,7 +24,7 @@ Starting with `packages/components/src/components/my-awesome-component/my-awesom
 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/tonality/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 `alert` component for an example `packages/components/src/components/alert/alert.scss` you might use the `@each` to reduce the amount of code for color-variants.
+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.
 
 ### Component structure with HTML

docs/migration/alpha-beta.md

@@ -0,0 +1,56 @@
+# Migration Alpha (0.0.x) ➡ Beta (0.1.x)
+
+## Foundations
+
+### Internal
+
+| Name                              | Description                                                                                | Action |
+| --------------------------------- | ------------------------------------------------------------------------------------------ | ------ |
+| ❌ removed `style-dictonary`      | all variables will be generated in [theme-builder](https://github.com/db-ui/theme-builder) | ---    |
+| ❌ removed `zeplin-styleguide.js` | we use `Figma` in the future                                                               | ---    |
+
+### Breaking Changes
+
+| 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`                                                                                                                                                                    |
+| ❌ 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` |
+
+## Components
+
+> **Note**: All components have different colors and opacities based on the changes in foundations.
+>
+> Some components may have different dimensions based on changes of spacing tokens.
+>
+> We removed the default elevation (box-shadow) for card and some card-like components.
+>
+> The prop variant like `variant="informational"` has been renamed to `semantic`.
+>
+> The prop labelVariant for form-components (input, checkbox, ...) has been renamed to `variant`.
+
+| Name                                                                                                           | Description                                                                                                                             | Action                                                                                                                                                                                                     |
+| -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 🔄 renamed `db-alert` to `db-notification`                                                                     | renamed `alert` to `notification` and add/changed some additional properties                                                            | 1. Replace `DBAlert`, `db-alert` by `DBNotification` / `db-notification`<br/>2. `Link` was removed, add a normal `a` or `DBLink` to the `slotLink`<br/>3. `props.type` has been changed to `props.variant` |
+| 🔄 renamed `db-main-navigation` to `db-navigation`                                                             | renamed `main-navigation` to `navigation`                                                                                               | Replace `DBMainNavigation`, `db-main-navigation` by `DBNavigation` / `db-navigation`                                                                                                                       |
+| 🔄 changed `db-button` variants                                                                                | We renamed the variants for the button                                                                                                  | `primary` ➡ `brand`<br/>`solid` ➡ `filled`<br/>`text` ➡ `ghost`                                                                                                                                         |
+| 🔄 changed `db-card` elevation                                                                                 | We replaced the box-shadow elevation with bg-level                                                                                      | 1. `props.elevation` ➡ `props.elevationLevel` (1,2,3) <br/>2. `props.variant` ➡ `props.behaviour` <br/>3. Removed card-image                                                                             |
+| 🆕 valid/invalid message form-components                                                                       | We add additional messages for `required` form-components like `DBInput` etc.                                                           | Use `validMessage="XXX"` and `invalidMessage="XXX"` to display the required information for form-components. Otherwise you will see a default message with a `TODO: ...`                                   |
+| 🔄 changed `db-link` variant                                                                                   | We renamed the variants for the link                                                                                                    | `primary` ➡ `brand`                                                                                                                                                                                       |
+| ❌ removed `data-variant="information/critical/..."` for form-components like `input`, `select` and `textarea` | We don't support the colors changes anymore. Use `required`, `pattern`, `min` etc. to trigger `user-valid` for green and red components | `data-variant` changes the label variant now                                                                                                                                                               |
+
+### React
+
+`slot` prefix was removed for all components containing another child element, for example:
+
+```tsx
+<DBHeader slotBrand={...
+```
+
+becomes
+
+```tsx
+<DBHeader brand={...
+```

e2e/docker-compose.yml

@@ -15,13 +15,13 @@ services:
       - "./../showcases:/e2e/showcases"
       - "./../output/react/playwright:/e2e/output/react/playwright"
       - "./../output/react/src:/e2e/output/react/src"
-      - "./../output/vue/vue3/src:/e2e/output/vue/vue3/src"
+      - "./../output/vue/src:/e2e/output/vue/src"
       - type: bind
         source: ./package.json
         target: /e2e/package.json
       - type: bind
         source: ./../output/react/playwright.config.ts
         target: /e2e/output/react/playwright.config.ts
       - type: bind
-        source: ./../output/vue/vue3/playwright.config.ts
-        target: /e2e/output/vue/vue3/playwright.config.ts
+        source: ./../output/vue/playwright.config.ts
+        target: /e2e/output/vue/playwright.config.ts

e2e/package.json

@@ -6,8 +6,7 @@
   "workspaces": [
     "showcases/*",
     "packages/*",
-    "output/*",
-    "output/vue/vue3"
+    "output/*"
   ],
   "scripts": {
     "regenerate": "npm-run-all -p regenerate:*",

output/vue/vue3/package.json → output/vue/package.json

@@ -30,9 +30,9 @@
     "build": "npm-run-all build:*",
     "build:01_vite": "vite build",
     "build:02_types": "vue-tsc --declaration --emitDeclarationOnly",
-    "mv:dist": "cpr dist ../../../build-outputs/vue/dist -o",
-    "mv:package.json": "cpr package.json ../../../build-outputs/vue/package.json -o",
-    "mv:readme": "cpr README.md ../../../build-outputs/vue/README.md -o",
+    "mv:dist": "cpr dist ../../build-outputs/vue/dist -o",
+    "mv:package.json": "cpr package.json ../../build-outputs/vue/package.json -o",
+    "mv:readme": "cpr README.md ../../build-outputs/vue/README.md -o",
     "postbuild": "npm-run-all -p mv:*",
     "test:components": "playwright test -c playwright.config.ts"
   },