@drivenets/design-system 0.10.0 → 0.11.1

package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss

@@ -10,75 +10,75 @@ $disabled-opacity: 0.5;
 	@include typography.body-sm-reg;
 	display: inline-flex;
 	align-items: center;
-	background: var(--color-background);
-	border-radius: var(--exo-spacing-2x-small);
+	background: var(--background);
+	border-radius: var(--3xs);
 	cursor: pointer;
 	transition:
 		background-color $transition-duration,
 		color $transition-duration,
 		border-color $transition-duration;
 	position: relative;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	border: $tab-border-width solid transparent;
 	white-space: nowrap;
 
 	&:hover:not(:disabled):not([aria-selected='true']) {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 
 		.badge {
-			background: var(--color-background-tertiary);
+			background: var(--background-tertiary);
 		}
 	}
 
 	&:active:not(:disabled):not([aria-selected='true']) {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 
 		.badge {
-			background: var(--color-background-secondary);
+			background: var(--background-secondary);
 		}
 	}
 
 	&:focus-visible:not(:disabled):not([aria-selected='true']) {
 		border-color: var(--color-border-action-hover);
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 		outline: none;
 
 		.badge {
-			background: var(--color-background-tertiary);
+			background: var(--background-tertiary);
 		}
 	}
 
 	&:disabled {
 		cursor: not-allowed;
 		opacity: $disabled-opacity;
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 
 	&[aria-selected='true'] {
 		@include typography.body-sm-md;
-		color: var(--color-background-selected);
-		background: var(--color-background);
+		color: var(--background-primary);
+		background: var(--background);
 
 		.icon {
-			color: var(--color-background-selected);
+			color: var(--background-primary);
 		}
 
 		.badge {
-			background: var(--color-background-action-secondary-hover);
-			color: var(--color-background-selected);
+			background: var(--background-action-secondary-hover);
+			color: var(--background-primary);
 		}
 
 		&:hover:not(:disabled) {
-			background: var(--color-background-selected-weak);
+			background: var(--background-secondary-hover);
 		}
 
 		&:active:not(:disabled) {
-			background: var(--color-background-selected-weak);
+			background: var(--background-secondary-hover);
 		}
 
 		&:focus-visible:not(:disabled) {
-			border-color: var(--color-background-selected);
-			background: var(--color-background-selected-weak);
+			border-color: var(--background-primary);
+			background: var(--background-secondary-hover);
 			outline: none;
 		}
 	}
@@ -87,37 +87,37 @@ $disabled-opacity: 0.5;
 	[data-orientation='horizontal'] & {
 		flex-direction: row;
 		justify-content: center;
-		gap: var(--spacing-3xs);
+		gap: var(--3xs);
 		flex: 0 0 auto;
 		width: auto;
 	}
 
 	[data-orientation='horizontal'][data-size='medium'] & {
-		padding: var(--spacing-xs) var(--spacing-sm);
+		padding: var(--xs) var(--sm);
 	}
 
 	[data-orientation='horizontal'][data-size='small'] & {
-		padding: var(--spacing-2xs) var(--spacing-sm);
+		padding: var(--2xs) var(--sm);
 	}
 
 	// Vertical orientation + size variants
 	[data-orientation='vertical'] & {
 		flex-direction: row;
 		justify-content: flex-start;
-		gap: var(--spacing-3xs);
+		gap: var(--3xs);
 		width: 100%;
 	}
 
 	[data-orientation='vertical'][data-size='medium'] & {
-		padding: var(--spacing-sm) var(--spacing-standard);
-		padding-left: var(--spacing-xs);
-		border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);
+		padding: var(--sm) var(--standard);
+		padding-left: var(--xs);
+		border-radius: var(--3xs) 0 0 var(--3xs);
 	}
 
 	[data-orientation='vertical'][data-size='small'] & {
-		padding: var(--spacing-xs) var(--spacing-standard);
-		padding-left: var(--spacing-xs);
-		border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small);
+		padding: var(--xs) var(--standard);
+		padding-left: var(--xs);
+		border-radius: var(--3xs) 0 0 var(--3xs);
 	}
 }
 
@@ -125,7 +125,7 @@ $disabled-opacity: 0.5;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	flex-shrink: 0;
 }
 
@@ -148,32 +148,32 @@ $disabled-opacity: 0.5;
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
-	color: var(--color-font-main) !important;
+	color: var(--font-main) !important;
 	cursor: pointer;
