@db-ux/core-components 4.4.3 → 4.5.0

package/build/styles/index.scss

@@ -35,3 +35,4 @@
 @forward "../components/custom-select-dropdown/custom-select-dropdown";
 @forward "../components/custom-select-list/custom-select-list";
 @forward "../components/custom-select-list-item/custom-select-list-item";
+@forward "../components/custom-button/custom-button";

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

@@ -1,4 +1,9 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
+@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 "./component";
 
 %default-button {
 	font-weight: 700;
@@ -6,9 +11,142 @@
 	white-space: pre-line; // Multiple lines support
 	justify-content: center;
 	text-align: center;
+	align-items: center; // Centering the content vertically and horizontally
+	vertical-align: top; // Alignment of inline-flex buttons with different content
 
 	@include helpers.display(inline-flex);
+}
 
-	align-items: center; // Centering the content vertically and horizontally
-	vertical-align: top; // Alignment of inline-flex buttons with different content
+%button-outlined-ghost-colors {
+	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+
+	@include helpers.hover {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
+	}
+}
+
+%button-brand-colors {
+	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-default;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-brand-origin-pressed;
+		border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
+	}
+}
+
+@mixin set-basic-button($selector: "&") {
+	#{$selector} {
+		@extend %default-interactive-component;
+		@extend %default-button;
+		@extend %db-overwrite-font-size-md;
+
+		max-inline-size: 100%;
+		color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+		min-block-size: variables.$db-sizing-md;
+		block-size: max-content;
+		inline-size: fit-content;
+		padding: variables.$db-spacing-fixed-2xs variables.$db-spacing-fixed-md;
+
+		// disable text-decoration if someone wants to use the button for an <a> tag
+		text-decoration: none;
+	}
+
+	// Square icon only buttons
+	&[data-no-text="true"] {
+		#{$selector} {
+			padding: 0;
+			aspect-ratio: 1;
+			inline-size: variables.$db-sizing-md;
+
+			@include icons.is-icon-text-replace;
+
+			&::before {
+				margin: auto;
+			}
+		}
+	}
+
+	&[data-wrap="false"] {
+		#{$selector} {
+			white-space: nowrap;
+		}
+	}
+
+	&[data-size="small"] {
+		#{$selector} {
+			@extend %db-overwrite-font-size-sm;
+
+			font-weight: 700;
+			min-block-size: variables.$db-sizing-sm;
+
+			&:not([data-no-text="true"]) {
+				// stylelint-disable-next-line db-ux/use-spacings
+				padding: 1px 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"] {
+		#{$selector} {
+			inline-size: 100%;
+		}
+	}
+
+	@if $selector == "&" {
+		&[data-variant="brand"] {
+			#{$selector} {
+				@extend %button-brand-colors;
+			}
+		}
+	}
+
+	&[data-variant="filled"],
+	&[data-variant="ghost"] {
+		#{$selector} {
+			@extend %transparent-border;
+		}
+	}
+
+	&[data-variant="outlined"],
+	&:not([data-variant]),
+	&[data-variant=""],
+	&[data-variant="ghost"] {
+		#{$selector} {
+			@extend %button-outlined-ghost-colors;
+		}
+	}
+
+	&[data-variant="filled"] {
+		#{$selector} {
+			background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
+
+			@include helpers.hover {
+				background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered;
+			}
+
+			@include helpers.active {
+				background-color: colors.$db-adaptive-bg-basic-transparent-semi-pressed;
+			}
+		}
+	}
 }

package/build/styles/internal/_custom-elements.scss

@@ -1,6 +1,6 @@
 $custom-elements: //hygen-insert
 
-	db-custom-select-list-item, db-custom-select-list,
+	db-custom-button, db-custom-select-list-item, db-custom-select-list,
 	db-custom-select-dropdown, db-custom-select-form-field, db-custom-select,
 	db-stack, db-switch, db-tab-panel, db-tabs, db-tab-list, db-tab-item,
 	db-tab-bar, db-tooltip, db-popover, db-textarea, db-navigation,

package/build/styles/internal/_icon-passing.scss

@@ -1,7 +1,10 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/icons";
 
+$interactive-button-selectors: "label,button,a";
+
 @mixin icon-passing($inline-start: variables.$db-spacing-fixed-sm) {
+	&[data-icon-leading]:not([data-show-icon-leading="false"]),
 	&[data-icon]:not([data-show-icon="false"]) {
 		&::before {
 			position: absolute;
@@ -11,9 +14,7 @@
 			z-index: 1;
 		}
 
-		a,
-		button,
-		label {
+		#{$interactive-button-selectors} {
 			--db-padding-inline-start: calc(
 				#{$inline-start} + #{icons.$default-icon-margin-end} +
 					var(--db-icon-font-size)
@@ -24,3 +25,22 @@
 		}
 	}
 }
+
+@mixin icon-passing-trailing($inline-end: variables.$db-spacing-fixed-sm) {
+	&[data-icon-trailing]:not([data-show-icon-trailing="false"]) {
+		&::after {
+			position: absolute;
+			inset-block-start: calc(50% - 0.5em);
+			inset-inline-end: $inline-end;
+			pointer-events: none;
+			z-index: 1;
+		}
+
+		#{$interactive-button-selectors} {
+			padding-inline-end: calc(
+				#{$inline-end} + #{icons.$default-icon-margin-end} +
+					var(--db-icon-font-size)
+			);
+		}
+	}
+}

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

@@ -46,7 +46,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 		&::before {
 			inset-block-end: 100%;
 			inset-inline: 0;
-			block-size: var(--db-popover-distance);
+			block-size: $popover-gap-size;
 		}
 	}
 
@@ -55,7 +55,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 		&::before {
 			inset-block-start: 100%;
 			inset-inline: 0;
-			block-size: var(--db-popover-distance);
+			block-size: $popover-gap-size;
 		}
 	}
 
@@ -64,7 +64,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 		&::before {
 			inset-inline-end: 100%;
 			inset-block: 0;
-			inline-size: var(--db-popover-distance);
+			inline-size: $popover-gap-size;
 		}
 	}
 
@@ -73,7 +73,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 		&::before {
 			inset-inline-start: 100%;
 			inset-block: 0;
-			inline-size: var(--db-popover-distance);
+			inline-size: $popover-gap-size;
 		}
 	}