@hero-design/rn 7.25.0 → 7.26.0

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -17,6 +17,7 @@ exports[`StyledText has body intent style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -39,6 +40,7 @@ exports[`StyledText has danger intent style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="danger"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -61,6 +63,7 @@ exports[`StyledText has info intent style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="info"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -83,6 +86,7 @@ exports[`StyledText has inverted intent style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="inverted"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -105,6 +109,7 @@ exports[`StyledText has large fontSize style 1`] = `
   themeFontSize="large"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -127,6 +132,7 @@ exports[`StyledText has light fontWeight style 1`] = `
   themeFontSize="medium"
   themeFontWeight="light"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -149,6 +155,53 @@ exports[`StyledText has medium fontSize style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has neutral typeface style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeTypeface="neutral"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has playful typeface style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "DarkerGrotesque-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeTypeface="playful"
 >
   This is a test
 </Text>
@@ -171,6 +224,7 @@ exports[`StyledText has primary intent style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="primary"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -193,6 +247,7 @@ exports[`StyledText has regular fontWeight style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -215,6 +270,7 @@ exports[`StyledText has semi-bold fontWeight style 1`] = `
   themeFontSize="medium"
   themeFontWeight="semi-bold"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -237,6 +293,7 @@ exports[`StyledText has small fontSize style 1`] = `
   themeFontSize="small"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -259,6 +316,7 @@ exports[`StyledText has subdued intent style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="subdued"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -281,6 +339,7 @@ exports[`StyledText has success intent style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="success"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -303,6 +362,7 @@ exports[`StyledText has warning intent style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="warning"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -325,6 +385,7 @@ exports[`StyledText has xlarge fontSize style 1`] = `
   themeFontSize="xlarge"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -347,6 +408,7 @@ exports[`StyledText has xxxlarge fontSize style 1`] = `
   themeFontSize="xxxlarge"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>
@@ -369,6 +431,7 @@ exports[`StyledText has xxxxxlarge fontSize style 1`] = `
   themeFontSize="xxxxxlarge"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
 >
   This is a test
 </Text>

package/src/components/Typography/Text/index.tsx

@@ -47,6 +47,12 @@ export interface TextProps extends NativeTextProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * The typeface to render the text in:
+   * - `neutral`: The default typeface for the platform.
+   * - `playful`: To visualise a playful content.
+   */
+  typeface?: 'neutral' | 'playful';
 }
 
 const Text = ({
@@ -54,6 +60,7 @@ const Text = ({
   fontSize = 'medium',
   fontWeight = 'regular',
   intent = 'body',
+  typeface = 'neutral',
   ...nativeProps
 }: TextProps) => (
   <StyledText
@@ -61,6 +68,7 @@ const Text = ({
     themeFontSize={fontSize}
     themeFontWeight={fontWeight}
     themeIntent={intent}
+    themeTypeface={typeface}
   >
     {children}
   </StyledText>

package/src/index.ts

@@ -14,7 +14,7 @@ import { scale } from './utils/scale';
 import Accordion from './components/Accordion';
 import Alert from './components/Alert';
 import Attachment from './components/Attachment';
-import Avatar from './components/Avatar';
+import Avatar, { useAvatarColors } from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import BottomSheet from './components/BottomSheet';
@@ -68,6 +68,7 @@ export {
   Alert,
   Attachment,
   Avatar,
+  useAvatarColors,
   Badge,
   BottomNavigation,
   BottomSheet,

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

@@ -59,14 +59,34 @@ Object {
       },
     },
     "avatar": Object {
-      "borderWidths": Object {
-        "default": 1,
-      },
       "colors": Object {
         "danger": "#f46363",
         "info": "#b5c3fd",
         "primary": "#401960",
         "success": "#5ace7d",
+        "text": "#ffffff",
+        "visualisation": Array [
+          "#48000a",
+          "#737479",
+          "#001f23",
+          "#353957",
+          "#25006e",
+          "#4568fb",
+          "#5a68e2",
+          "#4853b5",
+          "#48a564",
+          "#017d6d",
+          "#cc822a",
+          "#998000",
+          "#e3602a",
+          "#f46363",
+          "#de350b",
+          "#c38cee",
+          "#9f64e3",
+          "#8505a2",
+          "#7622d7",
+          "#401960",
+        ],
         "warning": "#ffbe71",
       },
       "fontSizes": Object {
@@ -79,6 +99,9 @@ Object {
         "xxxxlarge": 48,
         "xxxxxlarge": 60,
       },
+      "fonts": Object {
+        "default": "BeVietnamPro-Regular",
+      },
       "radii": Object {
         "rounded": 999,
       },
@@ -238,7 +261,7 @@ Object {
     },
     "card": Object {
       "colors": Object {
-        "archived": "#ccced1",
+        "archived": "#abacaf",
         "danger": "#f46363",
         "dataCardIndicator": "#401960",
         "info": "#b5c3fd",
@@ -431,7 +454,7 @@ Object {
       "colors": Object {
         "checkedListItemContainerBackground": "#ece8ef",
         "leadingStatus": Object {
-          "archived": "#ccced1",
+          "archived": "#abacaf",
           "danger": "#f46363",
           "info": "#b5c3fd",
           "success": "#5ace7d",
@@ -502,21 +525,42 @@ Object {
     },
     "progress": Object {
       "colors": Object {
-        "archived": "#737479",
-        "background": "#e8e9ea",
-        "danger": "#de350b",
-        "info": "#4568fb",
-        "innerBackground": "#ffffff",
-        "primary": "#401960",
-        "success": "#017d6d",
-        "warning": "#ffa234",
+        "completeness": Object {
+          "archived": "#737479",
+          "archivedInverted": "#ffffff",
+          "danger": "#de350b",
+          "dangerInverted": "#ffffff",
+          "info": "#4568fb",
+          "infoInverted": "#ffffff",
+          "primary": "#401960",
+          "primaryInverted": "#ffffff",
+          "success": "#017d6d",
+          "successInverted": "#ffffff",
+          "warning": "#ffa234",
+          "warningInverted": "#ffffff",
+        },
+        "incompleteness": Object {
+          "archived": "#e8e9ea",
+          "archivedInverted": "#bcbdbf",
+          "danger": "#e8e9ea",
+          "dangerInverted": "#f68282",
+          "info": "#e8e9ea",
+          "infoInverted": "#c4cffd",
+          "primary": "#e8e9ea",
+          "primaryInverted": "#664780",
+          "success": "#e8e9ea",
+          "successInverted": "#7bd897",
+          "warning": "#e8e9ea",
+          "warningInverted": "#ffcb8d",
+        },
       },
       "radii": Object {
         "default": 999,
       },
       "sizes": Object {
         "barHeight": 4,
-        "circleWidth": 72,
+        "circleCompletenessHeight": 4,
+        "circleDiameter": 72,
       },
     },
     "radio": Object {
@@ -894,9 +938,16 @@ Object {
         "xxxxxlarge": 32,
       },
       "fonts": Object {
-        "light": "BeVietnamPro-Light",
-        "regular": "BeVietnamPro-Regular",
-        "semiBold": "BeVietnamPro-SemiBold",
+        "neutral": Object {
+          "light": "BeVietnamPro-Light",
+          "regular": "BeVietnamPro-Regular",
+          "semiBold": "BeVietnamPro-SemiBold",
+        },
+        "playful": Object {
+          "light": "DarkerGrotesque-Light",
+          "regular": "DarkerGrotesque-Regular",
+          "semiBold": "DarkerGrotesque-SemiBold",
+        },
       },
       "lineHeights": Object {
         "large": 24,
@@ -913,7 +964,7 @@ Object {
     "medium": 2,
   },
   "colors": Object {
-    "archived": "#ccced1",
+    "archived": "#abacaf",
     "archivedBackground": "#f6f6f7",
     "archivedDark": "#737479",
     "archivedLight": "#bfc1c5",
@@ -955,10 +1006,15 @@ Object {
     "infoSurface": "#ecf0ff",
     "invertedText": "#ffffff",
     "lightHighlightedSurface": "#ece8ef",
+    "mutedArchived": "#bcbdbf",
+    "mutedError": "#f68282",
     "mutedGlobalPrimary": "#4d6265",
+    "mutedInfo": "#c4cffd",
     "mutedOnDefaultGlobalSurface": "#4d6265",
     "mutedPrimary": "#e6e9e9",
     "mutedSecondary": "#808f91",
+    "mutedSuccess": "#7bd897",
+    "mutedWarning": "#ffcb8d",
     "neutralGlobalSurface": "#f6f6f7",
     "onArchivedSurface": "#737479",
     "onDarkGlobalSurface": "#ffffff",
@@ -1009,9 +1065,16 @@ Object {
     "xxxxxlarge": 32,
   },
   "fonts": Object {
-    "light": "BeVietnamPro-Light",
-    "regular": "BeVietnamPro-Regular",
-    "semiBold": "BeVietnamPro-SemiBold",
+    "neutral": Object {
+      "light": "BeVietnamPro-Light",
+      "regular": "BeVietnamPro-Regular",
+      "semiBold": "BeVietnamPro-SemiBold",
+    },
+    "playful": Object {
+      "light": "DarkerGrotesque-Light",
+      "regular": "DarkerGrotesque-Regular",
+      "semiBold": "DarkerGrotesque-SemiBold",
+    },
   },
   "lineHeights": Object {
     "large": 24,

package/src/theme/components/avatar.ts

@@ -1,3 +1,4 @@
+import { defaultMobilePalette as palette } from '@hero-design/colors';
 import type { GlobalTheme } from '../global';
 
 const getAvatarTheme = (theme: GlobalTheme) => {
@@ -7,6 +8,29 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     danger: theme.colors.error,
     success: theme.colors.success,
     warning: theme.colors.warning,
+    text: theme.colors.invertedText,
+    visualisation: [
+      palette.currant,
+      palette.sonicSilver,
+      palette.maasstrichtBlue,
+      palette.nightBlue,
+      palette.darkBlue,
+      palette.ultramarineBlue,
+      palette.royalBlue,
+      palette.royalBlueDark20,
+      palette.emeraldDark20,
+      palette.pineGreen,
+      palette.deepSaffronDark20,
+      palette.goldDark40,
+      palette.apple,
+      palette.pastelRed,
+      palette.vermilion,
+      palette.mauve,
+      palette.violetLight30,
+      palette.violet1,
+      palette.violet,
+      palette.scarletGum,
+    ],
   };
 
   const sizes = {
@@ -20,6 +44,10 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     xxxxxlarge: theme.sizes['14xlarge'],
   };
 
+  const fonts = {
+    default: theme.fonts.neutral.regular,
+  };
+
   const fontSizes = {
     small: theme.fontSizes.large,
     medium: theme.fontSizes.xlarge,
@@ -35,11 +63,7 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     rounded: theme.radii.rounded,
   };
 
-  const borderWidths = {
-    default: theme.borderWidths.base,
-  };
-
-  return { colors, sizes, radii, borderWidths, fontSizes };
+  return { colors, sizes, radii, fonts, fontSizes };
 };
 
 export default getAvatarTheme;

package/src/theme/components/badge.ts

@@ -12,7 +12,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    default: theme.fonts.semiBold,
+    default: theme.fonts.neutral.semiBold,
   };
 
   const fontSizes = {

package/src/theme/components/button.ts

@@ -2,8 +2,8 @@ import type { GlobalTheme } from '../global';
 
 const getButtonTheme = (theme: GlobalTheme) => {
   const fonts = {
-    default: theme.fonts.semiBold,
-    utility: theme.fonts.regular,
+    default: theme.fonts.neutral.semiBold,
+    utility: theme.fonts.neutral.regular,
   };
 
   const fontSize = {

package/src/theme/components/empty.ts

@@ -23,8 +23,8 @@ const getEmptyTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    title: theme.fonts.semiBold,
-    description: theme.fonts.light,
+    title: theme.fonts.neutral.semiBold,
+    description: theme.fonts.neutral.light,
   };
 
   return { fontSizes, colors, sizes, space, fonts };

package/src/theme/components/fab.ts

@@ -17,9 +17,9 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    header: theme.fonts.semiBold,
-    actionItemText: theme.fonts.regular,
-    title: theme.fonts.semiBold,
+    header: theme.fonts.neutral.semiBold,
+    actionItemText: theme.fonts.neutral.regular,
+    title: theme.fonts.neutral.semiBold,
   };
 
   const fontSizes = {

package/src/theme/components/pinInput.ts

@@ -14,8 +14,8 @@ const getPinInputTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    cellText: theme.fonts.semiBold,
-    errorMessage: theme.fonts.regular,
+    cellText: theme.fonts.neutral.semiBold,
+    errorMessage: theme.fonts.neutral.regular,
   };
 
   const fontSizes = {

package/src/theme/components/progress.ts

@@ -1,19 +1,47 @@
+import { mixColor } from '@hero-design/colors';
 import type { GlobalTheme } from '../global';
 
 const getProgressTheme = (theme: GlobalTheme) => {
+  const lightenScaleOnInverted = 20;
+
   const colors = {
-    primary: theme.colors.primary,
-    success: theme.colors.onSuccessSurface, // should be emerald dark 15
-    warning: theme.colors.onWarningSurface,
-    danger: theme.colors.onErrorSurface,
-    info: theme.colors.onInfoSurface,
-    archived: theme.colors.onArchivedSurface,
-    background: theme.colors.secondaryOutline,
-    innerBackground: theme.colors.defaultGlobalSurface,
+    completeness: {
+      primary: theme.colors.primary,
+      success: theme.colors.onSuccessSurface, // should be emerald dark 15
+      warning: theme.colors.onWarningSurface,
+      danger: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      archived: theme.colors.onArchivedSurface,
+
+      primaryInverted: theme.colors.onDarkGlobalSurface,
+      successInverted: theme.colors.onDarkGlobalSurface,
+      warningInverted: theme.colors.onDarkGlobalSurface,
+      dangerInverted: theme.colors.onDarkGlobalSurface,
+      infoInverted: theme.colors.onDarkGlobalSurface,
+      archivedInverted: theme.colors.onDarkGlobalSurface,
+    },
+    incompleteness: {
+      primary: theme.colors.secondaryOutline,
+      success: theme.colors.secondaryOutline,
+      warning: theme.colors.secondaryOutline,
+      danger: theme.colors.secondaryOutline,
+      info: theme.colors.secondaryOutline,
+      archived: theme.colors.secondaryOutline,
+
+      primaryInverted: mixColor(theme.colors.primary).tint(
+        lightenScaleOnInverted
+      ),
+      successInverted: theme.colors.mutedSuccess,
+      warningInverted: theme.colors.mutedWarning,
+      dangerInverted: theme.colors.mutedError,
+      infoInverted: theme.colors.mutedInfo,
+      archivedInverted: theme.colors.mutedArchived,
+    },
   };
 
   const sizes = {
-    circleWidth: theme.sizes['6xlarge'],
+    circleDiameter: theme.sizes['6xlarge'],
+    circleCompletenessHeight: theme.sizes.xsmall,
     barHeight: theme.sizes.xsmall,
   };
 

package/src/theme/components/tag.ts

@@ -23,7 +23,7 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    default: theme.fonts.semiBold,
+    default: theme.fonts.neutral.semiBold,
   };
 
   const fontSizes = {

package/src/theme/components/typography.ts

@@ -13,12 +13,6 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     inverted: theme.colors.onDarkGlobalSurface,
   };
 
-  const fonts = {
-    light: theme.fonts.light,
-    regular: theme.fonts.regular,
-    semiBold: theme.fonts.semiBold,
-  };
-
   const fontSizes = {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
@@ -37,7 +31,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
   };
 
-  return { colors, fonts, fontSizes, lineHeights };
+  return { colors, fonts: theme.fonts, fontSizes, lineHeights };
 };
 
 export default getTypographyTheme;

package/src/theme/global/colors/global.ts

@@ -2,7 +2,7 @@ import { defaultMobilePalette as palette } from '@hero-design/colors';
 import type { GlobalSystemPalette } from './types';
 
 const globalPalette: GlobalSystemPalette = {
-  // Updated 14 / Nov / 22
+  // Updated 21 / Nov / 22
   // Surfaces
   defaultGlobalSurface: palette.white,
   onDefaultGlobalSurface: palette.maasstrichtBlue,
@@ -21,21 +21,30 @@ const globalPalette: GlobalSystemPalette = {
 
   // Accents
   error: palette.pastelRed,
+  mutedError: palette.pastelRedLight20,
   errorSurface: palette.linen,
   onErrorSurface: palette.vermilion,
+
   warning: palette.mellowApricot,
+  mutedWarning: palette.mellowApricotLight20,
   warningSurface: palette.seashell,
   onWarningSurface: palette.deepSaffron,
+
   success: palette.emerald,
+  mutedSuccess: palette.emeraldLight20,
   successSurface: palette.honeydew,
   onSuccessSurface: palette.pineGreen,
+
   info: palette.vodka,
+  mutedInfo: palette.vodkaLight20,
   infoSurface: palette.aliceBlue,
   onInfoSurface: palette.ultramarineBlue,
-  archived: palette.greyLight45,
+
+  archived: palette.silverChalice,
+  mutedArchived: palette.silverChaliceLight20,
   archivedSurface: palette.antiFlashWhite,
   onArchivedSurface: palette.sonicSilver,
-  // End of Updated 14 / Nov / 22
+  // End of Updated 21 / Nov / 22
 };
 
 export default globalPalette;

package/src/theme/global/colors/types.ts

@@ -18,18 +18,23 @@ export type GlobalSystemPalette = {
 
   // Accents
   error: string;
+  mutedError: string;
   errorSurface: string;
   onErrorSurface: string;
   warning: string;
+  mutedWarning: string;
   warningSurface: string;
   onWarningSurface: string;
   success: string;
+  mutedSuccess: string;
   successSurface: string;
   onSuccessSurface: string;
   info: string;
+  mutedInfo: string;
   infoSurface: string;
   onInfoSurface: string;
   archived: string;
+  mutedArchived: string;
   archivedSurface: string;
   onArchivedSurface: string;
   // End of Updated 14 / Nov / 22