feat(loader): add component tokens (#10979)

**Related Issue:** #7180 #6695

## Summary
Add design tokens for loader component along with e2e tests.

New tokens added:
`--calcite-loader-progress-color-inline`: Specifies the width and height
of the component when set to inline.
`--calcite-loader-text-spacing`: Specifies the component's text margin.
`--calcite-loader-text-weight`: Specifies the component's font weight.
`--calcite-loader-color`: Specifies the component's text color.
`--calcite-loader-progress-color`: Specifies the component's progress
ring color.
`--calcite-loader-track-color`: Specifies the component's track color.

Renamed tokens:
`--calcite-loader-padding` --> `--calcite-loader-spacing`

⚠️ Deprecated tokens:
`--calcite-loader-size-inline`

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

@@ -1,6 +1,7 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { hidden, renders } from "../../tests/commonTests";
+import { hidden, renders, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
 describe("calcite-loader", () => {
@@ -58,3 +59,82 @@ describe("calcite-loader", () => {
     expect(loader.getAttribute("id").length).toEqual(36);
   });
 });
+
+describe("themed", () => {
+  describe("default", () => {
+    themed(html`<calcite-loader></calcite-loader>`, {
+      "--calcite-loader-track-color": {
+        shadowSelector: `.${CSS.trackRing}`,
+        targetProp: "stroke",
+      },
+      "--calcite-loader-progress-color": {
+        shadowSelector: `.${CSS.progressRing}`,
+        targetProp: "stroke",
+      },
+    });
+  });
+
+  describe("text", () => {
+    describe("text color", () => {
+      themed(html`<calcite-loader label="loading" scale="l" text="Themed loader"></calcite-loader>`, {
+        "--calcite-loader-text-color": {
+          shadowSelector: `.${CSS.text}`,
+          targetProp: "color",
+        },
+      });
+    });
+    describe("percentage text size", () => {
+      themed(html`<calcite-loader label="loading" scale="l" type="determinate-value"></calcite-loader>`, {
+        "--calcite-loader-font-size": {
+          shadowSelector: `.${CSS.percentage}`,
+          targetProp: "fontSize",
+        },
+      });
+    });
+    describe("percentage text color", () => {
+      themed(
+        html`<calcite-loader
+          label="loading"
+          scale="l"
+          text="Themed loader"
+          type="determinate-value"
+          value="30"
+        ></calcite-loader>`,
+        {
+          "--calcite-loader-text-color": {
+            shadowSelector: `.${CSS.percentage}`,
+            targetProp: "color",
+          },
+        },
+      );
+    });
+  });
+
+  describe("size", () => {
+    describe("loader size", () => {
+      themed(html`<calcite-loader label="loading" scale="l"></calcite-loader>`, {
+        "--calcite-loader-size": {
+          shadowSelector: `.${CSS.ring}`,
+          targetProp: "blockSize",
+        },
+      });
+    });
+    describe("inline loader size", () => {
+      themed(html`<calcite-loader label="loading" scale="l" inline></calcite-loader>`, {
+        "--calcite-loader-size-inline": {
+          shadowSelector: `.${CSS.ring}`,
+          targetProp: "inlineSize",
+        },
+      });
+    });
+  });
+
+  describe("inline color", () => {
+    themed(html`<calcite-loader inline></calcite-loader>`, {
+      "--calcite-loader-progress-color-inline": {
+        shadowSelector: `.${CSS.progressRing}`,
+        targetProp: "stroke",
+      },
+    });
+  });
+});

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

@@ -4,9 +4,15 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `"determinate"`.
- * @prop --calcite-loader-size: The width and height of a non-inline loader.
- * @prop --calcite-loader-size-inline: The width and height of an inline loader
- * @prop --calcite-loader-padding : Specifies the padding of the loader.
+ * @prop --calcite-loader-size: Specifies the width and height of the component when not set to inline.
+ * @prop --calcite-loader-size-inline: [Deprecated] Use `--calcite-loader-size`. Specifies the width and height of the component when set to inline.
+ * @prop --calcite-loader-spacing: Specifies the the component's padding.
+ * @prop --calcite-loader-progress-color-inline: Specifies the width and height of the component when set to inline.
+ * @prop --calcite-loader-text-spacing: Specifies the component's text margin.
+ * @prop --calcite-loader-text-weight: Specifies the component's font weight.
+ * @prop --calcite-loader-text-color: Specifies the component's text color.
+ * @prop --calcite-loader-progress-color: Specifies the component's progress ring color.
+ * @prop --calcite-loader-track-color: Specifies the component's track color.
  */
 
 @import "../../assets/styles/animation";
@@ -19,71 +25,73 @@
   stroke-width: var(--calcite-internal-stroke-width);
   fill: none;
   transform: scale(1, 1);
-  padding-block: var(--calcite-loader-padding, theme("spacing.16"));
+  padding-block: var(--calcite-loader-spacing, theme("spacing.16"));
 }
 
 :host([scale="s"]) {
   --calcite-internal-stroke-width: 3;
   --calcite-internal-text-offset: var(--calcite-spacing-xxs);
-  --calcite-loader-font-size: var(--calcite-font-size--3);
-  --calcite-loader-size: theme("spacing.8");
-  --calcite-loader-size-inline: theme("spacing.3");
+  --calcite-internal-loader-font-size: var(--calcite-font-size--3);
+  --calcite-internal-loader-size: theme("spacing.8");
+  --calcite-internal-loader-size-inline: theme("spacing.3");
   --calcite-internal-loader-value-line-height: 0.625rem; // 10px
 }
 
 :host([scale="m"]) {
   --calcite-internal-stroke-width: 6;
   --calcite-internal-text-offset: var(--calcite-spacing-sm);
-  --calcite-loader-font-size: theme("fontSize.0");
-  --calcite-loader-size: theme("spacing.16");
-  --calcite-loader-size-inline: theme("spacing.4");
+  --calcite-internal-loader-font-size: theme("fontSize.0");
+  --calcite-internal-loader-size: theme("spacing.16");
+  --calcite-internal-loader-size-inline: theme("spacing.4");
   --calcite-internal-loader-value-line-height: 1.375rem; // 22px
 }
 
 :host([scale="l"]) {
   --calcite-internal-stroke-width: 8;
   --calcite-internal-text-offset: var(--calcite-spacing-md);
-  --calcite-loader-font-size: theme("fontSize.2");
-  --calcite-loader-size: theme("spacing.24");
-  --calcite-loader-size-inline: theme("spacing.6");
+  --calcite-internal-loader-font-size: theme("fontSize.2");
+  --calcite-internal-loader-size: theme("spacing.24");
+  --calcite-internal-loader-size-inline: theme("spacing.6");
   --calcite-internal-loader-value-line-height: 1.71875rem; // 27.5px
 }
 
 .text {
   @apply text-n2h
-  text-color-1
   block
   text-center;
-  margin-block-start: var(--calcite-internal-text-offset);
+  margin-block-start: var(--calcite-loader-text-spacing, var(--calcite-internal-text-offset));
+  font-weight: var(--calcite-loader-text-weight, var(--calcite-font-weight-normal));
+  color: var(--calcite-loader-text-color, var(--calcite-color-text-1));
 }
 
 .percentage {
-  @apply block text-center text-color-1;
+  @apply block text-center;
   font-size: var(--calcite-loader-font-size);
-  inline-size: var(--calcite-loader-size);
+  inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-size));
   line-height: var(--calcite-internal-loader-value-line-height);
   align-self: center;
