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

package/build/styles/fonts/classes/headline/xs.scss

@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "xs";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}

package/build/styles/fonts/relative.css

@@ -0,0 +1 @@
+@font-face{font-family:OpenSans;font-style:normal;font-weight:300;src:url(../assets/fonts/OpenSans-Light-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:400;src:url(../assets/fonts/OpenSans-Regular-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:500;src:url(../assets/fonts/OpenSans-Medium-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:600;src:url(../assets/fonts/OpenSans-SemiBold-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:700;src:url(../assets/fonts/OpenSans-Bold-EU.woff2) format("woff2")}@font-face{font-family:OpenSans Head;font-style:normal;font-weight:300;src:url(../assets/fonts/OpenSans-Light-EU.woff2) format("woff2")}@font-face{font-family:OpenSans Head;font-style:normal;font-weight:900;src:url(../assets/fonts/OpenSans-ExtraBold-EU.woff2) format("woff2")}

package/build/styles/fonts/relative.scss

@@ -0,0 +1,57 @@
+@use "../default.assets-paths" as assets-paths;
+
+@font-face {
+	font-family: OpenSans;
+	font-style: normal;
+	font-weight: 300;
+	src: url("#{assets-paths.$fonts-path}OpenSans-Light-EU.woff2")
+		format("woff2");
+}
+
+@font-face {
+	font-family: OpenSans;
+	font-style: normal;
+	font-weight: 400;
+	src: url("#{assets-paths.$fonts-path}OpenSans-Regular-EU.woff2")
+		format("woff2");
+}
+
+@font-face {
+	font-family: OpenSans;
+	font-style: normal;
+	font-weight: 500;
+	src: url("#{assets-paths.$fonts-path}OpenSans-Medium-EU.woff2")
+		format("woff2");
+}
+
+@font-face {
+	font-family: OpenSans;
+	font-style: normal;
+	font-weight: 600;
+	src: url("#{assets-paths.$fonts-path}OpenSans-SemiBold-EU.woff2")
+		format("woff2");
+}
+
+@font-face {
+	font-family: OpenSans;
+	font-style: normal;
+	font-weight: 700;
+	src: url("#{assets-paths.$fonts-path}OpenSans-Bold-EU.woff2")
+		format("woff2");
+}
+
+@font-face {
+	font-family: "OpenSans Head";
+	font-style: normal;
+	font-weight: 300;
+	src: url("#{assets-paths.$fonts-path}OpenSans-Light-EU.woff2")
+		format("woff2");
+}
+
+@font-face {
+	font-family: "OpenSans Head";
+	font-style: normal;
+	font-weight: 900;
+	src: url("#{assets-paths.$fonts-path}OpenSans-ExtraBold-EU.woff2")
+		format("woff2");
+}

package/build/styles/fonts/rollup.css

@@ -0,0 +1 @@
+@font-face{font-family:OpenSans;font-style:normal;font-weight:300;src:url(@db-ux/core-foundations/assets/fonts/OpenSans-Light-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:400;src:url(@db-ux/core-foundations/assets/fonts/OpenSans-Regular-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:500;src:url(@db-ux/core-foundations/assets/fonts/OpenSans-Medium-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:600;src:url(@db-ux/core-foundations/assets/fonts/OpenSans-SemiBold-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:700;src:url(@db-ux/core-foundations/assets/fonts/OpenSans-Bold-EU.woff2) format("woff2")}@font-face{font-family:OpenSans Head;font-style:normal;font-weight:300;src:url(@db-ux/core-foundations/assets/fonts/OpenSans-Light-EU.woff2) format("woff2")}@font-face{font-family:OpenSans Head;font-style:normal;font-weight:900;src:url(@db-ux/core-foundations/assets/fonts/OpenSans-ExtraBold-EU.woff2) format("woff2")}

package/build/styles/fonts/rollup.scss

@@ -0,0 +1,3 @@
+@use "../rollup.assets-paths";
+
+@forward "./relative";

package/build/styles/fonts/webpack.css

@@ -0,0 +1 @@
+@font-face{font-family:OpenSans;font-style:normal;font-weight:300;src:url(~@db-ux/core-foundations/assets/fonts/OpenSans-Light-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:400;src:url(~@db-ux/core-foundations/assets/fonts/OpenSans-Regular-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:500;src:url(~@db-ux/core-foundations/assets/fonts/OpenSans-Medium-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:600;src:url(~@db-ux/core-foundations/assets/fonts/OpenSans-SemiBold-EU.woff2) format("woff2")}@font-face{font-family:OpenSans;font-style:normal;font-weight:700;src:url(~@db-ux/core-foundations/assets/fonts/OpenSans-Bold-EU.woff2) format("woff2")}@font-face{font-family:OpenSans Head;font-style:normal;font-weight:300;src:url(~@db-ux/core-foundations/assets/fonts/OpenSans-Light-EU.woff2) format("woff2")}@font-face{font-family:OpenSans Head;font-style:normal;font-weight:900;src:url(~@db-ux/core-foundations/assets/fonts/OpenSans-ExtraBold-EU.woff2) format("woff2")}

package/build/styles/fonts/webpack.scss

@@ -0,0 +1,3 @@
+@use "../webpack.assets-paths";
+
+@forward "./relative";

package/build/styles/helpers/_a11y.scss

@@ -0,0 +1,17 @@
+%a11y-visually-hidden {
+	clip: rect(0, 0, 0, 0) !important;
+	overflow: hidden !important;
+	white-space: nowrap !important;
+	font-size: 0 !important;
+	all: initial;
+	inset-block-start: 0 !important;
+	block-size: 1px !important;
+	position: absolute !important;
+	inline-size: 1px !important;
+	border-width: 0 !important;
+	border-style: initial !important;
+	border-color: initial !important;
+	border-image: initial !important;
+	padding: 0 !important;
+	pointer-events: none !important;
+}

package/build/styles/helpers/_clearfix.scss

@@ -0,0 +1,5 @@
+%clearfix::after {
+	clear: both;
+	content: " ";
+	display: table;
+}

package/build/styles/helpers/_divider.scss

@@ -0,0 +1,50 @@
+@use "../colors";
+@use "../variables";
+
+// Workaround until we get Relative Color Syntax
+// https://codepen.io/bramus/pen/VwMZOQK
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1274133
+// https://github.com/WebKit/WebKit/commit/1890bfb551da24735804cb1a3d5f14b210f7c7b8
+@mixin divider($position: "top", $slot: "before") {
+	--db-divider-bg-color: #{colors.$db-adaptive-on-bg-basic-emphasis-60-default};
+
+	position: relative;
+
+	&[data-emphasis="strong"] {
+		--db-divider-bg-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
+	}
+
+	&::#{$slot} {
+		content: "";
+		background-color: var(--db-divider-bg-color);
+		position: absolute;
+
+		@if $position == "top" {
+			block-size: variables.$db-border-height-3xs;
+			inset-block-start: 0;
+			inset-inline: 0;
+			/* stylelint-disable-next-line at-rule-empty-line-before */
+		} @else if $position == "bottom" {
+			block-size: variables.$db-border-height-3xs;
+			inset-block-end: 0;
+			inset-inline: 0;
+			/* stylelint-disable-next-line at-rule-empty-line-before */
+		} @else if $position == "left" {
+			inline-size: variables.$db-border-height-3xs;
+			inset-inline-start: 0;
+			inset-block: 0;
+			/* stylelint-disable-next-line at-rule-empty-line-before */
+		} @else if $position == "right" {
+			inline-size: variables.$db-border-height-3xs;
+			inset-inline-end: 0;
+			inset-block: 0;
+		}
+	}
+
+	@media (forced-colors: active) {
+		// border is the better implementation, but border height changes in windows based on pixel density
+		// we use it as a fallback for color contrast
+		/* stylelint-disable-next-line db-ux/use-border-color */
+		border: variables.$db-border-height-3xs solid var(--db-divider-bg-color);
+	}
+}

package/build/styles/helpers/_focus.scss

@@ -0,0 +1,23 @@
+@use "../variables";
+@use "../colors";
+
+%focus-placeholder {
+	outline: #{variables.$db-border-height-2xs} solid
+		var(
+			--db-focus-outline-color,
+			#{colors.$db-informational-on-bg-basic-emphasis-80-default}
+		);
+	outline-offset: variables.$db-border-height-xs;
+	box-shadow: 0 0 0 #{variables.$db-border-height-xs}
+		var(--db-focus-box-shadow-bg-color, transparent);
+
+	&:not([type="radio"], [role="switch"]) {
+		border-radius: variables.$db-border-radius-xs;
+	}
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		transition:
+			outline #{variables.$db-transition-duration-extra-fast},
+			box-shadow #{variables.$db-transition-duration-extra-fast};
+	}
+}

package/build/styles/helpers/_functions.scss

@@ -0,0 +1,44 @@
+@use "sass:math";
+@use "a11y";
+@use "clearfix";
+
+@function px-to-rem($pxValue) {
+	@return #{$pxValue * 0.0625}rem;
+}
+
+@function px-to-em($pxValue) {
+	@return #{$pxValue * 0.0625}em;
+}
+
+@mixin cursor-pointer() {
+	cursor: pointer;
+
+	&:is(textarea),
+	&:is(input) {
+		cursor: initial;
+	}
+
+	&:is(input[type="checkbox"]),
+	&:is(input[type="radio"]:not(:checked)) {
+		cursor: pointer;
+	}
+
+	@content;
+}
+
+@mixin hover() {
+	/* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+	&:hover:not(:disabled, [aria-disabled="true"]) {
+		@include cursor-pointer() {
+			@content;
+		}
+	}
+}
+
+@mixin active() {
+	&:active:not(:disabled, [aria-disabled="true"]) {
+		@include cursor-pointer() {
+			@content;
+		}
+	}
+}

package/build/styles/helpers/_index.scss

@@ -0,0 +1,6 @@
+@forward "functions";
+@forward "a11y";
+@forward "clearfix";
+@forward "shadow-dom";
+@forward "focus";
+@forward "divider";

package/build/styles/helpers/_shadow-dom.scss

@@ -0,0 +1,5 @@
+%shadow-dom-extend {
+	font-family: inherit;
+	line-height: inherit;
+	font-size: inherit;
+}

package/build/styles/helpers/classes/all.css

@@ -0,0 +1,238 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Transitions */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-focus-default,
+[data-focus=default] {
+  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);
+  box-shadow: 0 0 0 var(--db-border-height-xs) var(--db-focus-box-shadow-bg-color, transparent);
+}
+.db-focus-default:not([type=radio], [role=switch]),
+[data-focus=default]:not([type=radio], [role=switch]) {
+  border-radius: var(--db-border-radius-xs);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-focus-default,
+  [data-focus=default] {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
+  }
+}
+
+.db-divider-top-before,
+[data-divider=top-before] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
+}
+.db-divider-top-before[data-emphasis=strong],
+[data-divider=top-before][data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-divider-top-before::before,
+[data-divider=top-before]::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  block-size: var(--db-border-height-3xs);
+  inset-block-start: 0;
+  inset-inline: 0;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media (forced-colors: active) {
+  .db-divider-top-before,
+  [data-divider=top-before] {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+  }
+}
+
+.db-divider-top-after,
+[data-divider=top-after] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
+}
+.db-divider-top-after[data-emphasis=strong],
+[data-divider=top-after][data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-divider-top-after::after,
+[data-divider=top-after]::after {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  block-size: var(--db-border-height-3xs);
+  inset-block-start: 0;
+  inset-inline: 0;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media (forced-colors: active) {
+  .db-divider-top-after,
+  [data-divider=top-after] {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+  }
+}
+
+.db-divider-bottom-before,
+[data-divider=bottom-before] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
+}
+.db-divider-bottom-before[data-emphasis=strong],
+[data-divider=bottom-before][data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-divider-bottom-before::before,
+[data-divider=bottom-before]::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  block-size: var(--db-border-height-3xs);
+  inset-block-end: 0;
+  inset-inline: 0;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media (forced-colors: active) {
+  .db-divider-bottom-before,
+  [data-divider=bottom-before] {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+  }
+}
+
+.db-divider-bottom-after,
+[data-divider=bottom-after] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
+}
+.db-divider-bottom-after[data-emphasis=strong],
+[data-divider=bottom-after][data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-divider-bottom-after::after,
+[data-divider=bottom-after]::after {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  block-size: var(--db-border-height-3xs);
+  inset-block-end: 0;
+  inset-inline: 0;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media (forced-colors: active) {
+  .db-divider-bottom-after,
+  [data-divider=bottom-after] {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+  }
+}
+
+.db-divider-left-before,
+[data-divider=left-before] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
+}
+.db-divider-left-before[data-emphasis=strong],
+[data-divider=left-before][data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-divider-left-before::before,
+[data-divider=left-before]::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  inline-size: var(--db-border-height-3xs);
+  inset-inline-start: 0;
+  inset-block: 0;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media (forced-colors: active) {
+  .db-divider-left-before,
+  [data-divider=left-before] {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+  }
+}
+
+.db-divider-left-after,
+[data-divider=left-after] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
+}
+.db-divider-left-after[data-emphasis=strong],
+[data-divider=left-after][data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-divider-left-after::after,
+[data-divider=left-after]::after {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  inline-size: var(--db-border-height-3xs);
+  inset-inline-start: 0;
+  inset-block: 0;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+@media (forced-colors: active) {
+  .db-divider-left-after,
+  [data-divider=left-after] {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+  }
+}
+
+.db-divider-right-before,
+[data-divider=right-before] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
+}
+.db-divider-right-before[data-emphasis=strong],
+[data-divider=right-before][data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-divider-right-before::before,
+[data-divider=right-before]::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  inline-size: var(--db-border-height-3xs);
+  inset-inline-end: 0;
+  inset-block: 0;
+}
+@media (forced-colors: active) {
+  .db-divider-right-before,
+  [data-divider=right-before] {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+  }
+}
+
+.db-divider-right-after,
+[data-divider=right-after] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: relative;
+}
+.db-divider-right-after[data-emphasis=strong],
+[data-divider=right-after][data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-divider-right-after::after,
+[data-divider=right-after]::after {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  inline-size: var(--db-border-height-3xs);
+  inset-inline-end: 0;
+  inset-block: 0;
+}
+@media (forced-colors: active) {
+  .db-divider-right-after,
+  [data-divider=right-after] {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
+  }
+}

package/build/styles/helpers/classes/all.scss

@@ -0,0 +1,2 @@
+@forward "focus";
+@forward "divider";