Feat(web): Switch Tag component to v3 design tokens #DS-1445

packages/web/src/scss/components/Tag/_Tag.scss

@@ -1,33 +1,35 @@
 @use 'sass:map';
+@use '../../settings/globals';
 @use '../../tools/dictionaries';
 @use '../../tools/typography';
 @use 'theme';
 
 .Tag {
-    @include typography.generate(map.get(theme.$sizes, medium, typography));
-
     display: inline-block;
+    padding-inline: var(--#{globals.$prefix}tag-padding-x);
+    padding-block: var(--#{globals.$prefix}tag-padding-y);
     text-align: center;
+    color: var(--#{globals.$prefix}tag-color);
+    border-width: theme.$border-width;
+    border-style: theme.$border-style;
+    border-color: var(--#{globals.$prefix}tag-border-color);
     border-radius: theme.$border-radius;
+    background-color: var(--#{globals.$prefix}tag-background-color);
+}
+
+.Tag--subtle {
+    color: var(--#{globals.$prefix}tag-subtle-color);
+    background-color: var(--#{globals.$prefix}tag-subtle-background-color);
 }
 
-@include dictionaries.generate-sizes('Tag', theme.$sizes);
-@include dictionaries.generate-colors(
-    'Tag',
-    theme.$color-dictionary,
-    theme.$color-dictionary-config,
-    null,
-    theme.$color-dictionary-overrides
-);
 @include dictionaries.generate-colors(
-    'Tag--subtle.Tag',
-    theme.$color-dictionary,
-    theme.$subtle-color-dictionary-config,
-    null,
-    theme.$subtle-color-dictionary-overrides,
-    'tag-subtle'
+    $class-name: 'Tag',
+    $dictionary-values: theme.$color-dictionary,
+    $config: theme.$color-dictionary-config
 );
+@include dictionaries.generate-sizes('Tag', theme.$sizes);
 
 .Tag--subtle.Tag--xsmall {
+    border-color: transparent;
     background-color: transparent;
 }

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

@@ -1,60 +1,48 @@
 @use 'sass:list';
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../settings/dictionaries';
 
-$_tag-colors: neutral;
+$border-width: global-tokens.$border-width-100;
+$border-style: solid;
+$border-radius: global-tokens.$radius-300;
 
-$color-dictionary: list.join(dictionaries.$emotion-colors, $_tag-colors);
-
-$color-dictionary-config: (
-    color: tokens.$text-primary-inverted-default,
-    background-color: 'default',
-);
-
-$color-dictionary-overrides: (
-    neutral: (
-        background-color: tokens.$background-inverted,
-    ),
+$color-dictionary: (
+    emotion: dictionaries.$emotion-colors,
+    neutral: neutral,
 );
 
-$subtle-color-dictionary-config: (
-    color: 'default',
-    background-color: 'background',
-);
-
-$subtle-color-dictionary-overrides: (
-    neutral: (
-        color: tokens.$text-primary-default,
-        background-color: tokens.$background-cover,
-    ),
+$color-dictionary-config: (
+    color: 'content-subtle',
+    border-color: 'border-basic',
+    background-color: 'background-basic',
+    subtle-color: 'content-basic',
+    subtle-background-color: 'background-subtle',
 );
 
-$border-radius: tokens.$radius-100;
-
 $sizes: (
     xsmall: (
-        padding-x: tokens.$space-300,
-        padding-y: tokens.$space-0,
-        typography: tokens.$body-xsmall-text-bold,
+        padding-x: global-tokens.$space-500,
+        padding-y: global-tokens.$space-200,
+        typography: global-tokens.$body-xsmall-semibold,
     ),
     small: (
-        padding-x: tokens.$space-400,
-        padding-y: tokens.$space-200,
-        typography: tokens.$body-small-text-regular,
+        padding-x: global-tokens.$space-500,
+        padding-y: global-tokens.$space-300,
+        typography: global-tokens.$body-small-semibold,
     ),
     medium: (
-        padding-x: tokens.$space-400,
-        padding-y: tokens.$space-300,
-        typography: tokens.$body-medium-text-regular,
+        padding-x: global-tokens.$space-600,
+        padding-y: global-tokens.$space-400,
+        typography: global-tokens.$body-medium-semibold,
     ),
     large: (
-        padding-x: tokens.$space-500,
-        padding-y: tokens.$space-400,
-        typography: tokens.$body-large-text-regular,
+        padding-x: global-tokens.$space-700,
+        padding-y: global-tokens.$space-500,
+        typography: global-tokens.$body-large-semibold,
     ),
     xlarge: (
-        padding-x: tokens.$space-600,
-        padding-y: tokens.$space-400,
-        typography: tokens.$body-xlarge-text-regular,
+        padding-x: global-tokens.$space-700,
+        padding-y: global-tokens.$space-500,
+        typography: global-tokens.$body-xlarge-semibold,
     ),
 );

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

@@ -27,8 +27,8 @@
 // @forward 'Select';
 @forward 'Stack';
 @forward 'Tabs';
+@forward 'Tag';
 
-// @forward 'Tag';
 // @forward 'TextArea';
 // @forward 'TextField';
 // @forward 'Toast';

packages/web/src/scss/tools/_dictionaries.scss

@@ -47,8 +47,14 @@
         @each $dictionary-item-name, $dictionary-item-value in $dictionary-group-values {
             .#{$class-name}--#{$dictionary-item-name} {
                 @each $property-name, $property-value in $config {
+                    $color-group: if(
+                        $dictionary-group-name == $dictionary-item-name,
+                        $dictionary-group-name,
+                        #{$dictionary-group-name}-#{$dictionary-item-name}
+                    );
+
                     --#{globals.$prefix}#{$component-infix}-#{$property-name}: var(
-                        --#{globals.$prefix}color-#{$dictionary-group-name}-#{$dictionary-item-name}-#{$property-value}
+                        --#{globals.$prefix}color-#{$color-group}-#{$property-value}
                     );
                 }
             }

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

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