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

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 = {

package/src/theme/components/swipeable.ts

@@ -7,7 +7,11 @@ const getSwipeableTheme = (theme: GlobalTheme) => {
     primary: theme.colors.primary,
   };
 
-  return { colors };
+  const radii = {
+    swipeableContainer: theme.radii.medium,
+  };
+
+  return { colors, radii };
 };
 
 export default getSwipeableTheme;

package/src/theme/components/switch.ts

@@ -10,8 +10,8 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     },
     thumb: theme.colors.onSecondary,
     selector: {
-      background: theme.colors.neutralGlobalSurface,
-      textBackground: theme.colors.decorativePrimary,
+      background: theme.colors.defaultGlobalSurface,
+      textBackground: theme.colors.decorativePrimarySurface,
     },
   };
 
@@ -20,7 +20,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     width: theme.sizes.xxxlarge,
     height: theme.sizes.large,
     selector: {
-      height: theme.sizes.xxxxlarge,
+      height: theme.sizes.xxlarge,
     },
   };
 
@@ -28,7 +28,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     paddingHorizontal: theme.space.xsmall,
     selector: {
       iconPadding: theme.space.medium,
-      wrapperPadding: theme.space.xsmall,
+      wrapperHorizontalPadding: theme.space.xsmall,
     },
   };
 

package/src/theme/components/tabs.ts

@@ -20,7 +20,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
   };
 
   const radii = {
-    outline: theme.radii.medium,
+    outline: theme.radii.xlarge,
   };
 
   const borderWidths = {

package/src/theme/components/tag.ts

@@ -6,8 +6,8 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    primary: theme.colors.onDefaultGlobalSurface,
-    primaryBackground: undefined,
+    primary: theme.colors.primary,
+    primaryBackground: theme.colors.highlightedSurface,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,
     success: theme.colors.onSuccessSurface,

package/src/theme/components/typography.ts

@@ -42,7 +42,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
         h2: theme.fontSizes.xxxxxlarge,
         h3: theme.fontSizes.xxxxlarge,
         h4: theme.fontSizes.xxxlarge,
-        h5: theme.fontSizes.xxlarge,
+        h5: theme.fontSizes.xlarge,
         h6: theme.fontSizes.large,
       },
     },
@@ -85,7 +85,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
         h2: theme.lineHeights.xxxxxlarge,
         h3: theme.lineHeights.xxxxlarge,
         h4: theme.lineHeights.xxxlarge,
-        h5: theme.lineHeights.xxlarge,
+        h5: theme.lineHeights.xlarge,
         h6: theme.lineHeights.xxlarge,
       },
     },

package/src/theme/global/colors/__tests__/__snapshots__/eBens.spec.ts.snap

@@ -3,12 +3,12 @@
 exports[`eBens returns correct theme object 1`] = `
 Object {
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#c38cee",
   "decorativePrimarySurface": "#f3e8fc",
   "defaultGlobalSurface": "#ffffff",
-  "defaultSurface": "#f6f6f7",
+  "defaultSurface": "#ffffff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
@@ -25,17 +25,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": "#9d37b5",
+  "pressedSurface": "#6a0482",
   "primary": "#8505a2",
   "primaryOutline": "#001f23",
   "secondary": "#aa50be",

package/src/theme/global/colors/__tests__/__snapshots__/global.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`global returns correct theme object 1`] = `
 Object {
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "defaultGlobalSurface": "#ffffff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
@@ -21,13 +21,13 @@ Object {
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",
-  "onArchivedSurface": "#737479",
+  "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",
   "onDefaultGlobalSurface": "#001f23",
-  "onErrorSurface": "#de350b",
-  "onInfoSurface": "#4568fb",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
   "onSuccessSurface": "#017d6d",
-  "onWarningSurface": "#ffa234",
+  "onWarningSurface": "#ac5d00",
   "overlayGlobalSurface": "#000000",
   "primaryOutline": "#001f23",
   "secondaryOutline": "#e8e9ea",

package/src/theme/global/colors/__tests__/__snapshots__/jobs.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`jobs returns correct theme object 1`] = `
 Object {
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffad79",
   "decorativePrimarySurface": "#ffefe4",
@@ -25,17 +25,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": "#e6703f",
+  "pressedSurface": "#b64d22",
   "primary": "#e3602a",
   "primaryOutline": "#001f23",
   "secondary": "#4d6265",