feat(split-button, dropdown-item, button): update component tokens (#…

…9456)

**Related Issue:** #7180

## Summary

Add theme e2e tests and update tokens
In order to get proper styling of split button this required some
updates to dropdown-item and button

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

@@ -6,6 +6,10 @@
  * @prop --calcite-button-background-color: defines the component's background color.
  * @prop --calcite-button-border-color: defines the component's border color.
  * @prop --calcite-button-corner-radius: defines the component's corner radius.
+ * @prop --calcite-button-corner-radius-start-start: defines the component's top-left corner radius. will fallback to --calcite-button-corner-radius.
+ * @prop --calcite-button-corner-radius-start-end: defines the component's top-right corner radius. Will fallback to --calcite-button-corner-radius.
+ * @prop --calcite-button-corner-radius-end-start: defines the component's bottom-left corner radius. Will fallback to --calcite-button-corner-radius.
+ * @prop --calcite-button-corner-radius-end-end: defines the component's bottom-right corner radius. Will fallback to --calcite-button-corner-radius.
  * @prop --calcite-button-loader-color: defines the component's loader color.
  * @prop --calcite-button-shadow: defines the component's shadow.
  * @prop --calcite-button-text-color: defines the component's text color.
@@ -39,9 +43,21 @@
     padding-inline: var(--calcite-internal-button-space-x, 7px);
     inline-size: var(--calcite-container-size-content-fluid);
     block-size: var(--calcite-container-size-content-fluid);
-    border-radius: var(
-      --calcite-button-corner-radius,
-      var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius))
+    border-start-start-radius: var(
+      --calcite-button-corner-radius-start-start,
+      var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
+    );
+    border-start-end-radius: var(
+      --calcite-button-corner-radius-start-end,
+      var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
+    );
+    border-end-start-radius: var(
+      --calcite-button-corner-radius-end-start,
+      var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
+    );
+    border-end-end-radius: var(
+      --calcite-button-corner-radius-end-end,
+      var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, var(--calcite-corner-radius)))
     );
     justify-content: var(--calcite-internal-button-content-align-x, center);
     background-color: var(

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

@@ -1,5 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { focusable, renders, hidden, disabled } from "../../tests/commonTests";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
 
 describe("calcite-dropdown-item", () => {
   describe("renders", () => {
@@ -49,4 +50,29 @@ describe("calcite-dropdown-item", () => {
 
     expect(itemChangeSpy).toHaveReceivedEventTimes(3);
   });
+
+  describe("theme", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-dropdown-item-background-color": [
+        {
+          shadowSelector: ".container",
+          targetProp: "backgroundColor",
+        },
+        {
+          shadowSelector: ".container a",
+          targetProp: "backgroundColor",
+        },
+      ],
+      "--calcite-dropdown-item-icon-color": {
+        targetProp: "--calcite-icon-color",
+      },
+      "--calcite-dropdown-item-indicator-color": {
+        targetProp: "--calcite-icon-color",
+      },
+      "--calcite-dropdown-item-text-color": {
+        targetProp: "color",
+      },
+    };
+    themed(`calcite-action-bar`, tokens);
+  });
 });

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

