@bethinkpl/design-system 36.1.2 → 37.0.0

package/lib/js/components/Pagination/Pagination.vue

@@ -187,7 +187,7 @@ $pagination-input-height: 32px;
 		border-radius: $radius-s;
 		box-shadow: inset 0 1px 3px $color-neutral-border-strong;
 		height: $pagination-input-height;
-		padding: $space-3xs $space-2xs;
+		padding: $space-3 $space-4;
 
 		&:hover {
 			border-color: $color-neutral-border-strong-hovered;
@@ -203,7 +203,7 @@ $pagination-input-height: 32px;
 		@include label-l-default-regular;
 
 		color: $color-neutral-text;
-		padding: $space-2xs $space-3xs;
+		padding: $space-4 $space-3;
 		text-align: center;
 	}
 
@@ -216,7 +216,7 @@ $pagination-input-height: 32px;
 	&__itemWrapper {
 		@include label-l-default-regular;
 
-		padding: $space-4xs;
+		padding: $space-2;
 		text-align: center;
 
 		&.-ds-touchable:hover {
@@ -237,7 +237,7 @@ $pagination-input-height: 32px;
 		flex-direction: column;
 		justify-content: center;
 		min-width: $pagination-item-min-width;
-		padding: $space-2xs;
+		padding: $space-4;
 
 		&.-ds-selected {
 			@include label-l-default-bold;

package/lib/js/components/PopOver/PopOver.vue

@@ -104,74 +104,74 @@
 	}
 
 	&[x-placement^='bottom'] {
-		margin-top: $space-4xs;
+		margin-top: $space-2;
 
 		&.-ds-visible-arrow {
-			margin-top: $space-s + $space-4xs;
+			margin-top: $space-8 + $space-2;
 		}
 
 		/* stylelint-disable-next-line selector-class-pattern */
 		:deep(.popper__arrow) {
 			border-color: transparent transparent $color-inverted-border transparent;
-			border-width: 0 $space-xs $space-s $space-xs;
-			left: calc(50% - #{$space-xs});
+			border-width: 0 $space-6 $space-8 $space-6;
+			left: calc(50% - #{$space-6});
 			margin-bottom: 0;
 			margin-top: 0;
-			top: -$space-s;
+			top: -$space-8;
 		}
 	}
 
 	&[x-placement^='top'] {
-		margin-bottom: $space-4xs;
+		margin-bottom: $space-2;
 
 		&.-ds-visible-arrow {
-			margin-bottom: $space-s + $space-4xs;
+			margin-bottom: $space-8 + $space-2;
 		}
 
 		/* stylelint-disable-next-line selector-class-pattern */
 		:deep(.popper__arrow) {
 			border-color: $color-inverted-border transparent transparent transparent;
-			border-width: $space-s $space-xs 0 $space-xs;
-			bottom: -$space-s;
-			left: calc(50% - #{$space-xs});
+			border-width: $space-8 $space-6 0 $space-6;
+			bottom: -$space-8;
+			left: calc(50% - #{$space-6});
 			margin-bottom: 0;
 			margin-top: 0;
 		}
 	}
 
 	&[x-placement^='right'] {
-		margin-left: $space-4xs;
+		margin-left: $space-2;
 
 		&.-ds-visible-arrow {
-			margin-left: $space-s + $space-4xs;
+			margin-left: $space-8 + $space-2;
 		}
 
 		/* stylelint-disable-next-line selector-class-pattern */
 		:deep(.popper__arrow) {
 			border-color: transparent $color-inverted-border transparent transparent;
-			border-width: $space-xs $space-s $space-xs 0;
-			left: -$space-s;
+			border-width: $space-6 $space-8 $space-6 0;
+			left: -$space-8;
 			margin-left: 0;
 			margin-right: 0;
-			top: calc(50% - #{$space-xs});
+			top: calc(50% - #{$space-6});
 		}
 	}
 
 	&[x-placement^='left'] {
-		margin-right: $space-4xs;
+		margin-right: $space-2;
 
 		&.-ds-visible-arrow {
-			margin-right: $space-s + $space-4xs;
+			margin-right: $space-8 + $space-2;
 		}
 
 		/* stylelint-disable-next-line selector-class-pattern */
 		:deep(.popper__arrow) {
 			border-color: transparent transparent transparent $color-inverted-border;
-			border-width: $space-xs 0 $space-xs $space-s;
+			border-width: $space-6 0 $space-6 $space-8;
 			margin-left: 0;
 			margin-right: 0;
-			right: -$space-s;
-			top: calc(50% - #{$space-xs});
+			right: -$space-8;
+			top: calc(50% - #{$space-6});
 		}
 	}
 
@@ -185,7 +185,7 @@
 		@include text-m-default-regular;
 
 		color: $color-neutral-text-heavy;
-		padding: $space-s;
+		padding: $space-8;
 		// Override popperjs styles
 		text-align: left;
 	}
@@ -194,19 +194,19 @@
 		@include heading-m-default-bold;
 
 		color: $color-default-text;
-		margin-bottom: $space-2xs;
+		margin-bottom: $space-4;
 	}
 
 	&__subtitle {
 		@include heading-s-default-regular;
 
 		color: $color-neutral-text;
-		margin-bottom: $space-2xs;
+		margin-bottom: $space-4;
 	}
 
 	&__button {
 		align-self: flex-end;
-		margin: 0 $space-s $space-xs;
+		margin: 0 $space-8 $space-6;
 	}
 }
 </style>

package/lib/js/components/ProgressBar/ProgressBar.vue

@@ -177,7 +177,7 @@ $progress-bar-badge-colors: (
 		}
 
 		#{$self}__label {
-			margin-bottom: $space-3xs;
+			margin-bottom: $space-3;
 		}
 	}
 
@@ -225,10 +225,10 @@ $progress-bar-badge-colors: (
 		align-items: flex-end;
 		display: flex;
 		justify-content: space-between;
-		margin-bottom: $space-3xs;
+		margin-bottom: $space-3;
 
 		@media #{breakpoint-s()} {
-			margin-bottom: $space-3xs;
+			margin-bottom: $space-3;
 		}
 	}
 
@@ -300,12 +300,12 @@ $progress-bar-badge-colors: (
 	&__bottomWrapper {
 		align-items: center;
 		display: flex;
-		gap: $space-4xs;
+		gap: $space-2;
 		justify-content: space-between;
 	}
 
 	&__labelDataWrapperTop {
-		margin-bottom: $space-5xs;
+		margin-bottom: $space-1;
 	}
 
 	&__labelDataWrapperBottom {

package/lib/js/components/ProgressBar/ProgressBarLabelDataWrapper.vue

@@ -31,24 +31,24 @@ $progress-bar-label-data-max-width: 30%;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: right;
-	margin-left: $space-2xs;
+	margin-left: $space-4;
 	max-width: $progress-bar-label-data-max-width;
 
 	&__labelDataSupporting {
 		color: $color-neutral-text;
 		display: flex;
-		margin-left: $space-5xs;
+		margin-left: $space-1;
 	}
 
 	&__labelDataSeparator {
-		margin-right: $space-5xs;
+		margin-right: $space-1;
 	}
 
 	&__labelDataSuffix {
 		@include label-s-default-regular;
 
 		color: $color-neutral-text-weak;
-		margin-left: $space-4xs;
+		margin-left: $space-2;
 	}
 }
 </style>

package/lib/js/components/ProgressBar/ProgressBarLegend.vue

@@ -25,15 +25,15 @@
 .ds-progressBarLegend {
 	display: flex;
 	flex-wrap: wrap;
-	gap: $space-xs $space-m;
-	padding-top: $space-xs;
+	gap: $space-6 $space-12;
+	padding-top: $space-6;
 
 	&.-ds-compact {
-		gap: $space-2xs $space-s;
+		gap: $space-4 $space-8;
 	}
 
 	&.-ds-small {
-		padding-top: $space-2xs;
+		padding-top: $space-4;
 	}
 }
 </style>

package/lib/js/components/ProgressBar/ProgressBarLegendItem.vue

@@ -166,7 +166,7 @@ $progress-bar-legend-item-colors: (
 	align-items: flex-start;
 	display: inline-flex;
 	flex-direction: column;
-	gap: $space-4xs;
+	gap: $space-2;
 
 	&__label {
 		@include label-xs-extensive-bold-uppercase;
@@ -177,7 +177,7 @@ $progress-bar-legend-item-colors: (
 	&__wrapper {
 		align-items: center;
 		display: flex;
-		gap: $space-4xs;
+		gap: $space-2;
 	}
 
 	&__dataIndicator {
@@ -192,16 +192,16 @@ $progress-bar-legend-item-colors: (
 		align-items: center;
 		border-radius: 100px;
 		display: flex;
-		height: $space-m;
+		height: $space-12;
 		justify-content: center;
-		margin-right: $space-5xs;
-		width: $space-m;
+		margin-right: $space-1;
+		width: $space-12;
 	}
 
 	&__dataWrapper {
 		align-items: baseline;
 		display: flex;
-		gap: $space-5xs;
+		gap: $space-1;
 	}
 
 	&__data {
@@ -224,8 +224,8 @@ $progress-bar-legend-item-colors: (
 		}
 
 		#{$self}__dataIndicator {
-			height: $space-s;
-			width: $space-s;
+			height: $space-8;
+			width: $space-8;
 		}
 	}
 }

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue

@@ -178,7 +178,7 @@ $progress-donut-chart-range-colors: (
 
 		&.-ds-hasOverage {
 			color: $color-success-text;
-			margin-left: -$space-5xs;
+			margin-left: -$space-1;
 		}
 	}
 
@@ -189,7 +189,7 @@ $progress-donut-chart-range-colors: (
 		border-radius: 100%;
 		color: $color-neutral-text;
 		height: $progress-donut-chart-loading-dot-size;
-		margin-top: $space-3xs;
+		margin-top: $space-3;
 		position: relative;
 		width: $progress-donut-chart-loading-dot-size;
 

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue

@@ -72,15 +72,15 @@
 	&__content {
 		display: flex;
 		flex-direction: column;
-		gap: $space-4xs;
+		gap: $space-2;
 		justify-content: center;
 		min-width: 0; // to prevent the component from being pushed by the ellipses
-		padding: $space-xs 0;
+		padding: $space-6 0;
 	}
 
 	&.-ds-small {
 		#{$root}__content {
-			padding: $space-2xs 0;
+			padding: $space-4 0;
 		}
 	}
 

package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue

@@ -85,7 +85,7 @@ $group-rich-list-background-colors: (
 		left: -1px;
 		position: absolute;
 		top: -1px;
-		width: $space-4xs;
+		width: $space-2;
 	}
 }
 </style>

package/lib/js/components/RichList/RichListItem/RichListItem.vue

@@ -129,7 +129,7 @@ $rich-list-item-media-horizontal-height: 80px;
 		align-items: center;
 		flex-direction: initial;
 		justify-content: initial;
-		padding: 0 $space-4xs 0 calc($space-4xs - $border-xs);
+		padding: 0 $space-2 0 calc($space-2 - $border-xs);
 
 		#{$root}__container {
 			align-self: initial;
@@ -138,63 +138,63 @@ $rich-list-item-media-horizontal-height: 80px;
 		#{$root}__dragAndDrop,
 		#{$root}__iconWrapper {
 			align-items: center;
-			padding: $space-3xs $space-5xs $space-3xs $space-s;
+			padding: $space-3 $space-1 $space-3 $space-8;
 		}
 
 		#{$root}__content {
-			padding: 0 $space-4xs 0 $space-s;
+			padding: 0 $space-2 0 $space-8;
 		}
 
 		#{$root}__metadata {
 			justify-content: flex-start;
-			padding-left: $space-4xs;
+			padding-left: $space-2;
 		}
 
 		#{$root}__rightContainer {
 			align-items: center;
 			justify-content: initial;
-			padding: $space-xs 0;
+			padding: $space-6 0;
 		}
 
 		#{$root}__actionSlot {
 			align-items: center;
 			justify-content: initial;
-			padding: 0 $space-4xs;
+			padding: 0 $space-2;
 		}
 
 		#{$root}__checkbox {
 			align-items: center;
-			padding: 0 $space-s 0 $space-4xs;
+			padding: 0 $space-8 0 $space-2;
 		}
 
 		&.-ds-small {
-			padding: 0 $space-4xs 0 0;
+			padding: 0 $space-2 0 0;
 
 			#{$root}__dragAndDrop,
 			#{$root}__iconWrapper {
-				padding: $space-3xs 0 $space-3xs $space-xs;
+				padding: $space-3 0 $space-3 $space-6;
 			}
 
 			#{$root}__content {
