@hero-design/rn 7.22.1 → 7.22.2

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

@@ -26,12 +26,16 @@ exports[`TimePickerAndroid renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={

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

@@ -26,12 +26,16 @@ exports[`TimePickerIOS renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={

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

@@ -424,8 +424,8 @@ Object {
     },
     "list": Object {
       "colors": Object {
-        "checkedListItemContainerBackground": "#f3e6f6",
-        "highlightedListItemContainerBackground": "#f3e6f6",
+        "checkedListItemContainerBackground": "#ECE8EF",
+        "highlightedListItemContainerBackground": "#ECE8EF",
         "leadingStatus": Object {
           "archived": "#bfc1c5",
           "danger": "#e3602a",
@@ -441,6 +441,7 @@ Object {
         "enabled": 1,
       },
       "radii": Object {
+        "basicItem": 4,
         "card": 8,
         "cardShadow": 4,
         "leadingStatus": 999,
@@ -914,6 +915,7 @@ Object {
     "__alpha__globalPrimary": "#001f23",
     "__alpha__globalSecondary1": "#4d6265",
     "__alpha__globalSecondary4": "#e6e9e9",
+    "__alpha__lightHighlightedSurface": "#ECE8EF",
     "__alpha__primary1": "#401960",
     "__alpha__primary2": "#c38cee",
     "__alpha__secondary1": "#795e90",

package/src/theme/components/list.ts

@@ -2,8 +2,10 @@ import type { GlobalTheme } from '../global';
 
 const getListTheme = (theme: GlobalTheme) => {
   const colors = {
-    checkedListItemContainerBackground: theme.colors.primaryBackground,
-    highlightedListItemContainerBackground: theme.colors.primaryBackground,
+    checkedListItemContainerBackground:
+      theme.colors.__alpha__lightHighlightedSurface,
+    highlightedListItemContainerBackground:
+      theme.colors.__alpha__lightHighlightedSurface,
     listItemContainerBackground: theme.colors.platformBackground,
     leadingStatus: {
       danger: theme.colors.dangerMediumLight,
@@ -23,6 +25,7 @@ const getListTheme = (theme: GlobalTheme) => {
 
   const radii = {
     card: theme.radii.medium,
+    basicItem: theme.radii.base,
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded,
   };

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

@@ -73,6 +73,7 @@ const swagSystemPalette: SystemPalette = {
   __alpha__secondary2: swagPalette.scarletGumLight50,
   __alpha__secondary3: swagPalette.scarletGumLight80,
   __alpha__secondary4: swagPalette.scarletGumLight90,
+  __alpha__lightHighlightedSurface: '#ECE8EF',
 };
 
 export default swagSystemPalette;

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

@@ -67,4 +67,5 @@ export type SystemPalette = {
   __alpha__secondary2: string;
   __alpha__secondary3: string;
   __alpha__secondary4: string;
+  __alpha__lightHighlightedSurface: string;
 };

package/types/components/TextInput/StyledTextInput.d.ts

@@ -3,6 +3,8 @@ export declare type Variant = 'default' | 'filled' | 'focused' | 'disabled' | 'r
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
+} & {
+    themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
@@ -68,14 +70,6 @@ declare const StyledTextInput: import("@emotion/native").StyledComponent<import(
 }, {}, {
     ref?: import("react").Ref<TextInput>;
 }>;
-declare const StyledBorderBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
-} & {
-    themeVariant: Variant;
-}, {}, {
-    ref?: import("react").Ref<View>;
-}>;
 declare const StyledTextInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
@@ -100,4 +94,4 @@ declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").Styled
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
-export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };
+export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledErrorAndMaxLengthContainer, };

package/types/components/TextInput/index.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from "react-native";
-import type { Variant } from "./StyledTextInput";
-import type { IconName } from "../Icon";
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { Variant } from './StyledTextInput';
+import type { IconName } from '../Icon';
 export interface TextInputProps extends NativeTextInputProps {
     /**
      * Field label.

package/types/theme/components/list.d.ts

@@ -20,6 +20,7 @@ declare const getListTheme: (theme: GlobalTheme) => {
     };
     radii: {
         card: number;
+        basicItem: number;
         cardShadow: number;
         leadingStatus: number;
     };

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

@@ -61,4 +61,5 @@ export declare type SystemPalette = {
     __alpha__secondary2: string;
     __alpha__secondary3: string;
     __alpha__secondary4: string;
+    __alpha__lightHighlightedSurface: string;
 };

package/types/theme/global/index.d.ts

@@ -67,6 +67,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         __alpha__secondary2: string;
         __alpha__secondary3: string;
         __alpha__secondary4: string;
+        __alpha__lightHighlightedSurface: string;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;