@hero-design/rn 8.119.0 → 8.120.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @hero-design/rn
 
+## 8.120.0
+
+### Minor Changes
+
+- [#4874](https://github.com/Thinkei/hero-design/pull/4874) [`c3c35f0c8d2825138330aaae0ae383b624b8e067`](https://github.com/Thinkei/hero-design/commit/c3c35f0c8d2825138330aaae0ae383b624b8e067) Thanks [@ttkien](https://github.com/ttkien)! - [BottomNavigation] add badge count
+
+## 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, {
@@ -10375,10 +10399,12 @@ var BottomNavigation = function BottomNavigation(_ref) {
   })), /*#__PURE__*/React__default.createElement(BottomBarWrapper, {
     themeInsets: insets
   }, /*#__PURE__*/React__default.createElement(BottomBar, null, tabs.map(function (tab) {
+    var _badge$count, _badge$testID;
     var key = tab.key,
       icon = tab.icon,
       title = tab.title,
-      testID = tab.testID;
+      testID = tab.testID,
+      badge = tab.badge;
     var active = selectedTabKey === key;
     var inactiveIcon = getInactiveIcon(icon);
     return /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
@@ -10387,11 +10413,16 @@ var BottomNavigation = function BottomNavigation(_ref) {
         return onTabPress(key);
       },
       testID: testID
-    }, /*#__PURE__*/React__default.createElement(BottomBarItem, null, /*#__PURE__*/React__default.createElement(Icon, {
+    }, /*#__PURE__*/React__default.createElement(BottomBarItem, null, /*#__PURE__*/React__default.createElement(Status, {
+      content: (_badge$count = badge === null || badge === void 0 ? void 0 : badge.count) !== null && _badge$count !== void 0 ? _badge$count : 0,
+      visible: !!badge && badge.count > 0,
+      max: badge === null || badge === void 0 ? void 0 : badge.max,
+      testID: (_badge$testID = badge === null || badge === void 0 ? void 0 : badge.testID) !== null && _badge$testID !== void 0 ? _badge$testID : "bottom-nav-badge-".concat(key)
+    }, /*#__PURE__*/React__default.createElement(Icon, {
       icon: active ? icon : inactiveIcon,
       intent: active ? 'primary' : 'muted',
       testID: "hero-icon-".concat(icon)
-    }), !!title && /*#__PURE__*/React__default.createElement(StyledBottomBarText, {
+    })), !!title && /*#__PURE__*/React__default.createElement(StyledBottomBarText, {
       intent: active ? 'primary' : 'muted',
       numberOfLines: 1
     }, title)));

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, {
@@ -10404,10 +10428,12 @@ var BottomNavigation = function BottomNavigation(_ref) {
   })), /*#__PURE__*/React__namespace.default.createElement(BottomBarWrapper, {
     themeInsets: insets
   }, /*#__PURE__*/React__namespace.default.createElement(BottomBar, null, tabs.map(function (tab) {
+    var _badge$count, _badge$testID;
     var key = tab.key,
       icon = tab.icon,
       title = tab.title,
-      testID = tab.testID;
+      testID = tab.testID,
+      badge = tab.badge;
     var active = selectedTabKey === key;
     var inactiveIcon = getInactiveIcon(icon);
     return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
@@ -10416,11 +10442,16 @@ var BottomNavigation = function BottomNavigation(_ref) {
         return onTabPress(key);
       },
       testID: testID
-    }, /*#__PURE__*/React__namespace.default.createElement(BottomBarItem, null, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    }, /*#__PURE__*/React__namespace.default.createElement(BottomBarItem, null, /*#__PURE__*/React__namespace.default.createElement(Status, {
+      content: (_badge$count = badge === null || badge === void 0 ? void 0 : badge.count) !== null && _badge$count !== void 0 ? _badge$count : 0,
+      visible: !!badge && badge.count > 0,
+      max: badge === null || badge === void 0 ? void 0 : badge.max,
+      testID: (_badge$testID = badge === null || badge === void 0 ? void 0 : badge.testID) !== null && _badge$testID !== void 0 ? _badge$testID : "bottom-nav-badge-".concat(key)
+    }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
       icon: active ? icon : inactiveIcon,
       intent: active ? 'primary' : 'muted',
       testID: "hero-icon-".concat(icon)
-    }), !!title && /*#__PURE__*/React__namespace.default.createElement(StyledBottomBarText, {
+    })), !!title && /*#__PURE__*/React__namespace.default.createElement(StyledBottomBarText, {
       intent: active ? 'primary' : 'muted',
       numberOfLines: 1
     }, title)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.119.0",
+  "version": "8.120.0",
   "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/components/BottomNavigation/index.tsx

@@ -16,6 +16,7 @@ import {
 } from './StyledBottomNavigation';
 import { isIOS } from '../../utils/helpers';
 import type { IconName } from '../Icon';
+import Count from '../Badge/Count';
 
 export type BottomNavigationTabType = {
   key: string;
@@ -23,8 +24,18 @@ export type BottomNavigationTabType = {
   icon: IconName;
   component: ReactNode;
   testID?: string;
+  /**
+   * Badge to display on the tab icon.
+   */
+  badge?: {
+    /** The number to display on the badge. */
+    count: number;
+    /** Maximum number before showing `${max}+`. Defaults to 99. */
+    max?: number;
+    /** Testing id for the badge wrapper. */
+    testID?: string;
+  };
 };
-
 interface BottomNavigationProps extends ViewProps {
   /**
    * Callback which is called on tab press, receiving key of upcoming active Tab.
@@ -42,13 +53,7 @@ interface BottomNavigationProps extends ViewProps {
   /**
    * List of Tabs to be rendered. Each Tab must have an unique key.
    */
-  tabs: {
-    key: string;
-    title?: string;
-    icon: IconName;
-    component: ReactNode;
-    testID?: string;
-  }[];
+  tabs: BottomNavigationTabType[];
   /**
    * Additional style.
    */
@@ -124,7 +129,7 @@ const BottomNavigation = ({
       <BottomBarWrapper themeInsets={insets}>
         <BottomBar>
           {tabs.map((tab) => {
-            const { key, icon, title, testID } = tab;
+            const { key, icon, title, testID, badge } = tab;
             const active = selectedTabKey === key;
             const inactiveIcon = getInactiveIcon(icon);
 
@@ -135,11 +140,18 @@ const BottomNavigation = ({
                 testID={testID}
               >
                 <BottomBarItem>
-                  <Icon
-                    icon={active ? icon : inactiveIcon}
-                    intent={active ? 'primary' : 'muted'}
-                    testID={`hero-icon-${icon}`}
-                  />
+                  <Count
+                    content={badge?.count ?? 0}
+                    visible={!!badge && badge.count > 0}
+                    max={badge?.max}
+                    testID={badge?.testID ?? `bottom-nav-badge-${key}`}
+                  >
+                    <Icon
+                      icon={active ? icon : inactiveIcon}
+                      intent={active ? 'primary' : 'muted'}
+                      testID={`hero-icon-${icon}`}
+                    />
+                  </Count>
                   {!!title && (
                     <StyledBottomBarText
                       intent={active ? 'primary' : 'muted'}

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/components/BottomNavigation/index.d.ts

@@ -7,6 +7,17 @@ export type BottomNavigationTabType = {
     icon: IconName;
     component: ReactNode;
     testID?: string;
+    /**
+     * Badge to display on the tab icon.
+     */
+    badge?: {
+        /** The number to display on the badge. */
+        count: number;
+        /** Maximum number before showing `${max}+`. Defaults to 99. */
+        max?: number;
+        /** Testing id for the badge wrapper. */
+        testID?: string;
+    };
 };
 interface BottomNavigationProps extends ViewProps {
     /**
@@ -25,13 +36,7 @@ interface BottomNavigationProps extends ViewProps {
     /**
      * List of Tabs to be rendered. Each Tab must have an unique key.
      */
-    tabs: {
-        key: string;
-        title?: string;
-        icon: IconName;
-        component: ReactNode;
-        testID?: string;
-    }[];
+    tabs: BottomNavigationTabType[];
     /**
      * Additional style.
      */

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;