-				padding: 0 $space-4xs 0 $space-xs;
+				padding: 0 $space-2 0 $space-6;
 			}
 
 			#{$root}__checkbox {
-				gap: $space-xs;
-				padding: 0 $space-xs 0 $space-4xs;
+				gap: $space-6;
+				padding: 0 $space-6 0 $space-2;
 			}
 
 			#{$root}__rightContainer {
-				padding: $space-2xs 0;
+				padding: $space-4 0;
 			}
 
 			#{$root}__actionSlot {
-				padding: 0 $space-4xs;
+				padding: 0 $space-2;
 			}
 
 			#{$root}__metadata {
 				justify-content: flex-start;
-				padding-left: $space-4xs;
+				padding-left: $space-2;
 			}
 		}
 	}
@@ -203,26 +203,26 @@ $rich-list-item-media-horizontal-height: 80px;
 		align-items: flex-start;
 		flex-direction: column;
 		justify-content: center;
-		padding-bottom: $space-4xs;
+		padding-bottom: $space-2;
 
 		#{$root}__container {
 			align-self: stretch;
-			padding: $space-4xs $space-4xs 0;
+			padding: $space-2 $space-2 0;
 		}
 
 		#{$root}__dragAndDrop,
 		#{$root}__iconWrapper {
 			align-items: flex-start;
