feat(loader): add component tokens

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,98 @@ 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-color": {
+          shadowSelector: `.${CSS.text}`,
+          targetProp: "color",
+        },
+      });
+    });
+    describe("text weight", () => {
+      themed(html`<calcite-loader label="loading" scale="l" text="Themed loader"></calcite-loader>`, {
+        "--calcite-loader-text-weight": {
+          shadowSelector: `.${CSS.text}`,
+          targetProp: "fontWeight",
+        },
+      });
+    });
+    describe("text margin", () => {
+      themed(html`<calcite-loader label="loading" scale="l" text="Themed loader"></calcite-loader>`, {
+        "--calcite-loader-text-spacing": {
+          shadowSelector: `.${CSS.text}`,
+          targetProp: "marginBlockStart",
+        },
+      });
+    });
+    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-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: 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-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,7 +25,7 @@
   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"]) {
@@ -51,18 +57,20 @@
 
 .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-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);
   line-height: var(--calcite-internal-loader-value-line-height);
   align-self: center;
+  color: var(--calcite-loader-color, var(--calcite-color-text-1));
 }
 
 .rings {
@@ -79,11 +87,11 @@
 }
 
 .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;
 }
@@ -116,7 +124,7 @@
   }
 
   .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,17 @@
         align-items: flex-end;
       }
 
-      .green {
-        --calcite-color-brand: #50ba5f;
-        --calcite-color-brand-hover: #1a6324;
-        --calcite-color-brand-press: #338033;
+      .themed {
+        --calcite-loader-font-size: 1.5rem;
+        --calcite-loader-size: 9rem;
+        --calcite-loader-size-inline: 4rem;
+        --calcite-loader-progress-color-inline: pink;
+        --calcite-loader-spacing: 30px;
+        --calcite-loader-color: red;
+        --calcite-loader-track-color: navy;
+        --calcite-loader-progress-color: orange;
+        --calcite-loader-text-spacing: 20px;
+        --calcite-loader-text-weight: bold;
       }
     </style>
     <script src="./_assets/head.ts"></script>
@@ -138,15 +145,23 @@ <h1 style="margin: 0 auto; text-align: center">Loader</h1>
         <div class="child right-aligned-text">Custom theme</div>
 
         <div class="child">
-          <calcite-loader label="loading" scale="s" class="green"></calcite-loader>
+          <calcite-loader label="loading" scale="s" inline class="themed"></calcite-loader>
+          <p>Inline</p>
         </div>
 
         <div class="child">
-          <calcite-loader label="loading" scale="m" class="green"></calcite-loader>
+          <calcite-loader label="loading" scale="s" text="Indeterminate + text" class="themed"></calcite-loader>
         </div>
 
         <div class="child">
-          <calcite-loader label="loading" scale="l" class="green"></calcite-loader>
+          <calcite-loader
+            label="loading"
+            scale="l"
+            text="Determinate-value + text"
+            type="determinate-value"
+            value="30"
+            class="themed"
+          ></calcite-loader>
         </div>
       </div>