@db-ux/core-foundations 1.0.0-test-13b991d

package/build/styles/colors/speaking-colors/semantic/_successful.speaking-colors.scss

@@ -0,0 +1,136 @@
+$db-successful-bg-basic-level-1-default: var(
+	--db-successful-bg-basic-level-1-default
+);
+$db-successful-bg-basic-level-1-hovered: var(
+	--db-successful-bg-basic-level-1-hovered
+);
+$db-successful-bg-basic-level-1-pressed: var(
+	--db-successful-bg-basic-level-1-pressed
+);
+$db-successful-bg-basic-level-2-default: var(
+	--db-successful-bg-basic-level-2-default
+);
+$db-successful-bg-basic-level-2-hovered: var(
+	--db-successful-bg-basic-level-2-hovered
+);
+$db-successful-bg-basic-level-2-pressed: var(
+	--db-successful-bg-basic-level-2-pressed
+);
+$db-successful-bg-basic-level-3-default: var(
+	--db-successful-bg-basic-level-3-default
+);
+$db-successful-bg-basic-level-3-hovered: var(
+	--db-successful-bg-basic-level-3-hovered
+);
+$db-successful-bg-basic-level-3-pressed: var(
+	--db-successful-bg-basic-level-3-pressed
+);
+
+$db-successful-bg-basic-transparent-full-default: var(
+	--db-successful-bg-basic-transparent-full-default
+);
+$db-successful-bg-basic-transparent-semi-default: var(
+	--db-successful-bg-basic-transparent-semi-default
+);
+$db-successful-bg-basic-transparent-hovered: var(
+	--db-successful-bg-basic-transparent-hovered
+);
+$db-successful-bg-basic-transparent-pressed: var(
+	--db-successful-bg-basic-transparent-pressed
+);
+$db-successful-on-bg-basic-emphasis-100-default: var(
+	--db-successful-on-bg-basic-emphasis-100-default
+);
+$db-successful-on-bg-basic-emphasis-100-hovered: var(
+	--db-successful-on-bg-basic-emphasis-100-hovered
+);
+$db-successful-on-bg-basic-emphasis-100-pressed: var(
+	--db-successful-on-bg-basic-emphasis-100-pressed
+);
+$db-successful-on-bg-basic-emphasis-90-default: var(
+	--db-successful-on-bg-basic-emphasis-90-default
+);
+$db-successful-on-bg-basic-emphasis-90-hovered: var(
+	--db-successful-on-bg-basic-emphasis-90-hovered
+);
+$db-successful-on-bg-basic-emphasis-90-pressed: var(
+	--db-successful-on-bg-basic-emphasis-90-pressed
+);
+$db-successful-on-bg-basic-emphasis-80-default: var(
+	--db-successful-on-bg-basic-emphasis-80-default
+);
+$db-successful-on-bg-basic-emphasis-80-hovered: var(
+	--db-successful-on-bg-basic-emphasis-80-hovered
+);
+$db-successful-on-bg-basic-emphasis-80-pressed: var(
+	--db-successful-on-bg-basic-emphasis-80-pressed
+);
+$db-successful-on-bg-basic-emphasis-70-default: var(
+	--db-successful-on-bg-basic-emphasis-70-default
+);
+$db-successful-on-bg-basic-emphasis-70-hovered: var(
+	--db-successful-on-bg-basic-emphasis-70-hovered
+);
+$db-successful-on-bg-basic-emphasis-70-pressed: var(
+	--db-successful-on-bg-basic-emphasis-70-pressed
+);
+$db-successful-on-bg-basic-emphasis-60-default: var(
+	--db-successful-on-bg-basic-emphasis-60-default
+);
+$db-successful-on-bg-basic-emphasis-60-hovered: var(
+	--db-successful-on-bg-basic-emphasis-60-hovered
+);
+$db-successful-on-bg-basic-emphasis-60-pressed: var(
+	--db-successful-on-bg-basic-emphasis-60-pressed
+);
+$db-successful-on-bg-basic-emphasis-50-default: var(
+	--db-successful-on-bg-basic-emphasis-50-default
+);
+$db-successful-on-bg-basic-emphasis-50-hovered: var(
+	--db-successful-on-bg-basic-emphasis-50-hovered
+);
+$db-successful-on-bg-basic-emphasis-50-pressed: var(
+	--db-successful-on-bg-basic-emphasis-50-pressed
+);
+$db-successful-bg-inverted-contrast-max-default: var(
+	--db-successful-bg-inverted-contrast-max-default
+);
+$db-successful-bg-inverted-contrast-max-hovered: var(
+	--db-successful-bg-inverted-contrast-max-hovered
+);
+$db-successful-bg-inverted-contrast-max-pressed: var(
+	--db-successful-bg-inverted-contrast-max-pressed
+);
+$db-successful-bg-inverted-contrast-high-default: var(
+	--db-successful-bg-inverted-contrast-high-default
+);
+$db-successful-bg-inverted-contrast-high-hovered: var(
+	--db-successful-bg-inverted-contrast-high-hovered
+);
+$db-successful-bg-inverted-contrast-high-pressed: var(
+	--db-successful-bg-inverted-contrast-high-pressed
+);
+$db-successful-bg-inverted-contrast-low-default: var(
+	--db-successful-bg-inverted-contrast-low-default
+);
+$db-successful-bg-inverted-contrast-low-hovered: var(
+	--db-successful-bg-inverted-contrast-low-hovered
+);
+$db-successful-bg-inverted-contrast-low-pressed: var(
+	--db-successful-bg-inverted-contrast-low-pressed
+);
+$db-successful-on-bg-inverted-default: var(
+	--db-successful-on-bg-inverted-default
+);
+$db-successful-on-bg-inverted-hovered: var(
+	--db-successful-on-bg-inverted-hovered
+);
+$db-successful-on-bg-inverted-pressed: var(
+	--db-successful-on-bg-inverted-pressed
+);
+$db-successful-origin-default: var(--db-successful-origin-default);
+$db-successful-origin-hovered: var(--db-successful-origin-hovered);
+$db-successful-origin-pressed: var(--db-successful-origin-pressed);
+$db-successful-on-origin-default: var(--db-successful-on-origin-default);
+$db-successful-on-origin-hovered: var(--db-successful-on-origin-hovered);
+$db-successful-on-origin-pressed: var(--db-successful-on-origin-pressed);

