@hero-design/rn 8.125.0 → 8.127.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @hero-design/rn
 
+## 8.127.0
+
+### Minor Changes
+
+- [#5062](https://github.com/Thinkei/hero-design/pull/5062) [`94e95b9b964949e2ad8da6f071ac0aae7b8879ae`](https://github.com/Thinkei/hero-design/commit/94e95b9b964949e2ad8da6f071ac0aae7b8879ae) Thanks [@phucdph](https://github.com/phucdph)! - [Tag] Change label font weight to medium and add neutral intent
+
+  - Tag string label font weight changed from semi-bold (600) to medium (500) across all intents.
+  - New `intent="neutral"`
+
+## 8.126.0
+
+### Minor Changes
+
+- [#5059](https://github.com/Thinkei/hero-design/pull/5059) [`9f52a1a805000630192556c35dede41fbd91cc0a`](https://github.com/Thinkei/hero-design/commit/9f52a1a805000630192556c35dede41fbd91cc0a) Thanks [@phucdph](https://github.com/phucdph)! - **Badge:** standardise font weight to Medium (500) across all sizes; add `neutral` intent
+
+  - Both `medium` and `small` badge sizes now use `BeVietnamPro-Medium` (weight 500). Previously `medium` used Regular (400) and `small` used SemiBold (600).
+  - New `intent="neutral"` renders a light grey background (`neutralGlobalSurface`) with near-black text (`onDefaultGlobalSurface`), suitable for inactive or default-state labels.
+  - `Badge.Status` with `intent="neutral"` renders with `mutedOnDefaultGlobalSurface` as the dot color.
+
 ## 8.125.0
 
 ### Minor Changes

package/es/index.js

@@ -5682,6 +5682,7 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     success: theme.colors.onSuccessSurface,
     warning: theme.colors.onWarningSurface,
     archived: theme.colors.onArchivedSurface,
+    neutral: theme.colors.mutedOnDefaultGlobalSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
     countText: theme.colors.onDarkGlobalSurface,
@@ -5691,7 +5692,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       info: theme.colors.infoSurface,
       success: theme.colors.successSurface,
       warning: theme.colors.warningSurface,
-      archived: theme.colors.archivedSurface
+      archived: theme.colors.archivedSurface,
+      neutral: theme.colors.neutralGlobalSurface
     },
     stringText: {
       primary: theme.colors.primary,
@@ -5699,12 +5701,13 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       info: theme.colors.onInfoSurface,
       success: theme.colors.onSuccessSurface,
       warning: theme.colors.onWarningSurface,
-      archived: theme.colors.onArchivedSurface
+      archived: theme.colors.onArchivedSurface,
+      neutral: theme.colors.onDefaultGlobalSurface
     }
   };
   var fonts = {
-    medium: theme.fonts.neutral.regular,
-    small: theme.fonts.neutral.semiBold
+    medium: theme.fonts.neutral.medium,
+    small: theme.fonts.neutral.medium
   };
   var fontSizes = {
     medium: theme.fontSizes.small,
@@ -7178,10 +7181,12 @@ var getTagTheme = function getTagTheme(theme) {
     dangerBackground: theme.colors.errorSurface,
     archived: theme.colors.onArchivedSurface,
     archivedBackground: theme.colors.archivedSurface,
-    text: theme.colors.onDefaultGlobalSurface
+    text: theme.colors.onDefaultGlobalSurface,
+    neutral: theme.colors.onDefaultGlobalSurface,
+    neutralBackground: theme.colors.neutralGlobalSurface
   };
   var fonts = {
-    "default": theme.fonts.neutral.semiBold
+    "default": theme.fonts.neutral.medium
   };
   var fontSizes = {
     "default": theme.fontSizes.small
@@ -28686,7 +28691,7 @@ var Tag = function Tag(_ref) {
     testID: testID !== undefined ? "".concat(testID, "-left-icon") : undefined
   }), typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledText$1, {
     themeIntent: intent,
-    fontWeight: "semi-bold"
+    fontWeight: "medium"
   }, content) : content, rightIcon !== undefined && /*#__PURE__*/React__default.createElement(StyledTagIcon, {
     icon: rightIcon,
     size: "xsmall",

package/lib/index.js

@@ -5712,6 +5712,7 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     success: theme.colors.onSuccessSurface,
     warning: theme.colors.onWarningSurface,
     archived: theme.colors.onArchivedSurface,
+    neutral: theme.colors.mutedOnDefaultGlobalSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
     countText: theme.colors.onDarkGlobalSurface,
@@ -5721,7 +5722,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       info: theme.colors.infoSurface,
       success: theme.colors.successSurface,
       warning: theme.colors.warningSurface,
-      archived: theme.colors.archivedSurface
+      archived: theme.colors.archivedSurface,
+      neutral: theme.colors.neutralGlobalSurface
     },
     stringText: {
       primary: theme.colors.primary,
@@ -5729,12 +5731,13 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       info: theme.colors.onInfoSurface,
       success: theme.colors.onSuccessSurface,
       warning: theme.colors.onWarningSurface,
-      archived: theme.colors.onArchivedSurface
+      archived: theme.colors.onArchivedSurface,
+      neutral: theme.colors.onDefaultGlobalSurface
     }
   };
   var fonts = {
-    medium: theme.fonts.neutral.regular,
-    small: theme.fonts.neutral.semiBold
+    medium: theme.fonts.neutral.medium,
+    small: theme.fonts.neutral.medium
   };
   var fontSizes = {
     medium: theme.fontSizes.small,
@@ -7208,10 +7211,12 @@ var getTagTheme = function getTagTheme(theme) {
     dangerBackground: theme.colors.errorSurface,
     archived: theme.colors.onArchivedSurface,
     archivedBackground: theme.colors.archivedSurface,
-    text: theme.colors.onDefaultGlobalSurface
+    text: theme.colors.onDefaultGlobalSurface,
+    neutral: theme.colors.onDefaultGlobalSurface,
+    neutralBackground: theme.colors.neutralGlobalSurface
   };
   var fonts = {
-    "default": theme.fonts.neutral.semiBold
+    "default": theme.fonts.neutral.medium
   };
   var fontSizes = {
     "default": theme.fontSizes.small
@@ -28716,7 +28721,7 @@ var Tag = function Tag(_ref) {
     testID: testID !== undefined ? "".concat(testID, "-left-icon") : undefined
   }), typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
     themeIntent: intent,
-    fontWeight: "semi-bold"
+    fontWeight: "medium"
   }, content) : content, rightIcon !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledTagIcon, {
     icon: rightIcon,
     size: "xsmall",

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.125.0",
+  "version": "8.127.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "react-native": "src/index.ts",
   "types": "types/index.d.ts",
+  "react-native": "src/index.ts",
   "scripts": {
     "lint": "eslint src --quiet",
     "type-check": "tsc --noEmit",

package/src/components/Badge/Status.tsx

@@ -16,7 +16,14 @@ export interface StatusProps extends ViewProps {
   /**
    * Visual intent color to apply to Status Badge.
    */
-  intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'primary';
+  intent?:
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'info'
+    | 'archived'
+    | 'primary'
+    | 'neutral';
   /**
    * Additional style.
    */

package/src/components/Badge/StyledBadge.tsx

@@ -9,7 +9,8 @@ type ThemeIntent =
   | 'warning'
   | 'danger'
   | 'info'
-  | 'archived';
+  | 'archived'
+  | 'neutral';
 
 type ThemePadding = 'narrowContent' | 'wideContent';
 

package/src/components/Badge/types.ts

@@ -13,7 +13,14 @@ interface BaseBadgeProps extends React.ComponentProps<typeof Animated.View> {
   /**
    * Visual intent color to apply to Badge.
    */
-  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+  intent?:
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'info'
+    | 'archived'
+    | 'neutral';
   /**
    * Additional style.
    */

package/src/components/Tag/StyledTag.tsx

@@ -9,7 +9,8 @@ type ThemeIntent =
   | 'success'
   | 'warning'
   | 'danger'
-  | 'archived';
+  | 'archived'
+  | 'neutral';
 
 const StyledView = styled(View)<{
   themeIntent: ThemeIntent;

package/src/components/Tag/index.tsx

@@ -17,7 +17,14 @@ interface TagProps extends ViewProps {
   /**
    * Visual intent color to apply to Tag.
    */
-  intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+  intent?:
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'archived'
+    | 'neutral';
   /**
    * Places an icon within the tag, after the content.
    */
@@ -70,7 +77,7 @@ const Tag = ({
         />
       )}
       {typeof content === 'string' ? (
-        <StyledText themeIntent={intent} fontWeight="semi-bold">
+        <StyledText themeIntent={intent} fontWeight="medium">
           {content}
         </StyledText>
       ) : (

package/src/theme/components/badge.ts

@@ -9,6 +9,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     success: theme.colors.onSuccessSurface,
     warning: theme.colors.onWarningSurface,
     archived: theme.colors.onArchivedSurface,
+    neutral: theme.colors.mutedOnDefaultGlobalSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
     countText: theme.colors.onDarkGlobalSurface,
@@ -19,6 +20,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
       success: theme.colors.successSurface,
       warning: theme.colors.warningSurface,
       archived: theme.colors.archivedSurface,
+      neutral: theme.colors.neutralGlobalSurface,
     },
     stringText: {
       primary: theme.colors.primary,
@@ -27,12 +29,13 @@ const getBadgeTheme = (theme: GlobalTheme) => {
       success: theme.colors.onSuccessSurface,
       warning: theme.colors.onWarningSurface,
       archived: theme.colors.onArchivedSurface,
+      neutral: theme.colors.onDefaultGlobalSurface,
     },
   };
 
   const fonts = {
-    medium: theme.fonts.neutral.regular,
-    small: theme.fonts.neutral.semiBold,
+    medium: theme.fonts.neutral.medium,
+    small: theme.fonts.neutral.medium,
   };
 
   const fontSizes = {

package/src/theme/components/tag.ts

@@ -19,10 +19,12 @@ const getTagTheme = (theme: GlobalTheme) => {
     archived: theme.colors.onArchivedSurface,
     archivedBackground: theme.colors.archivedSurface,
     text: theme.colors.onDefaultGlobalSurface,
+    neutral: theme.colors.onDefaultGlobalSurface,
+    neutralBackground: theme.colors.neutralGlobalSurface,
   };
 
   const fonts = {
-    default: theme.fonts.neutral.semiBold,
+    default: theme.fonts.neutral.medium,
   };
 
   const fontSizes = {

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

@@ -9,7 +9,7 @@ export interface StatusProps extends ViewProps {
     /**
      * Visual intent color to apply to Status Badge.
      */
-    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'primary';
+    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'primary' | 'neutral';
     /**
      * Additional style.
      */

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

@@ -1,5 +1,5 @@
 import { Animated, View } from 'react-native';
-type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'neutral';
 type ThemePadding = 'narrowContent' | 'wideContent';
 type ThemeSize = 'medium' | 'small';
 type ThemeVariant = 'filled' | 'outlined';

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

@@ -12,7 +12,7 @@ interface BaseBadgeProps extends React.ComponentProps<typeof Animated.View> {
     /**
      * Visual intent color to apply to Badge.
      */
-    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'neutral';
     /**
      * Additional style.
      */

package/types/components/Tag/StyledTag.d.ts

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-type ThemeIntent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+type ThemeIntent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived' | 'neutral';
 declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

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

@@ -13,7 +13,7 @@ interface TagProps extends ViewProps {
     /**
      * Visual intent color to apply to Tag.
      */
-    intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+    intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived' | 'neutral';
     /**
      * Places an icon within the tag, after the content.
      */

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

@@ -7,6 +7,7 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         success: string;
         warning: string;
         archived: string;
+        neutral: string;
         text: string;
         border: string;
         countText: string;
@@ -17,6 +18,7 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
             success: string;
             warning: string;
             archived: string;
+            neutral: string;
         };
         stringText: {
             primary: string;
@@ -25,6 +27,7 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
             success: string;
             warning: string;
             archived: string;
+            neutral: string;
         };
     };
     fonts: {

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

@@ -17,6 +17,8 @@ declare const getTagTheme: (theme: GlobalTheme) => {
         archived: string;
         archivedBackground: string;
         text: string;
+        neutral: string;
+        neutralBackground: string;
     };
     fonts: {
         default: string;