@drivenets/design-system 0.10.0 → 0.11.0

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

@@ -10,8 +10,8 @@ $transition-duration: 0.2s;
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	background: var(--color-background);
-	border: 1px solid var(--color-border-contrast);
+	background: var(--background);
+	border: 1px solid var(--border-contrast);
 	overflow: hidden;
 	box-sizing: border-box;
 	border-radius: $border-radius;
@@ -25,7 +25,7 @@ $transition-duration: 0.2s;
 	.header,
 	.body,
 	.footer {
-		padding: var(--spacing-xs) var(--spacing-sm);
+		padding: var(--xs) var(--sm);
 	}
 }
 
@@ -35,7 +35,7 @@ $transition-duration: 0.2s;
 	.header,
 	.body,
 	.footer {
-		padding: var(--spacing-xs) var(--spacing-standard);
+		padding: var(--xs) var(--standard);
 	}
 }
 
@@ -45,7 +45,7 @@ $transition-duration: 0.2s;
 	.header,
 	.body,
 	.footer {
-		padding: var(--spacing-xs) var(--spacing-xl);
+		padding: var(--xs) var(--xl);
 	}
 }
 
@@ -61,13 +61,13 @@ $transition-duration: 0.2s;
 	}
 
 	&:hover:not([data-disabled]):not([data-selected]) {
-		border-color: var(--color-border-action-secondary);
+		border-color: var(--border-action-secondary);
 	}
 
 	&:focus-visible:not([data-selected]),
 	&[data-focus-visible]:not([data-selected]) {
-		border-color: var(--color-border-action-secondary);
-		box-shadow: inset 0 0 0 1px var(--color-border-action-secondary);
+		border-color: var(--border-action-secondary);
+		box-shadow: inset 0 0 0 1px var(--border-action-secondary);
 		outline: none;
 	}
 
@@ -78,21 +78,21 @@ $transition-duration: 0.2s;
 
 	&[data-disabled] {
 		cursor: not-allowed;
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-disabled);
 	}
 }
 
 .root[data-selected] {
-	border-color: var(--color-border-action-primary);
+	border-color: var(--border-action-primary);
 
 	&:hover:not([data-disabled]),
 	&:focus-visible,
 	&[data-focus-visible] {
-		box-shadow: inset 0 0 0 1px var(--color-border-action-primary);
+		box-shadow: inset 0 0 0 1px var(--border-action-primary);
 	}
 
 	&[data-highlight] {
-		background: var(--color-background-selected-weak);
+		background: var(--background-secondary-hover);
 	}
 }
 

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

@@ -3,12 +3,12 @@
 .chip {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
-	padding: 1px var(--spacing-3xs) 1px var(--spacing-xs);
-	background: var(--color-background);
-	border: 1px solid var(--color-border-contrast);
+	gap: var(--3xs);
+	padding: 1px var(--3xs) 1px var(--xs);
+	background: var(--background);
+	border: 1px solid var(--border-contrast);
 	border-radius: 100vmax;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	cursor: default;
 	overflow: hidden;
 	transition:
@@ -20,31 +20,31 @@
 		cursor: pointer;
 
 		&:hover {
-			background: var(--color-background-action-hover-weak);
-			border-color: var(--color-border-action-secondary-hover);
+			background: var(--background-action-hover-weak);
+			border-color: var(--border-action-secondary-hover);
 		}
 
 		&:focus-visible {
-			outline: 2px solid var(--color-background-selected);
+			outline: 2px solid var(--background-primary);
 			outline-offset: 2px;
 		}
 	}
 
 	&.small {
-		padding: 0 var(--spacing-4xs) 0 var(--spacing-3xs);
-		gap: var(--spacing-4xs);
+		padding: 0 var(--4xs) 0 var(--3xs);
+		gap: var(--4xs);
 	}
 
 	&[aria-pressed='true'] {
-		background: var(--color-background-selected-weak);
-		border-color: var(--color-border-action-primary);
-		color: var(--color-font-action);
+		background: var(--background-secondary-hover);
+		border-color: var(--border-action-primary);
+		color: var(--font-action);
 	}
 }
 
 .label {
 	@include typography.ellipsis;
-	padding: var(--spacing-4xs) var(--spacing-3xs);
+	padding: var(--4xs) var(--3xs);
 	flex: 1;
 }
 
@@ -54,7 +54,7 @@
 	justify-content: center;
 	border: none;
 	background: transparent;
-	color: var(--color-icon-information-main);
+	color: var(--icon-information-main);
 	cursor: pointer;
 	transition:
 		background-color 0.2s,
@@ -62,10 +62,10 @@
 	flex-shrink: 0;
 
 	&:hover {
-		color: var(--color-icon-secondary);
+		color: var(--icon-action-secondary);
 	}
 
 	.chip.small & {
-		padding: 1px var(--spacing-4xs);
+		padding: 1px var(--4xs);
 	}
 }

