feat(design-system): migrate DS codebase to new tokens (Step 3) [AR-60245] (#449)

# Phase 3 — Removed tokens (apply)

> Replacements were chosen manually in `step-3-removed-prep.md`. Visual
testing required for affected components.

## Summary

- Files scanned: 780
- Files changed: 1
- Total replacements: 1
- Tokens replaced: 12
- Tokens kept (KEEP): 10

## Replacement decisions

| Old token | Replacement |
| --------- | ----------- |
| `--color-gradient-violet-background` | `linear-gradient(90deg, #001b48
-0.12%, #312e81 99.86%)` |
| `--color-gradient-violet-transparent` | `linear-gradient( 180deg,
rgba(30, 89, 215, 0.4) 0%, rgba(0, 27, 72, 0.16) 100% )` |
| `--color-gradient-blue-light` | `linear-gradient(116deg, #e9eefc
22.81%, #d6e2ff 99.14%)` |
| `--color-gradient-linear-1` | `linear-gradient(90deg, #014afb 0%,
#152a7e 100%)` |
| `--color-marker-magenta-12` | `rgba(255, 0, 183, 0.12)` |
| `--color-marker-magenta-60` | `rgba(255, 0, 183, 0.6)` |
| `--color-marker-magenta-100` | `rgba(255, 0, 183)` |
| `--gradient-violet-background` | `linear-gradient(90deg, #001b48
-0.12%, #312e81 99.86%)` |
| `--gradient-violet-transparent` | `linear-gradient(180deg, rgba(30,
89, 215, 0.4) 0%, rgba(0, 27, 72, 0.16) 100%)` |
| `--gradient-blue-light` | `linear-gradient(116deg, #e9eefc 22.81%,
#d6e2ff 99.14%)` |
| `--spacing-10` | `40px` |
| `--exo-spacing-4x-small` | `1px` |

### Kept (KEEP)

- `--letter-spacing--1percent` — old definition stays in place.
- `--icon-width-extra-large` — old definition stays in place.
- `--icon-width-large` — old definition stays in place.
- `--icon-width-medium` — old definition stays in place.
- `--icon-width-small` — old definition stays in place.
- `--icon-width-tiny` — old definition stays in place.
- `--ds-table-row-small` — old definition stays in place.
- `--ds-table-row-medium` — old definition stays in place.
- `--ds-table-row-large` — old definition stays in place.
- `--ds-table-header-height` — old definition stays in place.

## Replacements per token

| Old token | Replacements |
| --------- | ------------ |
| `--exo-spacing-4x-small` | 1 |

## Affected files (grouped by component)

### `ds-file-upload` (1 replacements)

-
`packages/design-system/src/components/ds-file-upload/components/file-upload/file-upload.module.scss`
— `--exo-spacing-4x-small`×1

## Visual retest checklist

- [x] **ds-file-upload** — Visual check: tokens involved —
`--exo-spacing-4x-small` (replaced: `--exo-spacing-4x-small`)

# Phase 2 — Changed tokens

> Renamed AND value differs. Visual testing required for affected
components.

## Summary

- Files scanned: 780
- Files changed: 28
- Total replacements: 116
- Same-name Changed tokens (no rename, just retest): 2
- Affected components: 21

## Value-change reference

| Token mapping | Old value | New value |
| ------------- | --------- | --------- |
| `--color-red-100 → --color-dap-red-100` | `#f5c2bf` | `#ffd2cf` |
| `--color-negative-100 → --negative-100` | `#f5c2bf` | `#ffd2cf` |
| `--color-background-success → --background-success` | `#ecfdf6`
green-50 | `#d9f7e9` green-075 |
| `--color-status-bg-success → --status-bg-success` | `#ecfdf6` green-50
| `#d9f7e9` green-075 |
| `--color-border-disabled → --border-disabled` | `#e5e8ed` brand-050 |
`#c7c9cc` gray-300 |
| `--color-border-danger-weak → --border-error-weak` | `#f5c2bf` |
`#ffd2cf` |
| `--color-font-disabled → --font-disabled` | `#8b98a6` gray-500 |
`#c7c9cc` gray-300 |
| `--color-icon-danger → --icon-error` | `#d70a00` red-400 | `#a10800`
red-500 |
| `--font-family-base (same name)` | `'Roboto', sans-serif` | `Roboto` |
| `--font-family-code (same name)` | `'Fira Mono', monospace` | `Fira
Mono` |
| `--paragraph-spacing-* → --*-paragraph-space-*` | `unitless integer
(e.g. 8)` | `px (e.g. 8px)` |

## Same-name Changed tokens (value differs, no rename)

### `--font-family-base` — 6 usages

-
`packages/design-system/src/components/ds-button-v3/ds-button-v3.module.scss`
(lines 23)
-
`packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss`
(lines 16, 33, 50)
- `packages/design-system/src/styles/_root_new.scss` (lines 447)
- `packages/design-system/src/styles/_typography.scss` (lines 140)

### `--font-family-code` — 6 usages

-
`packages/design-system/src/components/ds-typography/ds-typography.stories.module.scss`
(lines 9)
- `packages/design-system/src/stories/colors.module.scss` (lines 58, 72)
- `packages/design-system/src/stories/stories-common.module.scss` (lines
76)
- `packages/design-system/src/styles/_root_new.scss` (lines 448)
- `packages/design-system/src/styles/_typography.scss` (lines 155)

## Replacements per token

| Old token | Replacements |
| --------- | ------------ |
| `--exo-spacing-2x-small` | 31 |
| `--action-cta1` | 12 |
| `--system-status-error` | 6 |
| `--neutral-6` | 6 |
| `--spacing-8` | 5 |
| `--neutral-3` | 4 |
| `--system-status-info` | 4 |
| `--system-status-ok` | 4 |
| `--action-active-light` | 3 |
| `--action-disabled` | 3 |
| `--utility-error` | 3 |
| `--exo-spacing-x-small` | 3 |
| `--spacing-2` | 3 |
| `--action-hover-light` | 2 |
| `--utility-disabled` | 2 |
| `--spacing-1` | 2 |
| `--spacing-3` | 2 |
| `--spacing-6` | 2 |
| `--system-status-in-progress` | 2 |
| `--system-status-pending` | 2 |
| `--system-status-alert` | 2 |
| `--spacing-4` | 2 |
| `--action-cta3` | 1 |
| `--exo-spacing-standard` | 1 |
| `--exo-spacing-small` | 1 |
| `--neutral-7` | 1 |
| `--color-status-bg-failed` | 1 |
| `--utility-in-progress` | 1 |
| `--utility-pending` | 1 |
| `--utility-alert` | 1 |
| `--utility-info` | 1 |
| `--utility-ok` | 1 |
| `--neutral-8` | 1 |

## Affected files (grouped by component)

### `ds-alert-banner` (3 replacements)

-
`packages/design-system/src/components/ds-alert-banner/stories/ds-alert-banner.stories.module.scss`
— `--exo-spacing-2x-small`×3

### `ds-breadcrumb` (5 replacements)

-
`packages/design-system/src/components/ds-breadcrumb/ds-breadcrumb.module.scss`
— `--exo-spacing-2x-small`×5

### `ds-button` (21 replacements)

-
`packages/design-system/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss`
— `--action-active-light`×1, `--system-status-error`×1,
`--action-hover-light`×1, `--utility-disabled`×1, `--action-disabled`×3,
`--utility-error`×2, `--action-cta1`×1, `--action-cta3`×1
-
`packages/design-system/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss`
— `--exo-spacing-2x-small`×10

### `ds-dialog` (2 replacements)

-
`packages/design-system/src/components/ds-dialog/ds-dialog.module.scss`
— `--neutral-3`×1
-
`packages/design-system/src/components/ds-dialog/ds-dialog.stories.module.scss`
— `--action-cta1`×1

### `ds-dropdown-menu` (1 replacements)

-
`packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.scss`
— `--action-cta1`×1

### `ds-file-upload` (9 replacements)

-
`packages/design-system/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss`
— `--exo-spacing-2x-small`×2, `--exo-spacing-x-small`×1
-
`packages/design-system/src/components/ds-file-upload/components/file-upload/file-upload.module.scss`
— `--exo-spacing-standard`×1, `--exo-spacing-2x-small`×2,
`--exo-spacing-x-small`×2, `--exo-spacing-small`×1

### `ds-form-control` (9 replacements)

-
`packages/design-system/src/components/ds-form-control/ds-form-control.module.scss`
— `--neutral-3`×1
-
`packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.module.scss`
— `--action-cta1`×1, `--neutral-3`×1
-
`packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.tsx`
— `--action-cta1`×5, `--neutral-3`×1

### `ds-grid` (1 replacements)

- `packages/design-system/src/components/ds-grid/ds-grid.stories.scss` —
`--neutral-7`×1

### `ds-panel` (6 replacements)

- `packages/design-system/src/components/ds-panel/ds-panel.module.scss`
— `--spacing-1`×1, `--spacing-2`×1, `--spacing-3`×2, `--spacing-6`×2

### `ds-progress-arc` (3 replacements)

-
`packages/design-system/src/components/ds-progress-arc/ds-progress-arc.stories.module.scss`
— `--spacing-2`×1, `--spacing-8`×2

### `ds-progress-donut` (3 replacements)

-
`packages/design-system/src/components/ds-progress-donut/ds-progress-donut.stories.module.scss`
— `--spacing-2`×1, `--spacing-8`×2

### `ds-status-badge` (1 replacements)

-
`packages/design-system/src/components/ds-status-badge/ds-status-badge.module.scss`
— `--color-status-bg-failed`×1

### `ds-stepper` (1 replacements)

-
`packages/design-system/src/components/ds-stepper/ds-stepper.module.scss`
— `--spacing-8`×1

### `ds-system-status` (19 replacements)

-
`packages/design-system/src/components/ds-system-status/ds-system-status.module.scss`
— `--system-status-in-progress`×2, `--system-status-pending`×2,
`--system-status-error`×2, `--system-status-alert`×2,
`--utility-in-progress`×1, `--system-status-info`×2,
`--system-status-ok`×2, `--utility-disabled`×1, `--utility-pending`×1,
`--utility-error`×1, `--utility-alert`×1, `--utility-info`×1,
`--utility-ok`×1

### `ds-table` (17 replacements)

-
`packages/design-system/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss`
— `--action-cta1`×1, `--neutral-6`×2
-
`packages/design-system/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss`
— `--neutral-6`×1
-
`packages/design-system/src/components/ds-table/components/ds-table-row/ds-table-row.tsx`
— `--action-active-light`×1
- `packages/design-system/src/components/ds-table/ds-table.module.scss`
— `--neutral-6`×1
-
`packages/design-system/src/components/ds-table/stories/components/progress-infographic/progress-infographic.module.scss`
— `--system-status-error`×1, `--system-status-info`×1,
`--system-status-ok`×1, `--neutral-6`×1
-
`packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss`
— `--system-status-error`×2, `--system-status-info`×1,
`--system-status-ok`×1, `--spacing-1`×1, `--spacing-4`×2

### `ds-tabs` (8 replacements)

-
`packages/design-system/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss`
— `--exo-spacing-2x-small`×8

### `ds-tooltip` (1 replacements)

-
`packages/design-system/src/components/ds-tooltip/ds-tooltip.module.scss`
— `--exo-spacing-2x-small`×1

### `styles` (6 replacements)

- `packages/design-system/src/styles/mixins/_list.scss` —
`--action-active-light`×1, `--action-hover-light`×1, `--action-cta1`×2,
`--neutral-6`×1, `--neutral-8`×1

## Visual retest checklist

- [x] **ds-alert-banner** — Visual check: tokens involved —
`--exo-spacing-2x-small`
- [x] **ds-breadcrumb** — Visual check: tokens involved —
`--exo-spacing-2x-small`
- [x] **ds-button** — Verify: disabled states (background, border, font
tone)
- [x] **ds-button-v3** — Verify: font fallback chain (Roboto / Fira Mono
now bare)
- [x] **ds-dialog** — Visual check: tokens involved — `--neutral-3`,
`--action-cta1`
- [x] **ds-dropdown-menu** — Visual check: tokens involved —
`--action-cta1`
- [x] **ds-file-upload** — Visual check: tokens involved —
`--exo-spacing-standard`, `--exo-spacing-2x-small`,
`--exo-spacing-x-small`, `--exo-spacing-small`
- [x] **ds-form-control** — Visual check: tokens involved —
`--neutral-3`, `--action-cta1`
- [x] **ds-grid** — Visual check: tokens involved — `--neutral-7`
- [x] **ds-panel** — Visual check: tokens involved — `--spacing-1`,
`--spacing-2`, `--spacing-3`, `--spacing-6`
- [x] **ds-progress-arc** — Visual check: tokens involved —
`--spacing-2`, `--spacing-8`
- [x] **ds-progress-donut** — Visual check: tokens involved —
`--spacing-2`, `--spacing-8`
- [x] **ds-status-badge** — Visual check: tokens involved —
`--color-status-bg-failed`
- [x] **ds-stepper** — Visual check: tokens involved — `--spacing-8`
- [x] **ds-system-status** — Verify: disabled states (background,
border, font tone)
- [x] **ds-table** — Visual check: tokens involved — `--action-cta1`,
`--neutral-6`, `--action-active-light`, `--system-status-error`,
`--system-status-info`, `--system-status-ok`, `--spacing-1`,
`--spacing-4`
- [x] **ds-tabs** — Visual check: tokens involved —
`--exo-spacing-2x-small`
- [x] **ds-tooltip** — Visual check: tokens involved —
`--exo-spacing-2x-small`
- [x] **ds-typography** — Verify: font fallback chain (Roboto / Fira
Mono now bare)
- [x] **stories** — Verify: font fallback chain (Roboto / Fira Mono now
bare)
- [x] **styles** — Verify: font fallback chain (Roboto / Fira Mono now
bare)

Author: iromanchuk-dn

.changeset/polite-glasses-shine.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': minor
+---
+
+Migrate DS codebase to new tokens

packages/design-system/src/components/ds-alert-banner/stories/ds-alert-banner.stories.module.scss

@@ -31,11 +31,11 @@
 
 	button.primary {
 		display: flex;
-		padding: var(---exo-spacing-2x-small, 4px) var(--sm, 12px);
+		padding: var(---3xs, 4px) var(--sm, 12px);
 		align-items: center;
-		gap: var(---exo-spacing-2x-small, 4px);
+		gap: var(---3xs, 4px);
 		align-self: stretch;
-		border-radius: var(---exo-spacing-2x-small, 4px);
+		border-radius: var(---3xs, 4px);
 		border: 1px solid var(--border);
 		background: var(--background);
 	}

packages/design-system/src/components/ds-breadcrumb/ds-breadcrumb.module.scss

@@ -5,9 +5,9 @@
 	color: var(--background-action);
 	text-decoration: none;
 	outline: none;
-	padding: var(--exo-spacing-2x-small) var(--sm);
-	gap: var(--exo-spacing-2x-small);
-	border-radius: var(--exo-spacing-2x-small);
+	padding: var(--3xs) var(--sm);
+	gap: var(--3xs);
+	border-radius: var(--3xs);
 	display: flex;
 	align-items: center;
 
@@ -82,13 +82,13 @@
 }
 
 .icon {
-	margin-right: var(--exo-spacing-2x-small);
+	margin-right: var(--3xs);
 	display: flex;
 	align-items: center;
 }
 
 .dropdownIcon {
-	margin-left: var(--exo-spacing-2x-small);
+	margin-left: var(--3xs);
 	display: flex;
 	align-items: center;
 }

