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";