@db-ux/core-foundations 4.5.4 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @db-ux/core-foundations
 
+## 4.6.0
+
+### Minor Changes
+
+- refactor: exclude whitelabel-theme from default bundle to reduce size and to align with "how to import a theme" - [see commit f272967](https://github.com/db-ux-design-system/core-web/commit/f272967acb7a37dc9b07d9786134e437b284e9b6)
+
+### Patch Changes
+
+- fix: issue with tailwind duplicating some classes by using `@theme` inline - [see commit 92de4e6](https://github.com/db-ux-design-system/core-web/commit/92de4e6e5fdad3be5629d7457944d3b9b7396cf4)
+
 ## 4.5.4
 
 ### Patch Changes

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`