@bethinkpl/design-system 36.1.2 → 37.0.0

package/lib/js/components/SelectionTile/SelectionTile.vue

@@ -61,13 +61,13 @@ $selection-tile-min-height: 48px;
 	align-items: center;
 	background-color: $color-neutral-background-weak;
 	border-radius: $radius-s;
-	column-gap: $space-2xs;
+	column-gap: $space-4;
 	cursor: pointer;
 	display: flex;
 	justify-content: space-between;
 	min-height: $selection-tile-min-height;
 	outline: 1px solid $color-neutral-border;
-	padding: $space-xs;
+	padding: $space-6;
 	transition:
 		color ease-in-out $default-transition-time,
 		outline-color ease-in-out $default-transition-time,
@@ -80,14 +80,14 @@ $selection-tile-min-height: 48px;
 
 	&__wrapper {
 		align-items: center;
-		column-gap: $space-2xs;
+		column-gap: $space-4;
 		display: flex;
 	}
 
 	&__textWrapper {
 		display: flex;
 		flex-direction: column;
-		row-gap: $space-4xs;
+		row-gap: $space-2;
 	}
 
 	&__title {

package/lib/js/components/SpinnerLoading/SpinnerLoading.vue

@@ -16,7 +16,7 @@
 	align-items: center;
 	color: $color-neutral-text;
 	display: inline-flex;
-	gap: $space-2xs;
+	gap: $space-4;
 }
 </style>
 

package/lib/js/components/StatsLayout/StatsLayout.vue