-	border-radius: var(--exo-spacing-2x-small);
+	border-radius: var(--3xs);
 	transition:
 		background-color $transition-duration,
 		color $transition-duration;
 
 	&:hover {
-		background: var(--color-background-action-secondary);
-		color: var(--color-font-main);
+		background: var(--background-action-secondary);
+		color: var(--font-main);
 	}
 
 	&:active {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 	}
 
 	&:focus-visible {
-		outline: var(--spacing-4xs) solid var(--color-border-action-hover);
-		outline-offset: var(--spacing-4xs);
+		outline: var(--4xs) solid var(--color-border-action-hover);
+		outline-offset: var(--4xs);
 	}
 
 	[aria-selected='true'] & {
-		color: var(--color-background-selected);
+		color: var(--background-primary);
 
 		&:hover {
-			background: var(--color-background);
+			background: var(--background);
 		}
 	}
 
@@ -190,20 +190,20 @@ $disabled-opacity: 0.5;
 	align-items: center;
 	justify-content: center;
 	height: $badge-height;
-	padding: 0 var(--spacing-2xs);
-	border-radius: var(--spacing-lg);
-	background: var(--color-background-secondary);
-	color: var(--color-font-main);
-	line-height: var(--line-height-xs);
+	padding: 0 var(--2xs);
+	border-radius: var(--lg);
+	background: var(--background-secondary);
+	color: var(--font-main);
+	line-height: var(--body-line-height-xs);
 	flex-shrink: 0;
 }
 
 .menuContent {
-	background: var(--color-background);
-	border: $tab-border-width solid var(--color-border-secondary);
-	border-radius: var(--exo-spacing-2x-small);
+	background: var(--background);
+	border: $tab-border-width solid var(--border-secondary);
+	border-radius: var(--3xs);
 	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
-	padding: var(--spacing-3xs);
+	padding: var(--3xs);
 	width: $menu-content-width;
 }
 
@@ -211,21 +211,21 @@ $disabled-opacity: 0.5;
 	@include typography.body-sm-reg;
 	display: flex;
 	align-items: center;
-	padding: var(--spacing-3xs);
-	border-radius: var(--exo-spacing-2x-small);
+	padding: var(--3xs);
+	border-radius: var(--3xs);
 	cursor: pointer;
-	color: var(--color-font-main);
-	background: var(--color-background);
+	color: var(--font-main);
+	background: var(--background);
 	transition: background-color $transition-duration;
 	user-select: none;
 	white-space: nowrap;
 
 	&:hover {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 	}
 
 	&:active {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 	}
 
 	&[data-disabled] {
@@ -238,5 +238,5 @@ $disabled-opacity: 0.5;
 .menuItemLabel {
 	flex: 1;
 	min-width: 0;
-	line-height: var(--line-height-sm);
+	line-height: var(--body-line-height-small);
 }

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

@@ -4,7 +4,7 @@
 
 	&[data-orientation='vertical'] {
 		flex-direction: row;
-		gap: var(--spacing-lg);
+		gap: var(--lg);
 	}
 
 	&[data-orientation='horizontal'] {

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

@@ -10,9 +10,9 @@
 	cursor: default;
 	overflow: hidden;
 	position: relative;
-	padding: var(--spacing-3xs) var(--spacing-xs);
-	background: var(--color-background);
-	border: 1px solid var(--color-border-contrast);
+	padding: var(--3xs) var(--xs);
+	background: var(--background);
+	border: 1px solid var(--border-contrast);
 	transition-property:
 		background, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,
 		opacity, visibility;
@@ -23,52 +23,52 @@
 		cursor: pointer;
 
 		&:hover {
-			background: var(--color-background-secondary);
-			border-color: var(--color-border-action-secondary-hover);
+			background: var(--background-secondary);
+			border-color: var(--border-action-secondary-hover);
 		}
 
 		&:focus-visible {
-			outline-color: var(--color-border-action-secondary);
+			outline-color: var(--border-action-secondary);
 		}
 	}
 
 	&.selected {
-		background: var(--color-background-selected-weak) !important;
-		border-color: var(--color-border-action-primary) !important;
+		background: var(--background-secondary-hover) !important;
+		border-color: var(--border-action-primary) !important;
 
 		&:focus-visible {
-			outline-color: var(--color-border-action-primary);
+			outline-color: var(--border-action-primary);
 		}
 
 		.deleteButton {
-			outline-color: var(--color-border-action-primary);
+			outline-color: var(--border-action-primary);
 		}
 	}
 
 	&.include {
 		.variantIcon {
-			color: var(--color-icon-secondary);
+			color: var(--icon-action-secondary);
 		}
 	}
 
 	&.exclude {
 		.variantIcon {
-			color: var(--color-icon-danger);
+			color: var(--icon-error);
 		}
 	}
 
 	&.disabled {
 		cursor: not-allowed;
-		color: var(--color-font-disabled);
-		background: var(--color-background);
-		border-color: var(--color-border-contrast);
+		color: var(--font-disabled);
+		background: var(--background);
+		border-color: var(--border-contrast);
 
 		.label {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 
 		.variantIcon {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 	}
 
@@ -77,17 +77,17 @@
 		visibility: hidden;
 		max-width: 0;
 		display: flex;
-		outline-color: var(--color-border-action-secondary);
+		outline-color: var(--border-action-secondary);
 		user-select: none;
 		transition-property:
 			background, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,
 			visibility, margin-left;
 		transition-timing-function: ease-out;
 		transition-duration: var(--transition-duration);
-		color: var(--color-icon-secondary);
+		color: var(--icon-action-secondary);
 
 		&:hover {
-			background: var(--color-background-action-secondary-hover);
+			background: var(--background-action-secondary-hover);
 		}
 	}
 
@@ -97,7 +97,7 @@
 		opacity: 1;
 		visibility: visible;
 		max-width: 50px;
-		margin-left: var(--spacing-3xs);
+		margin-left: var(--3xs);
 	}
 }
 
