@hero-design/rn 8.91.1 → 8.91.3

package/src/components/TextInput/index.tsx

@@ -36,10 +36,11 @@ import {
   StyledHelperText,
 } from './StyledTextInput';
 import Icon from '../Icon';
-import { useTheme } from '../../theme';
+import { Theme, useTheme } from '../../theme';
 import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
 import { omit, pick } from '../../utils/helpers';
+import Typography from '../Typography';
 
 export type TextInputHandles = Pick<
   RNTextInput,
@@ -191,12 +192,14 @@ export const renderInput = ({
   nativeInputProps,
   renderInputValue,
   ref,
+  theme,
 }: {
   variant: TextInputVariant;
   nativeInputProps: NativeTextInputProps;
   multiline?: boolean;
   renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
   ref?: React.Ref<RNTextInput>;
+  theme: Theme;
 }) => {
   return renderInputValue ? (
     renderInputValue(nativeInputProps)
@@ -206,6 +209,7 @@ export const renderInput = ({
       themeVariant={variant}
       multiline={variant === 'textarea' || nativeInputProps.multiline}
       ref={ref}
+      placeholderTextColor={theme.__hd__.textInput.colors.placeholder}
     />
   );
 };
@@ -503,7 +507,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
                     *
                   </StyledAsteriskLabelInsideTextInput>
                 )}
-                {label}
+                <Typography.Body>{label}</Typography.Body>
               </StyledLabelInsideTextInput>
             )}
           </StyledLabelContainerInsideTextInput>
@@ -516,6 +520,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               ref: (rnTextInputRef) => {
                 innerTextInput.current = rnTextInputRef;
               },
