From f60495b8ad538ea4a46739b806517ffa74cbe9dd Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 7 Aug 2025 08:32:06 +0200 Subject: [PATCH 1/8] fix(docs): corrected several paths --- packages/components/README.md | 12 ++++++------ .../test/import-styles/simple-button/main.js | 14 +++++++------- .../test/import-styles/simple-button/test.css | 12 ++++++------ packages/foundations/README.md | 2 +- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/components/README.md b/packages/components/README.md index deba89505449..42fd02add16d 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -71,19 +71,19 @@ In the case you want to include only some components, and you could do it like t ```css /* The theme contains all prop required for components like spacings, colors, ... */ -@import "@db-ux/core-foundations/build/styles/default-theme.css"; +@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css"; /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */ -@import "@db-ux/core-foundations/build/styles/fonts/include-rollup.css"; +@import "@db-ux/core-foundations/build/styles/fonts/rollup.css"; /* The required styles will normalize css and add focus and default font to body */ -@import "@db-ux/core-foundations/build/styles/init/required.css"; -/* The default root adds a default color space (neutral) and a density (regular) */ -@import "@db-ux/core-foundations/build/styles/init/default-root.css"; +@import "@db-ux/core-foundations/build/styles/defaults/default-required.css"; +/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */ +@import "@db-ux/core-foundations/build/styles/defaults/default-root.css"; /* Optional: Add animations / transitions for components */ @import "@db-ux/core-components/build/styles/component-animations.css"; /* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */ -@import "@db-ux/core-foundations/build/styles/icons/include-rollup.css"; +@import "@db-ux/core-foundations/build/styles/icons/rollup.css"; /* Optional: Add components */ @import "@db-ux/core-components/build/components/button/button.css"; diff --git a/packages/components/test/import-styles/simple-button/main.js b/packages/components/test/import-styles/simple-button/main.js index 5ef900b193db..001f887e269d 100644 --- a/packages/components/test/import-styles/simple-button/main.js +++ b/packages/components/test/import-styles/simple-button/main.js @@ -1,16 +1,16 @@ // The theme contains all prop required for components like spacings, colors, ... -import '@db-ux/core-foundations/build/styles/default-theme.css'; +import '@db-ux/core-foundations/build/styles/defaults/default-theme.css'; // The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) -import '@db-ux/core-foundations/build/styles/fonts/include-rollup.css'; -// The required styles will normalize css and add focus and default font to body -import '@db-ux/core-foundations/build/styles/init/required.css'; -// The default root adds a default color space (neutral) and a density (regular) -import '@db-ux/core-foundations/build/styles/init/default-root.css'; +import '@db-ux/core-foundations/build/styles/fonts/rollup.css'; +/* The required styles will normalize css and add focus and default font to body */ +import '@db-ux/core-foundations/build/styles/defaults/default-required.css'; +/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */ +import '@db-ux/core-foundations/build/styles/defaults/default-root.css'; // Optional: Add animations / transitions for components import '@db-ux/core-components/build/styles/component-animations.css'; // Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components -import '@db-ux/core-foundations/build/styles/icons/include-rollup.css'; +import '@db-ux/core-foundations/build/styles/icons/rollup.css'; // Optional: Add components import '@db-ux/core-components/build/components/button/button.css'; diff --git a/packages/components/test/import-styles/simple-button/test.css b/packages/components/test/import-styles/simple-button/test.css index 229f28f967cd..127b184605c6 100644 --- a/packages/components/test/import-styles/simple-button/test.css +++ b/packages/components/test/import-styles/simple-button/test.css @@ -1,20 +1,20 @@ /* The theme contains all prop required for components like spacings, colors, ... */ -@import url("@db-ux/core-foundations/build/styles/default-theme.css"); +@import url("@db-ux/core-foundations/build/styles/defaults/default-theme.css"); /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */ -@import url("@db-ux/core-foundations/build/styles/fonts/include-rollup.css"); +@import url("@db-ux/core-foundations/build/styles/fonts/rollup.css"); /* The required styles will normalize css and add focus and default font to body */ -@import url("@db-ux/core-foundations/build/styles/init/required.css"); +@import url("@db-ux/core-foundations/build/styles/defaults/default-required.css"); -/* The default root adds a default color space (neutral) and a density (regular) */ -@import url("@db-ux/core-foundations/build/styles/init/default-root.css"); +/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */ +@import url("@db-ux/core-foundations/build/styles/defaults/default-root.css"); /* Optional: Add animations / transitions for components */ @import url("@db-ux/core-components/build/styles/component-animations.css"); /* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */ -@import url("@db-ux/core-foundations/build/styles/icons/include-rollup.css"); +@import url("@db-ux/core-foundations/build/styles/icons/rollup.css"); /* Optional: Add components */ @import url("@db-ux/core-components/build/components/button/button.css"); diff --git a/packages/foundations/README.md b/packages/foundations/README.md index 5fb809065a0d..73563e80ae60 100644 --- a/packages/foundations/README.md +++ b/packages/foundations/README.md @@ -298,7 +298,7 @@ If you want to optimize the size of the loaded styles, you might want to skip lo ```css /* The theme contains all prop required for components like spacings, colors, etc. You can replace it with your own theme. */ -@import "@db-ux/core-foundations/build/styles/default-theme.css"; +@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css"; /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own fonts. */ @import "@db-ux/core-foundations/build/styles/fonts/relative.css"; /* The icon include uses default icons based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own icons. */ From 6b6581e2490e6b1e31ffd3a710578a1a0b33a162 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 7 Aug 2025 10:05:52 +0200 Subject: [PATCH 2/8] fix(docs): corrected several paths --- docs/how-to-develop-a-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/how-to-develop-a-component.md b/docs/how-to-develop-a-component.md index 23a42825e575..76bff2cb39ed 100644 --- a/docs/how-to-develop-a-component.md +++ b/docs/how-to-develop-a-component.md @@ -23,7 +23,7 @@ Starting with `packages/components/src/components/my-awesome-component/my-awesom 1. The most important dependency are the `variables` included via `@use "@db-ux/core-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-ux/core-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-ux/core-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). +3. Some components have an 'adaptive' styling. We exclude it in an own file `@use "@db-ux/core-components/build/styles/internal/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-ux/core-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-ux/core-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. From 2b840abb4818e2d867f990e5fa2dc5ae0338665c Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 7 Aug 2025 18:14:29 +0200 Subject: [PATCH 3/8] fix: corrected path --- docs/how-to-develop-a-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/how-to-develop-a-component.md b/docs/how-to-develop-a-component.md index 76bff2cb39ed..cd142be194e9 100644 --- a/docs/how-to-develop-a-component.md +++ b/docs/how-to-develop-a-component.md @@ -25,7 +25,7 @@ Starting with `packages/components/src/components/my-awesome-component/my-awesom 2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ux/core-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-ux/core-components/build/styles/internal/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-ux/core-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-ux/core-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. +5. To set a fixed icon you might use `@use "@db-ux/core-foundations/build/styles/icons/icon-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 From fc52f855b1a635f50b43ec825a2832aebfe62464 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 7 Aug 2025 18:18:43 +0200 Subject: [PATCH 4/8] refactor(test): making the path check part of the pipeline --- package.json | 1 - scripts/check-docs.js | 4 ++-- scripts/package.json | 1 + 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 8393c8ffb824..6c0936faaff6 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,6 @@ "rm:builds": "npm run rm:builds --workspace=scripts", "start": "npm run start --workspace=patternhub", "test": "npm run test --workspace=scripts", - "test:docs-file-references": "node scripts/check-docs.js", "test:react-core-components": "playwright test --config output/react/playwright.config.ts --ui", "test:vue-components": "playwright test --config output/vue/playwright.config.ts --ui", "update:dependency:playwright": "node scripts/github/update-playwright.js" diff --git a/scripts/check-docs.js b/scripts/check-docs.js index 69db1516ce30..d936bb271475 100644 --- a/scripts/check-docs.js +++ b/scripts/check-docs.js @@ -10,8 +10,8 @@ const config = { markdownExtensions: ['md', 'mdx'], // NPM organization prefix to look for orgPrefix: '@db-ux/', - // Root directory to search from - rootDir: process.cwd(), + // Root directory to search from – as this script is run from the scripts directory, we set it to one level up + rootDir: process.cwd() + '/../', // Workspace packages directory (adjust if different) packagesDir: 'packages', // Debug mode - set to true to see all references found diff --git a/scripts/package.json b/scripts/package.json index 7475eed72597..42c5f3ef4d87 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -64,6 +64,7 @@ "start-showcase:vue": "npm run dev --workspace=vue-showcase", "start:foundations": "npm run start --workspace=@db-ux/core-foundations", "test": "npm-run-all --parallel test:*", + "test:docs-file-references": "node check-docs.js", "test:migration": "npm run test --workspace=@db-ux/core-migration", "test:scripts": "vitest run --config vitest.config.ts", "update:icon-fonts": "npm-run-all generate:icon-fonts generate:icon-types" From b2528357d87d18cf460ebfde4c80b3aff7fd3911 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 7 Aug 2025 18:19:49 +0200 Subject: [PATCH 5/8] refactor: we need to ignore some migration documents --- scripts/check-docs.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/check-docs.js b/scripts/check-docs.js index d936bb271475..902e5988bf5a 100644 --- a/scripts/check-docs.js +++ b/scripts/check-docs.js @@ -21,7 +21,8 @@ const config = { 'node_modules/**', '**/node_modules/**', '.git/**', - 'docs/migration/**' + 'docs/migration/**', + 'showcases/patternhub/public/docs/migration/**' ] }; From 56e5274ee4238868944168cca99cd5e95b0b16f3 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 7 Aug 2025 18:29:00 +0200 Subject: [PATCH 6/8] refactor: updated further path --- packages/foundations/docs/Colors.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/foundations/docs/Colors.md b/packages/foundations/docs/Colors.md index e8b7ec9c36c6..791ef6a4d07c 100644 --- a/packages/foundations/docs/Colors.md +++ b/packages/foundations/docs/Colors.md @@ -14,12 +14,12 @@ ## How to include colors -For **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/color/classes/all.css";` in your root `.css` file. -Or if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/color/classes/informational.css";`. +For **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/colors/classes/all.css";` in your root `.css` file. +Or if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/colors/classes/informational.css";`. In case that you're either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly. -For **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/color/placeholder"` in your `.scss` file, where you need to reference the specific variable. +For **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/colors/placeholder"` in your `.scss` file, where you need to reference the specific variable. Then you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`. ## Dark- & Light-Mode From 950f3b7fbdc41a10a40489964226a2ba043c1f7c Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Mon, 11 Aug 2025 09:29:50 +0200 Subject: [PATCH 7/8] refactor: we'd have to run build previous to checking the docs path Elsewhere we couldn't determine whether the files exist that are mentioned in the docs --- scripts/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/package.json b/scripts/package.json index 42c5f3ef4d87..c98880962aa6 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -35,6 +35,7 @@ "dev:sass": "npm run dev:scss --workspace=@db-ux/core-components", "dev:stencil-components": "npm run dev:stencil --workspace=@db-ux/core-components", "dev:vue-components": "npm run dev:vue --workspace=@db-ux/core-components", + "pretest:docs-file-references": "npm run build", "rm-builds:components-build": "rimraf ../packages/components/build", "rm-builds:dist": "rimraf --glob showcases/**/dist", "rm-builds:foundations-build": "rimraf ../packages/foundations/build", From 73a02f80b51acf3f5e16aeb98a2cb1968a740655 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 12 Aug 2025 09:58:34 +0200 Subject: [PATCH 8/8] Update scripts/check-docs.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- scripts/check-docs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/check-docs.js b/scripts/check-docs.js index 902e5988bf5a..310d0e5417ba 100644 --- a/scripts/check-docs.js +++ b/scripts/check-docs.js @@ -11,7 +11,7 @@ const config = { // NPM organization prefix to look for orgPrefix: '@db-ux/', // Root directory to search from – as this script is run from the scripts directory, we set it to one level up - rootDir: process.cwd() + '/../', + rootDir: path.join(process.cwd(), '..'), // Workspace packages directory (adjust if different) packagesDir: 'packages', // Debug mode - set to true to see all references found