@momentum-ui/web-components 2.16.5 → 2.16.8

package/src/components/avatar/scss/composite-avatar.scss

@@ -0,0 +1,89 @@
+/** @component avatar */
+
+.md-composite-avatar {
+  display: inline-block;
+  position: relative;
+
+  ::slotted(md-avatar:nth-child(1)) {
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+
+  ::slotted(md-avatar:nth-child(2)) {
+    bottom: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  &.md-composite-avatar {
+    &--small,
+    &--28 {
+      @include avatar-size($composite-avatar--small__size);
+
+      .md-avatar {
+        @include avatar-size(
+          $composite-avatar--small__avatar-size,
+          $composite-avatar--small__avatar-font-size
+        );
+      }
+    }
+
+    &--medium,
+    &--40 {
+      @include avatar-size($composite-avatar--medium__size);
+
+      .md-avatar {
+        @include avatar-size(
+          $composite-avatar--medium__avatar-size,
+          $composite-avatar--medium__avatar-font-size
+        );
+      }
+    }
+
+    &--56 {
+      @include avatar-size($composite-avatar--56__size);
+
+      .md-avatar {
+        @include avatar-size(
+          $composite-avatar--56__avatar-size,
+          $composite-avatar--56__avatar-font-size
+        );
+      }
+    }
+
+    &--72 {
+      @include avatar-size($composite-avatar--72__size);
+
+      .md-avatar {
+        @include avatar-size(
+          $composite-avatar--72__avatar-size,
+          $composite-avatar--72__avatar-font-size
+        );
+      }
+    }
+
+    &--84 {
+      @include avatar-size($composite-avatar--84__size);
+
+      .md-avatar {
+        @include avatar-size(
+          $composite-avatar--84__avatar-size,
+          $composite-avatar--84__avatar-font-size
+        );
+      }
+    }
+
+    &--large,
+    &--135 {
+      @include composite-avatar-size($composite-avatar--large__size);
+
+      .md-avatar {
+        @include avatar-size(
+          $composite-avatar--large__avatar-size,
+          $composite-avatar--large__avatar-font-size
+        );
+      }
+    }
+  }
+}

package/src/components/avatar/scss/mixins.scss

@@ -0,0 +1,33 @@
+@mixin avatar-size($size: $avatar__size, $font-size: $avatar__font-size) {
+  font-size: ($size * $avatar__font-factor);
+  height: $size;
+  line-height: ($size * $avatar__line-height-factor);
+  width: $size;
+}
+
+@mixin avatar-contents-base() {
+  @include flex();
+
+  @include border-radius($global-rounded);
+  height: 100%;
+  width: 100%;
+}
+
+@mixin avatar-overlay-style(
+  $icon-color: $md-white-100,
+  $overlay-background: $black-40
+) {
+  @include avatar-contents-base();
+  background: $overlay-background;
+  color: $md-white-100;
+  font-family: $icon-font-name;
+  left: 0;
+
+  position: absolute;
+  top: 0;
+}
+
+@mixin composite-avatar-size($size: $composite-avatar--medium__size) {
+  height: $size;
+  width: $size;
+}

package/src/components/avatar/scss/module.scss

@@ -0,0 +1,18 @@
+@import "@/wc_scss/tools/functions/core";
+
+@import "~@momentum-ui/icons/scss/variables";
+
+@import "@/wc_scss/colors/settings-base.scss";
+@import "@/wc_scss/colors/settings-transparencies.scss";
+@import "@/wc_scss/settings/core.scss";
+@import "@/wc_scss/settings/z-index.scss";
+@import "@/wc_scss/typography/settings.scss";
+
+@import "@/wc_scss/tools/mixins/border-radius";
+@import "@/wc_scss/tools/mixins/flex";
+
+@import "settings";
+@import "mixins";
+@import "avatar";
+@import "composite-avatar";
+@import "presence";

package/src/components/avatar/scss/presence.scss

@@ -0,0 +1,50 @@
+.avatar-presence-wrapper {
+  position: absolute;
+  background-color: var(--md-primary-bg-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  bottom: -0.15rem;
+  right: -0.15rem;
+
+  &[data-icon-size="13.94"] {
+    width: 1.064375rem;
+    height: 1.064375rem;
+    bottom: -0.5px;
+    right: -0.5px;
+  }
+
+  &[data-icon-size="14"] {
+    width: 1.0625rem;
+    height: 1.0625rem;
+  }
+
+  &[data-icon-size="18.58"] {
+    width: 1.419375rem;
+    height: 1.419375rem;
+    bottom: -0.05rem;
+    right: -0.05rem;
+  }
+
+  &[data-icon-size="20.9"] {
+    width: 1.596875rem;
+    height: 1.596875rem;
+    bottom: 0rem;
+    right: 0rem;
+  }
+
+  &[data-icon-size="25.55"] {
+    width: 1.951875rem;
+    height: 1.951875rem;
+    bottom: 0rem;
+    right: 0rem;
+  }
+
+  &[data-icon-size="36"] {
+    width: 2.75rem;
+    height: 2.75rem;
+    bottom: 0rem;
+    right: 0rem;
+  }
+}

package/src/components/avatar/scss/settings.scss

@@ -0,0 +1,103 @@
+$avatar--inactive__opacity: var(--avatar-inactive-opacity);
+
+$avatar__font-size: rem-calc(14);
+$avatar__size: rem-calc(40);
+$avatar__font-factor: 0.35;
+$avatar__line-height-factor: 0.5;
+
+$avatar-sizes: (xsmall, $icon-dnd_8, $icon-pto_8, $icon-handset_8, $icon-camera_12, $icon-share-screen_8, 18),
+  (small, $icon-dnd_14, $icon-pto_14, $icon-handset_14, $icon-camera_16, $icon-share-screen_14, 28),
+  (medium, $icon-dnd_20, $icon-pto_20, $icon-handset_20, $icon-camera_20, $icon-share-screen_20, 40),
+  (large, $icon-dnd_28, $icon-pto_28, $icon-handset_28, $icon-camera_26, $icon-share-screen_28, 52),
+  (xlarge, $icon-dnd_40, $icon-pto_32, $icon-handset_40, $icon-camera_32, $icon-share-screen_36, 84),
+  (18, $icon-dnd_8, $icon-pto_8, $icon-handset_8, $icon-camera_12, $icon-share-screen_8),
+  (24, $icon-dnd_12, $icon-pto_12, $icon-handset_12, $icon-camera_12, $icon-share-screen_12),
+  (28, $icon-dnd_14, $icon-pto_14, $icon-handset_14, $icon-camera_16, $icon-share-screen_14),
+  (32, $icon-dnd_16, $icon-pto_16, $icon-handset_16, $icon-camera_16, $icon-share-screen_16),
+  (36, $icon-dnd_18, $icon-pto_18, $icon-handset_18, $icon-camera_18, $icon-share-screen_18),
+  (40, $icon-dnd_20, $icon-pto_20, $icon-handset_20, $icon-camera_20, $icon-share-screen_20),
+  (44, $icon-dnd_24, $icon-pto_24, $icon-handset_24, $icon-camera_24, $icon-share-screen_24),
+  (48, $icon-dnd_24, $icon-pto_24, $icon-handset_24, $icon-camera_24, $icon-share-screen_24),
+  (52, $icon-dnd_28, $icon-pto_28, $icon-handset_28, $icon-camera_26, $icon-share-screen_28),
+  (56, $icon-dnd_28, $icon-pto_28, $icon-handset_28, $icon-camera_26, $icon-share-screen_28),
+  (64, $icon-dnd_28, $icon-pto_28, $icon-handset_28, $icon-camera_26, $icon-share-screen_28),
+  (72, $icon-dnd_36, $icon-pto_32, $icon-handset_36, $icon-camera_32, $icon-share-screen_36),
+  (80, $icon-dnd_40, $icon-pto_32, $icon-handset_40, $icon-camera_32, $icon-share-screen_36),
+  (84, $icon-dnd_40, $icon-pto_32, $icon-handset_40, $icon-camera_32, $icon-share-screen_36),
+  (88, $icon-dnd_40, $icon-pto_32, $icon-handset_40, $icon-camera_32, $icon-share-screen_36),
+  (124, $icon-dnd_40, $icon-pto_32, $icon-handset_40, $icon-camera_32, $icon-share-screen_36);
+
+$avatar--active__shadow:
+  inset 0 0 0 rem-calc(1) var(--avatar-presence-active, $md-green-50),
+  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) 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) 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) 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) 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) 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) 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) 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-icon__color: var(--avatar-icon-icon-color, $black-80);
+$avatar-icon__background: $gray-5-88;
+
+$avatar-self__color: var(--avatar-self-icon-color, $md-theme-50);
+$avatar-self__background: var(--avatar-self-bg-color, $md-white-100);
+$avatar-self__border: 1px solid var(--avatar-self-border-color, $black-08);
+
+$avatar-img__background: $gray-5-88;
+
+$avatar-badge__spacing: 0.14em;
+
+$avatar-failure-badge__size: 0.85em;
+$avatar-failure-badge__font-size: 0.85em;
+$avatar-failure-badge__color: $md-red-50;
+$avatar-failure-badge__background: $md-red-10;
+
+$avatar-notification-badge__size: 0.66em;
+$avatar-notification-badge__color: var(--avatar-notificationBadge, $md-theme-50);
+
+$avatar-bot__border-radius: 0.571em;
+$avatar-bot__font-size: 0.571em;
+$avatar-bot__line-height: 1.25em;
+$avatar-bot__padding: 0.25em 0.75em;
+$avatar-bot__background: $md-gray-70;
+$avatar-bot__color: $md-white-100;
+
+$composite-avatar--small__size: rem-calc(28);
+$composite-avatar--medium__size: rem-calc(40);
+$composite-avatar--56__size: rem-calc(56);
+$composite-avatar--72__size: rem-calc(72);
+$composite-avatar--84__size: rem-calc(84);
+$composite-avatar--large__size: rem-calc(135);
+
+$composite-avatar--small__avatar-size: rem-calc(18);
+$composite-avatar--medium__avatar-size: rem-calc(26);
+$composite-avatar--56__avatar-size: rem-calc(34);
+$composite-avatar--72__avatar-size: rem-calc(42);
+$composite-avatar--84__avatar-size: rem-calc(52);
+$composite-avatar--large__avatar-size: rem-calc(90);
+
+$composite-avatar--small__avatar-font-size: rem-calc(6);
+$composite-avatar--medium__avatar-font-size: rem-calc(9);
+$composite-avatar--56__avatar-font-size: rem-calc(16);
+$composite-avatar--72__avatar-font-size: rem-calc(18);
+$composite-avatar--84__avatar-font-size: rem-calc(18);
+$composite-avatar--large__avatar-font-size: rem-calc(31);