packages/design-system/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss

@@ -1,21 +1,21 @@
 @use '../../../../styles/typography';
 
-$color-primary-default: var(--action-cta1);
-$color-primary-hover: var(--action-hover-light);
-$color-primary-active: var(--action-active-light);
-$color-primary-disabled: var(--action-disabled);
+$color-primary-default: var(--color-dap-blue-600);
+$color-primary-hover: var(--background-active-status);
+$color-primary-active: var(--color-dap-purple-200);
+$color-primary-disabled: var(--color-dap-gray-400);
 
-$color-secondary-default: var(--action-cta3);
+$color-secondary-default: var(--color-dap-brand-300);
 $color-secondary-hover: var(--color-dap-gray-500);
-$color-secondary-disabled: var(--action-disabled);
+$color-secondary-disabled: var(--color-dap-gray-400);
 
-$color-error-default: var(--system-status-error);
-$color-error-hover: var(--utility-error);
-$color-error-active: var(--utility-error);
-$color-error-disabled: var(--action-disabled);
+$color-error-default: var(--background-error);
+$color-error-hover: var(--color-dap-red-100);
+$color-error-active: var(--color-dap-red-100);
+$color-error-disabled: var(--color-dap-gray-400);
 
 $color-white: var(--color-dap-gray-050);
