sapo-components-ui-rn 1.0.0

package/src/theme/green.ts

@@ -0,0 +1,27 @@
+const GREEN180 = "#002C22";
+const GREEN160 = "#004F3B";
+const GREEN140 = "#006045";
+const GREEN120 = "#0DB473";
+const GREEN100 = "#009966";
+const GREEN80 = "#00BC7D";
+const GREEN60 = "#00D492";
+const GREEN40 = "#5EE9B5";
+const GREEN20 = "#A4F4CF";
+const GREEN10 = "#D0FAE5";
+const GREEN5 = "#ECFDF5";
+const GREEN_STATUS = "#0DB473";
+
+export default {
+  GREEN180,
+  GREEN160,
+  GREEN140,
+  GREEN120,
+  GREEN100,
+  GREEN80,
+  GREEN60,
+  GREEN40,
+  GREEN20,
+  GREEN10,
+  GREEN5,
+  GREEN_STATUS,
+};

package/src/theme/icon.ts

@@ -0,0 +1,7 @@
+const ICON100 = "#46515F"
+const ICON50 = "#A1A5AB";
+
+export default {
+  ICON100,
+  ICON50,
+};

package/src/theme/ink.ts

@@ -0,0 +1,18 @@
+const INK100 = "#09090B";
+const INK90 = "#27272A";
+const INK80 = "#27272A";
+const INK60 = "#696A6E";
+const INK40 = "#84868A";
+const INK20 = "#C8C9CC";
+const INK10 = "#EAEBED";
+const INK5 = "#F4F5F7";
+export default {
+  INK100,
+  INK90,
+  INK80,
+  INK60,
+  INK40,
+  INK20,
+  INK10,
+  INK5,
+};

package/src/theme/orange.ts

@@ -0,0 +1,24 @@
+const ORANGE180 = "#441306";
+const ORANGE160 = "#7E2A0C";
+const ORANGE140 = "#9F2D00";
+const ORANGE120 = "#CA3500";
+const ORANGE100 = "#F54900";
+const ORANGE80 = "#FF6900";
+const ORANGE60 = "#FF8904";
+const ORANGE40 = "#FFB86A";
+const ORANGE20 = "#FFD6A7";
+const ORANGE10 = "#FFEDD4";
+const ORANGE5 = "#FFF7ED";
+export default {
+  ORANGE180,
+  ORANGE160,
+  ORANGE140,
+  ORANGE120,
+  ORANGE100,
+  ORANGE80,
+  ORANGE60,
+  ORANGE40,
+  ORANGE20,
+  ORANGE10,
+  ORANGE5,
+};

package/src/theme/purple.ts

@@ -0,0 +1,8 @@
+const PURPLE100 = "#5364FE";
+const PURPLE5 = "#EEF2FD";
+const PURPLE_BG = "##BAC1FF";
+export default {
+  PURPLE100,
+  PURPLE5,
+  PURPLE_BG,
+};

package/src/theme/red.ts

@@ -0,0 +1,26 @@
+const RED180 = "#460809";
+const RED160 = "#82181A";
+const RED140 = "#9F0712";
+const RED120 = "#C10007";
+const RED100 = "#E7000B";
+const RED80 = "#FB2C36";
+const RED60 = "#FF6467";
+const RED40 = "#FFA2A2";
+const RED20 = "#FFC9C9";
+const RED10 = "#FFE2E2";
+const RED5 = "#FFF3F2";
+const RED_STATUS = "#EE4747";
+export default {
+  RED180,
+  RED160,
+  RED140,
+  RED120,
+  RED100,
+  RED80,
+  RED60,
+  RED40,
+  RED20,
+  RED10,
+  RED5,
+  RED_STATUS,
+};

package/src/theme/themes.tsx