package/src/components/avatar/tokens/lm-avatar-tokens.js

@@ -0,0 +1,193 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const avatar = {
+  prefix: "lm",
+  component: "avatar",
+  letter: {
+    "bg-color": {
+      light: colors.gray[10].name,
+      dark: colors.gray[80].name
+    },
+    "text-color": {
+      light: colors.gray[90].name,
+      dark: colors.gray[10].name
+    }
+  },
+  blue: {
+    "bg-color": {
+      light: colors.cobalt[20].name,
+      dark: colors.cobalt[80].name
+    },
+    "text-color": {
+      light: colors.cobalt[70].name,
+      dark: colors.cobalt[20].name
+    }
+  },
+  green: {
+    "bg-color": {
+      light: colors.green[20].name,
+      dark: colors.green[80].name
+    },
+    "text-color": {
+      light: colors.green[70].name,
+      dark: colors.green[20].name
+    }
+  },
+  purple: {
+    "bg-color": {
+      light: colors.purple[20].name,
+      dark: colors.purple[80].name
+    },
+    "text-color": {
+      light: colors.purple[70].name,
+      dark: colors.purple[20].name
+    }
+  },
+  violet: {
+    "bg-color": {
+      light: colors.violet[20].name,
+      dark: colors.violet[80].name
+    },
+    "text-color": {
+      light: colors.violet[70].name,
+      dark: colors.violet[20].name
+    }
+  },
+  mint: {
+    "bg-color": {
+      light: colors.mint[20].name,
+      dark: colors.mint[80].name
+    },
+    "text-color": {
+      light: colors.mint[70].name,
+      dark: colors.mint[20].name
+    }
+  },
+  darkmint: {
+    "bg-color": {
+      light: colors.mint[50].name,
+      dark: colors.mint[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.gray["05"].name
+    }
+  },
+  yellow: {
+    "bg-color": {
+      light: colors.yellow[20].name,
+      dark: colors.yellow[80].name
+    },
+    "text-color": {
+      light: colors.yellow[70].name,
+      dark: colors.yellow[20].name
+    }
+  },
+  red: {
+    "bg-color": {
+      light: colors.red[20].name,
+      dark: colors.red[80].name
+    },
+    "text-color": {
+      light: colors.red[70].name,
+      dark: colors.red[20].name
+    }
+  },
+  orange: {
+    "bg-color": {
+      light: colors.orange[20].name,
+      dark: colors.orange[80].name
+    },
+    "text-color": {
+      light: colors.orange[70].name,
+      dark: colors.orange[20].name
+    }
+  },
+  cyan: {
+    "bg-color": {
+      light: colors.cyan[20].name,
+      dark: colors.cyan[80].name
+    },
+    "text-color": {
+      light: colors.cyan[70].name,
+      dark: colors.cyan[20].name
+    }
+  },
+  slate: {
+    "bg-color": {
+      light: colors.slate[20].name,
+      dark: colors.slate[80].name
+    },
+    "text-color": {
+      light: colors.slate[70].name,
+      dark: colors.slate[20].name
+    }
+  },
+  pink: {
+    "bg-color": {
+      light: colors.pink[20].name,
+      dark: colors.pink[80].name
+    },
+    "text-color": {
+      light: colors.pink[70].name,
+      dark: colors.pink[20].name
+    }
+  },
+  cobalt: {
+    "bg-color": {
+      light: colors.cobalt[20].name,
+      dark: colors.cobalt[80].name
+    },
+    "text-color": {
+      light: colors.cobalt[70].name,
+      dark: colors.cobalt[20].name
+    }
+  },
+  gold: {
+    "bg-color": {
+      light: colors.gold[20].name,
+      dark: colors.gold[80].name
+    },
+    "text-color": {
+      light: colors.gold[70].name,
+      dark: colors.gold[20].name
+    }
+  },
+  lime: {
+    "bg-color": {
+      light: colors.lime[20].name,
+      dark: colors.lime[80].name
+    },
+    "text-color": {
+      light: colors.lime[70].name,
+      dark: colors.lime[20].name
+    }
+  },
+  "inactive-opacity": {
+    common: 0.55
+  },
+  presence: {
+    active: {
+      common: colors.green[60].name
+    },
+    inactive: {
+      common: colors.gray[60].name
+    },
+    engaged: {
+      common: colors.yellow[60].name
+    },
+    dnd: {
+      common: colors.red[60].name
+    },
+    rona: {
+      common: colors.red[60].name
+    },
+    unstable: {
+      common: colors.orange[60].name
+    }
+  }
+};
+
+module.exports = avatar;

package/src/components/avatar/tokens/md-avatar-tokens.js

@@ -0,0 +1,183 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const avatar = {
+  prefix: "md",
+  component: "avatar",
+  letter: {
+    "bg-color": {
+      light: colors.gray[10].name,
+      dark: colors.gray[80].name
+    },
+    "text-color": {
+      light: colors.gray[80].name,
+      dark: colors.gray["05"].name
+    }
+  },
+  blue: {
+    "bg-color": {
+      light: colors.cobalt[50].name,
+      dark: colors.cobalt[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.cobalt[20].name
+    }
+  },
+  green: {
+    "bg-color": {
+      light: colors.green[50].name,
+      dark: colors.green[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.green[20].name
+    }
+  },
+  purple: {
+    "bg-color": {
+      light: colors.purple[50].name,
+      dark: colors.purple[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.purple[20].name
+    }
+  },
+  violet: {
+    "bg-color": {
+      light: colors.violet[50].name,
+      dark: colors.violet[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.violet[20].name
+    }
+  },
+  mint: {
+    "bg-color": {
+      light: colors.mint[50].name,
+      dark: colors.mint[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.mint[20].name
+    }
+  },
+  yellow: {
+    "bg-color": {
+      light: colors.yellow[50].name,
+      dark: colors.yellow[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.yellow[20].name
+    }
+  },
+  red: {
+    "bg-color": {
+      light: colors.red[50].name,
+      dark: colors.red[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.red[20].name
+    }
+  },
+  orange: {
+    "bg-color": {
+      light: colors.orange[50].name,
+      dark: colors.orange[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.orange[20].name
+    }
+  },
+  cyan: {
+    "bg-color": {
+      light: colors.cyan[50].name,
+      dark: colors.cyan[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.cyan[20].name
+    }
+  },
+  slate: {
+    "bg-color": {
+      light: colors.slate[50].name,
+      dark: colors.slate[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.slate[20].name
+    }
+  },
+  pink: {
+    "bg-color": {
+      light: colors.pink[50].name,
+      dark: colors.pink[80].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.pink[20].name
+    }
+  },
+  cobalt: {
+    "bg-color": {
+      light: colors.cobalt[50].name,
+      dark: colors.cobalt[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.cobalt[20].name
+    }
+  },
+  gold: {
+    "bg-color": {
+      light: colors.gold[50].name,
+      dark: colors.gold[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.gold[20].name
+    }
+  },
+  lime: {
+    "bg-color": {
+      light: colors.lime[50].name,
+      dark: colors.lime[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.lime[20].name
+    }
+  },
+  "inactive-opacity": {
+    common: 0.55
+  },
+  presence: {
+    active: {
+      common: colors.green[60].name
+    },
+    inactive: {
+      common: colors.gray[60].name
+    },
+    engaged: {
+      common: colors.yellow[60].name
+    },
+    dnd: {
+      common: colors.red[60].name
+    },
+    rona: {
+      common: colors.red[60].name
+    },
+    unstable: {
+      common: colors.orange[60].name
+    }
+  }
+};
+
+module.exports = avatar;