package/build/styles/colors/speaking-colors/semantic/_warning.speaking-colors.scss

@@ -0,0 +1,130 @@
+$db-warning-bg-basic-level-1-default: var(
+	--db-warning-bg-basic-level-1-default
+);
+$db-warning-bg-basic-level-1-hovered: var(
+	--db-warning-bg-basic-level-1-hovered
+);
+$db-warning-bg-basic-level-1-pressed: var(
+	--db-warning-bg-basic-level-1-pressed
+);
+$db-warning-bg-basic-level-2-default: var(
+	--db-warning-bg-basic-level-2-default
+);
+$db-warning-bg-basic-level-2-hovered: var(
+	--db-warning-bg-basic-level-2-hovered
+);
+$db-warning-bg-basic-level-2-pressed: var(
+	--db-warning-bg-basic-level-2-pressed
+);
+$db-warning-bg-basic-level-3-default: var(
+	--db-warning-bg-basic-level-3-default
+);
+$db-warning-bg-basic-level-3-hovered: var(
+	--db-warning-bg-basic-level-3-hovered
+);
+$db-warning-bg-basic-level-3-pressed: var(
+	--db-warning-bg-basic-level-3-pressed
+);
+
+$db-warning-bg-basic-transparent-full-default: var(
+	--db-warning-bg-basic-transparent-full-default
+);
+$db-warning-bg-basic-transparent-semi-default: var(
+	--db-warning-bg-basic-transparent-semi-default
+);
+$db-warning-bg-basic-transparent-hovered: var(
+	--db-warning-bg-basic-transparent-hovered
+);
+$db-warning-bg-basic-transparent-pressed: var(
+	--db-warning-bg-basic-transparent-pressed
+);
+$db-warning-on-bg-basic-emphasis-100-default: var(
+	--db-warning-on-bg-basic-emphasis-100-default
+);
+$db-warning-on-bg-basic-emphasis-100-hovered: var(
+	--db-warning-on-bg-basic-emphasis-100-hovered
+);
+$db-warning-on-bg-basic-emphasis-100-pressed: var(
+	--db-warning-on-bg-basic-emphasis-100-pressed
+);
+$db-warning-on-bg-basic-emphasis-90-default: var(
+	--db-warning-on-bg-basic-emphasis-90-default
+);
+$db-warning-on-bg-basic-emphasis-90-hovered: var(
+	--db-warning-on-bg-basic-emphasis-90-hovered
+);
+$db-warning-on-bg-basic-emphasis-90-pressed: var(
+	--db-warning-on-bg-basic-emphasis-90-pressed
+);
+$db-warning-on-bg-basic-emphasis-80-default: var(
+	--db-warning-on-bg-basic-emphasis-80-default
+);
+$db-warning-on-bg-basic-emphasis-80-hovered: var(
+	--db-warning-on-bg-basic-emphasis-80-hovered
+);
+$db-warning-on-bg-basic-emphasis-80-pressed: var(
+	--db-warning-on-bg-basic-emphasis-80-pressed
+);
+$db-warning-on-bg-basic-emphasis-70-default: var(
+	--db-warning-on-bg-basic-emphasis-70-default
+);
+$db-warning-on-bg-basic-emphasis-70-hovered: var(
+	--db-warning-on-bg-basic-emphasis-70-hovered
+);
+$db-warning-on-bg-basic-emphasis-70-pressed: var(
+	--db-warning-on-bg-basic-emphasis-70-pressed
+);
+$db-warning-on-bg-basic-emphasis-60-default: var(
+	--db-warning-on-bg-basic-emphasis-60-default
+);
+$db-warning-on-bg-basic-emphasis-60-hovered: var(
+	--db-warning-on-bg-basic-emphasis-60-hovered
+);
+$db-warning-on-bg-basic-emphasis-60-pressed: var(
+	--db-warning-on-bg-basic-emphasis-60-pressed
+);
+$db-warning-on-bg-basic-emphasis-50-default: var(
+	--db-warning-on-bg-basic-emphasis-50-default
+);
+$db-warning-on-bg-basic-emphasis-50-hovered: var(
+	--db-warning-on-bg-basic-emphasis-50-hovered
+);
+$db-warning-on-bg-basic-emphasis-50-pressed: var(
+	--db-warning-on-bg-basic-emphasis-50-pressed
+);
+$db-warning-bg-inverted-contrast-max-default: var(
+	--db-warning-bg-inverted-contrast-max-default
+);
+$db-warning-bg-inverted-contrast-max-hovered: var(
+	--db-warning-bg-inverted-contrast-max-hovered
+);
+$db-warning-bg-inverted-contrast-max-pressed: var(
+	--db-warning-bg-inverted-contrast-max-pressed
+);
+$db-warning-bg-inverted-contrast-high-default: var(
+	--db-warning-bg-inverted-contrast-high-default
+);
+$db-warning-bg-inverted-contrast-high-hovered: var(
+	--db-warning-bg-inverted-contrast-high-hovered
+);
+$db-warning-bg-inverted-contrast-high-pressed: var(
+	--db-warning-bg-inverted-contrast-high-pressed
+);
+$db-warning-bg-inverted-contrast-low-default: var(
+	--db-warning-bg-inverted-contrast-low-default
+);
+$db-warning-bg-inverted-contrast-low-hovered: var(
+	--db-warning-bg-inverted-contrast-low-hovered
+);
+$db-warning-bg-inverted-contrast-low-pressed: var(
+	--db-warning-bg-inverted-contrast-low-pressed
+);
+$db-warning-on-bg-inverted-default: var(--db-warning-on-bg-inverted-default);
+$db-warning-on-bg-inverted-hovered: var(--db-warning-on-bg-inverted-hovered);
+$db-warning-on-bg-inverted-pressed: var(--db-warning-on-bg-inverted-pressed);
+$db-warning-origin-default: var(--db-warning-origin-default);
+$db-warning-origin-hovered: var(--db-warning-origin-hovered);
+$db-warning-origin-pressed: var(--db-warning-origin-pressed);
+$db-warning-on-origin-default: var(--db-warning-on-origin-default);
+$db-warning-on-origin-hovered: var(--db-warning-on-origin-hovered);
+$db-warning-on-origin-pressed: var(--db-warning-on-origin-pressed);

