@bethinkpl/design-system 36.2.0 → 37.0.2

package/lib/js/components/Badge/Badge.vue

@@ -151,7 +151,7 @@ $elevation-gap-xs: math.div($badge-elevation-size-xs - $badge-content-size-xs, 2
 		& #{$root}__content {
 			@include label-xs-default-bold;
 
-			padding: 0 $space-5xs;
+			padding: 0 $space-1;
 		}
 
 		& #{$root}__image {
@@ -174,7 +174,7 @@ $elevation-gap-xs: math.div($badge-elevation-size-xs - $badge-content-size-xs, 2
 		& #{$root}__content {
 			@include label-xs-default-bold;
 
-			padding: 0 $space-4xs;
+			padding: 0 $space-2;
 		}
 
 		& #{$root}__image {
@@ -197,7 +197,7 @@ $elevation-gap-xs: math.div($badge-elevation-size-xs - $badge-content-size-xs, 2
 		& #{$root}__content {
 			@include label-s-default-bold;
 
-			padding: 0 $space-4xs;
+			padding: 0 $space-2;
 		}
 
 		& #{$root}__image {

package/lib/js/components/BadgeScore/BadgeScore.vue

@@ -112,7 +112,7 @@ $badge-score-colors: (
 	display: inline-flex;
 	justify-content: center;
 	min-width: $badge-score-min-width;
-	padding: $space-2xs $space-2xs;
+	padding: $space-4 $space-4;
 
 	&__text {
 		align-self: baseline;
@@ -120,7 +120,7 @@ $badge-score-colors: (
 
 	&__icon {
 		align-self: center;
-		margin-right: $space-5xs;
+		margin-right: $space-1;
 	}
 
 	&__suffix {
@@ -133,7 +133,7 @@ $badge-score-colors: (
 		@include label-xl-default-bold;
 
 		min-width: $badge-score-small-min-width;
-		padding: $space-2xs $space-2xs;
+		padding: $space-4 $space-4;
 
 		#{$self}__suffix {
 			@include label-l-default-bold;
@@ -144,7 +144,7 @@ $badge-score-colors: (
 		@include label-s-default-bold;
 
 		min-width: $badge-score-x-small-min-width;
-		padding: $space-3xs;
+		padding: $space-3;
 
 		#{$self}__suffix {
 			@include label-s-default-bold;

package/lib/js/components/Banner/Banner.vue

@@ -108,34 +108,34 @@
 		border-width: 1px;
 		display: flex;
 		flex-direction: column;
-		gap: $space-xs;
-		padding: $space-xs;
+		gap: $space-6;
+		padding: $space-6;
 
 		@container (width > 500px) {
 			#{$self}__header {
-				padding: 0 $space-2xs 0 $space-4xs;
+				padding: 0 $space-4 0 $space-2;
 			}
 
 			#{$self}__textWrapper {
 				flex-direction: row;
-				gap: $space-s;
+				gap: $space-8;
 			}
 
 			#{$self}__rightSlot,
 			#{$self}__buttonWrapper {
-				padding: $space-xs 0;
+				padding: $space-6 0;
 			}
 
 			&.-ds-medium {
 				#{$self}__expander {
-					padding: $space-xs 0 $space-xs $space-2xs;
+					padding: $space-6 0 $space-6 $space-4;
 				}
 			}
 
 			// double class name selector to override -ds-small styles without container query, which are defined below
 			&.-ds-small.-ds-small {
 				#{$self}__textWrapper {
-					gap: $space-2xs;
+					gap: $space-4;
 				}
 
 				#{$self}__rightSlot,
@@ -212,7 +212,7 @@
 
 			#{$self}__rightSlot,
 			#{$self}__buttonWrapper {
-				padding: $space-xs 0 $space-5xs;
+				padding: $space-6 0 $space-1;
 			}
 
 			#{$self}__expandedContainer {
@@ -240,7 +240,7 @@
 		align-items: flex-start;
 		display: flex;
 		flex: 1;
-		padding: 0 $space-4xs;
+		padding: 0 $space-2;
 	}
 
 	&__title {
@@ -249,7 +249,7 @@
 		align-items: center;
 		color: var(--ds-banner-title-color);
 		display: flex;
-		gap: $space-3xs;
+		gap: $space-3;
 	}
 
 	&__iconWrapperSmall {
@@ -272,44 +272,44 @@
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
-		gap: $space-5xs;
+		gap: $space-1;
 		justify-content: center;
-		padding: $space-4xs 0;
+		padding: $space-2 0;
 	}
 
 	&__rightWrapper {
 		display: flex;
 		flex-shrink: 0;
 		flex-wrap: nowrap;
-		gap: $space-3xs;
+		gap: $space-3;
 		padding: 0;
 	}
 
 	&__rightSlot,
 	&__buttonWrapper {
-		padding: $space-xs 0 $space-3xs 0;
+		padding: $space-6 0 $space-3 0;
 	}
 
 	&__iconWrapper {
-		padding: $space-2xs $space-xs $space-2xs 0;
+		padding: $space-4 $space-6 $space-4 0;
 	}
 
 	&__close {
-		padding-left: $space-2xs;
+		padding-left: $space-4;
 	}
 
 	&__expander {
-		padding: 0 0 0 $space-2xs;
+		padding: 0 0 0 $space-4;
 	}
 
 	&__expandedContainer {
 		@include text-m-default-regular;
 
-		padding: 0 $space-4xs $space-4xs;
+		padding: 0 $space-2 $space-2;
 	}
 
 	&__expandedText {
-		margin-top: $space-xs;
+		margin-top: $space-6;
 	}
 }
 </style>

