Skip to content

Commit

Permalink
feat(progress): add component tokens (#8661)
Browse files Browse the repository at this point in the history
**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>
  • Loading branch information
Elijbet and alisonailea authored Feb 21, 2024
1 parent 97d77c3 commit a9161fb
Showing 1 changed file with 28 additions and 7 deletions.
35 changes: 28 additions & 7 deletions packages/calcite-components/src/components/progress/progress.scss
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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;
Expand All @@ -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 {
Expand Down

0 comments on commit a9161fb

Please sign in to comment.