@drivenets/design-system 0.10.0 → 0.11.0

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

@@ -1,13 +1,13 @@
-$pad-x: var(--spacing-lg);
-$pad-y: var(--spacing-standard);
+$pad-x: var(--lg);
+$pad-y: var(--standard);
 $max-width: 90vw;
 $border-size: 1px;
-$border: $border-size solid var(--color-border-secondary);
+$border: $border-size solid var(--border-secondary);
 
 .overlay {
 	position: fixed;
 	inset: 0;
-	background: var(--color-background-brand);
+	background: var(--background-brand);
 	opacity: 0.4;
 	z-index: 1199;
 
@@ -43,7 +43,7 @@ $border: $border-size solid var(--color-border-secondary);
 .modal {
 	position: fixed;
 	inset: 50% auto auto 50%;
-	background: var(--color-background);
+	background: var(--background);
 	border-radius: 4px;
 	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
 	z-index: 1200;
@@ -98,7 +98,7 @@ $border: $border-size solid var(--color-border-secondary);
 .header {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	position: relative;
 	background: inherit;
 	flex-shrink: 0;
@@ -110,7 +110,7 @@ $border: $border-size solid var(--color-border-secondary);
 		left: $pad-x;
 		right: $pad-x;
 		height: $border-size;
-		background: var(--color-border-secondary);
+		background: var(--border-secondary);
 	}
 }
 
@@ -121,7 +121,7 @@ $border: $border-size solid var(--color-border-secondary);
 }
 
 .title {
-	color: var(--color-font-main);
+	color: var(--font-main);
 	margin: 0;
 	flex: 1;
 }
@@ -135,7 +135,7 @@ $border: $border-size solid var(--color-border-secondary);
 
 .actions {
 	display: flex;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	justify-content: flex-end;
 	margin-left: auto;
 }

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

