@adiraku/react-native-ui 1.2.9-canary-7 → 2.0.0-canary-2

package/lib/typescript/config/theme.default.d.ts

@@ -0,0 +1,178 @@
+import { TextStyle } from 'react-native';
+import { TypographyProps } from '../components';
+export declare const defaultFontFamily: {
+    regular: string;
+    regularItalic: string;
+    semibold: string;
+    semiboldItalic: string;
+    bold: string;
+    boldItalic: string;
+};
+export declare type FontFamilyStyleType = Record<NonNullable<TypographyProps['variant']>, TextStyle & {
+    fontType?: keyof typeof defaultFontFamily;
+}>;
+export declare const defaultFontFamilyStyle: FontFamilyStyleType;
+export declare const defaultTheme: {
+    colors: {
+        light: {
+            'border-primary': string;
+            'border-default': string;
+            'border-inverse': string;
+            'border-input': string;
+            'border-info': string;
+            'border-disable': string;
+            'border-warning': string;
+            'border-success': string;
+            'border-danger': string;
+            'icon-primary': string;
+            'icon-secondary': string;
+            'icon-inverse': string;
+            'icon-disable': string;
+            'icon-disable-secondary': string;
+            'icon-danger': string;
+            'icon-info': string;
+            'icon-warning': string;
+            'icon-warning-secondary': string;
+            'icon-success': string;
+            'icon-orange': string;
+            'surface-primary': string;
+            'surface-secondary': string;
+            'surface-disable': string;
+            'surface-warning': string;
+            'surface-danger': string;
+            'surface-info': string;
+            'surface-success': string;
+            'fill-primary': string;
+            'fill-secondary': string;
+            'fill-inverse': string;
+            'fill-disable': string;
+            'fill-disable-secondary': string;
+            'fill-info': string;
+            'fill-info-secondary': string;
+            'fill-danger': string;
+            'fill-danger-secondary': string;
+            'fill-warning': string;
+            'fill-warning-secondary': string;
+            'fill-success': string;
+            'fill-success-secondary': string;
+            'text-primary': string;
+            'text-secondary': string;
+            'text-inverse': string;
+            'text-disable': string;
+            'text-disable-secondary': string;
+            'text-danger': string;
+            'text-info': string;
+            'text-warning': string;
+            'text-success': string;
+            'button-primary': string;
+            'button-secondary': string;
+            'button-inverse': string;
+            'button-disable': string;
+            'button-danger': string;
+            'button-info': string;
+            'button-warning': string;
+            'button-success': string;
+        };
+        dark: {
+            'border-primary': string;
+            'border-default': string;
+            'border-inverse': string;
+            'border-input': string;
+            'border-info': string;
+            'border-disable': string;
+            'border-warning': string;
+            'border-success': string;
+            'border-danger': string;
+            'icon-primary': string;
+            'icon-secondary': string;
+            'icon-inverse': string;
+            'icon-disable': string;
+            'icon-disable-secondary': string;
+            'icon-danger': string;
+            'icon-info': string;
+            'icon-warning': string;
+            'icon-warning-secondary': string;
+            'icon-success': string;
+            'icon-orange': string;
+            'surface-primary': string;
+            'surface-secondary': string;
+            'surface-disable': string;
+            'surface-warning': string;
+            'surface-danger': string;
+            'surface-info': string;
+            'surface-success': string;
+            'fill-primary': string;
+            'fill-secondary': string;
+            'fill-inverse': string;
+            'fill-disable': string;
+            'fill-disable-secondary': string;
+            'fill-info': string;
+            'fill-info-secondary': string;
+            'fill-danger': string;
+            'fill-danger-secondary': string;
+            'fill-warning': string;
+            'fill-warning-secondary': string;
+            'fill-success': string;
+            'fill-success-secondary': string;
+            'text-primary': string;
+            'text-secondary': string;
+            'text-inverse': string;
+            'text-disable': string;
+            'text-disable-secondary': string;
+            'text-danger': string;
+            'text-info': string;
+            'text-warning': string;
+            'text-success': string;
+            'button-primary': string;
+            'button-secondary': string;
+            'button-inverse': string;
+            'button-disable': string;
+            'button-danger': string;
+            'button-info': string;
+            'button-warning': string;
+            'button-success': string;
+        };
+    };
+    Fonts: {
+        regular: string;
+        regularItalic: string;
+        semibold: string;
+        semiboldItalic: string;
+        bold: string;
+        boldItalic: string;
+    };
+    FontFamilyStyle: FontFamilyStyleType;
+    Border: {
+        1: number;
+        2: number;
+    };
+    Radius: {
+        4: number;
+        8: number;
+        12: number;
+        16: number;
+        24: number;
+        36: number;
+        full: number;
+        border: number;
+    };
+    Shadow: import("../themes").ShadowType;
+    Spacing: {
+        2: number;
+        4: number;
+        8: number;
+        12: number;
+        16: number;
+        20: number;
+        24: number;
+        28: number;
+        32: number;
+        36: number;
+        48: number;
+        64: number;
+    };
+};
+export declare type AppTheme = typeof defaultTheme;
+export declare type ColorScheme = keyof typeof defaultTheme.colors;
+export declare type ColorTokenType = typeof defaultTheme.colors.light;
+//# sourceMappingURL=theme.default.d.ts.map

