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

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",

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

@@ -3,7 +3,7 @@
 exports[`swag returns correct theme object 1`] = `
 Object {
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffffff",
   "decorativePrimarySurface": "#ccd2d3",
@@ -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": "#664780",
+  "pressedSurface": "#33144d",
   "primary": "#401960",
   "primaryOutline": "#001f23",
   "secondary": "#795e90",

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

@@ -3,12 +3,12 @@
 exports[`wallet returns correct theme object 1`] = `
 Object {
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#8999ff",
   "decorativePrimarySurface": "#e7ebff",
   "defaultGlobalSurface": "#ffffff",
-  "defaultSurface": "#dce0ff",
+  "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": "#6b77e5",
+  "pressedSurface": "#4853b5",
   "primary": "#5a68e2",
   "primaryOutline": "#001f23",
   "secondary": "#3f499e",

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

@@ -3,7 +3,7 @@
 exports[`work returns correct theme object 1`] = `
 Object {
   "archived": "#abacaf",
-  "archivedSurface": "#f1f2f3",
+  "archivedSurface": "#dadbde",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffd500",
   "decorativePrimarySurface": "#fff7cc",
@@ -25,15 +25,15 @@ 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": "#000000",
   "primary": "#000000",

package/src/theme/global/colors/eBens.ts

@@ -7,9 +7,9 @@ const eBensBrandSystemPallete: BrandSystemPalette = {
   onPrimary: palette.white,
   secondary: palette.violetLight30,
   onSecondary: palette.white,
-  defaultSurface: palette.greyLight90,
+  defaultSurface: palette.white,
   highlightedSurface: palette.violetLight90,
-  pressedSurface: palette.violetLight20,
+  pressedSurface: palette.violetDark20,
 
   decorativePrimary: palette.mauve,
   decorativePrimarySurface: palette.mauveLight80,

package/src/theme/global/colors/global.ts

@@ -24,12 +24,12 @@ const globalPalette: GlobalSystemPalette = {
   error: palette.pastelRed,
   mutedError: palette.pastelRedLight20,
   errorSurface: palette.linen,
-  onErrorSurface: palette.vermilion,
+  onErrorSurface: palette.amaranthaRed,
 
   warning: palette.mellowApricot,
   mutedWarning: palette.mellowApricotLight20,
   warningSurface: palette.seashell,
-  onWarningSurface: palette.deepSaffron,
+  onWarningSurface: palette.orangeBrown,
 
   success: palette.emerald,
   mutedSuccess: palette.emeraldLight20,
@@ -39,12 +39,12 @@ const globalPalette: GlobalSystemPalette = {
   info: palette.vodka,
   mutedInfo: palette.vodkaLight20,
   infoSurface: palette.aliceBlue,
-  onInfoSurface: palette.ultramarineBlue,
+  onInfoSurface: palette.gentianFlower,
 
   archived: palette.silverChalice,
   mutedArchived: palette.silverChaliceLight20,
-  archivedSurface: palette.antiFlashWhite,
-  onArchivedSurface: palette.sonicSilver,
+  archivedSurface: palette.cumberlandFog,
+  onArchivedSurface: palette.windsorGrey,
   // End of Updated 21 / Nov / 22
 };
 

package/src/theme/global/colors/jobs.ts

@@ -9,7 +9,7 @@ const jobsBrandSystemPallete: BrandSystemPalette = {
   onSecondary: palette.white,
   defaultSurface: palette.white,
   highlightedSurface: palette.hitPinkLight90,
-  pressedSurface: palette.appleLight10,
+  pressedSurface: palette.appleDark20,
 
   decorativePrimary: palette.hitPink,
   decorativePrimarySurface: palette.hitPinkLight80,

package/src/theme/global/colors/swag.ts

@@ -9,7 +9,7 @@ const swagBrandSystemPallete: BrandSystemPalette = {
   onSecondary: palette.white,
   defaultSurface: palette.greyLight90,
   highlightedSurface: palette.scarletGumLight90,
-  pressedSurface: palette.scarletGumLight20,
+  pressedSurface: palette.scarletGumDark20,
 
   decorativePrimary: palette.white,
   decorativePrimarySurface: palette.maasstrichtBlueLight80,

package/src/theme/global/colors/wallet.ts

@@ -7,9 +7,9 @@ const walletBrandSystemPallete: BrandSystemPalette = {
   onPrimary: palette.white,
   secondary: palette.royalBlueDark30,
   onSecondary: palette.white,
-  defaultSurface: palette.frenchSkyLight70,
+  defaultSurface: palette.white,
   highlightedSurface: palette.royalBlueLight90,
-  pressedSurface: palette.royalBlueLight10,
+  pressedSurface: palette.royalBlueDark20,
 
   decorativePrimary: palette.frenchSky,
   decorativePrimarySurface: palette.frenchSkyLight80,

package/types/components/Calendar/index.d.ts

@@ -43,6 +43,7 @@ export interface CalendarProps {
      * Callback when header month is changed, passing this prop will disable onTitlePress.
      */
     onMonthChange?: (date: Date) => void;
+    onToggleMonthPicker?: (visible: boolean) => void;
     /**
      * Label for the confirm button of the month picker, Android only.
      */
@@ -52,5 +53,5 @@ export interface CalendarProps {
      */
     monthPickerCancelLabel?: string;
 }
-declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, onMonthChange, monthPickerConfirmLabel, monthPickerCancelLabel, }: CalendarProps) => JSX.Element;
+declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, onMonthChange, onToggleMonthPicker, monthPickerConfirmLabel, monthPickerCancelLabel, }: CalendarProps) => JSX.Element;
 export default Calendar;

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -8,6 +8,12 @@ declare const StyledContainer: import("@emotion/native").StyledComponent<ViewPro
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledContainerInModal: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 declare const StyledActionGroupContainer: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
@@ -28,4 +34,4 @@ declare const StyledHeaderText: import("@emotion/native").StyledComponent<import
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & TextProps, {}, {}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };
+export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledActionGroupContainer, StyledFAB, };

package/types/components/FAB/index.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="react" />
 declare const _default: import("react").ForwardRefExoticComponent<import("./FAB").FABProps & import("react").RefAttributes<import("./FAB").FABHandles>> & {
     ActionGroup: import("react").ForwardRefExoticComponent<import("./ActionGroup").ActionGroupProps & import("react").RefAttributes<import("./ActionGroup").ActionGroupHandles>>;
-    Portal: import("react").MemoExoticComponent<({ name: _providedName, hostName, handleOnMount: _providedHandleOnMount, handleOnUnmount: _providedHandleOnUnmount, handleOnUpdate: _providedHandleOnUpdate, children, }: import("@gorhom/portal/lib/typescript/components/portal/types").PortalProps) => null>;
-    PortalHost: import("react").MemoExoticComponent<({ name }: import("@gorhom/portal/lib/typescript/components/portalHost/types").PortalHostProps) => JSX.Element>;
-    Provider: import("react").MemoExoticComponent<({ rootHostName, shouldAddRootHost, children, }: import("@gorhom/portal/lib/typescript/components/portalProvider/types").PortalProviderProps) => JSX.Element>;
 };
 export default _default;