@bethinkpl/design-system 20.1.1 → 21.0.1

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1712303659633,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1713181986832,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

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-xxs $space-xxs;
+	padding: $space-2xs $space-2xs;
 
 	&__text {
 		align-self: baseline;
@@ -120,7 +120,7 @@ $badge-score-colors: (
 
 	&__icon {
 		align-self: center;
-		margin-right: $space-xxxxxs;
+		margin-right: $space-5xs;
 	}
 
 	&__suffix {
@@ -133,7 +133,7 @@ $badge-score-colors: (
 		@include label-xl-default-bold;
 
 		min-width: $badge-score-small-min-width;
-		padding: $space-xxs $space-xxs;
+		padding: $space-2xs $space-2xs;
 
 		#{$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-xxxs;
+		padding: $space-3xs;
 
 		#{$self}__suffix {
 			@include label-s-default-bold;

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

@@ -85,15 +85,15 @@
 	@media #{breakpoint-s()} {
 		&.-horizontal {
 			#{$self}__iconContainer {
-				padding: $space-xxs 0;
+				padding: $space-2xs 0;
 			}
 
 			#{$self}__header {
-				padding: 0 $space-xxs;
+				padding: 0 $space-2xs;
 			}
 
 			#{$self}__expander {
-				padding: $space-xs $space-xxxxs $space-xs 0;
+				padding: $space-xs $space-4xs $space-xs 0;
 			}
 
 			#{$self}__textWrapper {
@@ -101,7 +101,7 @@
 			}
 
 			#{$self}__rightWrapper {
-				padding: $space-xxxxxs 0 $space-xxxxxs $space-s;
+				padding: $space-5xs 0 $space-5xs $space-s;
 			}
 
 			#{$self}__buttonWrapper {
@@ -157,7 +157,7 @@
 	&__header {
 		display: flex;
 		justify-content: space-between;
-		padding: 0 $space-xxxxs;
+		padding: 0 $space-4xs;
 		width: 100%;
 	}
 