+  color: var(--calcite-loader-text-color, var(--calcite-color-text-1));
 }
 
 .rings {
   @apply relative flex overflow-visible opacity-100;
-  inline-size: var(--calcite-loader-size);
-  block-size: var(--calcite-loader-size);
+  inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-size));
+  block-size: var(--calcite-loader-size, var(--calcite-internal-loader-size));
 }
 
 .ring {
   @apply absolute top-0 origin-center overflow-visible;
   inset-inline-start: 0;
-  inline-size: var(--calcite-loader-size);
-  block-size: var(--calcite-loader-size);
+  inline-size: var(--calcite-loader-size, var(--calcite-internal-loader-size));
+  block-size: var(--calcite-loader-size, var(--calcite-internal-loader-size));
 }
 
 .ring--track {
-  stroke: var(--calcite-color-transparent-press);
+  stroke: var(--calcite-loader-track-color, var(--calcite-color-transparent-press));
 }
 
 .ring--progress {
-  stroke: var(--calcite-color-brand);
+  stroke: var(--calcite-loader-progress-color, var(--calcite-color-brand));
   transform: rotate(-90deg);
   transition: all var(--calcite-internal-animation-timing-fast) linear;
 }
@@ -98,25 +106,45 @@
   --calcite-internal-stroke-width: 2;
 
   @apply relative m-0 stroke-current stroke-2 py-0;
-  block-size: var(--calcite-loader-size-inline);
-  min-block-size: var(--calcite-loader-size-inline);
-  inline-size: var(--calcite-loader-size-inline);
-  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);
+  block-size: var(--calcite-loader-size, var(--calcite-loader-size-inline, var(--calcite-internal-loader-size-inline)));
+  min-block-size: var(
+    --calcite-loader-size,
+    var(--calcite-loader-size-inline, var(--calcite-internal-loader-size-inline))
+  );
+  inline-size: var(
+    --calcite-loader-size,
+    var(--calcite-loader-size-inline, var(--calcite-internal-loader-size-inline))
+  );
+  vertical-align: calc(
+    var(--calcite-loader-size, var(--calcite-loader-size-inline, var(--calcite-internal-loader-size-inline))) * -1 * 0.2
+  );
 
   .rings {
     @apply top-0 m-0;
     inset-inline-start: 0;
-    inline-size: var(--calcite-loader-size-inline);
-    block-size: var(--calcite-loader-size-inline);
+    inline-size: var(
+      --calcite-loader-size,
+      var(--calcite-loader-size-inline, var(--calcite-internal-loader-size-inline))
+    );
+    block-size: var(
+      --calcite-loader-size,
+      var(--calcite-loader-size-inline, var(--calcite-internal-loader-size-inline))
+    );
   }
 
   .ring {
-    inline-size: var(--calcite-loader-size-inline);
-    block-size: var(--calcite-loader-size-inline);
+    inline-size: var(
+      --calcite-loader-size,
+      var(--calcite-loader-size-inline, var(--calcite-internal-loader-size-inline))
+    );
+    block-size: var(
+      --calcite-loader-size,
+      var(--calcite-loader-size-inline, var(--calcite-internal-loader-size-inline))
+    );
   }
 
   .ring--progress {
-    stroke: currentColor;
+    stroke: var(--calcite-loader-progress-color-inline, currentColor);
   }
 }
 

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

