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

package/build/components/brand/brand.css

@@ -0,0 +1,42 @@
+/* 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, ... */
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-brand {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+  --db-base-line-height: var(--db-type-body-line-height-md);
+  --db-base-font-size: var(--db-type-body-font-size-md);
+  line-height: var(--db-type-body-line-height-md);
+  font-size: var(--db-type-body-font-size-md);
+}
+
+.db-brand {
+  display: flex;
+  gap: var(--db-spacing-fixed-sm);
+  align-items: center;
+  font-weight: 700;
+}
+.db-brand::before {
+  --db-icon-font-size: var(--db-sizing-md);
+  --db-icon-margin-end: 0;
+  --db-icon-color: var(--db-brand-origin-default);
+}
+.db-brand img {
+  inline-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
+  max-block-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
+}
+.db-brand a {
+  text-decoration: none;
+}

package/build/components/brand/brand.scss

@@ -0,0 +1,32 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/fonts";
+
+.db-brand {
+	@extend %db-overwrite-font-size-md;
+
+	display: flex;
+	gap: variables.$db-spacing-fixed-sm;
+	align-items: center;
+	font-weight: 700;
+
+	&::before {
+		--db-icon-font-size: #{variables.$db-sizing-md};
+		--db-icon-margin-end: 0;
+		--db-icon-color: #{colors.$db-brand-origin-default};
+	}
+
+	img {
+		$logo-size: calc(
+			#{variables.$db-sizing-md} - #{variables.$db-sizing-3xs}
+		);
+
+		inline-size: $logo-size;
+		max-block-size: $logo-size;
+	}
+
+	// Deactivate underline on site name being made clickable by added to the link as well
+	a {
+		text-decoration: none;
+	}
+}

package/build/components/button/button.css

