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

package/build/styles/internal/_popover-component.scss

@@ -0,0 +1,213 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/animation";
+@use "component";
+
+$popover-gap-size: var(--db-popover-distance);
+$popover-inset: calc(100% + #{$popover-gap-size} * var(--db-popover-gap, 0));
+$popover-gap-inset: calc(-1 * #{$popover-gap-size});
+
+%popover-center {
+	&:not([data-placement]),
+	&[data-placement="bottom"]:not([data-outside-vy]),
+	&[data-placement="top"]:not([data-outside-vy]),
+	&:is([data-outside-vy="bottom"], [data-outside-vy="top"]):not(
+			[data-outside-vx],
+			[data-placement$="end"],
+			[data-placement$="start"]
+		) {
+		--db-popover-center-x: -50%;
+
+		inset-inline-start: 50%;
+	}
+
+	&[data-placement="left"]:not([data-outside-vx]),
+	&[data-placement="right"]:not([data-outside-vx]),
+	&[data-outside-vx="left"]:not(
+			[data-placement$="end"],
+			[data-placement$="start"]
+		),
+	&[data-outside-vx="right"]:not(
+			[data-placement$="end"],
+			[data-placement$="start"]
+		) {
+		--db-popover-center-y: -50%;
+
+		inset-block-start: 50%;
+	}
+}
+
+%popover-placement {
+	--db-popover-distance: #{variables.$db-spacing-fixed-2xs};
+
+	// This pseudo-content is used to bridge the visible vertical offset in between the element that it triggering the tooltip and the tooltip itself
+	&::before {
+		content: "";
+		position: absolute;
+	}
+
+	&[data-gap="true"] {
+		--db-popover-gap: 1;
+		--db-popover-distance: #{variables.$db-spacing-fixed-md};
+	}
+
+	&:is(.db-tooltip) {
+		--db-popover-distance: #{variables.$db-spacing-fixed-sm};
+	}
+
+	&[data-placement^="bottom"]:not([data-outside-vy]),
+	&[data-placement^="top"]:not([data-outside-vy]),
+	&[data-outside-vy="bottom"]:not([data-outside-vx]),
+	&[data-outside-vy="top"]:not([data-outside-vx]) {
+		&[data-placement$="end"] {
+			inset-inline-end: 0;
+		}
+
+		&[data-placement$="start"] {
+			inset-inline-start: 0;
+		}
+	}
+
+	&[data-placement^="left"]:not([data-outside-vx]),
+	&[data-placement^="right"]:not([data-outside-vx]),
+	&[data-outside-vx="left"],
+	&[data-outside-vx="right"] {
+		&[data-placement$="end"] {
+			inset-block-end: 0;
+		}
+
+		&[data-placement$="start"] {
+			inset-block-start: 0;
+		}
+	}
+
+	&:not([data-placement], [data-outside-vy]),
+	&[data-placement^="bottom"]:not([data-outside-vy]),
+	&[data-outside-vy="top"]:not([data-outside-vx]) {
+		inset-block-start: $popover-inset;
+
+		&::before {
+			inset-inline-start: 0;
+			inline-size: 100%;
+			block-size: $popover-gap-size;
+			inset-block-start: $popover-gap-inset;
+		}
+	}
+
+	&[data-placement^="top"]:not([data-outside-vy]),
+	&[data-outside-vy="bottom"]:not([data-outside-vx]) {
+		inset-block-end: $popover-inset;
+
+		&::before {
+			inset-inline-end: 0;
+			inline-size: 100%;
+			block-size: $popover-gap-size;
+			inset-block-end: $popover-gap-inset;
+		}
+	}
+
+	&[data-placement^="left"]:not([data-outside-vx]),
+	&[data-outside-vx="right"] {
+		inset-inline-end: $popover-inset;
+
+		&::before {
+			inset-block-end: 0;
+			block-size: 100%;
+			inline-size: $popover-gap-size;
+			inset-inline-end: $popover-gap-inset;
+		}
+	}
+
+	&[data-placement^="right"]:not([data-outside-vx]),
+	&[data-outside-vx="left"] {
+		inset-inline-start: $popover-inset;
+
+		&::before {
+			inset-block-start: 0;
+			block-size: 100%;
+			inline-size: $popover-gap-size;
+			inset-inline-start: $popover-gap-inset;
+		}
+	}
+}
+
+@mixin get-popover-show() {
+	&:not([data-animation]),
+	&[data-animation="false"] {
+		opacity: 1;
+		transform: translate(
+			var(--db-popover-center-x, 0),
+			var(--db-popover-center-y, 0)
+		);
+	}
+
+	@media screen and (prefers-reduced-motion: no-preference) {
+		&[data-animation="true"] {
+			animation: popover-animation
+				#{variables.$db-transition-straight-emotional} normal both;
+
+			&[data-delay="slow"] {
+				animation-delay: variables.$db-transition-duration-fast;
+			}
+
+			&[data-delay="fast"] {
+				animation-delay: calc(
+					#{variables.$db-transition-duration-fast} / 2
+				);
+			}
+		}
+	}
+}
+
+%show-popover {
+	display: revert;
+
+	&:not([data-placement], [data-outside-vy]),
+	&[data-placement^="bottom"]:not([data-outside-vy]),
+	&[data-outside-vy="top"]:not([data-outside-vx]) {
+		--db-popover-translate-y: -25%;
+
+		@include get-popover-show();
+	}
+
+	&[data-placement^="top"]:not([data-outside-vy]),
+	&[data-outside-vy="bottom"]:not([data-outside-vx]) {
+		--db-popover-translate-y: 25%;
+
+		@include get-popover-show();
+	}
+
+	&[data-placement^="right"]:not([data-outside-vx]),
+	&[data-outside-vx="left"] {
+		--db-popover-translate-x: -25%;
+
+		@include get-popover-show();
+	}
+
+	&[data-placement^="left"]:not([data-outside-vx]),
+	&[data-outside-vx="right"] {
+		--db-popover-translate-x: 25%;
+
+		@include get-popover-show();
+	}
+}
+
+%default-popover {
+	@extend %default-card;
+	@extend %popover-placement;
+
+	position: absolute;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	box-shadow: variables.$db-elevation-md;
+	display: none;
+	z-index: 1;
+	white-space: nowrap;
+
+	&[data-width="fixed"] {
+		inline-size: max-content;
+		max-inline-size: variables.$db-sizing-3xl;
+		// revert this if popover is included in button
+		white-space: normal;
+		text-align: initial;
+	}
+}

package/build/styles/internal/_scrollbar.scss

@@ -0,0 +1,93 @@
+@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 "@db-ux/core-foundations/build/styles/animation";
+@use "./form-components";
+
+$scrollbar-width: helpers.px-to-rem(8);
+
+%scrollbar {
+	&::-webkit-scrollbar {
+		@extend %default-transition;
+
+		z-index: 3;
+		inline-size: $scrollbar-width;
+		block-size: $scrollbar-width;
+		background-color: colors.$db-adaptive-bg-basic-level-1-default;
+		border-start-end-radius: variables.$db-border-radius-xs;
+	}
+
+	&:is(:hover, :focus) {
+		&::-webkit-scrollbar-track,
+		&::-webkit-scrollbar-button:single-button {
+			background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+		}
+	}
+
+	&:read-only {
+		&::-webkit-scrollbar-track,
+		&::-webkit-scrollbar-button:single-button {
+			background-color: colors.$db-adaptive-bg-basic-level-1-default !important;
+		}
+	}
+
+	&::-webkit-scrollbar-track {
+		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
+	}
+
+	/* Buttons */
+	&::-webkit-scrollbar-button:single-button {
+		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
+		background-size: $scrollbar-width;
+		background-repeat: no-repeat;
+		background-position: center;
+		block-size: form-components.$floating-label-size-calc;
+
+		&:is(:hover, :focus) {
+			background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+		}
+
+		&:active {
+			background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
+		}
+	}
+
+	/* Up */
+	&::-webkit-scrollbar-button:single-button:vertical:decrement {
+		background-image: var(--db-textarea-scrollbar-button-decrement);
+	}
+
+	/* Down */
+	&::-webkit-scrollbar-button:single-button:vertical:increment {
+		background-image: var(--db-textarea-scrollbar-button-increment);
+	}
+
+	&[data-variant="floating"] {
+		&::-webkit-resizer {
+			background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
+		}
+
+		&::-webkit-scrollbar-corner {
+			background-color: colors.$db-adaptive-bg-basic-level-1-default;
+		}
+	}
+
+	&::-webkit-resizer {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+		background-size: $scrollbar-width;
+		background-repeat: no-repeat;
+		background-position: center;
+		background-image: var(--db-textarea-resizer-image);
+		border-end-end-radius: variables.$db-border-radius-xs;
+	}
+
+	&::-webkit-scrollbar-corner {
+		@extend %default-transition;
+
+		border-end-end-radius: variables.$db-border-radius-xs;
+	}
+}

package/build/styles/internal/_stack-components.scss

@@ -0,0 +1,104 @@
+@use "sass:list";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "custom-elements";
+
+$stack-gaps: (
+	"3x-small": variables.$db-spacing-fixed-3xs,
+	"2x-small": variables.$db-spacing-fixed-2xs,
+	"x-small": variables.$db-spacing-fixed-xs,
+	"small": variables.$db-spacing-fixed-sm,
+	"medium": variables.$db-spacing-fixed-md,
+	"large": variables.$db-spacing-fixed-lg,
+	"x-large": variables.$db-spacing-fixed-xl,
+	"2x-large": variables.$db-spacing-fixed-2xl,
+	"3x-large": variables.$db-spacing-fixed-3xl,
+	"none": 0
+);
+
+@function arr-join($list, $glue: ", ") {
+	$result: null;
+
+	@for $i from 1 through list.length($list) {
+		$e: list.nth($list, $i);
+		$result: if(
+			$i != list.length($list),
+			$result#{$e}#{$glue},
+			$result#{$e}
+		);
+	}
+
+	@return $result;
+}
+
+@mixin get-stack-alignments() {
+	&[data-alignment="stretch"] {
+		align-items: stretch;
+	}
+
+	&[data-alignment="start"] {
+		align-items: flex-start;
+	}
+
+	&[data-alignment="end"] {
+		align-items: flex-end;
+	}
+
+	&[data-alignment="center"] {
+		align-items: center;
+	}
+}
+
+@mixin get-stack-justify-contents() {
+	&[data-justify-content="start"] {
+		justify-content: flex-start;
+	}
+
+	&[data-justify-content="end"] {
+		justify-content: flex-end;
+	}
+
+	&[data-justify-content="center"] {
+		justify-content: center;
+	}
+
+	&[data-justify-content="space-between"] {
+		justify-content: space-between;
+	}
+}
+
+%default-stack {
+	display: flex;
+	gap: variables.$db-spacing-fixed-sm;
+	justify-content: flex-start;
+	block-size: 100%;
+	inline-size: 100%;
+	overflow: auto;
+
+	&:is([data-direction="column"], :not([data-direction])) {
+		flex-direction: column;
+	}
+
+	> .db-divider,
+	> db-divider > .db-divider {
+		margin: 0;
+	}
+
+	&[data-direction="row"] {
+		flex-direction: row;
+	}
+
+	&[data-wrap="true"] {
+		flex-wrap: wrap;
+	}
+
+	@include get-stack-alignments();
+	@include get-stack-justify-contents();
+
+	@each $name, $gap in $stack-gaps {
+		&[data-gap="#{$name}"] {
+			/* stylelint-disable-next-line db-ux/use-spacings */
+			gap: #{$gap};
+		}
+	}
+}

package/build/styles/internal/_tag-components.scss

@@ -0,0 +1,234 @@
+@use "sass:map";
+@use "component";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
+
+$interactive-selectors: "label, button:not(.db-tab-remove-button), a";
+
+%set-adaptive-weak-tag {
+	border-color: colors.$db-adaptive-on-bg-basic-emphasis-60-default;
+
+	@include colors.set-current-colors(
+		colors.$db-adaptive-bg-basic-level-1-default,
+		colors.$db-adaptive-on-bg-basic-emphasis-80-default
+	);
+}
+
+%set-adaptive-strong-tag {
+	border-color: colors.$db-adaptive-on-bg-basic-emphasis-80-default;
+
+	@include colors.set-current-colors(
+		colors.$db-adaptive-bg-inverted-contrast-high-default,
+		colors.$db-adaptive-on-bg-inverted-default
+	);
+}
+
+%set-adaptive-origin-tag {
+	border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-default;
+
+	@include colors.set-current-colors(
+		colors.$db-adaptive-origin-default,
+		colors.$db-adaptive-on-origin-default
+	);
+}
+
+%set-interactive-weak {
+	@extend %set-adaptive-weak-tag;
+
+	@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;
+	}
+}
+
+%set-interactive-strong {
+	@extend %set-adaptive-strong-tag;
+
+	@include helpers.hover {
+		background-color: colors.$db-adaptive-bg-inverted-contrast-high-hovered;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-adaptive-bg-inverted-contrast-high-pressed;
+	}
+}
+
+%set-interactive-origin {
+	@extend %set-adaptive-origin-tag;
+
+	@include helpers.hover {
+		background-color: colors.$db-adaptive-origin-hovered;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-adaptive-origin-pressed;
+	}
+}
+
+@mixin get-tag-colors() {
+	@extend %set-adaptive-weak-tag;
+
+	&[data-emphasis="strong"] {
+		@extend %set-adaptive-strong-tag;
+	}
+
+	&[data-emphasis="origin"] {
+		@extend %set-adaptive-origin-tag;
+	}
+
+	@each $name in colors.$variant-colors {
+		&[data-semantic="#{$name}"] {
+			border-color: var(--db-#{$name}-on-bg-basic-emphasis-60-default);
+
+			@include colors.set-current-colors(
+				var(--db-#{$name}-bg-basic-level-1-default),
+				var(--db-#{$name}-on-bg-basic-emphasis-80-default)
+			);
+
+			&[data-emphasis="strong"] {
+				border-color: var(
+					--db-#{$name}-on-bg-basic-emphasis-80-default
+				);
+
+				@include colors.set-current-colors(
+					var(--db-#{$name}-bg-inverted-contrast-high-default),
+					var(--db-#{$name}-on-bg-inverted-default)
+				);
+			}
+
+			&[data-emphasis="origin"] {
+				border-color: var(
+					--db-#{$name}-on-bg-basic-emphasis-70-default
+				);
+
+				@include colors.set-current-colors(
+					var(--db-#{$name}-origin-default),
+					var(--db-#{$name}-on-origin-default)
+				);
+			}
+		}
+	}
+}
+
+// get button and link tags
+@mixin get-interactive-selectors() {
+	&:not(:has(dbbutton)) button:not(.db-tab-remove-button),
+	dbbutton:not(.db-tab-remove-button) > button,
+	db-button > button,
+	a {
+		@content;
+	}
+}
+
+%set-interactive-strong {
+	@extend %set-adaptive-strong-tag;
+
+	@include helpers.hover {
+		background-color: colors.$db-adaptive-bg-inverted-contrast-high-hovered;
+		// TODO: will be changed in the future tag refactoring
+		/* stylelint-disable-next-line db-ux/use-border-color */
+		border-color: colors.$db-adaptive-bg-inverted-contrast-high-hovered;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-adaptive-bg-inverted-contrast-high-pressed;
+		// TODO: will be changed in the future tag refactoring
+		/* stylelint-disable-next-line db-ux/use-border-color */
+		border-color: colors.$db-adaptive-bg-inverted-contrast-high-pressed;
+	}
+}
+
+@mixin revert-db-components() {
+	input:checked {
+		background-color: transparent;
+
+		@include helpers.hover {
+			background-color: transparent;
+		}
+
+		@include helpers.active {
+			background-color: transparent;
+		}
+	}
+}
+
+@mixin get-tag-colors-interactive() {
+	@include revert-db-components;
+
+	// overwrite current variables for semantic color
+	@each $name in colors.$variant-colors {
+		&[data-semantic="#{$name}"] {
+			@extend %db-#{$name}-variables;
+		}
+	}
+
+	&:not([data-emphasis]),
+	&[data-emphasis="weak"] {
+		// buttons and links
+		@include get-interactive-selectors() {
+			@extend %set-interactive-weak;
+		}
+
+		label:has(input) {
+			@extend %set-interactive-weak;
+		}
+
+		label:has(input[type="checkbox"]:checked) {
+			@extend %set-interactive-strong;
+		}
+
+		// radio (checked) without hover/pressed
+		label:has(input[type="radio"]:checked) {
+			&,
+			&:is(:hover, :focus, :active) {
+				@extend %set-adaptive-strong-tag;
+			}
+		}
+	}
+
+	&[data-emphasis="strong"] {
+		@extend %set-interactive-strong;
+
+		// buttons and links
+		@include get-interactive-selectors() {
+			@extend %set-interactive-strong;
+		}
+
+		label:has(input[type="checkbox"]:checked) {
+			@extend %set-interactive-strong;
+		}
+
+		label:has(input[type="radio"]:checked) {
+			@extend %set-adaptive-strong-tag;
+		}
+
+		&:has(input):not(:has(input:checked)) {
+			@extend %set-interactive-weak;
+		}
+	}
+
+	&[data-emphasis="origin"] {
+		@extend %set-interactive-origin;
+
+		// buttons and links
+		@include get-interactive-selectors() {
+			@extend %set-interactive-origin;
+		}
+
+		label:has(input[type="checkbox"]:checked) {
+			@extend %set-interactive-origin;
+		}
+
+		label:has(input[type="radio"]:checked) {
+			@extend %set-adaptive-origin-tag;
+		}
+
+		&:has(input):not(:has(input:checked)) {
+			@extend %set-interactive-weak;
+		}
+	}
+}