@drivenets/design-system 0.10.0 → 0.11.0

package/src/components/ds-comment-card/ds-comment-card.module.scss

@@ -8,9 +8,9 @@ $transition-duration: 0.2s;
 .card {
 	display: flex;
 	width: 100%;
-	border: $border-width solid var(--color-border);
-	border-radius: var(--spacing-3xs);
-	background: var(--color-background);
+	border: $border-width solid var(--border);
+	border-radius: var(--3xs);
+	background: var(--background);
 	overflow: hidden;
 	cursor: pointer;
 	text-align: left;
@@ -20,8 +20,8 @@ $transition-duration: 0.2s;
 		box-shadow $transition-duration ease;
 
 	&:hover {
-		background: var(--color-background-action-hover-weak);
-		border-color: var(--color-border);
+		background: var(--background-action-hover-weak);
+		border-color: var(--border);
 		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 
 		.actions {
@@ -36,10 +36,10 @@ $transition-duration: 0.2s;
 .sideColor {
 	width: $side-color-width;
 	flex-shrink: 0;
-	background: var(--color-background-info-strong);
+	background: var(--background-info-strong);
 
 	&.actionRequired {
-		background: var(--color-background-warning-strong);
+		background: var(--background-warning-strong);
 	}
 }
 
@@ -53,57 +53,57 @@ $transition-duration: 0.2s;
 .header {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-xs) var(--spacing-standard);
-	padding-bottom: var(--spacing-3xs);
+	gap: var(--3xs);
+	padding: var(--xs) var(--standard);
+	padding-bottom: var(--3xs);
 }
 
 .headerTop {
 	display: flex;
 	align-items: flex-start;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 }
 
 .headerLeft {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
-	gap: var(--spacing-sm);
+	gap: var(--sm);
 	min-width: 0;
 }
 
 .commentInfo {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .commentId {
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
-	color: var(--color-font-secondary);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
+	color: var(--font-secondary);
 }
 
 .authorInfo {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
+	gap: var(--xs);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
 }
 
 .authorName {
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .timestamp {
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .actions {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	opacity: 0;
 	visibility: hidden;
 	transition:
@@ -118,12 +118,12 @@ $transition-duration: 0.2s;
 		}
 
 		&:hover {
-			background: var(--color-background-action-hover-weak) !important;
-			background-color: var(--color-background-action-hover-weak) !important;
+			background: var(--background-action-hover-weak) !important;
+			background-color: var(--background-action-hover-weak) !important;
 
 			> * {
-				background: var(--color-background-action-hover-weak) !important;
-				background-color: var(--color-background-action-hover-weak) !important;
+				background: var(--background-action-hover-weak) !important;
+				background-color: var(--background-action-hover-weak) !important;
 			}
 		}
 	}
@@ -132,14 +132,14 @@ $transition-duration: 0.2s;
 .body {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-xs) var(--spacing-standard);
+	gap: var(--3xs);
+	padding: var(--xs) var(--standard);
 }
 
 .message {
-	font-size: var(--font-size-xs);
-	line-height: var(--line-height-xs);
-	color: var(--color-font-main);
+	font-size: var(--body-font-size-xs);
+	line-height: var(--body-line-height-xs);
+	color: var(--font-main);
 	word-wrap: break-word;
 
 	&.truncated {
@@ -152,9 +152,9 @@ $transition-duration: 0.2s;
 }
 
 .replyCount {
-	font-size: var(--font-size-xs);
-	line-height: var(--line-height-xs);
-	color: var(--color-font-secondary);
+	font-size: var(--body-font-size-xs);
+	line-height: var(--body-line-height-xs);
+	color: var(--font-secondary);
 }
 
 .dropdownContent {

package/src/components/ds-comment-indicator/ds-comment-indicator.module.scss

@@ -14,9 +14,9 @@ $transition-duration: 0.2s;
 	width: $indicator-size;
 	height: $indicator-size;
 	padding: 0;
-	border: $border-width solid var(--color-border);
-	border-radius: var(--spacing-standard) var(--spacing-standard) var(--spacing-standard) 0;
-	background: var(--color-background);
+	border: $border-width solid var(--border);
+	border-radius: var(--standard) var(--standard) var(--standard) 0;
+	background: var(--background);
 	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
 	cursor: pointer;
 	transition:
@@ -29,8 +29,8 @@ $transition-duration: 0.2s;
 	}
 
 	&:not(.actionRequired):hover {
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-action-secondary-hover);
+		background: var(--background-secondary);
+		border-color: var(--border-action-secondary-hover);
 	}
 }
 
@@ -44,16 +44,16 @@ $transition-duration: 0.2s;
 		font-size: $plus-icon-font-size;
 		font-weight: var(--font-weight-semi-bold);
 		line-height: 0;
-		color: var(--color-font-main);
+		color: var(--font-main);
 	}
 }
 
 .actionRequired {
-	background: var(--color-background-warning-strong);
+	background: var(--background-warning-strong);
 
 	&:hover {
-		background: var(--color-background-danger-strong-hover);
-		border-color: var(--color-border-action-secondary-hover);
+		background: var(--background-error-hover);
+		border-color: var(--border-action-secondary-hover);
 	}
 }
 

