feat(graph): add component tokens (#11355)

**Related Issue:** #7180

## Summary

Add `graph` component tokens.

`--calcite-graph-highlight-fill-color`: Specifies the fill color of the
`highlight` element, when present.

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

@@ -1,7 +1,31 @@
 import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, beforeEach } from "vitest";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import type { Graph } from "./graph";
+import { CSS } from "./resources";
+
+async function createGraphWithData(): Promise<E2EPage> {
+  const page = await newE2EPage();
+  await page.setContent(html`<calcite-graph highlight-min="25" highlight-max="75"></calcite-graph>`);
+  await page.$eval("calcite-graph", (el: Graph["el"]) => {
+    el.data = [
+      [0, 0],
+      [10, 80],
+      [20, 20],
+      [30, 30],
+      [40, 42],
+      [50, 50],
+      [60, 55],
+      [70, 48],
+      [80, 30],
+      [90, 10],
+      [100, 0],
+    ];
+  });
+  await page.waitForChanges();
+  return page;
+}
 
 describe("calcite-graph", () => {
   describe("renders", () => {
@@ -20,18 +44,7 @@ describe("calcite-graph", () => {
     let page: E2EPage;
 
     beforeEach(async () => {
-      page = await newE2EPage();
-      await page.setContent("<calcite-graph></calcite-graph>");
-      await page.$eval("calcite-graph", (el: Graph["el"]) => {
-        el.data = [
-          [0, 4],
-          [1, 7],
-          [4, 6],
-          [6, 2],
-        ];
-      });
-
-      await page.waitForChanges();
+      page = await createGraphWithData();
     });
 
     accessible(() => ({ tag: "calcite-graph", page }));
@@ -92,4 +105,18 @@ describe("calcite-graph", () => {
 
     expect(fill).toBe(`url(#${linearGradientId})`);
   });
+
+  describe("theme", () => {
+    themed(
+      async () => {
+        return { tag: "calcite-graph", page: await createGraphWithData() };
+      },
+      {
+        "--calcite-graph-highlight-fill-color": {
+          shadowSelector: `.${CSS.graphPathHighlight}`,
+          targetProp: "fill",
+        },
+      },
+    );
+  });
 });

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

@@ -1,3 +1,11 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-graph-highlight-fill-color: Specifies the fill color of the `highlight` element, when present.
+ */
+
 :host {
   @apply block;
   block-size: 100%;
@@ -9,7 +17,7 @@
   @apply m-0 block h-full w-full p-0;
 
   .graph-path--highlight {
-    fill: var(--calcite-color-brand);
+    fill: var(--calcite-graph-highlight-fill-color, var(--calcite-color-brand));
     @apply opacity-50;
   }
 }

packages/calcite-components/src/components/graph/graph.tsx

@@ -5,6 +5,7 @@ import { createObserver } from "../../utils/observers";
 import { ColorStop, DataSeries, Point } from "./interfaces";
 import { area, range, translate } from "./util";
 import { styles } from "./graph.scss";
+import { CSS } from "./resources";
 
 declare global {
   interface DeclareElements {
@@ -87,7 +88,7 @@ export class Graph extends LitElement {
       return (
         <svg
           ariaHidden="true"
-          class="svg"
+          class={CSS.svg}
           height={height}
           preserveAspectRatio="none"
           viewBox={`0 0 ${width} ${height}`}
@@ -117,7 +118,7 @@ export class Graph extends LitElement {
     return (
       <svg
         ariaHidden="true"
-        class="svg"
+        class={CSS.svg}
         height={height}
         preserveAspectRatio="none"
         viewBox={`0 0 ${width} ${height}`}
@@ -174,12 +175,12 @@ export class Graph extends LitElement {
               />
             </mask>,
 
-            <path class="graph-path" d={areaPath} fill={fill} mask={`url(#${id}1)`} />,
-            <path class="graph-path--highlight" d={areaPath} fill={fill} mask={`url(#${id}2)`} />,
-            <path class="graph-path" d={areaPath} fill={fill} mask={`url(#${id}3)`} />,
+            <path class={CSS.graphPath} d={areaPath} fill={fill} mask={`url(#${id}1)`} />,
+            <path class={CSS.graphPathHighlight} d={areaPath} fill={fill} mask={`url(#${id}2)`} />,
+            <path class={CSS.graphPath} d={areaPath} fill={fill} mask={`url(#${id}3)`} />,
           ]
         ) : (
-          <path class="graph-path" d={areaPath} fill={fill} />
+          <path class={CSS.graphPath} d={areaPath} fill={fill} />
         )}
       </svg>
     );

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

@@ -0,0 +1,5 @@
+export const CSS = {
+  svg: "svg",
+  graphPath: "graph-path",
+  graphPathHighlight: "graph-path--highlight",
+};

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

@@ -24,6 +24,7 @@ import { chips, chipTokens } from "./custom-theme/chips";
 import { comboboxItem } from "./custom-theme/combobox-item";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
+import { graph, graphTokens } from "./custom-theme/graph";
 import { handle, handleTokens } from "./custom-theme/handle";
 import { icon } from "./custom-theme/icon";
 import { input, inputTokens } from "./custom-theme/input";
@@ -133,7 +134,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
       </div>
       <div class="demo-column">
         ${datePicker} ${tabs} ${tabsBordered} ${label} ${link} ${list} ${loader} ${calciteSwitch} ${avatarIcon}
-        ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
+        ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${graph} ${textArea} ${popover} ${tile} ${tooltip}
         ${comboboxItem}
       </div>
       <div class="demo-column">
@@ -162,6 +163,7 @@ const componentTokens = {
   ...checkboxTokens,
   ...chipTokens,
   ...handleTokens,
+  ...graphTokens,
   ...inputTokens,
   ...labelTokens,
   ...linkTokens,

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

@@ -0,0 +1,25 @@
+import { html } from "../../support/formatting";
+
+export const graphTokens = {
+  calciteGraphHighlightFillColor: "",
+};
+
+export const graph = html`<div style="width:300px; height:100px">
+    <calcite-graph id="my-graph" highlight-min="25" highlight-max="75"></calcite-graph>
+  </div>
+  <script>
+    const data = [
+      [0, 0],
+      [10, 80],
+      [20, 20],
+      [30, 30],
+      [40, 42],
+      [50, 50],
+      [60, 55],
+      [70, 48],
+      [80, 30],
+      [90, 10],
+      [100, 0],
+    ];
+    document.getElementById("my-graph").data = data;
+  </script>`;

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

@@ -80,6 +80,14 @@
         </div>
       </div>
 
+      <!-- Themed -->
+      <div class="parent" style="--calcite-graph-highlight-fill-color: purple">
+        <div class="child right-aligned-text">Themed</div>
+        <div class="child">
+          <calcite-graph class="highlight-range color-stops"></calcite-graph>
+        </div>
+      </div>
+
       <script>
         // Fill all graphs with the same data.
         const data = [