@db-ux/core-foundations 4.5.4-mcp-server-migrate-tool-test-1-eb724df → 4.5.4-postcss2-6de35db

package/README.md

@@ -38,11 +38,11 @@ npm i @db-ux/core-foundations
 
 You use this library if you need some colors, spacings etc.
 
-> **tl;dr:** Use the default theme and the bundled styles by importing [relative|absolute|rollup|webpack].css`.
+> **tl;dr:** Use the default theme and the bundled styles by importing `bundle.css` and `theme/[relative|absolute|rollup|webpack].css`.
 
 ---
 
-First of all you need to import a theme which contains all tokens (css-properties). We provide a `default-theme.css` which handles dark/light mode as well.
+First of all you need to import a theme which contains all tokens (css-properties). We provide a `theme/[relative|absolute|rollup|webpack].css` which handles dark/light mode as well.
 
 Afterward, you may import helper classes / placeholders to easily consume the tokens from your theme. There are some categories:
 
@@ -53,7 +53,7 @@ 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 `[relative|absolute|rollup|webpack].css` which apply the default:
+The `bundle.css` applies those 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`
@@ -64,39 +64,28 @@ Default assets path for `relative.css` is `../assets`. Make sure to copy all use
 
 #### Import
 
-Import the styles in your main `.js | .ts` file or in your main `.css` file.
-
-CSS:
+Import the styles in your main `.css` file.
 
 ```css
 /* index.css */
-@import "@db-ux/core-foundations/build/styles/relative.css";
-
-/* Optional: Use [data-divider] & [data-focus] everywhere */
-@import "@db-ux/core-foundations/build/styles/helpers/classes/all.css";
-/* Optional: Use [data-density] everywhere */
-@import "@db-ux/core-foundations/build/styles/density/classes/all.css";
-/* Optional: Use [data-font-size] everywhere */
-@import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";
-/* Optional: Use [data-color] everywhere */
-@import "@db-ux/core-foundations/build/styles/colors/classes/all.css";
-```
+@layer whitelabel-theme, db-ux;
 
-JS/TS:
+@import "@db-ux/core-foundations/build/styles/theme/relative.css" layer(theme);
 
-```ts
-// main.[js|ts]
-/* index.css */
-import "@db-ux/core-foundations/build/styles/relative.css";
+@import "@db-ux/core-foundations/build/styles/bundle.css" layer(db-ux);
 
 /* Optional: Use [data-divider] & [data-focus] everywhere */
-import "@db-ux/core-foundations/build/styles/helpers/classes/all.css";
+@import "@db-ux/core-foundations/build/styles/helpers/classes/all.css"
+	layer(db-ux);
 /* Optional: Use [data-density] everywhere */
-import "@db-ux/core-foundations/build/styles/density/classes/all.css";
+@import "@db-ux/core-foundations/build/styles/density/classes/all.css"
+	layer(db-ux);
 /* Optional: Use [data-font-size] everywhere */
-import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";
+@import "@db-ux/core-foundations/build/styles/fonts/classes/all.css"
+	layer(db-ux);
 /* Optional: Use [data-color] everywhere */
-import "@db-ux/core-foundations/build/styles/colors/classes/all.css";
+@import "@db-ux/core-foundations/build/styles/colors/classes/all.css"
+	layer(db-ux);
 ```
 
 #### Use
@@ -130,46 +119,6 @@ In HTML:
 
 ### 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
-
-Import the styles in your main `.js | .ts` file or in your main `.scss` file.
-
-SCSS:
-
-```scss
-/* index.css */
-@forward "@db-ux/core-foundations/build/styles/relative";
-
-/* Optional: Use [data-divider] & [data-focus] everywhere */
-@forward "@db-ux/core-foundations/build/styles/helpers/classes/all";
-/* Optional: Use [data-density] everywhere */
-@forward "@db-ux/core-foundations/build/styles/density/classes/all";
-/* Optional: Use [data-font-size] everywhere */
-@forward "@db-ux/core-foundations/build/styles/fonts/classes/all";
-/* Optional: Use [data-color] everywhere */
-@forward "@db-ux/core-foundations/build/styles/colors/classes/all";
-```
-
-> **Note:** Besides of forwarding the classes you can use placeholders to include only some specific styles.
-
-JS/TS:
-
-```ts
-// main.[js|ts]
-import "@db-ux/core-foundations/build/styles/relative.scss";
-
-/* Optional: Use [data-divider] & [data-focus] everywhere */
-import "@db-ux/core-foundations/build/styles/helpers/classes/all.scss";
-/* Optional: Use [data-density] everywhere */
-import "@db-ux/core-foundations/build/styles/density/classes/all.scss";
-/* Optional: Use [data-font-size] everywhere */
-import "@db-ux/core-foundations/build/styles/fonts/classes/all.scss";
-/* Optional: Use [data-color] everywhere */
-import "@db-ux/core-foundations/build/styles/colors/classes/all.scss";
-```
-
 #### Use
 
 In SCSS:
