feat: changed the consumption how to import required styles (#2612)

* feat: changed the consumption how to import required styles

* fix: wrong import

* chore: add extra classes for foundation styling
docs: improve documentation for foundations and components

* fix: issue with wrong placeholder

* fix: issue with wrong import

* chore: update snapshots

* chore: update snapshots

docs/migration/alpha-beta.md

@@ -69,3 +69,10 @@ This is related to the following properties:
 -   `slotHeadline`
 -   `slotDrawerHeader`
 -   `slotSubNavigation`
+
+## Styling
+
+We add some more information about our styling and try to generate classes and data-attributes to use in the project, based on user-preferences.
+Moreover, we add all optional styles to `db-ui-42` which may increase the size, but reduces the complexity for using the Design-System with all features.
+
+If you encounter performance issues try to reduce your loaded styles with this [documentation](https://github.com/db-ui/mono/blob/main/packages/components/README.md#optimize-dependencies) or by using a tool like [purgecss](https://purgecss.com/).

output/angular/README.md

@@ -19,7 +19,7 @@ npm i @db-ui/ngx-components
 
 ## Styling Dependencies
 
-Import the styles in scss or css. Based on your technology the file names could be different.
+Import the styles in `scss` or `css`. Based on your technology the file names could be different.
 
 -   Default (db-ui-42): points to `../assets`
 -   Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets`
@@ -44,6 +44,8 @@ Import the styles in scss or css. Based on your technology the file names could
 
 </details>
 
+> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
+
 ### Resolve assets
 
 The current default development config in `angular.json` doesn't use output hashing. This may cause an issue loading the fonts. Look at [this](https://github.com/angular/angular-cli/issues/26347) for more information.

output/react/README.md

@@ -44,6 +44,8 @@ import "@db-ui/components/build/styles/db-ui-42-rollup.css";
 
 </details>
 
+> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
+
 ## Usage
 
 ```tsx

output/vue/README.md

@@ -51,6 +51,8 @@ import "@db-ui/v-components/dist/style.css";
 
 </details>
 
+> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
+
 ## Usage
 
 ```vue

packages/components/README.md

@@ -59,6 +59,32 @@ Or within your JavaScript files, with the related bundler as a prefix (in this c
 import "@db-ui/components/build/styles/db-ui-42-rollup.css";
 ```
 
+### Optimize dependencies
+
+If you only need some of the components or some features from [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations), you shouldn't include `db-ui-42`.
+In the case you want to include only some components, and you could do it like this:
+
+```css
+/* The theme contains all prop required for components like spacings, colors, ... */
+@import "@db-ui/foundations/build/css/default-theme.css";
+/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
+@import "@db-ui/foundations/build/css/fonts/include-rollup.css";
+/* The required styles will normalize css and add focus and default font to body */
+@import "@db-ui/foundations/build/css/init/required.css";
+/* The default root adds a default color space (neutral) and a density (regular) */
+@import "@db-ui/foundations/build/css/init/default-root.css";
+
+/* Optional: Add animations / transitions for components */
+@import "@db-ui/components/build/styles/component-animations.css";
+
+/* Optional: Add data-icon/data-icon-after to global attributes to enable icons for components */
+@import "@db-ui/foundations/build/css/icons/include-rollup.css";
+
+/* Optional: Add components */
+@import "@db-ui/components/build/components/button/button.css";
+@import "@db-ui/components/build/components/input/input.css";
+```
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license.

packages/components/index.html

@@ -95,11 +95,9 @@
 			</li>
 
 			<li>
-				<a href="./src/fonts.html">Fonts</a>
-			</li>
-
-			<li>
-				<a href="./src/icons.html">Icons</a>
+				<a href="./test/import-styles/simple-button/index.html">
+					Import styles: Simple Button
+				</a>
 			</li>
 		</ul>
 	</body>

packages/components/src/components/badge/badge.scss

@@ -88,3 +88,9 @@
 		@extend %absolute-badge;
 	}
 }
+
+// Global styles
+
+:has(> .db-badge[data-placement^="corner"]) {
+	position: relative;
+}

packages/components/src/components/tab-item/tab-item.scss

@@ -1,6 +1,5 @@
 @use "@db-ui/foundations/build/scss/variables";
 @use "@db-ui/foundations/build/scss/colors";
-@use "@db-ui/foundations/build/scss/focus";
 @use "@db-ui/foundations/build/scss/icons";
 @use "@db-ui/foundations/build/scss/helpers";
 @use "../../styles/component";

packages/components/src/components/tooltip/tooltip.scss

@@ -100,3 +100,27 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 		}
 	}
 }
+
+// Global styles
+
+@mixin show-popover($state) {
+	:has(
+			> :is(db-tooltip, dbtooltip) > .db-tooltip:not([data-open]),
+			> .db-tooltip:not([data-open])
+		) {
+		&:#{$state} {
+			.db-tooltip:first-of-type {
+				@extend %show-popover;
+			}
+		}
+	}
+}
+
+:has(> db-tooltip, > dbtooltip, > .db-tooltip) {
+	position: relative;
+}
+
+$popover-states: "hover", "focus";
+@each $state in $popover-states {
+	@include show-popover($state);
+}

packages/components/src/styles/component-animations.scss

