@drivenets/design-system 0.10.0 → 0.11.0

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

@@ -7,51 +7,51 @@ $transition-duration: 0.2s;
 @mixin node-row {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	border-radius: 4px;
 	cursor: pointer;
 	user-select: none;
 	width: 100%;
 	background: transparent;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 
 	--ds-tree-depth: calc(var(--depth) - 1);
 	--ds-tree-indent-offset: calc(#{$indent-per-level} * var(--ds-tree-depth));
 	--ds-tree-icon-offset: calc(#{$half-icon} * var(--ds-tree-depth));
-	--ds-tree-offset: calc(var(--spacing-3xs) + var(--ds-tree-indent-offset) + var(--ds-tree-icon-offset));
+	--ds-tree-offset: calc(var(--3xs) + var(--ds-tree-indent-offset) + var(--ds-tree-icon-offset));
 
 	padding-inline-start: var(--ds-tree-offset);
-	padding-inline-end: var(--spacing-3xs);
+	padding-inline-end: var(--3xs);
 
 	&:hover {
-		background: var(--color-background-action-hover-weak);
+		background: var(--background-action-hover-weak);
 	}
 
 	&[data-focus] {
 		position: relative;
 		outline: none;
-		background: var(--color-background-action-hover-weak);
+		background: var(--background-action-hover-weak);
 
 		&::after {
 			content: '';
 			position: absolute;
 			inset: 0;
 			z-index: 2;
-			border: 2px solid var(--color-border-action-primary-hover);
+			border: 2px solid var(--border-action-primary-hover);
 			border-radius: inherit;
 			pointer-events: none;
 		}
 	}
 
 	&[data-selected] {
-		background: var(--color-background-action-secondary-hover);
+		background: var(--background-action-secondary-hover);
 	}
 
 	&[data-disabled] {
 		cursor: not-allowed;
 		pointer-events: none;
 		.itemText {
-			color: var(--color-secondary-300);
+			color: var(--secondary-300);
 		}
 	}
 
@@ -65,7 +65,7 @@ $transition-duration: 0.2s;
 	flex: 1;
 	display: inline-flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	min-width: 0;
 
 	@include typography.ellipsis;
@@ -79,7 +79,7 @@ $transition-duration: 0.2s;
 	&[data-size='medium'] {
 		.branchControl,
 		.item {
-			padding-block: var(--spacing-xs);
+			padding-block: var(--xs);
 		}
 
 		.branchText,
@@ -91,7 +91,7 @@ $transition-duration: 0.2s;
 	&[data-size='small'] {
 		.branchControl,
 		.item {
-			padding-block: var(--spacing-2xs);
+			padding-block: var(--2xs);
 		}
 
 		.branchText,
@@ -121,7 +121,7 @@ $transition-duration: 0.2s;
 	flex-shrink: 0;
 	width: var(--icon-width-tiny);
 	height: var(--icon-width-tiny);
-	color: var(--color-font-main);
+	color: var(--font-main);
 	transform-origin: center;
 	transition: transform $transition-duration;
 
@@ -132,7 +132,7 @@ $transition-duration: 0.2s;
 
 .branchText {
 	@include node-text;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .branchContent {
@@ -153,11 +153,11 @@ $transition-duration: 0.2s;
 	z-index: 1;
 	width: 1px;
 	height: 100%;
-	background: var(--color-border-secondary);
+	background: var(--border-secondary);
 
 	--ds-tree-depth: calc(var(--depth) - 1);
 	--ds-tree-indent-offset: calc(#{$indent-per-level} * var(--ds-tree-depth));
-	--ds-tree-guide-offset: calc(var(--spacing-3xs) + var(--ds-tree-indent-offset));
+	--ds-tree-guide-offset: calc(var(--3xs) + var(--ds-tree-indent-offset));
 	--ds-tree-icon-offset: calc(#{$half-icon} * var(--depth));
 
 	inset-inline-start: calc(var(--ds-tree-guide-offset) + var(--ds-tree-icon-offset));
@@ -169,7 +169,7 @@ $transition-duration: 0.2s;
 
 .itemText {
 	@include node-text;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .itemIndicator {
@@ -185,7 +185,7 @@ $transition-duration: 0.2s;
 	width: 4px;
 	height: 4px;
 	border-radius: 50%;
-	background-color: var(--color-font-main);
+	background-color: var(--font-main);
 }
 
 .itemAction {
@@ -198,11 +198,11 @@ $transition-duration: 0.2s;
 	padding: 0;
 	opacity: 0;
 	cursor: pointer;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	transition: opacity $transition-duration;
 
 	&:hover {
-		color: var(--color-font-main);
+		color: var(--font-main);
 	}
 }
 
@@ -216,8 +216,8 @@ $transition-duration: 0.2s;
 	&[data-state='checked'],
 	&[data-state='indeterminate'] {
 		.nodeCheckboxBox {
-			background-color: var(--color-background-selected);
-			border-color: var(--color-background-selected);
+			background-color: var(--background-primary);
+			border-color: var(--background-primary);
 		}
 	}
 
@@ -225,13 +225,13 @@ $transition-duration: 0.2s;
 		cursor: not-allowed;
 
 		.nodeCheckboxBox {
-			border-color: var(--color-background-disable);
+			border-color: var(--background-disable);
 		}
 
 		&[data-state='checked'] .nodeCheckboxBox,
 		&[data-state='indeterminate'] .nodeCheckboxBox {
-			background-color: var(--color-background-disable);
-			border-color: var(--color-background-disable);
+			background-color: var(--background-disable);
+			border-color: var(--background-disable);
 		}
 	}
 }
@@ -243,9 +243,9 @@ $transition-duration: 0.2s;
 	align-items: center;
 	width: 16px;
 	height: 16px;
-	border: 1.5px solid var(--color-background-deselected);
+	border: 1.5px solid var(--background-deselected);
 	border-radius: 2px;
-	color: var(--color-secondary-white);
+	color: var(--secondary-050);
 	transition:
 		background-color $transition-duration,
 		border-color $transition-duration;

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

@@ -19,41 +19,41 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 0 var(--spacing-lg);
-	min-height: var(--spacing-3xl);
-	height: var(--spacing-3xl);
+	padding: 0 var(--lg);
+	min-height: var(--3xl);
+	height: var(--3xl);
 	flex-shrink: 0;
 	border: none;
-	border-bottom: 1px solid var(--color-border);
-	background: var(--color-background-secondary);
+	border-bottom: 1px solid var(--border);
+	background: var(--background-secondary);
 	cursor: pointer;
 	text-align: left;
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	transition:
 		background-color 0.2s,
 		color 0.2s;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 
 	&:hover:not(:disabled):not(.selected):not([data-disabled]) {
-		background: var(--color-background-action-tertiary);
-		color: var(--color-font-main);
+		background: var(--background-action-tertiary-hover);
+		color: var(--font-main);
 	}
 
 	&.selected,
 	&[data-state='active'] {
-		background: var(--color-background-action-secondary-hover);
-		color: var(--color-font-main);
+		background: var(--background-action-secondary-hover);
+		color: var(--font-main);
 	}
 
 	&:disabled,
 	&[data-disabled] {
 		cursor: not-allowed;
-		color: var(--color-font-secondary);
+		color: var(--font-secondary);
 		opacity: 0.5;
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--color-background-selected);
+		outline: 2px solid var(--background-primary);
 		outline-offset: -2px;
 		z-index: 1;
 	}

package/src/styles/_root.scss

@@ -369,22 +369,4 @@
 	--paragraph-spacing-md: 20;
 	--paragraph-spacing-sm: 16;
 	--paragraph-spacing-xs: 8;
-
-	/* Letter spacing */
-	--letter-spacing--1percent: -0.01em; // -1% letter spacing for headings
-}
-
-:root {
-	--icon-width-extra-large: 32px;
-	--icon-width-large: 28px;
-	--icon-width-medium: 24px;
-	--icon-width-small: 20px;
-	--icon-width-tiny: 16px;
-}
-
-:root {
-	--ds-table-row-small: 36px;
-	--ds-table-row-medium: 48px;
-	--ds-table-row-large: 64px;
-	--ds-table-header-height: 45px;
 }

package/src/styles/_root_new.scss

@@ -322,7 +322,7 @@
 	--icon-inverse: var(--color-dap-gray-050);
 	--icon-main: var(--color-dap-gray-800);
 	--icon-on-dark-disabled: var(--color-dap-gray-500);
-	--icon-pause: var(--color-dap-purple-600);
+	--icon-paused: var(--color-dap-purple-600);
 	--icon-pending: #212b86;
 	--icon-secondary: var(--color-dap-gray-600);
 	--icon-success: var(--color-dap-green-700);

package/src/styles/_scrollbars.scss

@@ -6,20 +6,20 @@ $scrollbar-thin-size: 4px;
 	&::-webkit-scrollbar {
 		width: $size;
 		height: $size;
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 	}
 
 	&::-webkit-scrollbar-track {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--color-background-deselected-hover);
+		background: var(--background-deselected-hover);
 		border-radius: $scrollbar-border-radius;
 	}
 
 	&::-webkit-scrollbar-corner {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 	}
 }
 
@@ -31,7 +31,7 @@ $scrollbar-thin-size: 4px;
 			scrollbar-width: auto;
 		}
 
-		scrollbar-color: var(--color-background-deselected-hover) var(--color-background-secondary);
+		scrollbar-color: var(--background-deselected-hover) var(--background-secondary);
 	}
 }
 

package/src/styles/_typography.scss

@@ -1,6 +1,10 @@
 // typography is defined in: https://www.figma.com/design/XJwVCvDPhD0dMTP4vr3xY3/%F0%9F%A6%95-%F0%9F%AA%86Style-%26-Design-System?node-id=4804-91960&node-type=frame&t=6LW93tAe2no6Rhgx-0
 @use 'variables' as var;
 
+:root {
+	--letter-spacing--1percent: -0.01em;
+}
+
 @mixin base-font {
 	font-family: var.$font-family-base;
 	font-weight: var.$font-weight-regular;
@@ -158,7 +162,7 @@
 	text-align: left;
 }
 
-@mixin heading($font-weight: var(--font-size-3xl), $line-height: var(--line-height-3xl)) {
+@mixin heading($font-weight: var(--heading-font-size-3xl), $line-height: var(--heading-line-height-3xl)) {
 	@include font-base;
 	font-size: $font-weight;
 	font-weight: var(--font-weight-semi-bold);
@@ -171,22 +175,22 @@
 }
 
 @mixin heading2 {
-	@include heading(var(--font-size-2xl), var(--line-height-2xl));
+	@include heading(var(--heading-font-size-2xl), var(--heading-line-height-2xl));
 }
 
 @mixin heading3 {
-	@include heading(var(--font-size-xl), var(--line-height-xl));
+	@include heading(var(--heading-font-size-xl), var(--heading-line-height-xl));
 }
 
 @mixin heading4 {
-	@include heading(var(--font-size-large), var(--line-height-large));
+	@include heading(var(--heading-font-size-large), var(--heading-line-height-large));
 }
 
 @mixin body-md($font-weight: var(--font-weight-regular)) {
 	@include font-base;
-	font-size: var(--font-size-md);
+	font-size: var(--body-font-size-md);
 	font-weight: $font-weight;
-	line-height: var(--line-height-md);
+	line-height: var(--body-line-height-md);
 	letter-spacing: var(--letter-spacing--1percent);
 }
 
@@ -213,9 +217,9 @@
 
 @mixin body-sm($font-weight: var(--font-weight-regular)) {
 	@include font-base;
-	font-size: var(--font-size-sm);
+	font-size: var(--body-font-size-sm);
 	font-weight: $font-weight;
-	line-height: var(--line-height-sm);
+	line-height: var(--body-line-height-small);
 	letter-spacing: var(--letter-spacing--1percent);
 }
 
@@ -242,9 +246,9 @@
 
 @mixin body-xs($font-weight: var(--font-weight-regular)) {
 	@include font-base;
-	font-size: var(--font-size-xs);
+	font-size: var(--body-font-size-xs);
 	font-weight: $font-weight;
-	line-height: var(--line-height-xs);
+	line-height: var(--body-line-height-xs);
 }
 
 @mixin body-xs-reg {
@@ -270,9 +274,9 @@
 
 @mixin code-sm($font-weight: var(--font-weight-regular)) {
 	@include code-base;
-	font-size: var(--font-size-sm);
+	font-size: var(--body-font-size-sm);
 	font-weight: $font-weight;
-	line-height: var(--line-height-sm);
+	line-height: var(--body-line-height-small);
 	letter-spacing: var(--letter-spacing--1percent);
 }
 
@@ -286,9 +290,9 @@
 
 @mixin code-xs($font-weight: var(--font-weight-regular)) {
 	@include code-base;
-	font-size: var(--font-size-xs);
+	font-size: var(--body-font-size-xs);
 	font-weight: $font-weight;
-	line-height: var(--line-height-xs);
+	line-height: var(--body-line-height-xs);
 	letter-spacing: var(--letter-spacing--1percent);
 }
 

package/src/styles/mixins/_list.scss

@@ -3,7 +3,7 @@
 @mixin list-item {
 	cursor: pointer;
 	user-select: none;
-	color: var(--neutral-2);
+	color: var(--color-dap-gray-600);
 	padding: 0 20px;
 }
 
@@ -17,7 +17,7 @@
 }
 
 @mixin list-item-wrapper-hover {
-	background: var(--action-hover-light);
+	background: var(--background-active-status);
 	border-radius: 4px;
 }
 
@@ -37,8 +37,8 @@
 }
 
 @mixin list-item-selected {
-	color: var(--action-cta1);
-	background: var(--action-active-light);
+	color: var(--color-dap-blue-600);
+	background: var(--color-dap-purple-200);
 	border-radius: 4px;
 }
 
@@ -47,7 +47,7 @@
 	right: 0;
 	width: 3px;
 	height: 24px;
-	background: var(--action-cta1);
+	background: var(--color-dap-blue-600);
 }
 
 @mixin list-scroll {
@@ -60,15 +60,15 @@
 	}
 
 	&::-webkit-scrollbar-track {
-		background: var(--neutral-8);
+		background: var(--color-dap-gray-200);
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--neutral-6);
+		background: var(--color-dap-gray-400);
 		border-radius: 3px;
 	}
 
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(--neutral-4);
+		background: var(--color-dap-gray-500);
 	}
 }

