feat(design-system): migrate DS codebase to new tokens (Step 3) [AR-60245] by iromanchuk-dn · Pull Request #449 · drivenets/design-system

iromanchuk-dn · 2026-05-06T18:18:38Z

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

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

…0245]

…se-to-new-tokens-final

feat(design-system): migrate DS codebase to new tokens (Step 3) [AR-6…

8c9973e

…0245]

github-actions Bot added the design-system label May 6, 2026

iromanchuk-dn added 4 commits May 6, 2026 20:19

add changeset

e3ebb90

Move icon&table&typography specific tokens to corresponding components

a1506e0

Update token-migration.mdx

0c143f8

Merge branch 'main' into AR-60245-dap-design-system-migrate-ds-codeba…

1f9a8cf

…se-to-new-tokens-final

iromanchuk-dn marked this pull request as ready for review May 7, 2026 14:24

iromanchuk-dn requested review from mmurawski-dn and vpolessky-dn May 7, 2026 14:24

mmurawski-dn approved these changes May 7, 2026

View reviewed changes

iromanchuk-dn merged commit 8723a60 into drivenets:main May 7, 2026
18 checks passed

iromanchuk-dn deleted the AR-60245-dap-design-system-migrate-ds-codebase-to-new-tokens-final branch May 7, 2026 18:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

feat(design-system): migrate DS codebase to new tokens (Step 3) [AR-60245]#449
iromanchuk-dn merged 5 commits into
drivenets:mainfrom
iromanchuk-dn:AR-60245-dap-design-system-migrate-ds-codebase-to-new-tokens-final

iromanchuk-dn commented May 6, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

iromanchuk-dn commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Phase 3 — Removed tokens (apply)

Summary

Replacement decisions

Kept (KEEP)

Replacements per token

Affected files (grouped by component)

ds-file-upload (1 replacements)

Visual retest checklist

Phase 2 — Changed tokens

Summary

Value-change reference

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

--font-family-base — 6 usages

--font-family-code — 6 usages

Replacements per token

Affected files (grouped by component)

ds-alert-banner (3 replacements)

ds-breadcrumb (5 replacements)

ds-button (21 replacements)

ds-dialog (2 replacements)

ds-dropdown-menu (1 replacements)

ds-file-upload (9 replacements)

ds-form-control (9 replacements)

ds-grid (1 replacements)

ds-panel (6 replacements)

ds-progress-arc (3 replacements)

ds-progress-donut (3 replacements)

ds-status-badge (1 replacements)

ds-stepper (1 replacements)

ds-system-status (19 replacements)

ds-table (17 replacements)

ds-tabs (8 replacements)

ds-tooltip (1 replacements)

styles (6 replacements)

Visual retest checklist

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

iromanchuk-dn commented May 6, 2026 •

edited

Loading

`ds-file-upload` (1 replacements)

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

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

`ds-alert-banner` (3 replacements)

`ds-breadcrumb` (5 replacements)

`ds-button` (21 replacements)

`ds-dialog` (2 replacements)

`ds-dropdown-menu` (1 replacements)

`ds-file-upload` (9 replacements)

`ds-form-control` (9 replacements)

`ds-grid` (1 replacements)

`ds-panel` (6 replacements)

`ds-progress-arc` (3 replacements)

`ds-progress-donut` (3 replacements)

`ds-status-badge` (1 replacements)

`ds-stepper` (1 replacements)

`ds-system-status` (19 replacements)

`ds-table` (17 replacements)

`ds-tabs` (8 replacements)

`ds-tooltip` (1 replacements)

`styles` (6 replacements)