@hero-design/rn 8.91.1 → 8.91.4

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={
                 [
                   {
@@ -680,15 +720,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       "backgroundColor": "#ffffff",
                       "borderTopLeftRadius": 16,
                       "borderTopRightRadius": 16,
-                      "elevation": 10,
                       "maxHeight": "94%",
-                      "shadowColor": "#001f23",
-                      "shadowOffset": {
-                        "height": 3,
-                        "width": 0,
-                      },
-                      "shadowOpacity": 0.4,
-                      "shadowRadius": 16,
                       "transform": [
                         {
                           "scaleY": 1,

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

@@ -215,15 +215,6 @@ exports[`theme returns correct theme object 1`] = `
         "floating": 32,
         "floatingHeaderIcon": 999,
       },
-      "shadows": {
-        "elevation": 10,
-        "offset": {
-          "height": 3,
-          "width": 0,
-        },
-        "opacity": 0.4,
-        "radius": 16,
-      },
       "sizes": {
         "closeIcon": 48,
         "floatingCloseIcon": 12,
@@ -408,10 +399,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 +448,7 @@ exports[`theme returns correct theme object 1`] = `
       "shadows": {
         "filledWrapper": {
           "elevation": 3,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,
@@ -583,7 +581,7 @@ exports[`theme returns correct theme object 1`] = `
         "actionItemBackground": "#000000",
         "actionItemPressedBackground": "#000000",
         "actionItemText": "#ffffff",
-        "backdropBackground": "#f6f6f7",
+        "backdropBackground": "#000000",
         "buttonActiveBackground": "#000000",
         "buttonBackground": "#000000",
         "buttonPressedBackground": "#000000",
@@ -607,14 +605,16 @@ exports[`theme returns correct theme object 1`] = `
         "actionItem": 999,
       },
       "shadows": {
-        "color": "#001f23",
-        "elevation": 3,
-        "offset": {
-          "height": 2,
-          "width": 0,
+        "default": {
+          "elevation": 6,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
         },
-        "opacity": 0.12,
-        "radius": 4,
       },
       "sizes": {
         "fabPairHeight": 48,
@@ -649,7 +649,7 @@ exports[`theme returns correct theme object 1`] = `
       "shadows": {
         "wrapper": {
           "elevation": 3,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,
@@ -717,7 +717,7 @@ exports[`theme returns correct theme object 1`] = `
       },
       "shadows": {
         "card": {
-          "color": "#001f23",
+          "color": "#121214",
           "elevation": 3,
           "offset": {
             "height": 2,
@@ -758,7 +758,7 @@ exports[`theme returns correct theme object 1`] = `
         "default": 12,
       },
       "shadows": {
-        "color": "#001f23",
+        "color": "#121214",
         "elevation": 3,
         "offset": {
           "height": 2,
@@ -981,7 +981,7 @@ exports[`theme returns correct theme object 1`] = `
         "surfix": 999,
       },
       "shadows": {
-        "color": "#001f23",
+        "color": "#121214",
         "elevation": 3,
         "offset": {
           "height": 2,
@@ -1062,7 +1062,7 @@ exports[`theme returns correct theme object 1`] = `
       "shadows": {
         "marker": {
           "elevation": 3,
-          "shadowColor": "#001f23",
+          "shadowColor": "#121214",
           "shadowOffset": {
             "height": 2,
             "width": 0,
@@ -1150,13 +1150,13 @@ 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",
@@ -1294,6 +1294,7 @@ exports[`theme returns correct theme object 1`] = `
           "filled": "#001f23",
           "readonly": "#808f91",
         },
+        "placeholder": "#4d6265",
         "text": "#001f23",
       },
       "fontSizes": {
@@ -1365,7 +1366,7 @@ exports[`theme returns correct theme object 1`] = `
         "default": 16,
       },
       "shadows": {
-        "color": "#001f23",
+        "color": "#121214",
         "elevation": 3,
         "offset": {
           "height": 2,
@@ -1612,6 +1613,7 @@ exports[`theme returns correct theme object 1`] = `
   "colors": {
     "archived": "#abacaf",
     "archivedSurface": "#dadbde",
+    "black": "#000000",
     "darkGlobalSurface": "#001f23",
     "decorativePrimary": "#ffffff",
     "decorativePrimarySurface": "#ccd2d3",
@@ -1652,6 +1654,7 @@ exports[`theme returns correct theme object 1`] = `
     "successSurface": "#f0fef4",
     "warning": "#ffbe71",
     "warningSurface": "#fff6eb",
+    "white": "#ffffff",
   },
   "fontSizes": {
     "6xlarge": 36,
@@ -1702,9 +1705,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 +1725,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/bottomSheet.ts

@@ -4,7 +4,7 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   const colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.overlayGlobalSurface,
+    backdrop: theme.colors.black,
     floatingHeaderIconBackground: theme.colors.archivedSurface,
   };
 
@@ -24,20 +24,13 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
     floatingHeaderIconPadding: theme.space.small,
   };
 
-  const shadows = {
-    offset: { width: 0, height: 3 },
-    opacity: 0.4,
-    radius: theme.radii.xlarge,
-    elevation: 10,
-  };
-
   const radii = {
     default: theme.radii.xlarge,
     floating: theme.radii['5xlarge'],
     floatingHeaderIcon: theme.radii.rounded,
   };
 
-  return { colors, shadows, radii, sizes, space };
+  return { colors, radii, sizes, space };
 };
 
 export default getBottomSheetTheme;

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/fab.ts

@@ -5,12 +5,12 @@ const getFABTheme = (theme: GlobalTheme) => {
     buttonBackground: theme.colors.overlayGlobalSurface,
     buttonPressedBackground: theme.colors.overlayGlobalSurface,
     buttonActiveBackground: theme.colors.overlayGlobalSurface,
-    icon: theme.colors.onPrimary,
+    icon: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.overlayGlobalSurface,
     actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
-    titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary,
+    backdropBackground: theme.colors.black,
+    titleText: theme.colors.onDarkGlobalSurface,
+    actionItemText: theme.colors.onDarkGlobalSurface,
   };
 
   const sizes = {
@@ -39,11 +39,7 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    offset: theme.shadows.default.shadowOffset,
-    opacity: theme.shadows.default.shadowOpacity,
-    radius: theme.shadows.default.shadowRadius,
-    elevation: theme.shadows.default.elevation,
-    color: theme.shadows.default.shadowColor,
+    default: theme.shadows.cardDrawer,
   };
 
   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__/eBens.spec.ts.snap

@@ -4,6 +4,7 @@ exports[`eBens returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#c38cee",
   "decorativePrimarySurface": "#f3e8fc",
@@ -44,5 +45,6 @@ exports[`eBens returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`global returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "defaultGlobalSurface": "#ffffff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
@@ -35,5 +36,6 @@ exports[`global returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`jobs returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffad79",
   "decorativePrimarySurface": "#ffefe4",
@@ -44,5 +45,6 @@ exports[`jobs returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`swag returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#ffffff",
   "decorativePrimarySurface": "#ccd2d3",
@@ -44,5 +45,6 @@ exports[`swag returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,6 +4,7 @@ exports[`swagDark returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "decorativePrimary": "#fdfbff",
   "decorativePrimarySurface": "#dacce4",
@@ -16,16 +17,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",
@@ -46,5 +48,6 @@ exports[`swagDark returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;

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

@@ -4,20 +4,21 @@ exports[`swagLightGlobal returns correct theme object 1`] = `
 {
   "archived": "#abacaf",
   "archivedSurface": "#dadbde",
+  "black": "#000000",
   "darkGlobalSurface": "#001f23",
   "defaultGlobalSurface": "#ffffff",
   "disabledOnDefaultGlobalSurface": "#bfc1c5",
   "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",
@@ -35,5 +36,6 @@ exports[`swagLightGlobal returns correct theme object 1`] = `
   "successSurface": "#f0fef4",
   "warning": "#ffbe71",
   "warningSurface": "#fff6eb",
+  "white": "#ffffff",
 }
 `;