feat(navigation-user): add component tokens (#10608)

**Related Issue:** #7180 

## Summary
Add the following component-scoped CSS Variables to
calcite-navigation-user:

`--calcite-navigation-accent-color`: Specifies the components's border
color when `active`.
`--calcite-navigation-user-avatar-corner-radius`: Specifies the corner
radius of avatar.
`--calcite-navigation-user-avatar-color`: Specifies the icon color of
avatar.
`--calcite-navigation-background-color`: Specifies the component's
background color.
`--calcite-navigation-user-full-name-text-color`: Specifies the
component's full name text color.
`--calcite-navigation-user-name-text-color`: Specifies the component's
username text color.

packages/calcite-components/src/components/navigation-user/navigation-user.e2e.ts

@@ -1,6 +1,9 @@
 import { describe } from "vitest";
+import { boolean } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-navigation-user", () => {
   describe("renders", () => {
@@ -40,4 +43,47 @@ describe("calcite-navigation-user", () => {
   describe("is focusable", () => {
     focusable("calcite-navigation-user");
   });
+
+  describe("theme", () => {
+    const navigationUserHtml = (active = false): string => html`
+      <calcite-navigation-user full-name="Walt McChipson" username="waltChip" ${boolean("active", active)}>
+      </calcite-navigation-user>
+    `;
+
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-navigation-user-avatar-corner-radius": {
+          shadowSelector: `calcite-avatar`,
+          targetProp: "borderRadius",
+        },
+        "--calcite-navigation-user-avatar-color": {
+          shadowSelector: `calcite-avatar`,
+          targetProp: "color",
+        },
+        "--calcite-navigation-background-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-navigation-user-full-name-text-color": {
+          shadowSelector: `.${CSS.fullName}`,
+          targetProp: "color",
+        },
+        "--calcite-navigation-user-name-text-color": {
+          shadowSelector: `.${CSS.username}`,
+          targetProp: "color",
+        },
+      };
+      themed(navigationUserHtml, tokens);
+    });
+
+    describe("active", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-navigation-accent-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderBlockEndColor",
+        },
+      };
+      themed(navigationUserHtml(true), tokens);
+    });
+  });
 });

packages/calcite-components/src/components/navigation-user/navigation-user.scss

@@ -1,39 +1,38 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-navigation-accent-color: Specifies the components's border color when `active`.
+ * @prop --calcite-navigation-user-avatar-corner-radius: Specifies the corner radius of avatar.
+ * @prop --calcite-navigation-user-avatar-color: Specifies the icon color of avatar.
+ * @prop --calcite-navigation-background-color: Specifies the component's background color.
+ * @prop --calcite-navigation-user-full-name-text-color: Specifies the component's full name text color.
+ * @prop --calcite-navigation-user-name-text-color: Specifies the component's username text color.
+ *
+ */
+
 :host {
   @apply inline-flex outline-none;
   & .button {
-    background-color: transparent;
-    border: none;
-    @apply font-sans
-      flex
+    @apply flex
       m-0
       items-center
       justify-center
       cursor-pointer
       transition-default
       focus-base
+      font-sans
       text-0h;
-    border-block-end: 2px solid transparent;
+    border: none;
+    background-color: var(
+      --calcite-navigation-background-color,
+      var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent))
+    );
+    border-block-end: 2px solid var(--calcite-color-transparent);
   }
 }
 
-:host(:hover) .button,
-:host(:focus) .button {
-  @apply bg-foreground-2;
-}
-
-:host(:focus) .button {
-  @apply focus-inset;
-}
-
-:host(:active) .button {
-  @apply bg-foreground-3 text-color-1;
-}
-
-:host([active]) .button {
-  @apply text-color-1 border-color-brand;
-  --calcite-icon-color: var(--calcite-color-brand);
-}
-
 .text-container {
   @apply flex
   flex-col
@@ -44,22 +43,39 @@
 
 calcite-avatar {
   @apply px-4;
+  --calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius);
+  --calcite-avatar-color: var(--calcite-navigation-user-avatar-color);
 }
 
 calcite-avatar ~ .text-container {
   @apply ps-0;
 }
 
 .full-name {
-  @apply text-0
-  ms-0
-  text-color-1
-  font-medium;
+  @apply ms-0 text-0 font-medium;
+  color: var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1));
 }
 
 .username {
-  @apply text-color-2;
   font-size: var(--calcite-font-size--1);
+  color: var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2));
+}
+
+:host(:hover) .button,
+:host(:focus) .button {
+  --calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-2);
+}
+
+:host(:focus) .button {
+  @apply focus-inset;
+}
+
+:host(:active) .button {
+  --calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-3);
+}
+
+:host([active]) .button {
+  border-block-end-color: var(--calcite-navigation-accent-color, var(--calcite-color-brand));
 }
 
 @include base-component();

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

@@ -40,6 +40,7 @@ import { tabs } from "./custom-theme/tabs";
 import { textArea, textAreaTokens } from "./custom-theme/text-area";
 import { tooltip, tooltipTokens } from "./custom-theme/tooltip";
 import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
+import { navigationUserTokens, navigationUsers } from "./custom-theme/navigation-user";
 import { tileTokens, tile } from "./custom-theme/tile";
 import { navigationTokens, navigation } from "./custom-theme/navigation";
 
@@ -126,7 +127,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${datePicker} ${tabs} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials}
         ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
       </div>
-      ${alert} ${navigation}
+      ${alert} ${navigation} ${navigationUsers}
     </div>
   </div>`;
 
@@ -153,6 +154,7 @@ const componentTokens = {
   ...inputTokens,
   ...switchTokens,
   ...textAreaTokens,
+  ...navigationUserTokens,
   ...tooltipTokens,
   ...tileTokens,
   ...navigationTokens,

packages/calcite-components/src/custom-theme/navigation-user.ts

@@ -0,0 +1,21 @@
+import { html } from "../../support/formatting";
+import { boolean } from "../../.storybook/utils";
+
+export const navigationUserTokens = {
+  calciteNavigationAccentColor: "",
+  calciteNavigationUserBackgroundColor: "",
+  calciteNavigationUserAvatarCornerRadius: "",
+  calciteNavigationUserAvatarColor: "",
+  calciteNavigationUserFullNameTextColor: "",
+  calciteNavigationUserUserNameTextColor: "",
+};
+
+const navigationUser = (active = false): string => html`
+  <calcite-navigation-user
+    full-name="Wendell Berry"
+    username="w_berry"
+    ${boolean("active", active)}
+  ></calcite-navigation-user>
+`;
+
+export const navigationUsers = html`${navigationUser(true)} ${navigationUser()}`;