package/build/styles/defaults/default-code.css

@@ -0,0 +1,93 @@
+blockquote{--db-adaptive-bg-basic-level-1-default:var(
+  	--db-neutral-bg-basic-level-1-default
+  );--db-adaptive-bg-basic-level-1-hovered:var(
+  	--db-neutral-bg-basic-level-1-hovered
+  );--db-adaptive-bg-basic-level-1-pressed:var(
+  	--db-neutral-bg-basic-level-1-pressed
+  );--db-adaptive-bg-basic-level-2-default:var(
+  	--db-neutral-bg-basic-level-2-default
+  );--db-adaptive-bg-basic-level-2-hovered:var(
+  	--db-neutral-bg-basic-level-2-hovered
+  );--db-adaptive-bg-basic-level-2-pressed:var(
+  	--db-neutral-bg-basic-level-2-pressed
+  );--db-adaptive-bg-basic-level-3-default:var(
+  	--db-neutral-bg-basic-level-3-default
+  );--db-adaptive-bg-basic-level-3-hovered:var(
+  	--db-neutral-bg-basic-level-3-hovered
+  );--db-adaptive-bg-basic-level-3-pressed:var(
+  	--db-neutral-bg-basic-level-3-pressed
+  );--db-adaptive-bg-basic-transparent-full-default:var(
+  	--db-neutral-bg-basic-transparent-full-default
+  );--db-adaptive-bg-basic-transparent-semi-default:var(
+  	--db-neutral-bg-basic-transparent-semi-default
+  );--db-adaptive-bg-basic-transparent-hovered:var(
+  	--db-neutral-bg-basic-transparent-hovered
+  );--db-adaptive-bg-basic-transparent-pressed:var(
+  	--db-neutral-bg-basic-transparent-pressed
+  );--db-adaptive-on-bg-basic-emphasis-100-default:var(
+  	--db-neutral-on-bg-basic-emphasis-100-default
+  );--db-adaptive-on-bg-basic-emphasis-100-hovered:var(
+  	--db-neutral-on-bg-basic-emphasis-100-hovered
+  );--db-adaptive-on-bg-basic-emphasis-100-pressed:var(
+  	--db-neutral-on-bg-basic-emphasis-100-pressed
+  );--db-adaptive-on-bg-basic-emphasis-90-default:var(
+  	--db-neutral-on-bg-basic-emphasis-90-default
+  );--db-adaptive-on-bg-basic-emphasis-90-hovered:var(
+  	--db-neutral-on-bg-basic-emphasis-90-hovered
+  );--db-adaptive-on-bg-basic-emphasis-90-pressed:var(
+  	--db-neutral-on-bg-basic-emphasis-90-pressed
+  );--db-adaptive-on-bg-basic-emphasis-80-default:var(
+  	--db-neutral-on-bg-basic-emphasis-80-default
+  );--db-adaptive-on-bg-basic-emphasis-80-hovered:var(
+  	--db-neutral-on-bg-basic-emphasis-80-hovered
+  );--db-adaptive-on-bg-basic-emphasis-80-pressed:var(
+  	--db-neutral-on-bg-basic-emphasis-80-pressed
+  );--db-adaptive-on-bg-basic-emphasis-70-default:var(
+  	--db-neutral-on-bg-basic-emphasis-70-default
+  );--db-adaptive-on-bg-basic-emphasis-70-hovered:var(
+  	--db-neutral-on-bg-basic-emphasis-70-hovered
+  );--db-adaptive-on-bg-basic-emphasis-70-pressed:var(
+  	--db-neutral-on-bg-basic-emphasis-70-pressed
+  );--db-adaptive-on-bg-basic-emphasis-60-default:var(
+  	--db-neutral-on-bg-basic-emphasis-60-default
+  );--db-adaptive-on-bg-basic-emphasis-60-hovered:var(
+  	--db-neutral-on-bg-basic-emphasis-60-hovered
+  );--db-adaptive-on-bg-basic-emphasis-60-pressed:var(
+  	--db-neutral-on-bg-basic-emphasis-60-pressed
+  );--db-adaptive-on-bg-basic-emphasis-50-default:var(
+  	--db-neutral-on-bg-basic-emphasis-50-default
+  );--db-adaptive-on-bg-basic-emphasis-50-hovered:var(
+  	--db-neutral-on-bg-basic-emphasis-50-hovered
+  );--db-adaptive-on-bg-basic-emphasis-50-pressed:var(
+  	--db-neutral-on-bg-basic-emphasis-50-pressed
+  );--db-adaptive-bg-inverted-contrast-max-default:var(
+  	--db-neutral-bg-inverted-contrast-max-default
+  );--db-adaptive-bg-inverted-contrast-max-hovered:var(
+  	--db-neutral-bg-inverted-contrast-max-hovered
+  );--db-adaptive-bg-inverted-contrast-max-pressed:var(
+  	--db-neutral-bg-inverted-contrast-max-pressed
+  );--db-adaptive-bg-inverted-contrast-high-default:var(
+  	--db-neutral-bg-inverted-contrast-high-default
+  );--db-adaptive-bg-inverted-contrast-high-hovered:var(
+  	--db-neutral-bg-inverted-contrast-high-hovered
+  );--db-adaptive-bg-inverted-contrast-high-pressed:var(
+  	--db-neutral-bg-inverted-contrast-high-pressed
+  );--db-adaptive-bg-inverted-contrast-low-default:var(
+  	--db-neutral-bg-inverted-contrast-low-default
+  );--db-adaptive-bg-inverted-contrast-low-hovered:var(
+  	--db-neutral-bg-inverted-contrast-low-hovered
+  );--db-adaptive-bg-inverted-contrast-low-pressed:var(
+  	--db-neutral-bg-inverted-contrast-low-pressed
+  );--db-adaptive-on-bg-inverted-default:var(
+  	--db-neutral-on-bg-inverted-default
+  );--db-adaptive-on-bg-inverted-hovered:var(
+  	--db-neutral-on-bg-inverted-hovered
+  );--db-adaptive-on-bg-inverted-pressed:var(
+  	--db-neutral-on-bg-inverted-pressed
+  );--db-adaptive-origin-default:var(--db-neutral-origin-default);--db-adaptive-origin-hovered:var(--db-neutral-origin-hovered);--db-adaptive-origin-pressed:var(--db-neutral-origin-pressed);--db-adaptive-on-origin-default:var(
+  	--db-neutral-on-origin-default
+  );--db-adaptive-on-origin-hovered:var(
+  	--db-neutral-on-origin-hovered
+  );--db-adaptive-on-origin-pressed:var(
+  	--db-neutral-on-origin-pressed
+  );background-color:var(--db-neutral-bg-basic-transparent-semi-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}blockquote:after,blockquote:before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}pre:has(code){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding:var(--db-spacing-fixed-xs)}a:has(code){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default)}a:has(code):hover:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-hovered);cursor:pointer}a:has(code):hover:not(:disabled,[aria-disabled=true]):is(input),a:has(code):hover:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code):hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code):hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code):active:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-pressed);cursor:pointer}a:has(code):active:not(:disabled,[aria-disabled=true]):is(input),a:has(code):active:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code):active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code):active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code)>code{color:inherit}code{background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding-block:var(--db-spacing-fixed-3xs);padding-inline:var(--db-spacing-fixed-2xs)}blockquote{margin:0;padding:var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md)}