@@ -1,7 +1,7 @@
 .root {
 	position: relative;
-	background: var(--white);
-	padding: var(--spacing-6);
+	background: var(--color-dap-gray-050);
+	padding: var(--lg);
 	width: 20vw;
 	min-width: 240px;
 	max-width: 480px;
@@ -10,7 +10,7 @@
 
 	&[data-state='open']:hover,
 	&[data-state='open']:has(:focus-visible) {
-		border-color: var(--color-border);
+		border-color: var(--border);
 	}
 
 	&[data-state='closed'] {
@@ -19,10 +19,10 @@
 
 	&.variantFloating {
 		position: absolute;
-		inset-inline-start: var(--spacing-3);
-		top: var(--spacing-3);
+		inset-inline-start: var(--sm);
+		top: var(--sm);
 		border: none;
-		border-radius: var(--spacing-2);
+		border-radius: var(--xs);
 		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
 	}
 
@@ -46,11 +46,11 @@
 	height: var(--size);
 	width: var(--size);
 	padding: 1px;
-	border: 1px solid var(--color-border-secondary);
+	border: 1px solid var(--border-secondary);
 	border-radius: 100%;
-	background: var(--white);
-	color: var(--color-icon-secondary);
-	top: var(--spacing-6);
+	background: var(--color-dap-gray-050);
+	color: var(--icon-action-secondary);
+	top: var(--lg);
 	inset-inline-start: 100%;
 	margin-inline-start: calc(var(--size) / -2);
 
@@ -66,13 +66,13 @@
 
 	&:hover,
 	&:focus-visible {
-		color: var(--color-icon-primary);
-		border-color: var(--color-border-action-primary);
+		color: var(--icon-action);
+		border-color: var(--border-action-primary);
 		outline: none;
-		background: var(--color-background-action-tertiary);
+		background: var(--background-action-tertiary-hover);
 
 		.root:has(&) {
-			border-color: var(--color-border-action-primary);
+			border-color: var(--border-action-primary);
 
 			// Add an inset single-sided border on hover without affecting the layout.
 			&.variantDocked[data-state='open']::before {
@@ -83,7 +83,7 @@
 				width: 1px;
 				top: 0;
 				inset-inline-end: 0;
-				background: var(--color-border-action-primary);
+				background: var(--border-action-primary);
 				pointer-events: none;
 			}
 		}
@@ -93,7 +93,7 @@
 	&::after {
 		content: '';
 		position: absolute;
-		inset: calc(-1 * var(--spacing-1));
+		inset: calc(-1 * var(--3xs));
 	}
 
 	.root.variantFloating & {

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

@@ -11,12 +11,12 @@
 	gap: 12px;
 	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
 	border-radius: 2px;
-	background: var(--white);
+	background: var(--color-dap-gray-050);
 	padding: 12px;
 }
 
 .arrow {
-	fill: var(--white);
+	fill: var(--color-dap-gray-050);
 	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.1));
 	width: 18px;
 	height: 10px;

package/src/components/ds-progress-arc/ds-progress-arc.module.scss

@@ -14,7 +14,7 @@ $transition-duration: 0.2s;
 }
 
 .track {
-	stroke: var(--color-background-tertiary);
+	stroke: var(--background-tertiary);
 	transition: stroke $transition-duration;
 }
 
@@ -23,15 +23,15 @@ $transition-duration: 0.2s;
 }
 
 .default {
-	stroke: var(--color-background-selected);
+	stroke: var(--background-primary);
 }
 
 .success {
-	stroke: var(--color-background-success-strong);
+	stroke: var(--background-success-strong);
 }
 
 .error {
-	stroke: var(--color-background-danger-strong);
+	stroke: var(--background-error);
 }
 
 .center {
@@ -39,15 +39,15 @@ $transition-duration: 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .iconSuccess {
-	color: var(--color-icon-success);
+	color: var(--icon-success);
 }
 
 .iconError {
-	color: var(--color-icon-danger);
+	color: var(--icon-error);
 }
 
 .iconMediumSize.iconMediumSize {

package/src/components/ds-progress-donut/ds-progress-donut.module.scss

@@ -20,7 +20,7 @@ $transition-duration: 0.2s;
 }
 
 .track {
-	stroke: var(--color-background-tertiary);
+	stroke: var(--background-tertiary);
 	transition: stroke $transition-duration;
 }
 
@@ -30,16 +30,16 @@ $transition-duration: 0.2s;
 }
 
 .default .range {
-	stroke: var(--color-background-selected);
+	stroke: var(--background-primary);
 }
 
 .success .track,
 .success .range {
-	stroke: var(--color-background-success-strong);
+	stroke: var(--background-success-strong);
 }
 
 .error .range {
-	stroke: var(--color-background-danger-strong);
+	stroke: var(--background-error);
 }
 
 .center {
@@ -47,15 +47,15 @@ $transition-duration: 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .iconSuccess {
-	color: var(--color-icon-success);
+	color: var(--icon-success);
 }
 
 .iconError {
-	color: var(--color-icon-danger);
+	color: var(--icon-error);
 }
 
 $icon-medium-size: 44px;

package/src/components/ds-progress-linear/ds-progress-linear.module.scss

@@ -8,12 +8,12 @@ $border-radius: 4px;
 	width: 100%;
 
 	&.sizeSmall {
-		gap: var(--spacing-4xs);
+		gap: var(--4xs);
 	}
 
 	&.sizeMedium,
 	&.sizeLarge {
-		gap: var(--spacing-3xs);
+		gap: var(--3xs);
 	}
 }
 