@@ -1,13 +1,26 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-dropdown-item-background-color: Specifies the background color of the component.
+ * @prop --calcite-dropdown-item-icon-color: Specifies the color of an icon in the component.
+ * @prop --calcite-dropdown-item-indicator-color: Specifies the color of the indicator dot on the component.
+ * @prop --calcite-dropdown-item-text-color: Specifies the text color of the component.
+ *
+ */
+
 @mixin itemStyling {
-  @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-item-text-color, (--calcite-color-text-3));
+  background-color: var(--calcite-dropdown-item-background-color, none);
 }
 
 :host {
@@ -91,40 +104,44 @@
   @apply focus-inset outline-none;
 
   .container {
-    @apply text-color-1 no-underline;
+    @apply no-underline;
+    color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
   }
 }
 
 :host(:hover:not([disabled])),
 :host(:active:not([disabled])) {
   .container {
-    @apply bg-foreground-2 text-color-1 no-underline;
+    @apply no-underline;
+    background-color: var(--calcite-dropdown-item-background-color, var(--calcite-color-foreground-2));
+    color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
   }
 
   .dropdown-link {
-    @apply text-color-1;
+    color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
   }
 }
 
 :host(:active:not([disabled])) .container {
-  @apply bg-foreground-3;
+  background-color: var(--calcite-dropdown-item-background-color, var(--calcite-color-foreground-3));
 }
 
 :host([selected]) .container:not(.container--none-selection),
 :host([selected]) .dropdown-link {
-  @apply text-color-1 font-medium;
+  @apply font-medium;
+  color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
   & calcite-icon {
-    color: theme("backgroundColor.brand");
+    --calcite-icon-color: var(--calcite-dropdown-item-icon-color, theme("backgroundColor.brand"));
   }
 }
 
 :host(:hover:not([disabled])) .dropdown-item-icon {
-  color: theme("borderColor.color.1");
+  color: var(--calcite-dropdown-item-indicator-color, theme("borderColor.color.1"));
   @apply opacity-100;
 }
 
 :host([selected]) .dropdown-item-icon {
-  color: theme("backgroundColor.brand");
+  color: var(--calcite-dropdown-item-indicator-color, theme("backgroundColor.brand"));
   @apply opacity-100;
 }
 

packages/calcite-components/src/components/split-button/split-button.e2e.ts

@@ -1,6 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
 import { accessible, defaults, disabled, focusable, hidden, renders } from "../../tests/commonTests";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-split-button", () => {
   describe("defaults", () => {
@@ -240,4 +242,117 @@ describe("calcite-split-button", () => {
     await dropdownCloseEvent;
     expect(await group.isVisible()).toBe(false);
   });
+
+  describe("theme", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-split-button-background-color-active": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-background-color",
+        state: { press: { attribute: "appearance", value: "solid" } },
+      },
+      "--calcite-split-button-background-color-focus": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-background-color",
+        state: "focus",
+      },
+      "--calcite-split-button-background-color-hover": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-background-color",
+        state: "hover",
+      },
+      "--calcite-split-button-background-color": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-background-color",
+      },
+      "--calcite-split-button-border-color-active": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-border-color",
+        state: { press: { attribute: "appearance", value: "solid" } },
+      },
+      "--calcite-split-button-border-color-focus": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-border-color",
+        state: "focus",
+      },
+      "--calcite-split-button-border-color-hover": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-border-color",
+        state: "hover",
+      },
+      "--calcite-split-button-border-color": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-border-color",
+      },
+      "--calcite-split-button-corner-radius": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-corner-radius",
+      },
+      "--calcite-split-button-divider-color": {
+        shadowSelector: `.${CSS.divider}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-split-button-icon-color-active": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-icon-color",
+        state: { press: { attribute: "appearance", value: "solid" } },
+      },
+      "--calcite-split-button-icon-color-focus": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-icon-color",
+        state: "focus",
+      },
+      "--calcite-split-button-icon-color-hover": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-icon-color",
+        state: "hover",
+      },
+      "--calcite-split-button-icon-color": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-icon-color",
+      },
+      "--calcite-split-button-loader-color": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-loader-color",
+      },
+      "--calcite-split-button-shadow-active": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-shadow",
+        state: { press: { attribute: "appearance", value: "solid" } },
+      },
+      "--calcite-split-button-shadow-focus": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-shadow",
+        state: "focus",
+      },
+      "--calcite-split-button-shadow-hover": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-shadow",
+        state: "hover",
+      },
+      "--calcite-split-button-shadow": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-shadow",
+      },
+      "--calcite-split-button-text-color-active": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-text-color",
+        state: { press: { attribute: "appearance", value: "solid" } },
+      },
+      "--calcite-split-button-text-color-focus": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-text-color",
+        state: "focus",
+      },
+      "--calcite-split-button-text-color-hover": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-text-color",
+        state: "hover",
+      },
+      "--calcite-split-button-text-color": {
+        shadowSelector: "calcite-button",
+        targetProp: "--calcite-button-text-color",
+      },
+    };
+    themed(`<calcite-split-button primary-text="Button" loading />`, tokens);
+  });
 });