+              theme,
             })}
           </StyledTextInputAndLabelContainer>
           {renderSuffix({ state, loading, suffix })}

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Break time
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Break time
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {
@@ -449,7 +469,26 @@ exports[`TimePickerAndroid renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Break time
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Break time
+              </Text>
             </Text>
           </View>
           <View
@@ -478,6 +517,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Break time
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Break time
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {
@@ -449,7 +469,26 @@ exports[`TimePickerIOS renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Break time
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Break time
+              </Text>
             </Text>
           </View>
           <View
@@ -478,6 +517,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {

package/src/components/Toast/__tests__/__snapshots__/Toast.spec.tsx.snap

@@ -18,7 +18,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -163,7 +163,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -371,7 +371,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -579,7 +579,7 @@ exports[`Toast renders correctly when intent is notification 1`] = `
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -755,7 +755,7 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -931,7 +931,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1139,7 +1139,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
         "flexDirection": "row",
         "minHeight": 48,
         "opacity": 0,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,

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

@@ -408,10 +408,17 @@ exports[`theme returns correct theme object 1`] = `
       },
       "colors": {
         "borders": {
+          "checked": "#001f23",
           "default": "#001f23",
           "disabled": "#bfc1c5",
           "readonly": "#808f91",
         },
+        "checkboxBorder": {
+          "checked": "#401960",
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
+          "readonly": "#4d6265",
+        },
       },
       "radii": {
         "icon": 4,
@@ -450,7 +457,7 @@ exports[`theme returns correct theme object 1`] = `
       "shadows": {
         "filledWrapper": {
           "elevation": 3,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,
@@ -607,7 +614,7 @@ exports[`theme returns correct theme object 1`] = `
         "actionItem": 999,
       },
       "shadows": {
-        "color": "#001f23",
+        "color": "#121214",
         "elevation": 3,
         "offset": {
           "height": 2,
@@ -649,7 +656,7 @@ exports[`theme returns correct theme object 1`] = `
       "shadows": {
         "wrapper": {
           "elevation": 3,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,
@@ -717,7 +724,7 @@ exports[`theme returns correct theme object 1`] = `
       },
       "shadows": {
         "card": {
-          "color": "#001f23",
+          "color": "#121214",
           "elevation": 3,
           "offset": {
             "height": 2,
@@ -758,7 +765,7 @@ exports[`theme returns correct theme object 1`] = `
         "default": 12,
       },
       "shadows": {
-        "color": "#001f23",
+        "color": "#121214",
         "elevation": 3,
         "offset": {
           "height": 2,
@@ -981,7 +988,7 @@ exports[`theme returns correct theme object 1`] = `
         "surfix": 999,
       },
       "shadows": {
-        "color": "#001f23",
+        "color": "#121214",
         "elevation": 3,
         "offset": {
           "height": 2,
@@ -1062,7 +1069,7 @@ exports[`theme returns correct theme object 1`] = `
       "shadows": {
         "marker": {
           "elevation": 3,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,
@@ -1150,16 +1157,16 @@ exports[`theme returns correct theme object 1`] = `
     "switch": {
       "colors": {
         "backgroundColors": {
-          "checked": "#401960",
-          "disabled-checked": "#ece8ef",
-          "disabled-unchecked": "#4d6265",
+          "checked": "#33144d",
+          "disabled-checked": "#808f91",
+          "disabled-unchecked": "#808f91",
           "unchecked": "#808f91",
         },
         "selector": {
-          "background": "#ffffff",
+          "background": "#f6f6f7",
           "textBackground": "#ccd2d3",
         },
-        "thumb": "#ffffff",
+        "thumb": undefined,
       },
       "radii": {
         "rounded": 999,
@@ -1294,6 +1301,7 @@ exports[`theme returns correct theme object 1`] = `
           "filled": "#001f23",
           "readonly": "#808f91",
         },
+        "placeholder": "#4d6265",
         "text": "#001f23",
       },
       "fontSizes": {
@@ -1365,7 +1373,7 @@ exports[`theme returns correct theme object 1`] = `
         "default": 16,
       },
       "shadows": {
-        "color": "#001f23",
+        "color": "#121214",
         "elevation": 3,
         "offset": {
           "height": 2,
@@ -1702,9 +1710,19 @@ exports[`theme returns correct theme object 1`] = `
     "xxxlarge": 24,
   },
   "shadows": {
+    "cardDrawer": {
+      "elevation": 6,
+      "shadowColor": "#001f23",
+      "shadowOffset": {
+        "height": 2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 2,
+    },
     "default": {
       "elevation": 3,
-      "shadowColor": "#001f23",
+      "shadowColor": "#121214",
       "shadowOffset": {
         "height": 2,
         "width": 0,
@@ -1712,6 +1730,16 @@ exports[`theme returns correct theme object 1`] = `
       "shadowOpacity": 0.12,
       "shadowRadius": 4,
     },
+    "tabBar": {
+      "elevation": 10,
+      "shadowColor": "#001f23",
+      "shadowOffset": {
+        "height": -4,
+        "width": 0,
+      },
+      "shadowOpacity": 0.04,
+      "shadowRadius": 6,
+    },
   },
   "sizes": {
     "14xlarge": 136,

package/src/theme/components/checkbox.ts

@@ -4,9 +4,16 @@ const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
     borders: {
       default: theme.colors.primaryOutline,
+      checked: theme.colors.primaryOutline,
       disabled: theme.colors.disabledOutline,
       readonly: theme.colors.inactiveOutline,
     },
+    checkboxBorder: {
+      default: theme.colors.primaryOutline,
+      checked: theme.colors.primary,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.mutedOnDefaultGlobalSurface,
+    },
   };
 
   const space = {

package/src/theme/components/switch.ts

@@ -3,14 +3,14 @@ import type { GlobalTheme } from '../global';
 const getSwitchTheme = (theme: GlobalTheme) => {
   const colors = {
     backgroundColors: {
-      checked: theme.colors.primary,
+      checked: theme.colors.pressedSurface,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
-      'disabled-checked': theme.colors.highlightedSurface,
-      'disabled-unchecked': theme.colors.mutedOnDefaultGlobalSurface,
+      'disabled-checked': theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-unchecked': theme.colors.inactiveOnDefaultGlobalSurface,
     },
-    thumb: theme.colors.onDarkGlobalSurface,
+    thumb: theme.colors.white,
     selector: {
-      background: theme.colors.defaultGlobalSurface,
+      background: theme.colors.neutralGlobalSurface,
       textBackground: theme.colors.decorativePrimarySurface,
     },
   };

package/src/theme/components/textInput.ts

@@ -41,6 +41,7 @@ const getTextInputTheme = (theme: GlobalTheme) => {
       readonly: theme.colors.inactiveOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface,
     },
+    placeholder: theme.colors.mutedOnDefaultGlobalSurface,
   };
 
   const space = {

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

@@ -16,16 +16,17 @@ exports[`swagDark returns correct theme object 1`] = `
   "error": "#f46363",
   "errorSurface": "#fcebe7",
   "highlightedSurface": "#f1e9fb",
-  "inactiveOnDefaultGlobalSurface": "#89898a",
-  "inactiveOutline": "#89898a",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
   "infoSurface": "#ecf0ff",
   "mutedArchived": "#bcbdbf",
   "mutedError": "#f68282",
   "mutedInfo": "#c4cffd",
-  "mutedOnDefaultGlobalSurface": "#59595b",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
+  "name": "swagLight",
   "neutralGlobalSurface": "#f6f6f7",
   "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",

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

@@ -10,14 +10,14 @@ exports[`swagLightGlobal returns correct theme object 1`] = `
   "disabledOutline": "#bfc1c5",
   "error": "#f46363",
   "errorSurface": "#fcebe7",
-  "inactiveOnDefaultGlobalSurface": "#89898a",
-  "inactiveOutline": "#89898a",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
   "infoSurface": "#ecf0ff",
   "mutedArchived": "#bcbdbf",
   "mutedError": "#f68282",
   "mutedInfo": "#c4cffd",
-  "mutedOnDefaultGlobalSurface": "#59595b",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
   "neutralGlobalSurface": "#f6f6f7",

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

@@ -16,16 +16,17 @@ exports[`swagLightJobs returns correct theme object 1`] = `
   "error": "#f46363",
   "errorSurface": "#fcebe7",
   "highlightedSurface": "#f1e9fb",
-  "inactiveOnDefaultGlobalSurface": "#89898a",
-  "inactiveOutline": "#89898a",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
   "info": "#b5c3fd",
   "infoSurface": "#ecf0ff",
   "mutedArchived": "#bcbdbf",
   "mutedError": "#f68282",
   "mutedInfo": "#c4cffd",
-  "mutedOnDefaultGlobalSurface": "#59595b",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
   "mutedSuccess": "#7bd897",
   "mutedWarning": "#ffcb8d",
+  "name": "swagLightJobs",
   "neutralGlobalSurface": "#f6f6f7",
   "onArchivedSurface": "#606065",
   "onDarkGlobalSurface": "#ffffff",

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

@@ -58,6 +58,7 @@ const ehWorkDarkSystemPalette: SystemPalette = {
   decorativeSecondarySurface: '#4c1d95',
   // Theme Mode
   themeMode: 'dark',
+  name: 'ehWorkDark',
 };
 
 export default ehWorkDarkSystemPalette;

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

@@ -21,6 +21,7 @@ const swagSystemPalette: SystemPalette = {
   ...swagLightGlobalPalette,
   // Brand
   ...swagBrandSystemPallete,
+  name: 'swagLight',
 };
 
 export default swagSystemPalette;

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

@@ -5,10 +5,10 @@ import globalPalette from './global';
 const swagLightGlobalPalette: GlobalSystemPalette = {
   ...globalPalette,
   onDefaultGlobalSurface: palette.offBlack,
-  mutedOnDefaultGlobalSurface: palette.offBlackLight30,
-  inactiveOnDefaultGlobalSurface: palette.offBlackLight50,
+  mutedOnDefaultGlobalSurface: '#4d6265',
+  inactiveOnDefaultGlobalSurface: '#808f91',
   primaryOutline: palette.offBlack,
-  inactiveOutline: palette.offBlackLight50,
+  inactiveOutline: '#808f91',
 };
 
 export default swagLightGlobalPalette;

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

@@ -1,7 +1,9 @@
 import swagLightSystemPalette from './swagLight';
+import { SystemPalette } from './types';
 
-const swagLightJobsSystemPalette = {
+const swagLightJobsSystemPalette: SystemPalette = {
   ...swagLightSystemPalette,
+  name: 'swagLightJobs',
   secondary: '#40d1ff',
   onSecondary: '#460078',
   secondaryHighlightedSurface: '#ecfaff',

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

@@ -65,7 +65,9 @@ export type BrandSystemPalette = {
 };
 
 export type ThemeMode = 'light' | 'dark';
+export type ThemeName = 'swagLight' | 'swagLightJobs' | 'ehWorkDark';
 export type SystemPalette = GlobalSystemPalette &
   BrandSystemPalette & {
     themeMode?: ThemeMode;
+    name?: ThemeName;
   };

package/src/theme/global/shadows/__tests__/__snapshots__/ehWorkDark.spec.ts.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ehWorkDarkShadowPalette returns correct theme object 1`] = `
+{
+  "cardDrawer": {
+    "elevation": 6,
+    "shadowColor": "#000000",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.56,
+    "shadowRadius": 2,
+  },
+  "default": {
+    "elevation": 3,
+    "shadowColor": "#a9a9b2",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.12,
+    "shadowRadius": 4,
+  },
+  "tabBar": {
+    "elevation": 10,
+    "shadowColor": "#000000",
+    "shadowOffset": {
+      "height": -4,
+      "width": 0,
+    },
+    "shadowOpacity": 0.24,
+    "shadowRadius": 6,
+  },
+}
+`;

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

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swagLightShadowPalette returns correct theme object 1`] = `
+{
+  "cardDrawer": {
+    "elevation": 6,
+    "shadowColor": "#001f23",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.12,
+    "shadowRadius": 2,
+  },
+  "default": {
+    "elevation": 3,
+    "shadowColor": "#121214",
+    "shadowOffset": {
+      "height": 2,
+      "width": 0,
+    },
+    "shadowOpacity": 0.12,
+    "shadowRadius": 4,
+  },
+  "tabBar": {
+    "elevation": 10,
+    "shadowColor": "#001f23",
+    "shadowOffset": {
+      "height": -4,
+      "width": 0,
+    },
+    "shadowOpacity": 0.04,
+    "shadowRadius": 6,
+  },
+}
+`;