@drivenets/design-system 0.9.1 → 0.11.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-split-button/ds-split-button.module.scss

@@ -49,11 +49,11 @@ $border-width: 1px;
 	}
 
 	&:not(:disabled):is(:hover, :active, [data-selected='true']) {
-		border-right-color: var(--border-border-secondary-hover);
+		border-right-color: var(--border-secondary-hover);
 	}
 
 	&:not(:disabled):focus-visible {
-		border-right-color: var(--border-border-inverse);
+		border-right-color: var(--border-inverse);
 	}
 }
 
@@ -74,8 +74,8 @@ $border-width: 1px;
 	left: -$divider-width;
 	z-index: $divider-z-index;
 	width: $divider-width;
-	padding: var(--spacing-3xs) 0;
-	background-color: var(--background-background);
+	padding: var(--3xs) 0;
+	background-color: var(--background);
 
 	@include when-button-highlighted {
 		display: none;
@@ -86,14 +86,14 @@ $border-width: 1px;
 }
 
 .divider {
-	background-color: var(--color-border-secondary);
+	background-color: var(--border-secondary);
 	width: $divider-width;
 	height: 100%;
 
 	@include when-button-disabled {
-		background-color: var(--border-border-disabled);
+		background-color: var(--border-disabled);
 	}
 	@include when-select-disabled {
-		background-color: var(--border-border-disabled);
+		background-color: var(--border-disabled);
 	}
 }

package/src/components/ds-split-button/ds-split-button.types.ts

@@ -11,15 +11,43 @@ type ButtonSlotProps = Omit<DsButtonV3Props, 'variant' | 'color' | 'size'>;
 type SelectSlotProps = DistributiveOmit<DsSelectProps, 'size'>;
 
 export interface DsSplitButtonSlotProps {
+	/**
+	 * Props forwarded to the primary action button (`DsButtonV3`). `variant`, `color`
+	 * and `size` are controlled by the split button and cannot be overridden here.
+	 */
 	button: ButtonSlotProps;
+	/**
+	 * Props forwarded to the dropdown select (`DsSelect`). `size` is controlled by
+	 * the split button and cannot be overridden here.
+	 */
 	select: SelectSlotProps;
 }
 
 export interface DsSplitButtonProps {
+	/**
+	 * Ref forwarded to the split-button wrapper element
+	 */
 	ref?: Ref<HTMLDivElement>;
+	/**
+	 * Additional CSS class name applied to the wrapper element
+	 */
 	className?: string;
+	/**
+	 * Inline styles applied to the wrapper element
+	 */
 	style?: CSSProperties;
+	/**
+	 * Visual size applied to both the button and select slots.
+	 * @default medium
+	 */
 	size?: SplitButtonSize;
+	/**
+	 * Whether both the button and the select are disabled.
+	 * @default false
+	 */
 	disabled?: boolean;
+	/**
+	 * Props forwarded to the internal button and select slots.
+	 */
 	slotProps: DsSplitButtonSlotProps;
 }

package/src/components/ds-stack/ds-stack.types.ts

@@ -4,12 +4,35 @@ type CSSProps = Properties<string | number>;
 import type { CSSProperties, ReactNode, Ref } from 'react';
 
 export interface DsStackProps {
+	/**
+	 * Flex direction of the stack (maps to CSS `flex-direction`).
+	 * @default row
+	 */
 	direction?: CSSProps['flexDirection'];
+	/**
+	 * Space between children (maps to CSS `gap`). Accepts any valid CSS gap value,
+	 * e.g. `8`, `'1rem'`, `'var(--ds-space-2)'`.
+	 */
 	gap?: CSSProps['gap'];
+	/**
+	 * Cross-axis alignment of children (maps to CSS `align-items`).
+	 */
 	alignItems?: CSSProps['alignItems'];
+	/**
+	 * Main-axis alignment of children (maps to CSS `justify-content`).
+	 */
 	justifyContent?: CSSProps['justifyContent'];
+	/**
+	 * Flex shorthand applied to the stack itself (maps to CSS `flex`).
+	 */
 	flex?: CSSProps['flex'];
+	/**
+	 * Whether and how children wrap onto multiple lines (maps to CSS `flex-wrap`).
+	 */
 	flexWrap?: CSSProps['flexWrap'];
+	/**
+	 * Width of the stack container (maps to CSS `width`).
+	 */
 	width?: CSSProps['width'];
 
 	children?: ReactNode;

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 {

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-stepper/ds-stepper.types.ts

@@ -7,16 +7,49 @@ export type DsStepperOrientation = 'horizontal' | 'vertical';
 
 export type DsStepperProps = PropsWithChildren<
 	{
+		/**
+		 * Visual variant of the stepper. Currently only `single` is supported.
+		 * @default single
+		 */
 		variant?: DsStepperVariant;
+		/**
+		 * Layout orientation of the stepper.
+		 * @default horizontal
+		 */
 		orientation?: DsStepperOrientation;
+		/**
+		 * When `true`, renders the stepper as a floating overlay (typically pinned
+		 * to the bottom of the viewport) instead of inline in the layout.
+		 * @default false
+		 */
 		floating?: boolean;
+		/**
+		 * Called when the final step completes (i.e., the user finishes the last step).
+		 */
 		onComplete?: steps.Props['onStepComplete'];
+		/**
+		 * Zero-based index of the currently active step (controlled). Pair with
+		 * `onStepChange`.
+		 */
 		activeStep?: steps.Props['step'];
+		/**
+		 * Additional CSS class name applied to the stepper root.
+		 */
 		className?: string;
 		/**
 		 * Optional actions rendered at the end of the stepper.
 		 * Horizontal: displayed after the steps. Vertical: displayed at the bottom.
 		 */
 		actions?: ReactNode;
-	} & Pick<steps.Props, 'onStepChange' | 'count'>
+	} & Pick<steps.Props, 'onStepChange' | 'count'> & {
+			/**
+			 * Called when the active step changes. Receives the zag-js step-change
+			 * details including the new index.
+			 */
+			onStepChange?: steps.Props['onStepChange'];
+			/**
+			 * Total number of steps in the stepper.
+			 */
+			count?: steps.Props['count'];
+		}
 >;