package/lib/js/components/Buttons/IconButton/IconButton.vue

@@ -165,7 +165,7 @@
 		@include button-m-default-bold-uppercase;
 
 		display: none;
-		margin-right: $space-xs;
+		margin-right: $space-6;
 
 		@media #{breakpoint-s()} {
 			display: initial;
@@ -208,7 +208,7 @@
 	&.-ds-xx-small {
 		#{$self}__button {
 			height: $icon-button-xx-small-size;
-			padding: $space-4xs;
+			padding: $space-2;
 			width: $icon-button-xx-small-size;
 		}
 
@@ -220,7 +220,7 @@
 	&.-ds-x-small {
 		#{$self}__button {
 			height: $icon-button-x-small-size;
-			padding: $space-4xs;
+			padding: $space-2;
 			width: $icon-button-x-small-size;
 		}
 

package/lib/js/components/Cards/Card/Card.vue

@@ -102,32 +102,32 @@
 
 	&__header {
 		&.-ds-withPadding {
-			padding: $space-s;
+			padding: $space-8;
 
 			#{$root}.-ds-paddingLarge & {
-				padding: $space-l $space-l $space-s;
+				padding: $space-16 $space-16 $space-8;
 			}
 		}
 	}
 
 	&__headerDivider {
 		&.-ds-withHorizontalMargin {
-			margin: 0 $space-s;
+			margin: 0 $space-8;
 
 			#{$root}.-ds-paddingLarge & {
-				margin: 0 $space-l;
+				margin: 0 $space-16;
 			}
 		}
 	}
 
 	&__content {
-		padding: $space-s 0;
+		padding: $space-8 0;
 
 		&.-ds-withPadding {
-			padding: $space-s;
+			padding: $space-8;
 
 			#{$root}.-ds-paddingLarge & {
-				padding: $space-s $space-l;
+				padding: $space-8 $space-16;
 			}
 		}
 
@@ -139,10 +139,10 @@
 
 	&__footer {
 		&.-ds-withPadding {
-			padding: 0 $space-s $space-s;
+			padding: 0 $space-8 $space-8;
 
 			#{$root}.-ds-paddingLarge & {
-				padding: 0 $space-l $space-l;
+				padding: 0 $space-16 $space-16;
 			}
 		}
 	}