@@ -0,0 +1,165 @@
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+.db-button {
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+  --db-base-line-height: var(--db-type-body-line-height-md);
+  --db-base-font-size: var(--db-type-body-font-size-md);
+  line-height: var(--db-type-body-line-height-md);
+  font-size: var(--db-type-body-font-size-md);
+}
+
+.db-button[data-size=small] {
+  /* Those variables are only for components to calculate heights and change icons */
+  --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);
+  line-height: var(--db-type-body-line-height-sm);
+  font-size: var(--db-type-body-font-size-sm);
+}
+
+/* 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-button {
+  border: var(--db-border-height-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
+}
+
+.db-button[data-variant=filled], .db-button[data-variant=ghost] {
+  border: var(--db-border-height-3xs) solid transparent;
+}
+
+.db-button {
+  border-radius: var(--db-border-radius-xs);
+}
+
+.db-button {
+  font-weight: 700;
+  white-space: nowrap;
+  justify-content: center;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+}
+
+.db-button {
+  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  block-size: var(--db-sizing-md);
+  inline-size: fit-content;
+  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-md);
+  text-decoration: none;
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-button:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
+}
+.db-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-button:active:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
+}
+.db-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-button[data-no-text=true] {
+  font-size: 0 !important;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  padding: 0;
+  inline-size: var(--db-sizing-md);
+}
+.db-button[data-no-text=true]::before {
+  --db-icon-margin-end: 0;
+}
+.db-button[data-no-text=true]::before {
+  margin: auto;
+}
+.db-button[data-size=small] {
+  block-size: var(--db-sizing-sm);
+}
+.db-button[data-size=small]:not([data-no-text=true]) {
+  padding: var(--db-spacing-fixed-3xs) var(--db-spacing-fixed-sm);
+}
+.db-button[data-size=small]:not([data-no-text=true])::before {
+  margin-inline-end: var(--db-spacing-fixed-2xs);
+}
+.db-button[data-size=small][data-no-text=true] {
+  inline-size: var(--db-sizing-sm);
+}
+.db-button[data-width=full] {
+  inline-size: 100%;
+}
+.db-button[data-variant=brand] {
+  background-color: var(--db-brand-origin-default);
+  color: var(--db-brand-on-origin-default);
+  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-brand-origin-hovered);
+  border-color: var(--db-brand-on-bg-basic-emphasis-70-hovered);
+}
+.db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-brand-origin-pressed);
+  border-color: var(--db-brand-on-bg-basic-emphasis-70-pressed);
+}
+.db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=ghost] {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+}
+.db-button[data-variant=filled] {
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
+}
+.db-button:disabled {
+  opacity: 0.4;
+}
+.db-button[data-state=loading] {
+  font-size: 0 !important;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  font-size: 0;
+}
+.db-button[data-state=loading]::before {
+  --db-icon-margin-end: 0;
+}
+.db-button[data-state=loading]::before {
+  content: "";
+}
+.db-button:has(> .db-button) {
+  margin: 0;
+  padding: 0;
+}
+.db-button:has(> .db-button)::before {
+  content: none;
+}

package/build/components/button/button.scss

@@ -0,0 +1,123 @@
+@charset "utf-8";
+
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/component";
+@use "../../styles/internal/button-components";
+
+.db-button {
+	@extend %default-interactive-component;
+	@extend %default-button;
+	@extend %db-overwrite-font-size-md;
+
+	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+	block-size: variables.$db-sizing-md;
+	inline-size: fit-content;
+	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
+
+	// disable text-decoration if someone wants to use the button for an <a> tag
+	text-decoration: none;
+
+	@include helpers.hover {
+		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
+	}
+
+	// Square icon only buttons
+	&[data-no-text="true"] {
+		@include icons.is-icon-text-replace();
+
+		padding: 0;
+		inline-size: variables.$db-sizing-md;
+
+		&::before {
+			margin: auto;
+		}
+	}
+
+	&[data-size="small"] {
+		@extend %db-overwrite-font-size-sm;
+
+		block-size: variables.$db-sizing-sm;
+
+		&:not([data-no-text="true"]) {
+			padding: variables.$db-spacing-fixed-3xs
+				variables.$db-spacing-fixed-sm;
+
+			&::before {
+				margin-inline-end: variables.$db-spacing-fixed-2xs;
+			}
+		}
+
+		// Square icon only buttons
+		&[data-no-text="true"] {
+			inline-size: variables.$db-sizing-sm;
+		}
+	}
+
+	&[data-width="full"] {
+		inline-size: 100%;
+	}
+
+	&[data-variant="brand"] {
+		background-color: colors.$db-brand-origin-default;
+		color: colors.$db-brand-on-origin-default;
+		border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
+
+		@include helpers.hover {
+			background-color: colors.$db-brand-origin-hovered;
+			border-color: colors.$db-brand-on-bg-basic-emphasis-70-hovered;
+		}
+
+		@include helpers.active {
+			background-color: colors.$db-brand-origin-pressed;
+			border-color: colors.$db-brand-on-bg-basic-emphasis-70-pressed;
+		}
+	}
+
+	&[data-variant="filled"],
+	&[data-variant="ghost"] {
+		@extend %transparent-border;
+	}
+
+	&[data-variant="outlined"],
+	&:not([data-variant]),
+	&[data-variant="ghost"] {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+	}
+
+	&[data-variant="filled"] {
+		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
+	}
+
+	&:disabled {
+		opacity: component.$default-disabled;
+	}
+
+	// States (currently only "loading")
+	&[data-state="loading"] {
+		@include icons.is-icon-text-replace();
+
+		font-size: 0;
+
+		&::before {
+			content: "";
+		}
+	}
+
+	// Workaround for current stencil implementation for header
+	&:has(> .db-button) {
+		margin: 0;
+		padding: 0;
+
+		&::before {
+			content: none;
+		}
+	}
+}

package/build/components/card/card.css

@@ -0,0 +1,115 @@
+/* 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-card {
+  border: var(--db-border-height-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+}
+
+.db-card {
+  /* stylelint-disable-next-line db-ux/use-border-radius */
+  border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
+}
+
+.db-card {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  display: flex;
+  flex-direction: column;
+}
+.db-card:not([data-spacing]) {
+  padding: var(--db-spacing-fixed-sm);
+}
+.db-card[data-spacing=large] {
+  padding: var(--db-spacing-fixed-lg);
+}
+.db-card[data-spacing=medium] {
+  padding: var(--db-spacing-fixed-md);
+}
+.db-card[data-spacing=small] {
+  padding: var(--db-spacing-fixed-sm);
+}
+.db-card[data-spacing=none] {
+  padding: 0;
+}
+.db-card[data-elevation-level="1"], .db-card:not([data-elevation-level]) {
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+.db-card[data-elevation-level="1"][data-behavior=interactive], .db-card:not([data-elevation-level])[data-behavior=interactive] {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
+}
+.db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="1"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card:not([data-elevation-level])[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
+}
+.db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="1"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card:not([data-elevation-level])[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-card[data-elevation-level="2"] {
+  background-color: var(--db-adaptive-bg-basic-level-2-default);
+}
+.db-card[data-elevation-level="2"][data-behavior=interactive] {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-level-2-hovered);
+}
+.db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="2"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-level-2-pressed);
+}
+.db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="2"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-card[data-elevation-level="3"] {
+  background-color: var(--db-adaptive-bg-basic-level-3-default);
+}
+.db-card[data-elevation-level="3"][data-behavior=interactive] {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-level-3-hovered);
+}
+.db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="3"][data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+  background-color: var(--db-adaptive-bg-basic-level-3-pressed);
+}
+.db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
+  cursor: initial;
+}
+.db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-elevation-level="3"][data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}

package/build/components/card/card.scss

@@ -0,0 +1,56 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/component";
+
+.db-card {
+	@extend %default-card;
+
+	@include component.get-data-spacing();
+
+	display: flex;
+	flex-direction: column;
+
+	&[data-elevation-level="1"],
+	&:not([data-elevation-level]) {
+		background-color: colors.$db-adaptive-bg-basic-level-1-default;
+
+		&[data-behavior="interactive"] {
+			@include helpers.hover {
+				background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
+			}
+
+			@include helpers.active {
+				background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
+			}
+		}
+	}
+
+	&[data-elevation-level="2"] {
+		background-color: colors.$db-adaptive-bg-basic-level-2-default;
+
+		&[data-behavior="interactive"] {
+			@include helpers.hover {
+				background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
+			}
+
+			@include helpers.active {
+				background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
+			}
+		}
+	}
+
+	&[data-elevation-level="3"] {
+		background-color: colors.$db-adaptive-bg-basic-level-3-default;
+
+		&[data-behavior="interactive"] {
+			@include helpers.hover {
+				background-color: colors.$db-adaptive-bg-basic-level-3-hovered;
+			}
+
+			@include helpers.active {
+				background-color: colors.$db-adaptive-bg-basic-level-3-pressed;
+			}
+		}
+	}
+}