-$color-neutral-6: var(--utility-disabled);
+$color-neutral-6: var(--color-dap-gray-200);
 $color-neutral-4: var(--color-dap-gray-500);
 
 @mixin button-filled($background, $hover, $active, $disabled) {

packages/design-system/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss

@@ -38,16 +38,16 @@ $button-size-large: 40px;
 	padding-block: 0;
 	padding-inline: 0;
 	border: 2px solid transparent;
-	border-radius: var(--exo-spacing-2x-small);
+	border-radius: var(--3xs);
 
 	.content {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--exo-spacing-2x-small);
+		gap: var(--3xs);
 		padding: 0 var(--sm);
 		border: 1px solid transparent;
-		border-radius: var(--exo-spacing-2x-small);
+		border-radius: var(--3xs);
 		flex-grow: 1;
 	}
 
@@ -116,7 +116,7 @@ $button-size-large: 40px;
 
 			.content {
 				border-color: var(--background);
-				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+				border-radius: calc(var(--3xs) / 2);
 			}
 		}
 
@@ -207,7 +207,7 @@ $button-size-large: 40px;
 			.content {
 				border-color: var(--background);
 				background: var(--background-action-hover-weak);
-				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+				border-radius: calc(var(--3xs) / 2);
 			}
 		}
 