package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.module.scss

@@ -6,13 +6,13 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	gap: var(--spacing-sm);
+	gap: var(--sm);
 }
 
 .headerLeft {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-sm);
+	gap: var(--sm);
 }
 
 .body {
@@ -30,17 +30,17 @@
 .tabList {
 	flex-shrink: 0;
 	width: 200px;
-	border-right: 1px solid var(--color-border-secondary);
+	border-right: 1px solid var(--border-secondary);
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-sm);
+	gap: var(--3xs);
+	padding: var(--sm);
 }
 
 .tabContent {
 	flex: 1;
 	overflow-y: auto;
-	padding: var(--spacing-standard);
+	padding: var(--standard);
 
 	&[hidden] {
 		display: none;
@@ -54,7 +54,7 @@
 .badge {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	margin-left: auto;
 }
 
@@ -68,13 +68,13 @@
 .filterSection {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-sm);
+	gap: var(--sm);
 }
 
 .dateField {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .dateLabel {
@@ -82,7 +82,7 @@
 }
 
 .emptyMessage {
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .footer {

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

@@ -6,13 +6,13 @@ $scrollbar-border-radius-pill: 9999px;
 .headerActions {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .divider {
 	width: $divider-width;
 	height: $divider-height;
-	background: var(--color-border-secondary);
+	background: var(--border-secondary);
 }
 
 .searchInput {
@@ -22,8 +22,8 @@ $scrollbar-border-radius-pill: 9999px;
 .body {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-standard);
-	padding: var(--spacing-standard);
+	gap: var(--standard);
+	padding: var(--standard);
 	overflow-y: auto;
 
 	&::-webkit-scrollbar {
@@ -35,7 +35,7 @@ $scrollbar-border-radius-pill: 9999px;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 		border-radius: $scrollbar-border-radius-pill;
 	}
 }
@@ -45,16 +45,16 @@ $scrollbar-border-radius-pill: 9999px;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: var(--spacing-xl);
+	padding: var(--xl);
 	text-align: center;
-	color: var(--color-font-secondary);
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
-	gap: var(--spacing-sm);
+	color: var(--font-secondary);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
+	gap: var(--sm);
 }
 
 .emptyIcon {
-	color: var(--color-icon-secondary);
+	color: var(--icon-action-secondary);
 }
 
 .filterTagsToolbar {

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

@@ -6,10 +6,10 @@
 	@include input.input-container-states;
 	max-height: input.$input-text-height-default;
 	justify-content: space-between;
-	padding: var(--spacing-xs) var(--spacing-sm);
-	gap: var(--spacing-3xs);
+	padding: var(--xs) var(--sm);
+	gap: var(--3xs);
 
-	border-color: var(--form-control-border-color, var(--color-border));
+	border-color: var(--form-control-border-color, var(--border));
 
 	&:hover:not(.disabled) {
 		border-color: var(--form-control-border-color, var(--color-border-hover));
@@ -20,23 +20,23 @@
 	}
 
 	&.disabled {
-		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		color: var(--background-deselected);
+		background: var(--background-secondary);
+		border-color: var(--border-disabled);
 		cursor: not-allowed;
 
 		.input {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 
 		.dateInputButton {
-			color: var(--color-background-disable);
+			color: var(--background-disable);
 			cursor: not-allowed;
 		}
 	}
 
 	&.readOnly {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 		cursor: default;
 	}
 }
@@ -57,11 +57,11 @@
 	transition: color 0.2s ease;
 
 	&:hover:not(:disabled) {
-		color: var(--color-background-action-hover);
+		color: var(--background-action-hover);
 	}
 
 	&:disabled {
-		color: var(--color-background-disable);
+		color: var(--background-disable);
 		cursor: not-allowed;
 	}
 }
@@ -72,7 +72,7 @@
 
 .content {
 	@include dropdown.dropdown-content;
-	padding: var(--spacing-standard);
+	padding: var(--standard);
 	min-width: fit-content;
 }
 
@@ -80,7 +80,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: var(--spacing-xs);
+	margin-bottom: var(--xs);
 }
 
 .viewTrigger {
@@ -91,9 +91,9 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	padding: var(--spacing-2xs) var(--spacing-xs);
-	border-radius: var(--spacing-2xs);
-	color: var(--color-font-main);
+	padding: var(--2xs) var(--xs);
+	border-radius: var(--2xs);
+	color: var(--font-main);
 	transition: background-color 0.2s;
 
 	&:hover {
@@ -109,14 +109,14 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	padding: var(--spacing-2xs);
-	border-radius: var(--spacing-2xs);
-	color: var(--color-font-secondary);
+	padding: var(--2xs);
+	border-radius: var(--2xs);
+	color: var(--font-secondary);
 	transition: all 0.2s;
 
 	&:hover {
 		background: var(--color-background-hover);
-		color: var(--color-font-main);
+		color: var(--font-main);
 	}
 
 	&:disabled {
@@ -128,7 +128,7 @@
 .calendarView {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .table {
@@ -137,28 +137,28 @@
 
 	.tableBody .tableRow .tableCellTrigger:focus-visible {
 		.tableCellTriggerValue {
-			outline: 2px solid var(--color-background-action-hover);
-			border-radius: var(--spacing-2xs);
+			outline: 2px solid var(--background-action-hover);
+			border-radius: var(--2xs);
 			border-width: 0;
 		}
 	}
 }
 
 .tableHead {
-	border-bottom: 1px solid var(--color-border);
+	border-bottom: 1px solid var(--border);
 }
 
 .tableHeader {
 	text-align: center;
-	padding: var(--spacing-2xs);
-	color: var(--color-font-secondary);
+	padding: var(--2xs);
+	color: var(--font-secondary);
 	font-weight: var(--font-weight-medium);
 }
 
 .tableRow {
 	&:first-child {
 		.tableCellTrigger {
-			margin-top: var(--spacing-xs);
+			margin-top: var(--xs);
 		}
 	}
 }
@@ -176,38 +176,38 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--spacing-xl);
-		height: var(--spacing-xl);
-		margin: var(--spacing-3xs);
-		color: var(--color-font-main);
-		border-radius: var(--spacing-xs);
+		width: var(--xl);
+		height: var(--xl);
+		margin: var(--3xs);
+		color: var(--font-main);
+		border-radius: var(--xs);
 	}
 
 	&:hover:not([data-disabled], [data-selected], [data-in-range], [data-in-hover-range])
 		.tableCellTriggerValue {
-		outline: 1px solid var(--color-border);
-		background: var(--color-background-action-hover-weak);
+		outline: 1px solid var(--border);
+		background: var(--background-action-hover-weak);
 	}
 
 	&[data-outside-range] .tableCellTriggerValue {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 
 	&[data-selected] .tableCellTriggerValue {
-		background: var(--color-background-selected);
-		color: var(--color-font-on-action);
+		background: var(--background-primary);
+		color: var(--font-on-action);
 	}
 
 	&[data-in-range]:not([data-selected]) {
 		position: relative;
 
 		.tableCellTriggerValue {
-			background: var(--color-background-action-secondary-hover);
+			background: var(--background-action-secondary-hover);
 		}
 	}
 
 	&[data-today]:not([data-selected], [data-in-range]):hover .tableCellTriggerValue {
-		border-radius: var(--spacing-xs);
+		border-radius: var(--xs);
 	}
 
 	&[data-today]:not([data-selected]) .tableCellTriggerValue {
@@ -218,7 +218,7 @@
 			position: absolute;
 			width: 75%;
 			bottom: 4px;
-			border-bottom: 1px solid var(--color-background-brand);
+			border-bottom: 1px solid var(--background-brand);
 		}
 	}
 
@@ -230,12 +230,12 @@
 			position: absolute;
 			width: 75%;
 			bottom: 4px;
-			border-bottom: 1px solid var(--color-background);
+			border-bottom: 1px solid var(--background);
 		}
 	}
 
 	&[data-disabled] .tableCellTriggerValue {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 		cursor: not-allowed;
 		opacity: 0.5;
 	}

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

@@ -4,8 +4,8 @@
 
 	.tableBody .tableRow .tableCellTrigger:focus-visible {
 		.tableCellTrigger {
-			outline: 2px solid var(--color-background-action-hover);
-			border-radius: var(--spacing-2xs);
+			outline: 2px solid var(--background-action-hover);
+			border-radius: var(--2xs);
 			border-width: 0;
 		}
 	}
@@ -13,15 +13,15 @@
 
 .tableHeader {
 	text-align: center;
-	padding: var(--spacing-2xs);
-	color: var(--color-font-secondary);
+	padding: var(--2xs);
+	color: var(--font-secondary);
 	font-weight: var(--font-weight-medium);
 }
 
 .tableRow {
 	&:first-child {
 		.tableCellTrigger {
-			margin-top: var(--spacing-xs);
+			margin-top: var(--xs);
 		}
 	}
 }
@@ -34,26 +34,26 @@
 	user-select: none;
 	-webkit-tap-highlight-color: transparent;
 	outline: none;
-	border-radius: var(--spacing-xs);
-	color: var(--color-font-main);
-	margin: var(--spacing-3xs);
+	border-radius: var(--xs);
+	color: var(--font-main);
+	margin: var(--3xs);
 
 	&:hover:not([data-disabled], [data-selected]) {
-		outline: 1px solid var(--color-border);
-		background: var(--color-background-action-hover-weak);
+		outline: 1px solid var(--border);
+		background: var(--background-action-hover-weak);
 	}
 
 	&[data-outside-range] {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 
 	&[data-selected] {
-		background: var(--color-background-selected);
-		color: var(--color-font-on-action);
+		background: var(--background-primary);
+		color: var(--font-on-action);
 	}
 
 	&[data-today]:not([data-selected]):hover {
-		border-radius: var(--spacing-xs);
+		border-radius: var(--xs);
 	}
 
 	&[data-today]:not([data-selected]) {
@@ -64,7 +64,7 @@
 			position: absolute;
 			width: 75%;
 			bottom: 4px;
-			border-bottom: 1px solid var(--color-background-brand);
+			border-bottom: 1px solid var(--background-brand);
 		}
 	}
 
@@ -76,12 +76,12 @@
 			position: absolute;
 			width: 75%;
 			bottom: 4px;
-			border-bottom: 1px solid var(--color-background);
+			border-bottom: 1px solid var(--background);
 		}
 	}
 
 	&[data-disabled] {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 		cursor: not-allowed;
 		opacity: 0.5;
 	}

package/src/components/ds-date-picker/components/calendar-view-control/calendar-view-control.module.scss

@@ -2,7 +2,7 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: var(--spacing-sm);
+	margin-bottom: var(--sm);
 }
 
 .viewTrigger {
@@ -13,9 +13,9 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	padding: var(--spacing-2xs) var(--spacing-xs);
-	border-radius: var(--spacing-2xs);
-	color: var(--color-font-main);
+	padding: var(--2xs) var(--xs);
+	border-radius: var(--2xs);
+	color: var(--font-main);
 	transition: background-color 0.2s;
 
 	&:hover {
@@ -31,14 +31,14 @@
 	background: transparent;
 	border: none;
 	cursor: pointer;
-	padding: var(--spacing-2xs);
-	border-radius: var(--spacing-2xs);
-	color: var(--color-font-secondary);
+	padding: var(--2xs);
+	border-radius: var(--2xs);
+	color: var(--font-secondary);
 	transition: all 0.2s;
 
 	&:hover {
 		background: var(--color-background-hover);
-		color: var(--color-font-main);
+		color: var(--font-main);
 	}
 
 	&:disabled {

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

@@ -3,7 +3,7 @@ $trigger-size: 32px;
 .dayView {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .trigger {