@@ -0,0 +1,17 @@
+/*
+	Use this file to add transitions for db-components.
+	Adds color and border transitions for a smooth experience.
+*/
+
+@use "@db-ui/foundations/build/scss/animation";
+
+// transitions
+[class^="db-"],
+[class^="db-"] * {
+	@extend %default-transition;
+
+	::before,
+	::after {
+		@extend %default-transition;
+	}
+}

packages/components/src/styles/db-ui-42.scss

@@ -1,5 +1,12 @@
 /* This is a predefined beginner friendly bundle with default asset-paths (../assets) */
 
 @forward "./db-ui-components";
+// Bundle default theme
 @forward "@db-ui/foundations/build/css/default-theme";
+
+// Bundle optionals
 @forward "@db-ui/foundations/build/scss/icons/include";
+@forward "@db-ui/foundations/build/scss/helpers/classes/all";
+@forward "@db-ui/foundations/build/scss/density/classes/all";
+@forward "@db-ui/foundations/build/scss/fonts/classes/all";
+@forward "@db-ui/foundations/build/scss/colors/classes/all";

packages/components/src/styles/db-ui-components.scss

@@ -1,4 +1,5 @@
 @forward "@db-ui/foundations/build/scss/db-ui-foundations";
+@forward "component-animations";
 @forward "../components/button/button";
 @forward "../components/icon/icon";
 @forward "../components/tab-item/tab-item";
@@ -25,7 +26,6 @@
 @forward "../components/navigation/navigation";
 @forward "../components/popover/popover";
 @forward "../components/tooltip/tooltip";
-@forward "dialog-init";
 @forward "../components/tab-item/tab-item";
 @forward "../components/tab-list/tab-list";
 @forward "../components/tabs/tabs";
@@ -108,29 +108,3 @@ db-notification,
 dbnotification {
 	inline-size: inherit;
 }
-
-:has(> .db-badge[data-placement^="corner"]) {
-	position: relative;
-}
-
-@mixin show-tooltip($state) {
-	:has(
-			> :is(db-tooltip, dbtooltip) > .db-tooltip:not([data-open]),
-			> .db-tooltip:not([data-open])
-		) {
-		&:#{$state} {
-			.db-tooltip:first-of-type {
-				@extend %show-popover;
-			}
-		}
-	}
-}
-
-:has(> db-tooltip, > dbtooltip, > .db-tooltip) {
-	position: relative;
-}
-
-$popover-states: "hover", "focus";
-@each $state in $popover-states {
-	@include show-tooltip($state);
-}

packages/components/test/import-styles/simple-button/index.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite App</title>
+		<!--<script type="module" src="./main.js"></script>-->
+		<link rel="stylesheet" href="test.css" />
+	</head>
+	<body>
+		<div style="display: flex">
+			<button class="db-button">Button</button>
+			<button class="db-button" data-icon="user">Icon Button</button>
+			<div class="db-input">
+				<label for="OVERWRITE_DEFAULT_ID">Label</label>
+				<input
+					aria-invalid="false"
+					id="OVERWRITE_DEFAULT_ID"
+					type="text"
+					placeholder=" "
+					aria-describedby=""
+				/>
+				(Default) Regular
+				<span
+					id="OVERWRITE_DEFAULT_ID-valid-message"
+					class="db-infotext"
+					data-semantic="successful"
+					data-size="small"
+				>
+					TODO: Add a validMessage
+				</span>
+				<span
+					id="OVERWRITE_DEFAULT_ID-invalid-message"
+					class="db-infotext"
+					data-semantic="critical"
+					data-size="small"
+				>
+					TODO: Add an invalidMessage
+				</span>
+			</div>
+		</div>
+	</body>
+</html>

packages/components/test/import-styles/simple-button/main.js

@@ -0,0 +1,17 @@
+// The theme contains all prop required for components like spacings, colors, ...
+import '@db-ui/foundations/build/css/default-theme.css';
+// The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup)
+import '@db-ui/foundations/build/css/fonts/include-rollup.css';
+// The required styles will normalize css and add focus and default font to body
+import '@db-ui/foundations/build/css/init/required.css';
+// The default root adds a default color space (neutral) and a density (regular)
+import '@db-ui/foundations/build/css/init/default-root.css';
+
+// Optional: Add animations / transitions for components
+import '@db-ui/components/build/styles/component-animations.css';
+// Optional: Add data-icon/data-icon-after to global attributes to enable icons for components
+import '@db-ui/foundations/build/css/icons/include-rollup.css';
+
+// Optional: Add components
+import '@db-ui/components/build/components/button/button.css';
+import '@db-ui/components/build/components/input/input.css';

packages/components/test/import-styles/simple-button/test.css

@@ -0,0 +1,15 @@
+/* The theme contains all prop required for components like spacings, colors, ... */
+@import "@db-ui/foundations/build/css/default-theme.css";
+/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
+@import "@db-ui/foundations/build/css/fonts/include-rollup.css";
+/* The required styles will normalize css and add focus and default font to body */
+@import "@db-ui/foundations/build/css/init/required.css";
+/* The default root adds a default color space (neutral) and a density (regular) */
+@import "@db-ui/foundations/build/css/init/default-root.css";
+/* Optional: Add animations / transitions for components */
+@import "@db-ui/components/build/styles/component-animations.css";
+/* Optional: Add data-icon/data-icon-after to global attributes to enable icons for components */
+@import "@db-ui/foundations/build/css/icons/include-rollup.css";
+/* Optional: Add components */
+@import "@db-ui/components/build/components/button/button.css";
+@import "@db-ui/components/build/components/input/input.css";