@hero-design/rn 7.17.0 → 7.18.0

package/src/theme/components/badge.ts

@@ -6,7 +6,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     info: theme.colors.info,
     success: theme.colors.successDark,
     warning: theme.colors.warningDark,
-    archived: theme.colors.archived,
+    archived: theme.colors.archivedDark,
     text: theme.colors.invertedText,
   };
 

package/src/theme/components/button.ts

@@ -3,6 +3,7 @@ import { GlobalTheme } from '../global';
 const getButtonTheme = (theme: GlobalTheme) => {
   const fonts = {
     default: theme.fonts.semiBold,
+    utility: theme.fonts.regular,
   };
 
   const fontSize = {
@@ -21,9 +22,8 @@ const getButtonTheme = (theme: GlobalTheme) => {
 
   const space = {
     buttonPadding: theme.space.medium,
-    iconPadding: theme.space.small,
+    iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small,
-    utilityIconPadding: theme.space.smallMedium,
   };
 
   const sizes = {
@@ -36,8 +36,8 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    primary: theme.colors.primary,
-    pressedPrimary: theme.colors.primaryLight,
+    primary: theme.colors.globalPrimary,
+    pressedPrimary: theme.colors.globalPrimaryLight,
     secondary: theme.colors.secondary,
     pressedSecondary: theme.colors.secondaryLight,
     danger: theme.colors.danger,
@@ -49,16 +49,17 @@ const getButtonTheme = (theme: GlobalTheme) => {
     invertedText: theme.colors.invertedText,
     utilityBackground: theme.colors.backgroundLight,
     underlayColors: {
-      'filled-primary': theme.colors.primaryLight,
+      'filled-primary': theme.colors.globalPrimaryLight,
       'filled-secondary': theme.colors.secondaryLight,
       'filled-danger': theme.colors.dangerLight,
-      'outlined-primary': theme.colors.primaryBackground,
+      'outlined-primary': theme.colors.globalPrimaryBackground,
       'outlined-secondary': theme.colors.secondaryBackground,
+
       'outlined-danger': theme.colors.dangerBackground,
-      'text-primary': theme.colors.primaryBackground,
+      'text-primary': theme.colors.globalPrimaryBackground,
       'text-secondary': theme.colors.secondaryBackground,
       'text-danger': theme.colors.dangerBackground,
-      'basic-transparent': theme.colors.primaryLight,
+      'basic-transparent': theme.colors.globalPrimaryLight,
     },
   };
 

package/src/theme/components/card.ts

@@ -2,12 +2,12 @@ import { GlobalTheme } from '../global';
 
 const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
-    dataCardIndicator: theme.colors.primaryDark,
+    dataCardIndicator: theme.colors.primary,
     indicator: {
       archived: theme.colors.archivedLight,
-      info: theme.colors.infoMediumLight,
-      success: theme.colors.successLight,
-      warning: theme.colors.warningLight,
+      info: theme.colors.infoLight,
+      success: theme.colors.success,
+      warning: theme.colors.warning,
       danger: theme.colors.dangerMediumLight,
     },
   };

package/src/theme/components/drawer.ts

@@ -1,14 +1,26 @@
 import { GlobalTheme } from '../global';
+import { scale } from '../../utils/scale';
 
 const getDrawerTheme = (theme: GlobalTheme) => {
   const colors = {
     shadow: theme.colors.backgroundDark,
     background: theme.colors.platformBackground,
     backdrop: theme.colors.backgroundDark,
+    handler: theme.colors.backgroundDark,
   };
 
   const radii = {
-    default: 16,
+    default: theme.radii.xlarge,
+    handler: theme.radii.base,
+  };
+
+  const space = {
+    handlerPaddingVertical: theme.space.small,
+  };
+
+  const sizes = {
+    handlerWidth: scale(56),
+    handlerHeight: scale(4),
   };
 
   const shadows = {
@@ -18,7 +30,7 @@ const getDrawerTheme = (theme: GlobalTheme) => {
     elevation: 10,
   };
 
-  return { colors, radii, shadows };
+  return { colors, radii, shadows, space, sizes };
 };
 
 export default getDrawerTheme;

package/src/theme/components/empty.ts

@@ -3,8 +3,9 @@ import { GlobalTheme } from '../global';
 
 const getEmptyTheme = (theme: GlobalTheme) => {
   const space = {
-    medium: theme.space.medium,
-    large: theme.space.large,
+    titleMargin: theme.space.medium,
+    illustrationMargin: theme.space.large,
+    wrapperPadding: theme.space.medium,
   };
 
   const sizes = {

package/src/theme/components/list.ts

@@ -6,11 +6,11 @@ const getListTheme = (theme: GlobalTheme) => {
     highlightedListItemContainerBackground: theme.colors.primaryBackground,
     listItemContainerBackground: theme.colors.platformBackground,
     leadingStatus: {
-      danger: theme.colors.danger,
+      danger: theme.colors.dangerMediumLight,
       info: theme.colors.infoLight,
-      success: theme.colors.successDark,
-      warning: theme.colors.warningLight,
-      archived: theme.colors.archived,
+      success: theme.colors.success,
+      warning: theme.colors.warning,
+      archived: theme.colors.archivedLight,
     },
   };
 

package/src/theme/components/pinInput.ts

@@ -8,8 +8,8 @@ const getPinInputTheme = (theme: GlobalTheme) => {
 
   const colors = {
     default: theme.colors.text,
-    mask: theme.colors.subduedText, // should be Maastricht Blue light 50
-    error: theme.colors.danger, // using this so that the color is the same as danger Icon, should be Vermilion
+    mask: theme.colors.subduedText,
+    error: theme.colors.danger,
     disabled: theme.colors.archivedLight,
   };
 

package/src/theme/components/progress.ts

@@ -1,10 +1,11 @@
+import { scale } from '../../utils/scale';
 import { GlobalTheme } from '../global';
 
 const getProgressTheme = (theme: GlobalTheme) => {
   const colors = {
     primary: theme.colors.primary,
-    success: theme.colors.success,
-    warning: theme.colors.warning,
+    success: theme.colors.success, // should be emerald dark 15
+    warning: theme.colors.warningDark,
     danger: theme.colors.danger,
     info: theme.colors.info,
     background: theme.colors.outline,
@@ -12,9 +13,8 @@ const getProgressTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    radius: theme.space.xxxlarge,
-    strokeWidth: theme.space.small,
-    barHeight: theme.space.xsmall,
+    circleWidth: scale(76),
+    barHeight: scale(4),
   };
 
   const radii = {

package/src/theme/components/toast.ts

@@ -5,9 +5,9 @@ const getToastTheme = (theme: GlobalTheme) => {
   const colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.danger,
-    info: theme.colors.infoMediumLight,
-    divider: theme.colors.backgroundLight,
+    error: theme.colors.dangerLight,
+    info: theme.colors.infoLight,
+    divider: theme.colors.outline,
   };
 
   const sizes = {

package/src/theme/getTheme.ts

@@ -0,0 +1,129 @@
+import {
+  GlobalTheme,
+  Scale,
+  SystemPalette,
+  getGlobalTheme,
+  defaultScale,
+  swagSystemPalette,
+} from './global';
+
+import getAccordionTheme from './components/accordion';
+import getAlertTheme from './components/alert';
+import getAvatarTheme from './components/avatar';
+import getBadgeTheme from './components/badge';
+import getBottomNavigationTheme from './components/bottomNavigation';
+import getBottomSheetTheme from './components/bottomSheet';
+import getButtonTheme from './components/button';
+import getCalendarTheme from './components/calendar';
+import getCardTheme from './components/card';
+import getCheckboxTheme from './components/checkbox';
+import getContentNavigatorTheme from './components/contentNavigator';
+import getDatePickerTheme from './components/datePicker';
+import getDividerTheme from './components/divider';
+import getDrawerTheme from './components/drawer';
+import getEmptyTheme from './components/empty';
+import getFABTheme from './components/fab';
+import getIconTheme from './components/icon';
+import getListTheme from './components/list';
+import getPinInputTheme from './components/pinInput';
+import getProgressTheme from './components/progress';
+import getRadioTheme from './components/radio';
+import getRichTextEditorTheme from './components/richTextEditor';
+import getSectionHeadingTheme from './components/sectionHeading';
+import getSelectTheme from './components/select';
+import getSpinnerTheme from './components/spinner';
+import getSwitchTheme from './components/switch';
+import getTabsTheme from './components/tabs';
+import getTagTheme from './components/tag';
+import getTextInputTheme from './components/textInput';
+import getTimePickerTheme from './components/timePicker';
+import getToastTheme from './components/toast';
+import getToolbarTheme from './components/toolbar';
+import getTypographyTheme from './components/typography';
+
+type Theme = GlobalTheme & {
+  __hd__: {
+    accordion: ReturnType<typeof getAccordionTheme>;
+    alert: ReturnType<typeof getAlertTheme>;
+    avatar: ReturnType<typeof getAvatarTheme>;
+    badge: ReturnType<typeof getBadgeTheme>;
+    bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
+    bottomSheet: ReturnType<typeof getBottomSheetTheme>;
+    button: ReturnType<typeof getButtonTheme>;
+    calendar: ReturnType<typeof getCalendarTheme>;
+    card: ReturnType<typeof getCardTheme>;
+    checkbox: ReturnType<typeof getCheckboxTheme>;
+    contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
+    datePicker: ReturnType<typeof getDatePickerTheme>;
+    divider: ReturnType<typeof getDividerTheme>;
+    drawer: ReturnType<typeof getDrawerTheme>;
+    empty: ReturnType<typeof getEmptyTheme>;
+    fab: ReturnType<typeof getFABTheme>;
+    icon: ReturnType<typeof getIconTheme>;
+    list: ReturnType<typeof getListTheme>;
+    pinInput: ReturnType<typeof getPinInputTheme>;
+    progress: ReturnType<typeof getProgressTheme>;
+    radio: ReturnType<typeof getRadioTheme>;
+    richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
+    sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
+    select: ReturnType<typeof getSelectTheme>;
+    spinner: ReturnType<typeof getSpinnerTheme>;
+    switch: ReturnType<typeof getSwitchTheme>;
+    tabs: ReturnType<typeof getTabsTheme>;
+    tag: ReturnType<typeof getTagTheme>;
+    textInput: ReturnType<typeof getTextInputTheme>;
+    timePicker: ReturnType<typeof getTimePickerTheme>;
+    toast: ReturnType<typeof getToastTheme>;
+    toolbar: ReturnType<typeof getToolbarTheme>;
+    typography: ReturnType<typeof getTypographyTheme>;
+  };
+};
+
+const getTheme = (
+  scale: Scale = defaultScale,
+  systemPallete: SystemPalette = swagSystemPalette
+): Theme => {
+  const globalTheme = getGlobalTheme(scale, systemPallete);
+  return {
+    ...globalTheme,
+    __hd__: {
+      accordion: getAccordionTheme(globalTheme),
+      avatar: getAvatarTheme(globalTheme),
+      alert: getAlertTheme(globalTheme),
+      badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
+      bottomSheet: getBottomSheetTheme(globalTheme),
+      button: getButtonTheme(globalTheme),
+      calendar: getCalendarTheme(globalTheme),
+      card: getCardTheme(globalTheme),
+      checkbox: getCheckboxTheme(globalTheme),
+      contentNavigator: getContentNavigatorTheme(globalTheme),
+      datePicker: getDatePickerTheme(),
+      divider: getDividerTheme(globalTheme),
+      drawer: getDrawerTheme(globalTheme),
+      empty: getEmptyTheme(globalTheme),
+      fab: getFABTheme(globalTheme),
+      icon: getIconTheme(globalTheme),
+      list: getListTheme(globalTheme),
+      pinInput: getPinInputTheme(globalTheme),
+      progress: getProgressTheme(globalTheme),
+      radio: getRadioTheme(globalTheme),
+      richTextEditor: getRichTextEditorTheme(globalTheme),
+      sectionHeading: getSectionHeadingTheme(globalTheme),
+      select: getSelectTheme(globalTheme),
+      spinner: getSpinnerTheme(globalTheme),
+      switch: getSwitchTheme(globalTheme),
+      tabs: getTabsTheme(globalTheme),
+      tag: getTagTheme(globalTheme),
+      textInput: getTextInputTheme(globalTheme),
+      timePicker: getTimePickerTheme(),
+      toast: getToastTheme(globalTheme),
+      toolbar: getToolbarTheme(globalTheme),
+      typography: getTypographyTheme(globalTheme),
+    },
+  };
+};
+
+export { Theme };
+
+export default getTheme;

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

@@ -0,0 +1,54 @@
+import {
+  defaultMobilePalette as palette,
+  swagPalette,
+} from '@hero-design/colors';
+
+import { 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
+  primaryDark: swagPalette.scarletGumLight30, // DEPRECATED
+  primaryBackground: swagPalette.violetLight90,
+  primaryBackgroundDark: palette.maasstrichtBlueLight30,
+  secondary: swagPalette.ultramarineBlue, // no longer needed after revising Button
+  secondaryLight: swagPalette.vodka, // no longer needed after revising Button
+  secondaryBackground: swagPalette.aliceBlue, // no longer needed after revising Button
+  info: palette.ultramarineBlue,
+  infoMediumLight: palette.vodka, // DEPRECATED, use infoLight instead
+  infoLight: palette.vodka,
+  infoBackground: palette.aliceBlue,
+  success: palette.emerald,
+  successLight: palette.emerald, // DEPRECATED, use success instead
+  successDark: palette.pineGreen,
+  successBackground: palette.honeydew,
+  danger: palette.vermilion,
+  dangerMediumLight: palette.apple, // should be dangerDark?
+  dangerLight: palette.pastelRed,
+  dangerBackground: palette.linen,
+  warning: palette.mellowApricot,
+  warningLight: palette.mellowApricot, // DEPRECATED, use warning instead
+  warningDark: palette.deepSaffron,
+  warningBackground: palette.seashell,
+  platformBackground: palette.white,
+  backgroundLight: palette.greyLight90,
+  backgroundDark: palette.maasstrichtBlue,
+  text: palette.maasstrichtBlue,
+  subduedText: palette.maasstrichtBlueLight30, // secondary
+  disabledText: palette.maasstrichtBlueLight50, // readonly
+  disabledLightText: palette.greyLight30, // disabled
+  invertedText: palette.white,
+  outline: palette.greyLight75, // divider
+  archived: palette.greyLight45, // no usage
+  archivedLight: palette.greyLight30,
+  archivedDark: palette.sonicSilver, // should replace archived as archived has no usage?
+  archivedBackground: palette.greyLight90,
+  black: palette.black,
+  inactiveBackground: palette.maasstrichtBlueLight50,
+  shadow: palette.greyLight45, // waiting for new color
+};
+
+export default swagSystemPalette;

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

@@ -0,0 +1,45 @@
+export type SystemPalette = {
+  globalPrimary: string;
+  globalPrimaryLight: string;
+  globalPrimaryBackground: string;
+  primary: string;
+  primaryLight: string;
+  primaryDark: string;
+  primaryBackground: string;
+  primaryBackgroundDark: string;
+  secondary: string;
+  secondaryLight: string;
+  secondaryBackground: string;
+  info: string;
+  infoMediumLight: string;
+  infoLight: string;
+  infoBackground: string;
+  success: string;
+  successLight: string;
+  successDark: string;
+  successBackground: string;
+  danger: string;
+  dangerMediumLight: string;
+  dangerLight: string;
+  dangerBackground: string;
+  warning: string;
+  warningLight: string;
+  warningDark: string;
+  warningBackground: string;
+  platformBackground: string;
+  backgroundLight: string;
+  backgroundDark: string;
+  text: string;
+  subduedText: string;
+  disabledText: string;
+  disabledLightText: string;
+  invertedText: string;
+  outline: string;
+  archived: string;
+  archivedLight: string;
+  archivedDark: string;
+  archivedBackground: string;
+  black: string;
+  inactiveBackground: string;
+  shadow: string;
+};

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

@@ -0,0 +1,14 @@
+import { workPalette } from '@hero-design/colors';
+
+import { SystemPalette } from './types';
+import swag from './swag';
+
+const workSystemPalette: SystemPalette = {
+  ...swag,
+  primary: workPalette.gold,
+  primaryLight: workPalette.goldLight50,
+  primaryDark: workPalette.goldLight20,
+  primaryBackground: workPalette.goldLight90,
+};
+
+export default workSystemPalette;

package/src/theme/global/index.ts

@@ -1,5 +1,8 @@
 import { scale as defaultScale, Scale } from './scale';
-import { systemPalette as defaultSystemPalette, SystemPalette } from './colors';
+import { SystemPalette } from './colors/types';
+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';
@@ -33,5 +36,6 @@ export {
   SystemPalette,
   getGlobalTheme,
   defaultScale,
-  defaultSystemPalette,
+  swagSystemPalette,
+  workSystemPalette,
 };

package/src/theme/index.ts

@@ -1,145 +1,18 @@
-import * as Emotion from '@emotion/react';
-
-import {
-  GlobalTheme,
-  Scale,
-  SystemPalette,
-  getGlobalTheme,
-  defaultScale,
-  defaultSystemPalette,
-} from './global';
-
-import getAccordionTheme from './components/accordion';
-import getAlertTheme from './components/alert';
-import getAvatarTheme from './components/avatar';
-import getBadgeTheme from './components/badge';
-import getBottomNavigationTheme from './components/bottomNavigation';
-import getBottomSheetTheme from './components/bottomSheet';
-import getButtonTheme from './components/button';
-import getCalendarTheme from './components/calendar';
-import getCardTheme from './components/card';
-import getCheckboxTheme from './components/checkbox';
-import getContentNavigatorTheme from './components/contentNavigator';
-import getDatePickerTheme from './components/datePicker';
-import getDividerTheme from './components/divider';
-import getDrawerTheme from './components/drawer';
-import getEmptyTheme from './components/empty';
-import getFABTheme from './components/fab';
-import getIconTheme from './components/icon';
-import getListTheme from './components/list';
-import getPinInputTheme from './components/pinInput';
-import getProgressTheme from './components/progress';
-import getRadioTheme from './components/radio';
-import getRichTextEditorTheme from './components/richTextEditor';
-import getSectionHeadingTheme from './components/sectionHeading';
-import getSelectTheme from './components/select';
-import getSpinnerTheme from './components/spinner';
-import getSwitchTheme from './components/switch';
-import getTabsTheme from './components/tabs';
-import getTagTheme from './components/tag';
-import getTextInputTheme from './components/textInput';
-import getTimePickerTheme from './components/timePicker';
-import getToastTheme from './components/toast';
-import getToolbarTheme from './components/toolbar';
-import getTypographyTheme from './components/typography';
-
-type Theme = GlobalTheme & {
-  __hd__: {
-    accordion: ReturnType<typeof getAccordionTheme>;
-    alert: ReturnType<typeof getAlertTheme>;
-    avatar: ReturnType<typeof getAvatarTheme>;
-    badge: ReturnType<typeof getBadgeTheme>;
-    bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
-    bottomSheet: ReturnType<typeof getBottomSheetTheme>;
-    button: ReturnType<typeof getButtonTheme>;
-    calendar: ReturnType<typeof getCalendarTheme>;
-    card: ReturnType<typeof getCardTheme>;
-    checkbox: ReturnType<typeof getCheckboxTheme>;
-    contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
-    datePicker: ReturnType<typeof getDatePickerTheme>;
-    divider: ReturnType<typeof getDividerTheme>;
-    drawer: ReturnType<typeof getDrawerTheme>;
-    empty: ReturnType<typeof getEmptyTheme>;
-    fab: ReturnType<typeof getFABTheme>;
-    icon: ReturnType<typeof getIconTheme>;
-    list: ReturnType<typeof getListTheme>;
-    pinInput: ReturnType<typeof getPinInputTheme>;
-    progress: ReturnType<typeof getProgressTheme>;
-    radio: ReturnType<typeof getRadioTheme>;
-    richTextEditor: ReturnType<typeof getRichTextEditorTheme>;
-    sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
-    select: ReturnType<typeof getSelectTheme>;
-    spinner: ReturnType<typeof getSpinnerTheme>;
-    switch: ReturnType<typeof getSwitchTheme>;
-    tabs: ReturnType<typeof getTabsTheme>;
-    tag: ReturnType<typeof getTagTheme>;
-    textInput: ReturnType<typeof getTextInputTheme>;
-    timePicker: ReturnType<typeof getTimePickerTheme>;
-    toast: ReturnType<typeof getToastTheme>;
-    toolbar: ReturnType<typeof getToolbarTheme>;
-    typography: ReturnType<typeof getTypographyTheme>;
-  };
-};
-
-const getTheme = (
-  scale: Scale = defaultScale,
-  systemPallete: SystemPalette = defaultSystemPalette
-): Theme => {
-  const globalTheme = getGlobalTheme(scale, systemPallete);
-  return {
-    ...globalTheme,
-    __hd__: {
-      accordion: getAccordionTheme(globalTheme),
-      avatar: getAvatarTheme(globalTheme),
-      alert: getAlertTheme(globalTheme),
-      badge: getBadgeTheme(globalTheme),
-      bottomNavigation: getBottomNavigationTheme(globalTheme),
-      bottomSheet: getBottomSheetTheme(globalTheme),
-      button: getButtonTheme(globalTheme),
-      calendar: getCalendarTheme(globalTheme),
-      card: getCardTheme(globalTheme),
-      checkbox: getCheckboxTheme(globalTheme),
-      contentNavigator: getContentNavigatorTheme(globalTheme),
-      datePicker: getDatePickerTheme(),
-      divider: getDividerTheme(globalTheme),
-      drawer: getDrawerTheme(globalTheme),
-      empty: getEmptyTheme(globalTheme),
-      fab: getFABTheme(globalTheme),
-      icon: getIconTheme(globalTheme),
-      list: getListTheme(globalTheme),
-      pinInput: getPinInputTheme(globalTheme),
-      progress: getProgressTheme(globalTheme),
-      radio: getRadioTheme(globalTheme),
-      richTextEditor: getRichTextEditorTheme(globalTheme),
-      sectionHeading: getSectionHeadingTheme(globalTheme),
-      select: getSelectTheme(globalTheme),
-      spinner: getSpinnerTheme(globalTheme),
-      switch: getSwitchTheme(globalTheme),
-      tabs: getTabsTheme(globalTheme),
-      tag: getTagTheme(globalTheme),
-      textInput: getTextInputTheme(globalTheme),
-      timePicker: getTimePickerTheme(),
-      toast: getToastTheme(globalTheme),
-      toolbar: getToolbarTheme(globalTheme),
-      typography: getTypographyTheme(globalTheme),
-    },
-  };
+import getTheme, { Theme } from './getTheme';
+import ThemeProvider, { useTheme } from './ThemeProvider';
+import ThemeSwitcher from './ThemeSwitcher';
+import { swagSystemPalette, workSystemPalette } from './global';
+
+const defaultTheme = getTheme();
+
+export {
+  Theme,
+  getTheme,
+  ThemeProvider,
+  ThemeSwitcher,
+  useTheme,
+  swagSystemPalette,
+  workSystemPalette,
 };
 
-const theme = getTheme();
-
-export interface ThemeProviderProps {
-  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
-  children: React.ReactNode;
-}
-
-interface ThemeProviderType {
-  (props: ThemeProviderProps): React.ReactElement;
-}
-
-const ThemeProvider = Emotion.ThemeProvider as ThemeProviderType;
-
-const useTheme = Emotion.useTheme as () => Theme;
-export { Theme, getTheme, ThemeProvider, useTheme };
-
-export default theme;
+export default defaultTheme;

package/src/utils/scale.ts

@@ -1,8 +1,11 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 
 export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
 export const horizontalScale = (size: number) => {
+  if (Platform.OS === 'web') {
+    return size;
+  }
   const { width, height } = Dimensions.get('window');
   const shortDimension = width < height ? width : height;
 

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

@@ -49,6 +49,7 @@ export interface ButtonProps {
     text: ReactChild;
     /**
      * Button type.
+     * basic-transparent is deprecated and will be removed in the next major release.
      */
     variant?: 'basic-transparent' | 'filled' | 'outlined' | 'text';
 }

package/types/components/Drawer/DragableDrawer/__tests__/helpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Drawer/DragableDrawer/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Drawer/DragableDrawer/helpers.d.ts

@@ -0,0 +1,8 @@
+export declare const getOffset: (height: number, percentage: number) => number;
+export declare type SnapPointsData = {
+    list: number[];
+    minHeightOffset: number;
+    maxHeightOffset: number;
+};
+export declare const calculateSnapPointsData: (minimumHeight: number, height: number, snapPoints: number[]) => SnapPointsData;
+export declare const calculateAnimatedToValue: (position: number, heightSnapPoints: number[]) => number;