@@ -65,20 +65,20 @@ $right-column-width: 96px;
 .ds-statsLayout {
 	display: flex;
 	flex-direction: column;
-	gap: $space-xs;
+	gap: $space-6;
 
 	&__content,
 	&__summary,
 	&__stats {
 		display: flex;
 		flex-direction: column;
-		gap: $space-s;
+		gap: $space-8;
 	}
 
 	&__wrapper {
 		display: flex;
 		flex-direction: column;
-		gap: $space-l;
+		gap: $space-16;
 	}
 
 	&__gridHeader {
@@ -97,12 +97,12 @@ $right-column-width: 96px;
 
 	&__gridHeaderLeftColumn {
 		flex: 1 0 0;
-		padding: $space-2xs;
+		padding: $space-4;
 	}
 
 	&__gridHeaderRightColumn {
 		justify-content: flex-end;
-		padding: $space-2xs;
+		padding: $space-4;
 	}
 
 	&__overallStats,
@@ -112,7 +112,7 @@ $right-column-width: 96px;
 	}
 
 	&__statsList {
-		row-gap: $space-s;
+		row-gap: $space-8;
 	}
 
 	&__statsDivider {

package/lib/js/components/Statuses/AccessStatus/AccessStatus.vue

@@ -19,7 +19,7 @@
 
 	&__icon {
 		color: $color-neutral-icon;
-		margin-right: $space-4xs;
+		margin-right: $space-2;
 	}
 
 	&.-ds-active {

package/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue

@@ -19,7 +19,7 @@
 
 	&__icon {
 		color: $color-neutral-icon;
-		margin-right: $space-4xs;
+		margin-right: $space-2;
 	}
 
 	&.-ds-active {

package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue

@@ -54,7 +54,7 @@
 	&__header {
 		display: flex;
 		justify-content: space-between;
-		margin-bottom: $space-s;
+		margin-bottom: $space-8;
 		// header without explanation iconButton has to be the same size as with iconButton
 		min-height: $icon-button-medium-size;
 	}
@@ -67,7 +67,7 @@
 
 	&__explanation {
 		align-self: flex-start;
-		margin-left: $space-4xs;
+		margin-left: $space-2;
 	}
 
 	&__content {
@@ -76,7 +76,7 @@
 	}
 
 	&__input {
-		margin-top: $space-2xs;
+		margin-top: $space-4;
 	}
 }
 </style>

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue

@@ -131,7 +131,7 @@
 
 		display: flex;
 		justify-content: space-between;
-		margin-bottom: $space-m;
+		margin-bottom: $space-12;
 		// title without explanation iconButton has to be the same size as with iconButton
 		min-height: $icon-button-medium-size;
 	}
@@ -142,7 +142,7 @@
 
 	&__explanation {
 		align-self: flex-start;
-		margin-left: $space-4xs;
+		margin-left: $space-2;
 	}
 
 	&__content {
@@ -151,11 +151,11 @@
 		container-type: inline-size;
 		display: flex;
 		overflow-x: auto;
-		padding: $space-s $space-2xs;
+		padding: $space-8 $space-4;
 
 		@media #{breakpoint-s()} {
-			gap: $space-l;
-			padding: $space-s $space-l;
+			gap: $space-16;
+			padding: $space-8 $space-16;
 
 			&:not(.-ds-oneContainer) {
 				justify-content: center;
@@ -184,7 +184,7 @@
 	&__separator {
 		border-bottom: none;
 		border-top: 1px solid $color-neutral-border-weak;
-		margin: $space-m 0 $space-s 0;
+		margin: $space-12 0 $space-8 0;
 	}
 
 	&__elaboration {
@@ -197,18 +197,18 @@
 	}
 
 	&__elaborationInput {
-		margin-top: $space-2xs;
+		margin-top: $space-4;
 	}
 
 	&__container {
 		display: flex;
 		flex: 1;
 		flex-direction: row;
-		gap: $space-4xs;
+		gap: $space-2;
 		justify-content: space-between;
 
 		@container (width > 400px) {
-			gap: $space-l;
+			gap: $space-16;
 			justify-content: initial;
 		}
 

package/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue

@@ -23,7 +23,7 @@
 	box-shadow: inset 0 1px 3px var(--raw-gray-400);
 	box-sizing: border-box;
 	min-height: 2em;
-	padding: $space-2xs;
+	padding: $space-4;
 	resize: none;
 
 	&:disabled {

package/lib/js/components/SurveyToggle/SurveyToggle.vue

@@ -147,7 +147,7 @@ $survey-toggle-colors: (
 	width: $survey-toggle-size;
 
 	@media #{breakpoint-s()} {
-		width: $survey-toggle-size + 2 * $space-3xs;
+		width: $survey-toggle-size + 2 * $space-3;
 	}
 
 	&__toggle {
@@ -160,7 +160,7 @@ $survey-toggle-colors: (
 		border-radius: 100%;
 		display: flex;
 		height: $survey-toggle-size;
-		padding: $space-2xs;
+		padding: $space-4;
 		transition:
 			background-color ease-in-out $default-transition-time,
 			box-shadow ease-in-out $default-transition-time;
@@ -205,7 +205,7 @@ $survey-toggle-colors: (
 		@include label-xs-default-bold;
 
 		color: $color-neutral-text;
-		margin-top: $space-2xs;
+		margin-top: $space-4;
 		max-width: 100%;
 		min-height: 2em;
 		text-align: center;

package/lib/js/components/Switch/Switch.vue

@@ -119,14 +119,14 @@ $switch-transition: all $default-transition-time ease-out;
 		cursor: pointer;
 		display: flex;
 		flex-grow: 1;
-		gap: $space-3xs;
+		gap: $space-3;
 		justify-content: center;
 		margin: -1px;
 		max-width: calc(100% - 64px);
 		min-height: 32px;
 		min-width: 64px;
 		overflow: hidden;
-		padding: 0 $space-s;
+		padding: 0 $space-8;
 		position: relative;
 		transition: $switch-transition;
 		z-index: 2;
@@ -188,11 +188,11 @@ $switch-transition: all $default-transition-time ease-out;
 	}
 
 	&.-ds-small &__item {
-		gap: $space-4xs;
+		gap: $space-2;
 		max-width: calc(100% - 48px);
 		min-height: 24px;
 		min-width: 48px;
-		padding: 0 $space-xs;
+		padding: 0 $space-6;
 	}
 
 	&.-ds-disabled &__item {

package/lib/js/components/TabItem/TabItem.vue

@@ -80,15 +80,15 @@
 	&.-ds-sizeSmall {
 		@include label-m-default-bold;
 
-		column-gap: $space-4xs;
-		padding: $space-xs;
+		column-gap: $space-2;
+		padding: $space-6;
 	}
 
 	&.-ds-sizeMedium {
 		@include label-l-default-bold;
 
-		column-gap: $space-2xs;
-		padding: $space-xs $space-s;
+		column-gap: $space-4;
+		padding: $space-6 $space-8;
 	}
 }
 </style>

package/lib/js/components/TextGroup/TextGroup.vue

@@ -203,7 +203,7 @@ $text-group-colors: (
 	&__eyebrow {
 		@include info-s-default-bold;
 
-		margin-bottom: $space-5xs;
+		margin-bottom: $space-1;
 
 		&.-ds-uppercase {
 			@include info-s-extensive-bold-uppercase;

package/lib/js/components/Tile/Tile.vue

@@ -300,10 +300,10 @@ $tile-colors: (
 	border-radius: $radius-s;
 	display: flex;
 	flex-direction: row;
-	gap: $space-xs;
+	gap: $space-6;
 	justify-content: center;
 	min-height: 48px;
-	padding: $space-2xs $space-xs;
+	padding: $space-4 $space-6;
 	transition: background-color ease-in-out $default-transition-time;
 
 	&.-ds-disabled {
@@ -359,7 +359,7 @@ $tile-colors: (
 
 		color: $color-neutral-text;
 		flex-grow: 1;
-		margin-left: $space-xs;
+		margin-left: $space-6;
 		text-align: right;
 
 		&.-ds-max-width-small {
@@ -381,7 +381,7 @@ $tile-colors: (
 	&__eyebrowText {
 		@include info-m-default-bold;
 
-		margin-bottom: $space-4xs;
+		margin-bottom: $space-2;
 
 		&.-ds-uppercase {
 			@include info-m-extensive-bold-uppercase();

package/lib/js/components/Toast/Toast.vue

@@ -44,17 +44,17 @@
 	width: 100%;
 
 	&.-ds-size-small {
-		max-width: 320px + $space-s * 2;
-		padding: $space-s;
+		max-width: 320px + $space-8 * 2;
+		padding: $space-8;
 	}
 
 	&.-ds-size-medium {
-		max-width: 500px + $space-s * 2;
-		padding: $space-s;
+		max-width: 500px + $space-8 * 2;
+		padding: $space-8;
 
 		@media (#{breakpoint-s()}) {
-			max-width: 500px + $space-m * 2;
-			padding: $space-m;
+			max-width: 500px + $space-12 * 2;
+			padding: $space-12;
 		}
 	}
 
@@ -79,10 +79,10 @@
 	}
 
 	&__footerButtons {
-		column-gap: $space-xs;
+		column-gap: $space-6;
 		display: flex;
 		justify-content: flex-end;
-		padding: 0 $space-s $space-s;
+		padding: 0 $space-8 $space-8;
 	}
 }
 </style>

package/lib/js/components/Toggles/CounterToggle/CounterToggle.vue

@@ -206,7 +206,7 @@ $counter-toggle-colors: (
 	cursor: pointer;
 	display: inline-flex;
 	justify-content: center;
-	padding: $space-2xs;
+	padding: $space-4;
 	position: relative;
 	transition:
 		color ease-in-out $default-transition-time,
@@ -246,7 +246,7 @@ $counter-toggle-colors: (
 	&__counter {
 		@include label-s-extensive-bold-uppercase();
 
-		margin-left: $space-5xs;
+		margin-left: $space-1;
 	}
 }
 </style>

package/lib/js/components/Toggles/ToggleButton/ToggleButton.vue

@@ -326,7 +326,7 @@ $toggle-button-colors: (
 	&__contentWrapper {
 		align-items: center;
 		display: flex;
-		gap: $space-4xs;
+		gap: $space-2;
 		justify-content: center;
 	}
 
@@ -360,10 +360,10 @@ $toggle-button-colors: (
 	&.-ds-small {
 		min-height: $toggle-button-size-small;
 		min-width: $toggle-button-size-small;
-		padding: substract-border($space-3xs, 'small') substract-border($space-xs, 'small');
+		padding: substract-border($space-3, 'small') substract-border($space-6, 'small');
 
 		&.-ds-hasSmallHorizontalPadding {
-			padding: substract-border($space-3xs, 'small') substract-border($space-5xs, 'small');
+			padding: substract-border($space-3, 'small') substract-border($space-1, 'small');
 		}
 
 		#{$root}__content.-ds-small {
@@ -378,10 +378,10 @@ $toggle-button-colors: (
 	&.-ds-medium {
 		min-height: $toggle-button-size-medium;
 		min-width: $toggle-button-size-medium;
-		padding: substract-border($space-2xs, 'medium') substract-border($space-xs, 'medium');
+		padding: substract-border($space-4, 'medium') substract-border($space-6, 'medium');
 
 		&.-ds-hasSmallHorizontalPadding {
-			padding: substract-border($space-2xs, 'medium') substract-border($space-5xs, 'medium');
+			padding: substract-border($space-4, 'medium') substract-border($space-1, 'medium');
 		}
 
 		#{$root}__content.-ds-small {
@@ -397,10 +397,10 @@ $toggle-button-colors: (
 		border-width: $toggle-button-border-size-large;
 		min-height: $toggle-button-size-large;
 		min-width: $toggle-button-size-large;
-		padding: substract-border($space-xs, 'large') substract-border($space-s, 'large');
+		padding: substract-border($space-6, 'large') substract-border($space-8, 'large');
 
 		&.-ds-hasSmallHorizontalPadding {
-			padding: substract-border($space-2xs, 'large') substract-border($space-5xs, 'large');
+			padding: substract-border($space-4, 'large') substract-border($space-1, 'large');
 		}
 	}
 

package/lib/js/components/Well/Well.vue

@@ -55,25 +55,25 @@
 
 	&__accessorySlot {
 		display: flex;
-		gap: $space-4xs;
+		gap: $space-2;
 		position: absolute;
 		right: 0;
 		top: -10px;
 	}
 
 	&.-ds-medium {
-		padding: $space-s;
+		padding: $space-8;
 
 		#{$root}__accessorySlot {
-			right: $space-s;
+			right: $space-8;
 		}
 	}
 
 	&.-ds-small {
-		padding: $space-xs;
+		padding: $space-6;
 
 		#{$root}__accessorySlot {
-			right: $space-xs;
+			right: $space-6;
 		}
 	}
 }

package/lib/js/styles/ItemsList.vue

@@ -56,8 +56,8 @@
 
 	&__row {
 		border: 1px solid var(--raw-gray-100);
-		margin-bottom: $space-m;
-		padding: $space-m;
+		margin-bottom: $space-12;
+		padding: $space-12;
 	}
 
 	&__categories {

package/lib/js/styles/Spacings/Spacings.stories.ts

@@ -4,20 +4,12 @@ export default {
 	title: 'foundations/Spacings',
 } as Meta;
 
-const spacings = [
-	{ name: 'space-4xl', value: 80 },
-	{ name: 'space-3xl', value: 64 },
-	{ name: 'space-2xl', value: 56 },
-	{ name: 'space-xl', value: 40 },
-	{ name: 'space-l', value: 32 },
-	{ name: 'space-m', value: 24 },
-	{ name: 'space-s', value: 16 },
-	{ name: 'space-xs', value: 12 },
-	{ name: 'space-2xs', value: 8 },
-	{ name: 'space-3xs', value: 6 },
-	{ name: 'space-4xs', value: 4 },
-	{ name: 'space-5xs', value: 2 },
-];
+const spaceBase = 2;
+
+const spacings = [28, 20, 16, 12, 10, 8, 6, 5, 4, 3, 2, 1].map((multiplier) => ({
+	name: `space-${multiplier}`,
+	value: spaceBase * multiplier,
+}));
 
 const StoryTemplate: StoryFn = () => ({
 	data() {

package/lib/styles/components/_buttons.scss

@@ -162,7 +162,7 @@ $button-disabled-alpha: 0.6;
 	justify-content: center;
 	min-height: $button-medium-min-height;
 	outline: none;
-	padding: $space-4xs $space-s;
+	padding: $space-2 $space-8;
 	position: relative;
 	transform-style: preserve-3d;
 	transition:
@@ -205,8 +205,8 @@ $button-disabled-alpha: 0.6;
 		@include button-l-default-bold-uppercase;
 
 		min-height: $button-large-min-height;
-		padding-left: $space-m;
-		padding-right: $space-m;
+		padding-left: $space-12;
+		padding-right: $space-12;
 	}
 
 	&.-ds-text {
@@ -244,12 +244,12 @@ $button-disabled-alpha: 0.6;
 
 		&.-ds-rounded {
 			border-radius: $radius-s;
-			padding-left: $space-xs;
-			padding-right: $space-xs;
+			padding-left: $space-6;
+			padding-right: $space-6;
 
 			&.-ds-large {
-				padding-left: $space-s;
-				padding-right: $space-s;
+				padding-left: $space-8;
+				padding-right: $space-8;
 			}
 		}
 	}
@@ -306,11 +306,11 @@ $button-disabled-alpha: 0.6;
 
 	&__icon {
 		&.-ds-left {
-			margin-right: $space-4xs;
+			margin-right: $space-2;
 		}
 
 		&.-ds-right {
-			margin-left: $space-4xs;
+			margin-left: $space-2;
 		}
 	}
 

package/lib/styles/components/_items-list-item.scss

@@ -6,7 +6,7 @@
 	width: 100%;
 
 	td {
-		padding: $space-m $space-m;
+		padding: $space-12 $space-12;
 	}
 
 	&__row {
@@ -16,7 +16,7 @@
 	&__tile {
 		box-shadow: rgb(0 0 0 / 10%) 0 1px 3px 0;
 		display: block;
-		height: $space-xl;
+		height: $space-20;
 		width: 100%;
 	}
 

package/lib/styles/settings/_spacings.scss

@@ -1,13 +1,16 @@
-$space-5xs: 2px;
-$space-4xs: 4px;
-$space-3xs: 6px;
-$space-2xs: 8px;
-$space-xs: 12px;
-$space-s: 16px;
-$space-m: 24px;
-$space-l: 32px;
-$space-xl: 40px;
-$space-2xl: 56px;
+$space-base: 2px;
+$space-1: $space-base * 1;
+$space-2: $space-base * 2;
+$space-3: $space-base * 3;
+$space-4: $space-base * 4;
+$space-5: $space-base * 5;
+$space-6: $space-base * 6;
+$space-8: $space-base * 8;
+$space-10: $space-base * 10;
+$space-12: $space-base * 12;
+$space-16: $space-base * 16;
+$space-20: $space-base * 20;
+$space-28: $space-base * 28;
 
 // deprecated
 $DEPRECATED-space-3xl: 64px;

package/lib/styles/settings/colors/_tokens-variables.scss

@@ -2,6 +2,7 @@
 	--color-default-text: var(--raw-black);
 	--color-default-icon: var(--raw-black);
 	--color-default-background: var(--raw-white);
+	--color-default-background-rgb: var(--raw-white-rgb);
 	--color-default-background-ghost: rgba(var(--raw-white-rgb), 0);
 	--color-default-background-ghost-hovered: rgba(var(--raw-white-rgb), 0.12);
 	--color-default-background-ghost-focused: rgba(var(--raw-white-rgb), 0.12);