@@ -318,7 +318,7 @@ $button-size-large: 40px;
 
 			.content {
 				border-color: var(--background);
-				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+				border-radius: calc(var(--3xs) / 2);
 			}
 		}
 
@@ -448,7 +448,7 @@ $button-size-large: 40px;
 
 			.content {
 				border-color: var(--font-on-action);
-				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+				border-radius: calc(var(--3xs) / 2);
 			}
 		}
 
@@ -496,7 +496,7 @@ $button-size-large: 40px;
 				border-color: transparent;
 				background: var(--light-buttons-secondary-background);
 				color: var(--light-buttons-secondary-hover);
-				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+				border-radius: calc(var(--3xs) / 2);
 			}
 		}
 
@@ -544,7 +544,7 @@ $button-size-large: 40px;
 			.content {
 				background: var(--Dark-Buttons-secondary-light-hover-background);
 				color: var(--light-buttons-tertiary);
-				border-radius: var(--exo-spacing-2x-small);
+				border-radius: var(--3xs);
 			}
 		}
 
@@ -592,7 +592,7 @@ $button-size-large: 40px;
 			.content {
 				background: var(--Dark-Buttons-secondary-light-hover-background);
 				color: var(--light-buttons-tertiary);
-				border-radius: var(--exo-spacing-2x-small);
+				border-radius: var(--3xs);
 			}
 		}
 