package/build/styles/defaults/default-code.scss

@@ -0,0 +1,42 @@
+/* Use this file if you want to use the defaults for the <code> tag in your project */
+
+@use "../colors";
+@use "../variables";
+@use "../helpers";
+
+pre:has(code) {
+	background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+	color: colors.$db-adaptive-on-bg-inverted-default;
+	padding: variables.$db-spacing-fixed-xs;
+}
+
+a:has(code) {
+	background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+	color: colors.$db-adaptive-on-bg-inverted-default;
+
+	@include helpers.hover {
+		color: #{colors.$db-adaptive-on-bg-inverted-hovered};
+	}
+
+	@include helpers.active {
+		color: #{colors.$db-adaptive-on-bg-inverted-pressed};
+	}
+
+	> code {
+		color: inherit;
+	}
+}
+
+code {
+	background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+	color: colors.$db-adaptive-on-bg-inverted-default;
+	padding-block: variables.$db-spacing-fixed-3xs;
+	padding-inline: variables.$db-spacing-fixed-2xs;
+}
+
+blockquote {
+	@extend %db-neutral-bg-basic-transparent-semi;
+
+	margin: 0;
+	padding: variables.$db-spacing-fixed-sm variables.$db-spacing-fixed-md;
+}

package/build/styles/defaults/default-elevation.css