@@ -108,5 +108,5 @@
 .icon {
 	flex-shrink: 0;
 	display: flex;
-	margin-right: var(--spacing-3xs);
+	margin-right: var(--3xs);
 }

package/src/components/ds-tag-filter/ds-tag-filter.module.scss

@@ -1,11 +1,11 @@
 .container {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
-	padding: var(--spacing-xs) var(--spacing-standard);
-	background: var(--color-background-selected-weak);
-	border: 1px solid var(--color-outline-weak);
-	border-radius: var(--spacing-3xs);
+	gap: var(--xs);
+	padding: var(--xs) var(--standard);
+	background: var(--background-secondary-hover);
+	border: 1px solid var(--outline-weak);
+	border-radius: var(--3xs);
 	overflow: hidden;
 
 	&.expanded {
@@ -17,14 +17,14 @@
 	display: flex;
 	align-items: center;
 	width: 100%;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	flex-shrink: 0;
 }
 
 .headerActions {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	flex-shrink: 0;
 	margin-left: auto;
 }
@@ -33,12 +33,12 @@
 	display: flex;
 	align-items: center;
 	width: 100%;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	flex-wrap: wrap;
 }
 
 .label {
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	white-space: nowrap;
 	flex-shrink: 0;
 }
@@ -62,7 +62,7 @@
 	pointer-events: none;
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	height: 0;
 	overflow: hidden;
 	position: absolute;

package/src/components/ds-text-input/ds-text-input.module.scss

@@ -2,7 +2,7 @@
 
 .textInputContainer {
 	@include input.inputContainer;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .input {

package/src/components/ds-time-picker/components/time-item/time-item.module.scss

@@ -11,27 +11,27 @@ $time-item-width: 48px;
 	align-items: center;
 	border-radius: 8px;
 	background: transparent;
-	color: var(--color-font-main);
+	color: var(--font-main);
 
 	&.selected {
-		background: var(--color-background-selected);
-		color: var(--color-font-on-action);
+		background: var(--background-primary);
+		color: var(--font-on-action);
 	}
 
 	&.disabled {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 		pointer-events: none;
 	}
 
 	&:not(.selected, .disabled) {
 		&:hover {
-			border: 1px solid var(--color-border);
-			background: var(--color-background-action-hover-weak);
+			border: 1px solid var(--border);
+			background: var(--background-action-hover-weak);
 		}
 
 		&:focus-visible {
-			border: 2px solid var(--color-border-action-secondary);
-			background: var(--color-background-action-hover-weak);
+			border: 2px solid var(--border-action-secondary);
+			background: var(--background-action-hover-weak);
 		}
 	}
 }

package/src/components/ds-time-picker/components/time-scroller/time-scroller.module.scss

@@ -3,8 +3,8 @@ $column-max-height: 280px;
 
 .container {
 	display: flex;
-	padding: var(--spacing-xs);
-	background: var(--color-background);
+	padding: var(--xs);
+	background: var(--background);
 	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.22);
 }
 
@@ -13,7 +13,7 @@ $column-max-height: 280px;
 	flex-direction: column;
 	align-items: center;
 	width: $column-width;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	max-height: $column-max-height;
 	overflow-y: auto;
 	scroll-snap-type: y mandatory;

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

@@ -7,11 +7,11 @@
 		'description description description'
 		'actions actions actions';
 	align-items: start;
-	padding: var(--spacing-standard);
+	padding: var(--standard);
 	border-radius: 4px;
-	column-gap: var(--spacing-xs);
-	row-gap: var(--spacing-4xs);
-	color: var(--color-font-on-action);
+	column-gap: var(--xs);
+	row-gap: var(--4xs);
+	color: var(--font-on-action);
 	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
 	// approx. 6 columns (64 * 2)
 	min-width: 384px;
