refactor: updated db-ui-base / DBUX-3 branch (#140)

annsch · mfranzke · nmerget · web-flow · commit e29328bf030b · 2022-11-10T13:02:23.000+01:00
* chore: optimizations regarding DB UI Base v3 * refactor: updated DB UI Base * feat: replace dbux-2 base with dbux-3 (#95) * feat: replace dbux-2 base with dbux-3 Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> * refactor: updated db-ui-base * refactor: remove headline element – is replaced by base/typography styles * feat: include base bundle * fix: import db-ui/base only once * fix: forgotten file * Restore source/_patterns/01-elements/headline/_headline.hbs * Restore source/_patterns/01-elements/headline/_headline.json * Restore dialog.hbs * Restore pagination.hbs * Restore intro.hbs * Restore sample-page.hbs * fix: removed unused comment Co-authored-by: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com> Co-authored-by: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@csstools/normalize.css": "^12.0.0",
-    "@db-ui/base": "2.0.0-3-794c2f8"
+    "@db-ui/base": "2.0.0-5-6db143b"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss
@@ -63,7 +63,7 @@
 				content: none;
 			}
 		} @else {
-			@extend %icon;
+			@extend %icon !optional;
 		}
 	}
 }
diff --git a/source/_patterns/00-base/icons/icons.scss b/source/_patterns/00-base/icons/icons.scss
@@ -10,14 +10,14 @@
 [data-icon],
 [data-icon-before] {
 	&::before {
-		@extend %icon;
+		@extend %icon !optional;
 		margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
 	}
 }
 
 [data-icon-after] {
 	&::after {
-		@extend %icon;
+		@extend %icon !optional;
 		margin-inline-start: var(--icon-margin-before, #{$icon-content-space});
 	}
 }
diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss
@@ -66,6 +66,6 @@
 	}
 
 	& + label {
-		margin-left: $db-spacing-0-5;
+		margin-left: $db-spacing-fixed-normal-xs;
 	}
 }
diff --git a/source/_patterns/01-elements/headline/_headline.variables.scss b/source/_patterns/01-elements/headline/_headline.variables.scss
diff --git a/source/_patterns/01-elements/headline/enterprise/_headline.variables.scss b/source/_patterns/01-elements/headline/enterprise/_headline.variables.scss
diff --git a/source/_patterns/01-elements/headline/enterprise/headline.scss b/source/_patterns/01-elements/headline/enterprise/headline.scss
diff --git a/source/_patterns/01-elements/headline/headline.md b/source/_patterns/01-elements/headline/headline.md
diff --git a/source/_patterns/01-elements/headline/headline.scss b/source/_patterns/01-elements/headline/headline.scss
diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss
@@ -13,7 +13,7 @@
 	line-height: to-rem($pxValue: 24);
 	max-width: 100%;
 
-	padding: $db-spacing-1 $db-spacing-2;
+	padding: $db-spacing-fixed-normal-xs $db-spacing-fixed-normal-m;
 
 	width: 100%;
 
@@ -86,7 +86,10 @@
 			font-size: to-rem($pxValue: 12);
 
 			margin-bottom: -#{to-rem($pxValue: 18)};