@@ -0,0 +1 @@
+.db-interactive-elevation,[data-interactive=elevation]{box-shadow:var(--db-elevation-md);cursor:pointer}@media screen and (prefers-reduced-motion:no-preference){.db-interactive-elevation,[data-interactive=elevation]{transition:box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional)}}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]){box-shadow:var(--db-elevation-lg);cursor:pointer}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(input),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(textarea),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(input),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]){box-shadow:var(--db-elevation-sm);cursor:pointer}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(input),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(textarea),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(input),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}

package/build/styles/defaults/default-elevation.scss

@@ -0,0 +1,22 @@
+/* Use this file if you want the default elevation data attributes in your project */
+@use "../helpers";
+@use "../variables";
+
+.db-interactive-elevation,
+[data-interactive="elevation"] {
+	cursor: pointer;
+	box-shadow: variables.$db-elevation-md;
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		transition: box-shadow variables.$db-transition-duration-fast
+			variables.$db-transition-timing-functional;
+	}
+
+	@include helpers.hover {
+		box-shadow: variables.$db-elevation-lg;
+	}
+
+	@include helpers.active {
+		box-shadow: variables.$db-elevation-sm;
+	}
+}

package/build/styles/defaults/default-fonts.css

@@ -0,0 +1,25 @@
+code,small{--db-icon-font-weight:var(--db-base-body-icon-weight-sm);--db-icon-font-size:var(--db-base-body-icon-font-size-sm);--db-base-line-height:var(--db-type-body-line-height-sm);--db-base-font-size:var(--db-type-body-font-size-sm);font-size:var(--db-type-body-font-size-sm);line-height:var(--db-type-body-line-height-sm)}:is(h1,h2,h3,h4,h5,h6){font-family:var(--db-font-family-head);font-weight:700;text-wrap:balance}:is(h1,h2,h3,h4,h5,h6)[data-variant=light]{font-weight:300}:is(h1,h2,h3,h4,h5,h6)[data-variant=regular]{font-weight:400}h1{font-size:var(--db-type-headline-font-size-xl);line-height:var(--db-type-headline-line-height-xl);margin-block:var(--db-spacing-fixed-xl)}h1:after,h1:before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-xl
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-xl
+  )}h2{font-size:var(--db-type-headline-font-size-lg);line-height:var(--db-type-headline-line-height-lg);margin-block:var(--db-spacing-fixed-lg)}h2:after,h2:before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-lg
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-lg
+  )}h3{font-size:var(--db-type-headline-font-size-md);line-height:var(--db-type-headline-line-height-md);margin-block:var(--db-spacing-fixed-md)}h3:after,h3:before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-md
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-md
+  )}h4{font-size:var(--db-type-headline-font-size-sm);line-height:var(--db-type-headline-line-height-sm);margin-block:var(--db-spacing-fixed-sm)}h4:after,h4:before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-sm
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-sm
+  )}h5{font-size:var(--db-type-headline-font-size-xs);line-height:var(--db-type-headline-line-height-xs);margin-block:var(--db-spacing-fixed-xs)}h5:after,h5:before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-xs
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-xs
+  )}h6{font-size:var(--db-type-headline-font-size-2xs);line-height:var(--db-type-headline-line-height-2xs);margin-block:var(--db-spacing-fixed-2xs)}h6:after,h6:before{--db-icon-font-size:var(
+  	--db-base-headline-icon-font-size-2xs
+  );--db-icon-font-weight:var(
+  	--db-base-headline-icon-weight-2xs
+  )}p{margin-block:var(--db-spacing-fixed-md)}[data-font=digital]{font-weight:300}[data-font=regular]{font-weight:400}[data-font=medium]{font-weight:500}[data-font=semibold]{font-weight:600}[data-font=bold],strong{font-weight:700}

