chore: update legacy presence cutout mdv2 (#1826)

web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.14.21",
+  "version": "2.14.22",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
@@ -58,9 +58,9 @@
     "@interactjs/interact": "1.10.3",
     "@interactjs/modifiers": "1.10.3",
     "@interactjs/utils": "1.10.3",
-    "@momentum-design/brand-visuals": "0.1.1",
+    "@momentum-design/brand-visuals": "0.1.2",
     "@momentum-design/icons": "0.2.1",
-    "@momentum-design/tokens": "0.2.2",
+    "@momentum-design/tokens": "0.2.6",
     "@popperjs/core": "^2.11.8",
     "country-codes-list": "1.6.8",
     "country-flags-svg": "1.1.4",

web-components/src/components/avatar/Avatar.ts

@@ -95,8 +95,7 @@ export namespace Avatar {
       return {
         "md-decrypting": this.decrypting,
         [`md-avatar--${this.color}`]: this.color,
-        "new-momentum": this.newMomentum,
-        "has-color": !!this.color
+        "new-momentum": this.newMomentum
       };
     }
 

web-components/src/components/avatar/scss/avatar.scss

@@ -81,14 +81,9 @@
   }
 
   .md-avatar__letter {
-    @include avatar-contents-base;
-    background-color: $avatar-legacy-letter__background;
-    color: $avatar-legacy-letter__color;
-
-    &.new-momentum {
-      background-color: $avatar-letter__background;
-      color: $avatar-letter__color;
-    }
+    @include avatar-contents-base;       
+    background-color: $avatar-letter__background;
+    color: $avatar-letter__color;
 
     md-loading {
       align-items: center;
@@ -189,10 +184,6 @@
     &.md-avatar--lime {
       background-color: var(--avatar-lime-bg-color);
     }
-
-    &.has-color {
-      color: $avatar-letter__color-text-color;
-    }
   }
 
   .md-avatar__img--hidden {

web-components/src/components/avatar/scss/settings.scss

@@ -29,37 +29,32 @@ $avatar-sizes: (xsmall, $icon-dnd_8, $icon-pto_8, $icon-handset_8, $icon-camera_
 
 $avatar--active__shadow:
   inset 0 0 0 rem-calc(1) var(--avatar-presence-active, $md-green-50),
-  inset 0 0 0 rem-calc(2) $white-24;
+  inset 0 0 0 rem-calc(2) var(--avatar-presence-cutout-bg-color, $white-24);
 $avatar--active__shadow--dark:
   inset 0 0 0 rem-calc(1) var(--avatar-presence-active, $md-green-50),
-  inset 0 0 0 rem-calc(2) $black-24;
+  inset 0 0 0 rem-calc(2) var(--avatar-presence-cutout-bg-color, $black-24);
 $avatar--engaged__shadow:
   inset 0 0 0 rem-calc(1) var(--avatar-presence-engaged, $md-yellow-40),
-  inset 0 0 0 rem-calc(2) $white-24;
+  inset 0 0 0 rem-calc(2) var(--avatar-presence-cutout-bg-color, $white-24);
 $avatar--engaged__shadow--dark:
   inset 0 0 0 rem-calc(1) var(--avatar-presence-engaged, $md-yellow-40),
-  inset 0 0 0 rem-calc(2) $black-24;
+  inset 0 0 0 rem-calc(2) var(--avatar-presence-cutout-bg-color, $black-24);
 $avatar--idle__shadow:
   inset 0 0 0 rem-calc(1) var(--avatar-presence-inactive, $md-gray-30),
-  inset 0 0 0 rem-calc(2) $white-24;
+  inset 0 0 0 rem-calc(2) var(--avatar-presence-cutout-bg-color, $white-24);
 $avatar--idle__shadow--dark:
   inset 0 0 0 rem-calc(1) var(--avatar-presence-inactive, $md-gray-30),
-  inset 0 0 0 rem-calc(2) $black-24;
+  inset 0 0 0 rem-calc(2) var(--avatar-presence-cutout-bg-color, $black-24);
 $avatar--rona__shadow:
   inset 0 0 0 rem-calc(1) var(--avatar-presence-rona, $md-red-60),
-  inset 0 0 0 rem-calc(2) $white-24;
+  inset 0 0 0 rem-calc(2) var(--avatar-presence-cutout-bg-color, $white-24);
 $avatar--rona__shadow--dark:
   inset 0 0 0 rem-calc(1) var(--avatar-presence-rona, $md-red-60),
-  inset 0 0 0 rem-calc(2) $black-24;
+  inset 0 0 0 rem-calc(2) var(--avatar-presence-cutout-bg-color, $black-24);
 
 $avatar-letter__color: var(--avatar-letter-text-color);
 $avatar-letter__background: var(--avatar-letter-bg-color);
 
-$avatar-legacy-letter__color: var(--avatar-letter-legacy-text-color, var(--avatar-letter-text-color));
-$avatar-legacy-letter__background: var(--avatar-letter-legacy-bg-color, var(--avatar-letter-bg-color));
-
-$avatar-letter__color-text-color: var(--avatar-letter-color-avatar-text-color, --avatar-letter-text-color);
-
 $avatar-icon__color: var(--avatar-icon-icon-color, $black-80);
 $avatar-icon__background: $gray-5-88;
 

web-components/src/components/avatar/tokens/mdv2-avatar-tokens.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
 
 const avatar = {
   prefix: "mdv2",
@@ -11,17 +10,6 @@ const avatar = {
     },
     "text-color": {
       common: "$mds-color-theme-common-text-primary-normal"
-    },
-    "legacy-bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[80].name
-    },
-    "legacy-text-color": {
-      light: colors.gray[90].name,
-      dark: colors.gray[10].name
-    },
-    "color-avatar-text-color": {
-      common: "$mds-color-theme-common-text-primary-normal"
     }
   },
   icon: {
@@ -164,6 +152,9 @@ const avatar = {
     }
   },
   presence: {
+    "cutout-bg-color": {
+      common: "$mds-color-theme-background-solid-primary-normal"
+    },
     active: {
       common: "$mds-color-theme-indicator-stable"
     },