Feat(web): Switch Accordion component to v3 design tokens #DS-1451

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

@@ -1,16 +1,17 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$accordion-item-background-color-default: tokens.$background-interactive-default;
-$accordion-item-background-color-hover: tokens.$background-interactive-hover;
-$accordion-item-background-color-active: tokens.$background-interactive-active;
-$accordion-header-typography: tokens.$body-medium-text-regular;
-$accordion-header-typography-active: tokens.$body-medium-text-bold;
-$accordion-header-typography-color: tokens.$text-primary-default;
-$accordion-header-gap: tokens.$space-500;
-$accordion-header-padding-y: tokens.$space-700;
-$accordion-header-padding-x: tokens.$space-600;
-$accordion-border-radius: tokens.$radius-100;
-$accordion-divider-color: tokens.$action-tertiary-default;
-$accordion-divider-width: tokens.$border-width-100;
-$accordion-divider-style: tokens.$border-style-100;
-$accordion-content-padding-bottom: tokens.$space-600;
+$accordion-item-background-color-default: var(--#{globals.$prefix}color-background-interactive-default);
+$accordion-item-background-color-hover: var(--#{globals.$prefix}color-background-interactive-hover);
+$accordion-item-background-color-active: var(--#{globals.$prefix}color-background-interactive-active);
+$accordion-header-typography: global-tokens.$body-3-regular;
+$accordion-header-typography-active: global-tokens.$body-3-bold;
+$accordion-header-typography-color: var(--#{globals.$prefix}color-text-primary);
+$accordion-header-gap: global-tokens.$space-600;
+$accordion-header-padding-y: global-tokens.$space-900;
+$accordion-header-padding-x: global-tokens.$space-700;
+$accordion-border-radius: global-tokens.$radius-200;
+$accordion-divider-color: var(--#{globals.$prefix}color-border-secondary-default);
+$accordion-divider-width: global-tokens.$border-width-100;
+$accordion-divider-style: solid;
+$accordion-content-padding-bottom: global-tokens.$space-700;

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

@@ -1,5 +1,6 @@
 // This code is commented out until we switch it to the new token system
-// @forward 'Accordion';
+@forward 'Accordion';
+
 // @forward 'Alert';
 @forward 'Breadcrumbs';