-			padding: $space-xs 0 0 $space-xs;
+			padding: $space-6 0 0 $space-6;
 		}
 
 		#{$root}__content {
-			padding: 0 $space-4xs 0 $space-xs;
+			padding: 0 $space-2 0 $space-6;
 		}
 
 		#{$root}__metadata {
-			padding-left: $space-s;
-			padding-right: $space-2xs;
+			padding-left: $space-8;
+			padding-right: $space-4;
 			width: 100%;
 		}
 
@@ -234,35 +234,35 @@ $rich-list-item-media-horizontal-height: 80px;
 		#{$root}__actionSlot {
 			align-items: flex-start;
 			justify-content: flex-end;
-			padding: $space-4xs $space-4xs 0 $space-4xs;
+			padding: $space-2 $space-2 0 $space-2;
 		}
 
 		#{$root}__checkbox {
 			align-items: flex-start;
-			padding: $space-3xs $space-xs 0 $space-xs;
+			padding: $space-3 $space-6 0 $space-6;
 		}
 
 		&.-ds-small {
 			#{$root}__dragAndDrop,
 			#{$root}__iconWrapper {
-				padding: $space-2xs $space-4xs 0 $space-2xs;
+				padding: $space-4 $space-2 0 $space-4;
 			}
 
 			#{$root}__content {
