feat(slider): add component tokens

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

@@ -1,7 +1,16 @@
 import { newE2EPage, E2EPage, E2EElement, EventSpy } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, beforeEach } from "vitest";
 import { html } from "../../../support/formatting";
-import { defaults, disabled, formAssociated, hidden, labelable, renders, reflects } from "../../tests/commonTests";
+import {
+  defaults,
+  disabled,
+  formAssociated,
+  hidden,
+  labelable,
+  renders,
+  reflects,
+  themed,
+} from "../../tests/commonTests";
 import { getElementRect, getElementXY, isElementFocused } from "../../tests/utils";
 import { CSS } from "./resources";
 import type { Slider } from "./slider";
@@ -1189,4 +1198,129 @@ describe("calcite-slider", () => {
       });
     });
   });
+
+  describe("themed", () => {
+    describe("default", () => {
+      themed(html`<calcite-slider value="30"></calcite-slider>`, {
+        "--calcite-slider-track-color": {
+          shadowSelector: `.${CSS.track}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-slider-track-fill-color": {
+          shadowSelector: `.${CSS.trackRange}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-slider-handle-fill-color": {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "backgroundColor",
+        },
+      });
+    });
+
+    describe("text color", () => {
+      describe("should apply handle label", () => {
+        themed(html`<calcite-slider value="30" label-handles max-label="100" min-label="0"></calcite-slider>`, {
+          "--calcite-slider-text-color": {
+            shadowSelector: `.${CSS.handleLabel}`,
+            targetProp: "color",
+          },
+        });
+      });
+      describe("should apply tick labels", () => {
+        themed(
+          html`<calcite-slider value="30" label-ticks max-label="100" min-label="0" ticks="20"></calcite-slider>`,
+          {
+            "--calcite-slider-text-color": {
+              shadowSelector: `.${CSS.tickLabel}`,
+              targetProp: "color",
+            },
+          },
+        );
+      });
+    });
+
+    describe("handle extension", () => {
+      describe("should apply handle extension", () => {
+        themed(html`<calcite-slider value="30" precise></calcite-slider>`, {
+          "--calcite-slider-handle-extension-color": {
+            shadowSelector: `.${CSS.handleExtension}`,
+            targetProp: "backgroundColor",
+          },
+        });
+      });
+    });
+
+    describe("ticks", () => {
+      describe("should apply ticks", () => {
+        themed(
+          html`<calcite-slider value="30" label-ticks max-label="100" min-label="0" ticks="20"></calcite-slider>`,
+          {
+            "--calcite-slider-tick-color": {
+              shadowSelector: `.${CSS.tick}:not(.${CSS.tickActive})`,
+              targetProp: "backgroundColor",
+            },
+          },
+        );
+      });
+      describe("should apply ticks border", () => {
+        themed(
+          html`<calcite-slider value="30" label-ticks max-label="100" min-label="0" ticks="20"></calcite-slider>`,
+          {
+            "--calcite-slider-tick-border-color": {
+              shadowSelector: `.${CSS.tick}`,
+              targetProp: "borderColor",
+            },
+          },
+        );
+      });
+      describe("should apply ticks in selected range", () => {
+        themed(
+          html`<calcite-slider value="30" label-ticks max-label="100" min-label="0" ticks="20"></calcite-slider>`,
+          {
+            "--calcite-slider-tick-selected-color": {
+              shadowSelector: `.${CSS.tickActive}`,
+              targetProp: "backgroundColor",
+            },
+          },
+        );
+      });
+    });
+
+    describe("--calcite-slider-graph-color", () => {
+      describe("should apply graph", () => {
+        themed(
+          html`<calcite-slider
+              min="0"
+              max="100"
+              value="60"
+              step="1"
+              label-handles
+              id="basicHistogram"
+              scale="m"
+            ></calcite-slider>
+            <script>
+              const basicHistogram = document.getElementById("basicHistogram");
+
+              const histogram = [
+                [0, 0],
+                [20, 12],
+                [40, 35],
+                [60, 65],
+                [80, 25],
+                [90, 10],
+                [100, 0],
+              ];
+
+              basicHistogram.histogram = histogram;
+            </script>`,
+          {
+            "--calcite-slider-graph-color": {
+              shadowSelector: `.${CSS.graph}`,
+              targetProp: "color",
+            },
+          },
+        );
+      });
+    });
+  });
 });

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