packages/design-system/src/components/ds-dialog/ds-dialog.module.scss

@@ -39,7 +39,7 @@
 
 .description {
 	@include typography.p-base;
-	color: var(--neutral-3);
+	color: var(--color-dap-gray-500);
 	margin-bottom: 16px;
 }
 

packages/design-system/src/components/ds-dialog/ds-dialog.stories.module.scss

@@ -11,5 +11,5 @@
 	top: 20px;
 	left: 20px;
 	z-index: 1;
-	color: var(--action-cta1);
+	color: var(--color-dap-blue-600);
 }

packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.scss

@@ -17,7 +17,7 @@
 	}
 
 	&:hover {
-		border-color: var(--action-cta1);
+		border-color: var(--color-dap-blue-600);
 	}
 
 	span {

packages/design-system/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss

@@ -10,9 +10,9 @@
 		gap: var(--2xs);
 		width: 100%;
 		background-color: var(--background);
-		padding: var(--4xs) var(--exo-spacing-x-small);
+		padding: var(--4xs) var(--xs);
 		border: 1px solid transparent;
-		border-radius: var(--exo-spacing-2x-small);
+		border-radius: var(--3xs);
 		transition: all 0.2s ease;
 
 		&:hover {
@@ -86,7 +86,7 @@
 	width: 100%;
 	height: 100%;
 	background-color: var(--background-tertiary);
-	border-radius: var(--exo-spacing-2x-small);
+	border-radius: var(--3xs);
 	overflow: hidden;
 }
 

packages/design-system/src/components/ds-file-upload/components/file-upload/file-upload.module.scss

@@ -11,9 +11,9 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: var(--exo-spacing-small) var(--exo-spacing-standard);
-	border: var(--exo-spacing-4x-small) dashed var(--border);
-	border-radius: var(--exo-spacing-2x-small);
+	padding: var(--sm) var(--standard);
+	border: 1px dashed var(--border);
+	border-radius: var(--3xs);
 	background-color: var(--background);
 	transition: all 0.2s ease;
 	cursor: pointer;
@@ -69,10 +69,10 @@
 .fileList {
 	display: flex;
 	flex-direction: column;
-	gap: var(--exo-spacing-x-small);
-	margin-top: var(--exo-spacing-x-small);
+	gap: var(--xs);
+	margin-top: var(--xs);
 	padding: var(--xs);
-	border-radius: var(--exo-spacing-2x-small);
+	border-radius: var(--3xs);
 	background: var(--background-secondary);
 }