From 8c9973ea83eed17b17d2a940f1242f703dd217d0 Mon Sep 17 00:00:00 2001 From: Ihor Romanchuk Date: Wed, 6 May 2026 20:17:54 +0200 Subject: [PATCH 1/4] feat(design-system): migrate DS codebase to new tokens (Step 3) [AR-60245] --- .../ds-alert-banner.stories.module.scss | 6 +- .../ds-breadcrumb/ds-breadcrumb.module.scss | 10 +- .../ds-button-legacy.module.scss | 22 +-- .../ds-button-new/ds-button-new.module.scss | 20 +-- .../ds-dialog/ds-dialog.module.scss | 2 +- .../ds-dialog/ds-dialog.stories.module.scss | 2 +- .../ds-dropdown-menu.stories.scss | 2 +- .../file-upload-item.module.scss | 6 +- .../file-upload/file-upload.module.scss | 12 +- .../ds-form-control.module.scss | 2 +- .../ds-form-control.stories.module.scss | 4 +- .../stories/ds-form-control.stories.tsx | 12 +- .../components/ds-grid/ds-grid.stories.scss | 2 +- .../components/ds-panel/ds-panel.module.scss | 12 +- .../ds-progress-arc.stories.module.scss | 6 +- .../ds-progress-donut.stories.module.scss | 6 +- .../ds-status-badge.module.scss | 2 +- .../ds-stepper/ds-stepper.module.scss | 2 +- .../ds-system-status.module.scss | 38 ++--- .../ds-table-bulk-actions.module.scss | 6 +- .../ds-table-header.module.scss | 2 +- .../components/ds-table-row/ds-table-row.tsx | 2 +- .../components/ds-table/ds-table.module.scss | 2 +- .../progress-infographic.module.scss | 8 +- .../stories/ds-table.stories.module.scss | 14 +- .../ds-tabs-tab/ds-tabs-tab.module.scss | 12 +- .../ds-tooltip/ds-tooltip.module.scss | 2 +- .../src/stories/token-migration.mdx | 136 +++++++++--------- .../src/styles/_kept-tokens.scss | 30 ++++ .../src/styles/mixins/_list.scss | 12 +- 30 files changed, 216 insertions(+), 178 deletions(-) create mode 100644 packages/design-system/src/styles/_kept-tokens.scss diff --git a/packages/design-system/src/components/ds-alert-banner/stories/ds-alert-banner.stories.module.scss b/packages/design-system/src/components/ds-alert-banner/stories/ds-alert-banner.stories.module.scss index b970a54ef..48bd3b176 100644 --- a/packages/design-system/src/components/ds-alert-banner/stories/ds-alert-banner.stories.module.scss +++ b/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); } diff --git a/packages/design-system/src/components/ds-breadcrumb/ds-breadcrumb.module.scss b/packages/design-system/src/components/ds-breadcrumb/ds-breadcrumb.module.scss index fe08792b8..ab75b8125 100644 --- a/packages/design-system/src/components/ds-breadcrumb/ds-breadcrumb.module.scss +++ b/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; } diff --git a/packages/design-system/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss b/packages/design-system/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss index 9d1e3a560..91656561d 100644 --- a/packages/design-system/src/components/ds-button/versions/ds-button-legacy/ds-button-legacy.module.scss +++ b/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) { diff --git a/packages/design-system/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss b/packages/design-system/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss index 7025b7854..dc83821ca 100644 --- a/packages/design-system/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss +++ b/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); } } diff --git a/packages/design-system/src/components/ds-dialog/ds-dialog.module.scss b/packages/design-system/src/components/ds-dialog/ds-dialog.module.scss index 43666311a..811e3ae3f 100644 --- a/packages/design-system/src/components/ds-dialog/ds-dialog.module.scss +++ b/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; } diff --git a/packages/design-system/src/components/ds-dialog/ds-dialog.stories.module.scss b/packages/design-system/src/components/ds-dialog/ds-dialog.stories.module.scss index 676ecc5aa..c823ab33c 100644 --- a/packages/design-system/src/components/ds-dialog/ds-dialog.stories.module.scss +++ b/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); } diff --git a/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.scss b/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.scss index 02ac75a65..353e20ee6 100644 --- a/packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.stories.scss +++ b/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 { diff --git a/packages/design-system/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss b/packages/design-system/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss index 61cd7bf3e..fd146334d 100644 --- a/packages/design-system/src/components/ds-file-upload/components/file-upload-item/file-upload-item.module.scss +++ b/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; } diff --git a/packages/design-system/src/components/ds-file-upload/components/file-upload/file-upload.module.scss b/packages/design-system/src/components/ds-file-upload/components/file-upload/file-upload.module.scss index 369b1577b..231457b10 100644 --- a/packages/design-system/src/components/ds-file-upload/components/file-upload/file-upload.module.scss +++ b/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); } diff --git a/packages/design-system/src/components/ds-form-control/ds-form-control.module.scss b/packages/design-system/src/components/ds-form-control/ds-form-control.module.scss index 56a72e1ff..f70ab55f4 100644 --- a/packages/design-system/src/components/ds-form-control/ds-form-control.module.scss +++ b/packages/design-system/src/components/ds-form-control/ds-form-control.module.scss @@ -117,7 +117,7 @@ $form-control-description-max-height: calc( .icon { position: absolute; pointer-events: none; - color: var(--neutral-3); + color: var(--color-dap-gray-500); } .icon { diff --git a/packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.module.scss b/packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.module.scss index 46a6a5949..54887f67d 100644 --- a/packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.module.scss +++ b/packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.module.scss @@ -3,7 +3,7 @@ border: none; padding: 0; cursor: pointer; - color: var(--neutral-3); + color: var(--color-dap-gray-500); display: flex; align-items: center; justify-content: center; @@ -17,7 +17,7 @@ } &:focus { - outline: 2px solid var(--action-cta1); + outline: 2px solid var(--color-dap-blue-600); outline-offset: 2px; } } diff --git a/packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.tsx b/packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.tsx index e25500670..3ab7f2f43 100644 --- a/packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.tsx +++ b/packages/design-system/src/components/ds-form-control/stories/ds-form-control.stories.tsx @@ -112,7 +112,7 @@ export const WithDescription: Story = { padding: 0, margin: 0, cursor: 'pointer', - color: 'var(--action-cta1)', + color: 'var(--color-dap-blue-600)', textDecoration: 'underline', fontSize: 'inherit', fontFamily: 'inherit', @@ -150,7 +150,7 @@ export const WithHelpIcon: Story = { border: 'none', padding: '4px', cursor: 'pointer', - color: 'var(--neutral-3)', + color: 'var(--color-dap-gray-500)', display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -175,7 +175,7 @@ export const WithHelpIcon: Story = { padding: 0, margin: 0, cursor: 'pointer', - color: 'var(--action-cta1)', + color: 'var(--color-dap-blue-600)', textDecoration: 'underline', fontSize: 'inherit', fontFamily: 'inherit', @@ -233,7 +233,7 @@ export const Success: Story = { padding: 0, margin: 0, cursor: 'pointer', - color: 'var(--action-cta1)', + color: 'var(--color-dap-blue-600)', textDecoration: 'underline', fontSize: 'inherit', fontFamily: 'inherit', @@ -274,7 +274,7 @@ export const Error: Story = { padding: 0, margin: 0, cursor: 'pointer', - color: 'var(--action-cta1)', + color: 'var(--color-dap-blue-600)', textDecoration: 'underline', fontSize: 'inherit', fontFamily: 'inherit', @@ -317,7 +317,7 @@ export const Warning: Story = { padding: 0, margin: 0, cursor: 'pointer', - color: 'var(--action-cta1)', + color: 'var(--color-dap-blue-600)', textDecoration: 'underline', fontSize: 'inherit', fontFamily: 'inherit', diff --git a/packages/design-system/src/components/ds-grid/ds-grid.stories.scss b/packages/design-system/src/components/ds-grid/ds-grid.stories.scss index c03f2c843..5dc7b5752 100644 --- a/packages/design-system/src/components/ds-grid/ds-grid.stories.scss +++ b/packages/design-system/src/components/ds-grid/ds-grid.stories.scss @@ -4,7 +4,7 @@ .card { background: var(--color-dap-gray-050); - border: 1px solid var(--neutral-7); + border: 1px solid var(--color-dap-gray-300); padding: 12px 16px; box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.2509803922); border-radius: 4px; diff --git a/packages/design-system/src/components/ds-panel/ds-panel.module.scss b/packages/design-system/src/components/ds-panel/ds-panel.module.scss index 806402c9e..435049461 100644 --- a/packages/design-system/src/components/ds-panel/ds-panel.module.scss +++ b/packages/design-system/src/components/ds-panel/ds-panel.module.scss @@ -1,7 +1,7 @@ .root { position: relative; background: var(--color-dap-gray-050); - padding: var(--spacing-6); + padding: var(--lg); width: 20vw; min-width: 240px; max-width: 480px; @@ -19,10 +19,10 @@ &.variantFloating { position: absolute; - inset-inline-start: var(--spacing-3); - top: var(--spacing-3); + inset-inline-start: var(--sm); + top: var(--sm); border: none; - border-radius: var(--spacing-2); + border-radius: var(--xs); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22)); } @@ -50,7 +50,7 @@ border-radius: 100%; background: var(--color-dap-gray-050); color: var(--icon-action-secondary); - top: var(--spacing-6); + top: var(--lg); inset-inline-start: 100%; margin-inline-start: calc(var(--size) / -2); @@ -93,7 +93,7 @@ &::after { content: ''; position: absolute; - inset: calc(-1 * var(--spacing-1)); + inset: calc(-1 * var(--3xs)); } .root.variantFloating & { diff --git a/packages/design-system/src/components/ds-progress-arc/ds-progress-arc.stories.module.scss b/packages/design-system/src/components/ds-progress-arc/ds-progress-arc.stories.module.scss index 279fe944c..d5d8b3d97 100644 --- a/packages/design-system/src/components/ds-progress-arc/ds-progress-arc.stories.module.scss +++ b/packages/design-system/src/components/ds-progress-arc/ds-progress-arc.stories.module.scss @@ -1,7 +1,7 @@ .grid { display: grid; grid-template-columns: repeat(3, auto); - gap: var(--spacing-8); + gap: var(--xl); align-items: center; justify-items: center; } @@ -10,7 +10,7 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-2); + gap: var(--xs); } .label { @@ -20,6 +20,6 @@ .row { display: flex; - gap: var(--spacing-8); + gap: var(--xl); align-items: center; } diff --git a/packages/design-system/src/components/ds-progress-donut/ds-progress-donut.stories.module.scss b/packages/design-system/src/components/ds-progress-donut/ds-progress-donut.stories.module.scss index 279fe944c..d5d8b3d97 100644 --- a/packages/design-system/src/components/ds-progress-donut/ds-progress-donut.stories.module.scss +++ b/packages/design-system/src/components/ds-progress-donut/ds-progress-donut.stories.module.scss @@ -1,7 +1,7 @@ .grid { display: grid; grid-template-columns: repeat(3, auto); - gap: var(--spacing-8); + gap: var(--xl); align-items: center; justify-items: center; } @@ -10,7 +10,7 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacing-2); + gap: var(--xs); } .label { @@ -20,6 +20,6 @@ .row { display: flex; - gap: var(--spacing-8); + gap: var(--xl); align-items: center; } diff --git a/packages/design-system/src/components/ds-status-badge/ds-status-badge.module.scss b/packages/design-system/src/components/ds-status-badge/ds-status-badge.module.scss index 0e873416a..71ecdd1a1 100644 --- a/packages/design-system/src/components/ds-status-badge/ds-status-badge.module.scss +++ b/packages/design-system/src/components/ds-status-badge/ds-status-badge.module.scss @@ -67,7 +67,7 @@ .failed { @include status-filled(var(--font-on-action), var(--background-error)); - @include status-ghost(var(--background-error-hover), var(--color-status-bg-failed)); + @include status-ghost(var(--background-error-hover), var(--background-error-secondary-hover)); } .label::first-letter { diff --git a/packages/design-system/src/components/ds-stepper/ds-stepper.module.scss b/packages/design-system/src/components/ds-stepper/ds-stepper.module.scss index b627b0e91..5840cc5ae 100644 --- a/packages/design-system/src/components/ds-stepper/ds-stepper.module.scss +++ b/packages/design-system/src/components/ds-stepper/ds-stepper.module.scss @@ -301,7 +301,7 @@ $horizontal-description-line-clamp: 2; .stepDescription { font-size: var(--body-font-size-xs); line-height: var(--body-line-height-xs); - max-height: var(--spacing-8); + max-height: var(--xl); overflow: hidden; display: -webkit-box; -webkit-line-clamp: $horizontal-description-line-clamp; diff --git a/packages/design-system/src/components/ds-system-status/ds-system-status.module.scss b/packages/design-system/src/components/ds-system-status/ds-system-status.module.scss index 6a9f39854..22f488ffa 100644 --- a/packages/design-system/src/components/ds-system-status/ds-system-status.module.scss +++ b/packages/design-system/src/components/ds-system-status/ds-system-status.module.scss @@ -24,61 +24,61 @@ } .healthy { - background: var(--utility-ok); - color: var(--system-status-ok); + background: var(--color-dap-data-light-green); + color: var(--color-dap-data-green); .dot { - background: var(--system-status-ok); + background: var(--color-dap-data-green); } } .neutral { - background: var(--utility-info); - color: var(--system-status-info); + background: var(--color-dap-blue-200); + color: var(--color-dap-blue-600); .dot { - background: var(--system-status-info); + background: var(--color-dap-blue-600); } } .error { - background: var(--utility-error); - color: var(--system-status-error); + background: var(--color-dap-red-100); + color: var(--background-error); .dot { - background: var(--system-status-error); + background: var(--background-error); } } .in-progress { - background: var(--utility-in-progress); - color: var(--system-status-in-progress); + background: var(--schema-light-blue); + color: var(--color-dap-blue-800); .dot { - background: var(--system-status-in-progress); + background: var(--color-dap-blue-800); } } .pending { - background: var(--utility-pending); - color: var(--system-status-pending); + background: var(--background-pending); + color: var(--color-dap-data-deep-fuchsia); .dot { - background: var(--system-status-pending); + background: var(--color-dap-data-deep-fuchsia); } } .alert { - background: var(--utility-alert); - color: var(--system-status-alert); + background: var(--schema-light-amber); + color: var(--color-dap-orange-600); .dot { - background: var(--system-status-alert); + background: var(--color-dap-orange-600); } } .disabled { - background: var(--utility-disabled); + background: var(--color-dap-gray-200); color: var(--color-dap-gray-600); .dot { diff --git a/packages/design-system/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss b/packages/design-system/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss index 6f39a1aff..3566de565 100644 --- a/packages/design-system/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss +++ b/packages/design-system/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss @@ -34,7 +34,7 @@ } .selectedCountContainer { - background-color: var(--action-cta1); + background-color: var(--color-dap-blue-600); display: flex; align-items: center; padding: 6px 22px; @@ -63,14 +63,14 @@ align-items: center; justify-content: center; gap: var(--3xs); - border-right: 1px solid var(--neutral-6); + border-right: 1px solid var(--color-dap-gray-400); width: 68px; height: 48px; border-radius: 0; } > .actionButton:first-child { - border-left: 1px solid var(--neutral-6); + border-left: 1px solid var(--color-dap-gray-400); } } diff --git a/packages/design-system/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss b/packages/design-system/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss index 50b678e2b..bf608da7d 100644 --- a/packages/design-system/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss +++ b/packages/design-system/src/components/ds-table/components/ds-table-header/ds-table-header.module.scss @@ -14,7 +14,7 @@ .headerRow { .headerCell { - border-bottom: 1px solid var(--neutral-6); + border-bottom: 1px solid var(--color-dap-gray-400); &.selectColumn { width: vars.$select-column-width; diff --git a/packages/design-system/src/components/ds-table/components/ds-table-row/ds-table-row.tsx b/packages/design-system/src/components/ds-table/components/ds-table-row/ds-table-row.tsx index a8cbcdbb2..346afb3a3 100644 --- a/packages/design-system/src/components/ds-table/components/ds-table-row/ds-table-row.tsx +++ b/packages/design-system/src/components/ds-table/components/ds-table-row/ds-table-row.tsx @@ -67,7 +67,7 @@ const DsTableRow = ({ ref, row, isSelected }: DsTableRowProps) => transition, ...(isDragging ? { - background: 'var(--action-active-light)', + background: 'var(--color-dap-purple-200)', boxShadow: '0 0 12px 0 rgba(0, 102, 250, 0.60)', zIndex: 1, } diff --git a/packages/design-system/src/components/ds-table/ds-table.module.scss b/packages/design-system/src/components/ds-table/ds-table.module.scss index 219bda1f3..89fc8ba56 100644 --- a/packages/design-system/src/components/ds-table/ds-table.module.scss +++ b/packages/design-system/src/components/ds-table/ds-table.module.scss @@ -8,7 +8,7 @@ $bulk-actions-height: 60px; border-radius: vars.$border-radius; border-width: vars.$border-width; border-style: solid; - border-color: var(--neutral-6); + border-color: var(--color-dap-gray-400); background: var(--background); } diff --git a/packages/design-system/src/components/ds-table/stories/components/progress-infographic/progress-infographic.module.scss b/packages/design-system/src/components/ds-table/stories/components/progress-infographic/progress-infographic.module.scss index df176f614..73dabf49e 100644 --- a/packages/design-system/src/components/ds-table/stories/components/progress-infographic/progress-infographic.module.scss +++ b/packages/design-system/src/components/ds-table/stories/components/progress-infographic/progress-infographic.module.scss @@ -4,7 +4,7 @@ background-color: var(--color-dap-gray-100); border-radius: 4px; overflow: hidden; - border: 1px solid var(--neutral-6); + border: 1px solid var(--color-dap-gray-400); & > .bar { height: 100%; @@ -17,15 +17,15 @@ transition: width 0.3s ease-in-out; &--low { - background-color: var(--system-status-error); + background-color: var(--background-error); } &--medium { - background-color: var(--system-status-info); + background-color: var(--color-dap-blue-600); } &--high { - background-color: var(--system-status-ok); + background-color: var(--color-dap-data-green); } } } diff --git a/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss b/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss index 7ea2d2f1d..066576180 100644 --- a/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss +++ b/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss @@ -20,15 +20,15 @@ color: var(--color-dap-gray-050); &--single { - background-color: var(--system-status-ok); + background-color: var(--color-dap-data-green); } &--relationship { - background-color: var(--system-status-info); + background-color: var(--color-dap-blue-600); } &--complicated { - background-color: var(--system-status-error); + background-color: var(--background-error); } } @@ -266,7 +266,7 @@ .drawerDetails { display: flex; flex-direction: column; - gap: var(--spacing-4); + gap: var(--standard); } .drawerDetailItem { @@ -278,7 +278,7 @@ color: var(--font-secondary); font-weight: var(--font-weight-medium); font-size: var(--body-font-size-sm); - margin-bottom: var(--spacing-1); + margin-bottom: var(--3xs); } .drawerDetailValue { @@ -297,7 +297,7 @@ .drawerNote { margin-top: var(--lg); - padding: var(--spacing-4); + padding: var(--standard); background: var(--background-info); border-radius: 4px; @@ -328,5 +328,5 @@ } .destructiveAction { - color: var(--system-status-error); + color: var(--background-error); } diff --git a/packages/design-system/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss b/packages/design-system/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss index 7f2f0c54e..8bccd0632 100644 --- a/packages/design-system/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss +++ b/packages/design-system/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.module.scss @@ -11,7 +11,7 @@ $disabled-opacity: 0.5; display: inline-flex; align-items: center; background: var(--background); - border-radius: var(--exo-spacing-2x-small); + border-radius: var(--3xs); cursor: pointer; transition: background-color $transition-duration, @@ -111,13 +111,13 @@ $disabled-opacity: 0.5; [data-orientation='vertical'][data-size='medium'] & { padding: var(--sm) var(--standard); padding-left: var(--xs); - border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small); + border-radius: var(--3xs) 0 0 var(--3xs); } [data-orientation='vertical'][data-size='small'] & { padding: var(--xs) var(--standard); padding-left: var(--xs); - border-radius: var(--exo-spacing-2x-small) 0 0 var(--exo-spacing-2x-small); + border-radius: var(--3xs) 0 0 var(--3xs); } } @@ -150,7 +150,7 @@ $disabled-opacity: 0.5; flex-shrink: 0; color: var(--font-main) !important; cursor: pointer; - border-radius: var(--exo-spacing-2x-small); + border-radius: var(--3xs); transition: background-color $transition-duration, color $transition-duration; @@ -201,7 +201,7 @@ $disabled-opacity: 0.5; .menuContent { background: var(--background); border: $tab-border-width solid var(--border-secondary); - border-radius: var(--exo-spacing-2x-small); + border-radius: var(--3xs); box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15); padding: var(--3xs); width: $menu-content-width; @@ -212,7 +212,7 @@ $disabled-opacity: 0.5; display: flex; align-items: center; padding: var(--3xs); - border-radius: var(--exo-spacing-2x-small); + border-radius: var(--3xs); cursor: pointer; color: var(--font-main); background: var(--background); diff --git a/packages/design-system/src/components/ds-tooltip/ds-tooltip.module.scss b/packages/design-system/src/components/ds-tooltip/ds-tooltip.module.scss index e56b9e0d8..a3b62a608 100644 --- a/packages/design-system/src/components/ds-tooltip/ds-tooltip.module.scss +++ b/packages/design-system/src/components/ds-tooltip/ds-tooltip.module.scss @@ -2,7 +2,7 @@ color: var(--font-on-action); background-color: var(--background-brand); padding: var(--xs) var(--sm); - border-radius: var(--exo-spacing-2x-small); + border-radius: var(--3xs); max-width: 384px; overflow-wrap: break-word; z-index: 9999; diff --git a/packages/design-system/src/stories/token-migration.mdx b/packages/design-system/src/stories/token-migration.mdx index 34fc59ddd..ffd04a19c 100644 --- a/packages/design-system/src/stories/token-migration.mdx +++ b/packages/design-system/src/stories/token-migration.mdx @@ -364,7 +364,7 @@ Shows the mapping of old tokens to new tokens. | — | `--background-transparent-hover` | New | | `--color-background-warning` | `--background-warning` | Renamed | | `--color-background-warning-strong` | `--background-warning-strong` | Renamed | -| `--color-background-warning-weak` | — | Removed | +| `--color-background-warning-weak` | `--color-dap-red-050` | Changed | --- @@ -475,7 +475,7 @@ Shows the mapping of old tokens to new tokens. | `--color-status-bg-progress` | `--status-bg-progress` | Renamed | | `--color-status-bg-success` | `--status-bg-success` | Changed | | `--color-status-bg-warning` | `--status-bg-warning` | Renamed | -| `--color-status-bg-failed` | — | Removed | +| `--color-status-bg-failed` | `--background-error-secondary-hover` | Changed | --- @@ -622,7 +622,13 @@ Unit changed from unitless integers to `px` across the scale. See the breaking-c | `--paragraph-spacing-sm` | `--body-paragraph-space-small` | Changed | | `--paragraph-spacing-xs` | `--body-paragraph-space-xs` | Changed | -### Removed (still absent from `_root_new.scss`) +### Removed (kept under `_kept-tokens.scss`, pending relocation to components) + +These tokens have no equivalent in `_root_new.scss` and are intentionally +preserved. Their definitions live in `packages/design-system/src/styles/_kept-tokens.scss` +and will be moved next to the components that own them +(`--letter-spacing--1percent` → typography mixins, `--icon-width-*` → DsIcon, +`--ds-table-row-*` / `--ds-table-header-height` → DsTable). | Old Name | New Name | Status | | ---------------------------- | -------- | ------- | @@ -650,7 +656,7 @@ Unit changed from unitless integers to `px` across the scale. See the breaking-c | `--color-marker-magenta-12` | — | Removed | | `--color-marker-magenta-60` | — | Removed | | `--color-marker-magenta-100` | — | Removed | -| `--color-marker-yellow-100` | — | Removed | +| `--color-marker-yellow-100` | `--color-dap-data-yellow` | Changed | --- @@ -680,93 +686,95 @@ These tokens come from the older `$colors` Sass map. Where the hex matches a new | -------------------------- | ---------------------- | ------- | | `--neutral-1` (`#2c3a4b`) | `--color-dap-gray-700` | Renamed | | `--neutral-2` (`#4c5f76`) | `--color-dap-gray-600` | Renamed | -| `--neutral-3` (`#6c7b8e`) | — | Removed | +| `--neutral-3` (`#6c7b8e`) | `--color-dap-gray-500` | Changed | | `--neutral-4` (`#8b98a6`) | `--color-dap-gray-500` | Renamed | -| `--neutral-5` (`#a0aab7`) | — | Removed | -| `--neutral-6` (`#b3bfd1`) | — | Removed | -| `--neutral-7` (`#c2cedf`) | — | Removed | -| `--neutral-8` (`#dee6f1`) | — | Removed | -| `--neutral-9` (`#eaecef`) | — | Removed | +| `--neutral-5` (`#a0aab7`) | `--color-dap-gray-400` | Changed | +| `--neutral-6` (`#b3bfd1`) | `--color-dap-gray-400` | Changed | +| `--neutral-7` (`#c2cedf`) | `--color-dap-gray-300` | Changed | +| `--neutral-8` (`#dee6f1`) | `--color-dap-gray-200` | Changed | +| `--neutral-9` (`#eaecef`) | `--color-dap-gray-200` | Changed | | `--neutral-10` (`#f3f5fa`) | `--color-dap-gray-100` | Renamed | -| `--neutral-bg` (`#dae2f4`) | — | Removed | +| `--neutral-bg` (`#dae2f4`) | `--color-dap-gray-200` | Changed | ### Action | Old Name | New Name | Status | | ----------------------------------- | -------- | ------- | -| `--action-cta1` (`#0064fa`) | — | Removed | -| `--action-cta2` (`#579aff`) | — | Removed | -| `--action-cta3` (`#6b7b8e`) | — | Removed | -| `--action-active-light` (`#c7d8ff`) | — | Removed | -| `--action-hover-light` (`#e0eaff`) | — | Removed | -| `--action-disabled` (`#b0b4bf`) | — | Removed | +| `--action-cta1` (`#0064fa`) | `--color-dap-blue-600` | Changed | +| `--action-cta2` (`#579aff`) | `--color-dap-blue-400` | Changed | +| `--action-cta3` (`#6b7b8e`) | `--color-dap-brand-300` | Changed | +| `--action-active-light` (`#c7d8ff`) | `--color-dap-purple-200` | Changed | +| `--action-hover-light` (`#e0eaff`) | `--background-active-status` | Changed | +| `--action-disabled` (`#b0b4bf`) | `--color-dap-gray-400` | Changed | ### System Status | Old Name | New Name | Status | | ----------------------------------------- | -------- | ------- | -| `--system-status-ok` (`#067a00`) | — | Removed | -| `--system-status-info` (`#005dcf`) | — | Removed | -| `--system-status-error` (`#d70a00`) | — | Removed | -| `--system-status-alert` (`#d04d07`) | — | Removed | -| `--system-status-in-progress` (`#1513da`) | — | Removed | -| `--system-status-pending` (`#8836d6`) | — | Removed | +| `--system-status-ok` (`#067a00`) | `--color-dap-data-green` | Changed | +| `--system-status-info` (`#005dcf`) | `--color-dap-blue-600` | Changed | +| `--system-status-error` (`#d70a00`) | `--background-error` | Changed | +| `--system-status-alert` (`#d04d07`) | `--color-dap-orange-600` | Changed | +| `--system-status-in-progress` (`#1513da`) | `--color-dap-blue-800` | Changed | +| `--system-status-pending` (`#8836d6`) | `--color-dap-data-deep-fuchsia` | Changed | ### Utility | Old Name | New Name | Status | | ----------------------------------- | -------- | ------- | -| `--utility-ok` (`#d6f5cf`) | — | Removed | -| `--utility-info` (`#c4dcff`) | — | Removed | -| `--utility-error` (`#ffd8d6`) | — | Removed | -| `--utility-alert` (`#ffeac0`) | — | Removed | -| `--utility-in-progress` (`#d9d9ff`) | — | Removed | -| `--utility-pending` (`#ede2ff`) | — | Removed | -| `--utility-disabled` (`#e3e3e3`) | — | Removed | +| `--utility-ok` (`#d6f5cf`) | `--color-dap-data-light-green` | Changed | +| `--utility-info` (`#c4dcff`) | `--color-dap-blue-200` | Changed | +| `--utility-error` (`#ffd8d6`) | `--color-dap-red-100` | Changed | +| `--utility-alert` (`#ffeac0`) | `--schema-light-amber` | Changed | +| `--utility-in-progress` (`#d9d9ff`) | `--schema-light-blue` | Changed | +| `--utility-pending` (`#ede2ff`) | `--background-pending` | Changed | +| `--utility-disabled` (`#e3e3e3`) | `--color-dap-gray-200` | Changed | ### Map / Scheme | Old Name | New Name | Status | | ---------------------------------------------------- | -------- | ------- | -| `--map-and-scheme-line-layer-0` (`#5452f6`) | — | Removed | -| `--map-and-scheme-line-layer-01` (`#cc4c5f`) | — | Removed | -| `--map-and-scheme-line-layer-02` (`#00894d`) | — | Removed | -| `--map-and-scheme-line-layer-1-optical` (`#3b8edb`) | — | Removed | -| `--map-and-scheme-line-layer-2-ethernet` (`#00b8d9`) | — | Removed | -| `--map-and-scheme-line-layer-3-routing` (`#9a55e0`) | — | Removed | -| `--map-and-scheme-service-overlay` (`#c30ede`) | — | Removed | -| `--map-and-scheme-pops-core-zones` (`#a92a00`) | — | Removed | -| `--map-and-scheme-line-optional-1` (`#da7b2d`) | — | Removed | +| `--map-and-scheme-line-layer-0` (`#5452f6`) | `--color-dap-purple-500` | Changed | +| `--map-and-scheme-line-layer-01` (`#cc4c5f`) | `--color-dap-data-rose` | Changed | +| `--map-and-scheme-line-layer-02` (`#00894d`) | `--color-dap-green-600` | Changed | +| `--map-and-scheme-line-layer-1-optical` (`#3b8edb`) | `--color-dap-blue-400` | Changed | +| `--map-and-scheme-line-layer-2-ethernet` (`#00b8d9`) | `--at-t-brand` | Changed | +| `--map-and-scheme-line-layer-3-routing` (`#9a55e0`) | `--color-dap-data-deep-fuchsia` | Changed | +| `--map-and-scheme-service-overlay` (`#c30ede`) | `--color-dap-data-fuchsia` | Changed | +| `--map-and-scheme-pops-core-zones` (`#a92a00`) | `--color-dap-orange-700` | Changed | +| `--map-and-scheme-line-optional-1` (`#da7b2d`) | `--color-dap-orange-400` | Changed | --- ## 14. Spacing -### Numeric scale (`_spacing.scss`) — Removed - -The whole `--spacing-*` numeric scale does not appear in `_root_updated.scss`. - -| Old Name | New Name | Status | -| ------------------------ | -------- | ------- | -| `--base-unit` | — | Removed | -| `--spacing-1` | — | Removed | -| `--spacing-2` | — | Removed | -| `--spacing-3` | — | Removed | -| `--spacing-4` | — | Removed | -| `--spacing-5` | — | Removed | -| `--spacing-6` | — | Removed | -| `--spacing-8` | — | Removed | -| `--spacing-10` | — | Removed | -| `--spacing-12` | — | Removed | -| `--spacing-16` | — | Removed | -| `--spacing-20` | — | Removed | -| `--spacing-24` | — | Removed | -| `--spacing-base` | — | Removed | -| `--exo-spacing-standard` | — | Removed | -| `--exo-spacing-small` | — | Removed | -| `--exo-spacing-x-small` | — | Removed | -| `--exo-spacing-2x-small` | — | Removed | -| `--exo-spacing-4x-small` | — | Removed | +### Numeric scale (`_spacing.scss`) — remapped to t-shirt sizes + +The whole `--spacing-*` numeric scale is gone; usages are remapped to the +named t-shirt scale below. Two values (`40px`, `1px`) have no t-shirt +equivalent and are inlined verbatim. + +| Old Name | New Name | Status | +| ------------------------ | ------------ | ------- | +| `--base-unit` | `--3xs` | Changed | +| `--spacing-1` | `--3xs` | Changed | +| `--spacing-2` | `--xs` | Changed | +| `--spacing-3` | `--sm` | Changed | +| `--spacing-4` | `--standard` | Changed | +| `--spacing-5` | `--md` | Changed | +| `--spacing-6` | `--lg` | Changed | +| `--spacing-8` | `--xl` | Changed | +| `--spacing-10` | — | Removed | +| `--spacing-12` | `--2xl` | Changed | +| `--spacing-16` | `--3xl` | Changed | +| `--spacing-20` | `--4xl` | Changed | +| `--spacing-24` | `--5xl` | Changed | +| `--spacing-base` | `--standard` | Changed | +| `--exo-spacing-standard` | `--standard` | Changed | +| `--exo-spacing-small` | `--sm` | Changed | +| `--exo-spacing-x-small` | `--xs` | Changed | +| `--exo-spacing-2x-small` | `--3xs` | Changed | +| `--exo-spacing-4x-small` | — | Removed | ### Named scale (T-shirt sizes) — renamed (prefix dropped) diff --git a/packages/design-system/src/styles/_kept-tokens.scss b/packages/design-system/src/styles/_kept-tokens.scss new file mode 100644 index 000000000..962303119 --- /dev/null +++ b/packages/design-system/src/styles/_kept-tokens.scss @@ -0,0 +1,30 @@ +// Tokens kept from the legacy `_root.scss` because the new token system +// (`_root_new.scss`) has no equivalent. They are staged here as a temporary +// home until they are moved next to the components that own them: +// +// - `--letter-spacing--1percent` → typography mixins +// - `--icon-width-*` → DsIcon +// - `--ds-table-row-*` / `--ds-table-header-height` → DsTable +// +// Originals still live in `_root.scss` for now to avoid a flag-day cutover — +// once relocated next to their components, the duplicates here and in +// `_root.scss` should both be removed. + +:root { + --letter-spacing--1percent: -0.01em; +} + +: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; +} diff --git a/packages/design-system/src/styles/mixins/_list.scss b/packages/design-system/src/styles/mixins/_list.scss index 81c6f7704..4539f1bba 100644 --- a/packages/design-system/src/styles/mixins/_list.scss +++ b/packages/design-system/src/styles/mixins/_list.scss @@ -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,11 +60,11 @@ } &::-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; } From e3ebb90eb4ab28712e56c3730116c4b3346040be Mon Sep 17 00:00:00 2001 From: Ihor Romanchuk Date: Wed, 6 May 2026 20:19:44 +0200 Subject: [PATCH 2/4] add changeset --- .changeset/polite-glasses-shine.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/polite-glasses-shine.md diff --git a/.changeset/polite-glasses-shine.md b/.changeset/polite-glasses-shine.md new file mode 100644 index 000000000..90c6e7ad1 --- /dev/null +++ b/.changeset/polite-glasses-shine.md @@ -0,0 +1,5 @@ +--- +'@drivenets/design-system': minor +--- + +Migrate DS codebase to new tokens From a1506e009ea4be8426da489b5ce9bef1226b609f Mon Sep 17 00:00:00 2001 From: Ihor Romanchuk Date: Wed, 6 May 2026 20:30:12 +0200 Subject: [PATCH 3/4] Move icon&table&typography specific tokens to corresponding components --- .../components/ds-icon/ds-icon.module.scss | 8 +++++ .../components/ds-table/ds-table.module.scss | 7 +++++ .../src/stories/token-migration.mdx | 23 -------------- .../src/styles/_kept-tokens.scss | 30 ------------------- packages/design-system/src/styles/_root.scss | 18 ----------- .../design-system/src/styles/_typography.scss | 4 +++ 6 files changed, 19 insertions(+), 71 deletions(-) delete mode 100644 packages/design-system/src/styles/_kept-tokens.scss diff --git a/packages/design-system/src/components/ds-icon/ds-icon.module.scss b/packages/design-system/src/components/ds-icon/ds-icon.module.scss index 583697085..bed377ba0 100644 --- a/packages/design-system/src/components/ds-icon/ds-icon.module.scss +++ b/packages/design-system/src/components/ds-icon/ds-icon.module.scss @@ -1,3 +1,11 @@ +:root { + --icon-width-extra-large: 32px; + --icon-width-large: 28px; + --icon-width-medium: 24px; + --icon-width-small: 20px; + --icon-width-tiny: 16px; +} + .icon { &.extra-large { font-size: var(--icon-width-extra-large); diff --git a/packages/design-system/src/components/ds-table/ds-table.module.scss b/packages/design-system/src/components/ds-table/ds-table.module.scss index 89fc8ba56..eed577967 100644 --- a/packages/design-system/src/components/ds-table/ds-table.module.scss +++ b/packages/design-system/src/components/ds-table/ds-table.module.scss @@ -2,6 +2,13 @@ @use '../../styles/utilities' as utils; @use './styles/variables' as vars; +:root { + --ds-table-row-small: 36px; + --ds-table-row-medium: 48px; + --ds-table-row-large: 64px; + --ds-table-header-height: 45px; +} + $bulk-actions-height: 60px; .container { diff --git a/packages/design-system/src/stories/token-migration.mdx b/packages/design-system/src/stories/token-migration.mdx index ffd04a19c..d4badf9ec 100644 --- a/packages/design-system/src/stories/token-migration.mdx +++ b/packages/design-system/src/stories/token-migration.mdx @@ -622,29 +622,6 @@ Unit changed from unitless integers to `px` across the scale. See the breaking-c | `--paragraph-spacing-sm` | `--body-paragraph-space-small` | Changed | | `--paragraph-spacing-xs` | `--body-paragraph-space-xs` | Changed | -### Removed (kept under `_kept-tokens.scss`, pending relocation to components) - -These tokens have no equivalent in `_root_new.scss` and are intentionally -preserved. Their definitions live in `packages/design-system/src/styles/_kept-tokens.scss` -and will be moved next to the components that own them -(`--letter-spacing--1percent` → typography mixins, `--icon-width-*` → DsIcon, -`--ds-table-row-*` / `--ds-table-header-height` → DsTable). - -| Old Name | New Name | Status | -| ---------------------------- | -------- | ------- | -| `--letter-spacing--1percent` | — | Removed | -| `--icon-width-extra-large` | — | Removed | -| `--icon-width-large` | — | Removed | -| `--icon-width-medium` | — | Removed | -| `--icon-width-small` | — | Removed | -| `--icon-width-tiny` | — | Removed | -| `--ds-table-row-small` | — | Removed | -| `--ds-table-row-medium` | — | Removed | -| `--ds-table-row-large` | — | Removed | -| `--ds-table-header-height` | — | Removed | - ---- - ## 12. Gradients and Markers (legacy `_root.scss` — absent from new file) | Old Name | New Name | Status | diff --git a/packages/design-system/src/styles/_kept-tokens.scss b/packages/design-system/src/styles/_kept-tokens.scss deleted file mode 100644 index 962303119..000000000 --- a/packages/design-system/src/styles/_kept-tokens.scss +++ /dev/null @@ -1,30 +0,0 @@ -// Tokens kept from the legacy `_root.scss` because the new token system -// (`_root_new.scss`) has no equivalent. They are staged here as a temporary -// home until they are moved next to the components that own them: -// -// - `--letter-spacing--1percent` → typography mixins -// - `--icon-width-*` → DsIcon -// - `--ds-table-row-*` / `--ds-table-header-height` → DsTable -// -// Originals still live in `_root.scss` for now to avoid a flag-day cutover — -// once relocated next to their components, the duplicates here and in -// `_root.scss` should both be removed. - -:root { - --letter-spacing--1percent: -0.01em; -} - -: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; -} diff --git a/packages/design-system/src/styles/_root.scss b/packages/design-system/src/styles/_root.scss index 021cba1a2..6164e84cc 100644 --- a/packages/design-system/src/styles/_root.scss +++ b/packages/design-system/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; } diff --git a/packages/design-system/src/styles/_typography.scss b/packages/design-system/src/styles/_typography.scss index 2515edbb9..7b0f4455c 100644 --- a/packages/design-system/src/styles/_typography.scss +++ b/packages/design-system/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; From 0c143f89c53d2f036051acddd147719ab5a8dd48 Mon Sep 17 00:00:00 2001 From: Ihor Romanchuk Date: Thu, 7 May 2026 12:00:40 +0200 Subject: [PATCH 4/4] Update token-migration.mdx --- .../src/stories/token-migration.mdx | 238 ++++++++++++------ 1 file changed, 166 insertions(+), 72 deletions(-) diff --git a/packages/design-system/src/stories/token-migration.mdx b/packages/design-system/src/stories/token-migration.mdx index d4badf9ec..389e162df 100644 --- a/packages/design-system/src/stories/token-migration.mdx +++ b/packages/design-system/src/stories/token-migration.mdx @@ -12,12 +12,12 @@ Shows the mapping of old tokens to new tokens. ## Legend -| Status | Meaning | Migration strategy | -| ------- | ------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -| Renamed | Same resolved value; name changed (trivially shortened, semantically renamed, or numeric key remapped) | Find & replace; no testing is required | -| Changed | Same logical token but resolved value differs | Find & replace; visual testing is required | -| New | No old equivalent | | -| Removed | Old token with no new equivalent | Either keep old token or find the nearest equivalent | +| Status | Meaning | Migration strategy | +| ------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Renamed | Same resolved value; name changed (trivially shortened, semantically renamed, or numeric key remapped) | Find & replace; no testing is required | +| Changed | Resolved value differs | Find & replace; visual testing is required | +| New | No old equivalent | | +| Removed | Old token with no new equivalent | The **New Name** column holds a literal CSS value that the script substitutes verbatim, unwrapping any `var(--token)` so the resulting CSS stays valid | --- @@ -467,14 +467,14 @@ Shows the mapping of old tokens to new tokens. ### Status -| Old Name | New Name | Status | -| ---------------------------- | ---------------------- | ------- | -| `--color-status-bg-inactive` | `--status-bg-inactive` | Renamed | -| `--color-status-bg-neutral` | `--status-bg-neutral` | Renamed | -| `--color-status-bg-pending` | `--status-bg-pending` | Renamed | -| `--color-status-bg-progress` | `--status-bg-progress` | Renamed | -| `--color-status-bg-success` | `--status-bg-success` | Changed | -| `--color-status-bg-warning` | `--status-bg-warning` | Renamed | +| Old Name | New Name | Status | +| ---------------------------- | ------------------------------------ | ------- | +| `--color-status-bg-inactive` | `--status-bg-inactive` | Renamed | +| `--color-status-bg-neutral` | `--status-bg-neutral` | Renamed | +| `--color-status-bg-pending` | `--status-bg-pending` | Renamed | +| `--color-status-bg-progress` | `--status-bg-progress` | Renamed | +| `--color-status-bg-success` | `--status-bg-success` | Changed | +| `--color-status-bg-warning` | `--status-bg-warning` | Renamed | | `--color-status-bg-failed` | `--background-error-secondary-hover` | Changed | --- @@ -624,16 +624,16 @@ Unit changed from unitless integers to `px` across the scale. See the breaking-c ## 12. Gradients and Markers (legacy `_root.scss` — absent from new file) -| Old Name | New Name | Status | -| ------------------------------------- | -------- | ------- | -| `--color-gradient-violet-background` | — | Removed | -| `--color-gradient-violet-transparent` | — | Removed | -| `--color-gradient-blue-light` | — | Removed | -| `--color-gradient-linear-1` | — | Removed | -| `--color-marker-magenta-12` | — | Removed | -| `--color-marker-magenta-60` | — | Removed | -| `--color-marker-magenta-100` | — | Removed | -| `--color-marker-yellow-100` | `--color-dap-data-yellow` | Changed | +| Old Name | New Name | Status | +| ------------------------------------- | -------------------------------------------------------------------------------- | ------- | +| `--color-gradient-violet-background` | `linear-gradient(90deg, #001b48 -0.12%, #312e81 99.86%)` | Removed | +| `--color-gradient-violet-transparent` | `linear-gradient(180deg, rgba(30, 89, 215, 0.4) 0%, rgba(0, 27, 72, 0.16) 100%)` | Removed | +| `--color-gradient-blue-light` | `linear-gradient(116deg, #e9eefc 22.81%, #d6e2ff 99.14%)` | Removed | +| `--color-gradient-linear-1` | `linear-gradient(90deg, #014afb 0%, #152a7e 100%)` | Removed | +| `--color-marker-magenta-12` | `rgba(255, 0, 183, 0.12)` | Removed | +| `--color-marker-magenta-60` | `rgba(255, 0, 183, 0.6)` | Removed | +| `--color-marker-magenta-100` | `rgba(255, 0, 183)` | Removed | +| `--color-marker-yellow-100` | `--color-dap-data-yellow` | Changed | --- @@ -651,11 +651,11 @@ These tokens come from the older `$colors` Sass map. Where the hex matches a new ### Gradient (Specials) -| Old Name | New Name | Status | -| ------------------------------- | -------- | ------- | -| `--gradient-violet-background` | — | Removed | -| `--gradient-violet-transparent` | — | Removed | -| `--gradient-blue-light` | — | Removed | +| Old Name | New Name | Status | +| ------------------------------- | -------------------------------------------------------------------------------- | ------- | +| `--gradient-violet-background` | `linear-gradient(90deg, #001b48 -0.12%, #312e81 99.86%)` | Removed | +| `--gradient-violet-transparent` | `linear-gradient(180deg, rgba(30, 89, 215, 0.4) 0%, rgba(0, 27, 72, 0.16) 100%)` | Removed | +| `--gradient-blue-light` | `linear-gradient(116deg, #e9eefc 22.81%, #d6e2ff 99.14%)` | Removed | ### Neutral @@ -675,8 +675,8 @@ These tokens come from the older `$colors` Sass map. Where the hex matches a new ### Action -| Old Name | New Name | Status | -| ----------------------------------- | -------- | ------- | +| Old Name | New Name | Status | +| ----------------------------------- | ---------------------------- | ------- | | `--action-cta1` (`#0064fa`) | `--color-dap-blue-600` | Changed | | `--action-cta2` (`#579aff`) | `--color-dap-blue-400` | Changed | | `--action-cta3` (`#6b7b8e`) | `--color-dap-brand-300` | Changed | @@ -686,19 +686,19 @@ These tokens come from the older `$colors` Sass map. Where the hex matches a new ### System Status -| Old Name | New Name | Status | -| ----------------------------------------- | -------- | ------- | -| `--system-status-ok` (`#067a00`) | `--color-dap-data-green` | Changed | -| `--system-status-info` (`#005dcf`) | `--color-dap-blue-600` | Changed | -| `--system-status-error` (`#d70a00`) | `--background-error` | Changed | -| `--system-status-alert` (`#d04d07`) | `--color-dap-orange-600` | Changed | -| `--system-status-in-progress` (`#1513da`) | `--color-dap-blue-800` | Changed | -| `--system-status-pending` (`#8836d6`) | `--color-dap-data-deep-fuchsia` | Changed | +| Old Name | New Name | Status | +| ----------------------------------------- | ------------------------------- | ------- | +| `--system-status-ok` (`#067a00`) | `--color-dap-data-green` | Changed | +| `--system-status-info` (`#005dcf`) | `--color-dap-blue-600` | Changed | +| `--system-status-error` (`#d70a00`) | `--background-error` | Changed | +| `--system-status-alert` (`#d04d07`) | `--color-dap-orange-600` | Changed | +| `--system-status-in-progress` (`#1513da`) | `--color-dap-blue-800` | Changed | +| `--system-status-pending` (`#8836d6`) | `--color-dap-data-deep-fuchsia` | Changed | ### Utility -| Old Name | New Name | Status | -| ----------------------------------- | -------- | ------- | +| Old Name | New Name | Status | +| ----------------------------------- | ------------------------------ | ------- | | `--utility-ok` (`#d6f5cf`) | `--color-dap-data-light-green` | Changed | | `--utility-info` (`#c4dcff`) | `--color-dap-blue-200` | Changed | | `--utility-error` (`#ffd8d6`) | `--color-dap-red-100` | Changed | @@ -709,8 +709,8 @@ These tokens come from the older `$colors` Sass map. Where the hex matches a new ### Map / Scheme -| Old Name | New Name | Status | -| ---------------------------------------------------- | -------- | ------- | +| Old Name | New Name | Status | +| ---------------------------------------------------- | ------------------------------- | ------- | | `--map-and-scheme-line-layer-0` (`#5452f6`) | `--color-dap-purple-500` | Changed | | `--map-and-scheme-line-layer-01` (`#cc4c5f`) | `--color-dap-data-rose` | Changed | | `--map-and-scheme-line-layer-02` (`#00894d`) | `--color-dap-green-600` | Changed | @@ -733,25 +733,25 @@ equivalent and are inlined verbatim. | Old Name | New Name | Status | | ------------------------ | ------------ | ------- | -| `--base-unit` | `--3xs` | Changed | -| `--spacing-1` | `--3xs` | Changed | -| `--spacing-2` | `--xs` | Changed | -| `--spacing-3` | `--sm` | Changed | -| `--spacing-4` | `--standard` | Changed | -| `--spacing-5` | `--md` | Changed | -| `--spacing-6` | `--lg` | Changed | -| `--spacing-8` | `--xl` | Changed | -| `--spacing-10` | — | Removed | -| `--spacing-12` | `--2xl` | Changed | -| `--spacing-16` | `--3xl` | Changed | +| `--base-unit` | `--3xs` | Renamed | +| `--spacing-1` | `--3xs` | Renamed | +| `--spacing-2` | `--xs` | Renamed | +| `--spacing-3` | `--sm` | Renamed | +| `--spacing-4` | `--standard` | Renamed | +| `--spacing-5` | `--md` | Renamed | +| `--spacing-6` | `--lg` | Renamed | +| `--spacing-8` | `--xl` | Renamed | +| `--spacing-10` | `40px` | Removed | +| `--spacing-12` | `--2xl` | Renamed | +| `--spacing-16` | `--3xl` | Renamed | | `--spacing-20` | `--4xl` | Changed | -| `--spacing-24` | `--5xl` | Changed | -| `--spacing-base` | `--standard` | Changed | -| `--exo-spacing-standard` | `--standard` | Changed | -| `--exo-spacing-small` | `--sm` | Changed | -| `--exo-spacing-x-small` | `--xs` | Changed | -| `--exo-spacing-2x-small` | `--3xs` | Changed | -| `--exo-spacing-4x-small` | — | Removed | +| `--spacing-24` | `--5xl` | Renamed | +| `--spacing-base` | `--standard` | Renamed | +| `--exo-spacing-standard` | `--standard` | Renamed | +| `--exo-spacing-small` | `--sm` | Renamed | +| `--exo-spacing-x-small` | `--xs` | Renamed | +| `--exo-spacing-2x-small` | `--3xs` | Renamed | +| `--exo-spacing-4x-small` | `1px` | Removed | ### Named scale (T-shirt sizes) — renamed (prefix dropped) @@ -776,14 +776,108 @@ equivalent and are inlined verbatim. ## Summary of value changes (breaking) -| Token | Old value | New value | -| -------------------------------------------------------- | ------------------------ | --------------------- | -| `--color-red-100` / `--negative-100` | `#f5c2bf` | `#ffd2cf` | -| `--background-success` / `--status-bg-success` | `#ecfdf6` (green-50) | `#d9f7e9` (green-075) | -| `--border-disabled` | `#e5e8ed` (brand-050) | `#c7c9cc` (gray-300) | -| `--border-error-weak` (was `--color-border-danger-weak`) | `#f5c2bf` | `#ffd2cf` | -| `--font-disabled` | `#8b98a6` (gray-500) | `#c7c9cc` (gray-300) | -| `--icon-error` (was `--color-icon-danger`) | `#d70a00` (red-400) | `#a10800` (red-500) | -| `--font-family-base` | `'Roboto', sans-serif` | `Roboto` | -| `--font-family-code` | `'Fira Mono', monospace` | `Fira Mono` | -| `--paragraph-spacing-*` → `--*-paragraph-space-*` | unitless (e.g. `8`) | px (e.g. `8px`) | +Every row tagged `Changed` in the tables above. Visual retesting is required wherever these tokens are consumed. + +### Primitive / Alias colors + +| Token (old → new) | Old value | New value | +| ----------------------------------------- | --------- | --------- | +| `--color-red-100` → `--color-dap-red-100` | `#f5c2bf` | `#ffd2cf` | +| `--color-negative-100` → `--negative-100` | `#f5c2bf` | `#ffd2cf` | + +### Semantic: Background / Border / Font / Icon / Status + +| Token (old → new) | Old value | New value | +| ----------------------------------------------------------------- | --------------------- | --------------------- | +| `--color-background-success` → `--background-success` | `#ecfdf6` (green-50) | `#d9f7e9` (green-075) | +| `--color-background-warning-weak` → `--color-dap-red-050` | `#ffedf0` (red-50) | `#ffedf0` (red-050) | +| `--color-border-disabled` → `--border-disabled` | `#e5e8ed` (brand-050) | `#c7c9cc` (gray-300) | +| `--color-border-danger-weak` → `--border-error-weak` | `#f5c2bf` (red-100) | `#ffd2cf` (red-100) | +| `--color-font-disabled` → `--font-disabled` | `#8b98a6` (gray-500) | `#c7c9cc` (gray-300) | +| `--color-icon-danger` → `--icon-error` | `#d70a00` (red-400) | `#a10800` (red-500) | +| `--color-status-bg-success` → `--status-bg-success` | `#ecfdf6` (green-50) | `#d9f7e9` (green-075) | +| `--color-status-bg-failed` → `--background-error-secondary-hover` | `#ffedf0` (red-50) | `#ffedf0` (red-050) | + +> `--color-background-warning-weak` and `--color-status-bg-failed` resolve to the same hex before and after, but their semantic role changed (no longer aliased through the deprecated `negative-050` / `background-danger-weak` chain). Listed here for completeness. + +### Typography + +| Token (old → new) | Old value | New value | +| ------------------------------------------------- | ------------------------ | --------------- | +| `--font-family-base` | `'Roboto', sans-serif` | `Roboto` | +| `--font-family-code` | `'Fira Mono', monospace` | `Fira Mono` | +| `--paragraph-spacing-*` → `--*-paragraph-space-*` | unitless (e.g. `8`) | px (e.g. `8px`) | + +### Markers (legacy `_root.scss`) + +| Token (old → new) | Old value | New value | +| ------------------------------------------------------- | --------- | --------- | +| `--color-marker-yellow-100` → `--color-dap-data-yellow` | `#fff500` | `#ffc107` | + +### Legacy `_colors.scss` — Neutrals + +| Token (old → new) | Old value | New value | +| --------------------------------------- | --------- | --------- | +| `--neutral-3` → `--color-dap-gray-500` | `#6c7b8e` | `#8b98a6` | +| `--neutral-5` → `--color-dap-gray-400` | `#a0aab7` | `#a5afba` | +| `--neutral-6` → `--color-dap-gray-400` | `#b3bfd1` | `#a5afba` | +| `--neutral-7` → `--color-dap-gray-300` | `#c2cedf` | `#c7c9cc` | +| `--neutral-8` → `--color-dap-gray-200` | `#dee6f1` | `#e5e8ed` | +| `--neutral-9` → `--color-dap-gray-200` | `#eaecef` | `#e5e8ed` | +| `--neutral-bg` → `--color-dap-gray-200` | `#dae2f4` | `#e5e8ed` | + +### Legacy `_colors.scss` — Action + +| Token (old → new) | Old value | New value | +| ----------------------------------------------------- | --------- | -------------------- | +| `--action-cta1` → `--color-dap-blue-600` | `#0064fa` | `#0661ff` | +| `--action-cta2` → `--color-dap-blue-400` | `#579aff` | `#48aaff` | +| `--action-cta3` → `--color-dap-brand-300` | `#6b7b8e` | `#667691` | +| `--action-active-light` → `--color-dap-purple-200` | `#c7d8ff` | `#c5d0f8` | +| `--action-hover-light` → `--background-active-status` | `#e0eaff` | `#e1efff` (blue-075) | +| `--action-disabled` → `--color-dap-gray-400` | `#b0b4bf` | `#a5afba` | + +### Legacy `_colors.scss` — System Status + +| Token (old → new) | Old value | New value | +| ----------------------------------------------------------- | --------- | ------------------- | +| `--system-status-ok` → `--color-dap-data-green` | `#067a00` | `#43a047` | +| `--system-status-info` → `--color-dap-blue-600` | `#005dcf` | `#0661ff` | +| `--system-status-error` → `--background-error` | `#d70a00` | `#d70a00` (red-400) | +| `--system-status-alert` → `--color-dap-orange-600` | `#d04d07` | `#c9510c` | +| `--system-status-in-progress` → `--color-dap-blue-800` | `#1513da` | `#083bc5` | +| `--system-status-pending` → `--color-dap-data-deep-fuchsia` | `#8836d6` | `#9c27b0` | + +> `--system-status-error` resolves to the same hex before and after; flagged `Changed` because the role moved from a primitive to the semantic `--background-error`. + +### Legacy `_colors.scss` — Utility + +| Token (old → new) | Old value | New value | +| ----------------------------------------------- | --------- | --------- | +| `--utility-ok` → `--color-dap-data-light-green` | `#d6f5cf` | `#d9ecda` | +| `--utility-info` → `--color-dap-blue-200` | `#c4dcff` | `#b5ddff` | +| `--utility-error` → `--color-dap-red-100` | `#ffd8d6` | `#ffd2cf` | +| `--utility-alert` → `--schema-light-amber` | `#ffeac0` | `#ffeacc` | +| `--utility-in-progress` → `--schema-light-blue` | `#d9d9ff` | `#d7daf7` | +| `--utility-pending` → `--background-pending` | `#ede2ff` | `#e6e9fb` | +| `--utility-disabled` → `--color-dap-gray-200` | `#e3e3e3` | `#e5e8ed` | + +### Legacy `_colors.scss` — Map / Scheme + +| Token (old → new) | Old value | New value | +| ------------------------------------------------------------------------- | --------- | --------- | +| `--map-and-scheme-line-layer-0` → `--color-dap-purple-500` | `#5452f6` | `#4a61e3` | +| `--map-and-scheme-line-layer-01` → `--color-dap-data-rose` | `#cc4c5f` | `#d81b60` | +| `--map-and-scheme-line-layer-02` → `--color-dap-green-600` | `#00894d` | `#028764` | +| `--map-and-scheme-line-layer-1-optical` → `--color-dap-blue-400` | `#3b8edb` | `#48aaff` | +| `--map-and-scheme-line-layer-2-ethernet` → `--at-t-brand` | `#00b8d9` | `#00a8e0` | +| `--map-and-scheme-line-layer-3-routing` → `--color-dap-data-deep-fuchsia` | `#9a55e0` | `#9c27b0` | +| `--map-and-scheme-service-overlay` → `--color-dap-data-fuchsia` | `#c30ede` | `#d602ee` | +| `--map-and-scheme-pops-core-zones` → `--color-dap-orange-700` | `#a92a00` | `#9a3412` | +| `--map-and-scheme-line-optional-1` → `--color-dap-orange-400` | `#da7b2d` | `#fc9947` | + +### Spacing (numeric → t-shirt) + +| Token (old → new) | Old value | New value | Δ | +| ------------------------ | --------- | --------- | -------- | +| `--spacing-20` → `--4xl` | `80px` | `72px` | **−8px** |