@@ -1,3 +1,21 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-slider-text-color: Specifies the component's text color.
+ * @prop --calcite-slider-track-color: Specifies the component's track color. 
+ * @prop --calcite-slider-track-fill-color: Specifies the component's track fill color. 
+ * @prop --calcite-slider-handle-fill-color: Specifies the component's handle fill color. 
+ * @prop --calcite-slider-handle-extension-color: Specifies the component's handle extension color.
+ * @prop --calcite-slider-accent-color: Specifies the component's accent color.
+ * @prop --calcite-slider-tick-color: Specifies the component's tick color.
+ * @prop --calcite-slider-tick-border-color: Specifies the component's tick border color.
+ * @prop --calcite-slider-tick-selected-color: Specifies the component's tick color when in selected range.
+ * @prop --calcite-slider-graph-color: Specifies the component's graph color.
+ *
+ */
+
 .scale--s {
   --calcite-slider-handle-size: theme("spacing[2.5]");
   --calcite-slider-handle-extension-height: 0.4rem;
@@ -30,7 +48,8 @@
 
 .handle__label,
 .tick__label {
-  @apply text-color-2 font-medium;
+  @apply font-medium;
+  color: var(--calcite-slider-text-color, var(--calcite-color-text-2));
   font-size: var(--calcite-slider-container-font-size);
 }
 
@@ -125,9 +144,9 @@
 
   .handle {
     @apply focus-base
-      bg-foreground-1
       box-border
       rounded-full;
+    background-color: var(--calcite-slider-handle-fill-color, var(--calcite-color-foreground-1));
     block-size: var(--calcite-slider-handle-size);
     inline-size: var(--calcite-slider-handle-size);
     box-shadow: 0 0 0 2px var(--calcite-color-text-3) inset;
@@ -140,15 +159,15 @@
   .handle-extension {
     @apply w-0.5;
     block-size: var(--calcite-slider-handle-extension-height);
-    background-color: var(--calcite-color-text-3);
+    background-color: var(--calcite-slider-handle-extension-color, var(--calcite-color-text-3));
   }
 
   &:hover {
     .handle {
       box-shadow: 0 0 0 3px var(--calcite-color-brand) inset;
     }
     .handle-extension {
-      @apply bg-brand;
+      background-color: var(--calcite-slider-accent-color, var(--calcite-color-brand));
     }
   }
 
@@ -157,7 +176,7 @@
       @apply focus-outset;
     }
     .handle-extension {
-      @apply bg-brand;
+      background-color: var(--calcite-slider-accent-color, var(--calcite-color-brand));
     }
   }
 
@@ -221,29 +240,30 @@
 .thumb:focus,
 .thumb--active {
   .handle {
-    @apply bg-brand;
+    background-color: var(--calcite-slider-accent-color, var(--calcite-color-brand));
     box-shadow: 0 0 8px 0 rgb(0 0 0 / 16%); // shadow 1 press
   }
 }
 
 .thumb:hover.thumb--precise::after,
 .thumb:focus.thumb--precise::after,
 .thumb--active.thumb--precise::after {
-  @apply bg-brand;
+  background-color: var(--calcite-slider-accent-color, var(--calcite-color-brand));
 }
 
 .track {
   @apply relative h-0.5 rounded-none;
-  background-color: var(--calcite-color-border-2);
+  background-color: var(--calcite-slider-track-color, var(--calcite-color-border-2));
   transition: all var(--calcite-internal-animation-timing-medium) ease-in;
 }
 
 .track__range {
-  @apply bg-brand
-  absolute
+  @apply absolute
   top-0
   h-0.5;
+  background-color: var(--calcite-slider-track-fill-color, var(--calcite-color-brand));
 }
