feat: convert to whitelabel (#3616)

* feat: convert to whitelabel * Update packages/components/README.md Co-authored-by: Maximilian Franzke <[email protected]> * chore: update old references * chore: update snapshots * fix: issue with wc-workarounds * chore: update snapshots * fix: issue with foundation testing * fix: issue with linting * chore: update snapshots * fix: issue with missing fonts for foundations testing * chore: update snapshots * Update docs/migration/alpha-beta.md Co-authored-by: Maximilian Franzke <[email protected]> * Update output/react/README.md Co-authored-by: Maximilian Franzke <[email protected]> * Update output/stencil/README.md Co-authored-by: Maximilian Franzke <[email protected]> * Update output/vue/README.md Co-authored-by: Maximilian Franzke <[email protected]> * Update packages/components/README.md Co-authored-by: Maximilian Franzke <[email protected]> * Update packages/components/README.md Co-authored-by: Maximilian Franzke <[email protected]> * Update packages/components/src/styles/wc-workarounds.scss Co-authored-by: Maximilian Franzke <[email protected]> --------- Co-authored-by: Maximilian Franzke <[email protected]>
db-ui · Jan 9, 2025 · 1af58ec · 1af58ec
1 parent fd36948
commit 1af58ec
Show file tree

Hide file tree

Showing 158 changed files with 2,916 additions and 3,233 deletions.
diff --git a/...ns/chromium/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png b/...ns/chromium/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png
diff --git a/...ions/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png b/...ions/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png
diff --git a/...ons/firefox/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png b/...ons/firefox/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png
diff --git a/...tions/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png b/...tions/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png
diff --git a/...ions/webkit/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png b/...ions/webkit/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png
diff --git a/...ations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png b/...ations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png
diff --git a/__snapshots__/input/patternhub/input-docs-should-match-screenshot.png b/__snapshots__/input/patternhub/input-docs-should-match-screenshot.png
diff --git a/docs/how-to-develop-a-component.md b/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
 

diff --git a/docs/migration/alpha-beta.md b/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`                                                                                                                                        |
 

diff --git a/output/angular/README.md b/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
 

diff --git a/output/react/README.md b/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
 

diff --git a/output/stencil/README.md b/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
 

diff --git a/output/vue/README.md b/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
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/README.md b/packages/components/README.md
@@ -30,17 +30,17 @@ If you just need the styling follow this:
 
 Import the styles in `scss` or `css`. Based on your technology the file names could be different.
 
-- Default (db-ui-42): asset path point to `../assets`
-- Webpack (db-ui-42-webpack): asset path point to `~@db-ui/foundations/assets`
-- Rollup (db-ui-42-rollup): asset path point to `@db-ui/foundations/assets`
+- `relative`: asset path point to `../assets`
+- `webpack`: asset path point to `~@db-ui/foundations/assets`
+- `rollup`: asset path point to `@db-ui/foundations/assets`
 
-`db-ui-42` bundles all dependencies from [foundations](https://www.npmjs.com/package/@db-ui/foundations) + all [components](https://github.com/db-ui/mono/blob/main/packages/components/src/styles/db-ui-components.scss) available.
+They are bundling all dependencies from [foundations](https://www.npmjs.com/package/@db-ui/foundations) and all [components](https://github.com/db-ui/mono/blob/main/packages/components/src/styles/db-ui-components.scss) available.
 
 **SCSS**
 
 ```scss
 // index.scss
-@forward "@db-ui/components/build/styles/db-ui-42-rollup";
+@forward "@db-ui/components/build/styles/rollup";
 ```
 
 **CSS**
@@ -49,36 +49,36 @@ Within HTML files directly:
 
 ```html
 <!-- index.html //-->
-<link rel="stylesheet" href="/styles/db-ui-42.css" />
+<link rel="stylesheet" href="/styles/rollup.css" />
 ```
 
 Or within your JavaScript files, with the related bundler as a prefix (in this case rollup and equivalents like Vite):
 
 ```js
 // main.js
-import "@db-ui/components/build/styles/db-ui-42-rollup.css";
+import "@db-ui/components/build/styles/rollup.css";
 ```
 
 ### Optimize dependencies
 
-If you only need some of the components or some features from [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations), you shouldn't include `db-ui-42`.
+If you only need some of the components or some features from [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations), you shouldn't include the bundled file.
 In the case you want to include only some components, and you could do it like this:
 
 ```css
 /* The theme contains all prop required for components like spacings, colors, ... */
-@import "@db-ui/foundations/build/css/default-theme.css";
+@import "@db-ui/foundations/build/styles/default-theme.css";
 /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
-@import "@db-ui/foundations/build/css/fonts/include-rollup.css";
+@import "@db-ui/foundations/build/styles/fonts/include-rollup.css";
 /* The required styles will normalize css and add focus and default font to body */
-@import "@db-ui/foundations/build/css/init/required.css";
+@import "@db-ui/foundations/build/styles/init/required.css";
 /* The default root adds a default color space (neutral) and a density (regular) */
-@import "@db-ui/foundations/build/css/init/default-root.css";
+@import "@db-ui/foundations/build/styles/init/default-root.css";
 
 /* Optional: Add animations / transitions for components */
 @import "@db-ui/components/build/styles/component-animations.css";
 
 /* Optional: Add data-icon/data-icon-after to global attributes to enable icons for components */
-@import "@db-ui/foundations/build/css/icons/include-rollup.css";
+@import "@db-ui/foundations/build/styles/icons/include-rollup.css";
 
 /* Optional: Add components */
 @import "@db-ui/components/build/components/button/button.css";

diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t
diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t
@@ -0,0 +1,6 @@
+---
+inject: true
+to: src/styles/internal/_custom-elements.scss
+after: //hygen-insert
+---
+db-<%= name %>,
diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t
@@ -1,6 +1,6 @@
 ---
 inject: true
-to: src/styles/db-ui-components.scss
-before: angular-workaround
+to: src/styles/index.scss
+append: true
 ---
 @forward "../components/<%= name %>/<%= name %>";
diff --git a/packages/components/_templates/mitosis/new/component/html.ejs.t b/packages/components/_templates/mitosis/new/component/html.ejs.t
@@ -6,7 +6,7 @@ to: src/components/<%= name %>/index.html
 	<head>
 		<meta charset="UTF-8" />
 		<title>DB<%= h.changeCase.pascal(name) %></title>
-		<link rel="stylesheet" href="/styles/db-ui-42.css" />
+		<link rel="stylesheet" href="/styles/relative.css" />
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<div class="db-<%= name %>">Test</div>

diff --git a/packages/components/docs/getting-started.md b/packages/components/docs/getting-started.md
@@ -54,13 +54,13 @@ The integration depends on your tech stack and varies from copying the files fro
 #### Via HTML stylesheet include
 
 ```html
-<link rel="stylesheet" href="<PATH>/db-ui-42.css" type="text/css" />
+<link rel="stylesheet" href="<PATH>/relative.css" type="text/css" />
 ```
 
 #### Via SCSS import
 
 ```scss
-@use "@db-ui/components/build/styles/db-ui-42";
+@use "@db-ui/components/build/styles/relative";
 ```
 
 ### SCSS: node_modules include path / load path

diff --git a/packages/components/index.html b/packages/components/index.html
@@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
 		<title>Dev</title>
 		<meta name="viewport" content="width=device-width,initial-scale=1" />
-		<link rel="stylesheet" href="/styles/db-ui-42.css" />
+		<link rel="stylesheet" href="/styles/relative.css" />
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<ul>

diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js
@@ -1,7 +1,12 @@
 module.exports = {
 	plugins: [
 		require('cssnano')({
-			preset: 'default'
+			preset: [
+				'default',
+				{
+					svgo: false
+				}
+			]
 		})
 	]
 };
diff --git a/packages/components/src/README.md b/packages/components/src/README.md
@@ -9,7 +9,7 @@ There are some important files where we include `SCSS mixins` and `SCSS placehol
 Main use-case margins, paddings, height, width, ... Example:
 
 ```scss
-@use "@db-ui/foundations/build/scss/variables";
+@use "@db-ui/foundations/build/styles/variables";
 
 .db-xxx {
 	padding-inline-start: variables.$db-spacing-fixed-2xs;
@@ -21,7 +21,7 @@ Main use-case margins, paddings, height, width, ... Example:
 Main use-case to set/overwrite an icon inside a component. Example:
 
 ```scss
-@use "@db-ui/foundations/build/scss/icons";
+@use "@db-ui/foundations/build/styles/icons";
 
 .db-xxx {
 	@include icons.set-icon("chevron_down", "after");
@@ -33,7 +33,7 @@ Main use-case to set/overwrite an icon inside a component. Example:
 Main use-case to overwrite a default font-size/line-height. Example:
 
 ```scss
-@use "@db-ui/foundations/build/scss/fonts";
+@use "@db-ui/foundations/build/styles/fonts";
 
 .db-xxx {
 	label {
@@ -47,8 +47,8 @@ Main use-case to overwrite a default font-size/line-height. Example:
 Main use-case to overwrite a color or change colors by `data-variant`. Example:
 
 ```scss
-@use "@db-ui/foundations/build/scss/colors";
-@use "@db-ui/foundations/build/scss/helpers";
+@use "@db-ui/foundations/build/styles/colors";
+@use "@db-ui/foundations/build/styles/helpers";
 
 .db-xxx {
 	@include helpers.hover {
@@ -87,7 +87,7 @@ Main use-case for adaptive components. Example:
 Main use-case for media query. Example:
 
 ```scss
-@use "@db-ui/foundations/build/scss/screen-sizes";
+@use "@db-ui/foundations/build/styles/screen-sizes";
 
 .db-xxx {
 	display: grid;
@@ -104,7 +104,7 @@ Main use-case for media query. Example:
 Main use-case for converting `px` values or inserting UI styling like e.g. a divider. Example:
 
 ```scss
-@use "@db-ui/foundations/build/scss/helpers";
+@use "@db-ui/foundations/build/styles/helpers";
 
 .db-xxx {
 	@include helpers.divider("top");

diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss
@@ -1,9 +1,9 @@
-@use "@db-ui/foundations/build/scss/variables";
-@use "@db-ui/foundations/build/scss/helpers";
-@use "@db-ui/foundations/build/scss/colors";
-@use "@db-ui/foundations/build/scss/animation";
-@use "../../styles/form-components";
-@use "../../styles/component";
+@use "@db-ui/foundations/build/styles/variables";
+@use "@db-ui/foundations/build/styles/helpers";
+@use "@db-ui/foundations/build/styles/colors";
+@use "@db-ui/foundations/build/styles/animation";
+@use "../../styles/internal/form-components";
+@use "../../styles/internal/component";
 
 $db-accordion-item-border-radius: variables.$db-border-radius-sm;
 

diff --git a/packages/components/src/components/accordion-item/index.html b/packages/components/src/components/accordion-item/index.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="UTF-8" />
 		<title>DBAccordionItem</title>
-		<link rel="stylesheet" href="/styles/db-ui-42.css" />
+		<link rel="stylesheet" href="/styles/relative.css" />
 	</head>
 	<body style="padding: var(--db-spacing-fixed-md)">
 		<!-- HTML only component -->