diff --git a/__snapshots__/foundations/chromium/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png b/__snapshots__/foundations/chromium/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png index daacd23b46a..c8ae02336d0 100644 Binary files a/__snapshots__/foundations/chromium/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png and b/__snapshots__/foundations/chromium/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png differ diff --git a/__snapshots__/foundations/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png b/__snapshots__/foundations/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png index 36e6a626c51..a240f674d3e 100644 Binary files a/__snapshots__/foundations/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png and b/__snapshots__/foundations/chromium/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png differ diff --git a/__snapshots__/foundations/firefox/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png b/__snapshots__/foundations/firefox/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png index 5b71a6b5c35..06ee886ee0b 100644 Binary files a/__snapshots__/foundations/firefox/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png and b/__snapshots__/foundations/firefox/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png differ diff --git a/__snapshots__/foundations/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png b/__snapshots__/foundations/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png index 3c4ffd554b1..a919e6c1678 100644 Binary files a/__snapshots__/foundations/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png and b/__snapshots__/foundations/firefox/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png differ diff --git a/__snapshots__/foundations/webkit/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png b/__snapshots__/foundations/webkit/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png index 4cc5db8337e..5031f21daa1 100644 Binary files a/__snapshots__/foundations/webkit/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png and b/__snapshots__/foundations/webkit/Colors-should-match-screenshot-1/Colors-should-match-screenshot.png differ diff --git a/__snapshots__/foundations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png b/__snapshots__/foundations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png index 808403c2e0a..867eed95990 100644 Binary files a/__snapshots__/foundations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png and b/__snapshots__/foundations/webkit/Icons-should-match-screenshot-1/Icons-should-match-screenshot.png differ diff --git a/__snapshots__/input/patternhub/input-docs-should-match-screenshot.png b/__snapshots__/input/patternhub/input-docs-should-match-screenshot.png index a3d6c310a03..70a92bc5f9a 100644 Binary files a/__snapshots__/input/patternhub/input-docs-should-match-screenshot.png and b/__snapshots__/input/patternhub/input-docs-should-match-screenshot.png differ 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/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 496c1c891e9..a2259350355 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 `@db-ui/components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. ## Usage diff --git a/output/stencil/README.md b/output/stencil/README.md index 507bf092af7..0eb9eec4508 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 `@db-ui/components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. ## Usage diff --git a/output/vue/README.md b/output/vue/README.md index eab293542a9..c9d933771f9 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 `@db-ui/components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information. ## Usage diff --git a/package-lock.json b/package-lock.json index 806620d4636..d21b0d9dd20 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42637,6 +42637,7 @@ "dotenv": "^16.4.7", "glob": "11.0.0", "nodemon": "3.1.9", + "prettier": "^3.4.2", "sass": "1.77.4", "tsx": "^4.19.2", "vite": "^6.0.7" diff --git a/packages/components/README.md b/packages/components/README.md index 232dda02269..0fda8a00fcd 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -30,17 +30,17 @@ If you just need the styling follow this: Import the styles in `scss` or `css`. Based on your technology the file names could be different. -- Default (db-ui-42): asset path point to `../assets` -- Webpack (db-ui-42-webpack): asset path point to `~@db-ui/foundations/assets` -- Rollup (db-ui-42-rollup): asset path point to `@db-ui/foundations/assets` +- `relative`: asset path point to `../assets` +- `webpack`: asset path point to `~@db-ui/foundations/assets` +- `rollup`: asset path point to `@db-ui/foundations/assets` -`db-ui-42` bundles all dependencies from [foundations](https://www.npmjs.com/package/@db-ui/foundations) + all [components](https://github.com/db-ui/mono/blob/main/packages/components/src/styles/db-ui-components.scss) available. +They are bundling all dependencies from [foundations](https://www.npmjs.com/package/@db-ui/foundations) and all [components](https://github.com/db-ui/mono/blob/main/packages/components/src/styles/db-ui-components.scss) available. **SCSS** ```scss // index.scss -@forward "@db-ui/components/build/styles/db-ui-42-rollup"; +@forward "@db-ui/components/build/styles/rollup"; ``` **CSS** @@ -49,36 +49,36 @@ Within HTML files directly: ```html - + ``` Or within your JavaScript files, with the related bundler as a prefix (in this case rollup and equivalents like Vite): ```js // main.js -import "@db-ui/components/build/styles/db-ui-42-rollup.css"; +import "@db-ui/components/build/styles/rollup.css"; ``` ### Optimize dependencies -If you only need some of the components or some features from [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations), you shouldn't include `db-ui-42`. +If you only need some of the components or some features from [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations), you shouldn't include the bundled file. In the case you want to include only some components, and you could do it like this: ```css /* The theme contains all prop required for components like spacings, colors, ... */ -@import "@db-ui/foundations/build/css/default-theme.css"; +@import "@db-ui/foundations/build/styles/default-theme.css"; /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */ -@import "@db-ui/foundations/build/css/fonts/include-rollup.css"; +@import "@db-ui/foundations/build/styles/fonts/include-rollup.css"; /* The required styles will normalize css and add focus and default font to body */ -@import "@db-ui/foundations/build/css/init/required.css"; +@import "@db-ui/foundations/build/styles/init/required.css"; /* The default root adds a default color space (neutral) and a density (regular) */ -@import "@db-ui/foundations/build/css/init/default-root.css"; +@import "@db-ui/foundations/build/styles/init/default-root.css"; /* Optional: Add animations / transitions for components */ @import "@db-ui/components/build/styles/component-animations.css"; /* Optional: Add data-icon/data-icon-after to global attributes to enable icons for components */ -@import "@db-ui/foundations/build/css/icons/include-rollup.css"; +@import "@db-ui/foundations/build/styles/icons/include-rollup.css"; /* Optional: Add components */ @import "@db-ui/components/build/components/button/button.css"; diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t deleted file mode 100644 index 2d3eaee1e65..00000000000 --- a/packages/components/_templates/mitosis/new/component/db-ui-components-angular.ejs.t +++ /dev/null @@ -1,6 +0,0 @@ ---- -inject: true -to: src/styles/_custom-elements.scss -after: angular-workaround ---- -db-<%= name %>, diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t new file mode 100644 index 00000000000..b31922ecc27 --- /dev/null +++ b/packages/components/_templates/mitosis/new/component/db-ui-components-wc.ejs.t @@ -0,0 +1,6 @@ +--- +inject: true +to: src/styles/internal/_custom-elements.scss +after: //hygen-insert +--- +db-<%= name %>, diff --git a/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t b/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t index dc44bfc2662..c49d4a0fc00 100644 --- a/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t +++ b/packages/components/_templates/mitosis/new/component/db-ui-components.ejs.t @@ -1,6 +1,6 @@ --- inject: true -to: src/styles/db-ui-components.scss -before: angular-workaround +to: src/styles/index.scss +append: true --- @forward "../components/<%= name %>/<%= name %>"; diff --git a/packages/components/_templates/mitosis/new/component/html.ejs.t b/packages/components/_templates/mitosis/new/component/html.ejs.t index cd372ada19b..688537b0b0f 100644 --- a/packages/components/_templates/mitosis/new/component/html.ejs.t +++ b/packages/components/_templates/mitosis/new/component/html.ejs.t @@ -6,7 +6,7 @@ to: src/components/<%= name %>/index.html DB<%= h.changeCase.pascal(name) %> - +
Test
diff --git a/packages/components/docs/getting-started.md b/packages/components/docs/getting-started.md index 4bf45bb6899..3bb70e42bf4 100644 --- a/packages/components/docs/getting-started.md +++ b/packages/components/docs/getting-started.md @@ -54,13 +54,13 @@ The integration depends on your tech stack and varies from copying the files fro #### Via HTML stylesheet include ```html - + ``` #### Via SCSS import ```scss -@use "@db-ui/components/build/styles/db-ui-42"; +@use "@db-ui/components/build/styles/relative"; ``` ### SCSS: node_modules include path / load path diff --git a/packages/components/index.html b/packages/components/index.html index e32ddf18f9d..ccea238f77b 100644 --- a/packages/components/index.html +++ b/packages/components/index.html @@ -4,7 +4,7 @@ Dev - +