@@ -0,0 +1,287 @@
+import blue from "./blue";
+import green from "./green";
+import ink from "./ink";
+import purple from "./purple";
+import red from "./red";
+import white from "./white";
+import yellow from "./yellow";
+
+export const THEME_SUPPORT = {
+  LIGHT: "light",
+  DARK: "dark",
+};
+
+export default {
+  dark: {
+    dark: true,
+    colors: {
+      primary: blue.BLUE100,
+      background: ink.INK100,
+      card: white.WHITE100,
+      text: white.WHITE100,
+      border: ink.INK10,
+      gray: ink.INK60,
+      backgroundLight: ink.INK80,
+      //new theme colors
+      backgroundPrimary: ink.INK5,
+      backgroundSecondary: white.WHITE100,
+      borderBrandDefault: blue.BLUE100,
+      borderCriticalDefault: red.RED100,
+      borderCriticalHover: red.RED80,
+      borderCriticalPressed: red.RED120,
+      borderErrorDefault: red.RED100,
+      borderInfoDefault: blue.BLUE100,
+      borderPrimaryDefault: ink.INK10,
+      borderPrimaryDisabled: ink.INK10,
+      borderPrimaryHovered: ink.INK20,
+      borderPrimaryInverseDefault: blue.BLUE100,
+      borderPrimaryPressed: blue.BLUE100,
+      borderSuccessDefault: green.GREEN100,
+      borderWarningDefault: yellow.YELLOW100,
+      iconBrandDefault: blue.BLUE100,
+      iconCriticalDefault: red.RED100,
+      iconErrorDefault: red.RED100,
+      iconInfoDefault: blue.BLUE100,
+      iconPrimaryDefault: ink.INK40,
+      iconPrimaryHover: ink.INK60,
+      iconPrimaryDisabled: ink.INK60,
+      iconPrimaryInverseDefault: white.WHITE100,
+      iconPrimaryInverseHover: white.WHITE80,
+      iconPrimaryInversePressed: white.WHITE80,
+      iconPrimaryPressed: ink.INK60,
+      iconSuccessDefault: green.GREEN100,
+      iconWarningDefault: yellow.YELLOW100,
+      surfaceBrandDefault: blue.BLUE100,
+      surfaceBrandDisabled: ink.INK10,
+      surfaceBrandHover: blue.BLUE80,
+      surfaceBrandInverseDefault: blue.BLUE10,
+      surfaceBrandInverseHover: blue.BLUE20,
+      surfaceBrandInversePressed: blue.BLUE40,
+      surfaceBrandPressed: blue.BLUE120,
+      surfaceCriticalDefault: red.RED100,
+      surfaceCriticalDisabled: ink.INK10,
+      surfaceCriticalHover: red.RED80,
+      surfaceCriticalInverseDefault: red.RED10,
+      surfaceCriticalInverseHover: red.RED20,
+      surfaceCriticalInversePressed: red.RED40,
+      surfaceCriticalPressed: red.RED120,
+      surfaceErrorDefault: red.RED100,
+      surfaceErrorDisabled: ink.INK10,
+      surfaceErrorHover: red.RED80,
+      surfaceErrorInverseDefault: red.RED10,
+      surfaceErrorInverseHover: red.RED20,
+      surfaceErrorInversePressed: red.RED40,
+      surfaceErrorPressed: red.RED_STATUS,
+      surfaceInfoDefault: blue.BLUE100,
+      surfaceInfoDisabled: ink.INK10,
+      surfaceInfoHover: blue.BLUE80,
+      surfaceInfoInverseDefault: blue.BLUE10,
+      surfaceInfoInverseHover: blue.BLUE20,
+      surfaceInfoInversePressed: blue.BLUE40,
+      surfaceInfoPressed: blue.BLUE120,
+      surfacePrimaryDefault: white.WHITE100,
+      surfacePrimaryDisabled: ink.INK10,
+      surfacePrimaryHover: ink.INK5,
+      surfacePrimaryInverseDefault: ink.INK80,
+      surfacePrimaryInverseHover: ink.INK60,
+      surfacePrimaryInversePressed: ink.INK40,
+      surfacePrimaryPressed: ink.INK10,
+      surfaceSecondaryDefault: ink.INK5,
+      surfaceSecondaryDisabled: ink.INK10,
+      surfaceSecondaryHover: ink.INK10,
+      surfaceSecondaryPressed: ink.INK20,
+      surfaceSuccessDefault: green.GREEN100,
+      surfaceSuccessDisabled: ink.INK10,
+      surfaceSuccessHover: green.GREEN80,
+      surfaceSuccessInverseDefault: green.GREEN10,
+      surfaceSuccessInverseHover: green.GREEN20,
+      surfaceSuccessInversePressed: green.GREEN40,
+      surfaceSuccessPressed: green.GREEN_STATUS,
+      surfaceWarningDefault: yellow.YELLOW100,
+      surfaceWarningDisabled: ink.INK10,
+      surfaceWarningHover: yellow.YELLOW80,
+      surfaceWarningInverseDefault: yellow.YELLOW10,
+      surfaceWarningInverseHover: yellow.YELLOW20,
+      surfaceWarningInversePressed: yellow.YELLOW40,
+      surfaceWarningPressed: yellow.YELLOW120,
+      textDefault: ink.INK100,
+      textDisabled: ink.INK20,
+      textPlaceholder: ink.INK40,
+      textSecondary: ink.INK60,
+      textBrandDefault: blue.BLUE100,
+      textBrandDisabled: ink.INK20,
+      textBrandHovered: blue.BLUE80,
+      textBrandPressed: blue.BLUE120,
+      textCriticalDefault: red.RED100,
+      textCriticalDisabled: ink.INK20,
+      textCriticalHovered: red.RED80,
+      textCriticalPressed: red.RED_STATUS,
+      textErrorDefault: red.RED100,
+      textErrorDisabled: ink.INK20,
+      textErrorHovered: red.RED80,
+      textErrorPressed: red.RED_STATUS,
+      textInfoDefault: blue.BLUE100,
+      textInfoDisabled: ink.INK20,
+      textInfoHovered: blue.BLUE80,
+      textInfoPressed: blue.BLUE120,
+      textLinkDefault: blue.BLUE100,
+      textLinkDisabled: ink.INK20,
+      textLinkHovered: blue.BLUE80,
+      textLinkPressed: blue.BLUE120,
+      textLinkVisitedDefault: purple.PURPLE100,
+      textLinkVisitedDisabled: purple.PURPLE_BG,
+      textLinkVisitedHovered: purple.PURPLE_BG,
+      textLinkVisitedPressed: purple.PURPLE_BG,
+      textOnFillDefault: white.WHITE100,
+      textOnFillDisabled: white.WHITE20,
+      textOnFillHovered: white.WHITE80,
+      textOnFillPressed: white.WHITE80,
+      textSuccessDefault: green.GREEN100,
+      textSuccessDisabled: ink.INK20,
+      textSuccessHovered: green.GREEN80,
+      textSuccessPressed: green.GREEN_STATUS,
+      textWarningDefault: yellow.YELLOW100,
+      textWarningDisabled: ink.INK20,
+      textWarningHovered: yellow.YELLOW80,
+      textWarningPressed: yellow.YELLOW_STATUS,
+      selectBackgroundDisabled: white.WHITE40,
+      selectIconDisabled: white.WHITE40,
+    },
+  },
+  light: {
+    dark: false,
+    colors: {
+      primary: blue.BLUE100,
+      background: white.WHITE100,
+      card: ink.INK100,
+      text: ink.INK100,
+      border: ink.INK40,
+      gray: ink.INK60,
+      backgroundLight: ink.INK10,
+      //new theme colors
+      backgroundPrimary: ink.INK5,
+      backgroundSecondary: white.WHITE100,
+      borderBrandDefault: blue.BLUE100,
+      borderCriticalDefault: red.RED100,
+      borderCriticalHover: red.RED80,
+      borderCriticalPressed: red.RED120,
+      borderErrorDefault: red.RED100,
+      borderInfoDefault: blue.BLUE100,
+      borderPrimaryDefault: ink.INK10,
+      borderPrimaryDisabled: ink.INK10,
+      borderPrimaryHovered: ink.INK20,
+      borderPrimaryInverseDefault: blue.BLUE100,
+      borderPrimaryPressed: blue.BLUE100,
+      borderSuccessDefault: green.GREEN100,
+      borderWarningDefault: yellow.YELLOW100,
+      iconBrandDefault: blue.BLUE100,
+      iconCriticalDefault: red.RED100,
+      iconErrorDefault: red.RED100,
+      iconInfoDefault: blue.BLUE100,
+      iconPrimaryDefault: ink.INK40,
+      iconPrimaryHover: ink.INK60,
+      iconPrimaryDisabled: ink.INK60,
+      iconPrimaryInverseDefault: white.WHITE100,
+      iconPrimaryInverseHover: white.WHITE80,
+      iconPrimaryInversePressed: white.WHITE80,
+      iconPrimaryPressed: ink.INK60,
+      iconSuccessDefault: green.GREEN100,
+      iconWarningDefault: yellow.YELLOW100,
+      surfaceBrandDefault: blue.BLUE100,
+      surfaceBrandDisabled: ink.INK10,
+      surfaceBrandHover: blue.BLUE80,
+      surfaceBrandInverseDefault: blue.BLUE10,
+      surfaceBrandInverseHover: blue.BLUE20,
+      surfaceBrandInversePressed: blue.BLUE40,
+      surfaceBrandPressed: blue.BLUE120,
+      surfaceCriticalDefault: red.RED100,
+      surfaceCriticalDisabled: ink.INK10,
+      surfaceCriticalHover: red.RED80,
+      surfaceCriticalInverseDefault: red.RED10,
+      surfaceCriticalInverseHover: red.RED20,
+      surfaceCriticalInversePressed: red.RED40,
+      surfaceCriticalPressed: red.RED120,
+      surfaceErrorDefault: red.RED100,
+      surfaceErrorDisabled: ink.INK10,
+      surfaceErrorHover: red.RED80,
+      surfaceErrorInverseDefault: red.RED10,
+      surfaceErrorInverseHover: red.RED20,
+      surfaceErrorInversePressed: red.RED40,
+      surfaceErrorPressed: red.RED_STATUS,
+      surfaceInfoDefault: blue.BLUE100,
+      surfaceInfoDisabled: ink.INK10,
+      surfaceInfoHover: blue.BLUE80,
+      surfaceInfoInverseDefault: blue.BLUE10,
+      surfaceInfoInverseHover: blue.BLUE20,
+      surfaceInfoInversePressed: blue.BLUE40,
+      surfaceInfoPressed: blue.BLUE120,
+      surfacePrimaryDefault: white.WHITE100,
+      surfacePrimaryDisabled: ink.INK5,
+      surfacePrimaryHover: ink.INK5,
+      surfacePrimaryInverseDefault: ink.INK80,
+      surfacePrimaryInverseHover: ink.INK60,
+      surfacePrimaryInversePressed: ink.INK40,
+      surfacePrimaryPressed: ink.INK10,
+      surfaceSecondaryDefault: ink.INK5,
+      surfaceSecondaryDisabled: ink.INK5,
+      surfaceSecondaryHover: ink.INK10,
+      surfaceSecondaryPressed: ink.INK20,
+      surfaceSuccessDefault: green.GREEN100,
+      surfaceSuccessDisabled: ink.INK10,
+      surfaceSuccessHover: green.GREEN80,
+      surfaceSuccessInverseDefault: green.GREEN10,
+      surfaceSuccessInverseHover: green.GREEN20,
+      surfaceSuccessInversePressed: green.GREEN40,
+      surfaceSuccessPressed: green.GREEN_STATUS,
+      surfaceWarningDefault: yellow.YELLOW100,
+      surfaceWarningDisabled: ink.INK10,
+      surfaceWarningHover: yellow.YELLOW80,
+      surfaceWarningInverseDefault: yellow.YELLOW10,
+      surfaceWarningInverseHover: yellow.YELLOW20,
+      surfaceWarningInversePressed: yellow.YELLOW40,
+      surfaceWarningPressed: yellow.YELLOW120,
+      textDefault: ink.INK100,
+      textDisabled: ink.INK20,
+      textPlaceholder: ink.INK40,
+      textSecondary: ink.INK60,
+      textBrandDefault: blue.BLUE100,
+      textBrandDisabled: ink.INK20,
+      textBrandHovered: blue.BLUE80,
+      textBrandPressed: blue.BLUE120,
+      textCriticalDefault: red.RED100,
+      textCriticalDisabled: ink.INK20,
+      textCriticalHovered: red.RED80,
+      textCriticalPressed: red.RED_STATUS,
+      textErrorDefault: red.RED100,
+      textErrorDisabled: ink.INK20,
+      textErrorHovered: red.RED80,
+      textErrorPressed: red.RED_STATUS,
+      textInfoDefault: blue.BLUE100,
+      textInfoDisabled: ink.INK20,
+      textInfoHovered: blue.BLUE80,
+      textInfoPressed: blue.BLUE120,
+      textLinkDefault: blue.BLUE100,
+      textLinkDisabled: ink.INK20,
+      textLinkHovered: blue.BLUE80,
+      textLinkPressed: blue.BLUE120,
+      textLinkVisitedDefault: purple.PURPLE100,
+      textLinkVisitedDisabled: purple.PURPLE_BG,
+      textLinkVisitedHovered: purple.PURPLE_BG,
+      textLinkVisitedPressed: purple.PURPLE_BG,
+      textOnFillDefault: white.WHITE100,
+      textOnFillDisabled: white.WHITE20,
+      textOnFillHovered: white.WHITE80,
+      textOnFillPressed: white.WHITE80,
+      textSuccessDefault: green.GREEN100,
+      textSuccessDisabled: ink.INK20,
+      textSuccessHovered: green.GREEN80,
+      textSuccessPressed: green.GREEN_STATUS,
+      textWarningDefault: yellow.YELLOW100,
+      textWarningDisabled: ink.INK20,
+      textWarningHovered: yellow.YELLOW80,
+      textWarningPressed: yellow.YELLOW_STATUS,
+      selectBackgroundDisabled: white.WHITE40,
+      selectIconDisabled: white.WHITE40,
+    },
+  },
+};

