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,16 @@
+/**
+* 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-selected: Specifies the component's icon color when selected.
+*/
+
 :host {
   @apply flex;
 }
@@ -9,7 +22,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;
@@ -22,13 +37,17 @@
 :host(:not([disabled])) .handle {
   @apply cursor-move;
   &:hover {
-    @apply bg-foreground-2 text-color-1;
+    color: var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1));
+    background-color: var(--calcite-handle-background-color-hover, var(--calcite-color-foreground-2));
   }
   &:focus {
-    @apply text-color-1 focus-inset;
+    @apply focus-inset;
+
+    color: var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1));
   }
   &--selected {
-    @apply bg-foreground-3 text-color-1;
+    color: var(--calcite-handle-icon-color-selected, var(--calcite-color-text-1));
+    background-color: var(--calcite-handle-background-color-selected, var(--calcite-color-foreground-3));
   }
 }
 

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 { input, inputTokens } from "./custom-theme/input";
 import { inputNumber } from "./custom-theme/input-number";
@@ -109,8 +110,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${progress}
-        </div>
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${progress} ${handle}</div>
       </div>
     </div>
   </div>`;
@@ -125,6 +125,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...handleTokens,
     ...progressTokens,
     ...inputTokens,
   },
@@ -143,6 +144,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...handleTokens,
       ...progressTokens,
       ...inputTokens,
     },

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>`;

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

@@ -6,4 +6,8 @@ export const progressTokens = {
   calciteProgressTextColor: "",
 };
 
-export const progress = html`<calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>`;
+export const progress = html`
+  <calcite-label layout="inline">
+    <calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>
+  </calcite-label>
+`;