@@ -29,7 +29,7 @@ import { inputText } from "./custom-theme/input-text";
 import { label, labelTokens } from "./custom-theme/label";
 import { link, linkTokens } from "./custom-theme/link";
 import { list, listTokens } from "./custom-theme/list";
-import { loader } from "./custom-theme/loader";
+import { loader, loaderTokens } from "./custom-theme/loader";
 import { notices } from "./custom-theme/notice";
 import { pagination } from "./custom-theme/pagination";
 import { popover, popoverTokens } from "./custom-theme/popover";
@@ -154,6 +154,7 @@ const componentTokens = {
   ...labelTokens,
   ...linkTokens,
   ...listTokens,
+  ...loaderTokens,
   ...navigationLogoTokens,
   ...navigationTokens,
   ...navigationUserTokens,

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

@@ -1,3 +1,16 @@
 import { html } from "../../support/formatting";
 
+export const loaderTokens = {
+  calciteLoaderFontSize: "",
+  calciteLoaderSize: "",
+  calciteLoaderSizeInline: "",
+  calciteLoaderProgressColorInline: "",
+  calciteLoaderSpacing: "",
+  calciteLoaderColor: "",
+  calciteLoaderTrackColor: "",
+  calciteLoaderProgressColor: "",
+  calciteLoaderTextSpacing: "",
+  calciteLoaderTextWeight: "",
+};
+
 export const loader = html`<calcite-loader class="chromatic-ignore"></calcite-loader>`;

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

@@ -27,10 +27,21 @@
         align-items: flex-end;
       }
 
-      .green {
-        --calcite-color-brand: #50ba5f;
-        --calcite-color-brand-hover: #1a6324;
-        --calcite-color-brand-press: #338033;
+      .themed {
+        --calcite-loader-font-size: 1rem;
+        --calcite-loader-progress-color-inline: pink;
+        --calcite-loader-spacing: 30px;
+        --calcite-loader-text-color: red;
+        --calcite-loader-track-color: navy;
+        --calcite-loader-progress-color: orange;
+        --calcite-loader-text-spacing: 20px;
+        --calcite-loader-text-weight: bold;
+      }
+
+      .themed-inline {
+        --calcite-loader-track-color: lightblue;
+        --calcite-loader-progress-color-inline: pink;
+        --calcite-loader-size: 5rem;
       }
     </style>
     <script src="./_assets/head.ts"></script>
@@ -135,18 +146,49 @@ <h1 style="margin: 0 auto; text-align: center">Loader</h1>
 
       <!-- Custom theme -->
       <div class="parent">
-        <div class="child right-aligned-text">Custom theme</div>
+        <div class="child right-aligned-text">Themed</div>
+
+        <div class="child">
+          <calcite-loader label="loading" scale="s" text="Indeterminate + text" class="themed"></calcite-loader>
+        </div>
+
+        <div class="child">
+          <calcite-loader
+            label="loading"
+            scale="m"
+            text="Determinate + text"
+            type="determinate"
+            value="30"
+            class="themed"
+          ></calcite-loader>
+        </div>
+
+        <div class="child">
+          <calcite-loader
+            label="loading"
+            scale="l"
+            text="Determinate-value + text"
+            type="determinate-value"
+            value="30"
+            class="themed"
+          ></calcite-loader>
+        </div>
+      </div>
+
+      <!-- Custom theme inline -->
+      <div class="parent">
+        <div class="child right-aligned-text">Themed inline</div>
 
         <div class="child">
-          <calcite-loader label="loading" scale="s" class="green"></calcite-loader>
+          <calcite-loader label="loading" scale="s" inline class="themed-inline"></calcite-loader>
         </div>
 
         <div class="child">
-          <calcite-loader label="loading" scale="m" class="green"></calcite-loader>
+          <calcite-loader label="loading" scale="m" inline class="themed-inline"></calcite-loader>
         </div>
 
         <div class="child">
-          <calcite-loader label="loading" scale="l" class="green"></calcite-loader>
+          <calcite-loader label="loading" scale="l" inline class="themed-inline"></calcite-loader>
         </div>
       </div>