@bethinkpl/design-system 36.2.0 → 37.0.0

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

@@ -37,22 +37,22 @@
 
 $selection-control-sizes: (
 	'x-small': (
-		'gap': $space-4xs,
-		'iconWrapperPadding': $space-3xs,
-		'labelWrapperPadding': $space-4xs,
-		'iconOutlinePadding': $space-3xs,
+		'gap': $space-2,
+		'iconWrapperPadding': $space-3,
+		'labelWrapperPadding': $space-2,
+		'iconOutlinePadding': $space-3,
 	),
 	'small': (
-		'gap': $space-2xs,
-		'iconWrapperPadding': $space-3xs,
-		'labelWrapperPadding': $space-3xs,
-		'iconOutlinePadding': $space-3xs,
+		'gap': $space-4,
+		'iconWrapperPadding': $space-3,
+		'labelWrapperPadding': $space-3,
+		'iconOutlinePadding': $space-3,
 	),
 	'medium': (
-		'gap': $space-2xs,
-		'iconWrapperPadding': $space-2xs,
-		'labelWrapperPadding': $space-2xs,
-		'iconOutlinePadding': $space-2xs,
+		'gap': $space-4,
+		'iconWrapperPadding': $space-4,
+		'labelWrapperPadding': $space-4,
+		'iconOutlinePadding': $space-4,
 	),
 );
 

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue

@@ -131,27 +131,27 @@
 	border-bottom: 2px solid $color-neutral-border-ghost;
 	box-shadow: $shadow-s;
 	display: flex;
-	padding: $space-2xs $space-3xs $space-2xs 0;
+	padding: $space-4 $space-3 $space-4 0;
 
 	@media #{breakpoint-s()} {
-		padding: $space-xs $space-2xs $space-xs 0;
+		padding: $space-6 $space-4 $space-6 0;
 	}
 
 	&__accessory {
 		align-self: stretch;
-		margin-left: $space-xs;
+		margin-left: $space-6;
 	}
 
 	&__loadingWrapper {
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
-		gap: $space-3xs;
-		margin: 0 $space-4xs 0 $space-xs;
+		gap: $space-3;
+		margin: 0 $space-2 0 $space-6;
 
 		@media #{breakpoint-s()} {
-			gap: $space-2xs;
-			margin: 0 $space-2xs 0 $space-s;
+			gap: $space-4;
+			margin: 0 $space-4 0 $space-8;
 		}
 	}
 
@@ -173,22 +173,22 @@
 
 	&__content {
 		flex-grow: 1;
-		margin: 0 $space-4xs 0 $space-xs;
+		margin: 0 $space-2 0 $space-6;
 		// We need to set min-width to allow children to apply ellipsis
 		min-width: 0;
 
 		@media #{breakpoint-s()} {
-			margin: 0 $space-2xs 0 $space-s;
+			margin: 0 $space-4 0 $space-8;
 		}
 	}
 
 	&__eyebrow {
 		align-items: center;
 		display: flex;
-		margin-bottom: $space-3xs;
+		margin-bottom: $space-3;
 
 		@media #{breakpoint-s()} {
-			margin-bottom: $space-2xs;
+			margin-bottom: $space-4;
 		}
 	}
 
@@ -201,7 +201,7 @@
 		white-space: nowrap;
 
 		&.-ds-withRightMargin {
-			margin-right: $space-2xs;
+			margin-right: $space-4;
 		}
 	}
 
@@ -214,7 +214,7 @@
 	&__main {
 		align-items: center;
 		display: flex;
-		gap: $space-2xs;
+		gap: $space-4;
 		// title is required, but in some edge-cases we don't render it. We need to set min-height to avoid jumping
 		// Keep value in sync with &__title line-height
 		min-height: $typography-line-height-s;
@@ -276,10 +276,10 @@
 	&__divider {
 		align-self: stretch;
 		height: auto !important;
-		margin: $space-4xs $space-3xs;
+		margin: $space-2 $space-3;
 
 		@media #{breakpoint-s()} {
-			margin: $space-4xs $space-2xs;
+			margin: $space-2 $space-4;
 		}
 	}
 

