@drivenets/design-system 0.10.0 → 0.11.0

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

@@ -1,33 +1,33 @@
 @use '../../styles/mixin' as mixins;
 
-$step-padding: var(--spacing-sm);
-$step-gap: var(--spacing-standard);
-$step-border-radius: var(--spacing-3xs);
+$step-padding: var(--sm);
+$step-gap: var(--standard);
+$step-border-radius: var(--3xs);
 
-$step-single-padding-block: var(--spacing-standard);
-$step-single-padding-inline-start: var(--spacing-sm);
-$step-single-padding-inline-end: var(--spacing-md);
-$step-single-border-radius: var(--spacing-xs);
+$step-single-padding-block: var(--standard);
+$step-single-padding-inline-start: var(--sm);
+$step-single-padding-inline-end: var(--md);
+$step-single-border-radius: var(--xs);
 
 $indicator-size: 36px;
 $indicator-size-single: var(--icon-width-extra-large);
-$indicator-border-width: var(--spacing-4xs);
+$indicator-border-width: var(--4xs);
 $indicator-border-width-current: 3px;
-$indicator-container-padding: 0 var(--spacing-4xs);
+$indicator-container-padding: 0 var(--4xs);
 
-$separator-width: var(--spacing-4xs);
-$separator-offset: var(--spacing-sm);
+$separator-width: var(--4xs);
+$separator-offset: var(--sm);
 
-$label-padding: var(--spacing-4xs) 0;
-$label-font-size: var(--font-size-md);
-$label-font-size-single: var(--font-size-sm);
+$label-padding: var(--4xs) 0;
+$label-font-size: var(--body-font-size-md);
+$label-font-size-single: var(--body-font-size-sm);
 $label-line-height: 1.5;
 $label-font-weight: var(--font-weight-medium);
-$description-font-size: var(--font-size-sm);
+$description-font-size: var(--body-font-size-sm);
 $description-line-height: 1.4;
 
-$actions-margin-top: var(--spacing-sm);
-$actions-gap: var(--spacing-3xs);
+$actions-margin-top: var(--sm);
+$actions-gap: var(--3xs);
 
 $drag-handle-size: 20px;
 
