Feat(web): Switch Dropdown component to v3 design tokens #DS-1450

packages/web/src/scss/components/Dropdown/_DropdownPopover.scss

@@ -2,7 +2,7 @@
 @use '../../tools/breakpoint';
 @use '../../tools/dictionaries';
 @use '../../tools/placement';
-@use 'theme' as theme;
+@use 'theme';
 
 .DropdownPopover {
     @include placement.child();

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

@@ -1,10 +1,11 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../settings/dictionaries';
+@use '../../settings/globals';
 
-$breakpoints: tokens.$breakpoints;
-$offset: tokens.$space-400;
-$padding: tokens.$space-600;
-$border-radius: tokens.$radius-200;
-$background: tokens.$background-basic;
-$shadow: tokens.$shadow-200;
+$breakpoints: global-tokens.$breakpoints;
+$offset: global-tokens.$space-500;
+$padding: global-tokens.$space-700;
+$border-radius: global-tokens.$radius-300;
+$background: var(--#{globals.$prefix}color-background-primary);
+$shadow: global-tokens.$shadow-200;
 $placement-dictionary: dictionaries.$placement;

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

@@ -8,8 +8,8 @@
 @forward 'Collapse';
 @forward 'Container';
 @forward 'Divider';
+@forward 'Dropdown';
 
-// @forward 'Dropdown';
 // @forward 'FieldGroup';
 // @forward 'FileUploader';
 @forward 'Flex';