feat(component/progressbar): update style & structure according to th…

…e new design (#1508)
adeo · Nov 6, 2023 · 23338c3 · 23338c3
1 parent a73f614
commit 23338c3
Show file tree

Hide file tree

Showing 13 changed files with 59 additions and 56 deletions.
diff --git a/packages/styles/components/_c.progressbar.scss b/packages/styles/components/_c.progressbar.scss
@@ -1,8 +1,15 @@
+@use "sass:math";
+
 .mc-progressbar {
   $parent: get-parent-selector(&);
 
   @include set-font-family;
 
+  &,
+  * {
+    box-sizing: border-box;
+  }
+
   align-items: center;
   background-color: $color-progress-background;
   display: flex;
@@ -17,9 +24,14 @@
   }
 
   &__indicator {
+    align-items: center;
     background-color: $color-progress-indicator;
+    display: flex;
     height: 100%;
+    justify-content: flex-end;
     left: 0;
+    min-width: px-to-rem(37);
+    padding: math.div($mu025, 2);
     position: absolute;
     transition: width 0.4s ease;
     top: 0;
@@ -30,16 +42,13 @@
   }
 
   &__percentage {
-    @include set-font-scale("04", "m");
+    @include set-font-scale("02", "m");
     @include set-font-weight("semi-bold");
 
+    background-color: $color-progress-percentage-background;
+    border-radius: $mu100;
     color: $color-progress-percentage-default;
-    position: relative;
-    z-index: 1;
-
-    @at-root #{$parent}--half & {
-      color: $color-progress-percentage-half;
-    }
+    padding: math.div($mu025, 2) $mu050;
 
     // visually hide the percentage
     @at-root #{$parent}:not(#{$parent}--percent) & {

diff --git a/packages/tokens/AdeoProperties/color/progressbar.json b/packages/tokens/AdeoProperties/color/progressbar.json
@@ -10,9 +10,6 @@
       "percentage": {
         "default": {
           "value": "{color.grey.900.value}"
-        },
-        "half": {
-          "value": "{color.grey.000.value}"
         }
       }
     }

diff --git a/packages/tokens/BricomanProperties/color/progressbar.json b/packages/tokens/BricomanProperties/color/progressbar.json
@@ -10,9 +10,6 @@
       "percentage": {
         "default": {
           "value": "{color.grey.900.value}"
-        },
-        "half": {
-          "value": "{color.grey.000.value}"
         }
       }
     }

diff --git a/packages/tokens/build/android/colors.xml b/packages/tokens/build/android/colors.xml
@@ -371,10 +371,10 @@
   <color name="color_phone_number_list_background">#ffffffff</color>
   <color name="color_phone_number_item_border">#ffb3b3b3</color>
   <color name="color_phone_number_item_focus_background">#ffe6e6e6</color>
-  <color name="color_progress_background">#ffcccccc</color>
-  <color name="color_progress_indicator">#ff188803</color>
-  <color name="color_progress_percentage_default">#ff191919</color>
-  <color name="color_progress_percentage_half">#ffffffff</color>
+  <color name="color_progress_background">#ffcfd2d8</color>
+  <color name="color_progress_indicator">#ff494f60</color>
+  <color name="color_progress_percentage_default">#ff494f60</color>
+  <color name="color_progress_percentage_background">#ffffffff</color>
   <color name="color_segmented_control_is_active">#ff188803</color>
   <color name="color_segmented_control_hover">#ffeeeff1</color>
   <color name="color_segmented_control_active">#ffcfd2d8</color>