package/lib/typescript/config/theme.default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.default.d.ts","sourceRoot":"","sources":["../../../src/config/theme.default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,iBAAiB;;;;;;;CAO7B,CAAC;AAEF,oBAAY,mBAAmB,GAAG,MAAM,CACtC,WAAW,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,EACvC,SAAS,GAAG;IACV,QAAQ,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;CAC3C,CACF,CAAC;AACF,eAAO,MAAM,sBAAsB,EAAE,mBAqRpC,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIxB,CAAC;AAEF,oBAAY,QAAQ,GAAG,OAAO,YAAY,CAAC;AAC3C,oBAAY,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC,MAAM,CAAC;AAC3D,oBAAY,cAAc,GAAG,OAAO,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC"}

package/lib/typescript/config/theme.provider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AppTheme } from './theme.default';
+import { ThemeProviderContext, ThemeProviderProps } from './theme.type';
+export declare const ThemeContext: React.Context<ThemeProviderContext>;
+export declare const createTheme: (theme: AppTheme) => AppTheme;
+export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+export declare const useAppTheme: () => ThemeProviderContext;
+//# sourceMappingURL=theme.provider.d.ts.map

package/lib/typescript/config/theme.provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.provider.d.ts","sourceRoot":"","sources":["../../../src/config/theme.provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,QAAQ,EAA6B,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAExE,eAAO,MAAM,YAAY,qCAExB,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,QAAQ,KAAG,QAE7C,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA0BtD;AAED,eAAO,MAAM,WAAW,4BAIvB,CAAC"}

package/lib/typescript/config/theme.type.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { AppTheme, ColorScheme } from './theme.default';
+export declare type ThemeProviderContext = {
+    colors: AppTheme['colors']['light'];
+    colorScheme: ColorScheme;
+    changeColorScheme: () => void;
+} & Pick<AppTheme, 'Border' | 'Radius' | 'Shadow' | 'Spacing' | 'Fonts' | 'FontFamilyStyle'>;
+export declare type ThemeProviderProps = PropsWithChildren & {
+    theme?: AppTheme;
+};
+export declare type AppThemeColor = Omit<ThemeProviderContext, 'changeColorScheme'>;
+//# sourceMappingURL=theme.type.d.ts.map

package/lib/typescript/config/theme.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.type.d.ts","sourceRoot":"","sources":["../../../src/config/theme.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAExD,oBAAY,oBAAoB,GAAG;IACjC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IACpC,WAAW,EAAE,WAAW,CAAC;IACzB,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,GAAG,IAAI,CACN,QAAQ,EACR,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,iBAAiB,CACzE,CAAC;AAEF,oBAAY,kBAAkB,GAAG,iBAAiB,GAAG;IACnD,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB,CAAC;AAEF,oBAAY,aAAa,GAAG,IAAI,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './themes';
+export * from './config';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/lib/typescript/themes/shadow.d.ts

@@ -1,6 +1,5 @@
 import type { ViewStyle } from 'react-native';
-declare type Shadows = 'shadow-elevation-1' | 'shadow-elevation-2' | 'shadow-elevation-3' | 'shadow-elevation-4';
-declare type ShadowType = Record<Shadows, ViewStyle>;
+export declare type Shadows = 'none' | 'shadow-elevation-1' | 'shadow-elevation-2' | 'shadow-elevation-3' | 'shadow-elevation-4';
+export declare type ShadowType = Record<Shadows, ViewStyle>;
 export declare const Shadow: ShadowType;
-export {};
 //# sourceMappingURL=shadow.d.ts.map

