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

package/build/styles/index.scss

@@ -0,0 +1,32 @@
+@forward "../components/button/button";
+@forward "../components/icon/icon";
+@forward "../components/tab-item/tab-item";
+@forward "../components/divider/divider";
+@forward "../components/card/card";
+@forward "../components/input/input";
+@forward "../components/brand/brand";
+@forward "../components/header/header";
+@forward "../components/page/page";
+@forward "../components/link/link";
+@forward "../components/section/section";
+@forward "../components/infotext/infotext";
+@forward "../components/notification/notification";
+@forward "../components/checkbox/checkbox";
+@forward "../components/radio/radio";
+@forward "../components/tag/tag";
+@forward "../components/drawer/drawer";
+@forward "../components/select/select";
+@forward "../components/navigation-item/navigation-item";
+@forward "../components/textarea/textarea";
+@forward "../components/badge/badge";
+@forward "../components/accordion/accordion";
+@forward "../components/accordion-item/accordion-item";
+@forward "../components/navigation/navigation";
+@forward "../components/popover/popover";
+@forward "../components/tooltip/tooltip";
+@forward "../components/tab-item/tab-item";
+@forward "../components/tab-list/tab-list";
+@forward "../components/tabs/tabs";
+@forward "../components/tab-panel/tab-panel";
+@forward "../components/switch/switch";
+@forward "../components/stack/stack";

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

@@ -0,0 +1,8 @@
+%default-button {
+	font-weight: 700;
+	white-space: nowrap; // we don't want to break buttons
+	justify-content: center;
+	text-align: center;
+	display: inline-flex;
+	align-items: center; // Centering the content vertically and horizontally
+}

package/build/styles/internal/_component.scss

@@ -0,0 +1,79 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
+
+$min-mobile-header-height: calc(
+	#{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs}
+);
+
+$default-disabled: 0.4;
+// 0.68 would be fine as well for a11y, but we are big Bryan Adams fans :)
+$placeholder-disabled: 0.69;
+
+%default-adaptive-border {
+	border: variables.$db-border-height-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+}
+
+%transparent-border {
+	border: variables.$db-border-height-3xs solid transparent;
+}
+
+%component-border {
+	border: variables.$db-border-height-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
+}
+
+%form-component-border {
+	border: variables.$db-border-height-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-70-default;
+}
+
+%default-interactive-component {
+	@extend %default-adaptive-border;
+
+	border-radius: variables.$db-border-radius-xs;
+}
+
+%default-card {
+	@extend %component-border;
+
+	/* stylelint-disable-next-line db-ux/use-border-radius */
+	border-radius: var(
+		--default-card-border-radius,
+		#{variables.$db-border-radius-sm}
+	);
+}
+
+$responsive-spacings: (
+	"default": variables.$db-spacing-responsive-md,
+	"large": variables.$db-spacing-responsive-lg,
+	"medium": variables.$db-spacing-responsive-md,
+	"small": variables.$db-spacing-responsive-sm,
+	"none": 0
+);
+
+$default-spacings: (
+	"default": variables.$db-spacing-fixed-sm,
+	"large": variables.$db-spacing-fixed-lg,
+	"medium": variables.$db-spacing-fixed-md,
+	"small": variables.$db-spacing-fixed-sm,
+	"none": 0
+);
+
+@mixin get-data-spacing($type: padding, $spacings: $default-spacings) {
+	@each $name, $spacing in $spacings {
+		@if ($name == "default") {
+			&:not([data-spacing]) {
+				#{$type}: $spacing;
+			}
+
+			/* stylelint-disable-next-line at-rule-empty-line-before */
+		} @else {
+			&[data-spacing="#{$name}"] {
+				#{$type}: $spacing;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,7 @@
+$custom-elements: //hygen-insert
+	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,
+	db-accordion-item, db-accordion, db-badge, db-navigation-item, db-tag,
+	db-radio, db-select, db-notification, db-codedocs, db-brand, db-button,
+	db-card, db-checkbox, db-divider, db-drawer, db-header, db-icon,
+	db-infotext, db-input, db-link, db-page, db-section, db-tab, db-tabbar;

package/build/styles/internal/_db-puls.scss

@@ -0,0 +1,83 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/colors";
+
+@mixin set-db-puls-horizontal() {
+	&::after {
+		block-size: variables.$db-border-height-xs;
+		inline-size: 0;
+		transform: translate(-50%, 0);
+		inset-inline-start: 50%;
+		background-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
+		inset-block: auto calc(-1 * #{variables.$db-spacing-fixed-xs});
+	}
+}
+
+@mixin set-db-puls-vertical() {
+	&::after {
+		block-size: 0;
+		inline-size: variables.$db-border-height-xs;
+		transform: translate(0, -50%);
+		inset-block: 50% auto;
+		background-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
+		inset-inline-start: calc(-1 * #{variables.$db-spacing-fixed-xs});
+	}
+}
+
+%db-puls {
+	&::after {
+		content: "";
+		position: absolute;
+		border-radius: variables.$db-border-radius-xs;
+
+		@media screen and (prefers-reduced-motion: no-preference) {
+			transition:
+				height variables.$db-transition-duration-fast
+					variables.$db-transition-timing-emotional,
+				width variables.$db-transition-duration-fast
+					variables.$db-transition-timing-emotional;
+		}
+	}
+}
+
+%db-puls-auto {
+	@extend %db-puls;
+
+	@include set-db-puls-vertical();
+
+	@include screen-sizes.screen("md") {
+		@include set-db-puls-horizontal();
+	}
+}
+
+@mixin show-db-puls-horizontal() {
+	&::after {
+		block-size: variables.$db-border-height-xs;
+		inline-size: 100%;
+
+		@media (forced-colors: active) {
+			border: calc(#{variables.$db-border-height-xs} - 1px) solid
+				colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+		}
+	}
+}
+
+@mixin show-db-puls-vertical() {
+	&::after {
+		block-size: 100%;
+		inline-size: variables.$db-border-height-xs;
+
+		@media (forced-colors: active) {
+			border: calc(#{variables.$db-border-height-xs} - 1px) solid
+				colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+		}
+	}
+}
+
+%show-db-puls-auto {
+	@include show-db-puls-vertical;
+
+	@include screen-sizes.screen("md") {
+		@include show-db-puls-horizontal;
+	}
+}