refactor: exclude default theme for core-foundations

.amazonq/rules/db-ux-mcp-workflow.md

@@ -12,19 +12,19 @@ npx --yes @db-ux/core-foundations
 
 Work strictly in **Plan-First** order. Never write UI code before completing the discovery phase.
 
-*(**Note for human readers:** The functions listed below, such as `list_components` or `get_component_props`, are the specific **MCP Tools** provided by the server. The AI agent calls these tools automatically in the background to retrieve real-time data from the design system.)*
+_(**Note for human readers:** The functions listed below, such as `list_components` or `get_component_props`, are the specific **MCP Tools** provided by the server. The AI agent calls these tools automatically in the background to retrieve real-time data from the design system.)_
 
 ### Phase 1: Discover
 
-```
+```text
 list_components
   → confirms the base component exists (e.g. "button", "input" — which correspond to DBButton, DBInput, etc.)
   → if not found: stop. Do not invent custom components or fall back to generic HTML tags if the user requested a JavaScript framework context (like React, Angular, or Vue).
 ```
 
 ### Phase 2: Load API & Examples
 
-```
+```text
 get_component_props(componentName)
   → reveals all props, types, and required attributes
 
@@ -38,7 +38,7 @@ get_example_code(componentName, exampleName, framework)
 
 ### Phase 3: Resolve Tokens & Icons
 
-```
+```text
 list_design_token_categories
   → returns available categories ("colors", "spacing", "typography", etc.)
   → call this if you're unsure which category to query
@@ -54,7 +54,7 @@ list_icons
 
 ### Phase 4: Docs & Guidelines
 
-```
+```text
 docs_search(query)
   → searches conceptual documentation (guidelines, A11y, migration, ADRs)
   → searches component-specific markdown docs
@@ -69,21 +69,21 @@ Only after phases 1–4 are complete, write or modify files. Adapt the output of
 
 `get_example_code` requires an explicit `framework` parameter. Always match it to the project's framework:
 
-| Framework      | Parameter value    | File extension |
-|----------------|--------------------|----------------|
-| React          | `"react"`          | `.tsx`         |
+| Framework      | Parameter value    | File extension                          |
+| -------------- | ------------------ | --------------------------------------- |
+| React          | `"react"`          | `.tsx`                                  |
 | Angular        | `"angular"`        | `.ts` (template inline in `@Component`) |
-| Vue            | `"vue"`            | `.vue`         |
-| Web Components | `"web-components"` | `.html` / `.ts`|
-| HTML           | `"html"`           | `.html`        |
+| Vue            | `"vue"`            | `.vue`                                  |
+| Web Components | `"web-components"` | `.html` / `.ts`                         |
+| HTML           | `"html"`           | `.html`                                 |
 
 ```typescript
 // ✅ CORRECT: explicit framework
-get_example_code("button", "Show Icon Leading", "react")
-get_example_code("button", "Show Icon Leading", "angular")
-get_example_code("button", "Show Icon Leading", "vue")
-get_example_code("button", "Show Icon Leading", "web-components")
-get_example_code("button", "Show Icon Leading", "html")
+get_example_code("button", "Show Icon Leading", "react");
+get_example_code("button", "Show Icon Leading", "angular");
+get_example_code("button", "Show Icon Leading", "vue");
+get_example_code("button", "Show Icon Leading", "web-components");
+get_example_code("button", "Show Icon Leading", "html");
 
 // ❌ WRONG: writing framework code from memory
 // <DBButton icon="arrow-right"> ← icon name unverified, may not exist
