@drivenets/design-system 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",

package/src/components/ds-alert-banner/ds-alert-banner.module.scss

@@ -10,11 +10,11 @@
 			'icon description close'
 			'icon actions close';
 		align-items: start;
-		padding: var(--spacing-standard);
+		padding: var(--standard);
 		border-radius: 4px;
 		border: 1px solid;
-		column-gap: var(--spacing-xs);
-		row-gap: var(--spacing-4xs);
+		column-gap: var(--xs);
+		row-gap: var(--4xs);
 
 		&:not(:has(.title)) {
 			align-items: center;
@@ -24,8 +24,8 @@
 	&.global {
 		display: flex;
 		align-items: center;
-		padding: var(--spacing-sm) var(--spacing-standard);
-		gap: var(--spacing-2xs);
+		padding: var(--sm) var(--standard);
+		gap: var(--2xs);
 		border-bottom: 2px solid;
 
 		.title {
@@ -48,69 +48,69 @@
 
 	.title {
 		grid-area: title;
-		color: var(--color-font-main);
+		color: var(--font-main);
 	}
 
 	.description {
 		grid-area: description;
-		color: var(--color-font-secondary);
-		margin-top: var(--spacing-4xs);
+		color: var(--font-secondary);
+		margin-top: var(--4xs);
 	}
 
 	.actions {
 		grid-area: actions;
 		display: inline-flex;
-		gap: var(--spacing-xs);
+		gap: var(--xs);
 	}
 
 	.closeButton {
 		grid-area: close;
 		display: flex;
-		color: var(--color-background-action);
+		color: var(--background-action);
 	}
 
 	&.infoNeutral {
-		background-color: var(--color-background-secondary);
-		border-color: var(--color-border);
+		background-color: var(--background-secondary);
+		border-color: var(--border);
 
 		.icon {
-			color: var(--color-icon-secondary);
+			color: var(--icon-action-secondary);
 		}
 	}
 
 	&.infoBlue {
-		background-color: var(--color-background-info);
-		border-color: var(--color-border-action-primary);
+		background-color: var(--background-info);
+		border-color: var(--border-action-primary);
 
 		.icon {
-			color: var(--color-icon-primary);
+			color: var(--icon-action);
 		}
 	}
 
 	&.warning {
-		background-color: var(--color-background-warning);
-		border-color: var(--color-background-warning-strong);
+		background-color: var(--background-warning);
+		border-color: var(--background-warning-strong);
 
 		.icon {
-			color: var(--color-icon-warning);
+			color: var(--icon-warning);
 		}
 	}
 
 	&.error {
-		background-color: var(--color-background-danger-weak);
-		border-color: var(--color-border-danger-strong);
+		background-color: var(--background-error-secondary-hover);
+		border-color: var(--border-error);
 
 		.icon {
-			color: var(--color-icon-danger);
+			color: var(--icon-error);
 		}
 	}
 
 	&.success {
-		background-color: var(--color-background-success);
-		border-color: var(--color-border-success);
+		background-color: var(--background-success);
+		border-color: var(--border-success);
 
 		.icon {
-			color: var(--color-icon-success);
+			color: var(--icon-success);
 		}
 	}
 }

package/src/components/ds-autocomplete/ds-autocomplete.module.scss

@@ -28,17 +28,17 @@ $autocomplete-opacity-visible: 1;
 	@include input.input-container-states;
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	height: $autocomplete-input-height;
 	min-height: $autocomplete-input-height;
 	max-height: $autocomplete-input-height;
 
 	&[data-focus] {
-		border-color: var(--form-control-border-color, var(--color-border-action-primary)) !important;
+		border-color: var(--form-control-border-color, var(--border-action-primary)) !important;
 	}
 
 	&[data-invalid] {
-		border-color: var(--color-background-danger-strong);
+		border-color: var(--background-error);
 	}
 }
 
@@ -49,7 +49,7 @@ $autocomplete-opacity-visible: 1;
 	outline: none;
 
 	&::placeholder {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 }
 
@@ -57,14 +57,14 @@ $autocomplete-opacity-visible: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-background-action);
+	color: var(--background-action);
 	flex-shrink: 0;
 }
 
 .iconContainer {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	flex-shrink: 0;
 }
 
@@ -76,7 +76,7 @@ $autocomplete-opacity-visible: 1;
 	transition: opacity $autocomplete-animation-duration ease;
 
 	&:hover {
-		color: var(--color-background-action-hover);
+		color: var(--background-action-hover);
 	}
 }
 
@@ -90,7 +90,7 @@ $autocomplete-opacity-visible: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-background-deselected);
+	color: var(--background-deselected);
 	transition:
 		transform $autocomplete-animation-duration ease-in-out,
 		background-color $autocomplete-animation-duration ease,
