@hero-design/rn 8.12.1 → 8.12.2

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

@@ -183,8 +183,20 @@ Object {
         "disabledBorder": "#bfc1c5",
         "disabledText": "#bfc1c5",
         "invertedText": "#ffffff",
+        "pressedBackground": Object {
+          "filledDanger": "#fcebe7",
+          "filledPrimary": "#664780",
+          "filledSecondary": "#664780",
+          "outlineDanger": "#fcebe7",
+          "outlinedPrimary": "#ece8ef",
+          "outlinedSecondary": "#ece8ef",
+          "textDanger": "#fcebe7",
+          "textPrimary": "#ece8ef",
+          "textSecondary": "#ece8ef",
+        },
         "primary": "#401960",
         "secondary": "#795e90",
+        "textLoadingBackground": "#ece8ef",
         "utilityBackground": "#f6f6f7",
       },
       "fontSize": Object {
@@ -201,6 +213,7 @@ Object {
       },
       "radii": Object {
         "default": 32,
+        "text": 4,
         "utilityRadii": 8,
       },
       "sizes": Object {
@@ -209,6 +222,7 @@ Object {
       "space": Object {
         "buttonPadding": 16,
         "iconPadding": 12,
+        "textButtonPadding": 12,
         "utilityPadding": 8,
       },
     },
@@ -396,9 +410,11 @@ Object {
     "fab": Object {
       "colors": Object {
         "actionItemBackground": "#401960",
+        "actionItemPressedBackground": "#664780",
         "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
         "buttonBackground": "#401960",
+        "buttonPressedBackground": "#664780",
         "headerText": "#001f23",
         "icon": "#ffffff",
         "titleText": "#ffffff",
@@ -1082,6 +1098,7 @@ Object {
     "xxxxxlarge": 40,
   },
   "radii": Object {
+    "5xlarge": 32,
     "base": 4,
     "large": 12,
     "medium": 8,

package/src/theme/components/button.ts

@@ -22,6 +22,7 @@ const getButtonTheme = (theme: GlobalTheme) => {
 
   const space = {
     buttonPadding: theme.space.medium,
+    textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small,
   };
@@ -31,8 +32,9 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 
   const radii = {
-    default: theme.space.xlarge,
-    utilityRadii: theme.space.small,
+    default: theme.radii['5xlarge'],
+    utilityRadii: theme.radii.medium,
+    text: theme.radii.base,
   };
 
   const colors = {
@@ -45,6 +47,18 @@ const getButtonTheme = (theme: GlobalTheme) => {
     disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
     utilityBackground: theme.colors.neutralGlobalSurface,
+    textLoadingBackground: theme.colors.highlightedSurface,
+    pressedBackground: {
+      filledPrimary: theme.colors.pressedSurface,
+      filledSecondary: theme.colors.pressedSurface,
+      filledDanger: theme.colors.errorSurface,
+      outlinedPrimary: theme.colors.highlightedSurface,
+      outlinedSecondary: theme.colors.highlightedSurface,
+      outlineDanger: theme.colors.errorSurface,
+      textPrimary: theme.colors.highlightedSurface,
+      textSecondary: theme.colors.highlightedSurface,
+      textDanger: theme.colors.errorSurface,
+    },
   };
 
   return {

package/src/theme/components/fab.ts

@@ -3,9 +3,11 @@ import type { GlobalTheme } from '../global';
 const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.primary,
+    actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,

package/src/theme/global/borders.ts

@@ -11,6 +11,7 @@ interface Radii {
   xlarge: number;
   xxlarge: number;
   xxxlarge: number;
+  '5xlarge': number;
 }
 
 const getBorderWidths = (baseBorderWidth: number): BorderWidths => ({
@@ -26,6 +27,7 @@ const getRadii = (baseRadius: number): Radii => ({
   xlarge: baseRadius * 4, // 16
   xxlarge: baseRadius * 5, // 20
   xxxlarge: baseRadius * 6, // 24
+  '5xlarge': baseRadius * 8, // 32
 });
 
 export { getBorderWidths, getRadii };

package/types/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import type { ReactChild } from 'react';
+import { ReactChild } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import type { Intent, ThemeVariant } from './StyledButton';

package/types/components/Button/StyledButton.d.ts

@@ -1,16 +1,17 @@
 /// <reference types="react" />
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import type { Theme } from '@emotion/react';
 declare type Intent = 'primary' | 'secondary' | 'danger';
 declare type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
-declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     disabled?: boolean | undefined;
     themeVariant: ThemeVariant;
+    loading?: boolean | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: Theme | undefined;

package/types/components/FAB/ActionGroup/StyledActionItem.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { TouchableOpacity } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { IconProps } from '../../Icon';
-declare const StyledActionItem: import("@emotion/native").StyledComponent<TouchableOpacityProps & {
+declare const StyledActionItem: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
 }>;
 declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;

package/types/theme/components/button.d.ts

@@ -18,6 +18,7 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
     radii: {
         default: number;
         utilityRadii: number;
+        text: number;
     };
     colors: {
         primary: string;
@@ -29,12 +30,25 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         disabledBackground: string;
         invertedText: string;
         utilityBackground: string;
+        textLoadingBackground: string;
+        pressedBackground: {
+            filledPrimary: string;
+            filledSecondary: string;
+            filledDanger: string;
+            outlinedPrimary: string;
+            outlinedSecondary: string;
+            outlineDanger: string;
+            textPrimary: string;
+            textSecondary: string;
+            textDanger: string;
+        };
     };
     lineHeight: {
         default: number;
     };
     space: {
         buttonPadding: number;
+        textButtonPadding: number;
         iconPadding: number;
         utilityPadding: number;
     };

package/types/theme/components/fab.d.ts

@@ -15,9 +15,11 @@ declare const getFABTheme: (theme: GlobalTheme) => {
     };
     colors: {
         buttonBackground: string;
+        buttonPressedBackground: string;
         icon: string;
         headerText: string;
         actionItemBackground: string;
+        actionItemPressedBackground: string;
         backdropBackground: string;
         titleText: string;
         actionItemText: string;

package/types/theme/global/borders.d.ts

@@ -10,6 +10,7 @@ interface Radii {
     xlarge: number;
     xxlarge: number;
     xxxlarge: number;
+    '5xlarge': number;
 }
 declare const getBorderWidths: (baseBorderWidth: number) => BorderWidths;
 declare const getRadii: (baseRadius: number) => Radii;