@hero-design/rn 7.17.0 → 7.18.0

package/src/theme/ThemeProvider.ts

@@ -0,0 +1,19 @@
+import * as Emotion from '@emotion/react';
+import { Theme } from './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 { useTheme };
+
+export default ThemeProvider;

package/src/theme/ThemeSwitcher.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+
+import getTheme from './getTheme';
+import { defaultScale, swagSystemPalette, workSystemPalette } from './global';
+import ThemeProvider from './ThemeProvider';
+
+type ThemeName = 'swag' | 'work';
+
+const ThemeSwitcher = ({
+  name = 'swag',
+  children,
+}: {
+  name?: ThemeName;
+  children: React.ReactNode;
+}) => {
+  const theme = useMemo(() => {
+    switch (name) {
+      case 'swag':
+        return getTheme(defaultScale, swagSystemPalette);
+      case 'work':
+        return getTheme(defaultScale, workSystemPalette);
+    }
+  }, [name]);
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export default ThemeSwitcher;

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

@@ -19,11 +19,11 @@ Object {
         "base": 1,
       },
       "colors": Object {
-        "divider": "#fafbfb",
-        "error": "#de350b",
+        "divider": "#e8e9ea",
+        "error": "#f46363",
         "info": "#b5c3fd",
-        "success": "#01b39c",
-        "warning": "#ffa234",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "radii": Object {
         "default": 16,
@@ -42,9 +42,9 @@ Object {
       "colors": Object {
         "danger": "#de350b",
         "info": "#4568fb",
-        "primary": "#7622d7",
-        "success": "#01b39c",
-        "warning": "#ffa234",
+        "primary": "#8505a2",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "fontSizes": Object {
         "large": 20,
@@ -70,12 +70,12 @@ Object {
     },
     "badge": Object {
       "colors": Object {
-        "archived": "#ccced1",
+        "archived": "#737479",
         "danger": "#de350b",
         "info": "#4568fb",
         "success": "#017d6d",
         "text": "#ffffff",
-        "warning": "#d98a2c",
+        "warning": "#ffa234",
       },
       "fontSizes": Object {
         "default": 12,
@@ -98,7 +98,7 @@ Object {
     "bottomNavigation": Object {
       "colors": Object {
         "background": "#ffffff",
-        "shadow": "#292a2b",
+        "shadow": "#001f23",
       },
       "shadows": Object {
         "elevation": 10,
@@ -118,9 +118,9 @@ Object {
     },
     "bottomSheet": Object {
       "colors": Object {
-        "backdrop": "#292a2b",
+        "backdrop": "#001f23",
         "background": "#ffffff",
-        "shadow": "#292a2b",
+        "shadow": "#001f23",
       },
       "radii": Object {
         "default": 16,
@@ -152,29 +152,29 @@ Object {
       },
       "colors": Object {
         "danger": "#de350b",
-        "defaultText": "#292a2b",
-        "disabledBackground": "#ccced1",
-        "disabledBorder": "#ccced1",
-        "disabledText": "#ccced1",
+        "defaultText": "#001f23",
+        "disabledBackground": "#bfc1c5",
+        "disabledBorder": "#bfc1c5",
+        "disabledText": "#bfc1c5",
         "invertedText": "#ffffff",
-        "pressedDanger": "#f2ae9d",
-        "pressedPrimary": "#c8a7ef",
-        "pressedSecondary": "#d1d9fe",
-        "primary": "#7622d7",
+        "pressedDanger": "#f46363",
+        "pressedPrimary": "#808f91",
+        "pressedSecondary": "#b5c3fd",
+        "primary": "#001f23",
         "secondary": "#4568fb",
         "underlayColors": Object {
-          "basic-transparent": "#c8a7ef",
-          "filled-danger": "#f2ae9d",
-          "filled-primary": "#c8a7ef",
-          "filled-secondary": "#d1d9fe",
+          "basic-transparent": "#808f91",
+          "filled-danger": "#f46363",
+          "filled-primary": "#808f91",
+          "filled-secondary": "#b5c3fd",
           "outlined-danger": "#fcebe7",
-          "outlined-primary": "#f1e9fb",
+          "outlined-primary": "#e6e9e9",
           "outlined-secondary": "#ecf0ff",
           "text-danger": "#fcebe7",
-          "text-primary": "#f1e9fb",
+          "text-primary": "#e6e9e9",
           "text-secondary": "#ecf0ff",
         },
-        "utilityBackground": "#fafbfb",
+        "utilityBackground": "#f6f6f7",
       },
       "fontSize": Object {
         "default": 18,
@@ -183,6 +183,7 @@ Object {
       },
       "fonts": Object {
         "default": "BeVietnamPro-SemiBold",
+        "utility": "BeVietnamPro-Regular",
       },
       "lineHeight": Object {
         "default": 24,
@@ -196,17 +197,16 @@ Object {
       },
       "space": Object {
         "buttonPadding": 16,
-        "iconPadding": 8,
-        "utilityIconPadding": 12,
+        "iconPadding": 12,
         "utilityPadding": 8,
       },
     },
     "calendar": Object {
       "colors": Object {
-        "background": "#fafbfb",
-        "border": "#292a2b",
+        "background": "#f6f6f7",
+        "border": "#001f23",
         "inverted": "#ffffff",
-        "primary": "#7622d7",
+        "primary": "#8505a2",
       },
       "radii": Object {
         "default": 999,
@@ -227,7 +227,7 @@ Object {
     },
     "card": Object {
       "colors": Object {
-        "dataCardIndicator": "#a26fb0",
+        "dataCardIndicator": "#8505a2",
         "indicator": Object {
           "archived": "#bfc1c5",
           "danger": "#e3602a",
@@ -248,8 +248,8 @@ Object {
         "default": 2,
       },
       "colors": Object {
-        "borderColor": "#7622d7",
-        "disabled": "#727478",
+        "borderColor": "#8505a2",
+        "disabled": "#808f91",
         "text": "#ffffff",
       },
       "radii": Object {
@@ -277,7 +277,7 @@ Object {
         "default": 1,
       },
       "colors": Object {
-        "default": "#dadbde",
+        "default": "#e8e9ea",
       },
       "space": Object {
         "large": 24,
@@ -289,12 +289,14 @@ Object {
     },
     "drawer": Object {
       "colors": Object {
-        "backdrop": "#292a2b",
+        "backdrop": "#001f23",
         "background": "#ffffff",
-        "shadow": "#292a2b",
+        "handler": "#001f23",
+        "shadow": "#001f23",
       },
       "radii": Object {
         "default": 16,
+        "handler": 4,
       },
       "shadows": Object {
         "elevation": 10,
@@ -305,13 +307,20 @@ Object {
         "opacity": 0.27,
         "radius": 4.65,
       },
+      "sizes": Object {
+        "handlerHeight": 4,
+        "handlerWidth": 56,
+      },
+      "space": Object {
+        "handlerPaddingVertical": 8,
+      },
     },
     "empty": Object {
       "colors": Object {
-        "illustrationBackground": "#dadbde",
+        "illustrationBackground": "#ccced1",
         "invertedText": "#ffffff",
-        "subduedText": "#727478",
-        "text": "#292a2b",
+        "subduedText": "#4d6265",
+        "text": "#001f23",
       },
       "fontSizes": Object {
         "description": 16,
@@ -328,16 +337,17 @@ Object {
         "illustration": 168,
       },
       "space": Object {
-        "large": 24,
-        "medium": 16,
+        "illustrationMargin": 24,
+        "titleMargin": 16,
+        "wrapperPadding": 16,
       },
     },
     "fab": Object {
       "colors": Object {
         "actionItemBackground": "#4d6265",
         "actionItemText": "#ffffff",
-        "backdropBackground": "#292a2b",
-        "buttonBackground": "#292a2b",
+        "backdropBackground": "#001f23",
+        "buttonBackground": "#001f23",
         "headerText": "#ffffff",
         "icon": "#ffffff",
         "titleText": "#ffffff",
@@ -385,13 +395,13 @@ Object {
     "icon": Object {
       "colors": Object {
         "danger": "#de350b",
-        "disabledText": "#8b8d92",
+        "disabledText": "#808f91",
         "info": "#4568fb",
         "invertedText": "#ffffff",
-        "primary": "#7622d7",
-        "success": "#01b39c",
-        "text": "#292a2b",
-        "warning": "#ffa234",
+        "primary": "#8505a2",
+        "success": "#5ace7d",
+        "text": "#001f23",
+        "warning": "#ffbe71",
       },
       "sizes": Object {
         "large": 28,
@@ -403,13 +413,13 @@ Object {
     },
     "list": Object {
       "colors": Object {
-        "checkedListItemContainerBackground": "#f1e9fb",
-        "highlightedListItemContainerBackground": "#f1e9fb",
+        "checkedListItemContainerBackground": "#f3e6f6",
+        "highlightedListItemContainerBackground": "#f3e6f6",
         "leadingStatus": Object {
-          "archived": "#ccced1",
-          "danger": "#de350b",
-          "info": "#d1d9fe",
-          "success": "#017d6d",
+          "archived": "#bfc1c5",
+          "danger": "#e3602a",
+          "info": "#b5c3fd",
+          "success": "#5ace7d",
           "warning": "#ffbe71",
         },
         "listItemContainerBackground": "#ffffff",
@@ -446,10 +456,10 @@ Object {
         "focused": 2,
       },
       "colors": Object {
-        "default": "#292a2b",
+        "default": "#001f23",
         "disabled": "#bfc1c5",
         "error": "#de350b",
-        "mask": "#727478",
+        "mask": "#4d6265",
       },
       "fontSizes": Object {
         "cellText": 28,
@@ -475,12 +485,12 @@ Object {
     },
     "progress": Object {
       "colors": Object {
-        "background": "#dadbde",
+        "background": "#e8e9ea",
         "danger": "#de350b",
         "info": "#4568fb",
         "innerBackground": "#ffffff",
-        "primary": "#7622d7",
-        "success": "#01b39c",
+        "primary": "#8505a2",
+        "success": "#5ace7d",
         "warning": "#ffa234",
       },
       "radii": Object {
@@ -488,8 +498,7 @@ Object {
       },
       "sizes": Object {
         "barHeight": 4,
-        "radius": 48,
-        "strokeWidth": 8,
+        "circleWidth": 76,
       },
     },
     "radio": Object {
@@ -497,8 +506,8 @@ Object {
         "circle": 2,
       },
       "colors": Object {
-        "checkedCircle": "#7622d7",
-        "checkedWrapper": "#f1e9fb",
+        "checkedCircle": "#8505a2",
+        "checkedWrapper": "#f3e6f6",
         "circle": "#000000",
         "wrapper": "#ffffff",
       },
@@ -520,9 +529,9 @@ Object {
         "webViewBorderBottomWidth": 0.8,
       },
       "colors": Object {
-        "toolbarBackgroundColor": "#fafbfb",
-        "toolbarBorderColor": "#dadbde",
-        "toolbarButtonSelectedBackground": "#dadbde",
+        "toolbarBackgroundColor": "#f6f6f7",
+        "toolbarBorderColor": "#e8e9ea",
+        "toolbarButtonSelectedBackground": "#e8e9ea",
       },
       "fontSizes": Object {
         "editor": 14,
@@ -541,7 +550,7 @@ Object {
     },
     "sectionHeading": Object {
       "colors": Object {
-        "background": "#dadbde",
+        "background": "#e8e9ea",
       },
       "space": Object {
         "headingHorizontalPadding": 16,
@@ -552,7 +561,7 @@ Object {
     },
     "select": Object {
       "colors": Object {
-        "footerText": "#7622d7",
+        "footerText": "#8505a2",
       },
       "radii": Object {
         "option": 4,
@@ -569,7 +578,7 @@ Object {
     },
     "spinner": Object {
       "color": Object {
-        "default": "#7622d7",
+        "default": "#8505a2",
       },
       "radii": Object {
         "default": 8,
@@ -585,8 +594,8 @@ Object {
         "default": 1,
       },
       "colors": Object {
-        "active": "#7622d7",
-        "inactive": "#727478",
+        "active": "#8505a2",
+        "inactive": "#808f91",
         "thumb": "#ffffff",
       },
       "heights": Object {
@@ -615,11 +624,11 @@ Object {
         "headerBottom": 1,
       },
       "colors": Object {
-        "active": "#7622d7",
-        "activeBackground": "#f1e9fb",
-        "headerBottom": "#dadbde",
-        "inactive": "#292a2b",
-        "text": "#292a2b",
+        "active": "#8505a2",
+        "activeBackground": "#f3e6f6",
+        "headerBottom": "#e8e9ea",
+        "inactive": "#001f23",
+        "text": "#001f23",
       },
       "radii": Object {
         "outline": 8,
@@ -641,19 +650,19 @@ Object {
       },
       "colors": Object {
         "archived": "#737479",
-        "archivedBackground": "#f1f2f3",
+        "archivedBackground": "#f6f6f7",
         "danger": "#de350b",
         "dangerBackground": "#fcebe7",
-        "default": "#292a2b",
+        "default": "#001f23",
         "defaultBackground": undefined,
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
-        "primary": "#7622d7",
-        "primaryBackground": "#f1e9fb",
+        "primary": "#8505a2",
+        "primaryBackground": "#f3e6f6",
         "success": "#017d6d",
         "successBackground": "#f0fef4",
-        "warning": "#d98a2c",
-        "warningBackground": "#fff6eb",
+        "warning": "#ffa234",
+        "warningBackground": "#ebf4ff",
       },
       "fontSizes": Object {
         "default": 12,
@@ -679,52 +688,52 @@ Object {
       "colors": Object {
         "asterisks": Object {
           "default": "#de350b",
-          "disabled": "#ccced1",
+          "disabled": "#bfc1c5",
           "error": "#de350b",
           "filled": "#de350b",
           "focused": "#de350b",
-          "readonly": "#8b8d92",
+          "readonly": "#808f91",
         },
         "borders": Object {
-          "default": "#292a2b",
-          "disabled": "#ccced1",
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
           "error": "#de350b",
-          "filled": "#292a2b",
-          "focused": "#292a2b",
-          "readonly": "#8b8d92",
+          "filled": "#001f23",
+          "focused": "#001f23",
+          "readonly": "#808f91",
         },
-        "disabledLabel": "#ccced1",
+        "disabledLabel": "#bfc1c5",
         "error": "#de350b",
-        "label": "#292a2b",
+        "label": "#001f23",
         "labelBackground": "#ffffff",
         "labels": Object {
-          "default": "#292a2b",
-          "disabled": "#ccced1",
-          "error": "#292a2b",
-          "filled": "#292a2b",
-          "focused": "#292a2b",
-          "readonly": "#8b8d92",
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
+          "error": "#001f23",
+          "filled": "#001f23",
+          "focused": "#001f23",
+          "readonly": "#808f91",
         },
         "labelsInsideTextInput": Object {
-          "default": "#292a2b",
-          "disabled": "#ccced1",
-          "error": "#292a2b",
-          "filled": "#292a2b",
-          "focused": "#292a2b",
-          "readonly": "#8b8d92",
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
+          "error": "#001f23",
+          "filled": "#001f23",
+          "focused": "#001f23",
+          "readonly": "#808f91",
         },
         "maxLengthLabels": Object {
-          "default": "#292a2b",
-          "disabled": "#ccced1",
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
           "error": "#de350b",
-          "filled": "#292a2b",
-          "focused": "#292a2b",
-          "readonly": "#8b8d92",
+          "filled": "#001f23",
+          "focused": "#001f23",
+          "readonly": "#808f91",
         },
-        "placeholderIfFocued": "#8b8d92",
-        "placeholderIfNotFocused": "#292a2b",
-        "readonlyLabel": "#8b8d92",
-        "text": "#292a2b",
+        "placeholderIfFocued": "#808f91",
+        "placeholderIfNotFocused": "#001f23",
+        "readonlyLabel": "#808f91",
+        "text": "#001f23",
       },
       "fontSizes": Object {
         "asteriskLabel": 14,
@@ -760,11 +769,11 @@ Object {
         "base": 1,
       },
       "colors": Object {
-        "divider": "#fafbfb",
-        "error": "#de350b",
+        "divider": "#e8e9ea",
+        "error": "#f46363",
         "info": "#b5c3fd",
-        "success": "#01b39c",
-        "warning": "#ffa234",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "radii": Object {
         "default": 16,
@@ -783,13 +792,13 @@ Object {
       },
       "colors": Object {
         "background": "#ffffff",
-        "border": "#dadbde",
-        "danger": "#ffa234",
-        "disabled": "#8b8d92",
+        "border": "#e8e9ea",
+        "danger": "#ffbe71",
+        "disabled": "#808f91",
         "error": "#de350b",
         "info": "#4568fb",
-        "primary": "#7622d7",
-        "success": "#01b39c",
+        "primary": "#8505a2",
+        "success": "#5ace7d",
       },
       "space": Object {
         "horizontalPadding": 12,
@@ -798,14 +807,14 @@ Object {
     },
     "typography": Object {
       "colors": Object {
-        "body": "#292a2b",
+        "body": "#001f23",
         "danger": "#de350b",
         "info": "#4568fb",
         "inverted": "#ffffff",
-        "primary": "#7622d7",
-        "subdued": "#8b8d92",
-        "success": "#01b39c",
-        "warning": "#ffa234",
+        "primary": "#8505a2",
+        "subdued": "#808f91",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "fontSizes": Object {
         "large": 16,
@@ -834,44 +843,47 @@ Object {
   },
   "colors": Object {
     "archived": "#ccced1",
-    "archivedBackground": "#f1f2f3",
+    "archivedBackground": "#f6f6f7",
     "archivedDark": "#737479",
     "archivedLight": "#bfc1c5",
-    "backgroundDark": "#292a2b",
-    "backgroundLight": "#fafbfb",
+    "backgroundDark": "#001f23",
+    "backgroundLight": "#f6f6f7",
     "black": "#000000",
     "danger": "#de350b",
     "dangerBackground": "#fcebe7",
-    "dangerLight": "#f2ae9d",
+    "dangerLight": "#f46363",
     "dangerMediumLight": "#e3602a",
-    "disabledLightText": "#ccced1",
-    "disabledText": "#8b8d92",
-    "inactiveBackground": "#727478",
+    "disabledLightText": "#bfc1c5",
+    "disabledText": "#808f91",
+    "globalPrimary": "#001f23",
+    "globalPrimaryBackground": "#e6e9e9",
+    "globalPrimaryLight": "#808f91",
+    "inactiveBackground": "#808f91",
     "info": "#4568fb",
     "infoBackground": "#ecf0ff",
-    "infoLight": "#d1d9fe",
+    "infoLight": "#b5c3fd",
     "infoMediumLight": "#b5c3fd",
     "invertedText": "#ffffff",
-    "outline": "#dadbde",
+    "outline": "#e8e9ea",
     "platformBackground": "#ffffff",
-    "primary": "#7622d7",
-    "primaryBackground": "#f1e9fb",
+    "primary": "#8505a2",
+    "primaryBackground": "#f3e6f6",
     "primaryBackgroundDark": "#4d6265",
-    "primaryDark": "#a26fb0",
-    "primaryLight": "#c8a7ef",
+    "primaryDark": "#795e90",
+    "primaryLight": "#c282d1",
     "secondary": "#4568fb",
     "secondaryBackground": "#ecf0ff",
-    "secondaryLight": "#d1d9fe",
-    "shadow": "#dadbde",
-    "subduedText": "#727478",
-    "success": "#01b39c",
+    "secondaryLight": "#b5c3fd",
+    "shadow": "#ccced1",
+    "subduedText": "#4d6265",
+    "success": "#5ace7d",
     "successBackground": "#f0fef4",
     "successDark": "#017d6d",
     "successLight": "#5ace7d",
-    "text": "#292a2b",
-    "warning": "#ffa234",
-    "warningBackground": "#fff6eb",
-    "warningDark": "#d98a2c",
+    "text": "#001f23",
+    "warning": "#ffbe71",
+    "warningBackground": "#ebf4ff",
+    "warningDark": "#ffa234",
     "warningLight": "#ffbe71",
   },
   "fontSizes": Object {

package/src/theme/components/alert.ts

@@ -5,9 +5,9 @@ const getAlertTheme = (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 = {