+
 .container--range {
   .track__range {
     &:hover {
@@ -287,15 +307,15 @@
     w-0.5
     border
     border-solid;
-  background-color: var(--calcite-color-border-input);
-  border-color: var(--calcite-color-foreground-1);
+  background-color: var(--calcite-slider-tick-color, var(--calcite-color-border-input));
+  border-color: var(--calcite-slider-tick-border-color, var(--calcite-color-foreground-1));
   inset-block-start: -2px;
   pointer-events: none;
   margin-inline-start: calc(-1 * theme("margin[0.5]"));
 }
 
 .tick--active {
-  @apply bg-brand;
+  background-color: var(--calcite-slider-tick-selected-color, var(--calcite-color-brand));
 }
 
 .tick__label {
@@ -322,7 +342,7 @@
 }
 
 .graph {
-  color: var(--calcite-color-foreground-3);
+  color: var(--calcite-slider-graph-color, var(--calcite-color-foreground-3));
   block-size: 48px;
 }
 

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

@@ -33,7 +33,7 @@ import { pagination } from "./custom-theme/pagination";
 import { popover, popoverTokens } from "./custom-theme/popover";
 import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
-import { slider } from "./custom-theme/slider";
+import { slider, sliderTokens } from "./custom-theme/slider";
 import { switchTokens } from "./custom-theme/switch";
 import { tabs } from "./custom-theme/tabs";
 import { textArea, textAreaTokens } from "./custom-theme/text-area";
@@ -154,6 +154,7 @@ const componentTokens = {
   ...tooltipTokens,
   ...tileTokens,
   ...navigationTokens,
+  ...sliderTokens,
 };
 
 export default {

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

@@ -1,5 +1,18 @@
 import { html } from "../../support/formatting";
 
+export const sliderTokens = {
+  calciteSliderTextColor: "",
+  calciteSliderTrackColor: "",
+  calciteSliderTrackFillColor: "",
+  calciteSliderHandleFillColor: "",
+  calciteSliderHandleExtensionColor: "",
+  calciteSliderAccentColor: "",
+  calciteSliderTickColor: "",
+  calciteSliderTickBorderColor: "",
+  calciteSliderTickSelectedColor: "",
+  calciteSliderGraphColor: "",
+};
+
 export const slider = html`<calcite-slider
   min="0"
   max="100"
@@ -8,4 +21,5 @@ export const slider = html`<calcite-slider
   step="1"
   min-label="Temperature range (lower)"
   max-label="Temperature range (upper)"
+  precise
 ></calcite-slider>`;

packages/calcite-components/src/demos/slider.html

@@ -52,6 +52,19 @@
         margin: 60px 0;
         border-top: 1px solid var(--calcite-color-border-2);
       }
+
+      .themed {
+        --calcite-slider-track-color: darkblue;
+        --calcite-slider-track-fill-color: green;
+        --calcite-slider-handle-fill-color: cyan;
+        --calcite-slider-handle-extension-color: rgb(183, 0, 0);
+        --calcite-slider-accent-color: rgb(247, 0, 255);
+        --calcite-slider-tick-color: white;
+        --calcite-slider-tick-border-color: red;
+        --calcite-slider-tick-selected-color: cyan;
+        --calcite-slider-text-color: red;
+        --calcite-slider-graph-color: lime;
+      }
     </style>
     <script src="./_assets/head.ts"></script>
     <script type="module" src="./_assets/demo-form.ts"></script>
@@ -1599,6 +1612,55 @@ <h1 style="margin: 0 auto; text-align: center">Slider</h1>
         </div>
       </div>
 
+      <div class="parent">
+        <div class="child right-aligned-text">themed</div>
+
+        <div class="child">
+          <calcite-slider
+            label-ticks
+            label-handles
+            min="0"
+            max="100"
+            min-value="20"
+            max-value="80"
+            step="10"
+            ticks="10"
+            precise
+            scale="s"
+            class="themed"
+          >
+          </calcite-slider>
+          <calcite-slider
+            label-ticks
+            label-handles
+            min="0"
+            max="100"
+            min-value="20"
+            max-value="80"
+            step="10"
+            ticks="10"
+            precise
+            scale="m"
+            class="themed"
+          >
+          </calcite-slider>
+          <calcite-slider
+            label-ticks
+            label-handles
+            min="0"
+            max="100"
+            min-value="20"
+            max-value="80"
+            step="10"
+            ticks="10"
+            precise
+            scale="l"
+            class="themed"
+          >
+          </calcite-slider>
+        </div>
+      </div>
+
       <hr />
 
       <div class="parent">