@hero-design/rn 7.16.2 → 7.17.1

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -19,11 +19,11 @@ Object {
         "base": 1,
       },
       "colors": Object {
-        "divider": "#fafbfb",
-        "error": "#de350b",
+        "divider": "#e8e9ea",
+        "error": "#f46363",
         "info": "#b5c3fd",
-        "success": "#01b39c",
-        "warning": "#ffa234",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "radii": Object {
         "default": 16,
@@ -42,9 +42,9 @@ Object {
       "colors": Object {
         "danger": "#de350b",
         "info": "#4568fb",
-        "primary": "#7622d7",
-        "success": "#01b39c",
-        "warning": "#ffa234",
+        "primary": "#8505a2",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "fontSizes": Object {
         "large": 20,
@@ -70,12 +70,12 @@ Object {
     },
     "badge": Object {
       "colors": Object {
-        "archived": "#ccced1",
+        "archived": "#737479",
         "danger": "#de350b",
         "info": "#4568fb",
         "success": "#017d6d",
         "text": "#ffffff",
-        "warning": "#d98a2c",
+        "warning": "#ffa234",
       },
       "fontSizes": Object {
         "default": 12,
@@ -98,7 +98,7 @@ Object {
     "bottomNavigation": Object {
       "colors": Object {
         "background": "#ffffff",
-        "shadow": "#292a2b",
+        "shadow": "#001f23",
       },
       "shadows": Object {
         "elevation": 10,
@@ -118,9 +118,9 @@ Object {
     },
     "bottomSheet": Object {
       "colors": Object {
-        "backdrop": "#292a2b",
+        "backdrop": "#001f23",
         "background": "#ffffff",
-        "shadow": "#292a2b",
+        "shadow": "#001f23",
       },
       "radii": Object {
         "default": 16,
@@ -152,29 +152,29 @@ Object {
       },
       "colors": Object {
         "danger": "#de350b",
-        "defaultText": "#292a2b",
-        "disabledBackground": "#ccced1",
-        "disabledBorder": "#ccced1",
-        "disabledText": "#ccced1",
+        "defaultText": "#001f23",
+        "disabledBackground": "#bfc1c5",
+        "disabledBorder": "#bfc1c5",
+        "disabledText": "#bfc1c5",
         "invertedText": "#ffffff",
-        "pressedDanger": "#f2ae9d",
-        "pressedPrimary": "#c8a7ef",
-        "pressedSecondary": "#d1d9fe",
-        "primary": "#7622d7",
+        "pressedDanger": "#f46363",
+        "pressedPrimary": "#c282d1",
+        "pressedSecondary": "#b5c3fd",
+        "primary": "#8505a2",
         "secondary": "#4568fb",
         "underlayColors": Object {
-          "basic-transparent": "#c8a7ef",
-          "filled-danger": "#f2ae9d",
-          "filled-primary": "#c8a7ef",
-          "filled-secondary": "#d1d9fe",
+          "basic-transparent": "#c282d1",
+          "filled-danger": "#f46363",
+          "filled-primary": "#c282d1",
+          "filled-secondary": "#b5c3fd",
           "outlined-danger": "#fcebe7",
-          "outlined-primary": "#f1e9fb",
+          "outlined-primary": "#f3e6f6",
           "outlined-secondary": "#ecf0ff",
           "text-danger": "#fcebe7",
-          "text-primary": "#f1e9fb",
+          "text-primary": "#f3e6f6",
           "text-secondary": "#ecf0ff",
         },
-        "utilityBackground": "#fafbfb",
+        "utilityBackground": "#f6f6f7",
       },
       "fontSize": Object {
         "default": 18,
@@ -203,10 +203,10 @@ Object {
     },
     "calendar": Object {
       "colors": Object {
-        "background": "#fafbfb",
-        "border": "#292a2b",
+        "background": "#f6f6f7",
+        "border": "#001f23",
         "inverted": "#ffffff",
-        "primary": "#7622d7",
+        "primary": "#8505a2",
       },
       "radii": Object {
         "default": 999,
@@ -227,7 +227,7 @@ Object {
     },
     "card": Object {
       "colors": Object {
-        "dataCardIndicator": "#a26fb0",
+        "dataCardIndicator": "#8505a2",
         "indicator": Object {
           "archived": "#bfc1c5",
           "danger": "#e3602a",
@@ -248,8 +248,8 @@ Object {
         "default": 2,
       },
       "colors": Object {
-        "borderColor": "#7622d7",
-        "disabled": "#727478",
+        "borderColor": "#8505a2",
+        "disabled": "#808f91",
         "text": "#ffffff",
       },
       "radii": Object {
@@ -277,7 +277,7 @@ Object {
         "default": 1,
       },
       "colors": Object {
-        "default": "#dadbde",
+        "default": "#e8e9ea",
       },
       "space": Object {
         "large": 24,
@@ -289,9 +289,9 @@ Object {
     },
     "drawer": Object {
       "colors": Object {
-        "backdrop": "#292a2b",
+        "backdrop": "#001f23",
         "background": "#ffffff",
-        "shadow": "#292a2b",
+        "shadow": "#001f23",
       },
       "radii": Object {
         "default": 16,
@@ -308,10 +308,10 @@ Object {
     },
     "empty": Object {
       "colors": Object {
-        "illustrationBackground": "#dadbde",
+        "illustrationBackground": "#ccced1",
         "invertedText": "#ffffff",
-        "subduedText": "#727478",
-        "text": "#292a2b",
+        "subduedText": "#4d6265",
+        "text": "#001f23",
       },
       "fontSizes": Object {
         "description": 16,
@@ -336,8 +336,8 @@ Object {
       "colors": Object {
         "actionItemBackground": "#4d6265",
         "actionItemText": "#ffffff",
-        "backdropBackground": "#292a2b",
-        "buttonBackground": "#292a2b",
+        "backdropBackground": "#001f23",
+        "buttonBackground": "#001f23",
         "headerText": "#ffffff",
         "icon": "#ffffff",
         "titleText": "#ffffff",
@@ -385,13 +385,13 @@ Object {
     "icon": Object {
       "colors": Object {
         "danger": "#de350b",
-        "disabledText": "#8b8d92",
+        "disabledText": "#808f91",
         "info": "#4568fb",
         "invertedText": "#ffffff",
-        "primary": "#7622d7",
-        "success": "#01b39c",
-        "text": "#292a2b",
-        "warning": "#ffa234",
+        "primary": "#8505a2",
+        "success": "#5ace7d",
+        "text": "#001f23",
+        "warning": "#ffbe71",
       },
       "sizes": Object {
         "large": 28,
@@ -403,13 +403,13 @@ Object {
     },
     "list": Object {
       "colors": Object {
-        "checkedListItemContainerBackground": "#f1e9fb",
-        "highlightedListItemContainerBackground": "#f1e9fb",
+        "checkedListItemContainerBackground": "#f3e6f6",
+        "highlightedListItemContainerBackground": "#f3e6f6",
         "leadingStatus": Object {
-          "archived": "#ccced1",
-          "danger": "#de350b",
-          "info": "#d1d9fe",
-          "success": "#017d6d",
+          "archived": "#bfc1c5",
+          "danger": "#e3602a",
+          "info": "#b5c3fd",
+          "success": "#5ace7d",
           "warning": "#ffbe71",
         },
         "listItemContainerBackground": "#ffffff",
@@ -446,10 +446,10 @@ Object {
         "focused": 2,
       },
       "colors": Object {
-        "default": "#292a2b",
+        "default": "#001f23",
         "disabled": "#bfc1c5",
         "error": "#de350b",
-        "mask": "#727478",
+        "mask": "#4d6265",
       },
       "fontSizes": Object {
         "cellText": 28,
@@ -475,12 +475,12 @@ Object {
     },
     "progress": Object {
       "colors": Object {
-        "background": "#dadbde",
+        "background": "#e8e9ea",
         "danger": "#de350b",
         "info": "#4568fb",
         "innerBackground": "#ffffff",
-        "primary": "#7622d7",
-        "success": "#01b39c",
+        "primary": "#8505a2",
+        "success": "#5ace7d",
         "warning": "#ffa234",
       },
       "radii": Object {
@@ -488,8 +488,7 @@ Object {
       },
       "sizes": Object {
         "barHeight": 4,
-        "radius": 48,
-        "strokeWidth": 8,
+        "circleWidth": 76,
       },
     },
     "radio": Object {
@@ -497,8 +496,8 @@ Object {
         "circle": 2,
       },
       "colors": Object {
-        "checkedCircle": "#7622d7",
-        "checkedWrapper": "#f1e9fb",
+        "checkedCircle": "#8505a2",
+        "checkedWrapper": "#f3e6f6",
         "circle": "#000000",
         "wrapper": "#ffffff",
       },
@@ -520,9 +519,9 @@ Object {
         "webViewBorderBottomWidth": 0.8,
       },
       "colors": Object {
-        "toolbarBackgroundColor": "#fafbfb",
-        "toolbarBorderColor": "#dadbde",
-        "toolbarButtonSelectedBackground": "#dadbde",
+        "toolbarBackgroundColor": "#f6f6f7",
+        "toolbarBorderColor": "#e8e9ea",
+        "toolbarButtonSelectedBackground": "#e8e9ea",
       },
       "fontSizes": Object {
         "editor": 14,
@@ -541,7 +540,7 @@ Object {
     },
     "sectionHeading": Object {
       "colors": Object {
-        "background": "#dadbde",
+        "background": "#e8e9ea",
       },
       "space": Object {
         "headingHorizontalPadding": 16,
@@ -552,24 +551,24 @@ Object {
     },
     "select": Object {
       "colors": Object {
-        "footerText": "#7622d7",
+        "footerText": "#8505a2",
       },
       "radii": Object {
         "option": 4,
       },
       "space": Object {
         "minimumOptionListHeight": 280,
-        "optionListPadding": 16,
-        "optionListSpacing": 4,
-        "optionPadding": 16,
+        "optionHorizontalMargin": 12,
+        "optionSpacing": 4,
         "searchBarBottomSpacing": 8,
         "searchBarHorizontalSpacing": 16,
         "searchBarMarginTopSpacing": 8,
+        "sectionSpacing": 12,
       },
     },
     "spinner": Object {
       "color": Object {
-        "default": "#7622d7",
+        "default": "#8505a2",
       },
       "radii": Object {
         "default": 8,
@@ -585,8 +584,8 @@ Object {
         "default": 1,
       },
       "colors": Object {
-        "active": "#7622d7",
-        "inactive": "#727478",
+        "active": "#8505a2",
+        "inactive": "#808f91",
         "thumb": "#ffffff",
       },
       "heights": Object {
@@ -615,11 +614,11 @@ Object {
         "headerBottom": 1,
       },
       "colors": Object {
-        "active": "#7622d7",
-        "activeBackground": "#f1e9fb",
-        "headerBottom": "#dadbde",
-        "inactive": "#292a2b",
-        "text": "#292a2b",
+        "active": "#8505a2",
+        "activeBackground": "#f3e6f6",
+        "headerBottom": "#e8e9ea",
+        "inactive": "#001f23",
+        "text": "#001f23",
       },
       "radii": Object {
         "outline": 8,
@@ -644,16 +643,16 @@ Object {
         "archivedBackground": "#f1f2f3",
         "danger": "#de350b",
         "dangerBackground": "#fcebe7",
-        "default": "#292a2b",
+        "default": "#001f23",
         "defaultBackground": undefined,
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
-        "primary": "#7622d7",
-        "primaryBackground": "#f1e9fb",
+        "primary": "#8505a2",
+        "primaryBackground": "#f3e6f6",
         "success": "#017d6d",
         "successBackground": "#f0fef4",
-        "warning": "#d98a2c",
-        "warningBackground": "#fff6eb",
+        "warning": "#ffa234",
+        "warningBackground": "#ebf4ff",
       },
       "fontSizes": Object {
         "default": 12,
@@ -679,52 +678,52 @@ Object {
       "colors": Object {
         "asterisks": Object {
           "default": "#de350b",
-          "disabled": "#ccced1",
+          "disabled": "#bfc1c5",
           "error": "#de350b",
           "filled": "#de350b",
           "focused": "#de350b",
-          "readonly": "#8b8d92",
+          "readonly": "#808f91",
         },
         "borders": Object {
-          "default": "#292a2b",
-          "disabled": "#ccced1",
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
           "error": "#de350b",
-          "filled": "#292a2b",
-          "focused": "#292a2b",
-          "readonly": "#8b8d92",
+          "filled": "#001f23",
+          "focused": "#001f23",
+          "readonly": "#808f91",
         },
-        "disabledLabel": "#ccced1",
+        "disabledLabel": "#bfc1c5",
         "error": "#de350b",
-        "label": "#292a2b",
+        "label": "#001f23",
         "labelBackground": "#ffffff",
         "labels": Object {
-          "default": "#292a2b",
-          "disabled": "#ccced1",
-          "error": "#292a2b",
-          "filled": "#292a2b",
-          "focused": "#292a2b",
-          "readonly": "#8b8d92",
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
+          "error": "#001f23",
+          "filled": "#001f23",
+          "focused": "#001f23",
+          "readonly": "#808f91",
         },
         "labelsInsideTextInput": Object {
-          "default": "#292a2b",
-          "disabled": "#ccced1",
-          "error": "#292a2b",
-          "filled": "#292a2b",
-          "focused": "#292a2b",
-          "readonly": "#8b8d92",
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
+          "error": "#001f23",
+          "filled": "#001f23",
+          "focused": "#001f23",
+          "readonly": "#808f91",
         },
         "maxLengthLabels": Object {
-          "default": "#292a2b",
-          "disabled": "#ccced1",
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
           "error": "#de350b",
-          "filled": "#292a2b",
-          "focused": "#292a2b",
-          "readonly": "#8b8d92",
+          "filled": "#001f23",
+          "focused": "#001f23",
+          "readonly": "#808f91",
         },
-        "placeholderIfFocued": "#8b8d92",
-        "placeholderIfNotFocused": "#292a2b",
-        "readonlyLabel": "#8b8d92",
-        "text": "#292a2b",
+        "placeholderIfFocued": "#808f91",
+        "placeholderIfNotFocused": "#001f23",
+        "readonlyLabel": "#808f91",
+        "text": "#001f23",
       },
       "fontSizes": Object {
         "asteriskLabel": 14,
@@ -760,11 +759,11 @@ Object {
         "base": 1,
       },
       "colors": Object {
-        "divider": "#fafbfb",
-        "error": "#de350b",
+        "divider": "#e8e9ea",
+        "error": "#f46363",
         "info": "#b5c3fd",
-        "success": "#01b39c",
-        "warning": "#ffa234",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "radii": Object {
         "default": 16,
@@ -783,13 +782,13 @@ Object {
       },
       "colors": Object {
         "background": "#ffffff",
-        "border": "#dadbde",
-        "danger": "#ffa234",
-        "disabled": "#8b8d92",
+        "border": "#e8e9ea",
+        "danger": "#ffbe71",
+        "disabled": "#808f91",
         "error": "#de350b",
         "info": "#4568fb",
-        "primary": "#7622d7",
-        "success": "#01b39c",
+        "primary": "#8505a2",
+        "success": "#5ace7d",
       },
       "space": Object {
         "horizontalPadding": 12,
@@ -798,14 +797,14 @@ Object {
     },
     "typography": Object {
       "colors": Object {
-        "body": "#292a2b",
+        "body": "#001f23",
         "danger": "#de350b",
         "info": "#4568fb",
         "inverted": "#ffffff",
-        "primary": "#7622d7",
-        "subdued": "#8b8d92",
-        "success": "#01b39c",
-        "warning": "#ffa234",
+        "primary": "#8505a2",
+        "subdued": "#808f91",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "fontSizes": Object {
         "large": 16,
@@ -837,41 +836,41 @@ Object {
     "archivedBackground": "#f1f2f3",
     "archivedDark": "#737479",
     "archivedLight": "#bfc1c5",
-    "backgroundDark": "#292a2b",
-    "backgroundLight": "#fafbfb",
+    "backgroundDark": "#001f23",
+    "backgroundLight": "#f6f6f7",
     "black": "#000000",
     "danger": "#de350b",
     "dangerBackground": "#fcebe7",
-    "dangerLight": "#f2ae9d",
+    "dangerLight": "#f46363",
     "dangerMediumLight": "#e3602a",
-    "disabledLightText": "#ccced1",
-    "disabledText": "#8b8d92",
-    "inactiveBackground": "#727478",
+    "disabledLightText": "#bfc1c5",
+    "disabledText": "#808f91",
+    "inactiveBackground": "#808f91",
     "info": "#4568fb",
     "infoBackground": "#ecf0ff",
-    "infoLight": "#d1d9fe",
+    "infoLight": "#b5c3fd",
     "infoMediumLight": "#b5c3fd",
     "invertedText": "#ffffff",
-    "outline": "#dadbde",
+    "outline": "#e8e9ea",
     "platformBackground": "#ffffff",
-    "primary": "#7622d7",
-    "primaryBackground": "#f1e9fb",
+    "primary": "#8505a2",
+    "primaryBackground": "#f3e6f6",
     "primaryBackgroundDark": "#4d6265",
-    "primaryDark": "#a26fb0",
-    "primaryLight": "#c8a7ef",
+    "primaryDark": "#795e90",
+    "primaryLight": "#c282d1",
     "secondary": "#4568fb",
     "secondaryBackground": "#ecf0ff",
-    "secondaryLight": "#d1d9fe",
-    "shadow": "#dadbde",
-    "subduedText": "#727478",
-    "success": "#01b39c",
+    "secondaryLight": "#b5c3fd",
+    "shadow": "#ccced1",
+    "subduedText": "#4d6265",
+    "success": "#5ace7d",
     "successBackground": "#f0fef4",
     "successDark": "#017d6d",
     "successLight": "#5ace7d",
-    "text": "#292a2b",
-    "warning": "#ffa234",
-    "warningBackground": "#fff6eb",
-    "warningDark": "#d98a2c",
+    "text": "#001f23",
+    "warning": "#ffbe71",
+    "warningBackground": "#ebf4ff",
+    "warningDark": "#ffa234",
     "warningLight": "#ffbe71",
   },
   "fontSizes": Object {

package/src/theme/components/alert.ts

@@ -5,9 +5,9 @@ const getAlertTheme = (theme: GlobalTheme) => {
   const colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.danger,
-    info: theme.colors.infoMediumLight,
-    divider: theme.colors.backgroundLight,
+    error: theme.colors.dangerLight,
+    info: theme.colors.infoLight,
+    divider: theme.colors.outline,
   };
 
   const sizes = {

package/src/theme/components/badge.ts

@@ -6,7 +6,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     info: theme.colors.info,
     success: theme.colors.successDark,
     warning: theme.colors.warningDark,
-    archived: theme.colors.archived,
+    archived: theme.colors.archivedDark,
     text: theme.colors.invertedText,
   };
 

package/src/theme/components/card.ts

@@ -2,12 +2,12 @@ import { GlobalTheme } from '../global';
 
 const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
-    dataCardIndicator: theme.colors.primaryDark,
+    dataCardIndicator: theme.colors.primary,
     indicator: {
       archived: theme.colors.archivedLight,
-      info: theme.colors.infoMediumLight,
-      success: theme.colors.successLight,
-      warning: theme.colors.warningLight,
+      info: theme.colors.infoLight,
+      success: theme.colors.success,
+      warning: theme.colors.warning,
       danger: theme.colors.dangerMediumLight,
     },
   };

package/src/theme/components/list.ts

@@ -6,11 +6,11 @@ const getListTheme = (theme: GlobalTheme) => {
     highlightedListItemContainerBackground: theme.colors.primaryBackground,
     listItemContainerBackground: theme.colors.platformBackground,
     leadingStatus: {
-      danger: theme.colors.danger,
+      danger: theme.colors.dangerMediumLight,
       info: theme.colors.infoLight,
-      success: theme.colors.successDark,
-      warning: theme.colors.warningLight,
-      archived: theme.colors.archived,
+      success: theme.colors.success,
+      warning: theme.colors.warning,
+      archived: theme.colors.archivedLight,
     },
   };
 

package/src/theme/components/pinInput.ts

@@ -8,8 +8,8 @@ const getPinInputTheme = (theme: GlobalTheme) => {
 
   const colors = {
     default: theme.colors.text,
-    mask: theme.colors.subduedText, // should be Maastricht Blue light 50
-    error: theme.colors.danger, // using this so that the color is the same as danger Icon, should be Vermilion
+    mask: theme.colors.subduedText,
+    error: theme.colors.danger,
     disabled: theme.colors.archivedLight,
   };
 

package/src/theme/components/progress.ts

@@ -1,10 +1,11 @@
+import { scale } from '../../utils/scale';
 import { GlobalTheme } from '../global';
 
 const getProgressTheme = (theme: GlobalTheme) => {
   const colors = {
     primary: theme.colors.primary,
-    success: theme.colors.success,
-    warning: theme.colors.warning,
+    success: theme.colors.success, // should be emerald dark 15
+    warning: theme.colors.warningDark,
     danger: theme.colors.danger,
     info: theme.colors.info,
     background: theme.colors.outline,
@@ -12,9 +13,8 @@ const getProgressTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    radius: theme.space.xxxlarge,
-    strokeWidth: theme.space.small,
-    barHeight: theme.space.xsmall,
+    circleWidth: scale(76),
+    barHeight: scale(4),
   };
 
   const radii = {