diff --git a/docs/how-to-develop-a-component.md b/docs/how-to-develop-a-component.md index bfda20f12ef..cdf5ba17a93 100644 --- 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 index 055330baca2..dfbd6ab4eea 100644 --- 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
`.db-ui-#{$tonality},[data-tonality="#{$tonality}"] {` to
`.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/styles/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`
2. If you use the color class replace `db-bg-x` with `db-x-bg-lvl-1`
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` | @@ -74,6 +74,6 @@ This is related to the following properties: ## 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. +Moreover, we add all optional styles to `relative` 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/output/angular/README.md b/output/angular/README.md index ff2721cc7da..fe934295117 100644 --- 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`
SCSS ```scss styles.scss // styles.scss -@forward "@db-ui/components/build/styles/db-ui-42-rollup"; +@forward "@db-ui/components/build/styles/rollup"; ```
@@ -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"; ``` -> **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 index 051f18b744f..4b7d74e4fd5 100644 --- 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`
SCSS ```scss // index.scss -@forward "@db-ui/components/build/styles/db-ui-42-rollup"; +@forward "@db-ui/components/build/styles/rollup"; ```
@@ -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"; ``` -> **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. ## Usage diff --git a/output/stencil/README.md b/output/stencil/README.md index 63526071d83..a3f4bdc1acb 100644 --- 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`
SCSS ```scss // index.scss -@forward "@db-ui/components/build/styles/db-ui-42-rollup"; +@forward "@db-ui/components/build/styles/rollup"; ```
@@ -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"; ``` -> **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. ## Usage diff --git a/output/vue/README.md b/output/vue/README.md index c2036f0aa1a..76f7c630d71 100644 --- 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`
SCSS ```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"; ```
-> **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. ## Usage diff --git a/packages/components/README.md b/packages/components/README.md index 232dda02269..309b15ef488 100644 --- 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) + 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 - + ``` 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 deleted file mode 100644 index 2d3eaee1e65..00000000000 --- a/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t +++ /dev/null @@ -1,6 +0,0 @@ ---- -inject: true -to: src/styles/_custom-elements.scss -after: angular-workaround ---- -db-<%= name %>, 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 new file mode 100644 index 00000000000..b31922ecc27 --- /dev/null +++ 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 index dc44bfc2662..c49d4a0fc00 100644 --- 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 index cd372ada19b..688537b0b0f 100644 --- 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 DB<%= h.changeCase.pascal(name) %> - +
Test
diff --git a/packages/components/docs/getting-started.md b/packages/components/docs/getting-started.md index 4bf45bb6899..3bb70e42bf4 100644 --- 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 - + ``` #### 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 index e32ddf18f9d..ccea238f77b 100644 --- a/packages/components/index.html +++ b/packages/components/index.html @@ -4,7 +4,7 @@ Dev - +