@@ -41,11 +41,11 @@ $horizontal-description-line-clamp: 2;
 	flex-shrink: 0;
 	width: $drag-handle-size;
 	height: $drag-handle-size;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	cursor: grab;
 }
 .root {
-	background: var(--color-background);
+	background: var(--background);
 	overflow-y: auto;
 
 	&.floating {
@@ -84,7 +84,7 @@ $horizontal-description-line-clamp: 2;
 
 	&[data-current] {
 		border-radius: $step-border-radius;
-		background: var(--color-background-action-secondary-hover);
+		background: var(--background-action-secondary-hover);
 	}
 
 	.indicatorContainer {
@@ -95,7 +95,7 @@ $horizontal-description-line-clamp: 2;
 		.indicator {
 			height: $indicator-size;
 			width: $indicator-size;
-			border: $indicator-border-width solid var(--color-border);
+			border: $indicator-border-width solid var(--border);
 			display: grid;
 			place-items: center;
 			border-radius: 100%;
@@ -107,14 +107,14 @@ $horizontal-description-line-clamp: 2;
 		}
 
 		&[data-complete] .indicator {
-			color: var(--color-background-selected);
-			border-color: var(--color-background-selected);
+			color: var(--background-primary);
+			border-color: var(--background-primary);
 		}
 
 		&[data-current] .indicator {
-			background: var(--color-background-selected);
-			color: var(--white);
-			border: $indicator-border-width-current solid var(--white);
+			background: var(--background-primary);
+			color: var(--color-dap-gray-050);
+			border: $indicator-border-width-current solid var(--color-dap-gray-050);
 		}
 
 		.separator {
@@ -124,15 +124,15 @@ $horizontal-description-line-clamp: 2;
 			top: $indicator-size;
 			left: 50%;
 			margin-left: calc($separator-width / -2);
-			background: var(--color-border);
+			background: var(--border);
 			z-index: 10;
 
 			&[data-complete] {
-				background: var(--color-background-selected);
+				background: var(--background-primary);
 			}
 
 			&[data-current] {
-				background: var(--color-background-selected);
+				background: var(--background-primary);
 			}
 		}
 	}
@@ -153,7 +153,7 @@ $horizontal-description-line-clamp: 2;
 		font-size: $label-font-size;
 		line-height: $label-line-height;
 		font-weight: $label-font-weight;
-		color: var(--color-font-secondary);
+		color: var(--font-secondary);
 
 		.root.variantSingle & {
 			font-size: $label-font-size-single;
@@ -164,26 +164,26 @@ $horizontal-description-line-clamp: 2;
 		margin: 0;
 		font-size: $description-font-size;
 		line-height: $description-line-height;
-		color: var(--color-background-deselected);
+		color: var(--background-deselected);
 	}
 
 	&[data-current] {
 		.stepLabel {
-			color: var(--color-font-action);
+			color: var(--font-action);
 		}
 
 		.stepDescription {
-			color: var(--color-font-main);
+			color: var(--font-main);
 		}
 	}
 
 	&[data-complete] {
 		.stepLabel {
-			color: var(--color-font-main);
+			color: var(--font-main);
 		}
 
 		.stepDescription {
-			color: var(--color-font-secondary);
+			color: var(--font-secondary);
 		}
 	}
 
@@ -200,20 +200,20 @@ $horizontal-description-line-clamp: 2;
 
 .step[data-error] {
 	.indicatorContainer .indicator {
-		background: var(--color-background-danger-weak);
-		color: var(--color-background-danger-strong);
-		border-color: var(--color-background-danger-strong);
+		background: var(--background-error-secondary-hover);
+		color: var(--background-error);
+		border-color: var(--background-error);
 	}
 
 	.stepLabel {
-		color: var(--color-font-danger);
+		color: var(--font-error);
 	}
 }
 
 .root[data-orientation='horizontal'] {
 	display: flex;
 	align-items: center;
-	padding: var(--spacing-xs) var(--spacing-standard);
+	padding: var(--xs) var(--standard);
 
 	.stepsContainer {
 		display: flex;
@@ -227,16 +227,16 @@ $horizontal-description-line-clamp: 2;
 		display: flex;
 		align-items: center;
 		flex-shrink: 0;
-		padding-inline-start: var(--spacing-xs);
+		padding-inline-start: var(--xs);
 	}
 
 	.step {
 		flex: 1 1 0;
 		align-self: stretch;
 		align-items: center;
-		padding: var(--spacing-3xs) var(--spacing-xs);
-		gap: var(--spacing-sm);
-		border-radius: var(--spacing-2xs);
+		padding: var(--3xs) var(--xs);
+		gap: var(--sm);
+		border-radius: var(--2xs);
 		overflow: clip;
 		min-width: $horizontal-other-min-width;
 
@@ -244,7 +244,7 @@ $horizontal-description-line-clamp: 2;
 			flex-grow: 2;
 			max-width: none;
 			min-width: $horizontal-current-min-width;
-			border-radius: var(--spacing-2xs);
+			border-radius: var(--2xs);
 
 			.stepLabel {
 				flex-shrink: 0;
@@ -268,15 +268,15 @@ $horizontal-description-line-clamp: 2;
 	.stepLabelRow {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-sm);
+		gap: var(--sm);
 		height: $indicator-size;
 		min-width: 0;
 	}
 
 	.stepLabel {
 		padding: 0;
-		font-size: var(--font-size-sm);
-		line-height: var(--line-height-sm);
+		font-size: var(--body-font-size-sm);
+		line-height: var(--body-line-height-small);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -285,23 +285,23 @@ $horizontal-description-line-clamp: 2;
 
 	.horizontalSeparator {
 		flex: 1 1 0;
-		height: var(--spacing-4xs);
+		height: var(--4xs);
 		min-width: 0;
-		background: var(--color-border-contrast);
+		background: var(--border-contrast);
 
 		&[data-complete] {
-			background: var(--color-background-selected);
+			background: var(--background-primary);
 		}
 
 		&[data-current] {
-			background: var(--color-outline-moderate);
+			background: var(--outline-moderate);
 		}
 	}
 
 	.stepDescription {
-		font-size: var(--font-size-xs);
-		line-height: var(--line-height-xs);
-		max-height: var(--spacing-8);
+		font-size: var(--body-font-size-xs);
+		line-height: var(--body-line-height-xs);
+		max-height: var(--xl);
 		overflow: hidden;
 		display: -webkit-box;
 		-webkit-line-clamp: $horizontal-description-line-clamp;

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

@@ -16,7 +16,7 @@
 	width: 10px;
 	height: 10px;
 	border-radius: 50%;
-	border: 1px solid var(--white);
+	border: 1px solid var(--color-dap-gray-050);
 }
 
 .label {
@@ -24,64 +24,64 @@
 }
 
 .healthy {
-	background: var(--utility-ok);
-	color: var(--system-status-ok);
+	background: var(--color-dap-data-light-green);
+	color: var(--color-dap-data-green);
 
 	.dot {
-		background: var(--system-status-ok);
+		background: var(--color-dap-data-green);
 	}
 }
 
 .neutral {
-	background: var(--utility-info);
-	color: var(--system-status-info);
+	background: var(--color-dap-blue-200);
+	color: var(--color-dap-blue-600);
 
 	.dot {
-		background: var(--system-status-info);
+		background: var(--color-dap-blue-600);
 	}
 }
 
 .error {
-	background: var(--utility-error);
-	color: var(--system-status-error);
+	background: var(--color-dap-red-100);
+	color: var(--background-error);
 
 	.dot {
-		background: var(--system-status-error);
+		background: var(--background-error);
 	}
 }
 
 .in-progress {
-	background: var(--utility-in-progress);
-	color: var(--system-status-in-progress);
+	background: var(--schema-light-blue);
+	color: var(--color-dap-blue-800);
 
 	.dot {
-		background: var(--system-status-in-progress);
+		background: var(--color-dap-blue-800);
 	}
 }
 
 .pending {
-	background: var(--utility-pending);
-	color: var(--system-status-pending);
+	background: var(--background-pending);
+	color: var(--color-dap-data-deep-fuchsia);
 
 	.dot {
-		background: var(--system-status-pending);
+		background: var(--color-dap-data-deep-fuchsia);
 	}
 }
 
 .alert {
-	background: var(--utility-alert);
-	color: var(--system-status-alert);
+	background: var(--schema-light-amber);
+	color: var(--color-dap-orange-600);
 
 	.dot {
-		background: var(--system-status-alert);
+		background: var(--color-dap-orange-600);
 	}
 }
 
 .disabled {
-	background: var(--utility-disabled);
-	color: var(--neutral-2);
+	background: var(--color-dap-gray-200);
+	color: var(--color-dap-gray-600);
 
 	.dot {
-		background: var(--neutral-2);
+		background: var(--color-dap-gray-600);
 	}
 }

package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss

@@ -5,7 +5,7 @@
 	bottom: 20px;
 	left: 50%;
 	transform: translateX(-50%);
-	background-color: var(--white);
+	background-color: var(--color-dap-gray-050);
 	border-radius: 8px;
 	box-shadow: 0 4px 12px #0445cc66;
 	z-index: 1000;
@@ -34,19 +34,19 @@
 }
 
 .selectedCountContainer {
-	background-color: var(--action-cta1);
+	background-color: var(--color-dap-blue-600);
 	display: flex;
 	align-items: center;
 	padding: 6px 22px;
 }
 
 .selectedCountBadge {
-	color: var(--white);
+	color: var(--color-dap-gray-050);
 	margin: 0;
 }
 
 .bulkActionsInfo {
-	color: var(--neutral-2);
+	color: var(--color-dap-gray-600);
 	text-wrap: nowrap;
 	padding-left: 8px;
 	padding-right: 56px;
@@ -62,15 +62,15 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: var(--spacing-3xs);
-		border-right: 1px solid var(--neutral-6);
+		gap: var(--3xs);
+		border-right: 1px solid var(--color-dap-gray-400);
 		width: 68px;
 		height: 48px;
 		border-radius: 0;
 	}
 
 	> .actionButton:first-child {
-		border-left: 1px solid var(--neutral-6);
+		border-left: 1px solid var(--color-dap-gray-400);
 	}
 }
 
@@ -79,13 +79,13 @@
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	color: var(--neutral-2);
+	color: var(--color-dap-gray-600);
 	gap: 2px !important;
 	width: 36px;
 	padding-left: 4px;
 
 	&:hover {
-		color: var(--neutral-4);
+		color: var(--color-dap-gray-500);
 	}
 }
 

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.module.scss

@@ -35,7 +35,7 @@
 	cursor: pointer;
 	outline: none;
 	transition: background 0.15s;
-	color: var(--color-icon-secondary);
+	color: var(--icon-action-secondary);
 
 	&.disabled {
 		opacity: 0.5;
@@ -45,11 +45,11 @@
 
 	&:hover,
 	&[data-state='open'] {
-		background: var(--color-background-action-hover-weak);
-		color: var(--color-font-action);
+		background: var(--background-action-hover-weak);
+		color: var(--font-action);
 	}
 }
 
 .secondaryActionsTrigger {
-	margin-inline-start: var(--spacing-sm);
+	margin-inline-start: var(--sm);
 }

package/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss

@@ -5,7 +5,7 @@
 	position: sticky;
 	top: 0;
 	z-index: 10;
-	background-color: var(--color-background);
+	background-color: var(--background);
 }
 
 .virtualizedHeader {
@@ -14,7 +14,7 @@
 
 .headerRow {
 	.headerCell {
-		border-bottom: 1px solid var(--neutral-6);
+		border-bottom: 1px solid var(--color-dap-gray-400);
 
 		&.selectColumn {
 			width: vars.$select-column-width;
@@ -38,16 +38,11 @@
 	width: vars.$reorder-column-width;
 }
 
-.expandColumn {
-	width: vars.$expand-column-width;
-	padding: 0;
-}
-
 .headerCell {
 	@include typography.body-sm-md;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	text-align: left;
-	padding: 0 var(--spacing-standard);
+	padding: 0 var(--standard);
 	height: var(--ds-table-header-height);
 
 	&.sortableHeader {
@@ -63,7 +58,7 @@
 		height: 24px;
 
 		&.pageButtonIcon {
-			color: var(--neutral-4);
+			color: var(--color-dap-gray-500);
 			transition: transform 0.2s ease-in-out;
 		}
 	}

package/src/components/ds-table/components/ds-table-header/ds-table-header.tsx

@@ -10,7 +10,7 @@ import { useDsTableContext } from '../../context/ds-table-context';
 import { getColumnSizeStyle } from '../../utils/column-size';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
-	const { stickyHeader, bordered, expandable, selectable, reorderable, showSelectAllCheckbox, virtualized } =
+	const { stickyHeader, bordered, selectable, reorderable, showSelectAllCheckbox, virtualized } =
 		useDsTableContext<TData, unknown>();
 
 	return (
@@ -38,33 +38,30 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 												? 'indeterminate'
 												: false
 									}
-									onClick={(e) => {
-										e.stopPropagation();
-										const toggleHandler = table.getToggleAllRowsSelectedHandler();
-										toggleHandler(e);
-									}}
+									onCheckedChange={(checked) => table.toggleAllRowsSelected(!!checked)}
+									onClick={(e) => e.stopPropagation()}
 								/>
 							)}
 						</TableHead>
 					)}
-					{expandable && <TableHead className={classnames(styles.headerCell, styles.expandColumn)} />}
 					{reorderable && (
 						<TableHead className={classnames(styles.headerCell, styles.reorderColumn)}>Order</TableHead>
 					)}
 					{headerGroup.headers.map((header) => {
 						const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+						const canSort = header.column.getCanSort();
 
 						return (
 							<TableHead
 								key={header.id}
-								className={classnames(styles.headerCell, header.column.getCanSort() && styles.sortableHeader)}
+								className={classnames(styles.headerCell, canSort && styles.sortableHeader)}
 								onClick={header.column.getToggleSortingHandler()}
 								style={headerStyle}
 							>
 								{header.isPlaceholder ? null : (
 									<div className={styles.headerSortContainer}>
 										<div>{flexRender(header.column.columnDef.header, header.getContext())}</div>
-										{header.column.getCanSort() && (
+										{canSort && (
 											<div className={styles.pageButtonIconContainer}>
 												{{
 													asc: (

package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss

@@ -7,20 +7,20 @@
 		.tableCell,
 		.selectableCell,
 		.expandableCell {
-			border-bottom: vars.$border-width solid var(--color-border-secondary);
+			border-bottom: vars.$border-width solid var(--border-secondary);
 		}
 	}
 
 	&:hover {
-		background-color: var(--color-background-secondary);
+		background-color: var(--background-secondary);
 	}
 
 	&[data-state='selected'] {
-		background-color: var(--color-background-selected-weak);
+		background-color: var(--background-secondary-hover);
 	}
 
 	&[data-state='active'] {
-		background-color: var(--color-background-selected-weak);
+		background-color: var(--background-secondary-hover);
 	}
 
 	&.clickableRow {
@@ -49,10 +49,10 @@
 }
 
 .expandedRow {
-	background-color: var(--color-background-secondary);
+	background-color: var(--background-secondary);
 
 	& > td {
-		padding: var(--spacing-standard);
+		padding: var(--standard);
 	}
 
 	@include table-mixins.expanded-row-border('bottom');
@@ -63,35 +63,26 @@
 	text-align: center;
 
 	&.isDragging {
-		background: var(--color-background-action);
+		background: var(--background-action);
 
 		.rowDragHandle {
-			color: var(--color-secondary-white);
+			color: var(--secondary-050);
 		}
 	}
 }
 
 .tableCell,
-.selectableCell,
-.expandableCell {
+.selectableCell {
 	@include typography.body-sm-reg;
 	vertical-align: middle;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .tableCell {
-	padding: 0 var(--spacing-standard);
+	padding: 0 var(--standard);
 }
 
-.expandToggleButton {
-	background: none;
-	border: none;
+.expandableCell {
 	padding: 0;
-	margin: 0;
-	cursor: pointer;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 1;
-	transition-property: opacity, background-color;
+	text-align: center;
 }