Feat(web): Switch Modal component to v3 design tokens #DS-1452

packages/web/src/scss/components/Modal/_theme.scss

@@ -1,29 +1,30 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 @use '../../settings/transitions';
 
-$breakpoints: tokens.$breakpoints;
-$padding-x: tokens.$space-700;
-$padding-x-tablet: tokens.$space-1100;
-$padding-y: tokens.$space-600;
-$typography: tokens.$body-medium-text-regular;
+$breakpoints: global-tokens.$breakpoints;
+$padding-x: global-tokens.$space-900;
+$padding-x-tablet: global-tokens.$space-1400;
+$padding-y: global-tokens.$space-700;
+$typography: global-tokens.$body-medium-regular;
 $transition-duration: transitions.$duration-200;
 $transition-scale-ratio: transitions.$scale-ratio-large-objects;
 $transition-shift-distance: transitions.$shift-distance-medium;
 
-$backdrop-background-color: tokens.$background-backdrop;
+$backdrop-background-color: var(--#{globals.$prefix}color-background-backdrop);
 
-$common-padding-x: tokens.$space-700;
-$common-padding-x-tablet: tokens.$space-800;
+$common-padding-x: global-tokens.$space-900;
+$common-padding-x-tablet: global-tokens.$space-1000;
 
 // ModalDialog
 $dialog-width: 640px;
 $dialog-width-desktop: 680px;
 $dialog-height: auto;
 $dialog-max-height: none;
-$dialog-text-color: tokens.$text-primary-default;
-$dialog-border-radius: tokens.$radius-200;
-$dialog-background-color: tokens.$background-basic;
-$dialog-shadow: tokens.$shadow-300;
+$dialog-text-color: var(--#{globals.$prefix}color-text-primary);
+$dialog-border-radius: global-tokens.$radius-300;
+$dialog-background-color: var(--#{globals.$prefix}color-background-primary);
+$dialog-shadow: global-tokens.$shadow-300;
 
 $_dialog-scrollable-default-height: min-content;
 $_dialog-scrollable-default-max-height: 600px;
@@ -54,30 +55,30 @@ $dialog-scrollable-max-height-desktop: min(
 );
 
 $dialog-docked-width: 100%;
-$dialog-docked-margin-top: tokens.$space-1100;
+$dialog-docked-margin-top: global-tokens.$space-1400;
 
 $dialog-docked-expanded-min-height: calc(100dvh - #{$dialog-docked-margin-top});
 
 $dialog-docked-scrollable-height: var(--modal-dialog-height, #{$_dialog-scrollable-default-height});
 $dialog-docked-scrollable-max-height: $dialog-docked-expanded-min-height;
 
 // ModalHeader
-$header-gap: tokens.$space-400;
-$header-padding-top: tokens.$space-700;
-$header-padding-top-tablet: tokens.$space-800;
-$header-padding-bottom: tokens.$space-600;
-$header-title-typography: tokens.$heading-small-text;
+$header-gap: global-tokens.$space-500;
+$header-padding-top: global-tokens.$space-900;
+$header-padding-top-tablet: global-tokens.$space-1000;
+$header-padding-bottom: global-tokens.$space-700;
+$header-title-typography: global-tokens.$headline-small-bold;
 
-$header-docked-padding-top: tokens.$space-800;
+$header-docked-padding-top: global-tokens.$space-1000;
 
 // ModalBody
-$body-padding-y: tokens.$space-600;
+$body-padding-y: global-tokens.$space-700;
 
 // ModalFooter
-$footer-gap: tokens.$space-600;
-$footer-padding-top: tokens.$space-700;
-$footer-padding-bottom: tokens.$space-700;
-$footer-padding-top-tablet: tokens.$space-600;
-$footer-padding-bottom-tablet: tokens.$space-800;
-$footer-actions-column-gap: tokens.$space-700;
-$footer-actions-row-gap: tokens.$space-600;
+$footer-gap: global-tokens.$space-700;
+$footer-padding-top: global-tokens.$space-900;
+$footer-padding-bottom: global-tokens.$space-900;
+$footer-padding-top-tablet: global-tokens.$space-700;
+$footer-padding-bottom-tablet: global-tokens.$space-1000;
+$footer-actions-column-gap: global-tokens.$space-900;
+$footer-actions-row-gap: global-tokens.$space-700;

packages/web/src/scss/components/index.scss

@@ -17,7 +17,7 @@
 
 // @forward 'Header';
 // @forward 'Item';
-// @forward 'Modal';
+@forward 'Modal';
 @forward 'Pagination';
 
 // @forward 'Pill';

tests/e2e/demo-components-compare.spec.ts

@@ -16,7 +16,6 @@ const IGNORED_TESTS: string[] = [
   'Icon',
   'Item',
   'Link',
-  'Modal',
   'Pill',
   'Radio',
   'Select',