diff --git a/packages/styles/components/_c.progressbar.scss b/packages/styles/components/_c.progressbar.scss
index 2abb862fc..9c7c830f3 100644
--- 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
index 6307f4c61..a78aa5a26 100644
--- 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
index b1e064d96..3da6b6ede 100644
--- 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
index 5e3f888b3..c33e9f7d8 100644
--- a/packages/tokens/build/android/colors.xml
+++ b/packages/tokens/build/android/colors.xml
@@ -371,10 +371,10 @@
#ffffffff
#ffb3b3b3
#ffe6e6e6
- #ffcccccc
- #ff188803
- #ff191919
- #ffffffff
+ #ffcfd2d8
+ #ff494f60
+ #ff494f60
+ #ffffffff
#ff188803
#ffeeeff1
#ffcfd2d8
diff --git a/packages/tokens/build/css/_variables.scss b/packages/tokens/build/css/_variables.scss
index 2a0d3a1b9..45cb201bd 100644
--- 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
index 2ee1a8647..7a18813b0 100644
--- 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
index cac81f360..45e17c973 100644
--- 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
index 508ac1157..d7b23e999 100644
--- 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
index 266c31dd7..83e8dd596 100644
--- 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
index b35c12f04..d5e347ac2 100644
--- 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
index 61b5430fe..cac4b9744 100644
--- 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
index dec480937..7c5d5f4d1 100644
--- 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
index 2f8f44dc0..4fe33a055 100644
--- 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}"
}
}