package/src/components/ds-chip-group/ds-chip-group.module.scss

@@ -1,11 +1,11 @@
 .container {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-standard);
-	padding: var(--spacing-xs) var(--spacing-standard);
-	background: var(--color-background-selected-weak);
-	border: 1px solid var(--color-outline-weak);
-	border-radius: var(--spacing-3xs);
+	gap: var(--standard);
+	padding: var(--xs) var(--standard);
+	background: var(--background-secondary-hover);
+	border: 1px solid var(--outline-weak);
+	border-radius: var(--3xs);
 }
 
 .chipsWrapper {
@@ -13,8 +13,8 @@
 	flex: 1;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--spacing-xs);
-	max-height: var(--spacing-3xl);
+	gap: var(--xs);
+	max-height: var(--3xl);
 	overflow: hidden;
 
 	.hidden {
@@ -25,7 +25,7 @@
 }
 
 .label {
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 	white-space: nowrap;
 }
 
@@ -35,11 +35,11 @@
 
 .dialog {
 	position: fixed;
-	background: var(--color-background);
-	border: 1px solid var(--color-border-secondary);
-	border-radius: var(--spacing-3xs);
+	background: var(--background);
+	border: 1px solid var(--border-secondary);
+	border-radius: var(--3xs);
 	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
-	padding: var(--spacing-xs);
+	padding: var(--xs);
 	max-height: 80vh;
 	overflow-y: auto;
 	z-index: 1001;

package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.module.scss

@@ -22,11 +22,11 @@ $transition-duration: 0.2s;
 .followingComments {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-sm);
+	gap: var(--sm);
 	flex: 1;
 	overflow-y: auto;
 	min-height: 0;
-	padding: var(--spacing-sm) 0;
+	padding: var(--sm) 0;
 
 	&::-webkit-scrollbar {
 		width: $scrollbar-width;
@@ -37,7 +37,7 @@ $transition-duration: 0.2s;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 		border-radius: $scrollbar-border-radius-pill;
 		width: $scrollbar-thumb-width;
 	}

package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.module.scss

@@ -7,8 +7,8 @@ $transition-duration: 0.2s;
 
 .threadItem {
 	display: flex;
-	gap: var(--spacing-lg);
-	padding: var(--spacing-sm) var(--spacing-standard);
+	gap: var(--lg);
+	padding: var(--sm) var(--standard);
 	position: relative;
 
 	&:hover {
@@ -48,17 +48,17 @@ $transition-duration: 0.2s;
 	width: $avatar-size;
 	height: $avatar-size;
 	border-radius: $border-radius-circle;
-	background: var(--color-background-tertiary);
+	background: var(--background-tertiary);
 	font-size: $avatar-fallback-font-size;
 	font-weight: var(--font-weight-semi-bold);
-	color: var(--color-font-main);
+	color: var(--font-main);
 	text-transform: uppercase;
 }
 
 .content {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	flex: 1;
 	min-width: 0;
 }
@@ -66,29 +66,29 @@ $transition-duration: 0.2s;
 .header {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	height: $header-height;
 }
 
 .authorName {
-	font-size: var(--font-size-md);
+	font-size: var(--body-font-size-md);
 	font-weight: var(--font-weight-semi-bold);
-	line-height: var(--line-height-md);
-	color: var(--color-font-main);
+	line-height: var(--body-line-height-md);
+	color: var(--font-main);
 }
 
 .timestamp {
-	font-size: var(--font-size-md);
+	font-size: var(--body-font-size-md);
 	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-md);
-	color: var(--color-font-secondary);
+	line-height: var(--body-line-height-md);
+	color: var(--font-secondary);
 }
 
 .message {
-	font-size: var(--font-size-sm);
+	font-size: var(--body-font-size-sm);
 	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-sm);
-	color: var(--color-font-main);
+	line-height: var(--body-line-height-small);
+	color: var(--font-main);
 	word-wrap: break-word;
 	white-space: pre-wrap;
 }
@@ -96,7 +96,7 @@ $transition-duration: 0.2s;
 .actions {
 	display: flex;
 	align-items: flex-start;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	opacity: 0;
 	transition: opacity $transition-duration ease;
 }
