@drivenets/design-system 0.10.0 → 0.11.0

package/src/components/ds-date-picker/ds-date-picker.module.scss

@@ -20,7 +20,7 @@
 
 .content {
 	@include dropdown.dropdown-content;
-	padding: var(--spacing-standard);
+	padding: var(--standard);
 	min-width: fit-content;
 }
 

package/src/components/ds-date-range-picker/ds-date-range-picker.module.scss

@@ -1,6 +1,6 @@
 .root {
 	display: flex;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .horizontal {

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

@@ -14,7 +14,7 @@
 	--_shadow-size: 18px;
 	--_shadow-y-offset: 6px;
 
-	background: var(--white, #fff);
+	background: var(--color-dap-gray-050, #fff);
 	border-radius: 8px;
 	box-shadow: 0 var(--_shadow-y-offset) var(--_shadow-size) 0 rgba(4, 69, 204, 0.3);
 	padding: 12px;
@@ -34,12 +34,12 @@
 .title {
 	@include typography.p-base;
 	@include typography.medium;
-	color: var(--neutral-1);
+	color: var(--color-dap-gray-700);
 }
 
 .description {
 	@include typography.p-base;
-	color: var(--neutral-3);
+	color: var(--color-dap-gray-500);
 	margin-bottom: 16px;
 }
 

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

@@ -5,7 +5,7 @@
 	padding: 0;
 	color: transparent;
 
-	background-color: var(--color-border-secondary);
+	background-color: var(--border-secondary);
 	flex-shrink: 0;
 }
 

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

@@ -47,7 +47,7 @@
 	display: block;
 	top: 0;
 	bottom: 0;
-	background: var(--color-background);
+	background: var(--background);
 	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.22);
 	z-index: 1200;
 	pointer-events: auto;
@@ -167,29 +167,29 @@
 	align-items: center;
 	justify-content: space-between;
 	flex-wrap: wrap;
-	border-bottom: 1px solid var(--color-border);
-	padding: var(--spacing-sm) var(--spacing-standard);
-	gap: var(--spacing-3xs);
+	border-bottom: 1px solid var(--border);
+	padding: var(--sm) var(--standard);
+	gap: var(--3xs);
 }
 
 .title {
 	margin: 0;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .closeTrigger {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-icon-secondary);
+	color: var(--icon-action-secondary);
 }
 
 .toolbar {
 	display: flex;
 	align-items: center;
-	border-bottom: 1px solid var(--color-border);
-	padding: var(--spacing-sm) var(--spacing-standard);
-	gap: var(--spacing-3xs);
+	border-bottom: 1px solid var(--border);
+	padding: var(--sm) var(--standard);
+	gap: var(--3xs);
 }
 
 .body {
@@ -200,13 +200,13 @@
 .footer {
 	display: flex;
 	align-items: center;
-	padding: var(--spacing-standard);
-	border-top: 1px solid var(--color-border);
+	padding: var(--standard);
+	border-top: 1px solid var(--border);
 }
 
 .actions {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	margin-left: auto;
 }

package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss

@@ -22,9 +22,9 @@
 	position: sticky;
 	top: 0;
 	z-index: 1;
-	padding: var(--spacing-3xs);
-	border-bottom: 1px solid var(--color-border-secondary);
-	background-color: var(--color-background);
+	padding: var(--3xs);
+	border-bottom: 1px solid var(--border-secondary);
+	background-color: var(--background);
 }
 
 .item {
@@ -33,7 +33,7 @@
 	.triggerItem {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-xs);
+		gap: var(--xs);
 	}
 
 	&.selected {
@@ -45,10 +45,18 @@
 
 		&:hover {
 			.indicator {
-				color: var(--color-background-selected);
+				color: var(--background-primary);
 			}
 		}
 	}
+
+	&.variant-error {
+		color: var(--font-error);
+
+		&[data-highlighted] {
+			background: var(--background-error-secondary-hover);
+		}
+	}
 }
 
 .itemIcon {
@@ -61,8 +69,8 @@
 
 .separator {
 	height: 1px;
-	background-color: var(--color-border-secondary);
-	margin: var(--spacing-4xs) var(--spacing-xs);
+	background-color: var(--border-secondary);
+	margin: var(--4xs) var(--xs);
 }
 
 .actions {
@@ -72,17 +80,17 @@
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
-	gap: var(--spacing-xs);
-	padding: var(--spacing-3xs) var(--spacing-xs);
-	border-top: 1px solid var(--color-border-secondary);
-	background-color: var(--color-background);
+	gap: var(--xs);
+	padding: var(--3xs) var(--xs);
+	border-top: 1px solid var(--border-secondary);
+	background-color: var(--background);
 }
 
 .groupLabel {
 	display: flex;
 	align-items: center;
-	padding: var(--spacing-3xs) var(--spacing-xs);
-	background-color: var(--color-background);
+	padding: var(--3xs) var(--xs);
+	background-color: var(--background);
 	outline-offset: -1px;
 
 	&Collapsible {
@@ -94,7 +102,7 @@
 		transition: background-color 0.15s ease;
 
 		&:hover {
-			background-color: var(--color-background-action-hover-weak);
+			background-color: var(--background-action-hover-weak);
 		}
 	}
 }

package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx

@@ -104,6 +104,7 @@ const Content: React.FC<DsDropdownMenuContentProps> = ({
 const Item: React.FC<DsDropdownMenuItemProps> = ({
 	disabled,
 	selected,
+	variant = 'default',
 	value,
 	asChild,
 	onClick,
@@ -120,6 +121,7 @@ const Item: React.FC<DsDropdownMenuItemProps> = ({
 				{
 					[styles.selected]: selected,
 				},
+				variant === 'error' && styles['variant-error'],
 				className,
 			)}
 			style={style}

package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts

@@ -2,6 +2,9 @@ import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import type { Menu } from '@ark-ui/react/menu';
 import type { IconType } from '../ds-icon';
 
+export const dropdownMenuItemVariants = ['default', 'error'] as const;
+export type DropdownMenuItemVariant = (typeof dropdownMenuItemVariants)[number];
+
 /**
  * Base positioning type
  */
@@ -190,6 +193,12 @@ export interface DsDropdownMenuItemProps extends Pick<
 	 * Whether the item is selected (applies selected styling)
 	 */
 	selected?: boolean;
+	/**
+	 * Status variant that applies colored text to convey item state.
+	 * `error` renders text in danger color.
+	 * @default 'default'
+	 */
+	variant?: DropdownMenuItemVariant;
 }
 
 /**

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

@@ -4,7 +4,7 @@
 
 	&:not(.expanded) {
 		gap: 0;
-		padding-inline: var(--spacing-xs);
+		padding-inline: var(--xs);
 	}
 
 	.trigger:focus {

package/src/components/ds-file-upload/components/file-upload/file-upload.module.scss

@@ -11,10 +11,10 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: var(--exo-spacing-small) var(--exo-spacing-standard);
-	border: var(--exo-spacing-4x-small) dashed var(--color-border);
-	border-radius: var(--exo-spacing-2x-small);
-	background-color: var(--color-background);
+	padding: var(--sm) var(--standard);
+	border: 1px dashed var(--border);
+	border-radius: var(--3xs);
+	background-color: var(--background);
 	transition: all 0.2s ease;
 	cursor: pointer;
 
@@ -32,13 +32,13 @@
 	}
 
 	.dropzoneIcon {
-		color: var(--color-icon-secondary);
+		color: var(--icon-action-secondary);
 	}
 
 	.dropzoneText {
-		color: var(--color-background-deselected);
+		color: var(--background-deselected);
 		text-align: center;
-		padding: var(--spacing-3xs) 0 var(--spacing-sm) 0;
+		padding: var(--3xs) 0 var(--sm) 0;
 	}
 
 	[data-part='trigger'] {
@@ -46,13 +46,13 @@
 	}
 
 	&:hover:not([data-disabled]) {
-		border-color: var(--color-background-selected);
-		background-color: var(--color-background-selected-weak);
+		border-color: var(--background-primary);
+		background-color: var(--background-secondary-hover);
 	}
 
 	&[data-dragging] {
-		border-color: var(--color-background-selected);
-		background-color: var(--color-background-selected-weak);
+		border-color: var(--background-primary);
+		background-color: var(--background-secondary-hover);
 		border-style: solid;
 	}
 
@@ -61,7 +61,7 @@
 
 		.dropzoneIcon,
 		.dropzoneText {
-			color: var(--color-background-disable);
+			color: var(--background-disable);
 		}
 	}
 }
@@ -69,22 +69,22 @@
 .fileList {
 	display: flex;
 	flex-direction: column;
-	gap: var(--exo-spacing-x-small);
-	margin-top: var(--exo-spacing-x-small);
-	padding: var(--spacing-xs);
-	border-radius: var(--exo-spacing-2x-small);
-	background: var(--color-background-secondary);
+	gap: var(--xs);
+	margin-top: var(--xs);
+	padding: var(--xs);
+	border-radius: var(--3xs);
+	background: var(--background-secondary);
 }
 
 .infoText {
-	color: var(--color-font-secondary);
-	margin-top: var(--spacing-2xs);
+	color: var(--font-secondary);
+	margin-top: var(--2xs);
 }
 
 .errorText {
-	color: var(--color-background-danger-strong);
+	color: var(--background-error);
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
-	margin-top: var(--spacing-2xs);
+	gap: var(--3xs);
+	margin-top: var(--2xs);
 }

package/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss

@@ -7,16 +7,16 @@
 	.fileItemContent {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-2xs);
+		gap: var(--2xs);
 		width: 100%;
-		background-color: var(--color-background);
-		padding: var(--spacing-4xs) var(--exo-spacing-x-small);
+		background-color: var(--background);
+		padding: var(--4xs) var(--xs);
 		border: 1px solid transparent;
-		border-radius: var(--exo-spacing-2x-small);
+		border-radius: var(--3xs);
 		transition: all 0.2s ease;
 
 		&:hover {
-			border-color: var(--color-border-secondary);
+			border-color: var(--border-secondary);
 		}
 
 		&[data-disabled] {
@@ -24,41 +24,41 @@
 		}
 
 		&.fileItemError {
-			background-color: var(--color-background-danger-weak);
+			background-color: var(--background-error-secondary-hover);
 
 			.progressRange {
-				background: var(--color-background-danger-strong);
+				background: var(--background-error);
 			}
 		}
 
 		&.fileItemCompleted {
 			.progressRange {
-				background: var(--color-background-success-strong);
+				background: var(--background-success-strong);
 			}
 		}
 
 		&.fileItemUploading {
 			.progressRange {
-				background: var(--color-background-selected);
+				background: var(--background-primary);
 			}
 		}
 
 		&.fileItemInterrupted {
 			.progressRange {
-				background: var(--color-background-warning-strong);
+				background: var(--background-warning-strong);
 			}
 		}
 	}
 }
 
 .filePreview {
-	color: var(--color-background-deselected);
+	color: var(--background-deselected);
 }
 
 .fileInfo {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-2xs);
+	gap: var(--2xs);
 	flex: 1;
 	min-width: 0;
 }
@@ -66,14 +66,14 @@
 .fileName {
 	@include typography.body-sm-reg;
 	@include typography.ellipsis;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	flex: 1 0 75%;
 }
 
 .progressContainer {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	width: 100%;
 }
 
@@ -85,14 +85,14 @@
 .progressTrack {
 	width: 100%;
 	height: 100%;
-	background-color: var(--color-background-tertiary);
-	border-radius: var(--exo-spacing-2x-small);
+	background-color: var(--background-tertiary);
+	border-radius: var(--3xs);
 	overflow: hidden;
 }
 
 .progressRange {
 	height: 100%;
-	background-color: var(--color-background-selected);
+	background-color: var(--background-primary);
 	border-radius: 2px;
 	transition: width 0.3s ease;
 }
@@ -100,26 +100,26 @@
 @mixin infoText {
 	@include typography.body-xs-reg;
 	display: flex;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-3xs) var(--spacing-sm);
+	gap: var(--3xs);
+	padding: var(--3xs) var(--sm);
 }
 
 .progressText {
 	@include infoText;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .completedText {
 	@include infoText;
-	color: var(--color-background-success-strong);
+	color: var(--background-success-strong);
 }
 
 .interruptedText {
 	@include infoText;
-	color: var(--color-font-warning);
+	color: var(--font-warning);
 }
 
 .errorMessage {
 	@include infoText;
-	color: var(--color-background-danger-strong);
+	color: var(--background-error);
 }

package/src/components/ds-filter-status-icon/ds-filter-status-icon.module.scss

@@ -1,19 +1,19 @@
 .running {
-	color: var(--color-primary-700-default);
+	color: var(--primary-700-default);
 }
 
 .warning {
-	color: var(--color-warning-400);
+	color: var(--warning-400);
 }
 
 .failed {
-	color: var(--color-negative-400-default);
+	color: var(--negative-400-default);
 }
 
 .paused {
-	color: var(--color-purple-600);
+	color: var(--color-dap-purple-600);
 }
 
 .inactive {
-	color: var(--color-font-disabled);
+	color: var(--font-disabled);
 }

package/src/components/ds-form-control/ds-form-control.module.scss

@@ -9,26 +9,26 @@ $form-control-description-max-height: calc(
 .container {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-4xs);
+	gap: var(--4xs);
 
 	&.success {
 		.message {
-			color: var(--color-background-success-strong);
+			color: var(--background-success-strong);
 		}
 	}
 
 	&.warning {
 		.message {
-			color: var(--color-font-warning);
+			color: var(--font-warning);
 		}
 	}
 
 	&.error {
-		--form-control-border-color: var(--color-background-danger-strong);
-		--form-control-selection-color: var(--color-background-danger-weak);
+		--form-control-border-color: var(--background-error);
+		--form-control-selection-color: var(--background-error-secondary-hover);
 
 		.message {
-			color: var(--color-background-danger-strong);
+			color: var(--background-error);
 		}
 	}
 }
@@ -36,12 +36,12 @@ $form-control-description-max-height: calc(
 .labelContainer {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-4xs);
+	gap: var(--4xs);
 }
 
 .label {
 	@include typography.body-sm-reg;
-	color: var(--color-font-main);
+	color: var(--font-main);
 
 	&.required::after {
 		@include typography.body-sm-reg;
@@ -49,14 +49,14 @@ $form-control-description-max-height: calc(
 		position: relative;
 		top: -1px;
 		right: -1px;
-		color: var(--color-icon-danger);
+		color: var(--icon-error);
 	}
 
 	&.disabled {
 		color: var(--color-background-disabled);
 
 		&::after {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 	}
 }
@@ -69,7 +69,7 @@ $form-control-description-max-height: calc(
 
 .description {
 	@include typography.p-s;
-	color: var(--neutral-2);
+	color: var(--color-dap-gray-600);
 	line-height: $form-control-description-line-height;
 	max-height: $form-control-description-max-height;
 	overflow: hidden;
@@ -117,7 +117,7 @@ $form-control-description-max-height: calc(
 	.icon {
 		position: absolute;
 		pointer-events: none;
-		color: var(--neutral-3);
+		color: var(--color-dap-gray-500);
 	}
 
 	.icon {
@@ -127,7 +127,7 @@ $form-control-description-max-height: calc(
 
 .message {
 	@include typography.body-xs-reg;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	display: flex;
 	align-items: center;
 	gap: 4px;

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

@@ -1,3 +1,11 @@
+:root {
+	--icon-width-extra-large: 32px;
+	--icon-width-large: 28px;
+	--icon-width-medium: 24px;
+	--icon-width-small: 20px;
+	--icon-width-tiny: 16px;
+}
+
 .icon {
 	&.extra-large {
 		font-size: var(--icon-width-extra-large);

package/src/components/ds-key-value-pair/ds-key-value-pair.module.scss

@@ -10,21 +10,21 @@
 .root[data-orientation='horizontal'] {
 	display: grid;
 	grid-template-columns: auto 1fr;
-	column-gap: var(--spacing-xs);
+	column-gap: var(--xs);
 	align-items: start;
 }
 
 .label {
-	padding-bottom: var(--spacing-4xs);
-	padding-left: var(--spacing-sm);
-	color: var(--color-font-main);
+	padding-bottom: var(--4xs);
+	padding-left: var(--sm);
+	color: var(--font-main);
 	white-space: nowrap;
 	flex-shrink: 0;
 }
 
 .root[data-orientation='horizontal'] .label {
 	padding-bottom: 0;
-	padding-top: var(--spacing-3xs);
+	padding-top: var(--3xs);
 }
 
 .valueContainer {
@@ -43,8 +43,8 @@
 	width: 100%;
 	min-width: 0;
 	min-height: 28px;
-	padding: var(--spacing-3xs) var(--spacing-sm);
-	color: var(--color-font-secondary);
+	padding: var(--3xs) var(--sm);
+	color: var(--font-secondary);
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;