@hero-design/rn 8.89.0 → 8.90.1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3039) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:2935) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 53.2s
+created lib/index.js, es/index.js in 52.1s

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @hero-design/rn
 
+## 8.90.1
+
+### Patch Changes
+
+- [#3677](https://github.com/Thinkei/hero-design/pull/3677) [`ac973b40ec94c3fa7e83a6cfc9d781a3ccb68f5b`](https://github.com/Thinkei/hero-design/commit/ac973b40ec94c3fa7e83a6cfc9d781a3ccb68f5b) Thanks [@ttkien](https://github.com/ttkien)! - [Theme] add themeMode to specify dark or light mode
+  [MonthYearPicker] change themeVariant base on theme mode
+- Updated dependencies [[`ac973b40ec94c3fa7e83a6cfc9d781a3ccb68f5b`](https://github.com/Thinkei/hero-design/commit/ac973b40ec94c3fa7e83a6cfc9d781a3ccb68f5b)]:
+  - @hero-design/react-native-month-year-picker@8.43.1
+
+## 8.90.0
+
+### Minor Changes
+
+- [#3682](https://github.com/Thinkei/hero-design/pull/3682) [`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616) Thanks [@ttkien](https://github.com/ttkien)! - [Icon] Add xxxsmall size
+
+- [#3682](https://github.com/Thinkei/hero-design/pull/3682) [`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616) Thanks [@ttkien](https://github.com/ttkien)! - [Card] Add secondary intent and update Card.Data background color
+
+### Patch Changes
+
+- [#3682](https://github.com/Thinkei/hero-design/pull/3682) [`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616) Thanks [@ttkien](https://github.com/ttkien)! - [Image] Deprecate component
+
+- [#3682](https://github.com/Thinkei/hero-design/pull/3682) [`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616) Thanks [@ttkien](https://github.com/ttkien)! - [iOS] support text color for react-native-month-year-picker
+
+- Updated dependencies [[`9cc1860a717736c1116affb45f44f381c1e0b616`](https://github.com/Thinkei/hero-design/commit/9cc1860a717736c1116affb45f44f381c1e0b616)]:
+  - @hero-design/react-native-month-year-picker@8.43.0
+
 ## 8.89.0
 
 ### Minor Changes

package/es/index.js

@@ -1979,7 +1979,10 @@ var swagDarkBrandSystemPalette = {
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
-var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
+var swagDarkSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette), {}, {
+  // Theme Mode
+  themeMode: 'dark'
+});
 
 var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
   onDefaultGlobalSurface: palette$3.offBlack,
@@ -2667,12 +2670,14 @@ var getCardTheme = function getCardTheme(theme) {
   var colors = {
     dataCardIndicator: theme.colors.primary,
     primary: theme.colors.primary,
+    secondary: theme.colors.highlightedSurface,
     info: theme.colors.info,
     success: theme.colors.success,
     warning: theme.colors.warning,
     danger: theme.colors.error,
     archived: theme.colors.archived,
-    neutral: theme.colors.neutralGlobalSurface
+    neutral: theme.colors.neutralGlobalSurface,
+    dataCardBackground: theme.colors.neutralGlobalSurface
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium
@@ -3041,6 +3046,7 @@ var getIconTheme = function getIconTheme(theme) {
     muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var sizes = {
+    xxxsmall: theme.fontSizes.small,
     xsmall: theme.fontSizes.large,
     small: theme.fontSizes.xxlarge,
     medium: theme.fontSizes.xxxlarge,
@@ -4189,7 +4195,9 @@ var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$1;
   var globalTheme = getGlobalTheme(scale, systemPallete);
-  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
+  return _objectSpread2(_objectSpread2({
+    themeMode: systemPallete.themeMode
+  }, globalTheme), {}, {
     __hd__: {
       accordion: getAccordionTheme(globalTheme),
       alert: getAlertTheme(globalTheme),
@@ -13272,6 +13280,7 @@ var CalendarRange = function CalendarRange(_ref) {
       isCurrentMonth: false
     });
   })), Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__default.createElement(MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     doneButtonLabel: monthPickerConfirmLabel,
     cancelButtonLabel: monthPickerCancelLabel,
     value: value === null || value === void 0 ? void 0 : value.startDate,
@@ -13407,6 +13416,7 @@ var Calendar = function Calendar(_ref) {
     minimumDate: minDate,
     maximumDate: maxDate,
     onChange: onMonthChange,
+    textColor: theme.colors.onDefaultGlobalSurface,
     style: {
       height: contentHeight + theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
       marginVertical: -theme.__hd__.calendar.space.iosPickerMarginVertical,
@@ -13470,6 +13480,7 @@ var Calendar = function Calendar(_ref) {
       testID: "calendar-disabled-cell"
     });
   })), Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__default.createElement(MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     doneButtonLabel: monthPickerConfirmLabel,
     cancelButtonLabel: monthPickerCancelLabel,
     value: value,
@@ -13493,7 +13504,8 @@ var StyledDataCard = index$a(View)(function (_ref) {
   return {
     borderRadius: theme.__hd__.card.radii["default"],
     overflow: 'hidden',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    backgroundColor: theme.__hd__.card.colors.dataCardBackground
   };
 });
 var Indicator = index$a(View)(function (_ref2) {
@@ -13811,6 +13823,7 @@ var Image = function Image(_ref) {
     testID = _ref.testID,
     style = _ref.style,
     imageNativeProps = _objectWithoutProperties(_ref, _excluded$u);
+  useDeprecation('Image component will soon be deprecated. Please use `Image` from `react-native` instead.');
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default.createElement(Image$1, _extends$1({
@@ -14841,6 +14854,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     onChange: _onChange,
     value: value
   });
+  var theme = useTheme();
   return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -14861,6 +14875,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     style: style,
     testID: testID
   })), open && variant === 'month-year' ? /*#__PURE__*/React__default.createElement(MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     value: value,
     minimumDate: minDate,
     maximumDate: maxDate,
@@ -15105,6 +15120,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     value: value,
     locale: locale,
     minimumDate: minDate,
+    textColor: theme.colors.onDefaultGlobalSurface,
     maximumDate: maxDate,
     onChange: function onChange(date) {
       if (date) {

package/lib/index.js

@@ -2007,7 +2007,10 @@ var swagDarkBrandSystemPalette = {
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
-var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
+var swagDarkSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette), {}, {
+  // Theme Mode
+  themeMode: 'dark'
+});
 
 var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
   onDefaultGlobalSurface: palette$3.offBlack,
@@ -2695,12 +2698,14 @@ var getCardTheme = function getCardTheme(theme) {
   var colors = {
     dataCardIndicator: theme.colors.primary,
     primary: theme.colors.primary,
+    secondary: theme.colors.highlightedSurface,
     info: theme.colors.info,
     success: theme.colors.success,
     warning: theme.colors.warning,
     danger: theme.colors.error,
     archived: theme.colors.archived,
-    neutral: theme.colors.neutralGlobalSurface
+    neutral: theme.colors.neutralGlobalSurface,
+    dataCardBackground: theme.colors.neutralGlobalSurface
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium
@@ -3069,6 +3074,7 @@ var getIconTheme = function getIconTheme(theme) {
     muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var sizes = {
+    xxxsmall: theme.fontSizes.small,
     xsmall: theme.fontSizes.large,
     small: theme.fontSizes.xxlarge,
     medium: theme.fontSizes.xxxlarge,
@@ -4217,7 +4223,9 @@ var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$1;
   var globalTheme = getGlobalTheme(scale, systemPallete);
-  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
+  return _objectSpread2(_objectSpread2({
+    themeMode: systemPallete.themeMode
+  }, globalTheme), {}, {
     __hd__: {
       accordion: getAccordionTheme(globalTheme),
       alert: getAlertTheme(globalTheme),
@@ -13300,6 +13308,7 @@ var CalendarRange = function CalendarRange(_ref) {
       isCurrentMonth: false
     });
   })), reactNative.Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__namespace.default.createElement(reactNativeMonthYearPicker.MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     doneButtonLabel: monthPickerConfirmLabel,
     cancelButtonLabel: monthPickerCancelLabel,
     value: value === null || value === void 0 ? void 0 : value.startDate,
@@ -13435,6 +13444,7 @@ var Calendar = function Calendar(_ref) {
     minimumDate: minDate,
     maximumDate: maxDate,
     onChange: onMonthChange,
+    textColor: theme.colors.onDefaultGlobalSurface,
     style: {
       height: contentHeight + theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
       marginVertical: -theme.__hd__.calendar.space.iosPickerMarginVertical,
@@ -13498,6 +13508,7 @@ var Calendar = function Calendar(_ref) {
       testID: "calendar-disabled-cell"
     });
   })), reactNative.Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__namespace.default.createElement(reactNativeMonthYearPicker.MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     doneButtonLabel: monthPickerConfirmLabel,
     cancelButtonLabel: monthPickerCancelLabel,
     value: value,
@@ -13521,7 +13532,8 @@ var StyledDataCard = index$a(reactNative.View)(function (_ref) {
   return {
     borderRadius: theme.__hd__.card.radii["default"],
     overflow: 'hidden',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    backgroundColor: theme.__hd__.card.colors.dataCardBackground
   };
 });
 var Indicator = index$a(reactNative.View)(function (_ref2) {
@@ -13839,6 +13851,7 @@ var Image = function Image(_ref) {
     testID = _ref.testID,
     style = _ref.style,
     imageNativeProps = _objectWithoutProperties(_ref, _excluded$u);
+  useDeprecation('Image component will soon be deprecated. Please use `Image` from `react-native` instead.');
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.Image, _extends$1({
@@ -14869,6 +14882,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     onChange: _onChange,
     value: value
   });
+  var theme = useTheme();
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -14889,6 +14903,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     style: style,
     testID: testID
   })), open && variant === 'month-year' ? /*#__PURE__*/React__namespace.default.createElement(reactNativeMonthYearPicker.MonthYearPickerDialogueAndroid, {
+    themeVariant: theme.themeMode === 'dark' ? 'dark' : 'light',
     value: value,
     minimumDate: minDate,
     maximumDate: maxDate,
@@ -15133,6 +15148,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     value: value,
     locale: locale,
     minimumDate: minDate,
+    textColor: theme.colors.onDefaultGlobalSurface,
     maximumDate: maxDate,
     onChange: function onChange(date) {
       if (date) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.89.0",
+  "version": "8.90.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,7 +28,7 @@
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.11",
+    "@hero-design/react-native-month-year-picker": "^8.43.1",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
@@ -52,7 +52,7 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
     "@hero-design/eslint-plugin": "9.2.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.11",
+    "@hero-design/react-native-month-year-picker": "^8.43.1",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",

package/src/components/Calendar/CalendarRange.tsx

@@ -313,6 +313,7 @@ const CalendarRange = ({
 
           {Platform.OS === 'android' && monthPickerVisible && (
             <MonthYearPickerDialogueAndroid
+              themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
               doneButtonLabel={monthPickerConfirmLabel}
               cancelButtonLabel={monthPickerCancelLabel}
               value={value?.startDate}

package/src/components/Calendar/index.tsx

@@ -252,6 +252,7 @@ const Calendar = ({
             minimumDate={minDate}
             maximumDate={maxDate}
             onChange={onMonthChange}
+            textColor={theme.colors.onDefaultGlobalSurface}
             style={{
               height:
                 contentHeight +
@@ -334,6 +335,7 @@ const Calendar = ({
 
           {Platform.OS === 'android' && monthPickerVisible && (
             <MonthYearPickerDialogueAndroid
+              themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
               doneButtonLabel={monthPickerConfirmLabel}
               cancelButtonLabel={monthPickerCancelLabel}
               value={value}

package/src/components/Card/DataCard/StyledDataCard.tsx

@@ -5,6 +5,7 @@ const StyledDataCard = styled(View)(({ theme }) => ({
   borderRadius: theme.__hd__.card.radii.default,
   overflow: 'hidden',
   flexDirection: 'row',
+  backgroundColor: theme.__hd__.card.colors.dataCardBackground,
 }));
 
 const Indicator = styled(View)<{

package/src/components/Card/DataCard/__tests__/__snapshots__/StyledDataCard.spec.tsx.snap

@@ -276,6 +276,7 @@ exports[`StyledDataCard renders correctly 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",

package/src/components/Card/DataCard/__tests__/__snapshots__/index.spec.tsx.snap

@@ -12,6 +12,7 @@ exports[`DataCard renders correctly when intent is archived 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",
@@ -70,6 +71,7 @@ exports[`DataCard renders correctly when intent is danger 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",
@@ -128,6 +130,7 @@ exports[`DataCard renders correctly when intent is info 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",
@@ -186,6 +189,7 @@ exports[`DataCard renders correctly when intent is success 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",
@@ -244,6 +248,7 @@ exports[`DataCard renders correctly when intent is warning 1`] = `
     style={
       [
         {
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "flexDirection": "row",
           "overflow": "hidden",

package/src/components/Card/StyledCard.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/native';
 const StyledCard = styled(View)<{
   themeIntent?:
     | 'primary'
+    | 'secondary'
     | 'success'
     | 'warning'
     | 'danger'

package/src/components/Card/__tests__/__snapshots__/index.spec.tsx.snap

@@ -132,7 +132,7 @@ exports[`Card renders correctly when intent is danger 1`] = `
 </View>
 `;
 
-exports[`Card renders correctly when intent is info 1`] = `
+exports[`Card renders correctly when intent is neutral 1`] = `
 <View
   style={
     {
@@ -144,14 +144,14 @@ exports[`Card renders correctly when intent is info 1`] = `
     style={
       [
         {
-          "backgroundColor": "#b5c3fd",
+          "backgroundColor": "#f6f6f7",
           "borderRadius": 12,
           "overflow": "hidden",
         },
         undefined,
       ]
     }
-    themeIntent="info"
+    themeIntent="neutral"
     themeVariant="basic"
   >
     <Text
@@ -264,7 +264,7 @@ exports[`Card renders correctly when intent is primary 1`] = `
 </View>
 `;
 
-exports[`Card renders correctly when intent is subdued 1`] = `
+exports[`Card renders correctly when intent is secondary 1`] = `
 <View
   style={
     {
@@ -276,13 +276,14 @@ exports[`Card renders correctly when intent is subdued 1`] = `
     style={
       [
         {
+          "backgroundColor": "#ece8ef",
           "borderRadius": 12,
           "overflow": "hidden",
         },
         undefined,
       ]
     }
-    themeIntent="subdued"
+    themeIntent="secondary"
     themeVariant="basic"
   >
     <Text
@@ -458,3 +459,69 @@ exports[`Card renders correctly when intent is undefined 1`] = `
   />
 </View>
 `;
+
+exports[`Card renders correctly when intent is warning 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#ffbe71",
+          "borderRadius": 12,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="warning"
+    themeVariant="basic"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Card Content
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

package/src/components/Card/__tests__/index.spec.tsx

@@ -33,11 +33,12 @@ describe('Card', () => {
     intent
     ${undefined}
     ${'primary'}
+    ${'secondary'}
     ${'success'}
-    ${'info'}
+    ${'warning'}
     ${'danger'}
     ${'archived'}
-    ${'subdued'}
+    ${'neutral'}
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Card intent={intent}>

package/src/components/Card/index.tsx

@@ -14,6 +14,7 @@ export interface CardProps extends ViewProps {
    */
   intent?:
     | 'primary'
+    | 'secondary'
     | 'success'
     | 'warning'
     | 'danger'

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -7,6 +7,7 @@ import { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-
 import TextInput from '../TextInput';
 import type { DatePickerProps } from './types';
 import useCalculateDate from './useCalculateDate';
+import { useTheme } from '../../theme';
 
 type DatePickerAndroidProps = Omit<
   DatePickerProps,
@@ -35,6 +36,7 @@ const DatePickerAndroid = ({
   const pickerInitValue = value || new Date();
 
   useCalculateDate({ minDate, maxDate, onChange, value });
+  const theme = useTheme();
 
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
@@ -54,6 +56,7 @@ const DatePickerAndroid = ({
       </View>
       {open && variant === 'month-year' ? (
         <MonthYearPickerDialogueAndroid
+          themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
           value={value}
           minimumDate={minDate}
           maximumDate={maxDate}

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -86,6 +86,7 @@ const DatePickerIOS = ({
               value={value}
               locale={locale}
               minimumDate={minDate}
+              textColor={theme.colors.onDefaultGlobalSurface}
               maximumDate={maxDate}
               onChange={(date: Date | undefined) => {
                 if (date) {

package/src/components/DatePicker/types.ts

@@ -81,4 +81,8 @@ export interface DatePickerProps {
    * Locale for the date picker, iOS only.
    */
   locale?: string;
+  /**
+   * [Android only] autoTheme will automatically set the theme based on the device's light mode or dark mode.
+   * */
+  autoTheme?: boolean;
 }

package/src/components/Icon/HeroIcon/index.tsx

@@ -2,7 +2,13 @@ import { createIconSet } from 'react-native-vector-icons';
 import styled from '@emotion/native';
 import glyphMap from './glyphMap.json';
 
-type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type ThemeSize =
+  | 'xxxsmall'
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge';
 type ThemeIntent =
   | 'text'
   | 'primary'

package/src/components/Icon/index.tsx

@@ -29,7 +29,7 @@ export interface IconProps extends AccessibilityProps {
   /**
    * Size of the Icon.
    */
-  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  size?: 'xxxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
    * Rotate icon with animation.
    */

package/src/components/Image/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Image as RNImage } from 'react-native';
 import type { ImageProps as RNImageProps } from 'react-native';
 import { useTheme } from '../../theme';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface ImageProps extends RNImageProps {
   /**
@@ -25,6 +26,10 @@ const Image = ({
   style,
   ...imageNativeProps
 }: ImageProps): JSX.Element => {
+  useDeprecation(
+    'Image component will soon be deprecated. Please use `Image` from `react-native` instead.'
+  );
+
   const theme = useTheme();
   const imageSize = theme.__hd__.image.sizes[size];
   return (

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

@@ -348,10 +348,12 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "archived": "#abacaf",
         "danger": "#f46363",
+        "dataCardBackground": "#f6f6f7",
         "dataCardIndicator": "#401960",
         "info": "#b5c3fd",
         "neutral": "#f6f6f7",
         "primary": "#401960",
+        "secondary": "#ece8ef",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -683,6 +685,7 @@ exports[`theme returns correct theme object 1`] = `
         "small": 20,
         "xlarge": 32,
         "xsmall": 16,
+        "xxxsmall": 12,
       },
     },
     "image": {
@@ -1745,5 +1748,6 @@ exports[`theme returns correct theme object 1`] = `
     "xxxlarge": 48,
     "xxxxlarge": 56,
   },
+  "themeMode": undefined,
 }
 `;

package/src/theme/components/card.ts

@@ -4,12 +4,14 @@ const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
     dataCardIndicator: theme.colors.primary,
     primary: theme.colors.primary,
+    secondary: theme.colors.highlightedSurface,
     info: theme.colors.info,
     success: theme.colors.success,
     warning: theme.colors.warning,
     danger: theme.colors.error,
     archived: theme.colors.archived,
     neutral: theme.colors.neutralGlobalSurface,
+    dataCardBackground: theme.colors.neutralGlobalSurface,
   };
 
   const sizes = {