-			transform: translate($db-spacing-2, -#{to-rem($pxValue: 41)});
+			transform: translate(
+				$db-spacing-fixed-normal-m,
+				-#{to-rem($pxValue: 41)}
+			);
 
 			& + .description {
 				margin-top: 0;
diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss
@@ -50,7 +50,7 @@
 	// }
 
 	& + label {
-		margin-left: $db-spacing-0-5;
+		margin-left: $db-spacing-fixed-normal-xs;
 	}
 
 	&:disabled {
diff --git a/source/_patterns/01-elements/select/select.scss b/source/_patterns/01-elements/select/select.scss
@@ -25,7 +25,8 @@
 		background-position: right to-rem($pxValue: 11) center;
 		background-repeat: no-repeat;
 		height: to-rem($pxValue: 44);
-		padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0 $db-spacing-2;
+		padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0
+			$db-spacing-fixed-normal-m;
 
 		// Floating labels
 		& + .elm-label {
@@ -43,7 +44,10 @@
 			& + .elm-label {
 				color: $select-floatingLabel--color;
 				font-size: to-rem($pxValue: 16);
-				transform: translate($db-spacing-2, -#{to-rem($pxValue: 35)});
+				transform: translate(
+					$db-spacing-fixed-normal-m,
+					-#{to-rem($pxValue: 35)}
+				);
 			}
 		}
 	}
@@ -70,7 +74,10 @@
 		display: block;
 		font-size: to-rem($pxValue: 12);
 		margin-bottom: -#{to-rem($pxValue: 18)};
-		transform: translate($db-spacing-2, -#{to-rem($pxValue: 41)});
+		transform: translate(
+			$db-spacing-fixed-normal-m,
+			-#{to-rem($pxValue: 41)}
+		);
 		transition: opacity, transform 150ms;
 		// Adopted by https://www.heise.de/developer/artikel/a11y-Reduced-Motion-4356171.html
 		@media (prefers-reduced-motion: reduce) {
@@ -82,7 +89,10 @@
 		margin-top: to-rem($pxValue: 16);
 
 		& + .elm-label {
-			transform: translate($db-spacing-2, -#{to-rem($pxValue: 100)});
+			transform: translate(
+				$db-spacing-fixed-normal-m,
+				-#{to-rem($pxValue: 100)}
+			);
 		}
 	}
 
diff --git a/source/_patterns/02-components/accordion/accordion.scss b/source/_patterns/02-components/accordion/accordion.scss
@@ -13,7 +13,7 @@
 		align-items: center;
 		display: flex;
 
-		padding-block: $db-spacing-1;
+		padding-block: db-spacing-fixed-normal-xs;
 		// Negating the padding left for moving the element into that direction with the same measures
 		transform: translateX(calc(var(--db-accordion---paddingLeft) * -1));
 		width: calc(
@@ -95,7 +95,7 @@
 
 		summary {
 			font-size: to-rem($pxValue: 20);
-			padding-block: $db-spacing-2;
+			padding-block: $db-spacing-fixed-normal-m;
 
 			&::before {
 				--icon-font-size: #{to-rem($pxValue: 32)};
diff --git a/source/_patterns/02-components/cards/card.scss b/source/_patterns/02-components/cards/card.scss
@@ -12,7 +12,8 @@
 	}
 
 	figure {
-		margin: $db-spacing-2 $db-spacing-2 $db-spacing-2 $db-spacing-1;
+		margin: $db-spacing-fixed-normal-m $db-spacing-fixed-normal-m
+			$db-spacing-fixed-normal-m $db-spacing-fixed-normal-xs;
 	}
 
 	// Banner variant
diff --git a/source/_patterns/02-components/dialog/dialog.scss b/source/_patterns/02-components/dialog/dialog.scss
@@ -47,6 +47,7 @@
 
 		transform: translateY(-#{to-rem($pxValue: 9)});
 
+		// TODO use base typography placeholder for headlines
 		.elm-headline {
 			font-size: to-rem($pxValue: 18);
 			font-weight: 700;
diff --git a/source/_patterns/02-components/pagination/pagination.scss b/source/_patterns/02-components/pagination/pagination.scss
@@ -11,6 +11,7 @@
 		display: flex;
 	}
 
+	// TODO remove class and use base typography placeholder instead
 	.elm-headline {
 		@include a11y-visually-hidden($partial: $partial);
 	}
diff --git a/source/_patterns/02-components/table/_table.variables.scss b/source/_patterns/02-components/table/_table.variables.scss
@@ -15,6 +15,6 @@ $table-line--borderColor: #d7dce1 !default;
 
 $table-row-zebra-color: rgba($db-colors-secondary-enabled, 0.07) !default;
 
-$table-densitySmall--padding: $db-spacing-1 !default;
-$table-densityRegular--padding: $db-spacing-1 !default;
-$table-densityLarge--padding: $db-spacing-2 !default;
+$table-densitySmall--padding: $db-spacing-fixed-normal-xs !default;
+$table-densityRegular--padding: $db-spacing-fixed-normal-xs !default;
+$table-densityLarge--padding: $db-spacing-fixed-normal-m !default;
diff --git a/source/css/_db-ui-core.variables.scss b/source/css/_db-ui-core.variables.scss
@@ -7,7 +7,12 @@ $icons-path: "../../icons/" !default;
 $images-path: "../../images/" !default;
 $fonts-path: "../../fonts/" !default;
 
+// TODO change later and use db-ui/base bundle files
+
 @import "@db-ui/base/build/scss/variables";
+@import "@db-ui/base/build/scss/variables.global";
+// TODO change later, placeholders shouldn't be imported here
+@import "@db-ui/base/build/scss/color-placeholder";
 
 // General configurations
 $dbBaseFontSize: 16px;
diff --git a/source/css/db-ui-core.general.scss b/source/css/db-ui-core.general.scss
@@ -2,17 +2,7 @@
 	This is mainly meant to get included within scoped components like e.g. within StencilJS Custom Components / DB UI Elements
 ***** */
 
-@import "db-ui-core.variables";
 @import "@csstools/normalize.css/normalize";
+@import "db-ui-core.variables";
 @import "../_patterns/00-base/init";
 @import "fonts.general";
-
-/* TODO: We most likely need to rework this */
-body,
-div,
-button,
-input,
-select,
-textarea {
-	@extend %general-fonts;
-}
diff --git a/source/css/db-ui-core.vars.scss b/source/css/db-ui-core.vars.scss
@@ -9,11 +9,6 @@ $icons-path: "../icons/" !default;
 $images-path: "../images/" !default;
 $fonts-path: "../fonts/" !default;
 
-// General variables by DB UI Base
-@import "@db-ui/base/build/css/variables";
-
-@import "../_patterns/00-base/colors/colors";
-@import "../_patterns/00-base/type/fonts";
 @import "../_patterns/00-base/icons/icons.variables";
 @import "../_patterns/00-base/icons/icons.font-faces";
 
diff --git a/source/css/enterprise/db-ui-core.demonstration.scss b/source/css/enterprise/db-ui-core.demonstration.scss
@@ -1,10 +1,11 @@
 @charset "utf-8";
 
-@import "../helpers/functions";
-@import "../../_patterns/00-base/helpers";
-
 @import "db-ui-core.variables";
 
+@import "@db-ui/base/build/scss/typescale";
+
+@import "../../_patterns/00-base/helpers";
+
 @import "../../_patterns/00-base/init.demonstration";
 
 @import "../../_patterns/00-base/icons/icons.demonstration";
@@ -22,3 +23,7 @@
 @import "../../_patterns/02-components/table/enterprise/table.demonstration";
 @import "../../_patterns/03-areas/02-grid/enterprise/grid.demonstration";
 @import "../../_patterns/04-pages/enterprise/intro.demonstration";
+
+:root {
+	@extend %db-ui-functional;
+}
diff --git a/source/css/enterprise/db-ui-core.scss b/source/css/enterprise/db-ui-core.scss
@@ -26,8 +26,6 @@ $partial: false;
 // ELEMENTS
 /* button */
 @import "../../_patterns/01-elements/buttons/enterprise/button";
-/* headline */
-@import "../../_patterns/01-elements/headline/enterprise/headline";
 /* link */
 @import "../../_patterns/01-elements/link/enterprise/link";
 /* image */
diff --git a/source/css/enterprise/db-ui-core.vars.scss b/source/css/enterprise/db-ui-core.vars.scss
@@ -3,8 +3,6 @@ $icons-path: "../../icons/" !default;
 $images-path: "../../images/" !default;
 $fonts-path: "../../fonts/" !default;
 
-@import "@db-ui/base/build/scss/variables";
-
 @import "../../_patterns/00-base/colors/enterprise/colors";
 @import "../../_patterns/00-base/type/enterprise/fonts";
 @import "../../_patterns/00-base/icons/enterprise/icons.variables";
diff --git a/source/css/pattern-scaffolding-project-specific.scss b/source/css/pattern-scaffolding-project-specific.scss

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@`
`63`	`63`	`content: none;`
`64`	`64`	`}`
`65`	`65`	`} @else {`
`66`		`- @extend %icon;`
	`66`	`+ @extend %icon !optional;`
`67`	`67`	`}`
`68`	`68`	`}`
`69`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,14 +10,14 @@`
`10`	`10`	`[data-icon],`
`11`	`11`	`[data-icon-before] {`
`12`	`12`	`&::before {`
`13`		`- @extend %icon;`
	`13`	`+ @extend %icon !optional;`
`14`	`14`	`margin-inline-end: var(--icon-margin-after, #{$icon-content-space});`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`[data-icon-after] {`
`19`	`19`	`&::after {`
`20`		`- @extend %icon;`
	`20`	`+ @extend %icon !optional;`
`21`	`21`	`margin-inline-start: var(--icon-margin-before, #{$icon-content-space});`
`22`	`22`	`}`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -66,6 +66,6 @@`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`& + label {`
`69`		`- margin-left: $db-spacing-0-5;`
	`69`	`+ margin-left: $db-spacing-fixed-normal-xs;`
`70`	`70`	`}`
`71`	`71`	`}`