package/lib/js/components/Cards/CardExpandable/CardExpandable.vue

@@ -52,7 +52,7 @@
 		cursor: pointer;
 		display: flex;
 		justify-content: center;
-		padding: $space-xs $space-s;
+		padding: $space-6 $space-8;
 
 		&:hover {
 			background-color: $color-neutral-background-hovered;
@@ -63,7 +63,7 @@
 		@include label-s-extensive-bold-uppercase();
 
 		color: $color-primary-text;
-		margin-right: $space-4xs;
+		margin-right: $space-2;
 	}
 
 	&__expanderIcon {

package/lib/js/components/Chip/Chip.vue

@@ -212,8 +212,8 @@ $chip-colors: (
 	align-items: center;
 	border-radius: $radius-xl;
 	display: inline-flex;
-	gap: $space-4xs;
-	padding: $space-4xs $space-2xs;
+	gap: $space-2;
+	padding: $space-2 $space-4;
 
 	&.-ds-interactive {
 		cursor: pointer;
@@ -221,7 +221,7 @@ $chip-colors: (
 	}
 
 	&.-ds-removable {
-		padding: $space-5xs $space-5xs $space-5xs $space-2xs;
+		padding: $space-1 $space-1 $space-1 $space-4;
 	}
 
 	&.-ds-disabled {
@@ -251,9 +251,9 @@ $chip-colors: (
 	}
 
 	&.-ds-x-small {
-		gap: $space-5xs;
+		gap: $space-1;
 		min-height: $chip-min-height;
-		padding: $space-5xs $space-3xs;
+		padding: $space-1 $space-3;
 
 		#{$self}__label {
 			@include label-xs-default-bold;

package/lib/js/components/DatePickers/DateBox/DateBox.vue

@@ -164,12 +164,12 @@
 
 	align-items: center;
 	border: $border-xs solid transparent;
-	column-gap: $space-2xs;
+	column-gap: $space-4;
 	display: flex;
 	justify-content: space-between;
 	min-height: 46px;
 	min-width: 76px;
-	padding: $space-2xs $space-xs;
+	padding: $space-4 $space-6;
 	pointer-events: none;
 
 	&__dateWrapper {
@@ -232,7 +232,7 @@
 	}
 
 	&__date {
-		column-gap: $space-4xs;
+		column-gap: $space-2;
 		display: inline-flex;
 
 		/* Prevent text select */

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue

@@ -76,7 +76,7 @@
 
 	display: flex;
 	flex-direction: column;
-	row-gap: $space-4xs;
+	row-gap: $space-2;
 
 	&.-ds-box {
 		display: inline-flex;
@@ -90,7 +90,7 @@
 		align-items: flex-end;
 		display: flex;
 		justify-content: space-between;
-		padding-bottom: $space-2xs;
+		padding-bottom: $space-4;
 	}
 
 	&__label {
@@ -127,7 +127,7 @@
 		color: $color-danger-text;
 		// In case we have two date pickers in a row, we want them to have the same height.
 		// When one have a message visible, the second should get an empty string in a prop in such case
-		min-height: $space-xs;
+		min-height: $space-6;
 	}
 
 	&__helpMessage {
@@ -136,7 +136,7 @@
 		color: $color-neutral-text;
 		// In case we have two date pickers in a row, we want them to have the same height.
 		// When one have a message visible, the second should get an empty string in a prop in such case
-		min-height: $space-xs;
+		min-height: $space-6;
 	}
 }
 </style>

package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue

@@ -33,7 +33,7 @@
 .ds-dateRangePicker {
 	display: flex;
 	flex-direction: column;
-	row-gap: $space-4xs;
+	row-gap: $space-2;
 
 	&__hiddenInput {
 		display: none;

package/lib/js/components/Drawer/DrawerContent/DrawerContent.vue

@@ -10,8 +10,8 @@
 .ds-drawerContent {
 	display: flex;
 	flex-direction: column;
-	gap: $space-s;
-	padding: $space-s;
+	gap: $space-8;
+	padding: $space-8;
 }
 </style>
 

package/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue

@@ -8,7 +8,7 @@
 @import '../../../../styles/settings/spacings';
 
 .ds-drawerDivider {
-	padding: $space-2xs 0;
+	padding: $space-4 0;
 }
 </style>
 

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue

@@ -100,8 +100,8 @@ $minimal-drawer-header-height: 58px;
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
-		padding-left: $space-4xs;
-		row-gap: $space-4xs;
+		padding-left: $space-2;
+		row-gap: $space-2;
 	}
 
 	&__eyebrow {
@@ -123,7 +123,7 @@ $minimal-drawer-header-height: 58px;
 
 	&__title {
 		align-items: center;
-		column-gap: $space-3xs;
+		column-gap: $space-3;
 		display: flex;
 	}
 
@@ -147,11 +147,11 @@ $minimal-drawer-header-height: 58px;
 
 	&__titleWrapper {
 		align-items: center;
-		column-gap: $space-4xs;
+		column-gap: $space-2;
 		display: flex;
 		justify-content: space-between;
 		min-height: $minimal-drawer-header-height;
-		padding: $space-xs;
+		padding: $space-6;
 	}
 
 	&__actions {

package/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue

@@ -22,8 +22,8 @@
 	align-items: center;
 	color: $color-neutral-text-strong;
 	display: flex;
-	gap: $space-2xs;
-	padding: $space-2xs 0;
+	gap: $space-4;
+	padding: $space-4 0;
 	width: 100%;
 
 	&__label {

package/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue

@@ -8,7 +8,7 @@
 @import '../../../../styles/settings/spacings';
 
 .ds-drawerListItemGroup {
-	padding: 0 0 $space-3xs;
+	padding: 0 0 $space-3;
 }
 </style>
 

package/lib/js/components/Drawer/DrawerTile/DrawerTile.vue

@@ -8,7 +8,7 @@
 @import '../../../../styles/settings/spacings';
 
 .ds-drawerTile {
-	padding: $space-2xs 0;
+	padding: $space-4 0;
 }
 </style>
 

package/lib/js/components/Dropdown/Dropdown.vue

@@ -63,11 +63,11 @@
 	}
 
 	&[x-placement^='bottom'] {
-		margin-top: $space-4xs;
+		margin-top: $space-2;
 	}
 
 	&[x-placement^='top'] {
-		margin-bottom: $space-4xs;
+		margin-bottom: $space-2;
 	}
 
 	&__scrollableWrapper {

package/lib/js/components/Form/Checkbox/Checkbox.vue

@@ -51,15 +51,15 @@
 	display: inline-flex;
 
 	&.-ds-x-small {
-		gap: $space-4xs;
+		gap: $space-2;
 	}
 
 	&.-ds-small {
-		gap: $space-2xs;
+		gap: $space-4;
 	}
 
 	&.-ds-medium {
-		gap: $space-2xs;
+		gap: $space-4;
 	}
 
 	&:not(.-ds-disabled) {
@@ -67,9 +67,9 @@
 	}
 
 	&__root {
-		$checkbox-root-xs-space: $space-3xs;
-		$checkbox-root-s-space: $space-3xs;
-		$checkbox-root-m-space: $space-2xs;
+		$checkbox-root-xs-space: $space-3;
+		$checkbox-root-s-space: $space-3;
+		$checkbox-root-m-space: $space-4;
 
 		--checkbox-circle-background-color-focused: #{$color-primary-background-ghost-focused};
 		--checkbox-circle-background-color-hovered: #{$color-primary-background-ghost-hovered};

package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.vue

@@ -36,7 +36,7 @@
 .ds-checkboxGroupField {
 	display: flex;
 	flex-direction: column;
-	gap: $space-2xs;
+	gap: $space-4;
 }
 </style>
 

package/lib/js/components/Form/FormControlLabel/FormControlLabel.vue

@@ -25,19 +25,19 @@
 	&.-ds-x-small {
 		@include formLabel-s-default-regular;
 
-		padding: $space-4xs 0;
+		padding: $space-2 0;
 	}
 
 	&.-ds-small {
 		@include formLabel-m-default-regular;
 
-		padding: $space-3xs 0;
+		padding: $space-3 0;
 	}
 
 	&.-ds-medium {
 		@include formLabel-l-default-regular;
 
-		padding: $space-2xs 0;
+		padding: $space-4 0;
 	}
 
 	&.-ds-disabled {

package/lib/js/components/Form/FormField/FormField.vue

@@ -58,19 +58,19 @@
 
 	display: flex;
 	flex-direction: column;
-	gap: $space-5xs;
+	gap: $space-1;
 
 	&__labelRow {
 		align-items: flex-start;
 		display: flex;
-		gap: $space-xs;
+		gap: $space-6;
 	}
 
 	&__subLabelRow {
 		@include formLabel-s-default-regular;
 
 		color: $color-neutral-text;
-		padding-bottom: $space-2xs;
+		padding-bottom: $space-4;
 
 		#{$root}.-ds-disabled & {
 			color: $color-neutral-text-disabled;
@@ -81,14 +81,14 @@
 		align-items: flex-start;
 		display: flex;
 		flex: 1 0 0;
-		gap: $space-5xs;
-		padding: $space-4xs 0;
+		gap: $space-1;
+		padding: $space-2 0;
 	}
 
 	&__label {
 		@include formLabel-m-default-bold;
 
-		margin: $space-5xs 0;
+		margin: $space-1 0;
 	}
 
 	&__labelText {
@@ -103,7 +103,7 @@
 		@include formLabel-m-default-regular;
 
 		color: $color-danger-text;
-		margin-left: $space-5xs;
+		margin-left: $space-1;
 
 		#{$root}.-ds-disabled & {
 			color: $color-danger-text-disabled;
@@ -114,7 +114,7 @@
 		@include formLabel-s-default-regular-italic;
 
 		color: $color-neutral-text;
-		margin-left: $space-5xs;
+		margin-left: $space-1;
 
 		#{$root}.-ds-disabled & {
 			color: $color-neutral-text-disabled;
@@ -124,7 +124,7 @@
 	&__labelAside {
 		align-items: center;
 		display: flex;
-		gap: $space-4xs;
+		gap: $space-2;
 		min-height: 28px;
 	}
 
@@ -139,8 +139,8 @@
 	&__footerRow {
 		align-items: flex-start;
 		display: flex;
-		gap: $space-2xs;
-		padding-top: $space-4xs;
+		gap: $space-4;
+		padding-top: $space-2;
 	}
 
 	&__message {
@@ -150,7 +150,7 @@
 	&__fieldStatus {
 		align-items: flex-start;
 		display: flex;
-		gap: $space-4xs;
+		gap: $space-2;
 	}
 }
 </style>

package/lib/js/components/Form/FormField/FormFieldMessage/FormFieldMessage.vue

@@ -30,7 +30,7 @@
 
 	color: $color-neutral-text;
 	display: flex;
-	gap: $space-4xs;
+	gap: $space-2;
 
 	&.-ds-error {
 		color: $color-danger-text;

package/lib/js/components/Form/InputField/InputField.vue

@@ -64,9 +64,9 @@
 	border-radius: $radius-s;
 	box-shadow: $shadow-inset-m;
 	display: flex;
-	gap: $space-2xs;
+	gap: $space-4;
 	height: 32px;
-	padding: 0 $space-2xs;
+	padding: 0 $space-4;
 
 	&:focus-within {
 		border-color: $color-primary-border;