@hero-design/rn 7.22.1 → 7.22.3

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

@@ -44,9 +44,9 @@ Object {
         "default": 1,
       },
       "colors": Object {
-        "danger": "#de350b",
-        "info": "#4568fb",
-        "primary": "#8505a2",
+        "danger": "#f46363",
+        "info": "#b5c3fd",
+        "primary": "#001f23",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -158,26 +158,26 @@ Object {
       },
       "colors": Object {
         "danger": "#de350b",
-        "defaultText": "#001f23",
+        "defaultText": "#ffffff",
         "disabledBackground": "#bfc1c5",
         "disabledBorder": "#bfc1c5",
         "disabledText": "#bfc1c5",
         "invertedText": "#ffffff",
-        "pressedDanger": "#f46363",
-        "pressedPrimary": "#808f91",
-        "pressedSecondary": "#b5c3fd",
+        "pressedDanger": "#de350b",
+        "pressedPrimary": "#4d6265",
+        "pressedSecondary": "#401960",
         "primary": "#001f23",
-        "secondary": "#4568fb",
+        "secondary": "#401960",
         "underlayColors": Object {
-          "basic-transparent": "#808f91",
+          "basic-transparent": "#4d6265",
           "filled-danger": "#f46363",
-          "filled-primary": "#808f91",
-          "filled-secondary": "#b5c3fd",
+          "filled-primary": "#4d6265",
+          "filled-secondary": "#808f91",
           "outlined-danger": "#fcebe7",
-          "outlined-primary": "#e6e9e9",
+          "outlined-primary": "#f6f6f7",
           "outlined-secondary": "#ecf0ff",
           "text-danger": "#fcebe7",
-          "text-primary": "#e6e9e9",
+          "text-primary": "#f6f6f7",
           "text-secondary": "#ecf0ff",
         },
         "utilityBackground": "#f6f6f7",
@@ -209,10 +209,10 @@ Object {
     },
     "calendar": Object {
       "colors": Object {
-        "background": "#f6f6f7",
+        "background": "#ffffff",
         "border": "#001f23",
         "inverted": "#ffffff",
-        "primary": "#8505a2",
+        "primary": "#001f23",
       },
       "radii": Object {
         "default": 999,
@@ -233,11 +233,11 @@ Object {
     },
     "card": Object {
       "colors": Object {
-        "archived": "#bfc1c5",
-        "danger": "#e3602a",
-        "dataCardIndicator": "#8505a2",
+        "archived": "#ccced1",
+        "danger": "#f46363",
+        "dataCardIndicator": "#001f23",
         "info": "#b5c3fd",
-        "primary": "#c38cee",
+        "primary": "#001f23",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -255,7 +255,7 @@ Object {
       },
       "colors": Object {
         "default": "#001f23",
-        "disabledBorder": "#808f91",
+        "disabledBorder": "#4d6265",
       },
       "radii": Object {
         "icon": 4,
@@ -297,7 +297,7 @@ Object {
     },
     "drawer": Object {
       "colors": Object {
-        "backdrop": "#001f23",
+        "backdrop": "#ffffff",
         "background": "#ffffff",
         "handler": "#001f23",
         "shadow": "#001f23",
@@ -325,7 +325,6 @@ Object {
     },
     "empty": Object {
       "colors": Object {
-        "illustrationBackground": "#ccced1",
         "invertedText": "#ffffff",
         "subduedText": "#4d6265",
         "text": "#001f23",
@@ -349,7 +348,7 @@ Object {
     },
     "fab": Object {
       "colors": Object {
-        "actionItemBackground": "#4d6265",
+        "actionItemBackground": "#001f23",
         "actionItemText": "#ffffff",
         "backdropBackground": "#001f23",
         "buttonBackground": "#001f23",
@@ -400,10 +399,11 @@ Object {
     "icon": Object {
       "colors": Object {
         "danger": "#de350b",
-        "disabledText": "#808f91",
-        "info": "#4568fb",
+        "disabledText": "#4d6265",
+        "info": "#b5c3fd",
         "invertedText": "#ffffff",
-        "primary": "#8505a2",
+        "primary": "#001f23",
+        "secondary": "#401960",
         "success": "#5ace7d",
         "text": "#001f23",
         "warning": "#ffbe71",
@@ -424,11 +424,11 @@ Object {
     },
     "list": Object {
       "colors": Object {
-        "checkedListItemContainerBackground": "#f3e6f6",
-        "highlightedListItemContainerBackground": "#f3e6f6",
+        "checkedListItemContainerBackground": "#d9d1df",
+        "highlightedListItemContainerBackground": "#ece8ef",
         "leadingStatus": Object {
-          "archived": "#bfc1c5",
-          "danger": "#e3602a",
+          "archived": "#ccced1",
+          "danger": "#f46363",
           "info": "#b5c3fd",
           "success": "#5ace7d",
           "warning": "#ffbe71",
@@ -441,6 +441,7 @@ Object {
         "enabled": 1,
       },
       "radii": Object {
+        "basicItem": 4,
         "card": 8,
         "cardShadow": 4,
         "leadingStatus": 999,
@@ -469,8 +470,8 @@ Object {
       },
       "colors": Object {
         "default": "#001f23",
-        "disabled": "#bfc1c5",
-        "error": "#de350b",
+        "disabled": "#4d6265",
+        "error": "#f46363",
         "mask": "#4d6265",
       },
       "fontSizes": Object {
@@ -499,11 +500,11 @@ Object {
       "colors": Object {
         "background": "#e8e9ea",
         "danger": "#de350b",
-        "info": "#4568fb",
+        "info": "#b5c3fd",
         "innerBackground": "#ffffff",
-        "primary": "#8505a2",
+        "primary": "#001f23",
         "success": "#5ace7d",
-        "warning": "#ffa234",
+        "warning": "#ffbe71",
       },
       "radii": Object {
         "default": 999,
@@ -536,7 +537,7 @@ Object {
       "colors": Object {
         "toolbarBackgroundColor": "#f6f6f7",
         "toolbarBorderColor": "#e8e9ea",
-        "toolbarButtonSelectedBackground": "#e8e9ea",
+        "toolbarButtonSelectedBackground": "#ece8ef",
       },
       "fontSizes": Object {
         "editor": 14,
@@ -566,7 +567,7 @@ Object {
     },
     "select": Object {
       "colors": Object {
-        "footerText": "#8505a2",
+        "footerText": "#401960",
       },
       "radii": Object {
         "option": 4,
@@ -585,15 +586,12 @@ Object {
       "colors": Object {
         "maximumTrackTint": "#ece8ef",
         "minimumTrackTint": "#401960",
-        "thumbTint": "#e6e9e9",
+        "thumbTint": "#f6f6f7",
       },
     },
     "spinner": Object {
       "colors": Object {
-        "dot1": "#795e90",
-        "dot2": "#a08cb0",
-        "dot3": "#d9d1df",
-        "dot4": "#ece8ef",
+        "dot": "#001f23",
       },
       "radii": Object {
         "default": 999,
@@ -616,9 +614,9 @@ Object {
     "switch": Object {
       "colors": Object {
         "backgroundColors": Object {
-          "checked": "#8505a2",
-          "disabled-checked": "#c282d1",
-          "disabled-unchecked": "#ccced1",
+          "checked": "#401960",
+          "disabled-checked": "#a08cb0",
+          "disabled-unchecked": "#bfc1c5",
           "unchecked": "#808f91",
         },
         "selector": Object {
@@ -665,7 +663,7 @@ Object {
       },
       "colors": Object {
         "active": "#001f23",
-        "activeBackground": "#ece8ef",
+        "activeBackground": "#e6e9e9",
         "headerBottom": "#e8e9ea",
         "inactive": "#001f23",
         "text": "#001f23",
@@ -691,7 +689,7 @@ Object {
       },
       "colors": Object {
         "archived": "#737479",
-        "archivedBackground": "#f6f6f7",
+        "archivedBackground": "#f1f2f3",
         "danger": "#de350b",
         "dangerBackground": "#fcebe7",
         "default": "#001f23",
@@ -728,23 +726,23 @@ Object {
       },
       "colors": Object {
         "asterisks": Object {
-          "default": "#de350b",
+          "default": "#f46363",
           "disabled": "#bfc1c5",
-          "error": "#de350b",
-          "filled": "#de350b",
-          "focused": "#de350b",
+          "error": "#f46363",
+          "filled": "#f46363",
+          "focused": "#f46363",
           "readonly": "#808f91",
         },
         "borders": Object {
           "default": "#001f23",
           "disabled": "#bfc1c5",
-          "error": "#de350b",
+          "error": "#f46363",
           "filled": "#001f23",
           "focused": "#001f23",
           "readonly": "#808f91",
         },
         "disabledLabel": "#bfc1c5",
-        "error": "#de350b",
+        "error": "#f46363",
         "label": "#001f23",
         "labelBackground": "#ffffff",
         "labels": Object {
@@ -753,7 +751,7 @@ Object {
           "error": "#001f23",
           "filled": "#001f23",
           "focused": "#001f23",
-          "readonly": "#808f91",
+          "readonly": "#bfc1c5",
         },
         "labelsInsideTextInput": Object {
           "default": "#001f23",
@@ -761,15 +759,15 @@ Object {
           "error": "#001f23",
           "filled": "#001f23",
           "focused": "#001f23",
-          "readonly": "#808f91",
+          "readonly": "#bfc1c5",
         },
         "maxLengthLabels": Object {
           "default": "#001f23",
           "disabled": "#bfc1c5",
-          "error": "#de350b",
+          "error": "#f46363",
           "filled": "#001f23",
           "focused": "#001f23",
-          "readonly": "#808f91",
+          "readonly": "#bfc1c5",
         },
         "placeholderIfFocued": "#808f91",
         "placeholderIfNotFocused": "#001f23",
@@ -853,8 +851,9 @@ Object {
         "danger": "#ffbe71",
         "disabled": "#808f91",
         "error": "#de350b",
-        "info": "#4568fb",
-        "primary": "#8505a2",
+        "info": "#b5c3fd",
+        "primary": "#001f23",
+        "secondary": "#401960",
         "success": "#5ace7d",
       },
       "space": Object {
@@ -866,10 +865,11 @@ Object {
       "colors": Object {
         "body": "#001f23",
         "danger": "#de350b",
-        "info": "#4568fb",
+        "info": "#b5c3fd",
         "inverted": "#ffffff",
-        "primary": "#8505a2",
-        "subdued": "#808f91",
+        "primary": "#001f23",
+        "secondary": "#401960",
+        "subdued": "#4d6265",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -901,29 +901,11 @@ Object {
     "medium": 2,
   },
   "colors": Object {
-    "__alpha__globalLabel1": "#de350b",
-    "__alpha__globalLabel2": "#ffa234",
-    "__alpha__globalLabel3": "#017d6d",
-    "__alpha__globalLabel4": "#4568fb",
-    "__alpha__globalLabel5": "#737479",
-    "__alpha__globalLabel6": "#fcebe7",
-    "__alpha__globalLabel7": "#fff6eb",
-    "__alpha__globalLabel8": "#f0fef4",
-    "__alpha__globalLabel9": "#ecf0ff",
-    "__alpha__globalNeutral3": "#f6f6f7",
-    "__alpha__globalPrimary": "#001f23",
-    "__alpha__globalSecondary1": "#4d6265",
-    "__alpha__globalSecondary4": "#e6e9e9",
-    "__alpha__primary1": "#401960",
-    "__alpha__primary2": "#c38cee",
-    "__alpha__secondary1": "#795e90",
-    "__alpha__secondary2": "#a08cb0",
-    "__alpha__secondary3": "#d9d1df",
-    "__alpha__secondary4": "#ece8ef",
     "archived": "#ccced1",
     "archivedBackground": "#f6f6f7",
     "archivedDark": "#737479",
     "archivedLight": "#bfc1c5",
+    "archivedSurface": "#f1f2f3",
     "backgroundDark": "#001f23",
     "backgroundLight": "#f6f6f7",
     "black": "#000000",
@@ -931,25 +913,50 @@ Object {
     "dangerBackground": "#fcebe7",
     "dangerLight": "#f46363",
     "dangerMediumLight": "#e3602a",
+    "defaultGlobalSurface": "#ffffff",
     "disabledLightText": "#bfc1c5",
+    "disabledOnDefaultGlobalSurface": "#bfc1c5",
+    "disabledSecondary": "#a08cb0",
     "disabledText": "#808f91",
+    "error": "#f46363",
+    "errorSurface": "#fcebe7",
     "globalPrimary": "#001f23",
     "globalPrimaryBackground": "#e6e9e9",
     "globalPrimaryLight": "#808f91",
+    "globalPrimaryOutline": "#001f23",
+    "globalSecondary": "#4d6265",
+    "globalSecondaryOutline": "#e8e9ea",
+    "highlightedSecondarySurface": "#ecf0ff",
+    "highlightedSurface": "#d9d1df",
     "inactiveBackground": "#808f91",
-    "info": "#4568fb",
+    "info": "#b5c3fd",
     "infoBackground": "#ecf0ff",
     "infoLight": "#b5c3fd",
     "infoMediumLight": "#b5c3fd",
+    "infoSurface": "#ecf0ff",
     "invertedText": "#ffffff",
+    "lightHighlightedSurface": "#ece8ef",
+    "mutedGlobalPrimary": "#4d6265",
+    "mutedPrimary": "#e6e9e9",
+    "mutedSecondary": "#808f91",
+    "neutralGlobalSurface": "#f6f6f7",
+    "onArchivedSurface": "#737479",
+    "onDefaultGlobalSurface": "#001f23",
+    "onErrorSurface": "#de350b",
+    "onGlobalPrimary": "#ffffff",
+    "onInfoSurface": "#4568fb",
+    "onPrimary": "#ffffff",
+    "onSecondary": "#ffffff",
+    "onSuccessSurface": "#017d6d",
+    "onWarningSurface": "#ffa234",
     "outline": "#e8e9ea",
     "platformBackground": "#ffffff",
-    "primary": "#8505a2",
+    "primary": "#001f23",
     "primaryBackground": "#f3e6f6",
     "primaryBackgroundDark": "#4d6265",
     "primaryDark": "#795e90",
     "primaryLight": "#c282d1",
-    "secondary": "#4568fb",
+    "secondary": "#401960",
     "secondaryBackground": "#ecf0ff",
     "secondaryLight": "#b5c3fd",
     "shadow": "#ccced1",
@@ -958,11 +965,13 @@ Object {
     "successBackground": "#f0fef4",
     "successDark": "#017d6d",
     "successLight": "#5ace7d",
+    "successSurface": "#f0fef4",
     "text": "#001f23",
     "warning": "#ffbe71",
     "warningBackground": "#fff6eb",
     "warningDark": "#ffa234",
     "warningLight": "#ffbe71",
+    "warningSurface": "#fff6eb",
   },
   "fontSizes": Object {
     "large": 16,

package/src/theme/components/accordion.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getAccordionTheme = (theme: GlobalTheme) => {
   const colors = {
-    background: theme.colors.platformBackground,
+    background: theme.colors.defaultGlobalSurface,
   };
 
   const space = {

package/src/theme/components/alert.ts

@@ -4,10 +4,10 @@ const getAlertTheme = (theme: GlobalTheme) => {
   const colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.dangerLight,
-    info: theme.colors.infoLight,
-    notification: theme.colors.platformBackground,
-    divider: theme.colors.outline,
+    error: theme.colors.error,
+    info: theme.colors.info,
+    notification: theme.colors.defaultGlobalSurface,
+    divider: theme.colors.globalSecondaryOutline,
   };
 
   const sizes = {

package/src/theme/components/avatar.ts

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

package/src/theme/components/badge.ts

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

package/src/theme/components/bottomNavigation.ts

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

package/src/theme/components/bottomSheet.ts

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

package/src/theme/components/button.ts

@@ -37,29 +37,29 @@ const getButtonTheme = (theme: GlobalTheme) => {
 
   const colors = {
     primary: theme.colors.globalPrimary,
-    pressedPrimary: theme.colors.globalPrimaryLight,
+    pressedPrimary: theme.colors.globalSecondary,
     secondary: theme.colors.secondary,
-    pressedSecondary: theme.colors.secondaryLight,
-    danger: theme.colors.danger,
-    pressedDanger: theme.colors.dangerLight,
-    defaultText: theme.colors.text,
-    disabledText: theme.colors.disabledLightText,
-    disabledBorder: theme.colors.disabledLightText,
-    disabledBackground: theme.colors.disabledLightText,
-    invertedText: theme.colors.invertedText,
-    utilityBackground: theme.colors.backgroundLight,
+    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,
+    disabledText: theme.colors.disabledOnDefaultGlobalSurface,
+    disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
+    disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
+    invertedText: theme.colors.onGlobalPrimary,
+    utilityBackground: theme.colors.neutralGlobalSurface,
     underlayColors: {
-      'filled-primary': theme.colors.globalPrimaryLight,
-      'filled-secondary': theme.colors.secondaryLight,
-      'filled-danger': theme.colors.dangerLight,
-      'outlined-primary': theme.colors.globalPrimaryBackground,
-      'outlined-secondary': theme.colors.secondaryBackground,
+      '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.dangerBackground,
-      'text-primary': theme.colors.globalPrimaryBackground,
-      'text-secondary': theme.colors.secondaryBackground,
-      'text-danger': theme.colors.dangerBackground,
-      'basic-transparent': theme.colors.globalPrimaryLight,
+      '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,
     },
   };
 

package/src/theme/components/calendar.ts

@@ -2,10 +2,10 @@ import type { GlobalTheme } from '../global';
 
 const getCalendarTheme = (theme: GlobalTheme) => {
   const colors = {
-    background: theme.colors.backgroundLight,
-    border: theme.colors.text,
-    primary: theme.colors.primary,
-    inverted: theme.colors.invertedText,
+    background: theme.colors.defaultGlobalSurface,
+    border: theme.colors.globalPrimaryOutline,
+    primary: theme.colors.globalPrimary,
+    inverted: theme.colors.onGlobalPrimary,
   };
 
   const cellSize = theme.sizes.xxxlarge;

package/src/theme/components/card.ts

@@ -2,13 +2,13 @@ import type { GlobalTheme } from '../global';
 
 const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
-    dataCardIndicator: theme.colors.primary,
-    primary: theme.colors.__alpha__primary2,
-    info: theme.colors.infoLight,
+    dataCardIndicator: theme.colors.globalPrimary,
+    primary: theme.colors.primary,
+    info: theme.colors.info,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    danger: theme.colors.dangerMediumLight,
-    archived: theme.colors.archivedLight,
+    danger: theme.colors.error,
+    archived: theme.colors.archived,
   };
 
   const sizes = {

package/src/theme/components/checkbox.ts

@@ -3,7 +3,7 @@ import type { GlobalTheme } from '../global';
 const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
     default: theme.colors.globalPrimary,
-    disabledBorder: theme.colors.globalPrimaryLight,
+    disabledBorder: theme.colors.mutedGlobalPrimary,
   };
 
   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.outline,
+    default: theme.colors.globalSecondaryOutline,
   };
 
   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.backgroundDark,
-    background: theme.colors.platformBackground,
-    backdrop: theme.colors.backgroundDark,
-    handler: theme.colors.backgroundDark,
+    shadow: theme.colors.globalPrimary,
+    background: theme.colors.defaultGlobalSurface,
+    backdrop: theme.colors.defaultGlobalSurface,
+    handler: theme.colors.globalPrimary,
   };
 
   const radii = {

package/src/theme/components/empty.ts

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