package/lib/typescript/themes/shadow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/themes/shadow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,aAAK,OAAO,GACR,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,CAAC;AAEzB,aAAK,UAAU,GAAG,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAE7C,eAAO,MAAM,MAAM,EAAE,UAqCpB,CAAC"}
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/themes/shadow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,oBAAY,OAAO,GACf,MAAM,GACN,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,GACpB,oBAAoB,CAAC;AAEzB,oBAAY,UAAU,GAAG,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAEpD,eAAO,MAAM,MAAM,EAAE,UAsCpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adiraku/react-native-ui",
-  "version": "1.2.9-canary-7",
+  "version": "2.0.0-canary-2",
   "description": "UI library for Adiraku apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -71,6 +71,7 @@
     "react-native-svg": "^13.9.0",
     "react-native-svg-web": "^1.0.9",
     "react-native-web": "^0.19.4",
+    "react-native-web-linear-gradient": "^1.1.2",
     "release-it": "^15.0.0",
     "typescript": "4.5.2"
   },
@@ -133,9 +134,12 @@
     ]
   },
   "dependencies": {
+    "deepmerge": "^4.3.1",
     "react-native-calendars": "^1.1306.0",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-mask-input": "^1.2.3",
     "react-native-modal": "^13.0.1",
+    "react-native-safe-area-context": "^4.11.0",
     "react-native-toast-message": "^2.1.6"
   }
 }

package/src/components/ActionList/ActionList.component.tsx

@@ -5,9 +5,10 @@ import { Typography } from '../typography/typography.component';
 import { getStyle } from './ActionList.styles';
 
 import type { ActionListProps } from './ActionList.type';
