Metric Component Fluctuate text color update. (#678)

* fixed fluctuate color of metric component * Spacing between score and arrow --------- Co-authored-by: Francis Thibault <[email protected]>
workleap · Feb 8, 2024 · 4235d5c · 4235d5c
1 parent 113f67b
commit 4235d5c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/new-pans-raise.md b/.changeset/new-pans-raise.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/metric": patch
+---
+
+Text color has been fixed for fluctuate Metric
diff --git a/packages/Metric/src/metric.scss b/packages/Metric/src/metric.scss
@@ -73,7 +73,6 @@
     --ids-metric-sub-metric-selected-left-border-color: #{tokens.$electric-blue-500};
     --ids-metric-sub-metric-selected-left-border-width: #{tokens.$space-1};
     --ids-metric-sub-metric-selected-hover-border-color: #{tokens.$electric-blue-500};
-
 }
 
 [data-brand="workleap"] {
@@ -133,7 +132,7 @@
 
     /* Fluctuate */
     --ids-metric-alignment-icon-margin: var(--hop-space-inline-sm);
-    --ids-metric-fluctuate-name-color: var(--hop-neutral-text);
+    --ids-metric-fluctuate-name-color: var(--hop-neutral-text-weak);
 
     /* Sub Metric */
     --ids-metric-sub-metric-border-color: var(--hop-neutral-border-weak);

diff --git a/packages/Metric/src/score.scss b/packages/Metric/src/score.scss
@@ -17,6 +17,7 @@
         --ids-score-variation-font-family: #{tokens.$primary-font-family};
         --ids-score-variation-font-size: #{tokens.$font-size-3};
         --ids-score-variation-font-weight: #{tokens.$font-weight-regular};
+        --ids-score-variation-margin-left: 0;
         --ids-score-variation-line-height: #{tokens.$line-height-xxl};
         --ids-score-single-variation-font-size: #{tokens.$font-size-9};
         --ids-score-single-variation-color: #{tokens.$grey-600};
@@ -42,17 +43,18 @@
         --ids-score-variation-font-family: var(--hop-body-sm-font-family);
         --ids-score-variation-font-size: var(--hop-body-sm-font-size);
         --ids-score-variation-font-weight: var(--hop-body-sm-font-weight);
+        --ids-score-variation-margin-left: 0.25rem;
         --ids-score-variation-line-height: var(--hop-body-sm-line-height);
         --ids-score-single-variation-font-size: var(--hop-body-2xl-font-size);
-        --ids-score-single-variation-color: var(--hop-neutral-text-weak);
+        --ids-score-single-variation-color: var(--hop-neutral-text);
         --ids-score-single-variation-line-height: var(--hop-body-2xl-line-height);
 
         /* Arrows */
         --ids-score-arrow-color-positive: var(--hop-success-icon-weak);
         --ids-score-arrow-color-negative: var(--hop-danger-icon-weak);
         --ids-score-arrow-color-selected-positive: var(--hop-success-icon-weak);
         --ids-score-arrow-color-selected-negative: var(--hop-danger-icon-weak);
-        --ids-score-arrow-margin-right: var(--hop-space-inline-xs);
+        --ids-score-arrow-margin-right: var(--hop-space-inline-sm);
     }
 
     .ids-score {
@@ -106,5 +108,6 @@
     .ids-score__postfix {
         font-size: var(--ids-score-variation-font-size);
         line-height: var(--ids-score-variation-line-height);
+        margin-left: var(--ids-score-variation-margin-left);
     }
 }