@@ -25,18 +25,18 @@ $border-radius: 4px;
 
 .label {
 	@include typography.body-sm-md;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .valueText {
 	@include typography.body-sm-reg;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	flex-shrink: 0;
 }
 
 .track {
 	width: 100%;
-	background-color: var(--color-background-tertiary);
+	background-color: var(--background-tertiary);
 	border-radius: $border-radius;
 	overflow: hidden;
 }
@@ -60,41 +60,41 @@ $border-radius: 4px;
 }
 
 .variantProgress {
-	background-color: var(--color-background-selected);
+	background-color: var(--background-primary);
 }
 
 .variantInterrupted {
-	background-color: var(--color-background-warning-strong);
+	background-color: var(--background-warning-strong);
 }
 
 .variantSuccess {
-	background-color: var(--color-background-success-strong);
+	background-color: var(--background-success-strong);
 }
 
 .variantError {
-	background-color: var(--color-background-danger-strong);
+	background-color: var(--background-error);
 }
 
 .caption {
 	@include typography.body-xs-reg;
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
-	padding-top: var(--spacing-4xs);
+	gap: var(--3xs);
+	padding-top: var(--4xs);
 }
 
 .captionDefault {
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .captionSuccess {
-	color: var(--color-background-success-strong);
+	color: var(--background-success-strong);
 }
 
 .captionError {
-	color: var(--color-background-danger-strong);
+	color: var(--background-error);
 }
 
 .captionInterrupted {
-	color: var(--color-font-warning);
+	color: var(--font-warning);
 }

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

@@ -2,19 +2,19 @@
 	display: inline-flex;
 	align-items: center;
 	position: relative;
-	background: var(--color-background-secondary);
-	border: 1px solid var(--color-border-contrast);
+	background: var(--background-secondary);
+	border: 1px solid var(--border-contrast);
 	border-radius: 4px;
-	gap: var(--spacing-2xs);
+	gap: var(--2xs);
 	height: 36px;
-	padding: var(--spacing-3xs);
+	padding: var(--3xs);
 
 	&.small {
 		height: 28px;
-		padding: var(--spacing-4xs);
+		padding: var(--4xs);
 
 		.segmentItem {
-			padding: var(--spacing-4xs) var(--spacing-xs);
+			padding: var(--4xs) var(--xs);
 		}
 	}
 }
@@ -24,8 +24,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: var(--spacing-3xs) var(--spacing-sm);
-	gap: var(--spacing-2xs);
+	padding: var(--3xs) var(--sm);
+	gap: var(--2xs);
 	flex: 1;
 	z-index: 1;
 	cursor: pointer;
@@ -33,7 +33,7 @@
 
 	&[data-state='checked'] {
 		.segmentItemText {
-			color: var(--color-font-main);
+			color: var(--font-main);
 			font-weight: var(--font-weight-medium);
 		}
 	}
@@ -42,30 +42,30 @@
 		background: transparent;
 
 		.segmentItemText {
-			color: var(--color-background-action);
+			color: var(--background-action);
 		}
 
 		&:hover:not([data-disabled]) {
-			background: var(--color-background-action-secondary);
+			background: var(--background-action-secondary);
 		}
 
 		&:active:not([data-disabled]) {
-			background: var(--color-background);
-			border-color: var(--color-border-contrast);
+			background: var(--background);
+			border-color: var(--border-contrast);
 		}
 	}
 
 	&[data-disabled] {
 		cursor: not-allowed;
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 
 		.segmentItemText {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--color-border-action-secondary);
+		outline: 2px solid var(--border-action-secondary);
 		outline-offset: 2px;
 	}
 }
@@ -86,8 +86,8 @@
 
 .segmentIndicator {
 	position: absolute;
-	background: var(--color-background);
-	border: 1px solid var(--color-border-contrast);
+	background: var(--background);
+	border: 1px solid var(--border-contrast);
 	border-radius: 4px;
 	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
 	z-index: 0;

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

@@ -33,18 +33,18 @@
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	color: var(--color-font-secondary);
-	padding: var(--spacing-xs);
+	color: var(--font-secondary);
+	padding: var(--xs);
 	border-radius: 2px;
 	cursor: pointer;
 	outline: none;
 
 	&[data-highlighted],
 	&:hover {
-		background: var(--color-background-selected-weak);
+		background: var(--background-secondary-hover);
 
 		.itemIcon {
-			color: var(--color-background-selected);
+			color: var(--background-primary);
 		}
 	}
 }