@@ -313,13 +262,11 @@ 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/defaults/default-theme.css";
+@import "@db-ux/core-foundations/build/styles/theme/relative.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. */
 @import "@db-ux/core-foundations/build/styles/icons/relative.css";
-/* The index file will add some additional styles to normalize html defaults and add some default settings like default density, etc. */
-@import "@db-ux/core-foundations/build/styles/index.css";
 ```
 
 #### Optimize index

package/agent/_instructions.md

@@ -40,6 +40,41 @@
         - font: `text-body-sm`
     - Always stick to the variables. Don't use values like `p-4` or `m-[16px]`; use `p-fix-xs` or `m-fix-md` instead.
 
+### Import
+
+#### Tailwind v4
+
+```css
+@import "tailwindcss";
+@import "@db-ux/core-foundations/build/tailwind/theme/index.css";
+```
+
+#### Tailwind v3
+
+> **Note:** In Tailwind v4 you can use the config with `@config "tailwind.config.[js|ts]";` inside your `.css` file as well.
+
+After this you can extend your tailwind config like this:
+
+```javascript
+//tailwind.config.js
+/** @type {import('tailwindcss').Config} */
+import tokens from "@db-ux/core-foundations/build/tailwind/tailwind-tokens.json";
+
+export default {
+	content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+	plugins: [],
+	theme: {
+		...tokens,
+		gap: ({ theme }) => ({
+			...theme("spacing")
+		}),
+		space: ({ theme }) => ({
+			...theme("spacing")
+		})
+	}
+};
+```
+
 ## Figma MCP
 
 - If you use Figma MCP always generate code with project's conventions, such as using @db-ux/core-components and @db-ux/core-foundations.
@@ -53,3 +88,52 @@ If you use tailwind follow those rules as well:
 
 - Don't use values like `p-4` or `m-[16px]`; use `p-fix-xs` or `m-fix-md` instead.
 - Never use something like `font-['DB_Neo_Screen_Head']` and `leading-[48px]` instead use `text-head-xx` class, where `-xx` can be a t-shirt size from `3xs` to `3xl`; If it has a `font-wight:300;` use `text-head-light-xx` instead.
+
+## Stylelint Rules (Common CSS/SCSS Mistakes)
+
+The `@db-ux/core-stylelint` plugin enforces design token usage. Never use raw `px`, `rem`, or hardcoded color values for the following properties:
+
+### Spacings (`db-ux/use-spacings`)
+
+- Applies to: `margin`, `padding`, `gap` (and all sub-properties like `margin-top`, `padding-inline`, etc.)
+- Use `var(--db-spacing-fixed-xx)` or `var(--db-spacing-responsive-xx)` instead of `px`/`rem` values
+- `var(--db-sizing-xx)`, `%`, `vw`, `vh` are also allowed
+- Allowed exact values: `0px`, `0`, `auto`, `inherit`, `initial`, `unset`
+- ❌ `margin: 20px;` / `padding: 0.5rem;` / `margin-top: 8px;`
+- ✅ `margin: var(--db-spacing-fixed-md);` / `padding: var(--db-spacing-responsive-lg);`
+
+### Sizing (`db-ux/use-sizing`)
+
+- Applies to: `width`, `height`, `min-width`, `min-height`, `max-width`, `max-height`, `block-size`, `inline-size`
+- Use `var(--db-sizing-xx)`, `var(--db-screen-xx)`, `var(--db-container-xx)`, `%`, `lh`, `ch`, `vw`, `vh` instead of `px`/`rem`
+- Additional allowed values: `fit-content`, `max-content`, `min-content`, `none`, `revert`, `revert-layer`
+- ❌ `width: 100px;` / `height: 50px;` / `block-size: 200px;`
+- ✅ `width: var(--db-sizing-md);` / `height: 100%;` / `block-size: var(--db-screen-sm);`
+
+### Border Radius (`db-ux/use-border-radius`)
+
+- Applies to: all `border-*-radius` properties
+- Use `var(--db-border-radius-xx)` instead of `px`/`rem`
+- ❌ `border-radius: 4px;` / `border-top-left-radius: 0.5rem;`
+- ✅ `border-radius: var(--db-border-radius-md);`
+
+### Border Width (`db-ux/use-border-width`)
+
+- Applies to: `border`, `border-top`, `border-right`, `border-bottom`, `border-left`, `border-block`, `border-block-start`, `border-block-end`, `border-inline`, `border-inline-start`, `border-inline-end`, and all `border-*-width` properties
+- Use `var(--db-border-width-xx)` instead of `px`/`rem` for the width part
+- ❌ `border: 1px solid transparent;` / `border-top: 2px solid red;`
+- ✅ `border: var(--db-border-width-sm) solid transparent;`
+
+### Border Color (`db-ux/use-border-color`)
+
+- Applies to: same border properties as border-width, plus all `border-*-color` properties
+- Use `var(--db-adaptive-on-bg-basic-emphasis-xx-default)` or `var(--db-adaptive-on-bg-inverted)` for border colors
+- `transparent` and `currentcolor` are also allowed
+- ❌ `border: 1px solid red;` / `border-color: #ff0;` / `border-top: 1px solid blue;`
+- ✅ `border: var(--db-border-width-sm) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);`
+
+### General Notes
+
+- CSS custom properties (`--my-var`) and SCSS variables (`$my-var`) are always allowed as values
+- `0px`, `0`, `auto`, `inherit`, `initial`, `unset` are always allowed
+- `calc()` expressions can be allowed via config option `allowCalc: true`

