feat(dropdown): add component tokens

packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts

@@ -4,6 +4,8 @@ import { describe, expect, it } from "vitest";
 import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { findAll } from "../../tests/utils";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-dropdown-group", () => {
   describe("defaults", () => {
@@ -73,4 +75,30 @@ describe("calcite-dropdown-group", () => {
       expect(await item.getProperty("selectionMode")).toBe("none");
     }
   });
+
+  describe("theme", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-dropdown-group-border-color": [
+        {
+          targetProp: "borderColor",
+          shadowSelector: `.${CSS.title}`,
+          selector: `calcite-dropdown-group`,
+        },
+        {
+          targetProp: "backgroundColor",
+          shadowSelector: `.${CSS.separator}`,
+          selector: `calcite-dropdown-group.two`,
+        },
+      ],
+      "--calcite-dropdown-group-title-text-color": {
+        targetProp: "color",
+        shadowSelector: `.${CSS.title}`,
+        selector: `calcite-dropdown-group`,
+      },
+    };
+    themed(
+      `<calcite-dropdown open><calcite-dropdown-group group-title="one"><calcite-dropdown-item>A</calcite-dropdown-item></calcite-dropdown-group><calcite-dropdown-group group-title="two" class="two"><calcite-dropdown-item>A</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`,
+      tokens,
+    );
+  });
 });

packages/calcite-components/src/components/dropdown-group/dropdown-group.scss

@@ -1,3 +1,12 @@
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-dropdown-group-border-color: Specifies the color of the dropdown's border.
+* @prop --calcite-dropdown-group-title-text-color: Specifies the color of the dropdown's title.
+*/
+
 :host {
   @apply block;
 }
@@ -7,21 +16,22 @@
 }
 
 .dropdown-title {
-  @apply border-color-3
-  text-color-2
-  -mb-px
+  @apply -mb-px
   block
   cursor-default
   break-words
   border-0
   border-b
   border-solid
   font-bold;
+
+  border-color: var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));
+  color: var(--calcite-dropdown-group-title-text-color, var(--calcite-color-text-2));
 }
 
 .dropdown-separator {
   @apply block h-px;
-  background-color: theme("borderColor.color.3");
+  background-color: var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));
 }
 
 :host([scale="s"]) {

packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx

@@ -3,8 +3,9 @@ import { PropertyValues } from "lit";
 import { LitElement, property, createEvent, h, JsxNode } from "@arcgis/lumina";
 import { Scale, SelectionMode } from "../interfaces";
 import { createObserver } from "../../utils/observers";
-import { CSS } from "../dropdown-item/resources";
+import { CSS as ItemCSS } from "../dropdown-item/resources";
 import type { DropdownItem } from "../dropdown-item/dropdown-item";
+import { CSS } from "./resources";
 import { RequestedItem } from "./interfaces";
 import { styles } from "./dropdown-group.scss";
 
@@ -135,13 +136,13 @@ export class DropdownGroup extends LitElement {
 
   override render(): JsxNode {
     const groupTitle = this.groupTitle ? (
-      <span ariaHidden="true" class="dropdown-title">
+      <span ariaHidden="true" class={CSS.title}>
         {this.groupTitle}
       </span>
     ) : null;
 
     const dropdownSeparator =
-      this.groupPosition > 0 ? <div class="dropdown-separator" role="separator" /> : null;
+      this.groupPosition > 0 ? <div class={CSS.separator} role="separator" /> : null;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.ariaLabel = this.groupTitle;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
@@ -150,7 +151,7 @@ export class DropdownGroup extends LitElement {
     return (
       <div
         class={{
-          [CSS.container]: true,
+          [ItemCSS.container]: true,
         }}
       >
         {dropdownSeparator}

packages/calcite-components/src/components/dropdown-group/resources.ts

@@ -0,0 +1,4 @@
+export const CSS = {
+  title: "dropdown-title",
+  separator: "dropdown-separator",
+};

packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts

@@ -1,6 +1,8 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { focusable, renders, hidden, disabled } from "../../tests/commonTests";
+import { focusable, renders, hidden, disabled, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-dropdown-item", () => {
   describe("renders", () => {
@@ -50,4 +52,95 @@ describe("calcite-dropdown-item", () => {
 
     expect(itemChangeSpy).toHaveReceivedEventTimes(3);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-dropdown-item-text-color": {
+          targetProp: "color",
+          shadowSelector: `.${CSS.container}`,
+          selector: `calcite-dropdown-item`,
+        },
+        "--calcite-dropdown-item-background-color-hover": {
+          targetProp: "backgroundColor",
+          shadowSelector: `.${CSS.container}`,
+          state: "hover",
+          selector: `calcite-dropdown-item`,
+        },
+        "--calcite-dropdown-item-background-color-press": {
+          targetProp: "backgroundColor",
+          shadowSelector: `.${CSS.container}`,
+          state: { press: `calcite-dropdown-item >>> .${CSS.container}` },
+          selector: `calcite-dropdown-item`,
+        },
+        "--calcite-dropdown-item-icon-color-hover": {
+          targetProp: "color",
+          shadowSelector: `.${CSS.icon}`,
+          state: "hover",
+          selector: "calcite-dropdown-item",
+        },
+        "--calcite-dropdown-item-text-color-press": [
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.container}`,
+            selector: "calcite-dropdown-item",
+            state: "focus",
+          },
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.container}`,
+            selector: "calcite-dropdown-item",
+            state: "hover",
+          },
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.link}`,
+            selector: "calcite-dropdown-item",
+            state: "hover",
+          },
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.container}`,
+            selector: "calcite-dropdown-item",
+            state: { press: `calcite-dropdown-item >>> .${CSS.container}` },
+          },
+          {
+            targetProp: "color",
+            shadowSelector: `.${CSS.link}`,
+            selector: "calcite-dropdown-item",
+            state: { press: `calcite-dropdown-item >>> .${CSS.container}` },
+          },
+        ],
+      };
+      themed(
+        `<calcite-dropdown open>
+          <calcite-dropdown-item href="esri.com">1</calcite-dropdown-item>
+          <calcite-dropdown-item>2</calcite-dropdown-item>
+        </calcite-dropdown>`,
+        tokens,
+      );
+    });
+    describe("selected", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-dropdown-item-icon-color-press": {
+          targetProp: "color",
+          shadowSelector: `calcite-icon`,
+          selector: `calcite-dropdown-item`,
+        },
+        "--calcite-dropdown-item-text-color-press": {
+          targetProp: "color",
+          shadowSelector: `.${CSS.container}`,
+          selector: `calcite-dropdown-item`,
+        },
+      };
+      themed(
+        `<calcite-dropdown selectionMode="multiple" open>
+          <calcite-dropdown-item href="esri.com" selected icon-start="home">1</calcite-dropdown-item>
+          <calcite-dropdown-item href="esri.com" selected>2</calcite-dropdown-item>
+          <calcite-dropdown-item selected class="selected">3</calcite-dropdown-item>
+        </calcite-dropdown>`,
+        tokens,
+      );
+    });
+  });
 });

packages/calcite-components/src/components/dropdown-item/dropdown-item.scss

@@ -1,11 +1,25 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-dropdown-item-background-color-hover: Specifies the background color of the dropdown item when hovered.
+ * @prop --calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active.
+ * @prop --calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered. 
+ * @prop --calcite-dropdown-item-icon-color-press: Specifies the color of the dropdown item icons when selected or active.
+ * @prop --calcite-dropdown-item-text-color-press: Specifies the color of the dropdown item text when selected or active.
+ * @prop --calcite-dropdown-item-text-color: Specifies the color of the dropdown item text.
+*/
+
 @mixin item-styling {
-  @apply text-color-3
-    relative
+  @apply relative
     flex
     flex-grow
     cursor-pointer
     items-center
     no-underline;
+
+  color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3));
 }
 
 :host {
@@ -88,39 +102,48 @@
 :host(:focus) {
   .container {
     @apply focus-inset text-color-1 no-underline;
+    color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
+  }
+}
+
+:host(:hover:not([disabled])) {
+  .container {
+    background-color: var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2));
   }
 }
 
+:host(:active:not([disabled])) .container {
+  background-color: var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3));
+}
+
 :host(:hover:not([disabled])),
 :host(:active:not([disabled])) {
   .container {
-    @apply bg-foreground-2 text-color-1 no-underline;
+    @apply no-underline;
+    color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
   }
 
   .dropdown-link {
-    @apply text-color-1;
+    color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
   }
 }
 
-:host(:active:not([disabled])) .container {
-  @apply bg-foreground-3;
-}
-
 :host([selected]) .container:not(.container--none-selection),
 :host([selected]) .dropdown-link {
-  @apply text-color-1 font-medium;
-  & calcite-icon {
-    color: theme("backgroundColor.brand");
+  @apply font-medium;
+  color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
+
+  calcite-icon {
+    color: var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand));
   }
 }
 
 :host(:hover:not([disabled])) .dropdown-item-icon {
-  color: theme("borderColor.color.1");
+  color: var(--calcite-dropdown-item-icon-color-hover, var(--calcite-color-border-1));
   @apply opacity-100;
 }
 
 :host([selected]) .dropdown-item-icon {
-  color: theme("backgroundColor.brand");
   @apply opacity-100;
 }
 

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

@@ -22,6 +22,7 @@ import {
 } from "../../tests/utils";
 import type { DropdownItem } from "../dropdown-item/dropdown-item";
 import type { Button } from "../button/button";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
 import { CSS } from "./resources";
 
 describe("calcite-dropdown", () => {
@@ -1467,4 +1468,18 @@ describe("calcite-dropdown", () => {
       expect(await isElementFocused(page, "#item-2")).toBe(true);
     });
   });
+
+  describe("theme", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-dropdown-width": {
+        targetProp: "inlineSize",
+        shadowSelector: `.${CSS.content}`,
+      },
+      "--calcite-dropdown-background-color": {
+        targetProp: "backgroundColor",
+        shadowSelector: `.${CSS.content}`,
+      },
+    };
+    themed(`<calcite-dropdown open></calcite-dropdown>`, tokens);
+  });
 });

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

@@ -4,6 +4,7 @@
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-dropdown-width: Specifies the width of the component's wrapper.
+* @prop --calcite-dropdown-background-color: Specifies the background color of the component.
 */
 
 :host {
@@ -18,12 +19,12 @@
 @include floating-ui-elem-anim(".calcite-dropdown-wrapper");
 
 .calcite-dropdown-content {
-  @apply bg-foreground-1
-  w-auto
+  @apply w-auto
   overflow-y-auto
   overflow-x-hidden
   max-h-menu;
-  inline-size: var(--calcite-dropdown-width);
+  inline-size: var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));
+  background-color: var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1));
 }
 
 .calcite-trigger-container {
@@ -32,21 +33,21 @@
 }
 
 .width-s {
-  --calcite-dropdown-width: theme("spacing.48");
+  --calcite-internal-dropdown-width: theme("spacing.48");
 }
 
 .width-m {
-  --calcite-dropdown-width: theme("spacing.56");
+  --calcite-internal-dropdown-width: theme("spacing.56");
 }
 
 .width-l {
-  --calcite-dropdown-width: theme("spacing.64");
+  --calcite-internal-dropdown-width: theme("spacing.64");
 }
 
 @media (forced-colors: active) {
   /* use real border since box-shadow is removed in high contrast mode */
   :host([open]) .calcite-dropdown-wrapper {
-    border: 1px solid canvasText;
+    border: var(--calcite-border-width-sm) solid canvasText;
   }
 }