@hero-design/rn 7.23.0 → 7.25.0

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

@@ -39,6 +39,25 @@ Object {
         "textPaddingHorizontal": 12,
       },
     },
+    "attachment": Object {
+      "colors": Object {
+        "highlightedBackground": "#ece8ef",
+      },
+      "radii": Object {
+        "container": 8,
+        "image": 4,
+      },
+      "sizes": Object {
+        "imageHeight": 48,
+        "imageWidth": 32,
+      },
+      "space": Object {
+        "containerPadding": 16,
+        "containerVerticalPadding": 12,
+        "ctaPadding": 16,
+        "textHorizontalPadding": 8,
+      },
+    },
     "avatar": Object {
       "borderWidths": Object {
         "default": 1,
@@ -46,7 +65,7 @@ Object {
       "colors": Object {
         "danger": "#f46363",
         "info": "#b5c3fd",
-        "primary": "#001f23",
+        "primary": "#401960",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -79,6 +98,7 @@ Object {
         "archived": "#737479",
         "danger": "#de350b",
         "info": "#4568fb",
+        "primary": "#401960",
         "success": "#017d6d",
         "text": "#ffffff",
         "warning": "#ffa234",
@@ -104,7 +124,7 @@ Object {
     "bottomNavigation": Object {
       "colors": Object {
         "background": "#ffffff",
-        "shadow": "#001f23",
+        "shadow": "#401960",
       },
       "shadows": Object {
         "elevation": 10,
@@ -158,28 +178,13 @@ Object {
       },
       "colors": Object {
         "danger": "#de350b",
-        "defaultText": "#ffffff",
+        "defaultText": "#001f23",
         "disabledBackground": "#bfc1c5",
         "disabledBorder": "#bfc1c5",
         "disabledText": "#bfc1c5",
         "invertedText": "#ffffff",
-        "pressedDanger": "#de350b",
-        "pressedPrimary": "#4d6265",
-        "pressedSecondary": "#401960",
-        "primary": "#001f23",
-        "secondary": "#401960",
-        "underlayColors": Object {
-          "basic-transparent": "#4d6265",
-          "filled-danger": "#f46363",
-          "filled-primary": "#4d6265",
-          "filled-secondary": "#808f91",
-          "outlined-danger": "#fcebe7",
-          "outlined-primary": "#f6f6f7",
-          "outlined-secondary": "#ecf0ff",
-          "text-danger": "#fcebe7",
-          "text-primary": "#f6f6f7",
-          "text-secondary": "#ecf0ff",
-        },
+        "primary": "#401960",
+        "secondary": "#795e90",
         "utilityBackground": "#f6f6f7",
       },
       "fontSize": Object {
@@ -212,7 +217,7 @@ Object {
         "background": "#ffffff",
         "border": "#001f23",
         "inverted": "#ffffff",
-        "primary": "#001f23",
+        "primary": "#401960",
       },
       "radii": Object {
         "default": 999,
@@ -235,9 +240,9 @@ Object {
       "colors": Object {
         "archived": "#ccced1",
         "danger": "#f46363",
-        "dataCardIndicator": "#001f23",
+        "dataCardIndicator": "#401960",
         "info": "#b5c3fd",
-        "primary": "#001f23",
+        "primary": "#401960",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -255,7 +260,7 @@ Object {
       },
       "colors": Object {
         "default": "#001f23",
-        "disabledBorder": "#4d6265",
+        "disabledBorder": "#bfc1c5",
       },
       "radii": Object {
         "icon": 4,
@@ -326,7 +331,7 @@ Object {
     "empty": Object {
       "colors": Object {
         "invertedText": "#ffffff",
-        "subduedText": "#4d6265",
+        "subduedText": "#bfc1c5",
         "text": "#001f23",
       },
       "fontSizes": Object {
@@ -348,10 +353,10 @@ Object {
     },
     "fab": Object {
       "colors": Object {
-        "actionItemBackground": "#001f23",
+        "actionItemBackground": "#401960",
         "actionItemText": "#ffffff",
         "backdropBackground": "#001f23",
-        "buttonBackground": "#001f23",
+        "buttonBackground": "#401960",
         "headerText": "#ffffff",
         "icon": "#ffffff",
         "titleText": "#ffffff",
@@ -399,11 +404,11 @@ Object {
     "icon": Object {
       "colors": Object {
         "danger": "#de350b",
-        "disabledText": "#4d6265",
+        "disabledText": "#bfc1c5",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
-        "primary": "#001f23",
-        "secondary": "#401960",
+        "primary": "#401960",
+        "secondary": "#795e90",
         "success": "#5ace7d",
         "text": "#001f23",
         "warning": "#ffbe71",
@@ -424,8 +429,7 @@ Object {
     },
     "list": Object {
       "colors": Object {
-        "checkedListItemContainerBackground": "#d9d1df",
-        "highlightedListItemContainerBackground": "#ece8ef",
+        "checkedListItemContainerBackground": "#ece8ef",
         "leadingStatus": Object {
           "archived": "#ccced1",
           "danger": "#f46363",
@@ -470,9 +474,9 @@ Object {
       },
       "colors": Object {
         "default": "#001f23",
-        "disabled": "#4d6265",
-        "error": "#f46363",
-        "mask": "#4d6265",
+        "disabled": "#bfc1c5",
+        "error": "#de350b",
+        "mask": "#001f23",
       },
       "fontSizes": Object {
         "cellText": 28,
@@ -498,13 +502,14 @@ Object {
     },
     "progress": Object {
       "colors": Object {
+        "archived": "#737479",
         "background": "#e8e9ea",
         "danger": "#de350b",
-        "info": "#b5c3fd",
+        "info": "#4568fb",
         "innerBackground": "#ffffff",
-        "primary": "#001f23",
-        "success": "#5ace7d",
-        "warning": "#ffbe71",
+        "primary": "#401960",
+        "success": "#017d6d",
+        "warning": "#ffa234",
       },
       "radii": Object {
         "default": 999,
@@ -532,7 +537,7 @@ Object {
     },
     "refreshControl": Object {
       "colors": Object {
-        "indicator": "#001f23",
+        "indicator": "#401960",
       },
     },
     "richTextEditor": Object {
@@ -573,7 +578,7 @@ Object {
     },
     "select": Object {
       "colors": Object {
-        "footerText": "#401960",
+        "footerText": "#795e90",
       },
       "radii": Object {
         "option": 4,
@@ -597,7 +602,10 @@ Object {
     },
     "spinner": Object {
       "colors": Object {
-        "dot": "#001f23",
+        "dot": Object {
+          "inverted": "#ffffff",
+          "primary": "#401960",
+        },
       },
       "radii": Object {
         "default": 999,
@@ -617,17 +625,24 @@ Object {
         },
       },
     },
+    "swipeable": Object {
+      "colors": Object {
+        "danger": "#f46363",
+        "primary": "#401960",
+        "success": "#5ace7d",
+      },
+    },
     "switch": Object {
       "colors": Object {
         "backgroundColors": Object {
           "checked": "#401960",
-          "disabled-checked": "#a08cb0",
+          "disabled-checked": "#ece8ef",
           "disabled-unchecked": "#bfc1c5",
           "unchecked": "#808f91",
         },
         "selector": Object {
           "background": "#f6f6f7",
-          "textBackground": "#401960",
+          "textBackground": "#ffffff",
         },
         "thumb": "#ffffff",
       },
@@ -669,9 +684,10 @@ Object {
       },
       "colors": Object {
         "active": "#001f23",
-        "activeBackground": "#e6e9e9",
+        "activeBackground": "#ccd2d3",
         "headerBottom": "#e8e9ea",
         "inactive": "#001f23",
+        "indicator": "#401960",
         "text": "#001f23",
       },
       "radii": Object {
@@ -702,7 +718,7 @@ Object {
         "defaultBackground": undefined,
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
-        "primary": "#001f23",
+        "primary": "#401960",
         "primaryBackground": undefined,
         "success": "#017d6d",
         "successBackground": "#f0fef4",
@@ -732,52 +748,42 @@ Object {
       },
       "colors": Object {
         "asterisks": Object {
-          "default": "#f46363",
+          "default": "#de350b",
           "disabled": "#bfc1c5",
-          "error": "#f46363",
-          "filled": "#f46363",
-          "focused": "#f46363",
+          "error": "#de350b",
+          "filled": "#de350b",
           "readonly": "#808f91",
         },
         "borders": Object {
           "default": "#001f23",
           "disabled": "#bfc1c5",
-          "error": "#f46363",
+          "error": "#de350b",
           "filled": "#001f23",
-          "focused": "#001f23",
           "readonly": "#808f91",
         },
-        "disabledLabel": "#bfc1c5",
-        "error": "#f46363",
-        "label": "#001f23",
+        "error": "#de350b",
         "labelBackground": "#ffffff",
         "labels": Object {
           "default": "#001f23",
           "disabled": "#bfc1c5",
           "error": "#001f23",
           "filled": "#001f23",
-          "focused": "#001f23",
-          "readonly": "#bfc1c5",
+          "readonly": "#808f91",
         },
         "labelsInsideTextInput": Object {
           "default": "#001f23",
           "disabled": "#bfc1c5",
           "error": "#001f23",
           "filled": "#001f23",
-          "focused": "#001f23",
-          "readonly": "#bfc1c5",
+          "readonly": "#808f91",
         },
         "maxLengthLabels": Object {
           "default": "#001f23",
           "disabled": "#bfc1c5",
-          "error": "#f46363",
+          "error": "#de350b",
           "filled": "#001f23",
-          "focused": "#001f23",
-          "readonly": "#bfc1c5",
+          "readonly": "#808f91",
         },
-        "placeholderIfFocued": "#808f91",
-        "placeholderIfNotFocused": "#001f23",
-        "readonlyLabel": "#808f91",
         "text": "#001f23",
       },
       "fontSizes": Object {
@@ -853,13 +859,13 @@ Object {
       },
       "colors": Object {
         "background": "#ffffff",
-        "border": "#e8e9ea",
+        "border": "#001f23",
         "danger": "#ffbe71",
-        "disabled": "#808f91",
-        "error": "#de350b",
+        "disabled": "#bfc1c5",
+        "error": "#f46363",
         "info": "#b5c3fd",
-        "primary": "#001f23",
-        "secondary": "#401960",
+        "primary": "#401960",
+        "secondary": "#795e90",
         "success": "#5ace7d",
       },
       "space": Object {
@@ -871,13 +877,13 @@ Object {
       "colors": Object {
         "body": "#001f23",
         "danger": "#de350b",
-        "info": "#b5c3fd",
+        "info": "#4568fb",
         "inverted": "#ffffff",
-        "primary": "#001f23",
-        "secondary": "#401960",
+        "primary": "#401960",
+        "secondary": "#795e90",
         "subdued": "#4d6265",
-        "success": "#5ace7d",
-        "warning": "#ffbe71",
+        "success": "#017d6d",
+        "warning": "#ffa234",
       },
       "fontSizes": Object {
         "large": 16,
@@ -919,9 +925,14 @@ Object {
     "dangerBackground": "#fcebe7",
     "dangerLight": "#f46363",
     "dangerMediumLight": "#e3602a",
+    "darkGlobalSurface": "#001f23",
+    "decorativePrimary": "#ffffff",
+    "decorativePrimarySurface": "#ccd2d3",
     "defaultGlobalSurface": "#ffffff",
+    "defaultSurface": "#f6f6f7",
     "disabledLightText": "#bfc1c5",
     "disabledOnDefaultGlobalSurface": "#bfc1c5",
+    "disabledOutline": "#bfc1c5",
     "disabledSecondary": "#a08cb0",
     "disabledText": "#808f91",
     "error": "#f46363",
@@ -933,8 +944,10 @@ Object {
     "globalSecondary": "#4d6265",
     "globalSecondaryOutline": "#e8e9ea",
     "highlightedSecondarySurface": "#ecf0ff",
-    "highlightedSurface": "#d9d1df",
+    "highlightedSurface": "#ece8ef",
     "inactiveBackground": "#808f91",
+    "inactiveOnDefaultGlobalSurface": "#808f91",
+    "inactiveOutline": "#808f91",
     "info": "#b5c3fd",
     "infoBackground": "#ecf0ff",
     "infoLight": "#b5c3fd",
@@ -943,10 +956,12 @@ Object {
     "invertedText": "#ffffff",
     "lightHighlightedSurface": "#ece8ef",
     "mutedGlobalPrimary": "#4d6265",
+    "mutedOnDefaultGlobalSurface": "#4d6265",
     "mutedPrimary": "#e6e9e9",
     "mutedSecondary": "#808f91",
     "neutralGlobalSurface": "#f6f6f7",
     "onArchivedSurface": "#737479",
+    "onDarkGlobalSurface": "#ffffff",
     "onDefaultGlobalSurface": "#001f23",
     "onErrorSurface": "#de350b",
     "onGlobalPrimary": "#ffffff",
@@ -957,14 +972,17 @@ Object {
     "onWarningSurface": "#ffa234",
     "outline": "#e8e9ea",
     "platformBackground": "#ffffff",
-    "primary": "#001f23",
+    "pressedSurface": "#664780",
+    "primary": "#401960",
     "primaryBackground": "#f3e6f6",
     "primaryBackgroundDark": "#4d6265",
     "primaryDark": "#795e90",
     "primaryLight": "#c282d1",
-    "secondary": "#401960",
+    "primaryOutline": "#001f23",
+    "secondary": "#795e90",
     "secondaryBackground": "#ecf0ff",
     "secondaryLight": "#b5c3fd",
+    "secondaryOutline": "#e8e9ea",
     "shadow": "#ccced1",
     "subduedText": "#4d6265",
     "success": "#5ace7d",

package/src/theme/__tests__/ensureCompatibleWithV7.spec.tsx

@@ -0,0 +1,13 @@
+import { theme as runningTheme } from 'rn-7-23-0';
+import latestTheme from '..';
+
+it('should be compatible with v7', () => {
+  const missingKeys = Object.keys(runningTheme.colors).filter(
+    // Safe access to extract missing keys
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    (k) => latestTheme.colors[k] === undefined
+  );
+
+  expect(missingKeys).toEqual([]);
+});

package/src/theme/components/alert.ts

@@ -7,7 +7,7 @@ const getAlertTheme = (theme: GlobalTheme) => {
     error: theme.colors.error,
     info: theme.colors.info,
     notification: theme.colors.defaultGlobalSurface,
-    divider: theme.colors.globalSecondaryOutline,
+    divider: theme.colors.secondaryOutline,
   };
 
   const sizes = {

package/src/theme/components/attachment.ts

@@ -0,0 +1,28 @@
+import type { GlobalTheme } from '../global';
+
+const getAttachmentTheme = (theme: GlobalTheme) => {
+  const colors = {
+    highlightedBackground: theme.colors.highlightedSurface,
+  };
+
+  const sizes = {
+    imageHeight: theme.sizes.xxxlarge,
+    imageWidth: theme.sizes.xlarge,
+  };
+
+  const space = {
+    containerPadding: theme.space.medium,
+    containerVerticalPadding: theme.space.smallMedium,
+    ctaPadding: theme.space.medium,
+    textHorizontalPadding: theme.space.small,
+  };
+
+  const radii = {
+    image: theme.radii.base,
+    container: theme.radii.medium,
+  };
+
+  return { colors, radii, sizes, space };
+};
+
+export default getAttachmentTheme;

package/src/theme/components/avatar.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getAvatarTheme = (theme: GlobalTheme) => {
   const colors = {
-    primary: theme.colors.globalPrimary,
+    primary: theme.colors.primary,
     info: theme.colors.info,
     danger: theme.colors.error,
     success: theme.colors.success,

package/src/theme/components/badge.ts

@@ -2,12 +2,13 @@ import type { GlobalTheme } from '../global';
 
 const getBadgeTheme = (theme: GlobalTheme) => {
   const colors = {
+    primary: theme.colors.primary,
     danger: theme.colors.onErrorSurface,
     info: theme.colors.onInfoSurface,
     success: theme.colors.onSuccessSurface,
     warning: theme.colors.onWarningSurface,
     archived: theme.colors.onArchivedSurface,
-    text: theme.colors.onGlobalPrimary,
+    text: theme.colors.onDarkGlobalSurface,
   };
 
   const fonts = {

package/src/theme/components/bottomNavigation.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getBottomNavigationTheme = (theme: GlobalTheme) => {
   const colors = {
-    shadow: theme.colors.globalPrimary,
+    shadow: theme.colors.primary,
     background: theme.colors.defaultGlobalSurface,
   };
 

package/src/theme/components/bottomSheet.ts

@@ -2,9 +2,9 @@ import type { GlobalTheme } from '../global';
 
 const getBottomSheetTheme = (theme: GlobalTheme) => {
   const colors = {
-    shadow: theme.colors.globalPrimary,
+    shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.globalPrimary,
+    backdrop: theme.colors.darkGlobalSurface,
   };
 
   const sizes = {

package/src/theme/components/button.ts

@@ -36,31 +36,15 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    primary: theme.colors.globalPrimary,
-    pressedPrimary: theme.colors.globalSecondary,
+    primary: theme.colors.primary,
     secondary: theme.colors.secondary,
-    pressedSecondary: theme.colors.secondary,
-    danger: theme.colors.onErrorSurface, // FIXME: This doesn't make sense
-    pressedDanger: theme.colors.onErrorSurface, // FIXME: This doesn't make sense
-    defaultText: theme.colors.onGlobalPrimary,
+    danger: theme.colors.onErrorSurface,
+    defaultText: theme.colors.onDefaultGlobalSurface,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
-    invertedText: theme.colors.onGlobalPrimary,
+    invertedText: theme.colors.onDarkGlobalSurface,
     utilityBackground: theme.colors.neutralGlobalSurface,
-    underlayColors: {
-      'filled-primary': theme.colors.mutedGlobalPrimary,
-      'filled-secondary': theme.colors.mutedSecondary,
-      'filled-danger': theme.colors.error,
-      'outlined-primary': theme.colors.neutralGlobalSurface,
-      'outlined-secondary': theme.colors.highlightedSecondarySurface,
-
-      'outlined-danger': theme.colors.errorSurface,
-      'text-primary': theme.colors.neutralGlobalSurface,
-      'text-secondary': theme.colors.highlightedSecondarySurface,
-      'text-danger': theme.colors.errorSurface,
-      'basic-transparent': theme.colors.mutedGlobalPrimary,
-    },
   };
 
   return {

package/src/theme/components/calendar.ts

@@ -3,9 +3,9 @@ import type { GlobalTheme } from '../global';
 const getCalendarTheme = (theme: GlobalTheme) => {
   const colors = {
     background: theme.colors.defaultGlobalSurface,
-    border: theme.colors.globalPrimaryOutline,
-    primary: theme.colors.globalPrimary,
-    inverted: theme.colors.onGlobalPrimary,
+    border: theme.colors.primaryOutline,
+    primary: theme.colors.primary,
+    inverted: theme.colors.onDarkGlobalSurface,
   };
 
   const cellSize = theme.sizes.xxxlarge;

package/src/theme/components/card.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
-    dataCardIndicator: theme.colors.globalPrimary,
+    dataCardIndicator: theme.colors.primary,
     primary: theme.colors.primary,
     info: theme.colors.info,
     success: theme.colors.success,

package/src/theme/components/checkbox.ts

@@ -2,8 +2,8 @@ import type { GlobalTheme } from '../global';
 
 const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
-    default: theme.colors.globalPrimary,
-    disabledBorder: theme.colors.mutedGlobalPrimary,
+    default: theme.colors.primaryOutline,
+    disabledBorder: theme.colors.disabledOutline,
   };
 
   const space = {

package/src/theme/components/divider.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getDividerTheme = (theme: GlobalTheme) => {
   const colors = {
-    default: theme.colors.globalSecondaryOutline,
+    default: theme.colors.secondaryOutline,
   };
 
   const space = {

package/src/theme/components/drawer.ts

@@ -2,10 +2,10 @@ import type { GlobalTheme } from '../global';
 
 const getDrawerTheme = (theme: GlobalTheme) => {
   const colors = {
-    shadow: theme.colors.globalPrimary,
+    shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
     backdrop: theme.colors.defaultGlobalSurface,
-    handler: theme.colors.globalPrimary,
+    handler: theme.colors.onDefaultGlobalSurface,
   };
 
   const radii = {

package/src/theme/components/empty.ts

@@ -12,9 +12,9 @@ const getEmptyTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    text: theme.colors.globalPrimary,
-    invertedText: theme.colors.onGlobalPrimary,
-    subduedText: theme.colors.globalSecondary,
+    text: theme.colors.onDefaultGlobalSurface,
+    invertedText: theme.colors.onDarkGlobalSurface,
+    subduedText: theme.colors.disabledOnDefaultGlobalSurface,
   };
 
   const fontSizes = {

package/src/theme/components/fab.ts

@@ -2,13 +2,13 @@ import type { GlobalTheme } from '../global';
 
 const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
-    buttonBackground: theme.colors.globalPrimary,
-    icon: theme.colors.onGlobalPrimary,
-    headerText: theme.colors.onGlobalPrimary,
-    actionItemBackground: theme.colors.globalPrimary,
-    backdropBackground: theme.colors.globalPrimary,
-    titleText: theme.colors.onGlobalPrimary,
-    actionItemText: theme.colors.onGlobalPrimary,
+    buttonBackground: theme.colors.primary,
+    icon: theme.colors.onPrimary,
+    headerText: theme.colors.onDarkGlobalSurface,
+    actionItemBackground: theme.colors.primary,
+    backdropBackground: theme.colors.darkGlobalSurface,
+    titleText: theme.colors.onDarkGlobalSurface,
+    actionItemText: theme.colors.onPrimary,
   };
 
   const sizes = {