package/lib/js/components/Headers/PageHeader/PageHeader.vue

@@ -39,15 +39,15 @@
 		align-items: flex-start;
 		display: flex;
 		flex-direction: column;
-		gap: $space-2xs;
-		padding: $space-2xs 0;
+		gap: $space-4;
+		padding: $space-4 0;
 	}
 
 	&__contentWrapper {
 		align-items: flex-start;
 		display: flex;
 		flex-direction: column;
-		gap: $space-2xs;
+		gap: $space-4;
 		justify-content: space-between;
 		padding: 0;
 		width: 100%;
@@ -62,9 +62,9 @@
 		align-items: flex-start;
 		display: flex;
 		flex-direction: column;
-		gap: $space-4xs;
+		gap: $space-2;
 		justify-content: center;
-		padding: $space-4xs 0;
+		padding: $space-2 0;
 	}
 
 	&__title {

package/lib/js/components/Headers/SectionHeader/SectionHeader.vue

@@ -107,16 +107,16 @@
 		align-items: center;
 		display: flex;
 		flex-direction: row;
-		gap: $space-2xs;
+		gap: $space-4;
 		justify-content: space-between;
-		padding: $space-4xs 0;
+		padding: $space-2 0;
 	}
 
 	&__supportingText {
 		@include text-s-compact-regular;
 
 		color: $color-neutral-text;
-		padding: 0 0 $space-xs;
+		padding: 0 0 $space-6;
 
 		&.-ds-withoutPadding {
 			padding: 0;
@@ -126,7 +126,7 @@
 	&__header {
 		align-items: center;
 		display: flex;
-		gap: $space-2xs;
+		gap: $space-4;
 		min-width: 0;
 		width: 100%;
 
@@ -172,9 +172,9 @@
 	&__titleContainer {
 		display: flex;
 		flex-direction: column;
-		gap: $space-5xs;
+		gap: $space-1;
 		min-width: 0;
-		padding: $space-2xs 0;
+		padding: $space-4 0;
 	}
 
 	&__title {
@@ -190,7 +190,7 @@
 
 	&__info {
 		line-height: 0;
-		padding: $space-3xs 0;
+		padding: $space-3 0;
 	}
 
 	&__eyebrow {
@@ -201,7 +201,7 @@
 
 	&.-ds-size-large {
 		#{$root}__main {
-			padding: $space-5xs 0;
+			padding: $space-1 0;
 		}
 
 		#{$root}__header {
@@ -209,11 +209,11 @@
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-2xs;
+			gap: $space-4;
 		}
 
 		#{$root}__info {
-			padding: $space-2xs 0;
+			padding: $space-4 0;
 		}
 
 		#{$root}__eyebrow {
@@ -227,11 +227,11 @@
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-2xs;
+			gap: $space-4;
 		}
 
 		#{$root}__info {
-			padding: $space-2xs 0;
+			padding: $space-4 0;
 		}
 
 		#{$root}__eyebrow {
@@ -241,7 +241,7 @@
 
 	&.-ds-size-small {
 		#{$root}__main {
-			padding: $space-5xs 0;
+			padding: $space-1 0;
 		}
 
 		#{$root}__header {
@@ -249,21 +249,21 @@
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-3xs;
+			gap: $space-3;
 		}
 
 		#{$root}__info {
-			padding: $space-2xs 0;
+			padding: $space-4 0;
 		}
 	}
 
 	&.-ds-size-x-small {
 		#{$root}__main {
-			padding: $space-5xs 0;
+			padding: $space-1 0;
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-3xs;
+			gap: $space-3;
 		}
 
 		#{$root}__header {
@@ -273,11 +273,11 @@
 
 	&.-ds-size-xx-small {
 		#{$root}__main {
-			padding: $space-5xs 0;
+			padding: $space-1 0;
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-3xs;
+			gap: $space-3;
 		}
 
 		#{$root}__header {