@@ -170,7 +170,7 @@
 	&__defaultText {
 		@include text-m-default-regular;
 
-		margin-top: $space-xxxxs;
+		margin-top: $space-4xs;
 	}
 
 	&__textWrapper {
@@ -185,7 +185,7 @@
 		flex-direction: column;
 		flex-grow: 1;
 		justify-content: center;
-		padding: $space-xxxxs 0;
+		padding: $space-4xs 0;
 	}
 
 	&__rightWrapper {
@@ -201,16 +201,16 @@
 
 	&__rightSlot {
 		flex-grow: 1;
-		padding: $space-xxs 0 0 0;
+		padding: $space-2xs 0 0 0;
 
 		&:nth-child(2) {
-			margin-left: $space-xxxxs;
+			margin-left: $space-4xs;
 		}
 	}
 
 	&__iconContainer {
 		margin-right: $space-s;
-		padding: $space-xxxxs 0;
+		padding: $space-4xs 0;
 
 		&.-hideOnMobile {
 			display: none;
@@ -223,7 +223,7 @@
 
 	&__icon {
 		border-radius: 100px;
-		padding: $space-xxs;
+		padding: $space-2xs;
 
 		&.-neutral {
 			background-color: $color-neutral-background-medium;
@@ -262,11 +262,11 @@
 	}
 
 	&__close {
-		margin-left: $space-xxs;
+		margin-left: $space-2xs;
 	}
 
 	&__expander {
-		margin-left: $space-xxs;
+		margin-left: $space-2xs;
 		padding: 0;
 	}
 
@@ -274,7 +274,7 @@
 		@include text-m-default-regular;
 
 		margin-top: $space-xs;
-		padding: 0 $space-xxxxs $space-xxxxs;
+		padding: 0 $space-4xs $space-4xs;
 	}
 
 	&__expandedText {

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

@@ -205,7 +205,7 @@
 	&.-xx-small {
 		#{$self}__button {
 			height: $icon-button-xx-small-size;
-			padding: $space-xxxxs;
+			padding: $space-4xs;
 			width: $icon-button-xx-small-size;
 		}
 
@@ -217,7 +217,7 @@
 	&.-x-small {
 		#{$self}__button {
 			height: $icon-button-x-small-size;
-			padding: $space-xxxxs;
+			padding: $space-4xs;
 			width: $icon-button-x-small-size;
 		}
 

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

@@ -59,7 +59,7 @@
 		@include label-s-extensive-bold-uppercase();
 
 		color: $color-primary-text;
-		margin-right: $space-xxxxs;
+		margin-right: $space-4xs;
 	}
 
 	&__expanderIcon {

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

@@ -170,7 +170,7 @@ $chip-colors: (
 	align-items: center;
 	border-radius: $radius-xl;
 	display: inline-flex;
-	padding: $space-xxxxxs $space-xxxxxs $space-xxxxxs $space-xxs;
+	padding: $space-5xs $space-5xs $space-5xs $space-2xs;
 
 	&.-disabled {
 		pointer-events: none;
@@ -189,7 +189,7 @@ $chip-colors: (
 	&__label {
 		@include label-s-default-bold;
 
-		margin: $space-xxxxxs $space-xxxs $space-xxxxxs 0;
+		margin: $space-5xs $space-3xs $space-5xs 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -197,21 +197,21 @@ $chip-colors: (
 
 	&__leftIcon {
 		display: flex;
-		margin-right: $space-xxxxs;
+		margin-right: $space-4xs;
 	}
 
 	&.-x-small {
 		min-height: $chip-min-height;
-		padding-left: $space-xxxs;
+		padding-left: $space-3xs;
 
 		#{$self}__leftIcon {
-			margin-right: $space-xxxxxs;
+			margin-right: $space-5xs;
 		}
 
 		#{$self}__label {
 			@include label-xs-default-bold;
 
-			margin: 0 $space-xxxxs 0 0;
+			margin: 0 $space-4xs 0 0;
 		}
 
 		&.-uppercase {

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

@@ -11,7 +11,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: $space-s;
-	padding: $space-xxs $space-s;
+	padding: $space-2xs $space-s;
 }
 </style>
 

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

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

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

@@ -80,7 +80,7 @@ $minimal-drawer-header-height: 82px;
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
-		row-gap: $space-xxxxs;
+		row-gap: $space-4xs;
 
 		&.-hidden {
 			visibility: hidden; //by this we make sure that height does not change when switching to second level
@@ -106,7 +106,7 @@ $minimal-drawer-header-height: 82px;
 
 	&__title {
 		align-items: center;
-		column-gap: $space-xxxs;
+		column-gap: $space-3xs;
 		display: flex;
 	}
 
@@ -130,7 +130,7 @@ $minimal-drawer-header-height: 82px;
 
 	&__titleWrapper {
 		align-items: center;
-		column-gap: $space-xxxxs;
+		column-gap: $space-4xs;
 		display: flex;
 		justify-content: space-between;
 		min-height: $minimal-drawer-header-height;

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

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

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

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

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

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

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

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

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

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

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

@@ -108,10 +108,10 @@
 	background: $color-neutral-background;
 	border-bottom: 2px solid $color-neutral-border-ghost;
 	display: flex;
-	padding: $space-xxs $space-xxxs $space-xxs 0;
+	padding: $space-2xs $space-3xs $space-2xs 0;
 
 	@media #{breakpoint-s()} {
-		padding: $space-xs $space-xxs $space-xs 0;
+		padding: $space-xs $space-2xs $space-xs 0;
 	}
 
 	&__accessory {
@@ -121,22 +121,22 @@
 
 	&__content {
 		flex-grow: 1;
-		margin: 0 $space-xxxxs 0 $space-xs;
+		margin: 0 $space-4xs 0 $space-xs;
 		// We need to set min-width to allow children to apply ellipsis
 		min-width: 0;
 
 		@media #{breakpoint-s()} {
-			margin: 0 $space-xxs 0 $space-s;
+			margin: 0 $space-2xs 0 $space-s;
 		}
 	}
 
 	&__eyebrow {
 		align-items: center;
 		display: flex;
-		margin-bottom: $space-xxxs;
+		margin-bottom: $space-3xs;
 
 		@media #{breakpoint-s()} {
-			margin-bottom: $space-xxs;
+			margin-bottom: $space-2xs;
 		}
 	}
 
@@ -149,7 +149,7 @@
 		white-space: nowrap;
 
 		&.-withRightMargin {
-			margin-right: $space-xxs;
+			margin-right: $space-2xs;
 		}
 	}
 
@@ -166,7 +166,7 @@
 
 	&__titleLeading {
 		display: flex;
-		margin-right: $space-xxs;
+		margin-right: $space-2xs;
 	}
 
 	&__titleWrapper {
@@ -204,7 +204,7 @@
 		display: flex;
 		// flex-shrink: 2 gives some more space for title
 		flex-shrink: 2;
-		margin-left: $space-xxs;
+		margin-left: $space-2xs;
 	}
 
 	&__titleTrailing {
@@ -224,10 +224,10 @@
 	&__divider {
 		align-self: stretch;
 		height: auto !important;
-		margin: $space-xxxxs $space-xxxs;
+		margin: $space-4xs $space-3xs;
 
 		@media #{breakpoint-s()} {
-			margin: $space-xxxxs $space-xxs;
+			margin: $space-4xs $space-2xs;
 		}
 
 		&.-mobileHidden {

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

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

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

@@ -101,9 +101,9 @@
 		align-items: center;
 		display: flex;
 		flex-direction: row;
-		gap: $space-xxs;
+		gap: $space-2xs;
 		justify-content: space-between;
-		padding: $space-xxxxs 0;
+		padding: $space-4xs 0;
 	}
 
 	&__supportingText {
@@ -120,7 +120,7 @@
 	&__header {
 		align-items: center;
 		display: flex;
-		gap: $space-xxs;
+		gap: $space-2xs;
 		width: 100%;
 
 		@media #{breakpoint-s()} {
@@ -164,8 +164,8 @@
 	&__titleContainer {
 		display: flex;
 		flex-direction: column;
-		gap: $space-xxxxxs;
-		padding: $space-xxs 0;
+		gap: $space-5xs;
+		padding: $space-2xs 0;
 	}
 
 	&__title {
@@ -174,7 +174,7 @@
 
 	&__info {
 		line-height: 0;
-		padding: $space-xxxs 0;
+		padding: $space-3xs 0;
 	}
 
 	&__eyebrow {
@@ -185,7 +185,7 @@
 
 	&.-size-large {
 		#{$root}__main {
-			padding: $space-xxxxxs 0;
+			padding: $space-5xs 0;
 		}
 
 		#{$root}__header {
@@ -193,11 +193,11 @@
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-xxs;
+			gap: $space-2xs;
 		}
 
 		#{$root}__info {
-			padding: $space-xxs 0;
+			padding: $space-2xs 0;
 		}
 
 		#{$root}__eyebrow {
@@ -211,11 +211,11 @@
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-xxs;
+			gap: $space-2xs;
 		}
 
 		#{$root}__info {
-			padding: $space-xxs 0;
+			padding: $space-2xs 0;
 		}
 
 		#{$root}__eyebrow {
@@ -225,7 +225,7 @@
 
 	&.-size-small {
 		#{$root}__main {
-			padding: $space-xxxxxs 0;
+			padding: $space-5xs 0;
 		}
 
 		#{$root}__header {
@@ -233,21 +233,21 @@
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-xxxs;
+			gap: $space-3xs;
 		}
 
 		#{$root}__info {
-			padding: $space-xxs 0;
+			padding: $space-2xs 0;
 		}
 	}
 
 	&.-size-x-small {
 		#{$root}__main {
-			padding: $space-xxxxxs 0;
+			padding: $space-5xs 0;
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-xxxs;
+			gap: $space-3xs;
 		}
 
 		#{$root}__header {
@@ -257,11 +257,11 @@
 
 	&.-size-xx-small {
 		#{$root}__main {
-			padding: $space-xxxxxs 0;
+			padding: $space-5xs 0;
 		}
 
 		#{$root}__titleWrapper {
-			gap: $space-xxxs;
+			gap: $space-3xs;
 		}
 
 		#{$root}__header {
@@ -298,7 +298,7 @@
 
 	&__slotVertical {
 		display: block;
-		padding: 0 0 $space-xxxs;
+		padding: 0 0 $space-3xs;
 
 		@media #{breakpoint-s()} {
 			display: none;

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

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

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

@@ -96,22 +96,22 @@ $feature-icon-padding-large: 10px;
 
 	border-radius: 100%;
 	border-style: solid;
-	border-width: $space-xxxs;
+	border-width: $space-3xs;
 	display: inline-flex;
-	padding: $space-xxxs;
+	padding: $space-3xs;
 
 	&.-small {
-		border-width: $space-xxxxs;
-		padding: $space-xxxxs;
+		border-width: $space-4xs;
+		padding: $space-4xs;
 	}
 
 	&.-large {
-		border-width: $space-xxxs;
+		border-width: $space-3xs;
 		padding: $feature-icon-padding-large;
 	}
 
 	&.-xLarge {
-		border-width: $space-xxs;
+		border-width: $space-2xs;
 		padding: $space-xs;
 	}
 }

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

@@ -59,18 +59,18 @@
 		width: 100%;
 
 		@media #{breakpoint-m()} {
-			margin: $space-xxl auto $space-xl;
-			max-height: calc(100vh - #{$space-xxl + $space-xl});
+			margin: $space-2xl auto $space-xl;
+			max-height: calc(100vh - #{$space-2xl + $space-xl});
 			width: 640px;
 		}
 	}
 
 	&__header {
 		align-items: center;
-		box-shadow: 0 $space-xxxxs $space-xxxxs var(--raw-white);
+		box-shadow: 0 $space-4xs $space-4xs var(--raw-white);
 		display: flex;
 		justify-content: space-between;
-		padding: $space-xs $space-xs $space-xxxs;
+		padding: $space-xs $space-xs $space-3xs;
 		z-index: 1;
 
 		&__close {
@@ -92,9 +92,9 @@
 		padding: $space-s;
 
 		&__shadow {
-			box-shadow: 0 #{-$space-xxxxs} $space-xxxxs var(--raw-white);
+			box-shadow: 0 #{-$space-4xs} $space-4xs var(--raw-white);
 			content: ' ';
-			height: $space-xxxxs;
+			height: $space-4xs;
 			z-index: 1;
 		}
 	}