package/src/theme/white.ts

@@ -0,0 +1,16 @@
+const WHITE100 = "rgba(255, 255, 255, 1)";
+const WHITE80 = "rgba(255, 255, 255, 0.8)";
+const WHITE60 = "rgba(255, 255, 255, 0.6)";
+const WHITE40 = "rgba(255, 255, 255, 0.4)";
+const WHITE20 = "rgba(255, 255, 255, 0.2)";
+const WHITE10 = "rgba(255, 255, 255, 0.1)";
+const WHITE5 = "rgba(255, 255, 255, 0.05)";
+export default {
+  WHITE100,
+  WHITE80,
+  WHITE60,
+  WHITE40,
+  WHITE20,
+  WHITE10,
+  WHITE5,
+};

package/src/theme/yellow.ts

@@ -0,0 +1,26 @@
+const YELLOW180 = "#432004";
+const YELLOW160 = "#733E0A";
+const YELLOW140 = "#894B00";
+const YELLOW120 = "#A65F00";
+const YELLOW100 = "#D08700";
+const YELLOW80 = "#F0B100";
+const YELLOW60 = "#FDC700";
+const YELLOW40 = "#FFDF20";
+const YELLOW20 = "#FFF085";
+const YELLOW10 = "#FEF9C2";
+const YELLOW5 = "#FEFCE8";
+const YELLOW_STATUS = "#E49C06";
+export default {
+  YELLOW180,
+  YELLOW160,
+  YELLOW140,
+  YELLOW120,
+  YELLOW100,
+  YELLOW80,
+  YELLOW60,
+  YELLOW40,
+  YELLOW20,
+  YELLOW10,
+  YELLOW5,
+  YELLOW_STATUS,
+};

