refactor: updated db-ui-base / DBUX-3 branch

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",

source/_patterns/00-base/icons/_icons.helpers.scss

@@ -63,7 +63,7 @@
 				content: none;
 			}
 		} @else {
-			@extend %icon;
+			@extend %icon !optional;
 		}
 	}
 }

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});
 	}
 }

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;
 	}
 }

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;

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 {

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)}
+			);
 		}
 	}
 

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)};

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

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;

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);
 	}

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;

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;

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;
-}

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";
 

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;
+}

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 */

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";