-import { Palettes } from '../../themes';
+import { useAppTheme } from '../../config';
 
 const ActionList: React.FC<ActionListProps> = (props) => {
+  const { colors } = useAppTheme();
   const {
     onPress = () => {},
     title,
@@ -20,34 +21,36 @@ const ActionList: React.FC<ActionListProps> = (props) => {
     ...rest
   } = props;
 
-  const computedStyle = getStyle({
-    ...props,
-  });
+  const computedStyle = getStyle(props);
 
   return (
     <TouchableHighlight
       onPress={onPress}
       disabled={disabled}
       {...rest}
-      underlayColor={Palettes.grey[50]}
+      underlayColor={colors['fill-secondary']}
     >
       <View style={[computedStyle.container, containerStyle]}>
         {leadingComponent && (
           <View style={computedStyle.leadingWrapper}>{leadingComponent}</View>
         )}
         <View style={computedStyle.textContainer}>
-          <Typography
-            variant={'subtitle2'}
-            textStyles={{ ...computedStyle.title, ...textStyles }}
-          >
-            {title}
-          </Typography>
-          <Typography
-            variant={'body2'}
-            textStyles={{ ...computedStyle.description, ...textStyles }}
-          >
-            {description}
-          </Typography>
+          {title && (
+            <Typography
+              variant={'subtitle2'}
+              textStyles={{ ...computedStyle.title, ...textStyles }}
+            >
+              {title}
+            </Typography>
+          )}
+          {description && (
+            <Typography
+              variant={'body2'}
+              textStyles={{ ...computedStyle.description, ...textStyles }}
+            >
+              {description}
+            </Typography>
+          )}
         </View>
         {trailingComponent && (
           <View style={computedStyle.trailingWrapper}>{trailingComponent}</View>

package/src/components/ActionList/ActionList.styles.tsx

@@ -1,8 +1,7 @@
-import type { TextStyle } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import { Palettes, Spacing } from '../../themes';
-import type { ActionListProps } from './ActionList.type';
+import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
+
+import { ActionListProps } from './ActionList.type';
+import { makeStyles } from '../../config';
 
 interface ComputedStyleProps {
   container?: ViewStyle;
@@ -13,7 +12,8 @@ interface ComputedStyleProps {
   trailingWrapper?: ViewStyle;
 }
 
-export const getStyle = (props: ActionListProps) => {
+export const getStyle = makeStyles((themes, props: ActionListProps) => {
+  const { Spacing, colors } = themes;
   const { disabled, isLast } = props;
 
   const computedStyle: ComputedStyleProps = {};
@@ -21,9 +21,9 @@ export const getStyle = (props: ActionListProps) => {
   computedStyle.container = {
     paddingVertical: 16,
     paddingHorizontal: disabled ? 16 : 0,
-    borderBottomColor: Palettes.black[400],
+    borderBottomColor: colors['border-default'],
     borderBottomWidth: disabled || isLast ? 0 : 0.5,
-    backgroundColor: disabled ? Palettes.grey[50] : 'transparent',
+    backgroundColor: disabled ? colors['fill-disable'] : 'transparent',
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
@@ -34,13 +34,13 @@ export const getStyle = (props: ActionListProps) => {
     fontWeight: '600',
     fontSize: 14,
     lineHeight: 21,
-    color: disabled ? Palettes.grey[500] : Palettes.black[900],
+    color: disabled ? colors['text-disable'] : colors['text-primary'],
   };
   computedStyle.description = {
     fontWeight: '400',
     fontSize: 14,
     lineHeight: 21,
-    color: disabled ? Palettes.grey[500] : Palettes.black[900],
+    color: disabled ? colors['text-disable'] : colors['text-primary'],
   };
 
   computedStyle.textContainer = {
@@ -61,4 +61,4 @@ export const getStyle = (props: ActionListProps) => {
   };
 
   return StyleSheet.create(computedStyle);
-};
+});

package/src/components/Appbar/Appbar.component.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { TouchableHighlight, View } from 'react-native';
+import { TouchableHighlight } from 'react-native';
 
-import { getStyle } from './Appbar.style';
+import { useStyles } from './Appbar.style';
 import { Palettes, Shadow } from '../../themes';
 import { IconArrowLeft } from '../../icons';
 import { Typography } from '../typography/typography.component';
+import { View } from '../View/View.component';
 
 import type { AppbarProps } from './Appbar.type';
 
@@ -23,7 +24,7 @@ const Appbar: React.FunctionComponent<AppbarProps> = (props) => {
     titleProps = {},
   } = props;
 
-  const computedStyle = getStyle(props);
+  const computedStyle = useStyles(props);
 
   return (
     <View

package/src/components/Appbar/Appbar.style.tsx

@@ -1,10 +1,7 @@
-import { StyleSheet } from 'react-native';
+import { TextStyle, ViewStyle } from 'react-native';
 
-import { Palettes, Radius, Spacing } from '../../themes';
 import { AppbarProps } from './Appbar.type';
-
-import type { ViewStyle } from 'react-native';
-import { TextStyle } from 'react-native';
+import { makeStyles } from '../../config';
 
 interface ComputedStyleProps {
   container?: ViewStyle;
@@ -14,8 +11,11 @@ interface ComputedStyleProps {
   title?: TextStyle;
 }
 
-export const getStyle = (props: AppbarProps) => {
-  const { statusBarHeight = 0, backgroundColor = Palettes.white[50] } = props;
+export const useStyles = makeStyles((themes, props: AppbarProps) => {
+  const { colors, Spacing, Radius } = themes;
+  const { statusBarHeight = 0, backgroundColor = colors['surface-primary'] } =
+    props;
+
   const computedStyle: ComputedStyleProps = {};
 
   computedStyle.container = {
@@ -50,5 +50,5 @@ export const getStyle = (props: AppbarProps) => {
     flex: 1,
   };
 
-  return StyleSheet.create(computedStyle);
-};
+  return computedStyle;
+});

package/src/components/BottomSheet/BottomSheet.component.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import Modal from 'react-native-modal';
 
-import { getStyle } from './BottomSheet.style';
+import { useStyles } from './BottomSheet.style';
 import { Typography } from '../typography/typography.component';
 
 import type { BottomSheetProps } from './BottomSheet.type';
@@ -44,7 +44,7 @@ const BottomSheet = React.forwardRef<BottomSheetRefHandle, BottomSheetProps>(
       ...rest
     } = props;
 
-    const computedStyle = getStyle();
+    const computedStyle = useStyles();
 
     const [visibility, setVisibility] = React.useState(false);
     const panY = React.useRef(new Animated.Value(deviceWindow.height)).current;

package/src/components/BottomSheet/BottomSheet.style.tsx

@@ -1,7 +1,7 @@
 import type { ViewStyle, TextStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
 
-import { Palettes, Radius, Spacing } from '../../themes';
+import { Radius, Spacing } from '../../themes';
+import { makeStyles } from '../../config';
 
 interface ComputedStyleProps {
   overlay?: ViewStyle;
@@ -21,7 +21,9 @@ interface ComputedStyleProps {
   subtitleText?: TextStyle;
 }
 
-export const getStyle = () => {
+export const useStyles = makeStyles((themes) => {
+  const { colors } = themes;
+
   const computedStyle: ComputedStyleProps = {};
 
   computedStyle.flex = {
@@ -34,7 +36,7 @@ export const getStyle = () => {
   };
 
   computedStyle.container = {
-    backgroundColor: Palettes.white[50],
+    backgroundColor: colors['surface-primary'],
     position: 'absolute',
     bottom: 0,
     width: '100%',
@@ -46,7 +48,7 @@ export const getStyle = () => {
     height: 5,
     width: 100,
     borderRadius: Radius.full,
-    backgroundColor: Palettes.grey[100],
+    backgroundColor: colors['icon-disable-secondary'],
   };
 
   computedStyle.sheetIndicatorWrapper = {
@@ -94,5 +96,5 @@ export const getStyle = () => {
     marginTop: Spacing[8],
   };
 
-  return StyleSheet.create(computedStyle);
-};
+  return computedStyle;
+});

package/src/components/CheckBoxInput/CheckBoxInput.component.tsx

@@ -2,30 +2,30 @@ import * as React from 'react';
 import {
   Animated,
   FlatList,
+  LayoutChangeEvent,
   View,
   TouchableHighlight,
   TouchableWithoutFeedback,
 } from 'react-native';
 
-import { getStyle } from './CheckBoxInput.style';
+import {
+  CheckboxInputProps,
+  CheckboxItemProps,
+  CheckboxItemPropsComponent,
+} from './CheckBoxInput.type';
+import { useStyles } from './CheckBoxInput.style';
 import { Typography } from '../typography/typography.component';
 import { BottomSheet } from '../BottomSheet/BottomSheet.component';
 import { Button } from '../button/button.component';
-import { Palettes } from '../../themes';
+import { useAppTheme } from '../../config';
 import { IconChevronDown } from '../../icons';
 import { Divider } from '../Divider/Divider.component';
-
-import type {
-  CheckboxInputProps,
-  CheckboxItemProps,
-  CheckboxItemPropsComponent,
-} from './CheckBoxInput.type';
 import { Checkbox } from '../Checkbox/Checkbox.component';
-
-import type { BottomSheetHandler } from '../BottomSheet/BottomSheet.component';
-import type { LayoutChangeEvent } from 'react-native';
+import { BottomSheetHandler } from '../BottomSheet/BottomSheet.component';
 
 const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
+  const { colors } = useAppTheme();
+
   const {
     value,
     label,
@@ -36,7 +36,7 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
     disabled,
     editable = true,
     inputIcon = (
-      <IconChevronDown width={14} height={14} fill={Palettes.black[900]} />
+      <IconChevronDown width={14} height={14} fill={colors['icon-primary']} />
     ),
     data,
     onSaveInput = () => {},
@@ -56,7 +56,7 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
     CheckboxItemProps[] | undefined
   >(value);
 
-  const computedStyle = getStyle(props);
+  const computedStyle = useStyles(props);
 
   const bottomSheetref = React.useRef<BottomSheetHandler>(null);
 
@@ -180,7 +180,7 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
                 computedStyle.inputWrapper,
                 !!selectedObject() &&
                   !isError &&
-                  !errorMessage && { borderColor: Palettes.black[900] },
+                  !errorMessage && { borderColor: colors['text-primary'] },
               ]}
             >
               <Typography
@@ -232,12 +232,10 @@ const CheckBoxInput: React.FunctionComponent<CheckboxInputProps> = (props) => {
               />
             );
           }}
-          // eslint-disable-next-line react-native/no-inline-styles
-          contentContainerStyle={{ padding: 16 }}
+          contentContainerStyle={computedStyle.sheetListContentContainer}
           ItemSeparatorComponent={() => customItemSeparator}
         />
-        {/* eslint-disable-next-line react-native/no-inline-styles */}
-        <View style={{ padding: 16, backgroundColor: 'transparent' }}>
+        <View style={[computedStyle.sheetBottomContaienr]}>
           <Button
             variant="primary"
             label={saveInputLabel}
@@ -257,14 +255,16 @@ function CheckboxItem({
   testID,
   ...rest
 }: CheckboxItemPropsComponent) {
+  const { colors } = useAppTheme();
+
   const { item } = data;
   const { label, value, disabled } = item;
-  const computedStyle = getStyle({} as CheckboxInputProps);
+  const computedStyle = useStyles({} as CheckboxInputProps);
 
   return (
     <TouchableHighlight
       onPress={() => onItemPress(item)}
-      underlayColor={Palettes.whiteDark[100]}
+      underlayColor={colors['fill-disable-secondary'] + 66}
       disabled={disabled}
       testID={testID + 'checkbox_item_touchable_' + data.index}
       accessibilityLabel={testID + 'checkbox_item_touchable_' + data.index}
@@ -277,6 +277,7 @@ function CheckboxItem({
           numberOfLines={2}
           testID={testID + 'checkbox_item_label_' + data.index}
           accessibilityLabel={testID + 'checkbox_item_label_' + data.index}
+          color={disabled ? 'text-disable' : 'text-primary'}
         >
           {label}
         </Typography>