@getsoren/react-native-design-system 1.32.1

package/lib/commonjs/config/theme.js

@@ -0,0 +1,718 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTheme = void 0;
+var _themed = require("@rneui/themed");
+var _reactNative = require("react-native");
+var _Colors = require("../constants/Colors");
+var _Fonts = _interopRequireDefault(require("../constants/Fonts"));
+var _hexToRgba = _interopRequireDefault(require("../utils/hexToRgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const isThemeColors = color => typeof color === "string" && Object.keys(_Colors.Light).includes(color);
+const getTheme = config => {
+  const {
+    fonts
+  } = config || {};
+  const themeDefault = (0, _themed.createTheme)({
+    components: {
+      Alert: ({
+        color
+      }, {
+        colors,
+        radius
+      }) => ({
+        backgroundIconStyle: {
+          ...((!color || color === "default") && {
+            backgroundColor: (0, _hexToRgba.default)(colors.secondary, 0.12)
+          }),
+          ...(color === "info" && {
+            backgroundColor: (0, _hexToRgba.default)(colors.info, 0.12)
+          }),
+          ...(color === "success" && {
+            backgroundColor: (0, _hexToRgba.default)(colors.success, 0.12)
+          }),
+          ...(color === "warning" && {
+            backgroundColor: (0, _hexToRgba.default)(colors.warning, 0.12)
+          }),
+          ...(color === "error" && {
+            backgroundColor: (0, _hexToRgba.default)(colors.error, 0.12)
+          })
+        },
+        containerStyle: {
+          borderRadius: radius.md,
+          ...((!color || color === "default") && {
+            backgroundColor: colors.secondaryBackgroundLight,
+            borderColor: colors.secondary
+          }),
+          ...(color === "info" && {
+            backgroundColor: colors.infoBackgroundLight,
+            borderColor: colors.info
+          }),
+          ...(color === "success" && {
+            backgroundColor: colors.successBackgroundLight,
+            borderColor: colors.success
+          }),
+          ...(color === "warning" && {
+            backgroundColor: colors.warningBackgroundLight,
+            borderColor: colors.warning
+          }),
+          ...(color === "error" && {
+            backgroundColor: colors.errorBackgroundLight,
+            borderColor: colors.error
+          })
+        }
+      }),
+      Badge: ({
+        color,
+        variant
+      }, t) => ({
+        badgeStyle: {
+          borderRadius: !variant || variant === "standard" ? t.radius.xs : t.radius.xl,
+          fontFamily: fonts?.medium,
+          height: 20,
+          paddingHorizontal: t.spacing.xs,
+          ...((color === "default" || !color) && {
+            backgroundColor: t.colors.actionSelected
+          }),
+          ...(color === "primary" && {
+            backgroundColor: t.colors.white
+          }),
+          ...(color === "secondary" && {
+            backgroundColor: t.colors.secondaryBackground
+          }),
+          ...(color === "error" && {
+            backgroundColor: t.colors.errorBackground
+          }),
+          ...(color === "warning" && {
+            backgroundColor: t.colors.warningBackground
+          }),
+          ...(color === "info" && {
+            backgroundColor: t.colors.infoBackground
+          }),
+          ...(color === "success" && {
+            backgroundColor: t.colors.successBackground
+          })
+        },
+        containerStyle: {
+          flexDirection: "row",
+          flexWrap: "wrap"
+        },
+        textStyle: {
+          ...((color === "default" || !color) && {
+            color: t.colors.primary
+          }),
+          ...(color === "primary" && {
+            color: t.colors.primary
+          }),
+          ...(color === "secondary" && {
+            color: t.colors.secondaryBlack
+          }),
+          ...(color === "error" && {
+            color: t.colors.errorDark
+          }),
+          ...(color === "warning" && {
+            color: t.colors.warningDark
+          }),
+          ...(color === "info" && {
+            color: t.colors.infoDark
+          }),
+          ...(color === "success" && {
+            color: t.colors.successDark
+          })
+        }
+      }),
+      BottomSheet: (_, {
+        colors
+      }) => ({
+        containerStyle: {
+          backgroundColor: colors.backdropOverlay
+        },
+        modalProps: {
+          animationType: "fade"
+        },
+        scrollViewProps: {
+          scrollEnabled: false
+        }
+      }),
+      BottomSheetContent: (_, {
+        colors
+      }) => ({
+        containerStyle: {
+          backgroundColor: colors.white
+        }
+      }),
+      Button: ({
+        size = "lg",
+        variant,
+        color,
+        disabled,
+        fullWidth
+      }, {
+        colors,
+        radius,
+        spacing
+      }) => ({
+        ...(variant === "contained" && {
+          type: "solid"
+        }),
+        ...(variant === "text" && {
+          type: "clear"
+        }),
+        ...(variant === "outline" && {
+          type: "outline"
+        }),
+        buttonStyle: {
+          borderRadius: radius.sm,
+          paddingVertical: 0,
+          ...((!size || size === "md") && {
+            height: 40
+          }),
+          ...((!variant || variant === "contained" || variant === "outline") && {
+            borderWidth: 1
+          }),
+          ...(size === "lg" && {
+            height: 48
+          }),
+          ...(disabled && {
+            borderColor: colors.disabled
+          }),
+          ...(variant === "outline" && {
+            borderColor: colors.primary
+          }),
+          ...(variant === "link" && {
+            backgroundColor: "transparent",
+            height: "auto",
+            paddingHorizontal: 0
+          }),
+          ...(variant === "icon" && {
+            backgroundColor: "transparent",
+            width: size === "lg" ? 48 : 40
+          }),
+          ...(variant === "text" && {
+            backgroundColor: "transparent",
+            borderColor: "transparent",
+            height: "auto",
+            paddingHorizontal: 0
+          }),
+          ...(color === "error" && {
+            backgroundColor: !variant || variant === "contained" ? colors.errorBackgroundLight : "transparent",
+            borderColor: colors.errorBorder
+          }),
+          ...(fullWidth && {
+            width: "100%"
+          })
+        },
+        containerStyle: {
+          ...(variant === "link" && {
+            flexDirection: "row"
+          }),
+          ...(fullWidth && {
+            width: "100%"
+          })
+        },
+        titleStyle: {
+          fontFamily: fonts?.medium,
+          fontSize: _Fonts.default.Size.button,
+          marginHorizontal: spacing.xs,
+          ...(variant === "link" && {
+            color: colors.primary,
+            textDecorationLine: "underline"
+          }),
+          ...(color === "error" && {
+            color: colors.errorDark
+          }),
+          ...(fullWidth && {
+            width: "100%"
+          })
+        }
+      }),
+      Card: ({
+        size,
+        variant
+      }, {
+        radius,
+        spacing
+      }) => ({
+        containerStyle: {
+          borderRadius: radius.md,
+          borderWidth: 0,
+          elevation: variant === "shadow" ? 10 : 0,
+          margin: 0,
+          paddingHorizontal: spacing.lg,
+          paddingVertical: spacing.lg,
+          ...(size === "sm" && {
+            paddingHorizontal: spacing.sm
+          }),
+          ...(size === "lg" && {
+            paddingHorizontal: spacing.xl
+          }),
+          shadowColor: variant === "shadow" && _reactNative.Platform.OS === "ios" ? "#000000" : "rgba(0, 0, 0, 0.4)",
+          shadowOffset: {
+            height: 0,
+            width: 0
+          },
+          shadowOpacity: variant === "shadow" ? 0.1 : 0,
+          shadowRadius: variant === "shadow" ? 10 : 0
+        }
+      }),
+      CardTitle: ({
+        color
+      }, {
+        colors,
+        spacing
+      }) => ({
+        style: {
+          color: color || colors.text,
+          fontFamily: fonts?.semiBold,
+          fontSize: _Fonts.default.Size.h3,
+          fontWeight: "600",
+          lineHeight: 20,
+          marginBottom: spacing.sm,
+          textAlign: "left"
+        }
+      }),
+      CheckBox: ({
+        radio,
+        disabled
+      }, {
+        colors,
+        spacing
+      }) => ({
+        checkedColor: disabled ? colors.textDisabled : colors.primary,
+        checkedIcon: radio ? "dot-circle-o" : "checkbox-marked",
+        containerStyle: {
+          backgroundColor: "transparent",
+          marginLeft: 0,
+          marginRight: 0,
+          padding: 0,
+          paddingHorizontal: 0
+        },
+        disabledTitleStyle: {
+          color: colors.textDisabled
+        },
+        textStyle: {
+          color: colors.text,
+          fontFamily: fonts?.regular,
+          fontSize: _Fonts.default.Size.body1,
+          marginLeft: spacing.md
+        },
+        uncheckedColor: disabled ? colors.textDisabled : colors.primary,
+        uncheckedIcon: radio ? "circle-o" : "checkbox-blank-outline",
+        ...(!radio && {
+          iconType: "material-community"
+        })
+      }),
+      CheckCard: ({
+        checked
+      }, {
+        colors,
+        radius
+      }) => ({
+        containerStyle: {
+          backgroundColor: checked ? colors.secondaryBackgroundLight : colors.background,
+          borderColor: checked ? colors.secondary : colors.outlineBorder,
+          borderRadius: radius.sm
+        }
+      }),
+      Chip: ({
+        rounded,
+        size,
+        checked
+      }, {
+        radius,
+        spacing,
+        colors
+      }) => ({
+        buttonStyle: {
+          backgroundColor: checked ? colors.primary : colors.actionFocus,
+          paddingVertical: 0,
+          ...(size === "sm" && {
+            height: 20,
+            paddingHorizontal: spacing.sm
+          }),
+          ...((size === "md" || !size) && {
+            height: 22,
+            paddingHorizontal: spacing.sm
+          }),
+          ...(size === "lg" && {
+            height: 30,
+            paddingHorizontal: spacing.sm + 2
+          })
+        },
+        titleStyle: {
+          color: checked ? colors.white : colors.text,
+          fontFamily: fonts?.medium,
+          fontSize: _Fonts.default.Size.body2
+        },
+        ...(rounded && {
+          radius: radius.sm
+        })
+      }),
+      File: ({
+        disabled
+      }, {
+        colors,
+        radius
+      }) => ({
+        iconColor: disabled ? colors.textDisabled : colors.textSecondary,
+        iconLabelTextStyle: {
+          color: disabled ? colors.textDisabled : colors.textSecondary
+        },
+        inputStyle: {
+          borderColor: colors.textDisabled,
+          borderRadius: radius.sm,
+          borderStyle: "dashed",
+          borderWidth: 1,
+          height: 146,
+          width: "100%",
+          ...(disabled && {
+            borderColor: colors.actionDisabled
+          })
+        }
+      }),
+      Image: (_, {
+        colors,
+        radius
+      }) => ({
+        placeholderStyle: {
+          backgroundColor: colors.backgroundElevation0,
+          borderRadius: radius.md
+        }
+      }),
+      ListItem: () => ({
+        containerStyle: {
+          backgroundColor: "transparent",
+          padding: 0
+        }
+      }),
+      ListItemChevron: ({
+        color
+      }, {
+        colors
+      }) => ({
+        color: color || colors.secondaryBlack
+      }),
+      ListItemSubtitle: ({
+        color
+      }, {
+        colors
+      }) => ({
+        style: {
+          color: color || colors.textSecondary,
+          fontFamily: fonts?.regular,
+          fontSize: _Fonts.default.Size.body2,
+          lineHeight: 16
+        }
+      }),
+      ListItemTitle: ({
+        color
+      }) => ({
+        style: {
+          color,
+          fontFamily: fonts?.medium,
+          fontSize: _Fonts.default.Size.h4,
+          lineHeight: 18
+        }
+      }),
+      Skeleton: () => ({
+        style: {
+          opacity: _reactNative.Platform.OS === "ios" ? 0.3 : 0.2
+        }
+      }),
+      Snackbar: ({
+        color
+      }, {
+        colors,
+        radius,
+        spacing
+      }) => ({
+        containerStyle: {
+          borderRadius: radius.md,
+          borderWidth: 1,
+          paddingHorizontal: spacing.lg,
+          paddingVertical: spacing.md,
+          ...(color === "success" && {
+            backgroundColor: colors.successBackgroundLight,
+            borderColor: colors.success
+          }),
+          ...(color === "error" && {
+            backgroundColor: colors.errorBackgroundLight,
+            borderColor: colors.error
+          }),
+          ...(color === "warning" && {
+            backgroundColor: colors.warningBackgroundLight,
+            borderColor: colors.warning
+          }),
+          ...(color === "info" && {
+            backgroundColor: colors.infoBackgroundLight,
+            borderColor: colors.info
+          })
+        },
+        opacity: 1,
+        shadowColor: colors.backgroundElevation3
+      }),
+      Switch: ({
+        disabled
+      }, {
+        colors
+      }) => ({
+        color: disabled ? colors.textDisabled : colors.primary
+      }),
+      Tab: (_, {
+        colors
+      }) => ({
+        disableIndicator: true,
+        indicatorStyle: {
+          backgroundColor: colors.primary,
+          height: 3
+        },
+        style: {
+          backgroundColor: colors.backgroundElevation0,
+          elevation: 40,
+          shadowColor: "#000000",
+          shadowOffset: {
+            height: 20,
+            width: 0
+          },
+          shadowOpacity: 0.07,
+          shadowRadius: 6
+        }
+      }),
+      TabItem: ({
+        active
+      }, {
+        colors
+      }) => ({
+        containerStyle: {
+          borderBottomWidth: 3,
+          borderColor: active ? colors.primary : "transparent"
+        },
+        dense: true,
+        titleStyle: {
+          color: active ? colors.text : colors.textSecondary,
+          fontFamily: fonts?.medium,
+          fontSize: _Fonts.default.Size.body1
+        }
+      }),
+      TabViewItem: () => ({
+        style: {
+          flex: 1
+        }
+      }),
+      Text: (props, {
+        colors
+      }) => ({
+        h1Style: {
+          fontFamily: fonts?.semiBold,
+          fontSize: _Fonts.default.Size.h1,
+          lineHeight: _Fonts.default.LineHeight.h1
+        },
+        h2Style: {
+          fontFamily: fonts?.semiBold,
+          fontSize: _Fonts.default.Size.h2,
+          lineHeight: _Fonts.default.LineHeight.h2
+        },
+        h3Style: {
+          fontFamily: fonts?.semiBold,
+          fontSize: _Fonts.default.Size.h3,
+          lineHeight: _Fonts.default.LineHeight.h3
+        },
+        h4Style: {
+          fontFamily: fonts?.medium,
+          fontSize: _Fonts.default.Size.h4,
+          lineHeight: _Fonts.default.LineHeight.h4
+        },
+        style: {
+          color: isThemeColors(props.color) ? colors[props.color] : props.color || colors.text,
+          flex: props.flex,
+          fontFamily: fonts?.regular,
+          fontSize: _Fonts.default.Size.body1,
+          lineHeight: _Fonts.default.LineHeight.body1,
+          ...(props.h5 && {
+            fontFamily: fonts?.medium,
+            fontSize: _Fonts.default.Size.h5,
+            lineHeight: _Fonts.default.LineHeight.h5,
+            ...(props.h5Style && {
+              h5Style: props.h5Style
+            })
+          }),
+          ...(props.body1 && {
+            fontFamily: fonts?.regular,
+            fontSize: _Fonts.default.Size.body1,
+            lineHeight: _Fonts.default.LineHeight.body1,
+            ...(props.body1Style && {
+              body1Style: props.body1Style
+            })
+          }),
+          ...(props.body2 && {
+            fontFamily: fonts?.regular,
+            fontSize: _Fonts.default.Size.body2,
+            lineHeight: _Fonts.default.LineHeight.body2,
+            ...(props.body2Style && {
+              body2Style: props.body2Style
+            })
+          }),
+          ...(props.body3 && {
+            fontFamily: fonts?.regular,
+            fontSize: _Fonts.default.Size.body3,
+            lineHeight: _Fonts.default.LineHeight.body3,
+            ...(props.body3Style && {
+              body3Style: props.body3Style
+            })
+          }),
+          ...(props.button && {
+            fontFamily: fonts?.medium,
+            fontSize: _Fonts.default.Size.button,
+            lineHeight: _Fonts.default.LineHeight.button,
+            ...(props.buttonStyle && {
+              buttonStyle: props.buttonStyle
+            })
+          }),
+          ...(props.buttonSmall && {
+            fontFamily: fonts?.medium,
+            fontSize: _Fonts.default.Size.buttonSmall,
+            lineHeight: _Fonts.default.LineHeight.buttonSmall,
+            ...(props.buttonSmallStyle && {
+              buttonSmallStyle: props.buttonSmallStyle
+            })
+          }),
+          ...(props.badge && {
+            fontFamily: fonts?.medium,
+            fontSize: _Fonts.default.Size.badge,
+            lineHeight: _Fonts.default.LineHeight.badge,
+            ...(props.badgeStyle && {
+              badgeStyle: props.badgeStyle
+            })
+          }),
+          ...(props.link && {
+            fontFamily: fonts?.medium,
+            fontSize: _Fonts.default.Size.link,
+            lineHeight: _Fonts.default.LineHeight.link,
+            textDecorationLine: "underline",
+            ...(props.linkStyle && {
+              linkStyle: props.linkStyle
+            })
+          })
+        }
+      }),
+      TextField: ({
+        leftIcon,
+        rightIcon,
+        variant,
+        size
+      }, {
+        colors,
+        radius,
+        spacing
+      }) => ({
+        containerStyle: {
+          paddingHorizontal: 0
+        },
+        disabledInputStyle: {
+          backgroundColor: colors.backgroundElevation0,
+          color: colors.textDisabled,
+          opacity: 1
+        },
+        errorStyle: {
+          color: colors.error,
+          fontFamily: fonts?.regular,
+          marginTop: 0
+        },
+        inputContainerStyle: {
+          borderBottomColor: "transparent",
+          borderBottomWidth: 0,
+          margin: 0,
+          padding: 0
+        },
+        inputStyle: {
+          backgroundColor: colors.background,
+          borderColor: colors.outlineBorder,
+          borderRadius: variant === "rounded" ? 100 : radius.sm,
+          borderWidth: 1,
+          color: colors.text,
+          fontFamily: fonts?.regular,
+          fontSize: _Fonts.default.Size.body2,
+          height: size === "sm" ? 40 : 54,
+          paddingLeft: variant === "rounded" ? spacing.lg : spacing.md,
+          paddingRight: variant === "rounded" ? spacing.lg : spacing.md,
+          paddingVertical: spacing.md,
+          ...(rightIcon && {
+            paddingRight: variant === "rounded" ? spacing.lg * 3 : spacing.xl * 2
+          }),
+          ...(leftIcon && {
+            paddingLeft: variant === "rounded" ? spacing.lg * 3 : spacing.xl * 2
+          })
+        },
+        labelStyle: {
+          color: colors.textSecondary,
+          fontFamily: fonts?.regular,
+          fontSize: _Fonts.default.Size.body2
+        },
+        leftIconContainerStyle: {
+          left: variant === "rounded" ? spacing.lg : spacing.md,
+          position: "absolute",
+          zIndex: 1
+        },
+        placeholderTextColor: colors.textDisabled,
+        renderErrorMessage: false,
+        rightIconContainerStyle: {
+          position: "absolute",
+          right: variant === "rounded" ? spacing.lg : spacing.md
+        }
+      }),
+      TextFieldDateTime: ({
+        disabled,
+        value
+      }, {
+        colors
+      }) => ({
+        iconColor: disabled || !value ? colors.textDisabled : colors.primary,
+        inputStyle: {
+          color: colors.text,
+          fontFamily: fonts?.regular,
+          fontSize: _Fonts.default.Size.body2
+        },
+        labelStyle: {
+          color: colors.textSecondary
+        }
+      }),
+      Tooltip: (_, {
+        colors
+      }) => ({
+        containerStyle: {
+          backgroundColor: colors.white,
+          shadowColor: "black",
+          shadowOffset: {
+            height: 2,
+            width: 0
+          },
+          shadowOpacity: 0.2,
+          shadowRadius: 2
+        },
+        pointerColor: colors.white
+      })
+    },
+    lightColors: _Colors.Light,
+    mode: "light",
+    radius: {
+      lg: 16,
+      md: 12,
+      modal: 38,
+      sm: 8,
+      xl: 20,
+      xs: 4
+    },
+    spacing: {
+      lg: 16,
+      md: 12,
+      sm: 8,
+      xl: 20,
+      xs: 4
+    }
+  });
+  return (0, _themed.createTheme)(themeDefault);
+};
+exports.getTheme = getTheme;
+//# sourceMappingURL=theme.js.map