From f75981aace25b5c47dc268543f45b9f4505a3109 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 19 Dec 2024 14:56:01 +0100 Subject: [PATCH 1/3] feat: convert to whitelabel --- packages/components/README.md | 26 +++--- packages/components/src/README.md | 14 ++-- .../accordion-item/accordion-item.scss | 8 +- .../src/components/accordion/accordion.scss | 4 +- .../src/components/badge/badge.scss | 4 +- .../src/components/brand/brand.scss | 6 +- .../src/components/button/button.scss | 10 +-- .../components/src/components/card/card.scss | 6 +- .../src/components/checkbox/checkbox.scss | 10 +-- .../src/components/divider/divider.scss | 4 +- .../src/components/drawer/drawer.scss | 8 +- .../src/components/header/header.scss | 10 +-- .../components/src/components/icon/icon.scss | 2 +- .../src/components/infotext/infotext.scss | 8 +- .../src/components/input/input.scss | 10 +-- .../components/src/components/link/link.scss | 12 +-- .../navigation-item/navigation-item.scss | 14 ++-- .../src/components/navigation/navigation.scss | 4 +- .../components/notification/notification.scss | 10 +-- .../components/src/components/page/page.scss | 2 +- .../src/components/popover/popover.scss | 2 +- .../src/components/radio/radio.scss | 4 +- .../src/components/section/section.scss | 4 +- .../src/components/select/select.scss | 8 +- .../src/components/switch/switch.scss | 10 +-- .../src/components/tab-item/tab-item.scss | 8 +- .../src/components/tab-list/tab-list.scss | 2 +- .../src/components/tab-panel/tab-panel.scss | 2 +- .../components/src/components/tabs/tabs.scss | 4 +- .../components/src/components/tag/tag.scss | 12 +-- .../src/components/textarea/textarea.scss | 8 +- .../src/components/tooltip/tooltip.scss | 8 +- .../components/src/styles/_component.scss | 8 +- packages/components/src/styles/_db-puls.scss | 6 +- .../src/styles/_form-components.scss | 10 +-- .../components/src/styles/_icon-passing.scss | 4 +- .../src/styles/_link-components.scss | 8 +- .../src/styles/_popover-component.scss | 6 +- .../components/src/styles/_scrollbar.scss | 8 +- .../src/styles/_stack-components.scss | 4 +- .../src/styles/_tag-components.scss | 6 +- .../{db-ui-42-absolute.scss => absolute.scss} | 4 +- .../src/styles/component-animations.scss | 2 +- .../src/styles/db-ui-42-rollup.scss | 5 -- .../src/styles/db-ui-42-webpack.scss | 5 -- packages/components/src/styles/db-ui-42.scss | 12 --- .../components/src/styles/dialog-init.scss | 2 +- .../{db-ui-components.scss => index.scss} | 2 +- packages/components/src/styles/relative.scss | 12 +++ packages/components/src/styles/rollup.scss | 5 ++ .../src/styles/visually-hidden.scss | 2 +- packages/components/src/styles/webpack.scss | 5 ++ packages/foundations/README.md | 80 +++++++++---------- packages/foundations/package.json | 4 +- packages/foundations/scss/absolute.scss | 3 + .../scss/db-ui-foundations-absolute.scss | 3 - .../scss/db-ui-foundations-rollup.scss | 3 - .../scss/db-ui-foundations-webpack.scss | 3 - packages/foundations/scss/index.scss | 1 + .../{db-ui-foundations.scss => relative.scss} | 2 +- packages/foundations/scss/rollup.scss | 3 + packages/foundations/scss/webpack.scss | 3 + 62 files changed, 233 insertions(+), 232 deletions(-) rename packages/components/src/styles/{db-ui-42-absolute.scss => absolute.scss} (52%) delete mode 100644 packages/components/src/styles/db-ui-42-rollup.scss delete mode 100644 packages/components/src/styles/db-ui-42-webpack.scss delete mode 100644 packages/components/src/styles/db-ui-42.scss rename packages/components/src/styles/{db-ui-components.scss => index.scss} (96%) create mode 100644 packages/components/src/styles/relative.scss create mode 100644 packages/components/src/styles/rollup.scss create mode 100644 packages/components/src/styles/webpack.scss create mode 100644 packages/foundations/scss/absolute.scss delete mode 100644 packages/foundations/scss/db-ui-foundations-absolute.scss delete mode 100644 packages/foundations/scss/db-ui-foundations-rollup.scss delete mode 100644 packages/foundations/scss/db-ui-foundations-webpack.scss create mode 100644 packages/foundations/scss/index.scss rename packages/foundations/scss/{db-ui-foundations.scss => relative.scss} (56%) create mode 100644 packages/foundations/scss/rollup.scss create mode 100644 packages/foundations/scss/webpack.scss diff --git a/packages/components/README.md b/packages/components/README.md index 232dda02269..79efb1f8759 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` +- relatve: 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/src/README.md b/packages/components/src/README.md index 7ab59a33f0f..006bfbc1e3b 100644 --- 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 index 5a97deb5126..76e30282004 100644 --- a/packages/components/src/components/accordion-item/accordion-item.scss +++ b/packages/components/src/components/accordion-item/accordion-item.scss @@ -1,7 +1,7 @@ -@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 "@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/form-components"; @use "../../styles/component"; diff --git a/packages/components/src/components/accordion/accordion.scss b/packages/components/src/components/accordion/accordion.scss index 8142590abc5..f9dc6d08737 100644 --- a/packages/components/src/components/accordion/accordion.scss +++ b/packages/components/src/components/accordion/accordion.scss @@ -1,5 +1,5 @@ -@use "@db-ui/foundations/build/scss/helpers"; -@use "@db-ui/foundations/build/scss/variables"; +@use "@db-ui/foundations/build/styles/helpers"; +@use "@db-ui/foundations/build/styles/variables"; @use "../../styles/component"; @mixin accordion-subsequent-item-selector() { diff --git a/packages/components/src/components/badge/badge.scss b/packages/components/src/components/badge/badge.scss index 6a2d581ec47..70cc665ba18 100644 --- a/packages/components/src/components/badge/badge.scss +++ b/packages/components/src/components/badge/badge.scss @@ -1,6 +1,6 @@ @use "sass:map"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/fonts"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/fonts"; @use "../../styles/button-components"; @use "../../styles/tag-components"; @use "../../styles/component"; diff --git a/packages/components/src/components/brand/brand.scss b/packages/components/src/components/brand/brand.scss index 70110651547..5fffbcf888c 100644 --- a/packages/components/src/components/brand/brand.scss +++ b/packages/components/src/components/brand/brand.scss @@ -1,6 +1,6 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/fonts"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/fonts"; .db-brand { @extend %db-overwrite-font-size-md; diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss index fd189ea0ef8..4cc67e743dc 100644 --- a/packages/components/src/components/button/button.scss +++ b/packages/components/src/components/button/button.scss @@ -1,10 +1,10 @@ @charset "utf-8"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/icons"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/icons"; +@use "@db-ui/foundations/build/styles/helpers"; @use "../../styles/component"; @use "../../styles/button-components"; diff --git a/packages/components/src/components/card/card.scss b/packages/components/src/components/card/card.scss index 6e780766d5e..67c9d184dff 100644 --- a/packages/components/src/components/card/card.scss +++ b/packages/components/src/components/card/card.scss @@ -1,6 +1,6 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/helpers"; @use "../../styles/component"; .db-card { diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss index 26aca44bdce..504f9b0113e 100644 --- a/packages/components/src/components/checkbox/checkbox.scss +++ b/packages/components/src/components/checkbox/checkbox.scss @@ -1,8 +1,8 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/icons"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/icons"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/helpers"; @use "../../styles/component"; @use "../../styles/form-components"; diff --git a/packages/components/src/components/divider/divider.scss b/packages/components/src/components/divider/divider.scss index fdf3d726d14..70a5d795b11 100644 --- a/packages/components/src/components/divider/divider.scss +++ b/packages/components/src/components/divider/divider.scss @@ -1,5 +1,5 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/helpers"; .db-divider { &:is(:not([data-margin]), [data-margin="small"]) { diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss index 102d23950e9..98a20f6310e 100644 --- a/packages/components/src/components/drawer/drawer.scss +++ b/packages/components/src/components/drawer/drawer.scss @@ -1,8 +1,8 @@ @use "sass:map"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/helpers"; -@use "@db-ui/foundations/build/scss/animation"; -@use "@db-ui/foundations/build/scss/colors"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/helpers"; +@use "@db-ui/foundations/build/styles/animation"; +@use "@db-ui/foundations/build/styles/colors"; @use "../../styles/component"; @use "./../../styles/dialog-init"; diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss index e61b2b4e5e5..877a53bc5ae 100644 --- a/packages/components/src/components/header/header.scss +++ b/packages/components/src/components/header/header.scss @@ -1,8 +1,8 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/screen-sizes"; -@use "@db-ui/foundations/build/scss/helpers"; -@use "@db-ui/foundations/build/scss/density"; -@use "@db-ui/foundations/build/scss/colors"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/screen-sizes"; +@use "@db-ui/foundations/build/styles/helpers"; +@use "@db-ui/foundations/build/styles/density"; +@use "@db-ui/foundations/build/styles/colors"; @use "../../styles/component"; .db-header { diff --git a/packages/components/src/components/icon/icon.scss b/packages/components/src/components/icon/icon.scss index 821ca0977c3..b274c1ab459 100644 --- a/packages/components/src/components/icon/icon.scss +++ b/packages/components/src/components/icon/icon.scss @@ -1,4 +1,4 @@ -@use "@db-ui/foundations/build/scss/icons"; +@use "@db-ui/foundations/build/styles/icons"; .db-icon { @include icons.is-icon-text-replace(); diff --git a/packages/components/src/components/infotext/infotext.scss b/packages/components/src/components/infotext/infotext.scss index cc8e0326cb6..1f430f7c46c 100644 --- a/packages/components/src/components/infotext/infotext.scss +++ b/packages/components/src/components/infotext/infotext.scss @@ -1,8 +1,8 @@ @use "sass:map"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/icons"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/icons"; .db-infotext { --db-icon-margin-end: #{variables.$db-spacing-fixed-2xs}; diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss index 1fc44d4cf28..be8a8935b80 100644 --- a/packages/components/src/components/input/input.scss +++ b/packages/components/src/components/input/input.scss @@ -1,8 +1,8 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/icons"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/icons"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/helpers"; @use "../../styles/component"; @use "../../styles/form-components"; @use "../../styles/button-components"; diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss index fc0f3a35d84..91530124ead 100644 --- a/packages/components/src/components/link/link.scss +++ b/packages/components/src/components/link/link.scss @@ -1,11 +1,11 @@ @charset "utf-8"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/animation"; -@use "@db-ui/foundations/build/scss/helpers"; -@use "@db-ui/foundations/build/scss/icons"; -@use "@db-ui/foundations/build/scss/colors"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/animation"; +@use "@db-ui/foundations/build/styles/helpers"; +@use "@db-ui/foundations/build/styles/icons"; +@use "@db-ui/foundations/build/styles/colors"; @use "../../styles/link-components"; .db-link { diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss index e6d68a90964..12b96e4945e 100644 --- a/packages/components/src/components/navigation-item/navigation-item.scss +++ b/packages/components/src/components/navigation-item/navigation-item.scss @@ -1,10 +1,10 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/screen-sizes"; -@use "@db-ui/foundations/build/scss/helpers"; -@use "@db-ui/foundations/build/scss/animation"; -@use "@db-ui/foundations/build/scss/icons"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/screen-sizes"; +@use "@db-ui/foundations/build/styles/helpers"; +@use "@db-ui/foundations/build/styles/animation"; +@use "@db-ui/foundations/build/styles/icons"; @use "../../styles/icon-passing"; @use "../../styles/component"; diff --git a/packages/components/src/components/navigation/navigation.scss b/packages/components/src/components/navigation/navigation.scss index 9aa3b9a713e..60f22afd875 100644 --- a/packages/components/src/components/navigation/navigation.scss +++ b/packages/components/src/components/navigation/navigation.scss @@ -1,5 +1,5 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/screen-sizes"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/screen-sizes"; @use "../../styles/component"; @use "../../styles/form-components"; @use "../../styles/db-puls"; diff --git a/packages/components/src/components/notification/notification.scss b/packages/components/src/components/notification/notification.scss index 3ce0de1e76a..b7d0ca47532 100644 --- a/packages/components/src/components/notification/notification.scss +++ b/packages/components/src/components/notification/notification.scss @@ -1,9 +1,9 @@ @use "sass:map"; -@use "@db-ui/foundations/build/scss/density"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/icons"; -@use "@db-ui/foundations/build/scss/screen-sizes"; +@use "@db-ui/foundations/build/styles/density"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/icons"; +@use "@db-ui/foundations/build/styles/screen-sizes"; @use "../../styles/component"; @use "../../styles/link-components"; @use "./notification-grid-default"; diff --git a/packages/components/src/components/page/page.scss b/packages/components/src/components/page/page.scss index f679d024156..590521ce3cb 100644 --- a/packages/components/src/components/page/page.scss +++ b/packages/components/src/components/page/page.scss @@ -1,4 +1,4 @@ -@use "@db-ui/foundations/build/scss/variables"; +@use "@db-ui/foundations/build/styles/variables"; .db-page-document { block-size: 100%; diff --git a/packages/components/src/components/popover/popover.scss b/packages/components/src/components/popover/popover.scss index 2a4c480aa09..f7a82fb98f9 100644 --- a/packages/components/src/components/popover/popover.scss +++ b/packages/components/src/components/popover/popover.scss @@ -1,4 +1,4 @@ -@use "@db-ui/foundations/build/scss/variables"; +@use "@db-ui/foundations/build/styles/variables"; @use "../../styles/popover-component"; @use "../../styles/component"; diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss index 3e805b8ebdd..6a709879970 100644 --- a/packages/components/src/components/radio/radio.scss +++ b/packages/components/src/components/radio/radio.scss @@ -1,5 +1,5 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; @use "../../styles/form-components"; .db-radio { diff --git a/packages/components/src/components/section/section.scss b/packages/components/src/components/section/section.scss index 26fa948377d..0aec8eaeb97 100644 --- a/packages/components/src/components/section/section.scss +++ b/packages/components/src/components/section/section.scss @@ -1,5 +1,5 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/screen-sizes"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/screen-sizes"; @use "../../styles/component"; $default-section-padding-inline: variables.$db-spacing-fixed-md; diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss index 9a08fe85d34..acfd57ace18 100644 --- a/packages/components/src/components/select/select.scss +++ b/packages/components/src/components/select/select.scss @@ -1,8 +1,8 @@ @use "sass:map"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/icons"; -@use "@db-ui/foundations/build/scss/fonts"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/icons"; +@use "@db-ui/foundations/build/styles/fonts"; @use "../../styles/form-components"; @use "../../styles/component"; diff --git a/packages/components/src/components/switch/switch.scss b/packages/components/src/components/switch/switch.scss index 78129ed7896..97db42f8838 100644 --- a/packages/components/src/components/switch/switch.scss +++ b/packages/components/src/components/switch/switch.scss @@ -1,8 +1,8 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/helpers"; -@use "@db-ui/foundations/build/scss/icons"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/helpers"; +@use "@db-ui/foundations/build/styles/icons"; @use "../../styles/form-components"; $switch-fixed-padding: helpers.px-to-rem(2); diff --git a/packages/components/src/components/tab-item/tab-item.scss b/packages/components/src/components/tab-item/tab-item.scss index e1b54df1faa..e7cb9f0a4fd 100644 --- a/packages/components/src/components/tab-item/tab-item.scss +++ b/packages/components/src/components/tab-item/tab-item.scss @@ -1,7 +1,7 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/icons"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/icons"; +@use "@db-ui/foundations/build/styles/helpers"; @use "../../styles/component"; @use "../../styles/db-puls"; @use "../../styles/form-components"; diff --git a/packages/components/src/components/tab-list/tab-list.scss b/packages/components/src/components/tab-list/tab-list.scss index dd864977c92..ca489989c9e 100644 --- a/packages/components/src/components/tab-list/tab-list.scss +++ b/packages/components/src/components/tab-list/tab-list.scss @@ -1,4 +1,4 @@ -@use "@db-ui/foundations/build/scss/variables"; +@use "@db-ui/foundations/build/styles/variables"; @use "../../styles/scrollbar"; .db-tab-list { diff --git a/packages/components/src/components/tab-panel/tab-panel.scss b/packages/components/src/components/tab-panel/tab-panel.scss index 27d22078e8f..0f34b66e8a5 100644 --- a/packages/components/src/components/tab-panel/tab-panel.scss +++ b/packages/components/src/components/tab-panel/tab-panel.scss @@ -1,4 +1,4 @@ -@use "@db-ui/foundations/build/scss/variables"; +@use "@db-ui/foundations/build/styles/variables"; .db-tab-panel { display: none; diff --git a/packages/components/src/components/tabs/tabs.scss b/packages/components/src/components/tabs/tabs.scss index 3e3bb93b1ec..b49fe42af0b 100644 --- a/packages/components/src/components/tabs/tabs.scss +++ b/packages/components/src/components/tabs/tabs.scss @@ -1,5 +1,5 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; @use "../../styles/form-components"; @use "../../styles/db-puls"; diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss index 94db0e17a0f..dd8dcad8aff 100644 --- a/packages/components/src/components/tag/tag.scss +++ b/packages/components/src/components/tag/tag.scss @@ -1,10 +1,10 @@ @use "sass:map"; -@use "@db-ui/foundations/build/scss/animation"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/icons"; -@use "@db-ui/foundations/build/scss/helpers"; -@use "@db-ui/foundations/build/scss/colors"; +@use "@db-ui/foundations/build/styles/animation"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/icons"; +@use "@db-ui/foundations/build/styles/helpers"; +@use "@db-ui/foundations/build/styles/colors"; @use "../../styles/button-components"; @use "../../styles/tag-components"; @use "../../styles/icon-passing"; diff --git a/packages/components/src/components/textarea/textarea.scss b/packages/components/src/components/textarea/textarea.scss index d0d2f9d0513..ddfc6a9d8ca 100644 --- a/packages/components/src/components/textarea/textarea.scss +++ b/packages/components/src/components/textarea/textarea.scss @@ -1,8 +1,8 @@ @use "sass:map"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/icons"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/icons"; @use "../../styles/component"; @use "../../styles/form-components"; @use "../../styles/scrollbar"; diff --git a/packages/components/src/components/tooltip/tooltip.scss b/packages/components/src/components/tooltip/tooltip.scss index 27290fbad67..764e0f20f6b 100644 --- a/packages/components/src/components/tooltip/tooltip.scss +++ b/packages/components/src/components/tooltip/tooltip.scss @@ -1,7 +1,7 @@ -@use "@db-ui/foundations/build/scss/helpers/functions"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/fonts"; +@use "@db-ui/foundations/build/styles/helpers/functions"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/fonts"; @use "../../styles/popover-component"; @use "../../styles/component"; diff --git a/packages/components/src/styles/_component.scss b/packages/components/src/styles/_component.scss index 58222888ad3..6d0ccc44899 100644 --- a/packages/components/src/styles/_component.scss +++ b/packages/components/src/styles/_component.scss @@ -1,7 +1,7 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/screen-sizes"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/screen-sizes"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/helpers"; $min-mobile-header-height: calc( #{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs} diff --git a/packages/components/src/styles/_db-puls.scss b/packages/components/src/styles/_db-puls.scss index 76e5895926f..4dbdd1b1480 100644 --- a/packages/components/src/styles/_db-puls.scss +++ b/packages/components/src/styles/_db-puls.scss @@ -1,6 +1,6 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/screen-sizes"; -@use "@db-ui/foundations/build/scss/colors"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/screen-sizes"; +@use "@db-ui/foundations/build/styles/colors"; @mixin set-db-puls-horizontal() { &::after { diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss index 5c202861ab0..474c9cf1132 100644 --- a/packages/components/src/styles/_form-components.scss +++ b/packages/components/src/styles/_form-components.scss @@ -1,10 +1,10 @@ @use "sass:map"; @use "sass:string"; -@use "@db-ui/foundations/build/scss/icons"; -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/icons"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/helpers"; @use "component"; @forward "visually-hidden"; diff --git a/packages/components/src/styles/_icon-passing.scss b/packages/components/src/styles/_icon-passing.scss index 54507bfe1a6..834c5b37687 100644 --- a/packages/components/src/styles/_icon-passing.scss +++ b/packages/components/src/styles/_icon-passing.scss @@ -1,5 +1,5 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/icons"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/icons"; @mixin icon-passing($inline-start: variables.$db-spacing-fixed-sm) { &[data-icon] { diff --git a/packages/components/src/styles/_link-components.scss b/packages/components/src/styles/_link-components.scss index d0335c649d4..65776f3f385 100644 --- a/packages/components/src/styles/_link-components.scss +++ b/packages/components/src/styles/_link-components.scss @@ -1,7 +1,7 @@ -@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 "@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 "./component"; %db-link-height { diff --git a/packages/components/src/styles/_popover-component.scss b/packages/components/src/styles/_popover-component.scss index 1f983a8fb58..b1a0090a935 100644 --- a/packages/components/src/styles/_popover-component.scss +++ b/packages/components/src/styles/_popover-component.scss @@ -1,6 +1,6 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/animation"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/animation"; @use "component"; $popover-gap-size: var(--db-popover-distance); diff --git a/packages/components/src/styles/_scrollbar.scss b/packages/components/src/styles/_scrollbar.scss index bc21c32db85..737fccf7bc2 100644 --- a/packages/components/src/styles/_scrollbar.scss +++ b/packages/components/src/styles/_scrollbar.scss @@ -1,7 +1,7 @@ -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/helpers"; -@use "@db-ui/foundations/build/scss/animation"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/helpers"; +@use "@db-ui/foundations/build/styles/animation"; @use "./form-components"; $scrollbar-width: helpers.px-to-rem(8); diff --git a/packages/components/src/styles/_stack-components.scss b/packages/components/src/styles/_stack-components.scss index e1b2b71d75a..47c0de88bbb 100644 --- a/packages/components/src/styles/_stack-components.scss +++ b/packages/components/src/styles/_stack-components.scss @@ -1,6 +1,6 @@ @use "sass:list"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/helpers"; @use "custom-elements"; $stack-gaps: ( diff --git a/packages/components/src/styles/_tag-components.scss b/packages/components/src/styles/_tag-components.scss index 184ba4845b1..6eaf15097e9 100644 --- a/packages/components/src/styles/_tag-components.scss +++ b/packages/components/src/styles/_tag-components.scss @@ -1,8 +1,8 @@ @use "sass:map"; @use "component"; -@use "@db-ui/foundations/build/scss/variables"; -@use "@db-ui/foundations/build/scss/colors"; -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/variables"; +@use "@db-ui/foundations/build/styles/colors"; +@use "@db-ui/foundations/build/styles/helpers"; $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; diff --git a/packages/components/src/styles/db-ui-42-absolute.scss b/packages/components/src/styles/absolute.scss similarity index 52% rename from packages/components/src/styles/db-ui-42-absolute.scss rename to packages/components/src/styles/absolute.scss index 973013f17a9..d3e08064588 100644 --- a/packages/components/src/styles/db-ui-42-absolute.scss +++ b/packages/components/src/styles/absolute.scss @@ -1,5 +1,5 @@ /* This is a predefined beginner friendly bundle with absolute asset paths (/assets/xxx) */ -@use "@db-ui/foundations/build/scss/absolute.assets-paths"; +@use "@db-ui/foundations/build/styles/absolute.assets-paths"; -@forward "./db-ui-42"; +@forward "./relative"; diff --git a/packages/components/src/styles/component-animations.scss b/packages/components/src/styles/component-animations.scss index ca04788d135..2c3a9d230bf 100644 --- a/packages/components/src/styles/component-animations.scss +++ b/packages/components/src/styles/component-animations.scss @@ -3,7 +3,7 @@ Adds color and border transitions for a smooth experience. */ -@use "@db-ui/foundations/build/scss/animation"; +@use "@db-ui/foundations/build/styles/animation"; // transitions [class^="db-"], diff --git a/packages/components/src/styles/db-ui-42-rollup.scss b/packages/components/src/styles/db-ui-42-rollup.scss deleted file mode 100644 index 2ac360b413e..00000000000 --- a/packages/components/src/styles/db-ui-42-rollup.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* This is a predefined beginner friendly bundle for rollup apps */ - -@use "@db-ui/foundations/build/scss/rollup.assets-paths"; - -@forward "./db-ui-42"; diff --git a/packages/components/src/styles/db-ui-42-webpack.scss b/packages/components/src/styles/db-ui-42-webpack.scss deleted file mode 100644 index 4c3125ef2ea..00000000000 --- a/packages/components/src/styles/db-ui-42-webpack.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* This is a predefined beginner friendly bundle for webpack apps */ - -@use "@db-ui/foundations/build/scss/webpack.assets-paths"; - -@forward "./db-ui-42"; diff --git a/packages/components/src/styles/db-ui-42.scss b/packages/components/src/styles/db-ui-42.scss deleted file mode 100644 index 4e4cd0fc14e..00000000000 --- a/packages/components/src/styles/db-ui-42.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* This is a predefined beginner friendly bundle with default asset-paths (../assets) */ - -@forward "./db-ui-components"; -// Bundle default theme -@forward "@db-ui/foundations/build/css/default-theme"; - -// Bundle optionals -@forward "@db-ui/foundations/build/scss/icons/include"; -@forward "@db-ui/foundations/build/scss/helpers/classes/all"; -@forward "@db-ui/foundations/build/scss/density/classes/all"; -@forward "@db-ui/foundations/build/scss/fonts/classes/all"; -@forward "@db-ui/foundations/build/scss/colors/classes/all"; diff --git a/packages/components/src/styles/dialog-init.scss b/packages/components/src/styles/dialog-init.scss index 1e79c265c93..1c3cff58a3b 100644 --- a/packages/components/src/styles/dialog-init.scss +++ b/packages/components/src/styles/dialog-init.scss @@ -1,4 +1,4 @@ -@use "@db-ui/foundations/build/scss/colors"; +@use "@db-ui/foundations/build/styles/colors"; $backdrop-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default}; diff --git a/packages/components/src/styles/db-ui-components.scss b/packages/components/src/styles/index.scss similarity index 96% rename from packages/components/src/styles/db-ui-components.scss rename to packages/components/src/styles/index.scss index 92fdc3143c5..33df4a2b175 100644 --- a/packages/components/src/styles/db-ui-components.scss +++ b/packages/components/src/styles/index.scss @@ -1,6 +1,6 @@ @use "custom-elements"; -@forward "@db-ui/foundations/build/scss/db-ui-foundations"; +@forward "@db-ui/foundations/build/styles/index"; @forward "component-animations"; @forward "../components/button/button"; @forward "../components/icon/icon"; diff --git a/packages/components/src/styles/relative.scss b/packages/components/src/styles/relative.scss new file mode 100644 index 00000000000..13e3dbc5cf7 --- /dev/null +++ b/packages/components/src/styles/relative.scss @@ -0,0 +1,12 @@ +/* This is a predefined beginner friendly bundle with default asset-paths (../assets) */ + +@forward "./index"; +// Bundle default theme +@forward "@db-ui/foundations/build/css/default-theme"; + +// Bundle optionals +@forward "@db-ui/foundations/build/styles/icons/include"; +@forward "@db-ui/foundations/build/styles/helpers/classes/all"; +@forward "@db-ui/foundations/build/styles/density/classes/all"; +@forward "@db-ui/foundations/build/styles/fonts/classes/all"; +@forward "@db-ui/foundations/build/styles/colors/classes/all"; diff --git a/packages/components/src/styles/rollup.scss b/packages/components/src/styles/rollup.scss new file mode 100644 index 00000000000..3a4ee7cb2a7 --- /dev/null +++ b/packages/components/src/styles/rollup.scss @@ -0,0 +1,5 @@ +/* This is a predefined beginner friendly bundle for rollup apps */ + +@use "@db-ui/foundations/build/styles/rollup.assets-paths"; + +@forward "./relative"; diff --git a/packages/components/src/styles/visually-hidden.scss b/packages/components/src/styles/visually-hidden.scss index 6a175b4c45b..28875b5ea5c 100644 --- a/packages/components/src/styles/visually-hidden.scss +++ b/packages/components/src/styles/visually-hidden.scss @@ -1,4 +1,4 @@ -@use "@db-ui/foundations/build/scss/helpers"; +@use "@db-ui/foundations/build/styles/helpers"; .db-visually-hidden, [data-visually-hidden="true"] { diff --git a/packages/components/src/styles/webpack.scss b/packages/components/src/styles/webpack.scss new file mode 100644 index 00000000000..d278fcc87a1 --- /dev/null +++ b/packages/components/src/styles/webpack.scss @@ -0,0 +1,5 @@ +/* This is a predefined beginner friendly bundle for webpack apps */ + +@use "@db-ui/foundations/build/styles/webpack.assets-paths"; + +@forward "./relative"; diff --git a/packages/foundations/README.md b/packages/foundations/README.md index 6a06e100eee..d39f3ab2c93 100644 --- a/packages/foundations/README.md +++ b/packages/foundations/README.md @@ -23,7 +23,7 @@ npm i @db-ui/foundations You use this library if you need some colors, spacings etc. -> **tl;dr:** Use the default theme and the bundled styles by importing `default-theme.css` && `db-ui-foundations[-absolute|-rollup|-webpack].css`. +> **tl;dr:** Use the default theme and the bundled styles by importing `default-theme.css` && `[relative|absolute|rollup|webpack].css`. --- @@ -38,14 +38,14 @@ Afterward, you may import helper classes / placeholders to easily consume the to - **density**: Overwrite default density to scale adaptive components inside container using density - **colors**: Sets an adaptive color to a container, which passes all required css-properties to children -You can import the complete **init** styles with `db-ui-foundations[-absolute|-rollup|-webpack].css` which apply the default: +You can import the complete **init** styles with `[relative|absolute|rollup|webpack].css` which apply the default: - [Density](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/principles/adaptive#:~:text=und%20Textfarben%20sicherstellt.-,Sizing,-Adaptive%20Sizing%20ist): `regular` - [Adaptive Coloring](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/principles/adaptive#:~:text=Akzeptieren-,Coloring,-Adaptive%20Coloring%20bezieht): `neutral-bg-lvl-1` ### CSS -Default assets path for `db-ui-foundations.css` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `db-ui-foundations[-rollup|-webpack].css`. +Default assets path for `relative.css` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `[rollup|webpack].css`. #### Import @@ -55,38 +55,38 @@ CSS: ```css /* index.css */ -@import "@db-ui/foundations/build/css/default-theme.css"; -@import "@db-ui/foundations/build/css/db-ui-foundations.css"; +@import "@db-ui/foundations/build/styles/default-theme.css"; +@import "@db-ui/foundations/build/styles/index.css"; /* Optional: Use [data-icon] everywhere */ -@import "@db-ui/foundations/build/css/icons/include.css"; +@import "@db-ui/foundations/build/styles/icons/include.css"; /* Optional: Use [data-divider] & [data-focus] everywhere */ -@import "@db-ui/foundations/build/css/helpers/classes/all.css"; +@import "@db-ui/foundations/build/styles/helpers/classes/all.css"; /* Optional: Use [data-density] everywhere */ -@import "@db-ui/foundations/build/css/density/classes/all.css"; +@import "@db-ui/foundations/build/styles/density/classes/all.css"; /* Optional: Use [data-font-size] everywhere */ -@import "@db-ui/foundations/build/css/fonts/classes/all.css"; +@import "@db-ui/foundations/build/styles/fonts/classes/all.css"; /* Optional: Use [data-color] everywhere */ -@import "@db-ui/foundations/build/css/colors/classes/all.css"; +@import "@db-ui/foundations/build/styles/colors/classes/all.css"; ``` JS/TS: ```ts // main.[js|ts] -import "@db-ui/foundations/build/css/default-theme.css"; -import "@db-ui/foundations/build/css/db-ui-foundations.css"; +import "@db-ui/foundations/build/styles/default-theme.css"; +import "@db-ui/foundations/build/styles/index.css"; /* Optional: Use [data-icon] everywhere */ -import "@db-ui/foundations/build/css/icons/include.css"; +import "@db-ui/foundations/build/styles/icons/include.css"; /* Optional: Use [data-divider] & [data-focus] everywhere */ -import "@db-ui/foundations/build/css/helpers/classes/all.css"; +import "@db-ui/foundations/build/styles/helpers/classes/all.css"; /* Optional: Use [data-density] everywhere */ -import "@db-ui/foundations/build/css/density/classes/all.css"; +import "@db-ui/foundations/build/styles/density/classes/all.css"; /* Optional: Use [data-font-size] everywhere */ -import "@db-ui/foundations/build/css/fonts/classes/all.css"; +import "@db-ui/foundations/build/styles/fonts/classes/all.css"; /* Optional: Use [data-color] everywhere */ -import "@db-ui/foundations/build/css/colors/classes/all.css"; +import "@db-ui/foundations/build/styles/colors/classes/all.css"; ``` #### Use @@ -120,7 +120,7 @@ In HTML: ### SCSS -Default assets path for `db-ui-foundations.scss` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `db-ui-foundations[-rollup|-webpack].scss`. +Default assets path for `relative.scss` is `../assets`. Make sure to copy all used resources like icons and fonts into your `public` folder before build. **Or** you use a modern bundler which handles bundling for you. In this case use `[rollup|webpack].scss`. #### Import @@ -130,19 +130,19 @@ SCSS: ```scss /* index.css */ -@forward "@db-ui/foundations/build/scss/default-theme"; -@forward "@db-ui/foundations/build/scss/db-ui-foundations"; +@forward "@db-ui/foundations/build/styles/default-theme"; +@forward "@db-ui/foundations/build/styles/index"; /* Optional: Use [data-icon] everywhere */ -@forward "@db-ui/foundations/build/scss/icons/include"; +@forward "@db-ui/foundations/build/styles/icons/include"; /* Optional: Use [data-divider] & [data-focus] everywhere */ -@forward "@db-ui/foundations/build/scss/helpers/classes/all"; +@forward "@db-ui/foundations/build/styles/helpers/classes/all"; /* Optional: Use [data-density] everywhere */ -@forward "@db-ui/foundations/build/scss/density/classes/all"; +@forward "@db-ui/foundations/build/styles/density/classes/all"; /* Optional: Use [data-font-size] everywhere */ -@forward "@db-ui/foundations/build/scss/fonts/classes/all"; +@forward "@db-ui/foundations/build/styles/fonts/classes/all"; /* Optional: Use [data-color] everywhere */ -@forward "@db-ui/foundations/build/scss/colors/classes/all"; +@forward "@db-ui/foundations/build/styles/colors/classes/all"; ``` > **Note:** Besides of forwarding the classes you can use placeholders to include only some specific styles. @@ -151,19 +151,19 @@ JS/TS: ```ts // main.[js|ts] -import "@db-ui/foundations/build/scss/default-theme.scss"; -import "@db-ui/foundations/build/scss/db-ui-foundations.scss"; +import "@db-ui/foundations/build/styles/default-theme.scss"; +import "@db-ui/foundations/build/styles/index.scss"; /* Optional: Use [data-icon] everywhere */ -import "@db-ui/foundations/build/scss/icons/include.scss"; +import "@db-ui/foundations/build/styles/icons/include.scss"; /* Optional: Use [data-divider] & [data-focus] everywhere */ -import "@db-ui/foundations/build/scss/helpers/classes/all.scss"; +import "@db-ui/foundations/build/styles/helpers/classes/all.scss"; /* Optional: Use [data-density] everywhere */ -import "@db-ui/foundations/build/scss/density/classes/all.scss"; +import "@db-ui/foundations/build/styles/density/classes/all.scss"; /* Optional: Use [data-font-size] everywhere */ -import "@db-ui/foundations/build/scss/fonts/classes/all.scss"; +import "@db-ui/foundations/build/styles/fonts/classes/all.scss"; /* Optional: Use [data-color] everywhere */ -import "@db-ui/foundations/build/scss/colors/classes/all.scss"; +import "@db-ui/foundations/build/styles/colors/classes/all.scss"; ``` #### Use @@ -171,7 +171,7 @@ import "@db-ui/foundations/build/scss/colors/classes/all.scss"; In SCSS: ```scss -@use "@db-ui/foundations/build/scss/variables"; +@use "@db-ui/foundations/build/styles/variables"; .my-container { padding: variables.$db-spacing-fixed-md; @@ -181,8 +181,8 @@ In SCSS: In SCSS with placeholder: ```scss -@use "@db-ui/foundations/build/scss/fonts"; -@use "@db-ui/foundations/build/scss/colors"; +@use "@db-ui/foundations/build/styles/fonts"; +@use "@db-ui/foundations/build/styles/colors"; .placeholder-container { @extend %db-overwrite-font-size-sm; @@ -291,17 +291,17 @@ In your `tailwind.css` add this to enable default headlines: ## Optimize dependencies -If you want to optimize the size of the loaded styles, you might skip loading `@db-ui/foundations/build/css/db-ui-foundations.css`.But there are some required styles for this Design-System to work properly. +If you want to optimize the size of the loaded styles, you might skip loading `@db-ui/foundations/build/styles/relative.css`.But there are some required styles for this Design-System to work properly. ```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.css"; +@import "@db-ui/foundations/build/styles/fonts/include.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"; ``` ## Migration diff --git a/packages/foundations/package.json b/packages/foundations/package.json index 181cf8169fc..93e1072c16b 100644 --- a/packages/foundations/package.json +++ b/packages/foundations/package.json @@ -20,7 +20,7 @@ "build": "npm-run-all build:*", "build:01_normalize": "npm-run-all copy-prepare:*", "build:02_copy": "npm run copy:scss", - "build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/scss/:build/css/ --future-deprecation=import", + "build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/styles", "build:04_tailwind": "cpr tailwind build/tailwind -o", "build:05_postcss": "postcss build/css/**/*.css --replace", "build:06_ide": "cpr ide build/ide -o", @@ -33,7 +33,7 @@ "copy-prepare:icon-overview": "tsx scripts/local/generate-icon-overview.ts", "copy-prepare:normalize": "cpr ../../node_modules/@csstools/normalize.css/normalize.css scss/_normalize.scss -o", "copy-prepare:woff2": "cpr ../../node_modules/@db-ux/core-icons/dist/fonts assets/icons/functional/fonts -o", - "copy:scss": "cpr scss build/scss -o", + "copy:scss": "cpr scss build/styles -o", "dev": "vite --open", "prebuild": "npm-run-all copy-prepare:*", "predev": "npm-run-all copy-prepare:*", diff --git a/packages/foundations/scss/absolute.scss b/packages/foundations/scss/absolute.scss new file mode 100644 index 00000000000..dda8a17fbec --- /dev/null +++ b/packages/foundations/scss/absolute.scss @@ -0,0 +1,3 @@ +@use "absolute.assets-paths"; + +@forward "./index"; diff --git a/packages/foundations/scss/db-ui-foundations-absolute.scss b/packages/foundations/scss/db-ui-foundations-absolute.scss deleted file mode 100644 index 86ba91c216d..00000000000 --- a/packages/foundations/scss/db-ui-foundations-absolute.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use "absolute.assets-paths"; - -@forward "./db-ui-foundations"; diff --git a/packages/foundations/scss/db-ui-foundations-rollup.scss b/packages/foundations/scss/db-ui-foundations-rollup.scss deleted file mode 100644 index df73d709448..00000000000 --- a/packages/foundations/scss/db-ui-foundations-rollup.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use "rollup.assets-paths"; - -@forward "./db-ui-foundations"; diff --git a/packages/foundations/scss/db-ui-foundations-webpack.scss b/packages/foundations/scss/db-ui-foundations-webpack.scss deleted file mode 100644 index 130275219e8..00000000000 --- a/packages/foundations/scss/db-ui-foundations-webpack.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use "webpack.assets-paths"; - -@forward "./db-ui-foundations"; diff --git a/packages/foundations/scss/index.scss b/packages/foundations/scss/index.scss new file mode 100644 index 00000000000..ff29cde2bb0 --- /dev/null +++ b/packages/foundations/scss/index.scss @@ -0,0 +1 @@ +@forward "init"; diff --git a/packages/foundations/scss/db-ui-foundations.scss b/packages/foundations/scss/relative.scss similarity index 56% rename from packages/foundations/scss/db-ui-foundations.scss rename to packages/foundations/scss/relative.scss index 9e2a0741ca7..a4c4a3ff042 100644 --- a/packages/foundations/scss/db-ui-foundations.scss +++ b/packages/foundations/scss/relative.scss @@ -1,2 +1,2 @@ @forward "fonts/include"; -@forward "init"; +@forward "./index"; diff --git a/packages/foundations/scss/rollup.scss b/packages/foundations/scss/rollup.scss new file mode 100644 index 00000000000..d9948db5c39 --- /dev/null +++ b/packages/foundations/scss/rollup.scss @@ -0,0 +1,3 @@ +@use "rollup.assets-paths"; + +@forward "./index"; diff --git a/packages/foundations/scss/webpack.scss b/packages/foundations/scss/webpack.scss new file mode 100644 index 00000000000..232c3dfef0c --- /dev/null +++ b/packages/foundations/scss/webpack.scss @@ -0,0 +1,3 @@ +@use "webpack.assets-paths"; + +@forward "./index"; From 34b8b7d5b70d4fad9e86de74702009ea490703de Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Fri, 20 Dec 2024 08:04:55 +0100 Subject: [PATCH 2/3] Update packages/components/README.md Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> --- packages/components/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/README.md b/packages/components/README.md index 79efb1f8759..309b15ef488 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -30,7 +30,7 @@ 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. -- relatve: asset path point to `../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` From ef7ef58ac39b5805030bee3c729c89755858abdd Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Fri, 20 Dec 2024 11:34:43 +0100 Subject: [PATCH 3/3] chore: update old references --- docs/how-to-develop-a-component.md | 8 +-- docs/migration/alpha-beta.md | 4 +- output/angular/README.md | 12 ++-- output/react/README.md | 12 ++-- output/stencil/README.md | 12 ++-- output/vue/README.md | 12 ++-- .../component/db-ui-components-angular.ejs.t | 6 -- .../new/component/db-ui-components-wc.ejs.t | 6 ++ .../new/component/db-ui-components.ejs.t | 4 +- .../mitosis/new/component/html.ejs.t | 2 +- packages/components/docs/getting-started.md | 4 +- packages/components/index.html | 2 +- packages/components/postcss.config.js | 7 ++- .../accordion-item/accordion-item.scss | 4 +- .../src/components/accordion-item/index.html | 2 +- .../src/components/accordion/accordion.scss | 2 +- .../src/components/accordion/index.html | 2 +- .../src/components/badge/badge.scss | 6 +- .../src/components/badge/index.html | 2 +- .../src/components/brand/index.html | 2 +- .../src/components/button/button.scss | 4 +- .../src/components/button/index.html | 2 +- .../components/src/components/card/card.scss | 2 +- .../components/src/components/card/index.html | 2 +- .../src/components/checkbox/checkbox.scss | 4 +- .../src/components/checkbox/index.html | 2 +- .../src/components/divider/index.html | 2 +- .../src/components/drawer/drawer.scss | 4 +- .../src/components/drawer/index.html | 2 +- .../src/components/header/header.scss | 2 +- .../src/components/header/index.html | 2 +- .../components/src/components/icon/index.html | 2 +- .../src/components/infotext/index.html | 2 +- .../src/components/input/docs/Angular.md | 2 +- .../src/components/input/docs/HTML.md | 2 +- .../src/components/input/docs/React.md | 2 +- .../src/components/input/docs/Vue.md | 2 +- .../src/components/input/index.html | 2 +- .../src/components/input/input.scss | 6 +- .../components/src/components/link/index.html | 2 +- .../components/src/components/link/link.scss | 2 +- .../navigation-item/navigation-item.scss | 4 +- .../src/components/navigation/navigation.scss | 6 +- .../src/components/notification/index.html | 2 +- .../components/notification/notification.scss | 4 +- .../src/components/popover/index.html | 2 +- .../src/components/popover/popover.scss | 4 +- .../src/components/radio/index.html | 2 +- .../src/components/radio/radio.scss | 2 +- .../src/components/section/index.html | 2 +- .../src/components/section/section.scss | 2 +- .../src/components/select/index.html | 2 +- .../src/components/select/select.scss | 4 +- .../src/components/stack/index.html | 2 +- .../src/components/stack/stack.scss | 2 +- .../src/components/switch/index.html | 2 +- .../src/components/switch/switch.scss | 2 +- .../src/components/tab-item/index.html | 2 +- .../src/components/tab-item/tab-item.scss | 6 +- .../src/components/tab-list/index.html | 2 +- .../src/components/tab-list/tab-list.scss | 2 +- .../src/components/tab-panel/index.html | 2 +- .../components/src/components/tabs/index.html | 2 +- .../components/src/components/tabs/tabs.scss | 4 +- .../components/src/components/tag/index.html | 2 +- .../components/src/components/tag/tag.scss | 8 +-- .../src/components/textarea/index.html | 2 +- .../src/components/textarea/textarea.scss | 6 +- .../src/components/tooltip/index.html | 2 +- .../src/components/tooltip/tooltip.scss | 4 +- packages/components/src/styles/index.scss | 15 ----- .../{ => internal}/_button-components.scss | 0 .../src/styles/{ => internal}/_component.scss | 0 .../{ => internal}/_custom-elements.scss | 2 +- .../src/styles/{ => internal}/_db-puls.scss | 0 .../{ => internal}/_form-components.scss | 2 +- .../styles/{ => internal}/_icon-passing.scss | 0 .../{ => internal}/_link-components.scss | 0 .../{ => internal}/_popover-component.scss | 0 .../src/styles/{ => internal}/_scrollbar.scss | 0 .../{ => internal}/_stack-components.scss | 0 .../{ => internal}/_tag-components.scss | 0 packages/components/src/styles/relative.scss | 8 ++- .../components/src/styles/wc-workarounds.scss | 12 ++++ .../test/import-styles/simple-button/main.js | 10 +-- .../test/import-styles/simple-button/test.css | 10 +-- .../test/playwright/boilerplate/index.ts | 4 +- packages/foundations/README.md | 58 ++++++++++------- packages/foundations/docs/Colors.md | 8 +-- packages/foundations/docs/FontsSizes.md | 4 +- packages/foundations/docs/Variables.md | 2 +- packages/foundations/index.html | 5 +- packages/foundations/package.json | 2 +- packages/foundations/postcss.config.cjs | 7 ++- .../scripts/local/generate-icon-overview.ts | 2 +- .../scss/_absolute.assets-paths.scss | 1 - .../scss/_default.assets-paths.scss | 1 - .../scss/_rollup.assets-paths.scss | 1 - .../scss/_webpack.assets-paths.scss | 1 - .../scss/{init => defaults}/default-code.scss | 0 .../{init => defaults}/default-elevation.scss | 0 .../{init => defaults}/default-fonts.scss | 0 .../scss/defaults/default-icons.scss | 57 +++++++++++++++++ .../default-required.scss} | 5 +- .../scss/{init => defaults}/default-root.scss | 7 +-- .../scss/{ => defaults}/default-theme.scss | 6 +- .../absolute.scss} | 2 +- .../fonts/{include.scss => relative.scss} | 0 .../include-rollup.scss => fonts/rollup.scss} | 2 +- .../webpack.scss} | 2 +- .../absolute.scss} | 2 +- .../icons/{include.scss => relative.scss} | 62 +------------------ .../include-rollup.scss => icons/rollup.scss} | 2 +- .../webpack.scss} | 2 +- packages/foundations/scss/index.scss | 7 ++- packages/foundations/scss/init/_index.scss | 5 -- packages/foundations/scss/relative.scss | 4 +- packages/foundations/src/colors.html | 5 +- packages/foundations/src/fonts.html | 5 +- packages/foundations/src/icons.html | 5 +- showcases/angular-showcase/src/styles.css | 8 +-- showcases/angular-ssr-showcase/src/styles.css | 3 +- showcases/next-showcase/styles/global.scss | 4 +- showcases/nuxt-showcase/app.vue | 3 +- .../patternhub/styles/decision-tree.scss | 2 +- showcases/patternhub/styles/globals.scss | 14 ++--- showcases/patternhub/styles/highlight.scss | 4 +- showcases/react-showcase/src/main.tsx | 2 +- showcases/stencil-showcase/src/styles.css | 3 +- showcases/vue-showcase/src/main.ts | 3 +- 130 files changed, 309 insertions(+), 323 deletions(-) delete mode 100644 packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t create mode 100644 packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t rename packages/components/src/styles/{ => internal}/_button-components.scss (100%) rename packages/components/src/styles/{ => internal}/_component.scss (100%) rename packages/components/src/styles/{ => internal}/_custom-elements.scss (91%) rename packages/components/src/styles/{ => internal}/_db-puls.scss (100%) rename packages/components/src/styles/{ => internal}/_form-components.scss (99%) rename packages/components/src/styles/{ => internal}/_icon-passing.scss (100%) rename packages/components/src/styles/{ => internal}/_link-components.scss (100%) rename packages/components/src/styles/{ => internal}/_popover-component.scss (100%) rename packages/components/src/styles/{ => internal}/_scrollbar.scss (100%) rename packages/components/src/styles/{ => internal}/_stack-components.scss (100%) rename packages/components/src/styles/{ => internal}/_tag-components.scss (100%) create mode 100644 packages/components/src/styles/wc-workarounds.scss rename packages/foundations/scss/{init => defaults}/default-code.scss (100%) rename packages/foundations/scss/{init => defaults}/default-elevation.scss (100%) rename packages/foundations/scss/{init => defaults}/default-fonts.scss (100%) create mode 100644 packages/foundations/scss/defaults/default-icons.scss rename packages/foundations/scss/{init/required.scss => defaults/default-required.scss} (97%) rename packages/foundations/scss/{init => defaults}/default-root.scss (61%) rename packages/foundations/scss/{ => defaults}/default-theme.scss (99%) rename packages/foundations/scss/{icons/include-absolute.scss => fonts/absolute.scss} (59%) rename packages/foundations/scss/fonts/{include.scss => relative.scss} (100%) rename packages/foundations/scss/{icons/include-rollup.scss => fonts/rollup.scss} (58%) rename packages/foundations/scss/{icons/include-webpack.scss => fonts/webpack.scss} (58%) rename packages/foundations/scss/{fonts/include-absolute.scss => icons/absolute.scss} (59%) rename packages/foundations/scss/icons/{include.scss => relative.scss} (50%) rename packages/foundations/scss/{fonts/include-rollup.scss => icons/rollup.scss} (58%) rename packages/foundations/scss/{fonts/include-webpack.scss => icons/webpack.scss} (58%) delete mode 100644 packages/foundations/scss/init/_index.scss 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/_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 - +