@hero-design/rn 8.66.0 → 8.67.0-alpha.0

package/src/theme/components/fab.ts

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

package/src/theme/getTheme.ts

@@ -1,4 +1,4 @@
-import { getGlobalTheme, defaultScale, swagSystemPalette } from './global';
+import { getGlobalTheme, defaultScale, swagLightSystemPalette } from './global';
 
 import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
@@ -102,7 +102,7 @@ type Theme = GlobalTheme & {
 
 const getTheme = (
   scale: Scale = defaultScale,
-  systemPallete: SystemPalette = swagSystemPalette
+  systemPallete: SystemPalette = swagLightSystemPalette
 ): Theme => {
   const globalTheme = getGlobalTheme(scale, systemPallete);
   return {

package/src/theme/global/colors/__tests__/__snapshots__/swagLight.spec.ts.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swagDark returns correct theme object 1`] = `
+{
+  "archived": "#abacaf",
+  "archivedSurface": "#dadbde",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#FDFBFF",
+  "decorativePrimarySurface": "#DDC8F5",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#FDFBFF",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#f1e9fb",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#606065",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
+  "onPrimary": "#FDFBFF",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ac5d00",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#380060",
+  "primary": "#460078",
+  "primaryOutline": "#001f23",
+  "secondary": "#B382FD",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

package/src/theme/global/colors/__tests__/swagLight.spec.ts

@@ -0,0 +1,7 @@
+import swagLight from '../swagLight';
+
+describe('swagDark', () => {
+  it('returns correct theme object', () => {
+    expect(swagLight).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,25 @@
+import { swagLightPalette as palette } from '@hero-design/colors';
+import type { SystemPalette, BrandSystemPalette } from './types';
+import globalPalette from './global';
+
+const swagBrandSystemPallete: BrandSystemPalette = {
+  primary: palette.darkViolet,
+  onPrimary: '#FDFBFF',
+  secondary: '#B382FD',
+  onSecondary: palette.white,
+  defaultSurface: '#FDFBFF',
+  highlightedSurface: palette.violetLight90,
+  pressedSurface: palette.darkVioletDark20,
+
+  decorativePrimary: '#FDFBFF',
+  decorativePrimarySurface: '#DDC8F5',
+};
+
+const swagSystemPalette: SystemPalette = {
+  // Global
+  ...globalPalette,
+  // Brand
+  ...swagBrandSystemPallete,
+};
+
+export default swagSystemPalette;

package/src/theme/global/index.ts

@@ -1,6 +1,7 @@
 import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
 import swagDarkSystemPalette from './colors/swagDark';
+import swagLightSystemPalette from './colors/swagLight';
 import workSystemPalette from './colors/work';
 import jobsSystemPalette from './colors/jobs';
 import walletSystemPalette from './colors/wallet';
@@ -47,6 +48,7 @@ export {
   getGlobalTheme,
   defaultScale,
   swagSystemPalette,
+  swagLightSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,

package/src/theme/index.ts

@@ -3,6 +3,7 @@ import ThemeProvider, { useTheme } from './ThemeProvider';
 import ThemeSwitcher, { withTheme } from './ThemeSwitcher';
 import {
   swagSystemPalette,
+  swagLightSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
@@ -23,6 +24,7 @@ export {
   ThemeSwitcher,
   useTheme,
   swagSystemPalette,
+  swagLightSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,

package/types/components/Alert/StyledAlert.d.ts

@@ -1,11 +1,14 @@
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
+import { TextProps } from '../Typography/Text';
+import { IconProps } from '../Icon';
+declare type ThemeIntent = 'success' | 'info' | 'warning' | 'error' | 'notification';
 declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeVariant: 'rounded' | 'unrounded';
-    themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
+    themeIntent: ThemeIntent;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -15,12 +18,24 @@ declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledIcon: import("@emotion/native").StyledComponent<IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
 declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
+declare const StyledBody: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & TextProps & {
+    themeIntent: ThemeIntent;
+}, {}, {}>;
 declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -35,4 +50,4 @@ declare const CTAWrapper: import("@emotion/native").StyledComponent<import("reac
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };
+export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, StyledBody, StyledIcon, };

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

@@ -1,11 +1,11 @@
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { IconProps } from '../../Icon';
-declare const StyledActionItem: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
+declare const StyledActionItem: import("@emotion/native").StyledComponent<TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
-    ref?: import("react").Ref<TouchableHighlight> | undefined;
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
 declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme | undefined;

package/types/components/FAB/StyledFAB.d.ts

@@ -1,7 +1,6 @@
-import type { TextProps } from 'react-native';
-import { Animated, TouchableHighlight } from 'react-native';
+import { TextProps, Animated, TouchableOpacity } from 'react-native';
 import type { IconProps } from '../Icon';
-declare const StyledFAB: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").TouchableHighlightProps & import("react").RefAttributes<TouchableHighlight>> & {
+declare const StyledFAB: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").TouchableOpacityProps & import("react").RefAttributes<TouchableOpacity>> & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {