feat(dropdown, dropdown-item, dropdown-group): add component tokens

packages/calcite-components/.stylelintrc.cjs

@@ -1,13 +1,7 @@
 // @ts-check
 
 // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [
-  "get-trailing-text-input-padding",
-  "medium-modular-scale",
-  "modular-scale",
-  "scale-duration",
-  "small-modular-scale"
-];
+const customFunctions = [];
 // ⚠️ END OF AUTO-GENERATED CODE
 
 const scssPatternRules = [

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

@@ -2,6 +2,7 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
 import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
 
 describe("calcite-dropdown-group", () => {
   describe("defaults", () => {
@@ -65,4 +66,23 @@ describe("calcite-dropdown-group", () => {
     expect(items.length).toBe(3);
     items.forEach(async (item) => expect(await item.getProperty("selectionMode")).toBe("none"));
   });
+  describe("theme", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-dropdown-title-text-color": {
+        targetProp: "color",
+        shadowSelector: `.dropdown-title`,
+      },
+      "--calcite-dropdown-border-color": [
+        {
+          targetProp: "borderColor",
+          shadowSelector: `.dropdown-title`,
+        },
+        {
+          targetProp: "backgroundColor",
+          shadowSelector: `.dropdown-separator`,
+        },
+      ],
+    };
+    themed(`calcite-dropdown-group`, 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-title-text-color: Specifies the text color of the title of the component.
+ * @prop --calcite-dropdown-border-color: Specifies the border color of the component.
+ */
+
 :host {
   // we make the host relative, so items can consistently compute their offsetTop based on the group
   @apply block relative;
@@ -8,21 +17,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;
+
+  color: var(--calcite-dropdown-title-text-color, var(--calcite-color-text-2));
+  border-color: var(--calcite-dropdown-border-color, theme("borderColor.color.3"));
 }
 
 .dropdown-separator {
   @apply block h-px;
-  background-color: theme("borderColor.color.3");
+  background-color: var(--calcite-dropdown-border-color, theme("borderColor.color.3"));
 }
 
 :host([scale="s"]) {

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

@@ -1,6 +1,7 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
 import { focusable, renders, hidden, disabled } from "../../tests/commonTests";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
 
 describe("calcite-dropdown-item", () => {
   describe("renders", () => {
@@ -50,4 +51,36 @@ describe("calcite-dropdown-item", () => {
 
     expect(itemChangeSpy).toHaveReceivedEventTimes(3);
   });
+  describe("theme", () => {
+    describe("selected", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-dropdown-accent-color": {
+          targetProp: "color",
+          shadowSelector: `.container:not(.container--none-selection) calcite-icon`,
+        },
+      };
+      themed(`<calcite-dropdown-item selected></calcite-dropdown-item>`, tokens);
+    });
+    describe("link", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-dropdown-accent-color": {
+          targetProp: "color",
+          shadowSelector: `.dropdown-link calcite-icon`,
+        },
+      };
+      themed(`<calcite-dropdown-item href="/test" selected></calcite-dropdown-item>`, tokens);
+    });
+    describe("item", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-dropdown-accent-color": {
+          targetProp: "color",
+          shadowSelector: `.dropdown-item-icon`,
+        },
+      };
+      themed(
+        `<calcite-dropdown selection-mode="multiple"><calcite-dropdown-item selected></calcite-dropdown-item></calcite-dropdown>`,
+        tokens,
+      );
+    });
+  });
 });

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

@@ -1,13 +1,25 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-dropdown-accent-color: Specifies the accent color of the component.
+ * @prop --calcite-dropdown-background-color-active: Specifies the background color of the component when active.
+ * @prop --calcite-dropdown-background-color-hover: Specifies the background color of the component when hovered.
+ * @prop --calcite-dropdown-text-color-active: Specifies the text color of the component when active.
+ * @prop --calcite-dropdown-text-color: Specifies the text color of the component.
+ */
+
 @mixin item-styling {
-  @apply text-color-3
-    relative
+  @apply relative
     flex
     flex-grow
     cursor-pointer
     items-center
     no-underline
     duration-150
     ease-in-out;
+  color: var(--calcite-dropdown-text-color, theme("textColor.color.3"));
 }
 
 :host {
@@ -91,41 +103,49 @@
   @apply focus-inset outline-none;
 
   .container {
-    @apply text-color-1 no-underline;
+    @apply no-underline;
+    color: var(--calcite-dropdown-text-color-active, var(--calcite-text-color-1));
   }
 }
 
 :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-text-color-active, var(--calcite-text-color-1));
   }
 
   .dropdown-link {
-    @apply text-color-1;
+    color: var(--calcite-dropdown-text-color-active, var(--calcite-text-color-1));
   }
 }
 
+:host(:hover:not([disabled])) .container {
+  background-color: var(--calcite-dropdown-background-color-hover, var(--calcite-color-foreground-2));
+}
+
 :host(:active:not([disabled])) .container {
-  @apply bg-foreground-3;
+  background-color: var(--calcite-dropdown-background-color-active, var(--calcite-color-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-text-color-active, var(--calcite-text-color-1));
+
+  calcite-icon {
+    color: var(--calcite-dropdown-accent-color, theme("backgroundColor.brand"));
   }
 }
 
 :host(:hover:not([disabled])) .dropdown-item-icon {
-  color: theme("borderColor.color.1");
   @apply opacity-100;
+  color: theme("borderColor.color.1");
 }
 
 :host([selected]) .dropdown-item-icon {
-  color: theme("backgroundColor.brand");
   @apply opacity-100;
+  color: var(--calcite-dropdown-accent-color, theme("backgroundColor.brand"));
 }
 
 @include base-component();

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

@@ -12,6 +12,7 @@ import {
   openClose,
   reflects,
   renders,
+  themed,
 } from "../../tests/commonTests";
 import {
   createSelectedItemsAsserter,
@@ -21,6 +22,8 @@ import {
 } from "../../tests/utils";
 import type { DropdownItem } from "../dropdown-item/dropdown-item";
 import type { Button } from "../button/button";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-dropdown", () => {
   const simpleDropdownHTML = html`
@@ -1444,4 +1447,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`, 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 text color of the component.
  */
 
 :host {
@@ -20,13 +21,14 @@
 @include floating-ui-elem-anim(".calcite-dropdown-wrapper");
 
 :host .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 {
   @apply relative flex flex-auto h-full;
   @include word-break;
@@ -41,13 +43,13 @@
 
 // width
 :host([width-scale="s"]) {
-  --calcite-dropdown-width: theme("spacing.48");
+  --calcite-internal-dropdown-width: theme("spacing.48");
 }
 :host([width-scale="m"]) {
-  --calcite-dropdown-width: theme("spacing.56");
+  --calcite-internal-dropdown-width: theme("spacing.56");
 }
 :host([width-scale="l"]) {
-  --calcite-dropdown-width: theme("spacing.64");
+  --calcite-internal-dropdown-width: theme("spacing.64");
 }
 
 @include base-component();

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

@@ -4,4 +4,5 @@ export const SLOTS = {
 
 export const CSS = {
   wrapper: "calcite-dropdown-wrapper",
+  content: "calcite-dropdown-content",
 };