@db-ux/core-foundations 4.5.4-tailwind-inline-5d37a00 → 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
@@ -107,28 +117,28 @@ _version bump_
 ### Patch Changes
 
 - chore: update instructions files for better copilot outputs - [see commit e4bc905](https://github.com/db-ux-design-system/core-web/commit/e4bc90508479387371d816d5776f9f568aa5fb82):
-    - fix: add some missing variables
+  - fix: add some missing variables
 
 - fix(tailwind): add individual color theme files for all color variants - [see commit e8d58bd](https://github.com/db-ux-design-system/core-web/commit/e8d58bde01039a3d233105c2c72efa71c619c4b4):
-    - Create separate CSS files for each color
-    - Move colors.css to colors/ subdirectory with adaptive theme
-    - Add colors/index.css that imports all color variants
-    - Update theme/index.css to import from colors/index.css
-        - burgundy
-        - critical
-        - cyan
-        - green
-        - informational
-        - light-green
-        - neutral
-        - orange
-        - pink
-        - red
-        - successful
-        - turquoise
-        - violet
-        - warning
-        - yellow
+  - Create separate CSS files for each color
+  - Move colors.css to colors/ subdirectory with adaptive theme
+  - Add colors/index.css that imports all color variants
+  - Update theme/index.css to import from colors/index.css
+    - burgundy
+    - critical
+    - cyan
+    - green
+    - informational
+    - light-green
+    - neutral
+    - orange
+    - pink
+    - red
+    - successful
+    - turquoise
+    - violet
+    - warning
+    - yellow
 
 ## 4.0.1
 
@@ -155,7 +165,7 @@ _version bump_
 ### Patch Changes
 
 - enabled [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) for every package - [see commit 0233048](https://github.com/db-ux-design-system/core-web/commit/023304869e61f5a506dca66a22d69e5f3d70f4d0):
-    - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
+  - auto-generate/auto-update `.github/copilot-instructions.md`, to ensure GitHub Copilot uses DB UX Components for code generation
 
 ## 3.1.17
 

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.

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`