@@ -95,33 +95,35 @@ get_example_code("button", "Show Icon Leading", "html")
 
 ```html
 <!-- ✅ CORRECT -->
-<div style="gap: var(--db-spacing-fixed-md); color: var(--db-color-text-default)">
-
-<!-- ❌ WRONG -->
-<div style="gap: 16px; color: #333333">
+<div
+	style="gap: var(--db-spacing-fixed-md); color: var(--db-color-text-default)"
+>
+	<!-- ❌ WRONG -->
+	<div style="gap: 16px; color: #333333"></div>
+</div>
 ```
 
 ```scss
 // ✅ CORRECT
 .my-element {
-  margin-block: var(--db-spacing-fixed-sm);
+	margin-block: var(--db-spacing-fixed-sm);
 }
 
 // ❌ WRONG
 .my-element {
-  margin-block: 8px;
+	margin-block: 8px;
 }
 ```
 
 ### Icons — never guess
 
 ```tsx
 // ✅ CORRECT: name verified via list_icons
-<DBButton icon="arrow_right">Weiter</DBButton>
+<DBButton icon="arrow_right">Continue</DBButton>
 
 // ❌ WRONG: invented name
-<DBButton icon="arrow-right">Weiter</DBButton>
-<DBButton icon="chevronRight">Weiter</DBButton>
+<DBButton icon="arrow-right">Continue</DBButton>
+<DBButton icon="chevronRight">Continue</DBButton>
 ```
 
 ### Native HTML primitives — replace with DB UX components
@@ -137,10 +139,10 @@ get_example_code("button", "Show Icon Leading", "html")
 
 ```tsx
 // ✅ CORRECT
-<DBButton type="button" variant="brand">Speichern</DBButton>
+<DBButton type="button" variant="brand">Save</DBButton>
 
 // ❌ WRONG
-<button className="btn btn-primary" style="background: #d40000">Speichern</button>
+<button className="btn btn-primary" style="background: #d40000">Save</button>
 ```
 
 ### Interactive elements — never build custom

.changeset/yummy-sides-shop.md

@@ -0,0 +1,10 @@
+---
+"@db-ux/core-foundations": minor
+"@db-ux/core-components": minor
+"@db-ux/ngx-core-components": minor
+"@db-ux/react-core-components": minor
+"@db-ux/wc-core-components": minor
+"@db-ux/v-core-components": minor
+---
+
+refactor: exclude whitelabel-theme from default bundle to reduce size and to align with "how to import a theme"

README.md

@@ -24,7 +24,7 @@ designers, and content authors build, maintain, and scale best-of-class digital
 ## Packages
 
 | Package                                                                                                       | Content                                      | Version                                                                                                                                                                                                                                                                                                                            |
