feat(navigation-logo): add component tokens (#10582)

**Related Issue:** #7180 ## Summary Add the following component-scoped CSS Variables to calcite-navigation-logo: `--calcite-navigation-accent-color`: Specifies the component's border color when `active`. `--calcite-navigation-background-color`: Specifies the component's background color. `--calcite-navigation-logo-heading-text-color`: Specifies the component's default color for heading text. `--calcite-navigation-logo-text-color`: Specifies the component's default color for icon and description text.
Esri · Nov 22, 2024 · 0638891 · 0638891
1 parent cfecc05
commit 0638891
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 20 deletions.
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts
@@ -1,6 +1,9 @@
 import { describe } from "vitest";
 import { html } from "../../../support/formatting";
 import { accessible, focusable, hidden, reflects, renders, defaults } from "../../tests/commonTests";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { CSS } from "../../../src/components/navigation-logo/resources";
+import { boolean } from "../../../.storybook/utils";
 
 describe("calcite-navigation-logo", () => {
   describe("renders", () => {
@@ -68,4 +71,71 @@ describe("calcite-navigation-logo", () => {
       },
     ]);
   });
+
+  describe("theme", () => {
+    const navigationLogoHtml = (active = false): string => html`
+      <calcite-navigation-logo
+        heading="Walt's Chips"
+        description="Eastern Potato Chip Company"
+        icon="layers"
+        ${boolean("active", active)}
+      >
+      </calcite-navigation-logo>
+    `;
+
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-navigation-background-color": [
+          {
+            shadowSelector: `.${CSS.anchor}`,
+            targetProp: "backgroundColor",
+          },
+          {
+            shadowSelector: `.${CSS.anchor}`,
+            targetProp: "backgroundColor",
+            state: "hover",
+          },
+          {
+            shadowSelector: `.${CSS.anchor}`,
+            targetProp: "backgroundColor",
+            state: { press: { attribute: "class", value: CSS.anchor } },
+          },
+        ],
+        "--calcite-navigation-logo-text-color": [
+          {
+            shadowSelector: `.${CSS.description}`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `calcite-icon`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `calcite-icon`,
+            targetProp: "color",
+            state: { press: { attribute: "class", value: CSS.anchor } },
+          },
+        ],
+        "--calcite-navigation-logo-heading-text-color": {
+          shadowSelector: `.${CSS.heading}`,
+          targetProp: "color",
+        },
+      };
+      themed(navigationLogoHtml(), tokens);
+    });
+
+    describe("active", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-navigation-accent-color": {
+          shadowSelector: `.${CSS.anchor}`,
+          targetProp: "borderBlockEndColor",
+        },
+        "--calcite-navigation-logo-text-color": {
+          shadowSelector: `calcite-icon`,
+          targetProp: "color",
+        },
+      };
+      themed(navigationLogoHtml(true), tokens);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
@@ -1,5 +1,15 @@
+/*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-navigation-accent-color: Specifies the component's border color when `active`.
+* @prop --calcite-navigation-background-color: Specifies the component's background color.
+* @prop --calcite-navigation-logo-heading-text-color: Specifies the component's default color for heading text.
+* @prop --calcite-navigation-logo-text-color: Specifies the component's default color for icon and description text.
+*
+*/
+
 :host {
-  @apply inline-flex outline-none;
+  @apply inline-flex outline-none focus-base;
 }
 
 .anchor {
@@ -9,28 +19,26 @@
     justify-center
     cursor-pointer
     transition-default
-    focus-base
-    no-underline
+    no-underline 
     text-0h;
-  color: inherit;
-  border-block-end: 2px solid transparent;
+  border-block-end: 2px solid var(--calcite-color-transparent);
+  background-color: var(
+    --calcite-navigation-background-color,
+    var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1))
+  );
 }
 
-.anchor:hover,
-.anchor:focus {
-  @apply bg-foreground-2;
-}
-.anchor:focus {
+:host(:focus) {
   @apply focus-inset;
 }
 
-.anchor:active {
-  @apply bg-foreground-3;
-}
-
 .image,
 .icon {
   @apply flex h-7 m-0 px-4;
+  color: var(
+    --calcite-navigation-logo-text-color,
+    var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, inherit))
+  );
 }
 
 .image ~ .icon {
@@ -42,14 +50,26 @@
   @apply ps-0;
 }
 
+:host(:hover),
+:host(:focus) {
+  .anchor {
+    --calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2);
+  }
+}
+
 :host(:active) .anchor {
-  @apply text-color-1;
+  --calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3);
 }
 
 :host([active]) .anchor {
-  @apply text-color-1;
-  border-color: var(--calcite-color-brand);
-  --calcite-icon-color: var(--calcite-color-brand);
+  border-block-end-color: var(--calcite-navigation-accent-color, var(--calcite-color-brand));
+}
+
+:host([active]),
+:host(:active) {
+  .icon {
+    --calcite-internal-navigation-logo-text-color: var(--calcite-color-brand);
+  }
 }
 
 .container {
@@ -65,8 +85,8 @@
   @apply text-0
   ms-0
   truncate
-  text-color-1
   font-medium;
+  color: var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1));
 }
 
 .standalone {
@@ -75,6 +95,7 @@
 
 .description {
   @apply text-color-2 truncate;
+  color: var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));
   font-size: var(--calcite-font-size--1);
 }
 

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/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 { navigationLogoTokens, navigationLogos } from "./custom-theme/navigation-logo";
 import { navigationUserTokens, navigationUsers } from "./custom-theme/navigation-user";
 import { tileTokens, tile } from "./custom-theme/tile";
 import { navigationTokens, navigation } from "./custom-theme/navigation";
@@ -127,7 +128,11 @@ 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} ${navigationUsers}
+      <div class="demo-column">
+      ${navigation} ${navigationLogos} ${navigationUsers}
+       </div>
+      ${alert} 
+
     </div>
   </div>`;
 
@@ -154,6 +159,7 @@ const componentTokens = {
   ...inputTokens,
   ...switchTokens,
   ...textAreaTokens,
+  ...navigationLogoTokens,
   ...navigationUserTokens,
   ...tooltipTokens,
   ...tileTokens,

diff --git a/packages/calcite-components/src/custom-theme/navigation-logo.ts b/packages/calcite-components/src/custom-theme/navigation-logo.ts
@@ -0,0 +1,22 @@
+import { html } from "../../support/formatting";
+import { boolean } from "../../.storybook/utils";
+
+export const navigationLogoTokens = {
+  calciteNavigationAccentColor: "",
+  calciteNavigationBackgroundColor: "",
+  calciteNavigationLogoHeadingTextColor: "",
+  calciteNavigationLogoTextColor: "",
+};
+
+const navigationLogo = (active = false): string => html`
+  <calcite-navigation-logo
+    heading="Walt's Chips"
+    description="Eastern Potato Chip Company"
+    icon="layers"
+    label="Walt's Chips"
+    ${boolean("active", active)}
+  >
+  </calcite-navigation-logo>
+`;
+
+export const navigationLogos = html` ${navigationLogo(true)} ${navigationLogo()} `;