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

packages/web/src/scss/components/UNSTABLE_Avatar/_UNSTABLE_Avatar.scss

@@ -1,10 +1,13 @@
 @use 'theme';
+@use '../../settings/globals';
 @use '../../tools/dictionaries';
 
 .UNSTABLE_Avatar {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: var(--#{globals.$prefix}avatar-width);
+    height: var(--#{globals.$prefix}avatar-height);
     overflow: hidden;
     text-decoration: none;
     color: theme.$color;

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

@@ -1,38 +1,38 @@
-@use '@tokens' as tokens;
-@use '../../settings/dictionaries';
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$color: tokens.$text-secondary-default;
-$border-width: tokens.$border-width-100;
-$border-style: tokens.$border-style-100;
-$border-color: tokens.$border-secondary-default;
-$border-radius: 50%;
-$border-radius-square: tokens.$radius-100;
-$background-color: tokens.$background-cover;
+$color: var(--#{globals.$prefix}color-text-secondary);
+$border-width: global-tokens.$border-width-100;
+$border-style: solid;
+$border-color: var(--#{globals.$prefix}color-border-secondary-default);
+$border-radius: global-tokens.$radius-full;
+$border-radius-square: global-tokens.$radius-200;
+$background-color: var(--#{globals.$prefix}color-background-secondary);
 
 $sizes: (
     xsmall: (
-        width: tokens.$space-700,
-        height: tokens.$space-700,
-        typography: tokens.$body-xsmall-text-bold,
+        width: global-tokens.$space-900,
+        height: global-tokens.$space-900,
+        typography: global-tokens.$body-xsmall-bold,
     ),
     small: (
-        width: tokens.$space-800,
-        height: tokens.$space-800,
-        typography: tokens.$body-small-text-bold,
+        width: global-tokens.$space-1000,
+        height: global-tokens.$space-1000,
+        typography: global-tokens.$body-small-bold,
     ),
     medium: (
-        width: tokens.$space-900,
-        height: tokens.$space-900,
-        typography: tokens.$body-medium-text-bold,
+        width: global-tokens.$space-1100,
+        height: global-tokens.$space-1100,
+        typography: global-tokens.$body-medium-bold,
     ),
     large: (
-        width: tokens.$space-1000,
-        height: tokens.$space-1000,
-        typography: tokens.$body-large-text-bold,
+        width: global-tokens.$space-1200,
+        height: global-tokens.$space-1200,
+        typography: global-tokens.$body-large-bold,
     ),
     xlarge: (
-        width: tokens.$space-1100,
-        height: tokens.$space-1100,
-        typography: tokens.$body-xlarge-text-bold,
+        width: global-tokens.$space-1400,
+        height: global-tokens.$space-1400,
+        typography: global-tokens.$body-xlarge-bold,
     ),
 );

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

@@ -4,7 +4,7 @@
   <h2 class="docs-Heading">Icon</h2>
 
   <div class="docs-Stack docs-Stack--start">
-    <div class="d-flex" style="gap: var(--spirit-space-400)">
+    <div class="d-flex" style="gap: var(--spirit-space-500)">
 
       {{#each @root.sizes as |size|}}
         {{setVar "iconSize" "24"}}
@@ -30,7 +30,7 @@ <h2 class="docs-Heading">Icon</h2>
       {{/each}}
 
     </div>
-    <div class="d-flex" style="gap: var(--spirit-space-400)">
+    <div class="d-flex" style="gap: var(--spirit-space-500)">
 
       {{#each @root.sizes as |size|}}
       {{setVar "iconSize" "24"}}
@@ -63,7 +63,7 @@ <h2 class="docs-Heading">Icon</h2>
   <h2 class="docs-Heading">Text</h2>
 
   <div class="docs-Stack docs-Stack--start">
-    <div class="d-flex" style="gap: var(--spirit-space-400)">
+    <div class="d-flex" style="gap: var(--spirit-space-500)">
 
       {{#each @root.sizes as |size|}}
 
@@ -74,7 +74,7 @@ <h2 class="docs-Heading">Text</h2>
       {{/each}}
 
     </div>
-    <div class="d-flex" style="gap: var(--spirit-space-400)">
+    <div class="d-flex" style="gap: var(--spirit-space-500)">
 
       {{#each @root.sizes as |size|}}
 
@@ -92,7 +92,7 @@ <h2 class="docs-Heading">Text</h2>
   <h2 class="docs-Heading">Image</h2>
 
   <div class="docs-Stack docs-Stack--start">
-    <div class="d-flex" style="gap: var(--spirit-space-400)">
+    <div class="d-flex" style="gap: var(--spirit-space-500)">
 
       {{#each @root.sizes as |size|}}
 
@@ -103,7 +103,7 @@ <h2 class="docs-Heading">Image</h2>
       {{/each}}
 
     </div>
-    <div class="d-flex" style="gap: var(--spirit-space-400)">
+    <div class="d-flex" style="gap: var(--spirit-space-500)">
 
       {{#each @root.sizes as |size|}}
 

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

@@ -32,8 +32,7 @@
 // @forward 'Toast';
 // @forward 'Tooltip';
 @forward 'UNSTABLE_ActionLayout';
-
-// @forward 'UNSTABLE_Avatar';
+@forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';
 @forward 'UNSTABLE_PartnerLogo';
 @forward 'UNSTABLE_ProductLogo';

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

@@ -12,8 +12,7 @@
 @use './placement';
 @use './reset';
 @use './string' as spirit-string;
-
-// @use './typography';
+@use './typography';
 
 // // Function to get the tokens map from the dictionary value name
 // // Example: -get-color-dictionary-tokens('primary') will return tokens.$action-colors
@@ -279,7 +278,11 @@
             );
 
             @each $variable-key, $variable-value in $variables {
-                --#{globals.$prefix}#{$component-infix}-#{$variable-key}: #{$variable-value};
+                @if $variable-key == 'typography' {
+                    @include typography.generate($variable-value);
+                } @else {
+                    --#{globals.$prefix}#{$component-infix}-#{$variable-key}: #{$variable-value};
+                }
             }
         }
     }

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

@@ -35,7 +35,6 @@ const IGNORED_TESTS: string[] = [
   'Toast',
   'Tooltip',
   'UNSTABLE_ActionLayout',
-  'UNSTABLE_Avatar',
   'UNSTABLE_EmptyState',
   'UNSTABLE_Section',
   'UNSTABLE_Slider',