ProgressBar - move to design tokens (#1962)

Author: M-i-k-e-l

demo/src/screens/componentScreens/ProgressBarScreen.tsx

@@ -41,22 +41,22 @@ export default class ProgressBarScreen extends Component {
 
     return (
       <ScrollView>
-        <View flex bg-grey80 spread paddingV-18>
+        <View flex bg-$backgroundNeutralLight spread paddingV-18>
           <View paddingL-18 marginB-18>
-            <Text text40 grey10>
+            <Text $textDefault text40>
               ProgressBar
             </Text>
           </View>
 
-          <Text text70 style={styles.text}>
+          <Text $textDefault text70 style={styles.text}>
             Default
           </Text>
           <ProgressBar
             progress={progresses[0]}
             style={styles.progressBar}
           />
 
-          <Text text70 style={styles.text}>
+          <Text $textDefault text70 style={styles.text}>
             FullWidth
           </Text>
           <ProgressBar
@@ -65,7 +65,7 @@ export default class ProgressBarScreen extends Component {
             fullWidth
           />
 
-          <Text text70 style={styles.text}>
+          <Text $textDefault text70 style={styles.text}>
             Styled
           </Text>
           <ProgressBar
@@ -74,7 +74,7 @@ export default class ProgressBarScreen extends Component {
             progressColor={Colors.purple70}
           />
 
-          <Text text70 style={styles.text}>
+          <Text $textDefault text70 style={styles.text}>
             Custom Element
           </Text>
           <ProgressBar

src/components/progressBar/index.tsx

@@ -10,7 +10,7 @@ const CONTAINER_HEIGHT = Spacings.s2;
 const FULL_WIDTH_CONTAINER_HEIGHT = Spacings.s1;
 const TABLET_CONTAINER_HEIGHT = 6;
 const TABLET_FULL_WIDTH_CONTAINER_HEIGHT = 10;
-const DEFAULT_COLOR = Colors.primary;
+const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 
 /**
  * @description: Progress bar
@@ -166,7 +166,7 @@ export default asBaseComponent<ProgressBarProps, typeof ProgressBar>(ProgressBar
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: Colors.grey60,
+    backgroundColor: Colors.$backgroundNeutralMedium,
     overflow: 'hidden',
     borderRadius: BorderRadiuses.br100
   },