feat(progress): add component tokens

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

@@ -1,4 +1,6 @@
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { accessible, hidden, renders, themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
 
 describe("calcite-progress", () => {
   describe("renders", () => {
@@ -16,4 +18,21 @@ describe("calcite-progress", () => {
   describe("accessible with value", () => {
     accessible(`<calcite-progress value="50" type="indeterminate" text="percentage"></calcite-progress>`);
   });
+
+  describe("theme", () => {
+    themed(html`<calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>`, {
+      "--calcite-progress-background-color": {
+        shadowSelector: `.${CSS.track}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-progress-fill-color": {
+        shadowSelector: `.${CSS.bar}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-progress-text-color": {
+        shadowSelector: `.${CSS.text}`,
+        targetProp: "color",
+      },
+    });
+  });
 });

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

@@ -1,3 +1,13 @@
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-progress-background-color: Defines the background color of the component.
+* @prop --calcite-progress-fill-color: Defines the background color of the progress bar.
+* @prop --calcite-progress-text-color: Defines the text color of the component.
+*/
+
 @import "../../assets/styles/animation";
 
 :host {
@@ -12,11 +22,13 @@
 
 .track {
   @apply z-default w-full overflow-hidden;
-  background: theme("borderColor.color.3");
+  background-color: var(--calcite-progress-background-color, var(--calcite-color-border-3));
 }
 
 .bar {
-  @apply bg-brand z-default;
+  @apply z-default;
+
+  background-color: var(--calcite-progress-fill-color, var(--calcite-color-brand));
 }
 
 @media (forced-colors: active) {
@@ -42,7 +54,7 @@
 
 .text {
   @apply text-n2h px-0 pt-4 pb-0 text-center font-medium;
-  color: var(--calcite-color-text-2);
+  color: var(--calcite-progress-text-color, var(--calcite-color-text-2));
 }
 
 @keyframes looping-progress-bar-ani {

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

@@ -0,0 +1,5 @@
+export const CSS = {
+  track: "track",
+  bar: "bar",
+  text: "text",
+};

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

@@ -21,6 +21,7 @@ import { icon } from "./custom-theme/icon";
 import { loader } from "./custom-theme/loader";
 import { notices } from "./custom-theme/notice";
 import { pagination } from "./custom-theme/pagination";
+import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
 import { calciteSwitch } from "./custom-theme/switch";
@@ -104,7 +105,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}</div>
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}
+        <div style="margin-top: 40px">${progress}</div>
+        </div>
       </div>
     </div>
   </div>`;
@@ -119,6 +122,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...progressTokens,
   },
 };
 
@@ -135,6 +139,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...progressTokens,
     },
     true,
   );

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

@@ -0,0 +1,9 @@
+import { html } from "../../support/formatting";
+
+export const progressTokens = {
+  calciteProgressBackgroundColor: "",
+  calciteProgressFillColor: "",
+  calciteProgressTextColor: "",
+};
+
+export const progress = html`<calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>`;