package/build/styles/defaults/default-fonts.scss

@@ -0,0 +1,79 @@
+/* Use this file if you want the default fonts for paragraph and headlines in your project */
+@use "sass:string";
+@use "../variables";
+@use "../fonts";
+
+small,
+code {
+	@extend %db-overwrite-font-size-sm;
+}
+
+$headlines: (
+	"h1": "xl",
+	"h2": "lg",
+	"h3": "md",
+	"h4": "sm",
+	"h5": "xs",
+	"h6": "2xs"
+);
+
+:is(h1, h2, h3, h4, h5, h6) {
+	font-family: var(--db-font-family-head);
+	font-weight: 700;
+	text-wrap: balance;
+
+	&[data-variant="light"] {
+		font-weight: 300;
+	}
+
+	&[data-variant="regular"] {
+		font-weight: 400;
+	}
+}
+
+@each $headline, $size in $headlines {
+	#{string.unquote($headline)} {
+		/* stylelint-disable custom-property-pattern */
+		line-height: var(
+			--db-type-headline-line-height-#{string.unquote($size)}
+		);
+		font-size: var(--db-type-headline-font-size-#{string.unquote($size)});
+		margin-block: var(--db-spacing-fixed-#{string.unquote($size)});
+
+		&::before,
+		&::after {
+			--db-icon-font-size: var(
+				--db-base-headline-icon-font-size-#{string.unquote($size)}
+			);
+			--db-icon-font-weight: var(
+				--db-base-headline-icon-weight-#{string.unquote($size)}
+			);
+		}
+		/* stylelint-enable custom-property-pattern */
+	}
+}
+
+p {
+	margin-block: variables.$db-spacing-fixed-md;
+}
+
+[data-font="digital"] {
+	font-weight: 300;
+}
+
+[data-font="regular"] {
+	font-weight: 400;
+}
+
+[data-font="medium"] {
+	font-weight: 500;
+}
+
+[data-font="semibold"] {
+	font-weight: 600;
+}
+
+[data-font="bold"],
+strong {
+	font-weight: 700;
+}

package/build/styles/defaults/default-icons.css

@@ -0,0 +1 @@
+[data-icon-after]:after,[data-icon-before]:before,[data-icon]:before{content:var(--db-icon,attr(data-icon));content:var(--db-icon,attr(data-icon))/"";-webkit-alt:"";alt:"";color:var(--db-icon-color,inherit);display:inline-block;font-family:var(--db-icon-font-family,var(--db-icon-default-font-family,"db-ux-default"))!important;font-size:var(--db-icon-font-size,1.5rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-variant:normal;font-weight:var(--db-icon-font-weight,normal);line-height:1;speak:none;speak:never;block-size:var(--db-icon-font-size,1.5rem);inline-size:var(--db-icon-font-size,1.5rem);text-transform:none;vertical-align:middle}@media aural{[data-icon-after]:after,[data-icon-before]:before,[data-icon]:before{content:none}}@media speech{[data-icon-after]:after,[data-icon-before]:before,[data-icon]:before{content:none}}[data-icon-after]:is(span),[data-icon-before]:is(span),[data-icon]:is(span){display:inline-flex;vertical-align:baseline}[data-icon-before]:before,[data-icon]:before{margin-inline-end:var(--db-icon-margin-end,var(--db-spacing-fixed-xs))}[data-hide-icon-before=true]:before,[data-hide-icon=true]:before,[data-icon-before=none]:before,[data-icon=none]:before{content:none}[data-icon-after]:after{content:var(--db-icon-after,attr(data-icon-after));content:var(--db-icon-after,attr(data-icon-after))/"";margin-inline-start:var(--db-icon-margin-start,var(--db-spacing-fixed-xs))}[data-hide-icon-after=true]:after,[data-icon-after=none]:after{content:none}.is-icon-text-replace[data-icon-before],.is-icon-text-replace[data-icon]{font-size:0!important}.is-icon-text-replace[data-icon-before]:before,.is-icon-text-replace[data-icon]:before{--db-icon-margin-end:0}.is-icon-text-replace[data-icon-after]{font-size:0!important}.is-icon-text-replace[data-icon-after]:after{--db-icon-margin-start:0}

package/build/styles/defaults/default-icons.scss

@@ -0,0 +1,57 @@
+@use "../icons";
+
+[data-icon],
+[data-icon-before],
+[data-icon-after] {
+	&:is(span) {
+		display: inline-flex;
+		vertical-align: baseline;
+	}
+}
+
+[data-icon],
+[data-icon-before] {
+	&::before {
+		@extend %icon !optional;
+
+		margin-inline-end: icons.$default-icon-margin-end;
+	}
+}
+
+[data-hide-icon="true"],
+[data-hide-icon-before="true"],
+[data-icon="none"],
+[data-icon-before="none"] {
+	&::before {
+		content: none;
+	}
+}
+
+[data-icon-after] {
+	&::after {
+		@extend %icon !optional;
+
+		@include icons.icon-content(icons.$default-icon-content-after);
+
+		margin-inline-start: icons.$default-icon-margin-start;
+	}
+}
+
+[data-hide-icon-after="true"],
+[data-icon-after="none"] {
+	&::after {
+		content: none;
+	}
+}
+
+// Providing a mechanism for text replacements
+.is-icon-text-replace {
+	&[data-icon],
+	&[data-icon-before] {
+		@include icons.is-icon-text-replace();
+	}
+
+	&[data-icon-after] {
+		@include icons.is-icon-text-replace("after");
+	}
+}

package/build/styles/defaults/default-required.css

@@ -0,0 +1 @@
+@charset "UTF-8";:is(a,button,input,textarea,summary,select,[tabindex]:not([tabindex="-1"])):focus-visible{box-shadow:0 0 0 var(--db-border-height-xs) var(--db-focus-box-shadow-bg-color,transparent);outline:var(--db-border-height-2xs) solid var(--db-focus-outline-color,var(--db-informational-on-bg-basic-emphasis-80-default));outline-offset:var(--db-border-height-xs)}:not([type=radio],[role=switch]):is(a,button,input,textarea,summary,select,[tabindex]:not([tabindex="-1"])):focus-visible{border-radius:var(--db-border-radius-xs)}@media screen and (prefers-reduced-motion:no-preference){:is(a,button,input,textarea,summary,select,[tabindex]:not([tabindex="-1"])):focus-visible{transition:outline var(--db-transition-duration-extra-fast),box-shadow var(--db-transition-duration-extra-fast)}}:root{font-size:var(--db-type-body-font-size-md);line-height:var(--db-type-body-line-height-md)}:where(html){line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}:root{--db-breakpoint-xs:22.5em;--db-breakpoint-sm:45em;--db-breakpoint-md:64em;--db-breakpoint-lg:90em}body,html{margin:0;padding:0}#app,#root,body{block-size:inherit}body{font-family:var(--db-font-family-sans)}html{box-sizing:var(--db-box-sizing,border-box)}*{font-family:inherit;font-size:inherit;line-height:inherit}*,:after,:before{box-sizing:inherit}a,body,button,input,select,summary,textarea{color:inherit}embed,iframe,img,object,video{block-size:auto;max-inline-size:100%}iframe{border:0}:where(ul){list-style-type:"• ";padding-inline-start:var(--db-spacing-fixed-md)}:where(ul) li::marker{color:var(--db-brand-origin-default)}[role=navigation] ol,[role=navigation] ul,nav ol,nav ul{list-style-type:"";margin:0;padding:0}fieldset{border:0}details>*,details>:after,details>:before{box-sizing:var(--db-box-sizing,border-box)}