@hero-design/rn 8.73.1 → 8.74.0

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

@@ -596,6 +596,7 @@ exports[`theme returns correct theme object 1`] = `
         "disabledText": "#bfc1c5",
         "info": "#b5c3fd",
         "invertedText": "#ffffff",
+        "muted": "#4d6265",
         "primary": "#401960",
         "secondary": "#795e90",
         "success": "#5ace7d",
@@ -1310,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/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/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 = {