-				padding: 0 $space-4xs 0 $space-2xs;
+				padding: 0 $space-2 0 $space-4;
 			}
 
 			#{$root}__checkbox {
-				gap: $space-s;
-				padding: $space-5xs $space-2xs 0 $space-2xs;
+				gap: $space-8;
+				padding: $space-1 $space-4 0 $space-4;
 			}
 
 			#{$root}__actionSlot {
-				padding: 0 $space-4xs 0 $space-5xs;
+				padding: 0 $space-2 0 $space-1;
 			}
 
 			#{$root}__metadata {
-				padding-left: $space-xs;
+				padding-left: $space-6;
 			}
 		}
 	}
@@ -386,7 +386,7 @@ $rich-list-item-media-horizontal-height: 80px;
 			left: -1px;
 			position: absolute;
 			top: -1px;
-			width: $space-4xs;
+			width: $space-2;
 		}
 	}
 
@@ -399,7 +399,7 @@ $rich-list-item-media-horizontal-height: 80px;
 
 	&__mediaHorizontal {
 		height: $rich-list-item-media-horizontal-height;
-		margin-right: $space-3xs;
+		margin-right: $space-3;
 		width: $rich-list-item-media-horizontal-width;
 	}
 
@@ -423,8 +423,8 @@ $rich-list-item-media-horizontal-height: 80px;
 
 	&__metadata {
 		align-items: center;
-		gap: $space-xs;
-		padding-right: $space-4xs;
+		gap: $space-6;
+		padding-right: $space-2;
 	}
 
 	&__rightContainer {
@@ -435,13 +435,13 @@ $rich-list-item-media-horizontal-height: 80px;
 	&__actionSlot {
 		align-self: stretch;
 		display: flex;
-		gap: $space-2xs;
+		gap: $space-4;
 	}
 
 	&__checkbox {
 		align-self: stretch;
 		display: flex;
-		gap: $space-s;
+		gap: $space-8;
 		justify-content: flex-end;
 	}
 
@@ -471,7 +471,7 @@ $rich-list-item-media-horizontal-height: 80px;
 
 	&.-ds-small {
 		#{$root}__actionSlot {
-			gap: $space-2xs;
+			gap: $space-4;
 		}
 	}
 }