@@ -112,9 +112,9 @@ $transition-duration: 0.2s;
 
 .editActions {
 	display: flex;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	justify-content: flex-end;
-	margin-top: var(--spacing-xs);
+	margin-top: var(--xs);
 }
 
 .dropdownContent {

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

@@ -19,8 +19,8 @@ $transition-duration: 0.2s;
 	display: flex;
 	flex-direction: column;
 	width: $bubble-width-thread;
-	background: var(--color-background);
-	border: $border-width solid var(--color-primary-700-default);
+	background: var(--background);
+	border: $border-width solid var(--primary-700-default);
 	border-radius: $bubble-border-radius-pill;
 	box-shadow: 0 6px 13px 0 rgba(4, 69, 204, 0.2);
 	overflow: hidden;
@@ -31,19 +31,19 @@ $transition-duration: 0.2s;
 		padding $transition-duration ease;
 
 	&.actionRequired {
-		border-color: var(--color-background-warning-strong);
+		border-color: var(--background-warning-strong);
 	}
 }
 
 .initial {
 	width: $bubble-width-initial;
 	border-width: $border-width;
-	padding: var(--spacing-sm) var(--spacing-standard);
+	padding: var(--sm) var(--standard);
 	border-radius: $bubble-border-radius-pill;
 
 	.inputArea {
 		padding: 0;
-		gap: var(--spacing-xs);
+		gap: var(--xs);
 		align-items: center;
 	}
 
@@ -57,12 +57,12 @@ $transition-duration: 0.2s;
 	.textarea {
 		padding: 0;
 		min-height: $input-min-height-initial;
-		line-height: var(--line-height-sm);
+		line-height: var(--body-line-height-small);
 		overflow: hidden;
 		resize: none;
 
 		&::placeholder {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 	}
 }
@@ -70,12 +70,12 @@ $transition-duration: 0.2s;
 .typing {
 	width: $bubble-width-typing;
 	border-width: $border-width;
-	padding: var(--spacing-sm) var(--spacing-standard) 0;
+	padding: var(--sm) var(--standard) 0;
 	border-radius: $bubble-border-radius-pill;
 
 	.inputArea {
-		padding: 0 0 var(--spacing-sm);
-		border-bottom: $border-width solid var(--color-border-secondary);
+		padding: 0 0 var(--sm);
+		border-bottom: $border-width solid var(--border-secondary);
 	}
 
 	.inputWrapper {
@@ -93,14 +93,14 @@ $transition-duration: 0.2s;
 	flex-direction: column;
 
 	.inputArea {
-		border-top: $border-width solid var(--color-border-secondary);
-		padding: var(--spacing-xs) var(--spacing-standard);
+		border-top: $border-width solid var(--border-secondary);
+		padding: var(--xs) var(--standard);
 		flex-shrink: 0;
 	}
 
 	.inputWrapper {
-		background: var(--color-background);
-		padding: var(--spacing-xs) var(--spacing-sm);
+		background: var(--background);
+		padding: var(--xs) var(--sm);
 		border-radius: $bubble-border-radius-standard;
 		min-height: $input-min-height-thread;
 	}
@@ -110,9 +110,9 @@ $transition-duration: 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--spacing-xs);
-	padding: var(--spacing-xs) var(--spacing-standard) var(--spacing-xs);
-	border-bottom: $border-width solid var(--color-border);
+	gap: var(--xs);
+	padding: var(--xs) var(--standard) var(--xs);
+	border-bottom: $border-width solid var(--border);
 	flex-shrink: 0;
 }
 
@@ -126,32 +126,32 @@ $transition-duration: 0.2s;
 .headerInfo {
 	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);
 }
 
 .actionRequiredBadge {
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
-	color: var(--color-font-warning);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
+	color: var(--font-warning);
 	font-weight: var(--font-weight-regular);
 }
 
 .headerRight {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .headerActions {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	opacity: 0;
 	transition: opacity $transition-duration ease;
 
@@ -163,24 +163,24 @@ $transition-duration: 0.2s;
 .inputArea {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .inputWrapper {
 	display: flex;
 	align-items: center;
 	flex: 1;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	min-height: $input-min-height-thread;
 }
 
 .searchIcon {
-	color: var(--color-font-main);
+	color: var(--font-main);
 	flex-shrink: 0;
 }
 
 .infoIcon {
-	color: var(--color-font-main);
+	color: var(--font-main);
 	flex-shrink: 0;
 }
 
@@ -191,15 +191,15 @@ $transition-duration: 0.2s;
 	padding: 0;
 	border: none;
 	background: transparent;
-	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);
 	font-family: inherit;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	resize: none;
 	overflow-y: auto;
 
 	&::placeholder {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 
 	&:focus {
@@ -215,7 +215,7 @@ $transition-duration: 0.2s;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 		border-radius: $scrollbar-border-radius-pill;
 	}
 }
@@ -224,7 +224,7 @@ $transition-duration: 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: var(--spacing-xs) 0;
+	padding: var(--xs) 0;
 
 	> :last-child {
 		margin-left: auto;
@@ -246,18 +246,18 @@ $transition-duration: 0.2s;
 .dropdownItem {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
-	padding: var(--spacing-xs) var(--spacing-sm);
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
-	color: var(--color-font-main);
+	gap: var(--xs);
+	padding: var(--xs) var(--sm);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
+	color: var(--font-main);
 	cursor: pointer;
 
 	&:hover {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 	}
 
 	&.danger {
-		color: var(--color-font-danger);
+		color: var(--font-error);
 	}
 }