diff --git a/docs/how-to-develop-a-component.md b/docs/how-to-develop-a-component.md index 23a42825e575..cd142be194e9 100644 --- a/docs/how-to-develop-a-component.md +++ b/docs/how-to-develop-a-component.md @@ -23,9 +23,9 @@ 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. +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 diff --git a/package.json b/package.json index 6b3504ef3f50..791399ec0682 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/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. */ 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 diff --git a/scripts/check-docs.js b/scripts/check-docs.js index 69db1516ce30..310d0e5417ba 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: path.join(process.cwd(), '..'), // Workspace packages directory (adjust if different) packagesDir: 'packages', // Debug mode - set to true to see all references found @@ -21,7 +21,8 @@ const config = { 'node_modules/**', '**/node_modules/**', '.git/**', - 'docs/migration/**' + 'docs/migration/**', + 'showcases/patternhub/public/docs/migration/**' ] }; diff --git a/scripts/package.json b/scripts/package.json index 2f3a574710fa..63485dbc9241 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -65,6 +65,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"