feat(avatar): add component tokens

packages/calcite-components/src/components.d.ts

@@ -7852,9 +7852,7 @@ declare global {
         new (): HTMLCalciteTileSelectGroupElement;
     };
     interface HTMLCalciteTimePickerElementEventMap {
-        "calciteInternalTimePickerBlur": void;
         "calciteInternalTimePickerChange": string;
-        "calciteInternalTimePickerFocus": void;
     }
     interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteTimePickerElementEventMap>(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent<HTMLCalciteTimePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -13817,9 +13815,7 @@ declare namespace LocalJSX {
           * Specifies the Unicode numeral system used by the component for localization.
          */
         "numberingSystem"?: NumberingSystem;
-        "onCalciteInternalTimePickerBlur"?: (event: CalciteTimePickerCustomEvent<void>) => void;
         "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent<string>) => void;
-        "onCalciteInternalTimePickerFocus"?: (event: CalciteTimePickerCustomEvent<void>) => void;
         /**
           * Specifies the size of the component.
          */

packages/calcite-components/src/components/avatar/avatar.e2e.ts

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, themed } from "../../tests/commonTests";
 import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -53,7 +53,7 @@ describe("calcite-avatar", () => {
       const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
       return background.getAttribute("style");
     });
-    expect(style).toEqual("background-color: rgb(214, 232, 245);");
+    expect(style).toEqual("background-color: var(--calcite-avatar-background-color, hsl(206, 60%, 90%));");
   });
 
   it("computes a background fill if id is not a valid hex", async () => {
@@ -65,7 +65,7 @@ describe("calcite-avatar", () => {
       const background = document.querySelector("calcite-avatar").shadowRoot.querySelector(".background");
       return background.getAttribute("style");
     });
-    expect(style).toEqual("background-color: rgb(245, 214, 236);");
+    expect(style).toEqual("background-color: var(--calcite-avatar-background-color, hsl(317, 60%, 90%));");
   });
 
   it("renders default icon when no information is passed", async () => {
@@ -98,4 +98,64 @@ describe("calcite-avatar", () => {
     expect(secondBgColor).not.toEqual(thirdBgColor);
     expect(firstBgColor).not.toEqual(thirdBgColor);
   });
+
+  describe("theme", () => {
+    describe("thumbnail", () => {
+      themed(
+        html`<calcite-avatar
+          thumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
+        ></calcite-avatar>`,
+        {
+          "--calcite-avatar-corner-radius": [
+            {
+              targetProp: "borderRadius",
+            },
+            {
+              shadowSelector: `.${CSS.thumbnail}`,
+              targetProp: "borderRadius",
+            },
+          ],
+        },
+      );
+    });
+
+    describe("icon", () => {
+      themed(html`<calcite-avatar user-id="umonti"></calcite-avatar>`, {
+        "--calcite-avatar-background-color": {
+          shadowSelector: `.${CSS.background}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-avatar-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+        "--calcite-avatar-corner-radius": [
+          {
+            targetProp: "borderRadius",
+          },
+          {
+            shadowSelector: `.${CSS.background}`,
+            targetProp: "borderRadius",
+          },
+        ],
+      });
+    });
+
+    describe("initials", () => {
+      themed(html`<calcite-avatar full-name="Urbano Monti"></calcite-avatar>`, {
+        "--calcite-avatar-background-color": {
+          shadowSelector: `.${CSS.background}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-avatar-color": {
+          shadowSelector: `.${CSS.initials}`,
+          targetProp: "color",
+        },
+        "--calcite-avatar-corner-radius": {
+          shadowSelector: `.${CSS.background}`,
+          targetProp: "borderRadius",
+        },
+      });
+    });
+  });
 });

packages/calcite-components/src/components/avatar/avatar.scss

@@ -1,5 +1,18 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-avatar-corner-radius: defines the corner radius of the component.
+ * @prop --calcite-avatar-color: defines the icon or initial color in the component.
+ * @prop --calcite-avatar-background-color: defines the background color of the component.
+ *
+ */
+
 :host {
-  @apply rounded-half inline-block overflow-hidden;
+  @apply inline-block overflow-hidden;
+  border-radius: var(--calcite-avatar-corner-radius, 50%);
+  color: var(--calcite-avatar-color, var(--calcite-color-text-2));
 }
 
 :host([scale="s"]) {
@@ -19,15 +32,17 @@
 }
 
 .background {
-  @apply rounded-half flex h-full w-full items-center justify-center;
+  @apply flex h-full w-full items-center justify-center;
+  border-radius: var(--calcite-avatar-corner-radius, 50%);
 }
 
 .initials {
-  @apply text-color-2 font-bold uppercase;
+  @apply font-bold uppercase;
 }
 
 .thumbnail {
-  @apply rounded-half h-full w-full;
+  @apply h-full w-full;
+  border-radius: var(--calcite-avatar-corner-radius, 50%);
 }
 
 @include base-component();

packages/calcite-components/src/components/avatar/avatar.tsx

@@ -103,11 +103,11 @@ export class Avatar {
     const hex = id && isValidHex(id) ? id : stringToHex(name);
     // if there is not unique information, or an invalid hex is produced, return a default
     if ((!userId && !name) || !isValidHex(hex)) {
-      return `var(--calcite-color-foreground-2)`;
+      return `var(--calcite-avatar-background-color, var(--calcite-color-foreground-2))`;
     }
     const hue = hexToHue(hex);
     const l = theme === "dark" ? 20 : 90;
-    return `hsl(${hue}, 60%, ${l}%)`;
+    return `var(--calcite-avatar-background-color, hsl(${hue}, 60%, ${l}%))`;
   }
 
   /**

packages/calcite-components/src/custom-theme.stories.ts

@@ -31,6 +31,7 @@ import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
 import { calciteSwitch } from "./custom-theme/switch";
 import { tabs } from "./custom-theme/tabs";
+import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
 
 const globalTokens = {
   calciteColorBrand: "#007ac2",
@@ -111,7 +112,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${progress} ${handle}</div>
+
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}  ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle}</div>
+
       </div>
     </div>
   </div>`;
@@ -124,9 +127,10 @@ export default {
     ...accordionItemTokens,
     ...actionTokens,
     ...actionBarTokens,
+    ...actionGroupTokens,
     ...actionMenuTokens,
     ...actionPadTokens,
-    ...actionGroupTokens,
+    ...avatarTokens,
     ...cardTokens,
     ...handleTokens,
     ...progressTokens,
@@ -145,9 +149,10 @@ export const theming_TestOnly = (): string => {
       ...accordionItemTokens,
       ...actionTokens,
       ...actionBarTokens,
+      ...actionGroupTokens,
       ...actionMenuTokens,
       ...actionPadTokens,
-      ...actionGroupTokens,
+      ...avatarTokens,
       ...cardTokens,
       ...handleTokens,
       ...progressTokens,

packages/calcite-components/src/custom-theme/avatar.ts

@@ -0,0 +1,13 @@
+import { html } from "../../support/formatting";
+
+export const avatarTokens = {
+  calciteAvatarCornerRadius: "",
+  calciteAvatarColor: "",
+  calciteAvatarBackgroundColor: "",
+};
+
+export const avatarInitials = html`<calcite-avatar full-name="Urbano Monti"></calcite-avatar>`;
+export const avatarIcon = html`<calcite-avatar user-id="umonti"></calcite-avatar>`;
+export const avatarThumbnail = html`<calcite-avatar
+  thumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
+></calcite-avatar>`;