@db-ux/core-foundations 4.5.4-postcss-a42fe67 → 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.

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);
 }
 
@@ -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/fonts/absolute.scss

@@ -1,2 +1,2 @@
-@use "../absolute.assets-paths";
+@use "../theme/absolute.assets-paths";
 @forward "./relative";

package/build/styles/fonts/relative.scss

@@ -1,4 +1,4 @@
-@use "../default.assets-paths" as assets-paths;
+@use "../theme/default.assets-paths" as assets-paths;
 
 @font-face {
 	font-family: OpenSans;

package/build/styles/fonts/rollup.scss

@@ -1,2 +1,2 @@
-@use "../rollup.assets-paths";
+@use "../theme/rollup.assets-paths";
 @forward "./relative";

package/build/styles/fonts/webpack.scss

@@ -1,2 +1,2 @@
-@use "../webpack.assets-paths";
+@use "../theme/webpack.assets-paths";
 @forward "./relative";

package/build/styles/icons/absolute.scss

@@ -1,2 +1,2 @@
-@use "../absolute.assets-paths";
+@use "../theme/absolute.assets-paths";
 @forward "./relative";

package/build/styles/icons/relative.scss

@@ -1,5 +1,5 @@
 @use "index";
-@use "../default.assets-paths" as assets-paths;
+@use "../theme/default.assets-paths" as assets-paths;
 
 @each $variant in index.$default-icon-variants {
 	@font-face {

package/build/styles/icons/rollup.scss

@@ -1,2 +1,2 @@
-@use "../rollup.assets-paths";
+@use "../theme/rollup.assets-paths";
 @forward "./relative";

package/build/styles/icons/webpack.scss

@@ -1,2 +1,2 @@
-@use "../webpack.assets-paths";
+@use "../theme/webpack.assets-paths";
 @forward "./relative";