package/agent/tailwind/Variables.md

@@ -1,3 +1,5 @@
+## Usage
+
 ```html
 <div class="flex flex-col gap-md">
 	<div class="grid grid-cols-2 md:grid-cols-3 gap-xs">
@@ -125,12 +127,12 @@
 
 ### Gap
 
-- `gap-3xs`
-- `gap-2xs`
-- `gap-xs`
-- `gap-sm`
-- `gap-md`
-- `gap-lg`
-- `gap-xl`
-- `gap-2xl`
-- `gap-3xl`
+- `gap-fix-3xs`
+- `gap-fix-2xs`
+- `gap-fix-xs`
+- `gap-fix-sm`
+- `gap-fix-md`
+- `gap-fix-lg`
+- `gap-fix-xl`
+- `gap-fix-2xl`
+- `gap-fix-3xl`

package/build/styles/{index.css → bundle.css}

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 /* Use this file if you want the default color and density in your project */
 /* Variants for adaptive components like input, select, notification, ... */
-blockquote:not([class]), :root,
+blockquote:not([class]), [data-mode], :root,
 :host {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  blockquote:not([class]), :root,
+  blockquote:not([class]), [data-mode], :root,
   :host {
     --db-adaptive-bg-basic-level-1-default: var(
     	--db-neutral-bg-basic-level-1-default
@@ -158,12 +158,12 @@ blockquote:not([class]), :root,
   }
 }
 
-:root,
+[data-mode], :root,
 :host {
   background-color: var(--db-neutral-bg-basic-level-1-default);
   color: var(--db-neutral-on-bg-basic-emphasis-100-default);
 }
-:root::before, :root::after {
+[data-mode]::before, :root::before, [data-mode]::after, :root::after {
   --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-100-default);
 }
 
@@ -1073,8 +1073,8 @@ blockquote:not([class]) {
     	var(--db-neutral-on-origin-dark-default)
     );
     --db-neutral-on-bg-basic-emphasis-50-default: light-dark(
-    	var(--db-neutral-9),
-    	var(--db-neutral-5)
+    	var(--db-neutral-12),
+    	var(--db-neutral-3)
     );
     --db-neutral-on-bg-basic-emphasis-60-default: light-dark(
     	var(--db-neutral-10),
@@ -4905,3 +4905,58 @@ details > ::before,
 details > ::after {
   box-sizing: var(--db-box-sizing, border-box);
 }
+
+/* 224px */
+@property --db-container-3xs {
+  syntax: "*";
+  initial-value: 14rem;
+  inherits: true;
+}
+/* 256px */
+@property --db-container-2xs {
+  syntax: "*";
+  initial-value: 16rem;
+  inherits: true;
+}
+/* 320px */
+@property --db-container-xs {
+  syntax: "*";
+  initial-value: 20rem;
+  inherits: true;
+}
+/* 384px */
+@property --db-container-sm {
+  syntax: "*";
+  initial-value: 24rem;
+  inherits: true;
+}
+/* 448px */
+@property --db-container-md {
+  syntax: "*";
+  initial-value: 28rem;
+  inherits: true;
+}
+/* 512px */
+@property --db-container-lg {
+  syntax: "*";
+  initial-value: 32rem;
+  inherits: true;
+}
+/* 576px */
+@property --db-container-xl {
+  syntax: "*";
+  initial-value: 36rem;
+  inherits: true;
+}
+/* 672px */
+@property --db-container-2xl {
+  syntax: "*";
+  initial-value: 42rem;
+  inherits: true;
+}
+/* 768px */
+@property --db-container-3xl {
+  syntax: "*";
+  initial-value: 48rem;
+  inherits: true;
+}

package/build/styles/{index.scss → bundle.scss}

@@ -4,3 +4,8 @@
 @forward "defaults/default-code";
 @forward "defaults/default-icons";
 @forward "defaults/default-required";
+@forward "defaults/default-container-properties";
+
+[data-mode] {
+	@extend %db-neutral-bg-basic-level-1;
+}

package/build/styles/colors/_default-color-mappings.scss

@@ -18,8 +18,8 @@
 			var(--db-neutral-on-origin-dark-default)
 		);
 		--db-neutral-on-bg-basic-emphasis-50-default: light-dark(
-			var(--db-neutral-9),
-			var(--db-neutral-5)
+			var(--db-neutral-12),
+			var(--db-neutral-3)
 		);
 		--db-neutral-on-bg-basic-emphasis-60-default: light-dark(
 			var(--db-neutral-10),

package/build/styles/defaults/default-icons.css

@@ -1 +1 @@
-@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{color:var(--db-icon-color,inherit);display:inline-block;font-family:var(--db-icon-font-family,var(--db-icon-default-font-family,"db-ux-default","icon-font-fallback"))!important;font-size:var(--db-icon-font-size,1.5rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:var(--db-icon-font-weight,normal);line-height:1;speak:none;speak:never;aspect-ratio:1;block-size:var(--db-icon-font-size,1.5rem);content:var(--db-icon,attr(data-icon));flex-shrink:0;overflow:clip;text-transform:none;vertical-align:var(--db-icon-vertical-align,middle)}@supports (content:""/""){[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:var(--db-icon,attr(data-icon))/""}}@media aural{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}@media speech{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}[data-icon-leading]:is(span),[data-icon-trailing]:is(span),[data-icon]:is(span){vertical-align:baseline}[data-icon-leading]:is(span):not([hidden]),[data-icon-trailing]:is(span):not([hidden]),[data-icon]:is(span):not([hidden]){display:inline-flex}[data-icon-leading]:before,[data-icon]:before{margin-inline-end:var(--db-icon-margin-end,var(--db-spacing-fixed-xs))}[data-icon-leading=none]:before,[data-icon=none]:before,[data-show-icon-leading=false]:before,[data-show-icon=false]:before{content:none}[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing));margin-inline-start:var(--db-icon-margin-start,var(--db-spacing-fixed-xs))}@supports (content:""/""){[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing))/""}}[data-icon-trailing=none]:after,[data-show-icon-trailing=false]:after{content:none}.is-icon-text-replace[data-icon-leading],.is-icon-text-replace[data-icon]{font-size:0!important}.is-icon-text-replace[data-icon-leading]:before,.is-icon-text-replace[data-icon]:before{--db-icon-margin-end:0}.is-icon-text-replace[data-icon-trailing]{font-size:0!important}.is-icon-text-replace[data-icon-trailing]:after{--db-icon-margin-start:0}
+@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{color:var(--db-icon-color,inherit);display:inline-block;font-family:var(--db-icon-font-family,var(--db-icon-default-font-family,"db-ux-default","icon-font-fallback"))!important;font-size:var(--db-icon-font-size,1.5rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:var(--db-icon-font-weight,normal);line-height:1;speak:none;speak:never;aspect-ratio:1;block-size:var(--db-icon-font-size,1.5rem);content:var(--db-icon,attr(data-icon));flex-shrink:0;overflow:clip;text-transform:none;vertical-align:var(--db-icon-vertical-align,middle)}@supports (content:""/""){[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:var(--db-icon,attr(data-icon))/""}}@media aural{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}@media speech{[data-icon-leading]:before,[data-icon-trailing]:after,[data-icon]:before{content:none}}[data-icon-leading]:is(span),[data-icon-trailing]:is(span),[data-icon]:is(span){vertical-align:initial}[data-icon-leading]:is(span):not([hidden]),[data-icon-trailing]:is(span):not([hidden]),[data-icon]:is(span):not([hidden]){display:inline-flex}[data-icon-leading]:before,[data-icon]:before{margin-inline-end:var(--db-icon-margin-end,var(--db-spacing-fixed-xs))}[data-icon-leading=none]:before,[data-icon=none]:before,[data-show-icon-leading=false]:before,[data-show-icon=false]:before{content:none}[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing));margin-inline-start:var(--db-icon-margin-start,var(--db-spacing-fixed-xs))}@supports (content:""/""){[data-icon-trailing]:after{content:var(--db-icon-trailing,attr(data-icon-trailing))/""}}[data-icon-trailing=none]:after,[data-show-icon-trailing=false]:after{content:none}.is-icon-text-replace[data-icon-leading],.is-icon-text-replace[data-icon]{font-size:0!important}.is-icon-text-replace[data-icon-leading]:before,.is-icon-text-replace[data-icon]:before{--db-icon-margin-end:0}.is-icon-text-replace[data-icon-trailing]{font-size:0!important}.is-icon-text-replace[data-icon-trailing]:after{--db-icon-margin-start:0}