@hero-design/rn 8.35.0-alpha.4 → 8.35.1

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -85,7 +85,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -360,7 +360,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -634,7 +634,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -1062,7 +1062,7 @@ exports[`TextInput error renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -1144,7 +1144,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -1267,7 +1267,7 @@ exports[`TextInput error renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -1290,7 +1290,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -1632,7 +1632,7 @@ exports[`TextInput helper text renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -2086,7 +2086,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -2415,7 +2415,7 @@ exports[`TextInput max length renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -2469,7 +2469,7 @@ exports[`TextInput max length renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -2607,7 +2607,7 @@ exports[`TextInput max length renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -2630,7 +2630,7 @@ exports[`TextInput max length renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -2658,7 +2658,7 @@ exports[`TextInput max length renders correctly 1`] = `
             Array [
               Object {
                 "alignSelf": "flex-end",
-                "color": "#de350b",
+                "color": "#cb300a",
                 "flex": 1,
                 "flexGrow": 1,
                 "marginRight": 4,
@@ -2712,7 +2712,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
       style={
         Array [
           Object {
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "bottom": 0,
@@ -2766,7 +2766,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "lineHeight": 12,
               },
               undefined,
@@ -2904,7 +2904,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
           style={
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#cb300a",
                 "fontSize": 16,
               },
               undefined,
@@ -2927,7 +2927,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                   "marginLeft": 4,
                 },
                 undefined,
@@ -3059,7 +3059,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],
@@ -3716,7 +3716,7 @@ exports[`TextInput required renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#cb300a",
                 },
                 undefined,
               ],

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -174,7 +174,7 @@ exports[`ToolbarItems renders correctly when intent is info, icon is undefined,
     style={
       Array [
         Object {
-          "color": "#4568fb",
+          "color": "#355bfb",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,
           "letterSpacing": 0.24,

package/src/components/Typography/Body/__tests__/__snapshots__/StyledBody.tsx.snap

@@ -49,7 +49,7 @@ exports[`StyledBody has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 16,
         "letterSpacing": 0.48,

package/src/components/Typography/Body/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Body has archived intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#737479",
+        "color": "#606065",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 16,
         "letterSpacing": 0.48,
@@ -98,7 +98,7 @@ exports[`Body has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 16,
         "letterSpacing": 0.48,

package/src/components/Typography/Caption/__tests__/__snapshots__/StyledCaption.spec.tsx.snap

@@ -47,7 +47,7 @@ exports[`StyledCaption has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 12,
         "letterSpacing": 0.48,

package/src/components/Typography/Caption/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Caption has archived intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#737479",
+        "color": "#606065",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 12,
         "letterSpacing": 0.48,
@@ -94,7 +94,7 @@ exports[`Caption has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 12,
         "letterSpacing": 0.48,

package/src/components/Typography/Label/__tests__/__snapshots__/StyledLabel.tsx.snap

@@ -43,7 +43,7 @@ exports[`StyledLabel has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontSize": 10,
         "letterSpacing": 0,
         "lineHeight": 14,

package/src/components/Typography/Label/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Label has archived intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#737479",
+        "color": "#606065",
         "fontSize": 10,
         "letterSpacing": 0,
         "lineHeight": 14,
@@ -86,7 +86,7 @@ exports[`Label has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontSize": 10,
         "letterSpacing": 0,
         "lineHeight": 14,

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -51,7 +51,7 @@ exports[`StyledText has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,

package/src/components/Typography/Title/__tests__/__snapshots__/StyledTitle.tsx.snap

@@ -249,9 +249,9 @@ exports[`StyledTitle has h5 level and playful typeface style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "RebondGrotesque-SemiBold",
-        "fontSize": 20,
+        "fontSize": 18,
         "letterSpacing": 0.24,
-        "lineHeight": 28,
+        "lineHeight": 26,
       },
       undefined,
     ]
@@ -313,7 +313,7 @@ exports[`StyledTitle has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 18,
         "letterSpacing": 0.48,

package/src/components/Typography/Title/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Title has archived intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#737479",
+        "color": "#606065",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 42,
         "letterSpacing": 0,
@@ -307,9 +307,9 @@ exports[`Title has h5 level and playful typeface style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "RebondGrotesque-SemiBold",
-        "fontSize": 20,
+        "fontSize": 18,
         "letterSpacing": 0.24,
-        "lineHeight": 28,
+        "lineHeight": 26,
       },
       undefined,
     ]
@@ -374,7 +374,7 @@ exports[`Title has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#355bfb",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 42,
         "letterSpacing": 0,

package/src/index.ts

@@ -12,7 +12,6 @@ import theme, {
   withTheme,
 } from './theme';
 import { scale } from './utils/scale';
-import * as Portal from '@gorhom/portal';
 
 import Accordion from './components/Accordion';
 import Alert from './components/Alert';
@@ -61,6 +60,7 @@ import Rate from './components/Rate';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
+import Portal from './components/Portal';
 
 export {
   theme,
@@ -104,6 +104,7 @@ export {
   Modal,
   PinInput,
   Progress,
+  Portal,
   PageControl,
   Skeleton,
   Slider,
@@ -124,7 +125,6 @@ export {
   Rate,
   RefreshControl,
   RichTextEditor,
-  Portal,
 };
 
 export * from './types';

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

@@ -108,13 +108,13 @@ Object {
     },
     "badge": Object {
       "colors": Object {
-        "archived": "#737479",
-        "danger": "#de350b",
-        "info": "#4568fb",
+        "archived": "#606065",
+        "danger": "#cb300a",
+        "info": "#355bfb",
         "primary": "#401960",
         "success": "#017d6d",
         "text": "#ffffff",
-        "warning": "#ffa234",
+        "warning": "#ac5d00",
       },
       "fontSizes": Object {
         "default": 12,
@@ -192,7 +192,7 @@ Object {
         "default": 2,
       },
       "colors": Object {
-        "danger": "#de350b",
+        "danger": "#cb300a",
         "defaultText": "#001f23",
         "disabledBackground": "#bfc1c5",
         "disabledBorder": "#bfc1c5",
@@ -200,8 +200,8 @@ Object {
         "invertedText": "#ffffff",
         "pressedBackground": Object {
           "filledDanger": "#fcebe7",
-          "filledPrimary": "#664780",
-          "filledSecondary": "#664780",
+          "filledPrimary": "#33144d",
+          "filledSecondary": "#33144d",
           "outlineDanger": "#fcebe7",
           "outlinedPrimary": "#ece8ef",
           "outlinedSecondary": "#ece8ef",
@@ -212,7 +212,7 @@ Object {
         "primary": "#401960",
         "secondary": "#795e90",
         "textLoadingBackground": "#ece8ef",
-        "utilityBackground": "#f6f6f7",
+        "utilityBackground": "#ffffff",
       },
       "fontSize": Object {
         "default": 18,
@@ -464,12 +464,12 @@ Object {
     "fab": Object {
       "colors": Object {
         "actionItemBackground": "#795e90",
-        "actionItemPressedBackground": "#664780",
+        "actionItemPressedBackground": "#33144d",
         "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
-        "buttonActiveBackground": "#664780",
+        "buttonActiveBackground": "#33144d",
         "buttonBackground": "#401960",
-        "buttonPressedBackground": "#664780",
+        "buttonPressedBackground": "#33144d",
         "headerText": "#001f23",
         "icon": "#ffffff",
         "shadow": "#001f23",
@@ -524,7 +524,7 @@ Object {
     },
     "icon": Object {
       "colors": Object {
-        "danger": "#de350b",
+        "danger": "#cb300a",
         "disabledText": "#bfc1c5",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
@@ -612,7 +612,7 @@ Object {
       "colors": Object {
         "default": "#001f23",
         "disabled": "#bfc1c5",
-        "error": "#de350b",
+        "error": "#cb300a",
         "mask": "#001f23",
       },
       "fontSizes": Object {
@@ -644,7 +644,7 @@ Object {
     "progress": Object {
       "colors": Object {
         "completeness": Object {
-          "archived": "#737479",
+          "archived": "#606065",
           "archivedInverted": "#ffffff",
           "danger": "#f46363",
           "dangerInverted": "#ffffff",
@@ -676,8 +676,8 @@ Object {
         "default": 999,
       },
       "sizes": Object {
-        "barHeight": 4,
-        "circleCompletenessHeight": 4,
+        "barHeight": 8,
+        "circleCompletenessHeight": 8,
         "circleDiameter": 72,
       },
     },
@@ -767,10 +767,10 @@ Object {
     "skeleton": Object {
       "colors": Object {
         "darkBackground": "#ffffff",
-        "darkGradientEnd": "#f1f2f3",
+        "darkGradientEnd": "#dadbde",
         "darkGradientStart": "#ffffff",
         "lightBackground": "#f6f6f7",
-        "lightGradientEnd": "#f1f2f3",
+        "lightGradientEnd": "#dadbde",
         "lightGradientStart": "#f6f6f7",
       },
       "radii": Object {
@@ -847,6 +847,9 @@ Object {
         "primary": "#401960",
         "success": "#5ace7d",
       },
+      "radii": Object {
+        "swipeableContainer": 8,
+      },
     },
     "switch": Object {
       "colors": Object {
@@ -857,8 +860,8 @@ Object {
           "unchecked": "#808f91",
         },
         "selector": Object {
-          "background": "#f6f6f7",
-          "textBackground": "#ffffff",
+          "background": "#ffffff",
+          "textBackground": "#ccd2d3",
         },
         "thumb": "#ffffff",
       },
@@ -871,7 +874,7 @@ Object {
       "sizes": Object {
         "height": 24,
         "selector": Object {
-          "height": 56,
+          "height": 40,
         },
         "thumb": 16,
         "width": 48,
@@ -880,7 +883,7 @@ Object {
         "paddingHorizontal": 4,
         "selector": Object {
           "iconPadding": 16,
-          "wrapperPadding": 4,
+          "wrapperHorizontalPadding": 4,
         },
       },
     },
@@ -897,7 +900,7 @@ Object {
         "text": "#001f23",
       },
       "radii": Object {
-        "outline": 8,
+        "outline": 16,
       },
       "sizes": Object {
         "indicator": 2,
@@ -916,18 +919,18 @@ Object {
         "default": 1,
       },
       "colors": Object {
-        "archived": "#737479",
-        "archivedBackground": "#f1f2f3",
-        "danger": "#de350b",
+        "archived": "#606065",
+        "archivedBackground": "#dadbde",
+        "danger": "#cb300a",
         "dangerBackground": "#fcebe7",
-        "info": "#4568fb",
+        "info": "#355bfb",
         "infoBackground": "#ecf0ff",
-        "primary": "#001f23",
-        "primaryBackground": undefined,
+        "primary": "#401960",
+        "primaryBackground": "#ece8ef",
         "success": "#017d6d",
         "successBackground": "#f0fef4",
         "text": "#001f23",
-        "warning": "#ffa234",
+        "warning": "#ac5d00",
         "warningBackground": "#fff6eb",
       },
       "fontSizes": Object {
@@ -956,21 +959,21 @@ Object {
       },
       "colors": Object {
         "asterisks": Object {
-          "default": "#de350b",
+          "default": "#cb300a",
           "disabled": "#bfc1c5",
-          "error": "#de350b",
-          "filled": "#de350b",
+          "error": "#cb300a",
+          "filled": "#cb300a",
           "readonly": "#808f91",
         },
         "borders": Object {
           "default": "#001f23",
           "disabled": "#bfc1c5",
-          "error": "#de350b",
+          "error": "#cb300a",
           "filled": "#001f23",
           "readonly": "#808f91",
         },
         "containerBackground": "#ffffff",
-        "error": "#de350b",
+        "error": "#cb300a",
         "labelBackground": "#ffffff",
         "labels": Object {
           "default": "#001f23",
@@ -989,7 +992,7 @@ Object {
         "maxLengthLabels": Object {
           "default": "#001f23",
           "disabled": "#bfc1c5",
-          "error": "#de350b",
+          "error": "#cb300a",
           "filled": "#001f23",
           "readonly": "#808f91",
         },
@@ -1107,11 +1110,11 @@ Object {
     },
     "typography": Object {
       "colors": Object {
-        "archived": "#737479",
+        "archived": "#606065",
         "body": "#001f23",
         "danger": "#f46363",
         "disabled": "#bfc1c5",
-        "info": "#4568fb",
+        "info": "#355bfb",
         "inverted": "#ffffff",
         "primary": "#401960",
         "secondary": "#795e90",
@@ -1151,7 +1154,7 @@ Object {
             "h2": 32,
             "h3": 28,
             "h4": 24,
-            "h5": 20,
+            "h5": 18,
             "h6": 16,
           },
         },
@@ -1267,7 +1270,7 @@ Object {
             "h2": 40,
             "h3": 36,
             "h4": 32,
-            "h5": 28,
+            "h5": 26,
             "h6": 28,
           },
         },
@@ -1285,7 +1288,7 @@ Object {
   },
   "colors": Object {
     "archived": "#abacaf",
-    "archivedSurface": "#f1f2f3",
+    "archivedSurface": "#dadbde",
     "darkGlobalSurface": "#001f23",
     "decorativePrimary": "#ffffff",
     "decorativePrimarySurface": "#ccd2d3",
@@ -1307,17 +1310,17 @@ Object {
     "mutedSuccess": "#7bd897",
     "mutedWarning": "#ffcb8d",
     "neutralGlobalSurface": "#f6f6f7",
-    "onArchivedSurface": "#737479",
+    "onArchivedSurface": "#606065",
     "onDarkGlobalSurface": "#ffffff",
     "onDefaultGlobalSurface": "#001f23",
-    "onErrorSurface": "#de350b",
-    "onInfoSurface": "#4568fb",
+    "onErrorSurface": "#cb300a",
+    "onInfoSurface": "#355bfb",
     "onPrimary": "#ffffff",
     "onSecondary": "#ffffff",
     "onSuccessSurface": "#017d6d",
-    "onWarningSurface": "#ffa234",
+    "onWarningSurface": "#ac5d00",
     "overlayGlobalSurface": "#000000",
-    "pressedSurface": "#664780",
+    "pressedSurface": "#33144d",
     "primary": "#401960",
     "primaryOutline": "#001f23",
     "secondary": "#795e90",

package/src/theme/components/button.ts

@@ -43,7 +43,7 @@ const getButtonTheme = (theme: GlobalTheme) => {
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    utilityBackground: theme.colors.neutralGlobalSurface,
+    utilityBackground: theme.colors.defaultGlobalSurface,
     textLoadingBackground: theme.colors.highlightedSurface,
     pressedBackground: {
       filledPrimary: theme.colors.pressedSurface,

package/src/theme/components/progress.ts

@@ -41,8 +41,8 @@ const getProgressTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     circleDiameter: theme.sizes['6xlarge'],
-    circleCompletenessHeight: theme.sizes.xsmall,
-    barHeight: theme.sizes.xsmall,
+    circleCompletenessHeight: theme.sizes.small,
+    barHeight: theme.sizes.small,
   };
 
   const radii = {