diff --git a/packages/tokens/build/css/_variables.scss b/packages/tokens/build/css/_variables.scss
@@ -367,10 +367,10 @@ $color-phone-number-button-border: var(--color-phone-number-button-border, #6666
 $color-phone-number-list-background: var(--color-phone-number-list-background, #ffffff);
 $color-phone-number-item-border: var(--color-phone-number-item-border, #b3b3b3);
 $color-phone-number-item-focus-background: var(--color-phone-number-item-focus-background, #e6e6e6);
-$color-progress-background: var(--color-progress-background, #cccccc);
-$color-progress-indicator: var(--color-progress-indicator, #188803);
-$color-progress-percentage-default: var(--color-progress-percentage-default, #191919);
-$color-progress-percentage-half: var(--color-progress-percentage-half, #ffffff);
+$color-progress-background: var(--color-progress-background, #cfd2d8);
+$color-progress-indicator: var(--color-progress-indicator, #494f60);
+$color-progress-percentage-default: var(--color-progress-percentage-default, #494f60);
+$color-progress-percentage-background: var(--color-progress-percentage-background, #ffffff);
 $color-segmented-control-is-active: var(--color-segmented-control-is-active, #188803);
 $color-segmented-control-hover: var(--color-segmented-control-hover, #eeeff1);
 $color-segmented-control-active: var(--color-segmented-control-active, #cfd2d8);

diff --git a/packages/tokens/build/css/root.scss b/packages/tokens/build/css/root.scss
@@ -178,10 +178,10 @@
   --color-segmented-control-active: var(--color-primary-02-200);
   --color-segmented-control-hover: var(--color-primary-02-100);
   --color-segmented-control-is-active: var(--color-primary-01-600);
-  --color-progress-percentage-half: var(--color-grey-000);
-  --color-progress-percentage-default: var(--color-grey-900);
-  --color-progress-indicator: var(--color-primary-01-600);
-  --color-progress-background: var(--color-grey-200);
+  --color-progress-percentage-background: var(--color-grey-000);
+  --color-progress-percentage-default: var(--color-primary-02-600);
+  --color-progress-indicator: var(--color-primary-02-600);
+  --color-progress-background: var(--color-primary-02-200);
   --color-phone-number-item-focus-background: var(--color-grey-100);
   --color-phone-number-item-border: var(--color-grey-300);
   --color-phone-number-list-background: var(--color-grey-000);

diff --git a/packages/tokens/build/ios/StyleDictionaryColor.h b/packages/tokens/build/ios/StyleDictionaryColor.h
@@ -378,7 +378,7 @@ ColorPhoneNumberItemFocusBackground,
 ColorProgressBackground,
 ColorProgressIndicator,
 ColorProgressPercentageDefault,
-ColorProgressPercentageHalf,
+ColorProgressPercentageBackground,
 ColorSegmentedControlIsActive,
 ColorSegmentedControlHover,
 ColorSegmentedControlActive,

diff --git a/packages/tokens/build/ios/StyleDictionaryColor.m b/packages/tokens/build/ios/StyleDictionaryColor.m
@@ -386,9 +386,9 @@ + (NSArray *)values {
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.702f green:0.702f blue:0.702f alpha:1.000f],
 [UIColor colorWithRed:0.902f green:0.902f blue:0.902f alpha:1.000f],
-[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
-[UIColor colorWithRed:0.094f green:0.533f blue:0.012f alpha:1.000f],
-[UIColor colorWithRed:0.098f green:0.098f blue:0.098f alpha:1.000f],
+[UIColor colorWithRed:0.812f green:0.824f blue:0.847f alpha:1.000f],
+[UIColor colorWithRed:0.286f green:0.310f blue:0.376f alpha:1.000f],
+[UIColor colorWithRed:0.286f green:0.310f blue:0.376f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.094f green:0.533f blue:0.012f alpha:1.000f],
 [UIColor colorWithRed:0.933f green:0.937f blue:0.945f alpha:1.000f],

diff --git a/packages/tokens/build/ios/StyleDictionaryColor.swift b/packages/tokens/build/ios/StyleDictionaryColor.swift
@@ -303,10 +303,10 @@ public class StyleDictionaryColor {
     public static let colorPrimary02700 = UIColor(red: 0.204, green: 0.231, blue: 0.298, alpha: 1)
     public static let colorPrimary02800 = UIColor(red: 0.141, green: 0.161, blue: 0.220, alpha: 1)
     public static let colorPrimary02900 = UIColor(red: 0.090, green: 0.106, blue: 0.149, alpha: 1)
-    public static let colorProgressBackground = UIColor(red: 0.800, green: 0.800, blue: 0.800, alpha: 1)
-    public static let colorProgressIndicator = UIColor(red: 0.094, green: 0.533, blue: 0.012, alpha: 1)
-    public static let colorProgressPercentageDefault = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)
-    public static let colorProgressPercentageHalf = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
+    public static let colorProgressBackground = UIColor(red: 0.812, green: 0.824, blue: 0.847, alpha: 1)
+    public static let colorProgressIndicator = UIColor(red: 0.286, green: 0.310, blue: 0.376, alpha: 1)
+    public static let colorProgressPercentageBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
+    public static let colorProgressPercentageDefault = UIColor(red: 0.286, green: 0.310, blue: 0.376, alpha: 1)
     public static let colorSecondaryBlue100 = UIColor(red: 0.855, green: 0.937, blue: 0.969, alpha: 1)
     public static let colorSecondaryBlue200 = UIColor(red: 0.655, green: 0.851, blue: 0.929, alpha: 1)
     public static let colorSecondaryBlue300 = UIColor(red: 0.451, green: 0.765, blue: 0.886, alpha: 1)

diff --git a/packages/tokens/build/js/tokens.js b/packages/tokens/build/js/tokens.js
@@ -370,10 +370,10 @@ export const ColorPhoneNumberButtonBorder = "#666666";
 export const ColorPhoneNumberListBackground = "#ffffff";
 export const ColorPhoneNumberItemBorder = "#b3b3b3";
 export const ColorPhoneNumberItemFocusBackground = "#e6e6e6";
-export const ColorProgressBackground = "#cccccc";
-export const ColorProgressIndicator = "#188803";
-export const ColorProgressPercentageDefault = "#191919";
-export const ColorProgressPercentageHalf = "#ffffff";
+export const ColorProgressBackground = "#cfd2d8";
+export const ColorProgressIndicator = "#494f60";
+export const ColorProgressPercentageDefault = "#494f60";
+export const ColorProgressPercentageBackground = "#ffffff";
 export const ColorSegmentedControlIsActive = "#188803";
 export const ColorSegmentedControlHover = "#eeeff1";
 export const ColorSegmentedControlActive = "#cfd2d8";

diff --git a/packages/tokens/build/js/tokensObject.js b/packages/tokens/build/js/tokensObject.js
@@ -7898,11 +7898,11 @@ module.exports = {
     },
     "progress": {
       "background": {
-        "value": "#cccccc",
+        "value": "#cfd2d8",
         "filePath": "packages/tokens/properties/color/progressbar.json",
         "isSource": true,
         "original": {
-          "value": "{color.grey.200.value}"
+          "value": "{color.primary-02.200.value}"
         },
         "name": "ColorProgressBackground",
         "attributes": {
@@ -7917,11 +7917,11 @@ module.exports = {
         ]
       },
       "indicator": {
-        "value": "#188803",
+        "value": "#494f60",
         "filePath": "packages/tokens/properties/color/progressbar.json",
         "isSource": true,
         "original": {
-          "value": "{color.primary-01.600.value}"
+          "value": "{color.primary-02.600.value}"
         },
         "name": "ColorProgressIndicator",
         "attributes": {
@@ -7937,11 +7937,11 @@ module.exports = {
       },
       "percentage": {
         "default": {
-          "value": "#191919",
+          "value": "#494f60",
           "filePath": "packages/tokens/properties/color/progressbar.json",
           "isSource": true,
           "original": {
-            "value": "{color.grey.900.value}"
+            "value": "{color.primary-02.600.value}"
           },
           "name": "ColorProgressPercentageDefault",
           "attributes": {
@@ -7957,25 +7957,25 @@ module.exports = {
             "default"
           ]
         },
-        "half": {
+        "background": {
           "value": "#ffffff",
           "filePath": "packages/tokens/properties/color/progressbar.json",
           "isSource": true,
           "original": {
             "value": "{color.grey.000.value}"
           },
-          "name": "ColorProgressPercentageHalf",
+          "name": "ColorProgressPercentageBackground",
           "attributes": {
             "category": "color",
             "type": "progress",
             "item": "percentage",
-            "subitem": "half"
+            "subitem": "background"
           },
           "path": [
             "color",
             "progress",
             "percentage",
-            "half"
+            "background"
           ]
         }
       }

diff --git a/packages/tokens/build/scss/_tokens.scss b/packages/tokens/build/scss/_tokens.scss
@@ -371,10 +371,10 @@ $color-phone-number-button-border: #666666 !default;
 $color-phone-number-list-background: #ffffff !default;
 $color-phone-number-item-border: #b3b3b3 !default;
 $color-phone-number-item-focus-background: #e6e6e6 !default;
-$color-progress-background: #cccccc !default;
-$color-progress-indicator: #188803 !default;
-$color-progress-percentage-default: #191919 !default;
-$color-progress-percentage-half: #ffffff !default;
+$color-progress-background: #cfd2d8 !default;
+$color-progress-indicator: #494f60 !default;
+$color-progress-percentage-default: #494f60 !default;
+$color-progress-percentage-background: #ffffff !default;
 $color-segmented-control-is-active: #188803 !default;
 $color-segmented-control-hover: #eeeff1 !default;
 $color-segmented-control-active: #cfd2d8 !default;
@@ -1251,7 +1251,7 @@ $tokens: (
       'indicator': $color-progress-indicator,
       'percentage': (
         'default': $color-progress-percentage-default,
-        'half': $color-progress-percentage-half
+        'background': $color-progress-percentage-background
       )
     ),
     'segmented-control': (

diff --git a/packages/tokens/properties/color/progressbar.json b/packages/tokens/properties/color/progressbar.json
@@ -2,16 +2,16 @@
   "color": {
     "progress": {
       "background": {
-        "value": "{color.grey.200.value}"
+        "value": "{color.primary-02.200.value}"
       },
       "indicator": {
-        "value": "{color.primary-01.600.value}"
+        "value": "{color.primary-02.600.value}"
       },
       "percentage": {
         "default": {
-          "value": "{color.grey.900.value}"
+          "value": "{color.primary-02.600.value}"
         },
-        "half": {
+        "background": {
           "value": "{color.grey.000.value}"
         }
       }