Feat(web): Switch Tabs to v3 design tokens #DS-1444

packages/web/src/scss/components/Tabs/_Tabs.scss

@@ -49,27 +49,30 @@
     @include typography.generate(theme.$item-typography);
 
     padding-block: theme.$link-padding-y;
-    color: theme.$link-color;
+    color: theme.$link-color-default;
+
+    &:hover {
+        text-decoration: none;
+        color: theme.$link-color-hover;
+    }
 
-    &:hover,
     &:active {
         text-decoration: none;
-        color: theme.$link-color;
+        color: theme.$link-color-active;
     }
 }
 
 .Tabs__link.is-selected {
-    @include typography.generate(theme.$item-selected-typography);
-
     position: relative;
+    color: theme.$link-color-selected;
 
     &::after {
         content: '';
         position: absolute;
         bottom: 0;
         height: 2px;
         border-radius: theme.$item-selected-underline-border-radius;
-        background: theme.$item-selected-underline-background;
+        background: currentcolor;
         inset-inline: 0;
     }
 }

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

@@ -1,11 +1,13 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$breakpoints: tokens.$breakpoints;
-$item-padding-x: tokens.$space-600;
-$link-padding-y: tokens.$space-400;
-$link-color: tokens.$text-primary-default;
-$spacing-fallback: tokens.$space-700;
-$item-typography: tokens.$body-medium-text-regular;
-$item-selected-typography: tokens.$body-medium-text-bold;
-$item-selected-underline-background: tokens.$action-selected-default;
-$item-selected-underline-border-radius: tokens.$radius-100;
+$breakpoints: global-tokens.$breakpoints;
+$item-padding-x: global-tokens.$space-700;
+$link-padding-y: global-tokens.$space-500;
+$link-color-default: var(--#{globals.$prefix}color-action-link-secondary-default);
+$link-color-hover: var(--#{globals.$prefix}color-action-link-secondary-hover);
+$link-color-active: var(--#{globals.$prefix}color-action-link-secondary-active);
+$link-color-selected: $link-color-active;
+$spacing-fallback: global-tokens.$space-900;
+$item-typography: global-tokens.$body-3-semibold;
+$item-selected-underline-border-radius: global-tokens.$radius-100;

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

@@ -23,8 +23,8 @@
 // @forward 'ScrollView';
 // @forward 'Select';
 @forward 'Stack';
+@forward 'Tabs';
 
-// @forward 'Tabs';
 // @forward 'Tag';
 // @forward 'TextArea';
 // @forward 'TextField';

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

@@ -30,7 +30,6 @@ const IGNORED_TESTS: string[] = [
   'Select',
   'Spinner',
   'Stack',
-  'Tabs',
   'Tag',
   'Text',
   'TextArea',