update: blue 30 system color hex, test fix (#3792)

* update: blue 30 system color hex, test fix

* update: textSuccess, iconSuccess set to green5

* update: textDanger, iconDanger set to red5

* update: change textMajor and iconMajor colors to orange5

* update: change blue30 color hex to #0F62E6 and update related tests

* Update src/style/__tests__/colors.spec.js

Co-authored-by: Nitzan Yizhar <[email protected]>

---------

Co-authored-by: Nitzan Yizhar <[email protected]>

Author: adids1221

demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

@@ -477,11 +477,11 @@ exports[`AvatarScreen renders screen 1`] = `
                   },
                   {
                     "backgroundColor": "transparent",
-                    "color": "#CD4700",
+                    "color": "#9E3900",
                     "lineHeight": undefined,
                   },
                   {
-                    "color": "#CD4700",
+                    "color": "#9E3900",
                   },
                 ],
               ]
@@ -776,7 +776,7 @@ exports[`AvatarScreen renders screen 1`] = `
                   {
                     "alignItems": "center",
                     "alignSelf": "flex-start",
-                    "backgroundColor": "#116DFF",
+                    "backgroundColor": "#0F62E6",
                     "borderRadius": 999,
                     "justifyContent": "center",
                     "overflow": "hidden",
@@ -1034,7 +1034,7 @@ exports[`AvatarScreen renders screen 1`] = `
                   {
                     "alignItems": "center",
                     "alignSelf": "flex-start",
-                    "backgroundColor": "#116DFF",
+                    "backgroundColor": "#0F62E6",
                     "borderRadius": 999,
                     "justifyContent": "center",
                     "overflow": "hidden",
@@ -1292,7 +1292,7 @@ exports[`AvatarScreen renders screen 1`] = `
                   {
                     "alignItems": "center",
                     "alignSelf": "flex-start",
-                    "backgroundColor": "#116DFF",
+                    "backgroundColor": "#0F62E6",
                     "borderRadius": 999,
                     "justifyContent": "center",
                     "overflow": "hidden",
@@ -1759,7 +1759,7 @@ exports[`AvatarScreen renders screen 1`] = `
                   {
                     "alignItems": "center",
                     "alignSelf": "flex-start",
-                    "backgroundColor": "#116DFF",
+                    "backgroundColor": "#0F62E6",
                     "borderRadius": 999,
                     "justifyContent": "center",
                     "overflow": "hidden",
@@ -2617,7 +2617,7 @@ exports[`AvatarScreen renders screen 1`] = `
                   "top": 0,
                 },
                 {
-                  "backgroundColor": "#116DFF",
+                  "backgroundColor": "#0F62E6",
                 },
                 {
                   "bottom": 1,
@@ -3142,7 +3142,7 @@ exports[`AvatarScreen renders screen 1`] = `
                   {
                     "alignItems": "center",
                     "alignSelf": "flex-start",
-                    "backgroundColor": "#116DFF",
+                    "backgroundColor": "#0F62E6",
                     "borderRadius": 999,
                     "justifyContent": "center",
                     "overflow": "hidden",

demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

@@ -4387,7 +4387,7 @@ exports[`TextField Screen renders screen 1`] = `
                       "textAlign": "right",
                     },
                     {
-                      "color": "#116DFF",
+                      "color": "#0F62E6",
                     },
                   ],
                 ]
@@ -5144,7 +5144,7 @@ exports[`TextField Screen renders screen 1`] = `
                   "lineHeight": 24,
                 },
                 {
-                  "color": "#116DFF",
+                  "color": "#0F62E6",
                 },
                 undefined,
                 undefined,

src/style/__tests__/colors.spec.js

@@ -278,17 +278,17 @@ describe('style/Colors', () => {
     it('should return the system color, if the color is included in the validColors array', () => {
       expect(uut.getSystemColorByHex('#FFFFFF', GetColorsByHexOptions)).toEqual('white');
       expect(uut.getSystemColorByHex('#000000', GetColorsByHexOptions)).toEqual('black');
-      expect(uut.getSystemColorByHex('#116DFF', {validColors: [...SYSTEM_COLORS, 'blue']})).toEqual('blue30');
+      expect(uut.getSystemColorByHex('#0F62E6', {validColors: [...SYSTEM_COLORS, 'blue']})).toEqual('blue30');
       expect(uut.getSystemColorByHex('#FB6413', {validColors: [...SYSTEM_COLORS, 'orange']})).toEqual('orange30');
     });
 
     it('should return undefined if the color is not included in validColors', () => {
-      expect(uut.getSystemColorByHex('#116DFF', GetColorsByHexOptions)).toEqual(undefined);
+      expect(uut.getSystemColorByHex('#0F62E6', GetColorsByHexOptions)).toEqual(undefined);
       expect(uut.getSystemColorByHex('#00A87E', GetColorsByHexOptions)).toEqual(undefined);
     });
 
     it('without validColors array the function will return the first system color name match the color', () => {
-      expect(uut.getSystemColorByHex('#116DFF')).toEqual('blue30');
+      expect(uut.getSystemColorByHex('#0F62E6')).toEqual('blue30');
       expect(uut.getSystemColorByHex('#00A87E')).toEqual('green30');
     });
 

src/style/colorsPalette.ts

@@ -15,7 +15,7 @@ const colorsPalette = {
   blue5: '#0C3E9D',
   blue10: '#0F4DC4',
   blue20: '#0F59E6',
-  blue30: '#116DFF',
+  blue30: '#0F62E6',
   blue40: '#3582FF',
   blue50: '#81B4FF',
   blue60: '#97C7FF',

src/style/designTokens.ts

@@ -40,11 +40,10 @@ export default {
   $textDefaultLight: colorsPalette.white,
   $textPrimary: colorsPalette.violet30,
   $textGeneral: colorsPalette.blue30,
-  $textSuccess: colorsPalette.green10,
+  $textSuccess: colorsPalette.green5,
   $textSuccessLight: colorsPalette.green30,
-  $textMajor: colorsPalette.orange10,
-  $textDanger: colorsPalette.red10,
-  //textDangerLight should be deprecated
+  $textMajor: colorsPalette.orange5,
+  $textDanger: colorsPalette.red5,
   $textDangerLight: colorsPalette.red10,
 
   // ICON
@@ -55,11 +54,10 @@ export default {
   $iconPrimaryLight: colorsPalette.violet50,
   $iconGeneral: colorsPalette.blue30,
   $iconGeneralLight: colorsPalette.blue50,
-  $iconSuccess: colorsPalette.green10,
+  $iconSuccess: colorsPalette.green5,
   $iconSuccessLight: colorsPalette.green30,
-  $iconMajor: colorsPalette.orange10,
-  $iconDanger: colorsPalette.red10,
-  //iconDangerLight should be deprecated
+  $iconMajor: colorsPalette.orange5,
+  $iconDanger: colorsPalette.red5,
   $iconDangerLight: colorsPalette.red10,
   $iconDisabled: colorsPalette.grey50,