From a9161fbc99082a1e0b421ea4a51c91e4da2802b1 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Wed, 21 Feb 2024 10:10:14 -0800
Subject: [PATCH] feat(progress): add component tokens (#8661)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Related Issue:** #7180

## Summary
Adds the following component tokens : 🥇

```
--calcite-progress-background-color: defines the background color of the component.
--calcite-progress-bar-fill-color: defines the background color of the progress bar.
--calcite-progress-text-color: defines the text color of the component.
```

---------

Co-authored-by: Ali Stump <astump@esri.com>
---
 .../src/components/progress/progress.scss     | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss
index 7302fbcfde9..f88cc3ff694 100644
--- a/packages/calcite-components/src/components/progress/progress.scss
+++ b/packages/calcite-components/src/components/progress/progress.scss
@@ -1,22 +1,40 @@
 @import "../../assets/styles/animation";
 
+/**
+* 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.
+*/
+
 :host {
-  @apply relative block w-full;
+  --calcite-progress-background-color: var(--calcite-color-border-3);
+  --calcite-progress-fill-color: var(--calcite-color-brand);
+  --calcite-progress-text-color: var(--calcite-color-text-2);
+
+  @apply relative block;
+  inline-size: var(--calcite-container-size-content-fluid);
 }
 
 .track,
 .bar {
-  @apply absolute top-0;
-  block-size: 2px;
+  @apply absolute top-0 z-default;
+
+  block-size: var(--calcite-size-xxxs);
 }
 
 .track {
-  @apply z-default w-full overflow-hidden;
-  background: theme("borderColor.color.3");
+  @apply overflow-hidden;
+
+  inline-size: var(--calcite-container-size-content-fluid);
+  background-color: var(--calcite-progress-background-color);
 }
 
 .bar {
-  @apply bg-brand z-default;
+  background-color: var(--calcite-progress-fill-color);
 }
 
 @media (forced-colors: active) {
@@ -30,6 +48,7 @@
 
 .indeterminate {
   @apply w-1/5;
+
   animation: looping-progress-bar-ani scaleDuration(--calcite-internal-animation-timing-medium, 11) linear infinite;
   &.calcite--rtl {
     animation-name: looping-progress-bar-ani-rtl;
@@ -42,7 +61,9 @@
 
 .text {
   @apply text-n2h px-0 pt-4 pb-0 text-center font-medium;
-  color: var(--calcite-color-text-2);
+
+  font-size: theme("fontSize.n2h");
+  color: var(--calcite-progress-text-color);
 }
 
 @keyframes looping-progress-bar-ani {