@hero-design/rn 8.119.0 → 8.119.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hero-design/rn
 
+## 8.119.1
+
+### Patch Changes
+
+- [#4871](https://github.com/Thinkei/hero-design/pull/4871) [`bc9741dbf1dcb5a8176a14bfe85c19a70c50d283`](https://github.com/Thinkei/hero-design/commit/bc9741dbf1dcb5a8176a14bfe85c19a70c50d283) Thanks [@ngvuthanhnhan-eh-hi](https://github.com/ngvuthanhnhan-eh-hi)! - [Tag] Update border-radius from 4px (`radii.base`) to 12px (`radii.large`)
+
+- [#4872](https://github.com/Thinkei/hero-design/pull/4872) [`611662ff1d9a1ebe799a6c4a06935b51d6795da2`](https://github.com/Thinkei/hero-design/commit/611662ff1d9a1ebe799a6c4a06935b51d6795da2) Thanks [@ngvuthanhnhan-eh-hi](https://github.com/ngvuthanhnhan-eh-hi)! - [Badge] Align string-Badge intent colors with surface-based token
+
 ## 8.119.0
 
 ### Minor Changes

package/es/index.js

@@ -5604,7 +5604,23 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
-    countText: theme.colors.onDarkGlobalSurface
+    countText: theme.colors.onDarkGlobalSurface,
+    stringBackground: {
+      primary: theme.colors.highlightedSurface,
+      danger: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      archived: theme.colors.archivedSurface
+    },
+    stringText: {
+      primary: theme.colors.primary,
+      danger: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      archived: theme.colors.onArchivedSurface
+    }
   };
   var fonts = {
     medium: theme.fonts.neutral.regular,
@@ -7098,7 +7114,7 @@ var getTagTheme = function getTagTheme(theme) {
     verticalPadding: theme.space.xsmall
   };
   var radii = {
-    "default": theme.radii.base
+    "default": theme.radii.large
   };
   return {
     borderWidths: borderWidths,
@@ -10046,27 +10062,31 @@ var StyledView$2 = index$c(Animated.View)(function (_ref) {
     themePadding = _ref.themePadding,
     themeSize = _ref.themeSize,
     themeVariant = _ref.themeVariant,
+    themeIsStringBadge = _ref.themeIsStringBadge,
     theme = _ref.theme;
+  var backgroundColor = themeIsStringBadge ? theme.__hd__.badge.colors.stringBackground[themeIntent] : theme.__hd__.badge.colors[themeIntent];
   return {
     height: theme.__hd__.badge.sizes[themeSize].height,
     minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: theme.__hd__.badge.colors[themeIntent],
+    backgroundColor: backgroundColor,
     borderRadius: theme.radii.rounded,
     paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space[themeSize].horizontalPadding : undefined,
     borderWidth: theme.__hd__.badge.borderWidths["default"],
-    borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : theme.__hd__.badge.colors[themeIntent]
+    borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : backgroundColor
   };
 });
 var StyledText$2 = index$c(Typography.Caption)(function (_ref2) {
   var theme = _ref2.theme,
-    themeSize = _ref2.themeSize;
+    themeSize = _ref2.themeSize,
+    themeIntent = _ref2.themeIntent,
+    themeIsStringBadge = _ref2.themeIsStringBadge;
   return {
     fontSize: theme.__hd__.badge.fontSizes[themeSize],
     lineHeight: theme.__hd__.badge.lineHeights[themeSize],
     fontFamily: theme.__hd__.badge.fonts[themeSize],
-    color: theme.__hd__.badge.colors.text,
+    color: themeIsStringBadge ? theme.__hd__.badge.colors.stringText[themeIntent] : theme.__hd__.badge.colors.text,
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center'
@@ -10224,6 +10244,7 @@ var Badge$1 = function Badge(_ref) {
     }).start();
   }, [visible, opacity]);
   var isIconBadge = !!icon;
+  var isStringBadge = !isIconBadge && typeof originalContent === 'string';
   var content = useMemo(function () {
     if (isIconBadge) {
       return '';
@@ -10235,6 +10256,7 @@ var Badge$1 = function Badge(_ref) {
     themePadding: getPaddingState(content),
     themeSize: size,
     themeVariant: variant,
+    themeIsStringBadge: isStringBadge,
     style: [{
       opacity: opacity,
       transform: [{
@@ -10250,7 +10272,9 @@ var Badge$1 = function Badge(_ref) {
     themeSize: size,
     intent: "text-inverted"
   }) : /*#__PURE__*/React__default.createElement(StyledText$2, {
-    themeSize: size
+    themeSize: size,
+    themeIntent: intent,
+    themeIsStringBadge: isStringBadge
   }, content));
 };
 var Badge = Object.assign(Badge$1, {

package/lib/index.js

@@ -5633,7 +5633,23 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
-    countText: theme.colors.onDarkGlobalSurface
+    countText: theme.colors.onDarkGlobalSurface,
+    stringBackground: {
+      primary: theme.colors.highlightedSurface,
+      danger: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      archived: theme.colors.archivedSurface
+    },
+    stringText: {
+      primary: theme.colors.primary,
+      danger: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      archived: theme.colors.onArchivedSurface
+    }
   };
   var fonts = {
     medium: theme.fonts.neutral.regular,
@@ -7127,7 +7143,7 @@ var getTagTheme = function getTagTheme(theme) {
     verticalPadding: theme.space.xsmall
   };
   var radii = {
-    "default": theme.radii.base
+    "default": theme.radii.large
   };
   return {
     borderWidths: borderWidths,
@@ -10075,27 +10091,31 @@ var StyledView$2 = index$c(reactNative.Animated.View)(function (_ref) {
     themePadding = _ref.themePadding,
     themeSize = _ref.themeSize,
     themeVariant = _ref.themeVariant,
+    themeIsStringBadge = _ref.themeIsStringBadge,
     theme = _ref.theme;
+  var backgroundColor = themeIsStringBadge ? theme.__hd__.badge.colors.stringBackground[themeIntent] : theme.__hd__.badge.colors[themeIntent];
   return {
     height: theme.__hd__.badge.sizes[themeSize].height,
     minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: theme.__hd__.badge.colors[themeIntent],
+    backgroundColor: backgroundColor,
     borderRadius: theme.radii.rounded,
     paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space[themeSize].horizontalPadding : undefined,
     borderWidth: theme.__hd__.badge.borderWidths["default"],
-    borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : theme.__hd__.badge.colors[themeIntent]
+    borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : backgroundColor
   };
 });
 var StyledText$2 = index$c(Typography.Caption)(function (_ref2) {
   var theme = _ref2.theme,
-    themeSize = _ref2.themeSize;
+    themeSize = _ref2.themeSize,
+    themeIntent = _ref2.themeIntent,
+    themeIsStringBadge = _ref2.themeIsStringBadge;
   return {
     fontSize: theme.__hd__.badge.fontSizes[themeSize],
     lineHeight: theme.__hd__.badge.lineHeights[themeSize],
     fontFamily: theme.__hd__.badge.fonts[themeSize],
-    color: theme.__hd__.badge.colors.text,
+    color: themeIsStringBadge ? theme.__hd__.badge.colors.stringText[themeIntent] : theme.__hd__.badge.colors.text,
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center'
@@ -10253,6 +10273,7 @@ var Badge = function Badge(_ref) {
     }).start();
   }, [visible, opacity]);
   var isIconBadge = !!icon;
+  var isStringBadge = !isIconBadge && typeof originalContent === 'string';
   var content = React.useMemo(function () {
     if (isIconBadge) {
       return '';
@@ -10264,6 +10285,7 @@ var Badge = function Badge(_ref) {
     themePadding: getPaddingState(content),
     themeSize: size,
     themeVariant: variant,
+    themeIsStringBadge: isStringBadge,
     style: [{
       opacity: opacity,
       transform: [{
@@ -10279,7 +10301,9 @@ var Badge = function Badge(_ref) {
     themeSize: size,
     intent: "text-inverted"
   }) : /*#__PURE__*/React__namespace.default.createElement(StyledText$2, {
-    themeSize: size
+    themeSize: size,
+    themeIntent: intent,
+    themeIsStringBadge: isStringBadge
   }, content));
 };
 var Badge$1 = Object.assign(Badge, {

package/package.json

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

package/src/components/Badge/StyledBadge.tsx

@@ -22,31 +22,50 @@ const StyledView = styled(Animated.View)<{
   themePadding: ThemePadding;
   themeSize: ThemeSize;
   themeVariant: ThemeVariant;
-}>(({ themeIntent, themePadding, themeSize, themeVariant, theme }) => ({
-  height: theme.__hd__.badge.sizes[themeSize].height,
-  minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: theme.__hd__.badge.colors[themeIntent],
-  borderRadius: theme.radii.rounded,
-  paddingHorizontal:
-    themePadding === 'wideContent'
-      ? theme.__hd__.badge.space[themeSize].horizontalPadding
-      : undefined,
-  borderWidth: theme.__hd__.badge.borderWidths.default,
-  borderColor:
-    themeVariant === 'outlined'
-      ? theme.__hd__.badge.colors.border
-      : theme.__hd__.badge.colors[themeIntent],
-}));
+  themeIsStringBadge: boolean;
+}>(
+  ({
+    themeIntent,
+    themePadding,
+    themeSize,
+    themeVariant,
+    themeIsStringBadge,
+    theme,
+  }) => {
+    const backgroundColor = themeIsStringBadge
+      ? theme.__hd__.badge.colors.stringBackground[themeIntent]
+      : theme.__hd__.badge.colors[themeIntent];
+    return {
+      height: theme.__hd__.badge.sizes[themeSize].height,
+      minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor,
+      borderRadius: theme.radii.rounded,
+      paddingHorizontal:
+        themePadding === 'wideContent'
+          ? theme.__hd__.badge.space[themeSize].horizontalPadding
+          : undefined,
+      borderWidth: theme.__hd__.badge.borderWidths.default,
+      borderColor:
+        themeVariant === 'outlined'
+          ? theme.__hd__.badge.colors.border
+          : backgroundColor,
+    };
+  }
+);
 
 const StyledText = styled(Typography.Caption)<{
   themeSize: ThemeSize;
-}>(({ theme, themeSize }) => ({
+  themeIntent: ThemeIntent;
+  themeIsStringBadge: boolean;
+}>(({ theme, themeSize, themeIntent, themeIsStringBadge }) => ({
   fontSize: theme.__hd__.badge.fontSizes[themeSize],
   lineHeight: theme.__hd__.badge.lineHeights[themeSize],
   fontFamily: theme.__hd__.badge.fonts[themeSize],
-  color: theme.__hd__.badge.colors.text,
+  color: themeIsStringBadge
+    ? theme.__hd__.badge.colors.stringText[themeIntent]
+    : theme.__hd__.badge.colors.text,
   includeFontPadding: false,
   textAlignVertical: 'center',
   textAlign: 'center',

package/src/components/Badge/index.tsx

@@ -44,6 +44,7 @@ const Badge = ({
   }, [visible, opacity]);
 
   const isIconBadge = !!icon;
+  const isStringBadge = !isIconBadge && typeof originalContent === 'string';
 
   const content = useMemo(() => {
     if (isIconBadge) {
@@ -61,6 +62,7 @@ const Badge = ({
       themePadding={getPaddingState(content)}
       themeSize={size}
       themeVariant={variant}
+      themeIsStringBadge={isStringBadge}
       style={[
         {
           opacity,
@@ -80,7 +82,13 @@ const Badge = ({
       {isIconBadge ? (
         <StyledIcon icon={icon} themeSize={size} intent="text-inverted" />
       ) : (
-        <StyledText themeSize={size}>{content}</StyledText>
+        <StyledText
+          themeSize={size}
+          themeIntent={intent}
+          themeIsStringBadge={isStringBadge}
+        >
+          {content}
+        </StyledText>
       )}
     </StyledView>
   );

package/src/theme/components/badge.ts

@@ -12,6 +12,22 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
     countText: theme.colors.onDarkGlobalSurface,
+    stringBackground: {
+      primary: theme.colors.highlightedSurface,
+      danger: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      archived: theme.colors.archivedSurface,
+    },
+    stringText: {
+      primary: theme.colors.primary,
+      danger: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      archived: theme.colors.onArchivedSurface,
+    },
   };
 
   const fonts = {

package/src/theme/components/tag.ts

@@ -38,7 +38,7 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const radii = {
-    default: theme.radii.base,
+    default: theme.radii.large,
   };
 
   return { borderWidths, colors, fonts, fontSizes, space, radii, lineHeights };

package/types/components/Badge/StyledBadge.d.ts

@@ -11,12 +11,15 @@ declare const StyledView: import("@emotion/native").StyledComponent<Animated.Ani
     themePadding: ThemePadding;
     themeSize: ThemeSize;
     themeVariant: ThemeVariant;
+    themeIsStringBadge: boolean;
 }, {}, {}>;
 declare const StyledText: import("@emotion/native").StyledComponent<import("../..").CaptionProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+    themeIsStringBadge: boolean;
 }, {}, {}>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
     theme?: import("@emotion/react").Theme;

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

@@ -10,6 +10,22 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         text: string;
         border: string;
         countText: string;
+        stringBackground: {
+            primary: string;
+            danger: string;
+            info: string;
+            success: string;
+            warning: string;
+            archived: string;
+        };
+        stringText: {
+            primary: string;
+            danger: string;
+            info: string;
+            success: string;
+            warning: string;
+            archived: string;
+        };
     };
     fonts: {
         medium: string;