@hero-design/rn 8.73.0 → 8.74.0

package/src/components/Typography/Caption/__tests__/__snapshots__/index.spec.tsx.snap

@@ -300,6 +300,56 @@ exports[`Caption has inverted intent style 1`] = `
 </View>
 `;
 
+exports[`Caption has muted intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="muted"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Caption has primary intent style 1`] = `
 <View
   style={

package/src/components/Typography/Caption/__tests__/index.spec.tsx

@@ -36,6 +36,7 @@ describe('Caption', () => {
     ${'inverted'}
     ${'archived'}
     ${'disabled'}
+    ${'muted'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <Caption intent={intent}>This is a test</Caption>

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

@@ -30,7 +30,8 @@ export interface CaptionProps extends NativeTextProps {
     | 'danger'
     | 'inverted'
     | 'archived'
-    | 'disabled';
+    | 'disabled'
+    | 'muted';
   /**
    * Additional style.
    */

package/src/components/Typography/Label/__tests__/__snapshots__/index.spec.tsx.snap

@@ -288,6 +288,54 @@ exports[`Label has inverted intent style 1`] = `
 </View>
 `;
 
+exports[`Label has muted intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#4d6265",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="muted"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Label has primary intent style 1`] = `
 <View
   style={

package/src/components/Typography/Label/__tests__/index.spec.tsx

@@ -22,6 +22,7 @@ describe('Label', () => {
     ${'inverted'}
     ${'archived'}
     ${'disabled'}
+    ${'muted'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <Label intent={intent}>This is a test</Label>

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

@@ -26,7 +26,8 @@ export interface LabelProps extends NativeTextProps {
     | 'danger'
     | 'inverted'
     | 'archived'
-    | 'disabled';
+    | 'disabled'
+    | 'muted';
   /**
    * Additional style.
    */

package/src/components/Typography/Title/__tests__/__snapshots__/index.spec.tsx.snap

@@ -918,6 +918,57 @@ exports[`Title has inverted intent style 1`] = `
 </View>
 `;
 
+exports[`Title has muted intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 42,
+          "letterSpacing": 0,
+          "lineHeight": 50,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="muted"
+    themeLevel="h1"
+    themeTypeface="neutral"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Title has primary intent style 1`] = `
 <View
   style={

package/src/components/Typography/Title/__tests__/index.spec.tsx

@@ -22,6 +22,7 @@ describe('Title', () => {
     ${'inverted'}
     ${'archived'}
     ${'disabled'}
+    ${'muted'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <Title intent={intent}>This is a test</Title>

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

@@ -26,7 +26,8 @@ export interface TitleProps extends NativeTextProps {
     | 'danger'
     | 'inverted'
     | 'archived'
-    | 'disabled';
+    | 'disabled'
+    | 'muted';
   /**
    * Additional style.
    */

package/src/components/Typography/types.ts

@@ -15,4 +15,5 @@ export type ThemeIntent =
   | 'danger'
   | 'inverted'
   | 'archived'
-  | 'disabled';
+  | 'disabled'
+  | 'muted';

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

@@ -384,6 +384,7 @@ exports[`theme returns correct theme object 1`] = `
     "chip": {
       "borderWidths": {
         "icon": 2,
+        "outlinedDefaultBorder": 1,
         "wrapper": 1,
       },
       "colors": {
@@ -412,15 +413,10 @@ exports[`theme returns correct theme object 1`] = `
           "shadowRadius": 4,
         },
       },
-      "sizes": {
-        "outlinedDefaultBorder": 1,
-        "outlinedSelectedBorder": 2,
-      },
       "space": {
         "compactWrapperHorizontalPadding": 8,
         "compactWrapperVerticalPadding": 4,
         "iconWrapperHorizontalMargin": 8,
-        "outlinedSelectedMarginTop": -2,
         "wrapperHorizontalPadding": 12,
         "wrapperVerticalPadding": 8,
       },
@@ -600,6 +596,7 @@ exports[`theme returns correct theme object 1`] = `
         "disabledText": "#bfc1c5",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
+        "muted": "#4d6265",
         "primary": "#401960",
         "secondary": "#795e90",
         "success": "#5ace7d",
@@ -676,7 +673,6 @@ exports[`theme returns correct theme object 1`] = `
           "idle": "#ffffff",
           "selected": "#795e90",
         },
-        "iconBackground": "#4d6265",
       },
       "fontSizes": {
         "icon": 42,
@@ -1315,6 +1311,7 @@ exports[`theme returns correct theme object 1`] = `
         "disabled": "#bfc1c5",
         "info": "#355bfb",
         "inverted": "#ffffff",
+        "muted": "#4d6265",
         "primary": "#401960",
         "secondary": "#795e90",
         "subdued": "#4d6265",

package/src/theme/components/chip.ts

@@ -19,12 +19,6 @@ const getChipTheme = (theme: GlobalTheme) => {
     compactWrapperHorizontalPadding: theme.space.small,
     compactWrapperVerticalPadding: theme.space.xsmall,
     iconWrapperHorizontalMargin: theme.space.small,
-    outlinedSelectedMarginTop: -theme.space.xxsmall,
-  };
-
-  const sizes = {
-    outlinedDefaultBorder: theme.borderWidths.base,
-    outlinedSelectedBorder: theme.borderWidths.medium,
   };
 
   const radii = {
@@ -34,6 +28,7 @@ const getChipTheme = (theme: GlobalTheme) => {
   const borderWidths = {
     wrapper: theme.borderWidths.base,
     icon: theme.borderWidths.medium,
+    outlinedDefaultBorder: theme.borderWidths.base,
   };
 
   const shadows = {
@@ -43,7 +38,6 @@ const getChipTheme = (theme: GlobalTheme) => {
   return {
     colors,
     space,
-    sizes,
     radii,
     borderWidths,
     shadows,

package/src/theme/components/icon.ts

@@ -11,6 +11,7 @@ const getIconTheme = (theme: GlobalTheme) => {
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface,
   };
 
   const sizes = {

package/src/theme/components/mapPin.ts

@@ -21,7 +21,6 @@ const getMapPinTheme = (theme: GlobalTheme) => {
     },
     badge: theme.colors.secondary,
     background: theme.colors.defaultGlobalSurface,
-    iconBackground: theme.colors.mutedOnDefaultGlobalSurface,
   };
 
   const radii = {

package/src/theme/components/typography.ts

@@ -13,6 +13,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface,
   };
 
   const fontSizes = {