feat(handle): add component tokens

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

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, hidden, renders, t9n } from "../../tests/commonTests";
+import { accessible, disabled, hidden, renders, themed, t9n } from "../../tests/commonTests";
 import { HandleMessages } from "../../components";
 import { CSS, SUBSTITUTIONS } from "./resources";
 
@@ -143,4 +143,42 @@ describe("calcite-handle", () => {
     await page.waitForChanges();
     expect(internalHandle.getAttribute("aria-checked")).toBe("true");
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-handle", {
+        "--calcite-handle-background-color-hover": {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "backgroundColor",
+          state: "hover",
+        },
+        "--calcite-handle-icon-color": {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "color",
+        },
+        "--calcite-handle-icon-color-hover": {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-handle-icon-color-pressed": {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "color",
+          state: { press: { attribute: "class", value: CSS.handle } },
+        },
+      });
+    });
+    describe("selected", () => {
+      themed("<calcite-handle selected></calcite-handle>", {
+        "--calcite-handle-background-color-selected": {
+          shadowSelector: `.${CSS.handleSelected}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-handle-icon-color-selected": {
+          shadowSelector: `.${CSS.handleSelected}`,
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });

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

@@ -1,3 +1,17 @@
+/**
+* CSS Custom Properties  
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-handle-background-color: Specifies the component's background color.
+* @prop --calcite-handle-background-color-hover: Specifies the component's background color on hover.
+* @prop --calcite-handle-background-color-selected: Specifies the component's background color when selected.
+* @prop --calcite-handle-icon-color: Specifies the component's icon color.
+* @prop --calcite-handle-icon-color-hover: Specifies the component's icon color on hover.
+* @prop --calcite-handle-icon-color-pressed: Specifies the component's icon color when pressed.
+* @prop --calcite-handle-icon-color-selected: Specifies the component's icon color when selected.
+*/
+
 :host {
   @apply flex;
 }
@@ -9,7 +23,9 @@
     justify-center
     self-stretch
     border-none;
-  color: theme("borderColor.color.input");
+
+  color: var(--calcite-handle-icon-color, var(--calcite-color-border-input));
+  background-color: var(--calcite-handle-background-color, transparent);
   padding-block: theme("spacing.3");
   padding-inline: theme("spacing.1");
   line-height: 0;
@@ -19,17 +35,20 @@
   }
 }
 
-:host(:not([disabled])) .handle {
+:host(:hover) .handle {
   @apply cursor-move;
-  &:hover {
-    @apply bg-foreground-2 text-color-1;
-  }
-  &:focus {
-    @apply text-color-1 focus-inset;
-  }
-  &--selected {
-    @apply bg-foreground-3 text-color-1;
-  }
+
+  color: var(--calcite-handle-icon-color, var(--calcite-color-text-1));
+  background-color: var(--calcite-handle-background-color, var(--calcite-color-foreground-2));
+}
+
+:host(:focus) {
+  color: var(--calcite-handle-icon-color, var(--calcite-color-text-1));
+}
+
+:host([selected]) {
+  color: var(--calcite-handle-icon-color, var(--calcite-color-text-1));
+  background-color: var(--calcite-handle-background-color, var(--calcite-color-foreground-3));
 }
 
 @include disabled();

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

@@ -17,6 +17,7 @@ import { checkbox } from "./custom-theme/checkbox";
 import { chips } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
+import { handle, handleTokens } from "./custom-theme/handle";
 import { icon } from "./custom-theme/icon";
 import { loader } from "./custom-theme/loader";
 import { notices } from "./custom-theme/notice";
@@ -104,7 +105,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}</div>
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}
+        <div style="margin-top: 40px">${handle}</div>
+        </div>
       </div>
     </div>
   </div>`;
@@ -119,6 +122,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...handleTokens,
   },
 };
 
@@ -135,6 +139,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...handleTokens,
     },
     true,
   );

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

@@ -0,0 +1,12 @@
+import { html } from "../../support/formatting";
+
+export const handleTokens = {
+  calciteHandleBackgroundColorHover: "",
+  calciteHandleBackgroundColorSelected: "",
+  calciteHandleIconColor: "",
+  calciteHandleIconColorHover: "",
+  calciteHandleIconColorPressed: "",
+  calciteHandleIconColorSelected: "",
+};
+
+export const handle = html`<calcite-handle></calcite-handle>`;