chore: update border variables

nmerget · nmerget · commit 9c301a594f25 · 2024-03-01T08:58:34.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss
@@ -59,7 +59,7 @@
 		}
 
 		&:focus-visible {
-			border-radius: variables.$db-border-radius-md;
+			border-radius: variables.$db-border-radius-xs;
 		}
 	}
 
diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
@@ -9,7 +9,7 @@
 	@extend %check-element;
 
 	input {
-		border-radius: variables.$db-border-radius-sm;
+		border-radius: variables.$db-border-radius-2xs;
 
 		&::before {
 			--db-icon-margin-end: 0;
diff --git a/packages/components/src/components/divider/divider.scss b/packages/components/src/components/divider/divider.scss
@@ -8,14 +8,14 @@
 
 	&:not([data-variant="vertical"]) {
 		@include helpers.divider();
-		block-size: variables.$db-border-height-sm;
+		block-size: variables.$db-border-height-3xs;
 		inline-size: 100%;
 	}
 
 	&[data-variant="vertical"] {
 		@include helpers.divider("left");
 		block-size: 100%;
-		inline-size: variables.$db-border-height-sm;
+		inline-size: variables.$db-border-height-3xs;
 
 		&:not([data-margin="none"]) {
 			margin: 0 variables.$db-spacing-fixed-sm;
diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss
@@ -10,17 +10,17 @@
 	inset-inline: auto 0;
 
 	&[data-rounded="true"] {
-		border-start-start-radius: variables.$db-border-radius-lg;
-		border-end-start-radius: variables.$db-border-radius-lg;
+		border-start-start-radius: variables.$db-border-radius-sm;
+		border-end-start-radius: variables.$db-border-radius-sm;
 	}
 }
 
 %direction-left {
 	inset-inline: 0 auto;
 
 	&[data-rounded="true"] {
-		border-start-end-radius: variables.$db-border-radius-lg;
-		border-end-end-radius: variables.$db-border-radius-lg;
+		border-start-end-radius: variables.$db-border-radius-sm;
+		border-end-end-radius: variables.$db-border-radius-sm;
 	}
 }
 
@@ -39,17 +39,17 @@
 	inset: auto 0 0;
 
 	&[data-rounded="true"] {
-		border-start-end-radius: variables.$db-border-radius-lg;
-		border-start-start-radius: variables.$db-border-radius-lg;
+		border-start-end-radius: variables.$db-border-radius-sm;
+		border-start-start-radius: variables.$db-border-radius-sm;
 	}
 }
 %direction-down {
 	@extend %full-horizontal;
 	inset: 0 0 auto;
 
 	&[data-rounded="true"] {
-		border-end-end-radius: variables.$db-border-radius-lg;
-		border-end-start-radius: variables.$db-border-radius-lg;
+		border-end-end-radius: variables.$db-border-radius-sm;
+		border-end-start-radius: variables.$db-border-radius-sm;
 	}
 }
 
diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss
@@ -12,7 +12,7 @@
 	position: relative;
 
 	min-block-size: component.$default-mobile-header-height;
-	border-block-end: variables.$db-border-height-sm solid
+	border-block-end: variables.$db-border-height-3xs solid
 		colors.$db-current-color-border;
 
 	@include screen-sizes.screen("md") {
diff --git a/packages/components/src/components/input/input.scss b/packages/components/src/components/input/input.scss
@@ -70,7 +70,7 @@ $icon-padding: calc(
 			appearance: none;
 			position: absolute;
 			inset-inline-end: calc(
-				#{variables.$db-spacing-fixed-sm} + #{variables.$db-border-height-sm}
+				#{variables.$db-spacing-fixed-sm} + #{variables.$db-border-height-3xs}
 			);
 		}
 	}
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -51,7 +51,7 @@
 	inline-size: 100%;
 	display: inline-flex;
 
-	border-radius: variables.$db-border-radius-lg;
+	border-radius: variables.$db-border-radius-sm;
 	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-sm;
 	white-space: nowrap; // we don't want to break
 	text-align: center;
@@ -185,7 +185,7 @@
 	}
 
 	@include screen-sizes.screen("md") {
-		border-radius: variables.$db-border-radius-lg;
+		border-radius: variables.$db-border-radius-sm;
 		box-shadow: variables.$db-elevation-md;
 		padding: variables.$db-spacing-fixed-sm;
 
diff --git a/packages/components/src/components/notification/notification.scss b/packages/components/src/components/notification/notification.scss
@@ -75,7 +75,7 @@
 		min-inline-size: variables.$db-sizing-md;
 		max-block-size: variables.$db-sizing-md;
 		max-inline-size: variables.$db-sizing-md;
-		border-radius: variables.$db-border-radius-md;
+		border-radius: variables.$db-border-radius-xs;
 	}
 
 	// timestamp
diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss
@@ -7,7 +7,7 @@
 
 	input {
 		border-color: currentColor;
-		border-radius: variables.$db-border-radius-3xl;
+		border-radius: variables.$db-border-radius-full;
 		transition: border-width variables.$db-transition-duration-fast
 			variables.$db-transition-timing-functional;
 
diff --git a/packages/components/src/components/tab-list/tab-list.scss b/packages/components/src/components/tab-list/tab-list.scss
@@ -53,16 +53,16 @@
 		&::before {
 			background-color: colors.$db-current-color-bg-transparent-semi-enabled;
 			content: "";
-			border-radius: variables.$db-border-radius-md;
-			block-size: variables.$db-border-height-lg;
+			border-radius: variables.$db-border-radius-xs;
+			block-size: variables.$db-border-height-xs;
 			position: absolute;
 
 			inset-inline: variables.$db-spacing-fixed-sm;
 
 			/* 2x padding + 1x margin + text + 3x border  */
 			inset-block-start: calc(
 				2 * #{variables.$db-spacing-fixed-xs} + #{variables.$db-spacing-fixed-sm} +
-					#{form-components.$font-size-height} + #{variables.$db-border-height-sm} *
+					#{form-components.$font-size-height} + #{variables.$db-border-height-3xs} *
 					3
 			);
 		}
@@ -109,14 +109,14 @@
 		&::before {
 			background-color: colors.$db-current-color-bg-transparent-semi-enabled;
 			content: "";
-			border-radius: variables.$db-border-radius-md;
-			inline-size: variables.$db-border-height-lg;
+			border-radius: variables.$db-border-radius-xs;
+			inline-size: variables.$db-border-height-xs;
 			inset-block: variables.$db-spacing-fixed-sm;
 			position: absolute;
 
 			inset-inline-start: calc(
 				-1 * #{variables.$db-spacing-fixed-xs} + #{variables.$db-spacing-fixed-sm} +
-					#{variables.$db-border-height-sm}
+					#{variables.$db-border-height-3xs}
 			);
 		}
 	}
diff --git a/packages/components/src/components/tab/tab.scss b/packages/components/src/components/tab/tab.scss
@@ -35,7 +35,7 @@
 			position: absolute;
 			appearance: none;
 			inline-size: 100%;
-			block-size: calc(100% + #{variables.$db-border-height-sm});
+			block-size: calc(100% + #{variables.$db-border-height-3xs});
 			margin-inline-end: initial;
 			inset: 0;
 
@@ -59,7 +59,7 @@
 				&::after {
 					inset-block-start: calc(
 						#{variables.$db-spacing-fixed-xs} * 2 + #{form-components.$font-size-height} +
-							#{variables.$db-border-height-sm} * 2
+							#{variables.$db-border-height-3xs} * 2
 					);
 					inset-block-end: auto;
 				}
diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss
@@ -80,7 +80,7 @@
 		margin-inline-start: 0;
 
 		&:has(input:checked) {
-			border-width: variables.$db-border-height-sm;
+			border-width: variables.$db-border-height-3xs;
 
 			&::before {
 				content: none;
@@ -102,7 +102,7 @@
 							var(
 									--db-padding-inline-start,
 									#{variables.$db-spacing-fixed-2xs}
-								) + #{variables.$db-border-height-sm}
+								) + #{variables.$db-border-height-3xs}
 						) * -1
 				)
 			);
@@ -153,7 +153,7 @@
 		@extend %component-border;
 		block-size: inherit;
 		padding: 0 variables.$db-spacing-fixed-2xs;
-		border-radius: variables.$db-border-radius-md;
+		border-radius: variables.$db-border-radius-xs;
 	}
 
 	db-button,