@@ -33,19 +33,19 @@
 	}
 
 	&[data-type='success'] {
-		background: var(--color-background-success-strong);
+		background: var(--background-success-strong);
 	}
 
 	&[data-type='info'] {
-		background: var(--color-background-info-strong);
+		background: var(--background-info-strong);
 	}
 
 	&[data-type='warning'] {
-		background: var(--color-background-warning-strong);
+		background: var(--background-warning-strong);
 	}
 
 	&[data-type='error'] {
-		background: var(--color-background-danger-strong);
+		background: var(--background-error);
 	}
 
 	&:not(:has([data-scope='toast'][data-part='title'])) {
@@ -64,7 +64,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: var(--spacing-4xs);
+	border-radius: var(--4xs);
 
 	&:hover {
 		background: rgba(0, 0, 0, 0.05);
@@ -86,12 +86,12 @@
 
 .icon {
 	grid-area: icon;
-	color: var(--color-icon-inverse);
+	color: var(--icon-inverse);
 }
 
 .actions {
 	grid-area: actions;
-	margin-top: var(--spacing-sm);
+	margin-top: var(--sm);
 }
 
 @media (max-width: 640px) {

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

@@ -34,15 +34,15 @@
 		height: var(--thumb-size);
 
 		&[data-state='unchecked'] {
-			background: var(--color-background-deselected);
+			background: var(--background-deselected);
 
 			&[data-hover] {
-				background: var(--color-background-deselected-hover);
+				background: var(--background-deselected-hover);
 			}
 
 			&[data-focus-visible] {
-				outline-color: var(--color-background-action-hover);
-				background: var(--color-background-deselected-hover);
+				outline-color: var(--background-action-hover);
+				background: var(--background-deselected-hover);
 			}
 
 			.iconCheck {
@@ -55,15 +55,15 @@
 		}
 
 		&[data-state='checked'] {
-			background: var(--color-background-selected);
+			background: var(--background-primary);
 
 			&[data-hover] {
-				background: var(--color-background-selected-hover);
+				background: var(--background-primary-hover);
 			}
 
 			&[data-focus-visible] {
-				outline-color: var(--color-background-selected);
-				background: var(--color-background-selected-hover);
+				outline-color: var(--background-primary);
+				background: var(--background-primary-hover);
 			}
 
 			.iconCheck {
@@ -77,15 +77,15 @@
 
 		&[data-disabled] {
 			cursor: not-allowed;
-			background: var(--color-background-disable);
+			background: var(--background-disable);
 
 			&[data-hover] {
-				background: var(--color-background-deselected-hover);
+				background: var(--background-deselected-hover);
 			}
 
 			&[data-focus-visible] {
-				outline-color: var(--color-background-action-hover);
-				background: var(--color-background-deselected-hover);
+				outline-color: var(--background-action-hover);
+				background: var(--background-deselected-hover);
 			}
 		}
 	}
@@ -94,7 +94,7 @@
 		border-radius: 9999px;
 		position: relative;
 		transition-property: transform;
-		background: var(--color-background);
+		background: var(--background);
 		transition-duration: var(--transition-duration);
 		height: 100%;
 		aspect-ratio: 1/1;
@@ -119,25 +119,25 @@
 		cursor: pointer;
 		display: flex;
 		flex-direction: column;
-		margin-left: var(--spacing-xs);
+		margin-left: var(--xs);
 
 		.labelInfo {
 			width: 100%;
-			color: var(--color-font-secondary);
+			color: var(--font-secondary);
 		}
 
 		&[data-disabled] {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 			cursor: default;
 
 			.labelInfo {
-				color: var(--color-background-disable);
+				color: var(--background-disable);
 			}
 		}
 	}
 
 	.icon {
-		color: var(--color-icon-inverse);
+		color: var(--icon-inverse);
 		position: absolute;
 		top: 50%;
 		transform: translateY(-50%);

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

@@ -1,13 +1,13 @@
 .tooltip {
-	color: var(--color-font-on-action);
-	background-color: var(--color-background-brand);
-	padding: var(--spacing-xs) var(--spacing-sm);
-	border-radius: var(--exo-spacing-2x-small);
+	color: var(--font-on-action);
+	background-color: var(--background-brand);
+	padding: var(--xs) var(--sm);
+	border-radius: var(--3xs);
 	max-width: 384px;
 	overflow-wrap: break-word;
 	z-index: 9999;
 }
 
 .arrow {
-	fill: var(--neutral-1);
+	fill: var(--color-dap-gray-700);
 }