@@ -320,7 +320,7 @@
 
 	&__slotVertical {
 		display: block;
-		padding: 0 0 $space-3xs;
+		padding: 0 0 $space-3;
 
 		@media #{breakpoint-s()} {
 			display: none;

package/lib/js/components/IconText/IconText.vue

@@ -85,7 +85,7 @@
 		}
 
 		#{$root}__icon {
-			margin-right: $space-4xs;
+			margin-right: $space-2;
 		}
 	}
 
@@ -97,7 +97,7 @@
 		}
 
 		#{$root}__icon {
-			padding-top: $space-5xs;
+			padding-top: $space-1;
 		}
 	}
 
@@ -115,7 +115,7 @@
 	}
 
 	&__icon {
-		margin-right: $space-3xs;
+		margin-right: $space-3;
 	}
 }
 </style>

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue

@@ -109,28 +109,28 @@ $feature-icon-padding-large: 10px;
 
 	border-radius: 100%;
 	border-style: solid;
-	border-width: $space-3xs;
+	border-width: $space-3;
 	display: inline-flex;
-	padding: $space-3xs;
+	padding: $space-3;
 
 	&.-ds-xSmall {
-		border-width: $space-5xs;
-		padding: $space-5xs;
+		border-width: $space-1;
+		padding: $space-1;
 	}
 
 	&.-ds-small {
-		border-width: $space-4xs;
-		padding: $space-4xs;
+		border-width: $space-2;
+		padding: $space-2;
 	}
 
 	&.-ds-large {
-		border-width: $space-3xs;
+		border-width: $space-3;
 		padding: $feature-icon-padding-large;
 	}
 
 	&.-ds-xLarge {
-		border-width: $space-2xs;
-		padding: $space-xs;
+		border-width: $space-4;
+		padding: $space-6;
 	}
 }
 </style>

package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue

@@ -137,7 +137,7 @@ $right-column-large-l-max-width: $right-column-large-max-width;
 	&__content {
 		margin: 0 auto;
 		max-width: $content-column-max-width;
-		padding: $space-s;
+		padding: $space-8;
 
 		&.-ds-noPadding {
 			padding: 0;

package/lib/js/components/Menu/Menu/Menu.vue

@@ -17,12 +17,12 @@
 .ds-menu {
 	display: flex;
 	flex-direction: column;
-	gap: $space-5xs;
+	gap: $space-1;
 	margin: 0;
 	padding: 0;
 
 	&.-ds-extensive {
-		gap: $space-2xs;
+		gap: $space-4;
 	}
 }
 </style>

package/lib/js/components/Menu/MenuDivider/MenuDivider.vue

@@ -9,7 +9,7 @@
 
 .ds-menuDivider {
 	list-style-type: none;
-	padding: $space-3xs 0;
+	padding: $space-3 0;
 }
 </style>
 

package/lib/js/components/Menu/MenuItem/MenuItem.vue

@@ -120,15 +120,15 @@
 
 .ds-menuItem {
 	$root: &;
-	$menu-item-horizontal-padding: $space-xs;
-	$menu-item-expandable-horizontal-padding: $space-4xs;
+	$menu-item-horizontal-padding: $space-6;
+	$menu-item-expandable-horizontal-padding: $space-2;
 
 	@for $i from 2 through 6 {
 		&.-ds-level#{$i} {
-			padding-left: $menu-item-horizontal-padding + ($i - 1) * $space-2xs;
+			padding-left: $menu-item-horizontal-padding + ($i - 1) * $space-4;
 
 			&.-ds-expandable {
-				padding-left: $menu-item-expandable-horizontal-padding + ($i - 1) * $space-2xs;
+				padding-left: $menu-item-expandable-horizontal-padding + ($i - 1) * $space-4;
 			}
 		}
 	}
@@ -136,11 +136,11 @@
 	align-items: center;
 	background-color: $color-neutral-background-weak;
 	border-radius: $radius-s;
-	column-gap: $space-2xs;
+	column-gap: $space-4;
 	display: flex;
 	justify-content: space-between;
 	min-height: 40px;
-	padding: $space-2xs $space-2xs $space-2xs $menu-item-horizontal-padding;
+	padding: $space-4 $space-4 $space-4 $menu-item-horizontal-padding;
 	text-decoration: none;
 
 	&.-ds-expandable {
@@ -159,7 +159,7 @@
 	}
 
 	&__rightContent {
-		column-gap: $space-2xs;
+		column-gap: $space-4;
 
 		&.-ds-centeredContent {
 			align-items: center;
@@ -187,7 +187,7 @@
 		align-items: center;
 		color: $color-neutral-icon-weak;
 		display: flex;
-		margin-right: $space-5xs;
+		margin-right: $space-1;
 	}
 
 	&__expanderDotWrapper {
@@ -196,7 +196,7 @@
 		display: inline-flex;
 		height: 20px;
 		justify-content: center;
-		margin-right: $space-5xs;
+		margin-right: $space-1;
 		width: 20px;
 	}
 
@@ -204,14 +204,14 @@
 		align-items: flex-start;
 		display: flex;
 		flex: 1 0 0;
-		padding: $space-5xs 0;
+		padding: $space-1 0;
 	}
 
 	&__index {
 		@include label-l-default-bold;
 
 		color: $color-neutral-text-weak;
-		margin-right: $space-3xs;
+		margin-right: $space-3;
 
 		&.-ds-active {
 			color: $color-primary-text;
@@ -248,12 +248,12 @@
 		@include label-m-default-bold;
 
 		color: $color-neutral-text-weak;
-		margin-left: $space-4xs;
+		margin-left: $space-2;
 	}
 
 	&__icon {
 		color: $color-neutral-icon-weak;
-		margin-right: $space-4xs;
+		margin-right: $space-2;
 
 		&.-ds-active {
 			color: $color-primary-icon;
@@ -299,7 +299,7 @@
 
 	&.-ds-medium {
 		min-height: 48px;
-		padding: $space-s $space-2xs $space-s $space-xs;
+		padding: $space-8 $space-4 $space-8 $space-6;
 
 		#{$root}__label {
 			@include label-l-default-bold;

package/lib/js/components/Modal/Modal.vue

@@ -56,25 +56,25 @@
 		box-shadow: $shadow-xl;
 		display: flex;
 		flex-direction: column;
-		margin: $space-xl $space-s $space-l;
-		max-height: calc(100vh - #{$space-xl + $space-l});
+		margin: $space-20 $space-8 $space-16;
+		max-height: calc(100vh - #{$space-20 + $space-16});
 		overflow: hidden;
 		position: relative;
 		width: 100%;
 
 		@media #{breakpoint-m()} {
-			margin: $space-2xl auto $space-xl;
-			max-height: calc(100vh - #{$space-2xl + $space-xl});
+			margin: $space-28 auto $space-20;
+			max-height: calc(100vh - #{$space-28 + $space-20});
 			width: 640px;
 		}
 	}
 
 	&__header {
 		align-items: center;
-		box-shadow: 0 $space-4xs $space-4xs var(--raw-white);
+		box-shadow: 0 $space-2 $space-2 var(--raw-white);
 		display: flex;
 		justify-content: space-between;
-		padding: $space-xs $space-xs $space-3xs;
+		padding: $space-6 $space-6 $space-3;
 		z-index: 1;
 
 		&__close {
@@ -87,18 +87,18 @@
 	}
 
 	&__footer {
-		padding: $space-m 0;
+		padding: $space-12 0;
 		text-align: center;
 	}
 
 	&__content {
 		overflow: auto;
-		padding: $space-s;
+		padding: $space-8;
 
 		&__shadow {
-			box-shadow: 0 #{-$space-4xs} $space-4xs var(--raw-white);
+			box-shadow: 0 #{-$space-2} $space-2 var(--raw-white);
 			content: ' ';
-			height: $space-4xs;
+			height: $space-2;
 			z-index: 1;
 		}
 	}

package/lib/js/components/Modals/Modal/Modal.vue

@@ -147,14 +147,14 @@ $image-height-small: 140px;
 	height: 100%;
 	justify-content: center;
 	left: 0;
-	padding: $space-l $space-s;
+	padding: $space-16 $space-8;
 	position: fixed;
 	top: 0;
 	width: 100%;
 	z-index: $z-index-modal;
 
 	@media #{breakpoint-s()} {
-		padding: $space-l;
+		padding: $space-16;
 	}
 
 	&__wrapper {
@@ -166,7 +166,7 @@ $image-height-small: 140px;
 		max-height: 100%;
 		max-width: $modal-medium-width;
 		overflow: hidden;
-		padding-top: $space-xl;
+		padding-top: $space-20;
 		position: relative;
 		width: 100%;
 
@@ -190,8 +190,8 @@ $image-height-small: 140px;
 
 			@media #{breakpoint-s()} {
 				#{$self}__content {
-					padding-left: $space-m;
-					padding-right: $space-m;
+					padding-left: $space-12;
+					padding-right: $space-12;
 				}
 			}
 
@@ -209,10 +209,10 @@ $image-height-small: 140px;
 	&__content {
 		display: flex;
 		flex-direction: column;
-		padding: 0 $space-s 0;
+		padding: 0 $space-8 0;
 
 		@media #{breakpoint-s()} {
-			padding: 0 $space-xl 0;
+			padding: 0 $space-20 0;
 		}
 		&.-ds-centered {
 			#{$self}__header,
@@ -225,13 +225,13 @@ $image-height-small: 140px;
 	&__header {
 		display: flex;
 		flex-direction: column;
-		margin-bottom: $space-s;
-		row-gap: $space-xs;
+		margin-bottom: $space-8;
+		row-gap: $space-6;
 	}
 
 	&__headerFeatureIcon {
 		align-self: center;
-		margin-bottom: $space-xs;
+		margin-bottom: $space-6;
 	}
 
 	&__headerTitle {
@@ -272,13 +272,13 @@ $image-height-small: 140px;
 
 		color: $color-neutral-text-heavy;
 		cursor: pointer;
-		margin-left: $space-2xs;
+		margin-left: $space-4;
 	}
 
 	&__rightActions {
 		position: absolute;
-		right: $space-4xs;
-		top: $space-4xs;
+		right: $space-2;
+		top: $space-2;
 		// z-index needs to be higher than 0 to cover the content elements with `position: relative`
 		z-index: 1;
 	}
@@ -289,7 +289,7 @@ $image-height-small: 140px;
 	}
 
 	&__footerWrapper {
-		padding-bottom: $space-l;
+		padding-bottom: $space-16;
 
 		&.-ds-stickyFooter {
 			background: $color-default-background;
@@ -299,12 +299,12 @@ $image-height-small: 140px;
 	}
 
 	&__footer {
-		column-gap: $space-s;
+		column-gap: $space-8;
 		display: flex;
 		flex-direction: column-reverse;
 		justify-content: space-between;
 		line-break: anywhere;
-		padding-top: $space-m;
+		padding-top: $space-12;
 
 		@media #{breakpoint-s()} {
 			align-items: center;
@@ -331,16 +331,16 @@ $image-height-small: 140px;
 		display: flex;
 		flex-direction: column-reverse;
 		flex-shrink: 0;
-		gap: $space-s 0;
+		gap: $space-8 0;
 
 		@media #{breakpoint-s()} {
 			flex-direction: row;
-			gap: 0 $space-s;
+			gap: 0 $space-8;
 		}
 
 		&:not(:first-child) {
 			// first-child because of reverse order in flex-direction
-			margin-bottom: $space-xs;
+			margin-bottom: $space-6;
 
 			@media #{breakpoint-s()} {
 				margin-bottom: 0;
@@ -351,7 +351,7 @@ $image-height-small: 140px;
 	&__footerCtaSecondary {
 		align-items: center;
 		display: flex;
-		gap: 0 $space-m;
+		gap: 0 $space-12;
 		justify-content: space-between;
 
 		@media #{breakpoint-s()} {

package/lib/js/components/NumberInCircle/NumberInCircle.vue

@@ -28,7 +28,7 @@
 	height: $icon-xl;
 	justify-content: center;
 	min-width: $icon-xl;
-	padding: 0 $space-3xs;
+	padding: 0 $space-3;
 	text-align: center;
 
 	@media #{breakpoint-s()} {