1 files changed, 71 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/avatars.css b/comm/mail/themes/shared/mail/avatars.css
new file mode 100644
index 0000000000..b649b13758
--- /dev/null
+++ b/comm/mail/themes/shared/mail/avatars.css
@@ -0,0 +1,71 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://messenger/skin/colors.css");
+
+:root {
+  --recipient-avatar-size: 28px;
+  --recipient-avatar-placeholder-size: 16px;
+
+  --recipient-avatar-color: var(--color-gray-50);
+  --recipient-avatar-background-color: var(--color-gray-30);
+}
+
+:root[uidensity="compact"] {
+  --recipient-avatar-size: 24px;
+  --recipient-avatar-placeholder-size: contain;
+  --recipient-multi-line-gap: 0;
+}
+
+:root[uidensity="touch"] {
+  --recipient-avatar-size: 32px;
+  --recipient-avatar-placeholder-size: 16px;
+}
+
+@media not (prefers-contrast) {
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --recipient-avatar-color: var(--color-gray-30);
+      --recipient-avatar-background-color: var(--color-gray-60);
+    }
+  }
+}
+
+@media (prefers-contrast) {
+  :root {
+    --recipient-avatar-color: currentColor;
+    --recipient-avatar-background-color: color-mix(in srgb, currentColor 30%, transparent);
+  }
+}
+
+.recipient-avatar {
+  display: inline-flex;
+  height: var(--recipient-avatar-size);
+  width: var(--recipient-avatar-size);
+  border-radius: 50%;
+  margin-inline-end: 6px;
+  text-align: center;
+  overflow: hidden;
+  color: var(--recipient-avatar-color);
+  background-color: var(--recipient-avatar-background-color);
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.recipient-avatar.is-mail-list {
+  background: none;
+}
+
+.recipient-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.recipient-avatar.is-mail-list img {
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
+}