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.hbs

@@ -3,7 +3,7 @@
 {{/if }}
 <dialog id="{{ id }}" class="cmp-dialog">
 	<header>
-		{{> elements-headline type='2' text='Modal' id='' }}
+		<h2>Modal</h2>
 		{{> elements-link styleModifier='is-close' href='#' value='Close' title='Close the dialog' }}
 	</header>
 	<main>

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.hbs

@@ -1,6 +1,6 @@
 {{! TODO: evaluate on the correct role and aria-label in here - there's a duplicate currently with both label and labelledby (prefered) }}
 <nav class="cmp-pagination" aria-label="pagination" aria-labelledby="headline01">
-	{{> elements-headline type='2' text='Pagination' id='headline01' }}
+	<h2 id="headline01">Pagination</h2>
 	<ol>
 		<li>{{> elements-link value='Previous' title='Goto previous page' rel='prev' disabled='true' }}</li>
 		<li>{{> elements-link value='1' current='page' }}</li>

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/_patterns/04-pages/intro.hbs

@@ -2,7 +2,7 @@
 
 	<section>
 		{{> elements-image src="../../images/db-ui-core_logo.png" alt="" width="48" height="48" }}
-		{{> elements-headline type='1' text='DB UI Core' }}
+		<h1>DB UI Core</h1>
 
 		{{> elements-image src="https://img.shields.io/badge/License-Apache_2.0-blue.svg" alt="Apache 2.0 license badge" }}
 		<a href="https://npmjs.com/package/@db-ui/core" target="_blank" rel="noopener noreferrer">{{> elements-image src="https://img.shields.io/npm/v/@db-ui/core.svg?color=rgb%28237%2C%2028%2C%2036%29" alt="npm version" }}</a>
@@ -26,29 +26,29 @@
 	</section>
 
 	<section>
-		{{> elements-headline type='2' text='Core principals' }}
+		<h2>Core principals</h2>
 
 		{{> components-cards variant="banner" }}
 	</section>
 
 	<section>
-		{{> elements-headline type='2' text='How to use' }}
+		<h2>How to use</h2>
 		<p>For using DB UI Core, you need to install it as a dependency to your project and then link it within your HTML / CSS.<br>
 		Please have a look into the <a href='https://github.com/db-ui/core/tree/main/docs/getStarted.adoc' target='_blank' rel='noopener noreferrer'>Docs / Get Started(docs)</a> for detailed instructions.<br>
 		In case that you're developing a JavaScript application, please have a look at <a href="https://db-ui.github.io/elements/" target="_blank">DB UI Elements</a>, that's based on DB UI Core and provides Web Components for easier integration into this tech context.</p>
 
-		{{> elements-headline type='2' text='More information' }}
+		<h2>More information</h2>
 		<p>Additionally we'll provide some more information over time regrading the whole ecosystem:</p>
 		{{> components-link-list }}
 		{{! TODO: Introduce these links:
 				How to contribute
 				List of contributers
 			}}
-		{{> elements-headline type='2' text='Give us your feedback!' }}
+		<h2>Give us your feedback!</h2>
 		<p>This is only the beta version of our framework and we really want your feedback - either within the {{> elements-link href="https://db.de/krnm74" value="DB UI Channel by Web Dev Community in Microsoft Teams (only available DB internally)" target="_blank" rel="noopener noreferrer" }}, or directly at {{> elements-link href="mailto:[email protected]" value="[email protected]" }}.<br>
 		We're particularly keen to add as many examples to the behaviours as possible, to further clarify them.</p>
-		{{> elements-headline type='2' text='Things to keep in mind' }}
-		{{> elements-headline type='3' text='Developed for and driven by the community' }}
+		<h2>Things to keep in mind</h2>
+		<h3>Developed for and driven by the community</h3>
 		<p>This is mainly a platform providing the space and technology for a common basis of curated components; their development is mainly driven by the community, adapted out of the work done in projects and through the huge amount of feedback that we're gaining out of the community. So please support us in any way possible, this is greatly appreciated!</p>
 	</section>
 </main>

source/_patterns/04-pages/sample-page.hbs

@@ -1,37 +1,37 @@
 {{> areas-header }}
 <main class="rea-main">
 
-	{{> elements-headline type='1' text='Dies ist eine Headline' }}
+	<h1>Dies ist eine Headline</h1>
 	<p>{{ excerpt.long }}</p>
 
 	<div class="rea-grid">
 		<!--
 		// jscpd:ignore-start
 		-->
 		<div>
-			{{> elements-headline type='2' text='Dies ist eine Headline' }}
+			<h2>Dies ist eine Headline</h2>
 
 			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong></p>
 
-			{{> elements-headline type='3' text='Dies ist eine Sub-Headline' }}
+			<h3>Dies ist eine Sub-Headline</h3>
 
 			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong></p>
 		</div>
 		<div>
-			{{> elements-headline type='2' text='Dies ist eine Headline' }}
+			<h2>Dies ist eine Headline</h2>
 
 			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong></p>
 
-			{{> elements-headline type='3' text='Dies ist eine Sub-Headline' }}
+			<h3>Dies ist eine Sub-Headline</h3>
 
 			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong></p>
 		</div>
 		<div>
-			{{> elements-headline type='2' text='Dies ist eine Headline' }}
+			<h2>Dies ist eine Headline</h2>
 
 			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong></p>
 
-			{{> elements-headline type='3' text='Dies ist eine Sub-Headline' }}
+			<h3>Dies ist eine Sub-Headline</h3>
 
 			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, {{> elements-link href="#" value="sed diam nonumy eirmod" }} tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong></p>
 		</div>