@hero-design/rn 7.18.1 → 7.20.0

package/src/theme/components/contentNavigator.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getContentNavigatorTheme = (theme: GlobalTheme) => {
   const space = {

package/src/theme/components/divider.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getDividerTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/drawer.ts

@@ -1,5 +1,5 @@
-import { GlobalTheme } from '../global';
 import { scale } from '../../utils/scale';
+import type { GlobalTheme } from '../global';
 
 const getDrawerTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/empty.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getEmptyTheme = (theme: GlobalTheme) => {
   const space = {

package/src/theme/components/fab.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getFABTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/icon.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getIconTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/list.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getListTheme = (theme: GlobalTheme) => {
   const colors = {
@@ -27,8 +27,9 @@ const getListTheme = (theme: GlobalTheme) => {
     leadingStatus: theme.radii.rounded,
   };
 
-  const offsets = {
-    cardShadow: { width: 0, height: 2 },
+  const shadows = {
+    cardOffset: { width: 0, height: 2 },
+    cardElevation: 10,
   };
 
   const widths = {
@@ -41,7 +42,7 @@ const getListTheme = (theme: GlobalTheme) => {
     cardShadow: 1,
   };
 
-  return { colors, space, radii, offsets, widths, opacity };
+  return { colors, space, radii, widths, opacity, shadows };
 };
 
 export default getListTheme;

package/src/theme/components/pinInput.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getPinInputTheme = (theme: GlobalTheme) => {
   const borderWidths = {

package/src/theme/components/progress.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getProgressTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/radio.ts

@@ -1,16 +1,12 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getRadioTheme = (theme: GlobalTheme) => {
   const colors = {
-    circle: theme.colors.black,
-    checkedCircle: theme.colors.primary,
-    wrapper: theme.colors.platformBackground,
-    checkedWrapper: theme.colors.primaryBackground,
+    circle: theme.colors.globalPrimary,
   };
 
   const space = {
-    wrapperPadding: theme.space.medium, // left padding should be 12 according to the design
     circleLeftMargin: theme.space.small,
     groupTopMargin: theme.space.xsmall,
   };
@@ -24,11 +20,7 @@ const getRadioTheme = (theme: GlobalTheme) => {
     circle: theme.borderWidths.medium,
   };
 
-  const radii = {
-    wrapper: theme.radii.base,
-  };
-
-  return { sizes, borderWidths, space, colors, radii };
+  return { sizes, borderWidths, space, colors };
 };
 
 export default getRadioTheme;

package/src/theme/components/richTextEditor.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getRichTextEditorTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/sectionHeading.ts

@@ -1,8 +1,8 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getSectionHeadingTheme = (theme: GlobalTheme) => {
   const colors = {
-    background: theme.colors.outline,
+    background: theme.colors.__alpha__globalNeutral3,
   };
 
   const space = {

package/src/theme/components/select.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getSelectTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/spinner.ts

@@ -1,21 +1,33 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getSpinnerTheme = (theme: GlobalTheme) => {
-  const color = {
-    default: theme.colors.primary,
+  const colors = {
+    dot1: theme.colors.__alpha__secondary1,
+    dot2: theme.colors.__alpha__secondary2,
+    dot3: theme.colors.__alpha__secondary3,
+    dot4: theme.colors.__alpha__secondary4,
   };
 
   const space = {
-    spinnerDot: theme.space.medium,
-    spinnerDotPadding: theme.space.small,
-    spinnerTextPaddingTop: theme.space.small,
+    spinnerDot: {
+      small: theme.space.small,
+      medium: theme.space.medium,
+    },
+    spinnerDotPadding: {
+      small: theme.space.xsmall,
+      medium: theme.space.small,
+    },
+    spinnerTextPaddingTop: {
+      small: theme.space.xsmall,
+      medium: theme.space.small,
+    },
   };
 
   const radii = {
-    default: theme.radii.medium,
+    default: theme.radii.rounded,
   };
 
-  return { color, space, radii };
+  return { colors, space, radii };
 };
 
 export default getSpinnerTheme;

package/src/theme/components/switch.ts

@@ -1,10 +1,14 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getSwitchTheme = (theme: GlobalTheme) => {
   const colors = {
+    backgroundColors: {
+      checked: theme.colors.primary,
+      unchecked: theme.colors.globalPrimaryLight,
+      'disabled-checked': theme.colors.primaryLight,
+      'disabled-unchecked': theme.colors.archived,
+    },
     thumb: theme.colors.platformBackground,
-    active: theme.colors.primary,
-    inactive: theme.colors.inactiveBackground,
   };
 
   const thumbSizes = {
@@ -32,10 +36,6 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     rounded: theme.radii.rounded,
   };
 
-  const borderWidths = {
-    default: theme.borderWidths.base,
-  };
-
   return {
     colors,
     thumbSizes,
@@ -43,7 +43,6 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     heights,
     spaces,
     radii,
-    borderWidths,
   };
 };
 

package/src/theme/components/tabs.ts

@@ -1,10 +1,10 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getTabsTheme = (theme: GlobalTheme) => {
   const colors = {
-    active: theme.colors.primary,
+    active: theme.colors.text,
     inactive: theme.colors.text,
-    activeBackground: theme.colors.primaryBackground,
+    activeBackground: theme.colors.__alpha__secondary4,
     headerBottom: theme.colors.outline,
     text: theme.colors.text,
   };
@@ -13,6 +13,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
     flatListHorizontalPadding: theme.space.small,
     itemHorizontalPadding: theme.space.small,
     itemVerticalPadding: theme.space.small,
+    itemMargin: theme.space.smallMedium,
     outlineHorizontalPadding: theme.space.small,
     outlineVerticalPadding: theme.space.xsmall,
   };

package/src/theme/components/tag.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getTagTheme = (theme: GlobalTheme) => {
   const borderWidths = {
@@ -6,20 +6,20 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    default: theme.colors.text,
+    default: theme.colors.__alpha__globalPrimary,
     defaultBackground: undefined,
-    primary: theme.colors.primary,
-    primaryBackground: theme.colors.primaryBackground,
-    info: theme.colors.info,
-    infoBackground: theme.colors.infoBackground,
-    success: theme.colors.successDark,
-    successBackground: theme.colors.successBackground,
-    warning: theme.colors.warningDark,
-    warningBackground: theme.colors.warningBackground,
-    danger: theme.colors.danger,
-    dangerBackground: theme.colors.dangerBackground,
-    archived: theme.colors.archivedDark,
-    archivedBackground: theme.colors.archivedBackground,
+    primary: theme.colors.__alpha__globalPrimary,
+    primaryBackground: undefined,
+    info: theme.colors.__alpha__globalLabel4,
+    infoBackground: theme.colors.__alpha__globalLabel9,
+    success: theme.colors.__alpha__globalLabel3,
+    successBackground: theme.colors.__alpha__globalLabel8,
+    warning: theme.colors.__alpha__globalLabel2,
+    warningBackground: theme.colors.__alpha__globalLabel7,
+    danger: theme.colors.__alpha__globalLabel1,
+    dangerBackground: theme.colors.__alpha__globalLabel6,
+    archived: theme.colors.__alpha__globalLabel5,
+    archivedBackground: theme.colors.__alpha__globalNeutral3,
   };
 
   const fonts = {

package/src/theme/components/textInput.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getTextInputTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/toast.ts

@@ -1,5 +1,5 @@
 import { scale } from '../../utils/scale';
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getToastTheme = (theme: GlobalTheme) => {
   const colors = {
@@ -7,7 +7,10 @@ const getToastTheme = (theme: GlobalTheme) => {
     warning: theme.colors.warning,
     error: theme.colors.dangerLight,
     info: theme.colors.infoLight,
+    notification: theme.colors.platformBackground,
+    snackbar: theme.colors.backgroundDark,
     divider: theme.colors.outline,
+    shadow: theme.colors.backgroundDark,
   };
 
   const sizes = {
@@ -15,8 +18,12 @@ const getToastTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    mediumPadding: theme.space.medium,
-    largePadding: theme.space.large,
+    wrapperVerticalPadding: theme.space.large,
+    wrapperHorizontalPadding: theme.space.medium,
+    contentVerticalPadding: theme.space.smallMedium,
+    textHorizontalPadding: theme.space.smallMedium,
+    iconLeftPadding: theme.space.smallMedium,
+    ctaPadding: theme.space.smallMedium,
   };
 
   const radii = {
@@ -27,7 +34,14 @@ const getToastTheme = (theme: GlobalTheme) => {
     base: theme.borderWidths.base,
   };
 
-  return { colors, radii, sizes, space, borderWidths };
+  const shadows = {
+    offset: { width: 0, height: 2 },
+    opacity: 0.12,
+    radius: 4,
+    elevation: 4,
+  };
+
+  return { colors, radii, sizes, space, borderWidths, shadows };
 };
 
 export default getToastTheme;

package/src/theme/components/toolbar.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getToolbarTheme = (theme: GlobalTheme) => {
   const colors = {

package/src/theme/components/typography.ts

@@ -1,4 +1,4 @@
-import { GlobalTheme } from '../global';
+import type { GlobalTheme } from '../global';
 
 const getTypographyTheme = (theme: GlobalTheme) => {
   const colors = {
@@ -23,6 +23,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge,
+    xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
   };
 
@@ -31,6 +32,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,
     xlarge: theme.lineHeights.xlarge,
+    xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
   };
 

package/src/theme/getTheme.ts

@@ -1,11 +1,4 @@
-import {
-  GlobalTheme,
-  Scale,
-  SystemPalette,
-  getGlobalTheme,
-  defaultScale,
-  swagSystemPalette,
-} from './global';
+import { getGlobalTheme, defaultScale, swagSystemPalette } from './global';
 
 import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
@@ -40,6 +33,7 @@ import getTimePickerTheme from './components/timePicker';
 import getToastTheme from './components/toast';
 import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
+import type { GlobalTheme, Scale, SystemPalette } from './global';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -123,7 +117,6 @@ const getTheme = (
     },
   };
 };
-
-export { Theme };
-
 export default getTheme;
+
+export type { Theme };

package/src/theme/global/borders.ts

@@ -24,4 +24,5 @@ const getRadii = (baseRadius: number): Radii => ({
   xlarge: baseRadius * 4, // 16
 });
 
-export { BorderWidths, getBorderWidths, Radii, getRadii };
+export { getBorderWidths, getRadii };
+export type { BorderWidths, Radii };

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

@@ -2,15 +2,14 @@ import {
   defaultMobilePalette as palette,
   swagPalette,
 } from '@hero-design/colors';
-
-import { SystemPalette } from './types';
+import type { SystemPalette } from './types';
 
 const swagSystemPalette: SystemPalette = {
   globalPrimary: palette.maasstrichtBlue,
   globalPrimaryLight: palette.maasstrichtBlueLight50,
   globalPrimaryBackground: palette.maasstrichtBlueLight90,
   primary: swagPalette.violet,
-  primaryLight: swagPalette.violetLight50, // no longer needed after revising Button
+  primaryLight: swagPalette.violetLight50,
   primaryDark: swagPalette.scarletGumLight30, // DEPRECATED
   primaryBackground: swagPalette.violetLight90,
   primaryBackgroundDark: palette.maasstrichtBlueLight30,
@@ -49,6 +48,29 @@ const swagSystemPalette: SystemPalette = {
   black: palette.black,
   inactiveBackground: palette.maasstrichtBlueLight50,
   shadow: palette.greyLight45, // waiting for new color
+
+  __alpha__globalPrimary: palette.maasstrichtBlue,
+
+  __alpha__globalSecondary1: palette.maasstrichtBlueLight30,
+
+  __alpha__globalNeutral3: palette.greyLight90,
+
+  __alpha__globalLabel1: palette.vermilion,
+  __alpha__globalLabel2: palette.deepSaffron,
+  __alpha__globalLabel3: palette.pineGreen,
+  __alpha__globalLabel4: palette.ultramarineBlue,
+  __alpha__globalLabel5: palette.sonicSilver,
+  __alpha__globalLabel6: palette.linen,
+  __alpha__globalLabel7: palette.seashell,
+  __alpha__globalLabel8: palette.honeydew,
+  __alpha__globalLabel9: palette.aliceBlue,
+
+  __alpha__primary2: swagPalette.mauve,
+
+  __alpha__secondary1: swagPalette.scarletGumLight30,
+  __alpha__secondary2: swagPalette.scarletGumLight50,
+  __alpha__secondary3: swagPalette.scarletGumLight80,
+  __alpha__secondary4: swagPalette.scarletGumLight90,
 };
 
 export default swagSystemPalette;

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

@@ -42,4 +42,27 @@ export type SystemPalette = {
   black: string;
   inactiveBackground: string;
   shadow: string;
+
+  __alpha__globalPrimary: string;
+
+  __alpha__globalSecondary1: string;
+
+  __alpha__globalNeutral3: string;
+
+  __alpha__globalLabel1: string;
+  __alpha__globalLabel2: string;
+  __alpha__globalLabel3: string;
+  __alpha__globalLabel4: string;
+  __alpha__globalLabel5: string;
+  __alpha__globalLabel6: string;
+  __alpha__globalLabel7: string;
+  __alpha__globalLabel8: string;
+  __alpha__globalLabel9: string;
+
+  __alpha__primary2: string;
+
+  __alpha__secondary1: string;
+  __alpha__secondary2: string;
+  __alpha__secondary3: string;
+  __alpha__secondary4: string;
 };

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

@@ -1,7 +1,6 @@
 import { workPalette } from '@hero-design/colors';
-
-import { SystemPalette } from './types';
 import swag from './swag';
+import type { SystemPalette } from './types';
 
 const workSystemPalette: SystemPalette = {
   ...swag,
@@ -9,6 +8,11 @@ const workSystemPalette: SystemPalette = {
   primaryLight: workPalette.goldLight50,
   primaryDark: workPalette.goldLight20,
   primaryBackground: workPalette.goldLight90,
+
+  __alpha__secondary1: workPalette.goldLight20,
+  __alpha__secondary2: workPalette.goldLight50,
+  __alpha__secondary3: workPalette.goldLight70,
+  __alpha__secondary4: workPalette.goldLight90,
 };
 
 export default workSystemPalette;

package/src/theme/global/index.ts

@@ -1,11 +1,12 @@
-import { scale as defaultScale, Scale } from './scale';
-import { SystemPalette } from './colors/types';
+import { scale as defaultScale } from './scale';
 import swagSystemPalette from './colors/swag';
 import workSystemPalette from './colors/work';
 
 import { getFonts, getFontSizes, getLineHeights } from './typography';
 import { getSpace } from './space';
 import { getBorderWidths, getRadii } from './borders';
+import type { Scale } from './scale';
+import type { SystemPalette } from './colors/types';
 
 const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
   const fonts = getFonts(scale.font);
@@ -30,12 +31,6 @@ const getGlobalTheme = (scale: Scale, systemPalette: SystemPalette) => {
 
 type GlobalTheme = ReturnType<typeof getGlobalTheme>;
 
-export {
-  GlobalTheme,
-  Scale,
-  SystemPalette,
-  getGlobalTheme,
-  defaultScale,
-  swagSystemPalette,
-  workSystemPalette,
-};
+export type { GlobalTheme, Scale, SystemPalette };
+
+export { getGlobalTheme, defaultScale, swagSystemPalette, workSystemPalette };

package/src/theme/global/scale.ts

@@ -18,4 +18,5 @@ const scale = {
 
 type Scale = typeof scale;
 
-export { scale, Scale };
+export { scale };
+export type { Scale };

package/src/theme/global/space.ts

@@ -26,4 +26,5 @@ const getSpace = (baseSpace: number): Space => ({
   xxxxlarge: scale(baseSpace * 7), // 56
 });
 
-export { Space, getSpace };
+export { getSpace };
+export type { Space };

package/src/theme/global/typography.ts

@@ -69,11 +69,5 @@ const getLineHeights = (fontSizes: FontSizes): LineHeights => {
   };
 };
 
-export {
-  Fonts,
-  FontSizes,
-  LineHeights,
-  getFonts,
-  getFontSizes,
-  getLineHeights,
-};
+export { getFonts, getFontSizes, getLineHeights };
+export type { Fonts, FontSizes, LineHeights };

package/src/theme/index.ts

@@ -1,12 +1,15 @@
-import getTheme, { Theme } from './getTheme';
+import getTheme from './getTheme';
 import ThemeProvider, { useTheme } from './ThemeProvider';
 import ThemeSwitcher from './ThemeSwitcher';
 import { swagSystemPalette, workSystemPalette } from './global';
 
+import type { Theme } from './getTheme';
+
 const defaultTheme = getTheme();
 
+export type { Theme };
+
 export {
-  Theme,
   getTheme,
   ThemeProvider,
   ThemeSwitcher,

package/src/types.ts

@@ -1,16 +1,15 @@
-import { BottomNavigationTabType } from './components/BottomNavigation';
-import { IconName } from './components/Icon';
-import { SingleSelectProps, MultiSelectProps } from './components/Select';
-import { TabType } from './components/Tabs';
-import { TextInputProps } from './components/TextInput';
-import {
+import { ToolbarButtonName } from './components/RichTextEditor';
+import type { BottomNavigationTabType } from './components/BottomNavigation';
+import type { IconName } from './components/Icon';
+import type { SingleSelectProps, MultiSelectProps } from './components/Select';
+import type { TabType } from './components/Tabs';
+import type { TextInputProps } from './components/TextInput';
+import type {
   RichTextEditorRef,
   RichTextEditorProps,
-  ToolbarButtonName,
 } from './components/RichTextEditor';
-
-import { Theme } from './theme';
-import {
+import type { Theme } from './theme';
+import type {
   ListRenderOptionInfo,
   SectionListRenderOptionInfo,
 } from './components/Select/types';

package/testUtils/setup.tsx

@@ -68,3 +68,5 @@ jest.mock('react-native-webview', () => {
 });
 
 jest.mock('hero-editor/dist/app.js', () => ({ default: '' }));
+
+export {};

package/tsconfig.json

@@ -1,27 +1,11 @@
 {
+  "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "target": "esnext",
-    "declaration": true,
     "outDir": "types",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
+    "declaration": true,
     "jsx": "react-native",
-    "strict": true,
-    "allowUnreachableCode": false,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": true,
-    "types": [
-      "jest"
-    ]
+    "types": ["jest"]
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
-  "extends": "expo/tsconfig.base"
-}
+  "include": ["src"]
+}