@@ -104,14 +104,14 @@ $autocomplete-opacity-visible: 1;
 	height: $autocomplete-trigger-size;
 
 	&:hover {
-		color: var(--color-background-deselected-hover);
-		background: var(--color-background-action-hover-weak);
+		color: var(--background-deselected-hover);
+		background: var(--background-action-hover-weak);
 	}
 
 	&[data-state='open'] {
 		transform: rotate($autocomplete-rotation-open);
-		color: var(--color-background-deselected-hover);
-		background: var(--color-background-action-hover-weak);
+		color: var(--background-deselected-hover);
+		background: var(--background-action-hover-weak);
 	}
 
 	&:focus-visible {
@@ -121,8 +121,8 @@ $autocomplete-opacity-visible: 1;
 }
 
 .control[data-focus] .trigger {
-	color: var(--color-background-deselected-hover);
-	background: var(--color-background-action-hover-weak);
+	color: var(--background-deselected-hover);
+	background: var(--background-action-hover-weak);
 }
 
 .positioner {
@@ -158,17 +158,17 @@ $autocomplete-opacity-visible: 1;
 	@include dropdown.dropdown-item;
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	height: $autocomplete-item-height;
 	min-height: $autocomplete-item-height;
 
 	&[data-highlighted] {
-		background: var(--color-background-secondary-selected-weak);
+		background: var(--background-secondary-selected-weak);
 	}
 }
 
 .itemIcon {
-	color: var(--color-background-deselected);
+	color: var(--background-deselected);
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
@@ -181,8 +181,8 @@ $autocomplete-opacity-visible: 1;
 	white-space: nowrap;
 
 	mark {
-		background-color: var(--color-data-yellow);
-		color: var(--color-font-main);
+		background-color: var(--color-dap-data-yellow);
+		color: var(--font-main);
 		font-weight: var(--font-weight-medium);
 		padding: 0;
 		border-radius: $autocomplete-highlight-border-radius;
@@ -191,31 +191,31 @@ $autocomplete-opacity-visible: 1;
 
 .noMatches,
 .loading {
-	padding: var(--spacing-xs);
-	color: var(--color-font-disabled);
+	padding: var(--xs);
+	color: var(--font-disabled);
 	text-align: center;
-	font-size: var(--font-size-sm);
+	font-size: var(--body-font-size-sm);
 }
 
 .disabled {
 	.control {
-		color: var(--color-background-deselected);
-		border-color: var(--color-border-disabled);
+		color: var(--background-deselected);
+		border-color: var(--border-disabled);
 		cursor: not-allowed;
 
 		.input {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 			cursor: not-allowed;
 		}
 
 		.trigger {
-			color: var(--color-background-disable);
+			color: var(--background-disable);
 			cursor: not-allowed;
 			background: transparent;
 
 			&:hover {
 				background: transparent;
-				color: var(--color-background-disable);
+				color: var(--background-disable);
 			}
 		}
 	}
@@ -223,11 +223,11 @@ $autocomplete-opacity-visible: 1;
 
 .invalid {
 	.control {
-		border-color: var(--color-background-danger-strong);
+		border-color: var(--background-error);
 
 		&:hover,
 		&[data-focus] {
-			border-color: var(--color-background-danger-strong) !important;
+			border-color: var(--background-error) !important;
 		}
 	}
 }

package/src/components/ds-avatar/_mixins.scss

@@ -5,9 +5,9 @@ $avatar-size-md: 48px;
 $avatar-size-lg: 80px;
 $avatar-size-xl: 144px;
 
-$avatar-border-width: var(--spacing-4xs);
-$avatar-border-radius-small: var(--spacing-3xs);
-$avatar-border-radius-large: var(--spacing-xs);
+$avatar-border-width: var(--4xs);
+$avatar-border-radius-small: var(--3xs);
+$avatar-border-radius-large: var(--xs);
 $avatar-overlap-xsm: -4px;
 $avatar-overlap-sm: -6px;
 $avatar-overlap-default: -8px;
@@ -28,18 +28,18 @@ $avatar-overlap-default: -8px;
 	}
 
 	&.regular {
-		@include avatar-size($avatar-size-regular, var(--font-size-xs));
+		@include avatar-size($avatar-size-regular, var(--body-font-size-xs));
 	}
 
 	&.md {
-		@include avatar-size($avatar-size-md, var(--font-size-md));
+		@include avatar-size($avatar-size-md, var(--body-font-size-md));
 	}
 
 	&.lg {
-		@include avatar-size($avatar-size-lg, var(--font-size-2xl));
+		@include avatar-size($avatar-size-lg, var(--heading-font-size-2xl));
 	}
 
 	&.xl {
-		@include avatar-size($avatar-size-xl, var(--font-size-3xl));
+		@include avatar-size($avatar-size-xl, var(--heading-font-size-3xl));
 	}
 }

package/src/components/ds-avatar/ds-avatar.module.scss

@@ -6,8 +6,8 @@
 	justify-content: center;
 	position: relative;
 	overflow: hidden;
-	background-color: var(--color-background-deselected);
-	color: var(--color-font-on-action);
+	background-color: var(--background-deselected);
+	color: var(--font-on-action);
 	flex-shrink: 0;
 	user-select: none;
 

package/src/components/ds-avatar-group/ds-avatar-group.module.scss

@@ -5,7 +5,7 @@
 	align-items: center;
 
 	.avatarItem {
-		border: $avatar-border-width solid var(--color-background);
+		border: $avatar-border-width solid var(--background);
 
 		&:not(:first-child) {
 			margin-left: $avatar-overlap-default;
@@ -24,9 +24,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background-color: var(--color-background);
-		color: var(--color-font-action);
-		border: $avatar-border-width solid var(--color-background);
+		background-color: var(--background);
+		color: var(--font-action);
+		border: $avatar-border-width solid var(--background);
 		margin-left: $avatar-overlap-default;
 		font-weight: var(--font-weight-medium);
 		z-index: 1;
@@ -64,7 +64,7 @@
 	.tooltipList {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-3xs);
-		padding: var(--spacing-3xs) 0;
+		gap: var(--3xs);
+		padding: var(--3xs) 0;
 	}
 }

package/src/components/ds-breadcrumb/ds-breadcrumb.module.scss

@@ -2,32 +2,32 @@
 
 @mixin breadcrumb-item {
 	@include typography.body-sm-reg;
-	color: var(--color-background-action);
+	color: var(--background-action);
 	text-decoration: none;
 	outline: none;
-	padding: var(--exo-spacing-2x-small) var(--spacing-sm);
-	gap: var(--exo-spacing-2x-small);
-	border-radius: var(--exo-spacing-2x-small);
+	padding: var(--3xs) var(--sm);
+	gap: var(--3xs);
+	border-radius: var(--3xs);
 	display: flex;
 	align-items: center;
 
 	&:hover {
-		color: var(--color-background-selected);
-		background: var(--color-background-action-tertiary);
+		color: var(--background-primary);
+		background: var(--background-action-tertiary-hover);
 	}
 
 	&:active {
-		color: var(--color-background-selected-hover);
-		background: var(--color-background-action-secondary-hover);
+		color: var(--background-primary-hover);
+		background: var(--background-action-secondary-hover);
 	}
 
 	&:focus {
-		outline: 2px solid var(--color-background-selected);
+		outline: 2px solid var(--background-primary);
 		outline-offset: 0;
 	}
 
 	&:disabled {
-		color: var(--color-background-disable);
+		color: var(--background-disable);
 	}
 }
 
@@ -53,7 +53,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 		width: var(--icon-width-small);
 		height: var(--icon-width-small);
 	}
@@ -82,18 +82,18 @@
 }
 
 .icon {
-	margin-right: var(--exo-spacing-2x-small);
+	margin-right: var(--3xs);
 	display: flex;
 	align-items: center;
 }
 
 .dropdownIcon {
-	margin-left: var(--exo-spacing-2x-small);
+	margin-left: var(--3xs);
 	display: flex;
 	align-items: center;
 }
 
 .itemLabel {
 	@include typography.ellipsis;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }

package/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss

@@ -1,22 +1,22 @@
 @use '../../../../styles/typography';
 
-$color-primary-default: var(--action-cta1);
-$color-primary-hover: var(--action-hover-light);
-$color-primary-active: var(--action-active-light);
-$color-primary-disabled: var(--action-disabled);
-
-$color-secondary-default: var(--action-cta3);
-$color-secondary-hover: var(--neutral-4);
-$color-secondary-disabled: var(--action-disabled);
-
-$color-error-default: var(--system-status-error);
-$color-error-hover: var(--utility-error);
-$color-error-active: var(--utility-error);
-$color-error-disabled: var(--action-disabled);
-
-$color-white: var(--white);
-$color-neutral-6: var(--utility-disabled);
-$color-neutral-4: var(--neutral-4);
+$color-primary-default: var(--color-dap-blue-600);
+$color-primary-hover: var(--background-active-status);
+$color-primary-active: var(--color-dap-purple-200);
+$color-primary-disabled: var(--color-dap-gray-400);
+
+$color-secondary-default: var(--color-dap-brand-300);
+$color-secondary-hover: var(--color-dap-gray-500);
+$color-secondary-disabled: var(--color-dap-gray-400);
+
+$color-error-default: var(--background-error);
+$color-error-hover: var(--color-dap-red-100);
+$color-error-active: var(--color-dap-red-100);
+$color-error-disabled: var(--color-dap-gray-400);
+
+$color-white: var(--color-dap-gray-050);
+$color-neutral-6: var(--color-dap-gray-200);
+$color-neutral-4: var(--color-dap-gray-500);
 
 @mixin button-filled($background, $hover, $active, $disabled) {
 	background: $background;