package/src/types/index.ts

@@ -0,0 +1,71 @@
+import { ColorValue, TextStyle, ViewStyle } from 'react-native';
+
+export interface Theme {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    surface: string;
+    accent: string;
+    error: string;
+    text: string;
+    disabled: string;
+    placeholder: string;
+    backdrop: string;
+    notification: string;
+  };
+  fonts: {
+    regular: TextStyle;
+    medium: TextStyle;
+    light: TextStyle;
+    thin: TextStyle;
+  };
+  animation: {
+    scale: number;
+  };
+}
+
+export interface ComponentProps {
+  style?: ViewStyle;
+  theme?: Theme;
+}
+
+export interface TextProps extends ComponentProps {
+  color?: ColorValue;
+  size?: number;
+  weight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+  align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+}
+
+export interface ButtonProps extends ComponentProps {
+  onPress?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  mode?: 'text' | 'outlined' | 'contained';
+  color?: string;
+  dark?: boolean;
+  compact?: boolean;
+  contentStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+}
+
+export interface CardProps extends ComponentProps {
+  onPress?: () => void;
+  elevation?: number;
+}
+
+export interface TextInputProps extends ComponentProps {
+  value: string;
+  onChangeText?: (text: string) => void;
+  placeholder?: string;
+  secureTextEntry?: boolean;
+  keyboardType?: 'default' | 'number-pad' | 'decimal-pad' | 'numeric' | 'email-address' | 'phone-pad';
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  autoCorrect?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  multiline?: boolean;
+  numberOfLines?: number;
+  maxLength?: number;
+  label?: string;
+} 

package/src/types/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}