Skip to content
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

feat(progress): add component tokens #8661

Merged
merged 6 commits into from
Feb 21, 2024
Merged

feat(progress): add component tokens #8661

Changes from 1 commit
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
alisonailea 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
45 changes: 24 additions & 21 deletions packages/calcite-components/src/components/progress/progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,47 +5,52 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-progress-background-color: The background color of the component.
* @prop --calcite-progress-color: The font color of the component.
* @prop --calcite-progress-font-size: The font size of the component.
*
* @prop —-calcite-progress-label-inline-padding: Component label inline padding
* @prop —-calcite-progress-label-block-end-padding: Component label block-end padding.
* @prop —-calcite-progress-label-block-start-padding: Component label block-start padding.
* @prop --calcite-progress-background-color: defines the background color of the component.
* @prop --calcite-progress-bar-background-color: defines the background color of the progress bar.
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-progress-text-color: defines the text color of the component.
* @prop --calcite-progress-z-index: defines the z-index of the component.
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
*/

:host {
--calcite-progress-background-color: var(--calcite-color-border-3);
--calcite-progress-bar-background-color: var(--calcite-color-brand);
--calcite-progress-text-color: var(--calcite-color-text-2);
--calcite-progress-z-index: var(--calcite-z-index);

@apply relative block;
inline-size: var(--calcite-container-size-content-fluid);
--calcite-progress-background-color: var(--calcite-color-brand);
}

.track,
.bar {
@apply absolute top-0;

block-size: --calcite-size-xxxs;
z-index: var(--calcite-z-index);
block-size: var(--calcite-size-xxxs);
z-index: var(--calcite-progress-z-index);
}

.track {
@apply overflow-hidden;

inline-size: var(--calcite-container-size-content-fluid);
--calcite-progress-background-color: var(--calcite-color-border-3);
background-color: var(--calcite-progress-background-color);
}

.bar {
background-color: var(--calcite-progress-bar-background-color);
}

@media (forced-colors: active) {
.track {
--calcite-progress-background-color: highlightText;
background-color: highlightText;
}
.bar {
--calcite-progress-background-color: linkText;
background-color: linkText;
}
}

.indeterminate {
--calcite-container-size-content-fluid: 20%;
@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 @@ -57,12 +62,10 @@
}

.text {
@apply text-center font-medium;
--calcite-progress-font-size: theme("fontSize.n2h");
--calcite-progress-color: var(--calcite-color-text-2);
--calcite-progress-label-inline-padding: 0;
--calcite-progress-label-block-start-padding: 4;
--calcite-progress-label-block-end-padding: 0;
@apply text-n2h px-0 pt-4 pb-0 text-center font-medium;

font-size: theme("fontSize.n2h");
color: var(--calcite-progress-text-color);
}

@keyframes looping-progress-bar-ani {
Expand Down
Loading