Skip to content

feat(progress): add component tokens #8661

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Elijbet merged 6 commits into from
Feb 21, 2024
Merged

feat(progress): add component tokens #8661

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
74f8529
feat(progress): add component tokens
Elijbet Jan 28, 2024
4b36f83
cleanup
Elijbet Jan 29, 2024
bf1eecf
label inline and block padding
Elijbet Jan 29, 2024
6d54811
feat(progress): update component tokens
Feb 14, 2024
628a3ea
refactor and cleanup
Elijbet Feb 18, 2024
a6da63a
typo text-color
Elijbet Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 28 additions & 7 deletions packages/calcite-components/src/components/progress/progress.scss
View file
Open in desktop
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);
Comment thread
alisonailea marked this conversation as resolved.
--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