From 0527ad11fbe12f5525c67843f46aedb2c21fece4 Mon Sep 17 00:00:00 2001 From: Artur Santiago Date: Fri, 14 Feb 2025 14:35:43 -0300 Subject: [PATCH] fix(Progressbar): use token for bar height --- .../components/atoms/ProgressBar/styles.scss | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/components/atoms/ProgressBar/styles.scss b/packages/ui/src/components/atoms/ProgressBar/styles.scss index 7c61613ca4..632997e087 100644 --- a/packages/ui/src/components/atoms/ProgressBar/styles.scss +++ b/packages/ui/src/components/atoms/ProgressBar/styles.scss @@ -3,30 +3,31 @@ // Design Tokens for ProgressBar // -------------------------------------------------------- - --fs-progress-bar-height: 4px; - --fs-progress-bar-radius: 4px; - --fs-progress-bar-track-color: var(--fs-color-neutral-2); - --fs-progress-bar-fill-color: var(--fs-color-main-2); - --fs-progress-bar-transition-function: var(--fs-transition-function); - --fs-progress-bar-transition-property: var(--fs-transition-property); - --fs-progress-bar-transition-timing: var(--fs-transition-timing); + --fs-progress-bar-height : var(--fs-spacing-0); + --fs-progress-bar-radius : 4px; + --fs-progress-bar-track-color : var(--fs-color-neutral-2); + --fs-progress-bar-fill-color : var(--fs-color-main-2); + --fs-progress-bar-transition-function : var(--fs-transition-function); + --fs-progress-bar-transition-property : var(--fs-transition-property); + --fs-progress-bar-transition-timing : var(--fs-transition-timing); // Default properties width: 100%; height: var(--fs-progress-bar-height); [data-fs-progress-bar-track] { - background-color: var(--fs-progress-bar-track-color); width: 100%; height: 100%; overflow: hidden; + background-color: var(--fs-progress-bar-track-color); border-radius: var(--fs-progress-bar-radius); } [data-fs-progress-bar-fill] { - background-color: var(--fs-progress-bar-fill-color); height: 100%; - transition: var(--fs-progress-bar-transition-property) + background-color: var(--fs-progress-bar-fill-color); + transition: + var(--fs-progress-bar-transition-property) var(--fs-progress-bar-transition-timing) var(--fs-progress-bar-transition-function); }