@hero-design/rn 8.81.2 → 8.81.3-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.81.3-alpha.0
+
+### Patch Changes
+
+- [#3532](https://github.com/Thinkei/hero-design/pull/3532) [`b2a99b76972adb906c364ef193e030e352981d92`](https://github.com/Thinkei/hero-design/commit/b2a99b76972adb906c364ef193e030e352981d92) Thanks [@ttkien](https://github.com/ttkien)! - [Toast] Update colors
+
 ## 8.81.2
 
 ### Patch Changes

package/es/index.js

@@ -3597,12 +3597,22 @@ var getTimePickerTheme = function getTimePickerTheme(theme) {
 
 var getToastTheme = function getToastTheme(theme) {
   var colors = {
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-    info: theme.colors.info,
-    notification: theme.colors.defaultGlobalSurface,
-    snackbar: theme.colors.darkGlobalSurface,
+    backgrounds: {
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      error: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      notification: theme.colors.defaultGlobalSurface,
+      snackbar: theme.colors.darkGlobalSurface
+    },
+    texts: {
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      error: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      notification: theme.colors.onDefaultGlobalSurface,
+      snackbar: theme.colors.onDarkGlobalSurface
+    },
     divider: theme.colors.secondaryOutline
   };
   var sizes = {
@@ -7272,7 +7282,7 @@ var FONTSIZE_MAP = {
   'regular-bold': 'regular',
   'small-bold': 'small'
 };
-var StyledBody$1 = index$a(Text$1)(function (_ref) {
+var StyledBody$2 = index$a(Text$1)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme,
     themeTypeface = _ref.themeTypeface,
@@ -7298,7 +7308,7 @@ var Body = function Body(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     nativeProps = _objectWithoutProperties(_ref, _excluded$H);
-  return /*#__PURE__*/React__default.createElement(StyledBody$1, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
     themeVariant: variant,
@@ -8040,7 +8050,7 @@ var IconContainer$1 = index$a(View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var StyledIcon$3 = index$a(Icon)(function (_ref3) {
+var StyledIcon$4 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme,
     themeIntent = _ref3.themeIntent;
   return {
@@ -8054,7 +8064,7 @@ var TextContainer$1 = index$a(View)(function (_ref4) {
     flex: 1
   };
 });
-var StyledBody = index$a(Typography.Body)(function (_ref5) {
+var StyledBody$1 = index$a(Typography.Body)(function (_ref5) {
   var theme = _ref5.theme,
     themeIntent = _ref5.themeIntent;
   return {
@@ -8099,7 +8109,7 @@ var AlertIcon = function AlertIcon(_ref) {
     intent = _ref.intent;
   return icon ? /*#__PURE__*/React__default.createElement(IconContainer$1, {
     testID: "alert-left-icon"
-  }, /*#__PURE__*/React__default.createElement(StyledIcon$3, {
+  }, /*#__PURE__*/React__default.createElement(StyledIcon$4, {
     icon: icon,
     size: "small",
     themeIntent: intent
@@ -8128,19 +8138,19 @@ var Alert = function Alert(_ref2) {
   }, icon !== null ? /*#__PURE__*/React__default.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent),
     intent: intent
-  }) : null, /*#__PURE__*/React__default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
+  }) : null, /*#__PURE__*/React__default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody$1, {
     variant: "small-bold",
     themeIntent: intent
-  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
+  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody$1, {
     variant: "small",
     themeIntent: intent
   }, content) : content)), onClose ? /*#__PURE__*/React__default.createElement(CTAWrapper$1, {
     onPress: onClose,
     testID: "alert-close-icon"
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody$1, {
     variant: "small-bold",
     themeIntent: intent
-  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$3, {
+  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$4, {
     icon: "cancel",
     size: "small",
     themeIntent: intent
@@ -8758,7 +8768,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
     borderRadius: theme.radii.rounded
   };
 });
-var StyledIcon$2 = index$a(Icon)(function (_ref4) {
+var StyledIcon$3 = index$a(Icon)(function (_ref4) {
   var themeSize = _ref4.themeSize,
     theme = _ref4.theme;
   return {
@@ -8866,7 +8876,7 @@ var Badge = function Badge(_ref) {
       }]
     }, style],
     testID: testID
-  }), isIconBadge ? /*#__PURE__*/React__default.createElement(StyledIcon$2, {
+  }), isIconBadge ? /*#__PURE__*/React__default.createElement(StyledIcon$3, {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
@@ -15024,7 +15034,7 @@ var StyledActionItemText = index$a(Typography.Body)(function (_ref2) {
     color: theme.__hd__.fab.colors.actionItemText
   };
 });
-var StyledIcon$1 = index$a(Icon)(function (_ref3) {
+var StyledIcon$2 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     color: theme.__hd__.fab.colors.actionItemText
@@ -15113,7 +15123,7 @@ var ActionItem = function ActionItem(_ref) {
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledIcon$2, {
     size: "xsmall",
     icon: icon
   })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
@@ -15524,7 +15534,7 @@ var Container = index$a(Animated.View)(function (_ref2) {
     themeIntent = _ref2.themeIntent;
   return {
     borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii["default"] : 0,
-    backgroundColor: theme.__hd__.toast.colors[themeIntent],
+    backgroundColor: theme.__hd__.toast.colors.backgrounds[themeIntent],
     minHeight: theme.__hd__.toast.sizes.height,
     flexDirection: 'row',
     shadowColor: theme.__hd__.toast.shadows.color,
@@ -15566,6 +15576,20 @@ var CTAWrapper = index$a(TouchableOpacity)(function (_ref6) {
     justifyContent: 'center'
   };
 });
+var StyledBody = index$a(Typography.Body)(function (_ref7) {
+  var theme = _ref7.theme,
+    themeIntent = _ref7.themeIntent;
+  return {
+    color: theme.__hd__.toast.colors.texts[themeIntent]
+  };
+});
+var StyledIcon$1 = index$a(Icon)(function (_ref8) {
+  var theme = _ref8.theme,
+    themeIntent = _ref8.themeIntent;
+  return {
+    color: theme.__hd__.toast.colors.texts[themeIntent]
+  };
+});
 
 var fallbackToastControlContext = {
   show: function show(_) {
@@ -15612,10 +15636,10 @@ var ToastIcon = function ToastIcon(_ref) {
     icon = _ref.icon;
   return icon ? /*#__PURE__*/React__default.createElement(IconContainer, {
     testID: "toast-left-icon"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
     icon: icon,
     size: "small",
-    intent: themeIntent === 'snackbar' ? 'text-inverted' : 'text'
+    themeIntent: themeIntent
   })) : null;
 };
 var Toast$1 = function Toast(_ref2) {
@@ -15679,18 +15703,18 @@ var Toast$1 = function Toast(_ref2) {
   }, icon !== null ? /*#__PURE__*/React__default.createElement(ToastIcon, {
     themeIntent: intent,
     icon: icon || getIntentIcon(intent)
-  }) : null, /*#__PURE__*/React__default.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(Typography.Body, {
+  }) : null, /*#__PURE__*/React__default.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
     variant: "small",
-    intent: intent === 'snackbar' ? 'inverted' : 'body'
+    themeIntent: intent
   }, content) : content)), actionLabel ? /*#__PURE__*/React__default.createElement(CTAWrapper, {
     testID: "toast-action-button",
     onPress: function onPress() {
       onAction === null || onAction === void 0 || onAction();
       onDismiss === null || onDismiss === void 0 || onDismiss();
     }
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(Typography.Body, {
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
     variant: "small-bold",
-    intent: intent === 'snackbar' ? 'inverted' : 'body'
+    themeIntent: intent
   }, actionLabel) : actionLabel) : null);
 };
 

package/lib/index.js

@@ -3624,12 +3624,22 @@ var getTimePickerTheme = function getTimePickerTheme(theme) {
 
 var getToastTheme = function getToastTheme(theme) {
   var colors = {
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-    info: theme.colors.info,
-    notification: theme.colors.defaultGlobalSurface,
-    snackbar: theme.colors.darkGlobalSurface,
+    backgrounds: {
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      error: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      notification: theme.colors.defaultGlobalSurface,
+      snackbar: theme.colors.darkGlobalSurface
+    },
+    texts: {
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      error: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      notification: theme.colors.onDefaultGlobalSurface,
+      snackbar: theme.colors.onDarkGlobalSurface
+    },
     divider: theme.colors.secondaryOutline
   };
   var sizes = {
@@ -7299,7 +7309,7 @@ var FONTSIZE_MAP = {
   'regular-bold': 'regular',
   'small-bold': 'small'
 };
-var StyledBody$1 = index$a(reactNative.Text)(function (_ref) {
+var StyledBody$2 = index$a(reactNative.Text)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme,
     themeTypeface = _ref.themeTypeface,
@@ -7325,7 +7335,7 @@ var Body = function Body(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     nativeProps = _objectWithoutProperties(_ref, _excluded$H);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledBody$1, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
     themeVariant: variant,
@@ -8067,7 +8077,7 @@ var IconContainer$1 = index$a(reactNative.View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var StyledIcon$3 = index$a(Icon)(function (_ref3) {
+var StyledIcon$4 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme,
     themeIntent = _ref3.themeIntent;
   return {
@@ -8081,7 +8091,7 @@ var TextContainer$1 = index$a(reactNative.View)(function (_ref4) {
     flex: 1
   };
 });
-var StyledBody = index$a(Typography.Body)(function (_ref5) {
+var StyledBody$1 = index$a(Typography.Body)(function (_ref5) {
   var theme = _ref5.theme,
     themeIntent = _ref5.themeIntent;
   return {
@@ -8126,7 +8136,7 @@ var AlertIcon = function AlertIcon(_ref) {
     intent = _ref.intent;
   return icon ? /*#__PURE__*/React__namespace.default.createElement(IconContainer$1, {
     testID: "alert-left-icon"
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$3, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$4, {
     icon: icon,
     size: "small",
     themeIntent: intent
@@ -8155,19 +8165,19 @@ var Alert = function Alert(_ref2) {
   }, icon !== null ? /*#__PURE__*/React__namespace.default.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent),
     intent: intent
-  }) : null, /*#__PURE__*/React__namespace.default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
+  }) : null, /*#__PURE__*/React__namespace.default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody$1, {
     variant: "small-bold",
     themeIntent: intent
-  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
+  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody$1, {
     variant: "small",
     themeIntent: intent
   }, content) : content)), onClose ? /*#__PURE__*/React__namespace.default.createElement(CTAWrapper$1, {
     onPress: onClose,
     testID: "alert-close-icon"
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody$1, {
     variant: "small-bold",
     themeIntent: intent
-  }, actionLabel) : /*#__PURE__*/React__namespace.default.createElement(StyledIcon$3, {
+  }, actionLabel) : /*#__PURE__*/React__namespace.default.createElement(StyledIcon$4, {
     icon: "cancel",
     size: "small",
     themeIntent: intent
@@ -8785,7 +8795,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
     borderRadius: theme.radii.rounded
   };
 });
-var StyledIcon$2 = index$a(Icon)(function (_ref4) {
+var StyledIcon$3 = index$a(Icon)(function (_ref4) {
   var themeSize = _ref4.themeSize,
     theme = _ref4.theme;
   return {
@@ -8893,7 +8903,7 @@ var Badge = function Badge(_ref) {
       }]
     }, style],
     testID: testID
-  }), isIconBadge ? /*#__PURE__*/React__namespace.default.createElement(StyledIcon$2, {
+  }), isIconBadge ? /*#__PURE__*/React__namespace.default.createElement(StyledIcon$3, {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
@@ -15051,7 +15061,7 @@ var StyledActionItemText = index$a(Typography.Body)(function (_ref2) {
     color: theme.__hd__.fab.colors.actionItemText
   };
 });
-var StyledIcon$1 = index$a(Icon)(function (_ref3) {
+var StyledIcon$2 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     color: theme.__hd__.fab.colors.actionItemText
@@ -15140,7 +15150,7 @@ var ActionItem = function ActionItem(_ref) {
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$1, {
+  }, /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$2, {
     size: "xsmall",
     icon: icon
   })), /*#__PURE__*/React__namespace.default.createElement(StyledActionItemText, null, title))));
@@ -15551,7 +15561,7 @@ var Container = index$a(reactNative.Animated.View)(function (_ref2) {
     themeIntent = _ref2.themeIntent;
   return {
     borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii["default"] : 0,
-    backgroundColor: theme.__hd__.toast.colors[themeIntent],
+    backgroundColor: theme.__hd__.toast.colors.backgrounds[themeIntent],
     minHeight: theme.__hd__.toast.sizes.height,
     flexDirection: 'row',
     shadowColor: theme.__hd__.toast.shadows.color,
@@ -15593,6 +15603,20 @@ var CTAWrapper = index$a(reactNative.TouchableOpacity)(function (_ref6) {
     justifyContent: 'center'
   };
 });
+var StyledBody = index$a(Typography.Body)(function (_ref7) {
+  var theme = _ref7.theme,
+    themeIntent = _ref7.themeIntent;
+  return {
+    color: theme.__hd__.toast.colors.texts[themeIntent]
+  };
+});
+var StyledIcon$1 = index$a(Icon)(function (_ref8) {
+  var theme = _ref8.theme,
+    themeIntent = _ref8.themeIntent;
+  return {
+    color: theme.__hd__.toast.colors.texts[themeIntent]
+  };
+});
 
 var fallbackToastControlContext = {
   show: function show(_) {
@@ -15639,10 +15663,10 @@ var ToastIcon = function ToastIcon(_ref) {
     icon = _ref.icon;
   return icon ? /*#__PURE__*/React__namespace.default.createElement(IconContainer, {
     testID: "toast-left-icon"
-  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$1, {
     icon: icon,
     size: "small",
-    intent: themeIntent === 'snackbar' ? 'text-inverted' : 'text'
+    themeIntent: themeIntent
   })) : null;
 };
 var Toast$1 = function Toast(_ref2) {
@@ -15706,18 +15730,18 @@ var Toast$1 = function Toast(_ref2) {
   }, icon !== null ? /*#__PURE__*/React__namespace.default.createElement(ToastIcon, {
     themeIntent: intent,
     icon: icon || getIntentIcon(intent)
-  }) : null, /*#__PURE__*/React__namespace.default.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+  }) : null, /*#__PURE__*/React__namespace.default.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
     variant: "small",
-    intent: intent === 'snackbar' ? 'inverted' : 'body'
+    themeIntent: intent
   }, content) : content)), actionLabel ? /*#__PURE__*/React__namespace.default.createElement(CTAWrapper, {
     testID: "toast-action-button",
     onPress: function onPress() {
       onAction === null || onAction === void 0 || onAction();
       onDismiss === null || onDismiss === void 0 || onDismiss();
     }
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
     variant: "small-bold",
-    intent: intent === 'snackbar' ? 'inverted' : 'body'
+    themeIntent: intent
   }, actionLabel) : actionLabel) : null);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.81.2",
+  "version": "8.81.3-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Toast/StyledToast.tsx

@@ -3,6 +3,9 @@ import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import { IntentType } from './types';
+import { TextProps } from '../Typography/Text';
+import Typography from '../Typography';
+import Icon, { IconProps } from '../Icon';
 
 const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
   ({ theme, position }) => ({
@@ -19,7 +22,7 @@ const Container = styled(Animated.View)<{
   themeIntent: IntentType;
 }>(({ theme, themeVariant, themeIntent }) => ({
   borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii.default : 0,
-  backgroundColor: theme.__hd__.toast.colors[themeIntent],
+  backgroundColor: theme.__hd__.toast.colors.backgrounds[themeIntent],
   minHeight: theme.__hd__.toast.sizes.height,
   flexDirection: 'row',
   shadowColor: theme.__hd__.toast.shadows.color,
@@ -56,6 +59,22 @@ const CTAWrapper = styled(TouchableOpacity)<
   justifyContent: 'center',
 }));
 
+const StyledBody = styled(Typography.Body)<
+  TextProps & {
+    themeIntent: IntentType;
+  }
+>(({ theme, themeIntent }) => ({
+  color: theme.__hd__.toast.colors.texts[themeIntent],
+}));
+
+const StyledIcon = styled(Icon)<
+  IconProps & {
+    themeIntent: IntentType;
+  }
+>(({ theme, themeIntent }) => ({
+  color: theme.__hd__.toast.colors.texts[themeIntent],
+}));
+
 export {
   ToastContainerWrapper,
   Container,
@@ -63,4 +82,6 @@ export {
   TextContainer,
   IconContainer,
   CTAWrapper,
+  StyledBody,
+  StyledIcon,
 };

package/src/components/Toast/Toast.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { Animated, LayoutAnimation } from 'react-native';
-import Icon from '../Icon';
-import Typography from '../Typography';
 import {
   Container,
   ContentContainer,
   IconContainer,
   CTAWrapper,
   TextContainer,
+  StyledBody,
+  StyledIcon,
 } from './StyledToast';
 import { useToastConfig } from './ToastContext';
 import type { IconName } from '../Icon';
@@ -37,11 +37,7 @@ const ToastIcon = ({
 }) =>
   icon ? (
     <IconContainer testID="toast-left-icon">
-      <Icon
-        icon={icon}
-        size="small"
-        intent={themeIntent === 'snackbar' ? 'text-inverted' : 'text'}
-      />
+      <StyledIcon icon={icon} size="small" themeIntent={themeIntent} />
     </IconContainer>
   ) : null;
 
@@ -112,12 +108,9 @@ const Toast = ({
         ) : null}
         <TextContainer>
           {typeof content === 'string' ? (
-            <Typography.Body
-              variant="small"
-              intent={intent === 'snackbar' ? 'inverted' : 'body'}
-            >
+            <StyledBody variant="small" themeIntent={intent}>
               {content}
-            </Typography.Body>
+            </StyledBody>
           ) : (
             content
           )}
@@ -132,12 +125,9 @@ const Toast = ({
           }}
         >
           {typeof actionLabel === 'string' ? (
-            <Typography.Body
-              variant="small-bold"
-              intent={intent === 'snackbar' ? 'inverted' : 'body'}
-            >
+            <StyledBody variant="small-bold" themeIntent={intent}>
               {actionLabel}
-            </Typography.Body>
+            </StyledBody>
           ) : (
             actionLabel
           )}

package/src/components/Toast/__tests__/__snapshots__/Toast.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#b5c3fd",
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -71,7 +71,12 @@ exports[`Toast Icon render custom icon correctly 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -100,7 +105,12 @@ exports[`Toast Icon render custom icon correctly 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -147,7 +157,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#f46363",
+        "backgroundColor": "#fcebe7",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -206,7 +216,12 @@ exports[`Toast renders correctly when intent is error 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#cb300a",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -235,7 +250,12 @@ exports[`Toast renders correctly when intent is error 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#cb300a",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -294,7 +314,12 @@ exports[`Toast renders correctly when intent is error 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#cb300a",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"
@@ -340,7 +365,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#b5c3fd",
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -399,7 +424,12 @@ exports[`Toast renders correctly when intent is info 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -428,7 +458,12 @@ exports[`Toast renders correctly when intent is info 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#355bfb",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -487,7 +522,12 @@ exports[`Toast renders correctly when intent is info 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#355bfb",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"
@@ -594,7 +634,12 @@ exports[`Toast renders correctly when intent is notification 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#001f23",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -653,7 +698,12 @@ exports[`Toast renders correctly when intent is notification 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#001f23",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"
@@ -754,16 +804,21 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
           style={
             [
               {
-                "color": "#ffffff",
+                "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 14,
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
-          themeIntent="inverted"
+          themeIntent="body"
           themeTypeface="neutral"
           themeVariant="small"
         >
@@ -813,16 +868,21 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
         style={
           [
             {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#ffffff",
+              },
+              undefined,
+            ],
           ]
         }
-        themeIntent="inverted"
+        themeIntent="body"
         themeTypeface="neutral"
         themeVariant="small-bold"
       >
@@ -865,7 +925,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#5ace7d",
+        "backgroundColor": "#f0fef4",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -924,7 +984,12 @@ exports[`Toast renders correctly when intent is success 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#017d6d",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -953,7 +1018,12 @@ exports[`Toast renders correctly when intent is success 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#017d6d",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -1012,7 +1082,12 @@ exports[`Toast renders correctly when intent is success 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#017d6d",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"
@@ -1058,7 +1133,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "#ffbe71",
+        "backgroundColor": "#fff6eb",
         "borderRadius": 0,
         "elevation": 3,
         "flexDirection": "row",
@@ -1117,7 +1192,12 @@ exports[`Toast renders correctly when intent is warning 1`] = `
                 "color": "#001f23",
                 "fontSize": 20,
               },
-              undefined,
+              [
+                {
+                  "color": "#ac5d00",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="text"
@@ -1146,7 +1226,12 @@ exports[`Toast renders correctly when intent is warning 1`] = `
                 "letterSpacing": 0.48,
                 "lineHeight": 22,
               },
-              undefined,
+              [
+                {
+                  "color": "#ac5d00",
+                },
+                undefined,
+              ],
             ]
           }
           themeIntent="body"
@@ -1205,7 +1290,12 @@ exports[`Toast renders correctly when intent is warning 1`] = `
               "letterSpacing": 0.24,
               "lineHeight": 22,
             },
-            undefined,
+            [
+              {
+                "color": "#ac5d00",
+              },
+              undefined,
+            ],
           ]
         }
         themeIntent="body"

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

@@ -1277,13 +1277,23 @@ exports[`theme returns correct theme object 1`] = `
         "base": 1,
       },
       "colors": {
+        "backgrounds": {
+          "error": "#fcebe7",
+          "info": "#ecf0ff",
+          "notification": "#ffffff",
+          "snackbar": "#001f23",
+          "success": "#f0fef4",
+          "warning": "#fff6eb",
+        },
         "divider": "#e8e9ea",
-        "error": "#f46363",
-        "info": "#b5c3fd",
-        "notification": "#ffffff",
-        "snackbar": "#001f23",
-        "success": "#5ace7d",
-        "warning": "#ffbe71",
+        "texts": {
+          "error": "#cb300a",
+          "info": "#355bfb",
+          "notification": "#001f23",
+          "snackbar": "#ffffff",
+          "success": "#017d6d",
+          "warning": "#ac5d00",
+        },
       },
       "radii": {
         "default": 16,

package/src/theme/components/toast.ts

@@ -2,12 +2,22 @@ import type { GlobalTheme } from '../global';
 
 const getToastTheme = (theme: GlobalTheme) => {
   const colors = {
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-    info: theme.colors.info,
-    notification: theme.colors.defaultGlobalSurface,
-    snackbar: theme.colors.darkGlobalSurface,
+    backgrounds: {
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      error: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      notification: theme.colors.defaultGlobalSurface,
+      snackbar: theme.colors.darkGlobalSurface,
+    },
+    texts: {
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      error: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      notification: theme.colors.onDefaultGlobalSurface,
+      snackbar: theme.colors.onDarkGlobalSurface,
+    },
     divider: theme.colors.secondaryOutline,
   };
 

package/stats/8.81.2/rn-stats.html

@@ -4840,3 +4840,5 @@ var drawChart = (function (exports) {
 </body>
 </html>
 
+
+

package/types/components/Toast/StyledToast.d.ts

@@ -1,6 +1,8 @@
 import { Animated, TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import { IntentType } from './types';
+import { TextProps } from '../Typography/Text';
+import { IconProps } from '../Icon';
 declare const ToastContainerWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -42,4 +44,16 @@ declare const CTAWrapper: import("@emotion/native").StyledComponent<import("reac
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-export { ToastContainerWrapper, Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };
+declare const StyledBody: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & TextProps & {
+    themeIntent: IntentType;
+}, {}, {}>;
+declare const StyledIcon: import("@emotion/native").StyledComponent<IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: IntentType;
+}, {}, {}>;
+export { ToastContainerWrapper, Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, StyledBody, StyledIcon, };

package/types/theme/components/toast.d.ts

@@ -1,12 +1,22 @@
 import type { GlobalTheme } from '../global';
 declare const getToastTheme: (theme: GlobalTheme) => {
     colors: {
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-        notification: string;
-        snackbar: string;
+        backgrounds: {
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            notification: string;
+            snackbar: string;
+        };
+        texts: {
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            notification: string;
+            snackbar: string;
+        };
         divider: string;
     };
     radii: {

package/.turbo/turbo-build.log

@@ -1,7 +0,0 @@
-(node:2808) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
-(Use `node --trace-warnings ...` to show where the warning was created)
-
-src/index.ts → lib/index.js, es/index.js...
-(!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 52.7s