@hero-design/rn 8.125.0 → 8.126.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @hero-design/rn
 
+## 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,

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,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.125.0",
+  "version": "8.126.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/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/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/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: {