diff --git a/packages/components/src/components/textarea/textarea.scss b/packages/components/src/components/textarea/textarea.scss
@@ -26,7 +26,7 @@
 }
 
 @mixin get-scrolling-workaround() {
-	border-radius: variables.$db-border-radius-md 0 0 0;
+	border-radius: variables.$db-border-radius-xs 0 0 0;
 	position: absolute;
 	content: "";
 	inset-block-start: 0;
diff --git a/packages/components/src/components/tooltip/tooltip.scss b/packages/components/src/components/tooltip/tooltip.scss
@@ -9,7 +9,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 
 .db-tooltip {
 	--default-card-elevation: #{variables.$db-elevation-sm};
-	--default-card-border-radius: #{variables.$db-border-radius-md};
+	--default-card-border-radius: #{variables.$db-border-radius-xs};
 	@extend %db-overwrite-font-size-sm;
 	@extend %default-popover;
 
diff --git a/packages/components/src/styles/_component.scss b/packages/components/src/styles/_component.scss
@@ -11,27 +11,28 @@ $default-mobile-header-height: var(
 $default-disabled: 0.4;
 
 %default-adaptive-border {
-	border: variables.$db-border-height-sm solid
+	border: variables.$db-border-height-3xs solid
 		colors.$db-current-color-enabled;
 }
 
 %transparent-border {
-	border: variables.$db-border-height-sm solid transparent;
+	border: variables.$db-border-height-3xs solid transparent;
 }
 
 %component-border {
-	border: variables.$db-border-height-sm solid colors.$db-current-color-border;
+	border: variables.$db-border-height-3xs solid
+		colors.$db-current-color-border;
 }
 
 %default-interactive-component {
 	@extend %default-adaptive-border;
-	border-radius: variables.$db-border-radius-md;
+	border-radius: variables.$db-border-radius-xs;
 }
 
 %default-card {
 	@extend %component-border;
 	border-radius: var(
 		--default-card-border-radius,
-		#{variables.$db-border-radius-lg}
+		#{variables.$db-border-radius-sm}
 	);
 }
diff --git a/packages/components/src/styles/_db-puls.scss b/packages/components/src/styles/_db-puls.scss
@@ -4,7 +4,7 @@
 
 @mixin set-db-puls-horizontal() {
 	&::after {
-		block-size: variables.$db-border-height-lg;
+		block-size: variables.$db-border-height-xs;
 		inline-size: 0;
 		transform: translate(-50%, 0);
 		inset-inline-start: 50%;
@@ -17,7 +17,7 @@
 @mixin set-db-puls-vertical() {
 	&::after {
 		block-size: 0;
-		inline-size: variables.$db-border-height-lg;
+		inline-size: variables.$db-border-height-xs;
 		transform: translate(0, -50%);
 		inset-block-start: 50%;
 		background-color: colors.$db-brand-origin-enabled;
@@ -30,7 +30,7 @@
 	&::after {
 		content: "";
 		position: absolute;
-		border-radius: variables.$db-border-radius-md;
+		border-radius: variables.$db-border-radius-xs;
 		transition:
 			height variables.$db-transition-duration-fast
 				variables.$db-transition-timing-emotional,
@@ -51,15 +51,15 @@
 
 @mixin show-db-puls-horizontal() {
 	&::after {
-		block-size: variables.$db-border-height-lg;
+		block-size: variables.$db-border-height-xs;
 		inline-size: 100%;
 	}
 }
 
 @mixin show-db-puls-vertical() {
 	&::after {
 		block-size: 100%;
-		inline-size: variables.$db-border-height-lg;
+		inline-size: variables.$db-border-height-xs;
 	}
 }
 
diff --git a/packages/components/src/styles/_link-components.scss b/packages/components/src/styles/_link-components.scss
@@ -42,7 +42,7 @@
 	white-space: nowrap;
 
 	&:focus-visible {
-		border-radius: variables.$db-border-radius-md;
+		border-radius: variables.$db-border-radius-xs;
 	}
 
 	// "disabled" links
diff --git a/packages/components/src/styles/_scrollbar.scss b/packages/components/src/styles/_scrollbar.scss
@@ -13,7 +13,7 @@ $scrollbar-width: helpers.to-rem(8);
 		inline-size: $scrollbar-width;
 		block-size: $scrollbar-width;
 		background-color: colors.$db-current-color-bg-lvl-1-enabled;
-		border-start-end-radius: variables.$db-border-radius-md;
+		border-start-end-radius: variables.$db-border-radius-xs;
 	}
 
 	&:hover {
@@ -80,11 +80,11 @@ $scrollbar-width: helpers.to-rem(8);
 		background-repeat: no-repeat;
 		background-position: center;
 		background-image: var(--db-textarea-resizer-image);
-		border-end-end-radius: variables.$db-border-radius-md;
+		border-end-end-radius: variables.$db-border-radius-xs;
 	}
 
 	&::-webkit-scrollbar-corner {
 		@extend %default-transition;
-		border-end-end-radius: variables.$db-border-radius-md;
+		border-end-end-radius: variables.$db-border-radius-xs;
 	}
 }
diff --git a/packages/foundations/scss/_focus.scss b/packages/foundations/scss/_focus.scss
@@ -2,9 +2,9 @@
 @use "colors";
 
 %focus-placeholder {
-	outline: #{variables.$db-border-height-md} solid #{colors.$db-informational-contrast-high-enabled};
+	outline: #{variables.$db-border-height-2xs} solid #{colors.$db-informational-contrast-high-enabled};
 	outline-offset: calc(
-		#{variables.$db-border-height-lg} + #{variables.$db-border-height-md}
+		#{variables.$db-border-height-xs} + #{variables.$db-border-height-2xs}
 	);
 
 	// TODO: The fallback currently only includes the same CSS Custom Property, which doesn't make any sense
@@ -21,6 +21,6 @@
 			);
 
 	&:not([type="radio"]) {
-		border-radius: variables.$db-border-radius-md;
+		border-radius: variables.$db-border-radius-xs;
 	}
 }
diff --git a/packages/foundations/scss/_variables.scss b/packages/foundations/scss/_variables.scss
@@ -40,14 +40,26 @@ $db-elevation-lg: var(--db-elevation-lg);
 
 /* Border */
 
+$db-border-height-3xs: var(--db-border-height-3xs);
+$db-border-height-2xs: var(--db-border-height-2xs);
+$db-border-height-xs: var(--db-border-height-xs);
 $db-border-height-sm: var(--db-border-height-sm);
 $db-border-height-md: var(--db-border-height-md);
 $db-border-height-lg: var(--db-border-height-lg);
+$db-border-height-xl: var(--db-border-height-xl);
+$db-border-height-2xl: var(--db-border-height-2xl);
+$db-border-height-3xl: var(--db-border-height-3xl);
 
+$db-border-radius-3xs: var(--db-border-radius-3xs);
+$db-border-radius-2xs: var(--db-border-radius-2xs);
+$db-border-radius-xs: var(--db-border-radius-xs);
 $db-border-radius-sm: var(--db-border-radius-sm);
 $db-border-radius-md: var(--db-border-radius-md);
 $db-border-radius-lg: var(--db-border-radius-lg);
+$db-border-radius-xl: var(--db-border-radius-xl);
+$db-border-radius-2xl: var(--db-border-radius-2xl);
 $db-border-radius-3xl: var(--db-border-radius-3xl);
+$db-border-radius-full: var(--db-border-radius-full);
 
 /* Transitions */
 
diff --git a/packages/foundations/scss/default-theme.scss b/packages/foundations/scss/default-theme.scss
diff --git a/packages/foundations/scss/helpers/_functions.scss b/packages/foundations/scss/helpers/_functions.scss
diff --git a/packages/foundations/tailwind/tailwind-tokens.json b/packages/foundations/tailwind/tailwind-tokens.json

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`&:focus-visible {`
`62`		`- border-radius: variables.$db-border-radius-md;`
	`62`	`+ border-radius: variables.$db-border-radius-xs;`
`63`	`63`	`}`
`64`	`64`	`}`
`65`	`65`
Original file line number	Diff line number	Diff line change
`@@ -10,17 +10,17 @@`
`10`	`10`	`inset-inline: auto 0;`
`11`	`11`
`12`	`12`	`&[data-rounded="true"] {`
`13`		`- border-start-start-radius: variables.$db-border-radius-lg;`
`14`		`- border-end-start-radius: variables.$db-border-radius-lg;`
	`13`	`+ border-start-start-radius: variables.$db-border-radius-sm;`
	`14`	`+ border-end-start-radius: variables.$db-border-radius-sm;`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`%direction-left {`
`19`	`19`	`inset-inline: 0 auto;`
`20`	`20`
`21`	`21`	`&[data-rounded="true"] {`
`22`		`- border-start-end-radius: variables.$db-border-radius-lg;`
`23`		`- border-end-end-radius: variables.$db-border-radius-lg;`
	`22`	`+ border-start-end-radius: variables.$db-border-radius-sm;`
	`23`	`+ border-end-end-radius: variables.$db-border-radius-sm;`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`
`@@ -39,17 +39,17 @@`
`39`	`39`	`inset: auto 0 0;`
`40`	`40`
`41`	`41`	`&[data-rounded="true"] {`
`42`		`- border-start-end-radius: variables.$db-border-radius-lg;`
`43`		`- border-start-start-radius: variables.$db-border-radius-lg;`
	`42`	`+ border-start-end-radius: variables.$db-border-radius-sm;`
	`43`	`+ border-start-start-radius: variables.$db-border-radius-sm;`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`	`%direction-down {`
`47`	`47`	`@extend %full-horizontal;`
`48`	`48`	`inset: 0 0 auto;`
`49`	`49`
`50`	`50`	`&[data-rounded="true"] {`
`51`		`- border-end-end-radius: variables.$db-border-radius-lg;`
`52`		`- border-end-start-radius: variables.$db-border-radius-lg;`
	`51`	`+ border-end-end-radius: variables.$db-border-radius-sm;`
	`52`	`+ border-end-start-radius: variables.$db-border-radius-sm;`
`53`	`53`	`}`
`54`	`54`	`}`
`55`	`55`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ $icon-padding: calc(`
`70`	`70`	`appearance: none;`
`71`	`71`	`position: absolute;`
`72`	`72`	`inset-inline-end: calc(`
`73`		`- #{variables.$db-spacing-fixed-sm} + #{variables.$db-border-height-sm}`
	`73`	`+ #{variables.$db-spacing-fixed-sm} + #{variables.$db-border-height-3xs}`
`74`	`74`	`);`
`75`	`75`	`}`
`76`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@`
`75`	`75`	`min-inline-size: variables.$db-sizing-md;`
`76`	`76`	`max-block-size: variables.$db-sizing-md;`
`77`	`77`	`max-inline-size: variables.$db-sizing-md;`
`78`		`- border-radius: variables.$db-border-radius-md;`
	`78`	`+ border-radius: variables.$db-border-radius-xs;`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`// timestamp`