@@ -56,14 +56,14 @@
 	text-align: start;
 
 	.trigger:not([data-disabled]) & {
-		color: var(--color-font-secondary);
+		color: var(--font-secondary);
 	}
 }
 
 .multiSelectItemsContainer {
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-3xs);
-	border-bottom: 1px solid var(--color-border-secondary);
+	gap: var(--3xs);
+	padding: var(--3xs);
+	border-bottom: 1px solid var(--border-secondary);
 }

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

@@ -34,7 +34,7 @@
 
 .text {
 	display: block;
-	margin-bottom: var(--spacing-xs);
+	margin-bottom: var(--xs);
 
 	&:last-child {
 		margin-bottom: 0;

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

@@ -9,34 +9,34 @@
 		@include typography.ellipsis;
 		display: flex;
 		height: 48px;
-		padding: var(--spacing-xs) var(--spacing-sm);
+		padding: var(--xs) var(--sm);
 		align-items: center;
 		gap: 8px;
 		border-radius: 4px;
-		border: 1px solid var(--color-border);
-		background: var(--color-background);
+		border: 1px solid var(--border);
+		background: var(--background);
 		min-width: 250px;
 
 		&.active {
 			@include typography.body-sm-md;
-			border-color: var(--color-border-action-secondary);
+			border-color: var(--border-action-secondary);
 
 			.icon {
-				color: var(--color-background);
-				background: var(--tab-color, var(--color-background-action));
+				color: var(--background);
+				background: var(--tab-color, var(--background-action));
 			}
 
 			.value {
-				color: var(--color-font-main);
+				color: var(--font-main);
 			}
 		}
 
 		&:hover:not(.active):not(:disabled) {
-			border-color: var(--color-border-action-primary-hover);
+			border-color: var(--border-action-primary-hover);
 		}
 
 		&:focus {
-			outline: auto var(--color-border-action-primary-hover);
+			outline: auto var(--border-action-primary-hover);
 		}
 
 		&.disabled {
@@ -48,8 +48,8 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			color: var(--color-background-action);
-			background: var(--color-background-tertiary);
+			color: var(--background-action);
+			background: var(--background-tertiary);
 			border-radius: 50%;
 			width: var(--icon-width-extra-large);
 			height: var(--icon-width-extra-large);
@@ -63,7 +63,7 @@
 
 		.content {
 			padding-right: 4px;
-			color: var(--color-font-secondary);
+			color: var(--font-secondary);
 		}
 	}
 }

package/src/components/ds-smart-tabs/ds-smart-tabs.tsx

@@ -6,15 +6,15 @@ import styles from './ds-smart-tabs.module.scss';
 import type { Color, DsSmartTabProps, DsSmartTabsProps } from './ds-smart-tabs.types';
 
 const colorMap: Record<Color, string> = {
-	'dark-blue': 'var(--color-background-info-strong)',
-	'light-blue': 'var(--color-background-active-moderate)',
-	'dark-gray': 'var(--color-background-brand)',
-	green: 'var(--color-background-success-strong)',
-	fuchsia: 'var(--color-data-fuchsia)',
-	blue: 'var(--color-icon-information-secondary)',
-	gray: 'var(--color-icon-information-main)',
-	red: 'var(--color-icon-warning)',
-	amber: 'var(--color-data-amber)',
+	'dark-blue': 'var(--background-info-strong)',
+	'light-blue': 'var(--background-active-moderate)',
+	'dark-gray': 'var(--background-brand)',
+	green: 'var(--background-success-strong)',
+	fuchsia: 'var(--color-dap-data-fuchsia)',
+	blue: 'var(--icon-information-secondary)',
+	gray: 'var(--icon-information-main)',
+	red: 'var(--icon-warning)',
+	amber: 'var(--color-dap-data-amber)',
 };
 
 interface SmartTabsContextType {

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

@@ -20,7 +20,7 @@
 
 .progressArc {
 	transition: stroke-dasharray 0.3s ease-in-out;
-	stroke: var(--color-background-selected);
+	stroke: var(--background-primary);
 
 	button &,
 	[role='button'] & {

package/src/components/ds-status-badge/ds-status-badge.module.scss

@@ -1,6 +1,6 @@
 @use '../../styles/typography';
 
-@mixin status-filled($color, $background, $label-color: var(--color-font-on-action)) {
+@mixin status-filled($color, $background, $label-color: var(--font-on-action)) {
 	color: $color;
 	background: $background;
 
@@ -15,7 +15,7 @@
 		background: $background;
 
 		.label {
-			color: var(--color-font-main);
+			color: var(--font-main);
 		}
 	}
 }
@@ -23,55 +23,51 @@
 .container {
 	display: flex;
 	align-items: center;
-	padding: var(--spacing-3xs) var(--spacing-standard) var(--spacing-3xs) var(--spacing-xs);
+	padding: var(--3xs) var(--standard) var(--3xs) var(--xs);
 	width: max-content;
-	color: var(--color-icon-inverse);
-	gap: var(--spacing-3xs);
+	color: var(--icon-inverse);
+	gap: var(--3xs);
 	border-radius: 100vmax;
 
 	&.small {
-		padding: var(--spacing-4xs) var(--spacing-xs) var(--spacing-4xs) var(--spacing-3xs);
-		gap: var(--spacing-4xs);
+		padding: var(--4xs) var(--xs) var(--4xs) var(--3xs);
+		gap: var(--4xs);
 	}
 }
 
 .active {
-	@include status-filled(var(--color-font-on-action), var(--color-background-success-strong));
-	@include status-ghost(var(--color-background-success-strong), var(--color-status-bg-success));
+	@include status-filled(var(--font-on-action), var(--background-success-strong));
+	@include status-ghost(var(--background-success-strong), var(--status-bg-success));
 }
 
 .running {
-	@include status-filled(var(--color-font-on-action), var(--color-background-active-moderate));
-	@include status-ghost(var(--color-icon-information-secondary), var(--color-status-bg-progress));
+	@include status-filled(var(--font-on-action), var(--background-active-moderate));
+	@include status-ghost(var(--icon-information-secondary), var(--status-bg-progress));
 }
 
 .pending {
-	@include status-filled(var(--color-font-on-action), var(--color-data-fuchsia));
-	@include status-ghost(var(--color-data-purple), var(--color-data-light-purple));
+	@include status-filled(var(--font-on-action), var(--color-dap-data-fuchsia));
+	@include status-ghost(var(--color-dap-data-purple), var(--color-dap-data-light-purple));
 }
 
 .draft {
-	@include status-filled(var(--color-font-on-action), var(--color-icon-information-main));
-	@include status-ghost(var(--color-icon-secondary), var(--color-status-bg-neutral));
+	@include status-filled(var(--font-on-action), var(--icon-information-main));
+	@include status-ghost(var(--icon-action-secondary), var(--status-bg-neutral));
 }
 
 .inactive {
-	@include status-filled(
-		var(--color-icon-secondary),
-		var(--color-background-disable),
-		var(--color-font-on-disabled)
-	);
-	@include status-ghost(var(--color-icon-secondary), var(--color-status-bg-inactive));
+	@include status-filled(var(--icon-action-secondary), var(--background-disable), var(--font-on-disabled));
+	@include status-ghost(var(--icon-action-secondary), var(--status-bg-inactive));
 }
 
 .warning {
-	@include status-filled(var(--color-font-on-action), var(--color-background-warning-strong));
-	@include status-ghost(var(--color-background-warning-strong), var(--color-status-bg-warning));
+	@include status-filled(var(--font-on-action), var(--background-warning-strong));
+	@include status-ghost(var(--background-warning-strong), var(--status-bg-warning));
 }
 
 .failed {
-	@include status-filled(var(--color-font-on-action), var(--color-background-danger-strong));
-	@include status-ghost(var(--color-background-danger-strong-hover), var(--color-status-bg-failed));
+	@include status-filled(var(--font-on-action), var(--background-error));
+	@include status-ghost(var(--background-error-hover), var(--background-error-secondary-hover));
 }
 
 .label::first-letter {