package/lib/js/components/SectionTitle/SectionTitle.vue

@@ -13,9 +13,9 @@
 .ds-sectionTitle {
 	display: flex;
 	flex-direction: column;
-	gap: $space-4xs;
+	gap: $space-2;
 	overflow-wrap: break-word;
-	padding: $space-2xs 0;
+	padding: $space-4 0;
 
 	&__title {
 		@include heading-xs-default-bold;

package/lib/js/components/SelectList/SelectList.vue

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

package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue

@@ -56,9 +56,9 @@
 	color: $color-neutral-text-heavy;
 	cursor: pointer;
 	display: flex;
-	gap: $space-3xs;
+	gap: $space-3;
 	min-height: $minHeight;
-	padding: $space-xs;
+	padding: $space-6;
 
 	&:focus {
 		background-color: $color-neutral-background-ghost-focused;
@@ -107,12 +107,12 @@
 
 	&__iconRight {
 		color: $color-primary-icon;
-		margin-left: $space-xs;
+		margin-left: $space-6;
 	}
 
 	&__placeholderRight {
 		flex-shrink: 0;
-		margin-left: $space-xs;
+		margin-left: $space-6;
 		width: $icon-xs;
 	}
 
@@ -120,7 +120,7 @@
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
-		gap: $space-5xs;
+		gap: $space-1;
 		overflow: hidden;
 		white-space: nowrap;
 	}

package/lib/js/components/SelectList/SelectListItemContainer/SelectListItemContainer.vue

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

package/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue

@@ -10,7 +10,7 @@
 
 .ds-selectListItemDivider {
 	background-color: $color-neutral-background-ghost;
-	padding: $space-2xs 0;
+	padding: $space-4 0;
 }
 </style>
 

package/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue

@@ -16,12 +16,12 @@
 	color: $color-neutral-text;
 	display: flex;
 	min-height: 40px;
-	padding: $space-3xs $space-xs;
+	padding: $space-3 $space-6;
 
 	&.-ds-isUppercase {
 		@include info-m-extensive-bold-uppercase;
 
-		padding: $space-xs $space-xs;
+		padding: $space-6 $space-6;
 	}
 }
 </style>