package/src/styles/shared/_dropdown.scss

@@ -10,8 +10,8 @@ $dropdown-z-index: 9999;
 	@include bounding-box.bounding-box-vars;
 
 	border-radius: 4px;
-	border: 1px solid var(--color-border-secondary);
-	background: var(--color-background);
+	border: 1px solid var(--border-secondary);
+	background: var(--background);
 	box-shadow: 0 var(--_shadow-y-offset) var(--_shadow-size) 0 rgba(0, 0, 0, 0.15);
 	z-index: $dropdown-z-index;
 	width: var(--reference-width);
@@ -62,26 +62,26 @@ $dropdown-z-index: 9999;
 	display: flex;
 	align-items: center;
 	gap: 10px;
-	color: var(--color-font-main);
-	font-size: var(--font-size-sm);
-	padding: var(--spacing-xs);
+	color: var(--font-main);
+	font-size: var(--body-font-size-sm);
+	padding: var(--xs);
 	border-radius: 2px;
 	border-left: 2px solid transparent;
 	cursor: pointer;
 	outline: none;
 
 	&[data-highlighted] {
-		background: var(--color-background-selected-weak);
+		background: var(--background-secondary-hover);
 
 		.indicator,
 		.itemIcon {
-			color: var(--color-background-selected);
+			color: var(--background-primary);
 		}
 	}
 
 	&[data-disabled] {
-		color: var(--color-background-deselected);
-		background: var(--color-background-secondary-selected-weak);
+		color: var(--background-deselected);
+		background: var(--background-secondary-selected-weak);
 		cursor: not-allowed;
 
 		.indicator,