-|---------------------------------------------------------------------------------------------------------------|----------------------------------------------| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [@db-ux/core-foundations](https://github.com/db-ux-design-system/core-web/tree/main/packages/foundations)     | CSS/SCSS/Tailwind styles and assets          | [![@db-ux/core-foundations on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ux/core-foundations "DB UX Design System – on NPM")           |
 | [@db-ux/core-components](https://github.com/db-ux-design-system/core-web/tree/main/packages/components)       | CSS/SCSS styles for components               | [![@db-ux/core-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ux/core-components "DB UX Design System – on NPM")             |
 | [@db-ux/ngx-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/angular)        | Native Angular components                    | [![@db-ux/ngx-core-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ux/ngx-core-components "DB UX Design System – on NPM")     |
@@ -63,21 +63,24 @@ We even provide some [examples of integrations](https://github.com/db-ux-design-
 We provide dedicated tooling to integrate the DB UX Design System directly into your AI coding assistants (like GitHub Copilot, Amazon Q, Cursor, or Claude).
 
 ### Model Context Protocol (MCP) Server
+
 For IDEs and AI tools that support the [Model Context Protocol](https://modelcontextprotocol.io/) (e.g., Claude plugins, Cursor, Windsurf), we provide a standalone MCP server. It equips your AI with our official documentation, design tokens, and a powerful migration engine to automatically refactor legacy v2 code into modern v3 standards.
 
 Add the server to your AI assistant's MCP configuration:
+
 ```json
 {
-  "mcpServers": {
-    "db-ux": {
-      "command": "npx",
-      "args": ["-y", "@db-ux/mcp-server", "db-ux-mcp"]
-    }
-  }
+	"mcpServers": {
+		"db-ux": {
+			"command": "npx",
+			"args": ["-y", "@db-ux/mcp-server", "db-ux-mcp"]
+		}
+	}
 }
 ```
 
 ### Agent CLI (Copilot Instructions)
+
 For developers using GitHub Copilot or similar tools that read workspace instructions, we provide the [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) tool.
 
 Run this command in your repository:

packages/components/README.md

@@ -27,7 +27,7 @@ If you just need the styling follow this:
 
 **✅ Do I need foundations if I install components?**
 
-**No!** The `@db-ux/core-components` package **automatically includes** all the foundations (`@db-ux/core-foundations`) you need. You only need to install one package:
+**No!** The `@db-ux/core-components` package **automatically includes** all the foundations (`@db-ux/core-foundations`) you need. You only need to include one package:
 
 - **Use `@db-ux/core-components`** - If you want to use UI components (buttons, inputs, etc.)
 - **Use `@db-ux/core-foundations`** - If you only need design tokens, colors, spacing, fonts, and assets without any component styles
@@ -36,39 +36,30 @@ If you just need the styling follow this:
 
 `npm i @db-ux/core-components`
 
-> **Note**: This automatically includes `@db-ux/core-foundations` as a dependency, so you don't need to install it separately.
+> **Note**: This automatically includes `@db-ux/core-foundations` as a dependency, if you use `npm`. If you use `pnpm` you need to install `@db-ux/core-foundations` as well.
 
 ## Styling Dependencies
 
-Import the styles in `scss` or `css`. Based on your technology the file names could be different.
+Import the styles in `css`. Based on your technology the file names could be different.
 
 - `relative`: asset path point to `../assets`
 - `webpack`: asset path point to `~@db-ux/core-foundations/assets`
 - `rollup`: asset path point to `@db-ux/core-foundations/assets`
 
 **Important**: These bundled files automatically include **all dependencies from [foundations](https://www.npmjs.com/package/@db-ux/core-foundations)** (design tokens, colors, fonts, etc.) **and all [components](https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/styles/db-ux-components.scss)** - everything you need in one import!
 
-**SCSS**
+### Import
 
-```scss
-// index.scss
-@forward "@db-ux/core-components/build/styles/rollup";
-```
-
-**CSS**
-
-Within HTML files directly:
+Import the styles in your main `.css` file.
 
-```html
-<!-- index.html //-->
-<link rel="stylesheet" href="/styles/rollup.css" />
-```
-
-Or within your JavaScript files, with the related bundler as a prefix (in this case rollup and equivalents like Vite):
+```css
+/* index.css */
+@layer whitelabel-theme, db-ux;
+/* You may want to include another theme here, this is a whitelabel theme! So instead of including the following line of code, please have a look at the DB Theme section */
+@import "@db-ux/core-foundations/build/styles/theme/rollup.css"
+	layer(whitelabel-theme);
 
-```js
-// main.js
-import "@db-ux/core-components/build/styles/rollup.css";
+@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
 ```
 
 > **Vite 8 Note:** Starting with Vite 8, the default CSS minifier was changed to [LightningCSS](https://lightningcss.dev/), which provides buggy transformations for modern CSS features used by the DB UX Design System (e.g. `light-dark()` CSS function). We might provide a specific configuration necessary to mitigate those problems in the near future. To keep CSS output stable in the meantime, configure `vite.config.ts` like this:
@@ -116,7 +107,7 @@ In the case you want to include only some components, and you could do it like t
 
 ```css
 /* The theme contains all props required for components like spacings, colors, ... */
-@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css";
+@import "@db-ux/core-foundations/build/styles/bundle.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/rollup.css";
 /* The required styles will normalize css and add focus and default font to body */