update

2025-07-31 21:25:33 +08:00
parent 5cfbc81e3a
commit 84fc719a10
307 changed files with 46470 additions and 0 deletions
@@ -0,0 +1,29 @@
+import Palette from './Palette';
+
+const Colors = {
+  background: Palette.white,
+  text: {
+    primary: 'rgba(0,0,0,0.7)',
+    secondary: Palette.text1,
+    link: Palette.text1,
+  },
+  button: {
+    primary: {
+      background: Palette.primary,
+      text: Palette.white,
+      border: Palette.primary,
+    },
+    secondary: {
+      background: 'transparent',
+      text: Palette.text1,
+      border: Palette.text1,
+    },
+  },
+  input: {
+    background: Palette.grey15,
+    text: Palette.text1,
+    placeholder: '#8E9192',
+  },
+};
+
+export default Colors;
@@ -0,0 +1,54 @@
+import { responsiveFontSize } from "../actions/responsiveSizes.js";
+import { Palette } from "../styles";
+
+export const fontTypeList = {
+  default: {
+    fontFamily: "OpenSansRegular",
+    fontSize: responsiveFontSize(1.5),
+    lineHeight: 20,
+  },
+  section: {
+    fontFamily: "OpenSansRegular",
+    fontSize: responsiveFontSize(1.8),
+    lineHeight: 20,
+  },
+  navigationTitle: {
+    fontFamily: "NewYorkSemibold",
+    fontSize: responsiveFontSize(2.5),
+  },
+  title: {
+    fontFamily: "NewYorkSemibold",
+    fontSize: responsiveFontSize(3),
+  },
+  mainTitle: {
+    fontFamily: "NewYorkSemibold",
+    fontSize: responsiveFontSize(4.5),
+  },
+  megaTitle: {
+    fontFamily: "NewYorkSemibold",
+    fontSize: responsiveFontSize(5),
+  },
+};
+
+export const FONT_FAMILY = {
+  InterRegular: "InterRegular",
+  InterMedium: "InterMedium",
+  InterSemiBold: "InterSemiBold",
+  InterBold: "InterBold",
+};
+
+const Fonts = ({
+  type = "default",
+  fontSize = null,
+  fontWeight = "normal",
+  color = Palette.white,
+  style = {},
+} = {}) => ({
+  ...fontTypeList[type],
+  ...(fontSize && { fontSize: responsiveFontSize(fontSize) }),
+  fontWeight,
+  color,
+  ...style,
+});
+
+export default Fonts;
@@ -0,0 +1,37 @@
+const Palette = {
+  primary: "#FB68A8",
+  transparentPrimary: "rgba(251, 104, 168, 0.1)",
+
+  darkPurple: "#0F0C14",
+  transparentDarkPurple: "rgba(15, 12, 20, 0.1)",
+  lightPurple: "#16121E",
+
+  green: "#05CD99",
+  transparentGreen: "rgba(5, 205, 153, 0.1)",
+
+  radioactivGreen: "#7AFB77",
+  darkRadioactivGreen: "#4FC74D",
+  transparentRadioactivGreen: "rgba(122, 251, 119, 0.1)",
+
+  orange: "#FDC22A",
+  transparentOrange: "rgba(253, 194, 42, 0.1)",
+
+  firebaseYellow: "#FFCA28",
+  transparentFirebaseYellow: "rgba(255, 202, 40, 0.1)",
+
+  red: "#E31A1A",
+  transparentRed: "rgba(227, 26, 26, 0.1)",
+
+  white: "#ffffff",
+  black: "#000000",
+
+  transparentWhite: "rgba(255, 255, 255, 0.5)",
+  ultraLightWhite: "rgba(255, 255, 255, 0.1)",
+
+  transparentBlack: "rgba(0, 0, 0, 0.8)",
+  ultraLightBlack: "rgba(0, 0, 0, 0.6)",
+
+  tran: "transparent",
+};
+
+export default Palette;
@@ -0,0 +1,356 @@
+import { StyleSheet, Platform } from "react-native";
+import {
+  responsiveHeight,
+  responsiveWidth,
+} from "../actions/responsiveSizes.js";
+
+import { Fonts, Palette } from "./index";
+
+import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
+
+export const mainBorderRadius = 10;
+
+export const gutterConstant = 5.33;
+export const gutters = isDesktop ? 30 : responsiveWidth(gutterConstant);
+
+export const defaultItemHeight = 40;
+export const defaultBlurIntensity = 50;
+
+export const bubbleStyle = ({ isCurrentUser, customStyle = {} }) => ({
+  padding: gutters / 2,
+  backgroundColor: isCurrentUser ? Palette.transparentPrimary : "transparent",
+  borderRadius: mainBorderRadius / 2,
+  width: "80%",
+  maxWidth: 250,
+  minWidth: 50,
+  ...(isCurrentUser
+    ? { borderBottomRightRadius: 0 }
+    : {
+        borderColor: Palette.primary,
+        borderWidth: 1,
+        borderBottomLeftRadius: 0,
+      }),
+  ...customStyle,
+});
+
+const containerRow = {
+  flexDirection: "row",
+  alignItems: "center",
+};
+
+const containerCenter = {
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+const containerSpaceBetween = {
+  ...containerRow,
+  justifyContent: "space-between",
+};
+
+const containerRevertGutter = {
+  marginHorizontal: responsiveWidth(-gutterConstant),
+  paddingHorizontal: gutters,
+};
+
+const containerCheckBox = {
+  height: 25,
+  width: 25,
+  borderRadius: 4,
+  borderColor: Palette.darkPurple,
+  borderWidth: 1,
+};
+
+const shadows = {
+  shadowColor: "#4C3E73",
+
+  shadowOpacity: 0.8,
+  shadowRadius: 60,
+
+  elevation: 5,
+};
+
+const defaultShadows = {
+  ...shadows,
+  shadowOffset: {
+    width: 0,
+    height: Platform.OS !== "ios" ? 0 : 10,
+  },
+};
+
+const blackShadows = {
+  ...defaultShadows,
+  shadowColor: Palette.black,
+  shadowOpacity: 0.15,
+};
+
+const pinkShadows = {
+  ...defaultShadows,
+  shadowColor: Palette.primary,
+  shadowOpacity: 0.8,
+};
+
+const radioactivGlow = {
+  ...defaultShadows,
+  shadowRadius: 10,
+  shadowOffset: {
+    width: 0,
+    height: 0,
+  },
+  shadowColor: Palette.radioactivGreen,
+  shadowOpacity: 0.8,
+};
+
+const reverseShadows = {
+  ...shadows,
+  shadowOffset: {
+    width: 0,
+    height: -10,
+  },
+};
+
+const defaultBorder = {
+  borderStyle: "solid",
+  borderWidth: 1,
+  borderColor: Palette.ultraLightWhite,
+};
+
+const actionSheet = {
+  containerStyle: {
+    backgroundColor: Palette.primary,
+    width: "40%",
+    minWidth: responsiveWidth(60),
+    maxWidth: 500,
+    alignSelf: "center",
+    borderRadius: 20,
+    marginBottom: 50,
+  },
+  textStyle: {
+    ...Fonts({
+      type: "navigationTitle",
+      style: { color: Palette.white, textAlign: "center" },
+    }),
+  },
+  showSeparators: true,
+  separatorStyle: {
+    backgroundColor: Palette.transparentWhite,
+    height: 1,
+    alignItems: "center",
+  },
+  destructiveColor: Palette.red,
+};
+
+export default StyleSheet.create({
+  containerRow,
+  containerCenter,
+  containerSpaceBetween,
+  containerRevertGutter,
+
+  defaultShadows,
+  reverseShadows,
+  blackShadows,
+  pinkShadows,
+
+  radioactivGlow,
+
+  defaultBorder,
+  dashedBorder: {
+    ...defaultBorder,
+    borderStyle: "dashed",
+    borderColor: Palette.primary,
+  },
+  primaryBorder: {
+    ...defaultBorder,
+    borderColor: Palette.primary,
+  },
+
+  containerMain: {
+    flex: 1,
+    backgroundColor: Palette.darkPurple,
+    padding: gutters,
+    paddingBottom: 0,
+  },
+
+  containerItem: {
+    padding: gutters / 2,
+    backgroundColor: Palette.lightPurple,
+    borderRadius: mainBorderRadius,
+  },
+
+  containerDefaultShadow: {
+    ...defaultShadows,
+    padding: gutters,
+    width: "100%",
+    backgroundColor: "white",
+    marginBottom: responsiveHeight(2),
+    borderRadius: mainBorderRadius,
+  },
+
+  containerItemPicture: {
+    width: "100%",
+    height: responsiveHeight(20),
+    ...defaultShadows,
+  },
+
+  containerModal: {
+    width: "60%",
+    maxWidth: 450,
+    minWidth: 300,
+    padding: "2.5%",
+    backgroundColor: Palette.darkPurple,
+    borderRadius: mainBorderRadius,
+    ...containerCenter,
+  },
+
+  containerBottomSheet: {
+    flex: 1,
+    padding: gutters,
+    paddingBottom: isWeb ? gutters : 3 * gutters,
+    backgroundColor: Palette.darkPurple,
+  },
+
+  itemPicture: {
+    overflow: "hidden",
+    borderRadius: mainBorderRadius,
+  },
+
+  containerInput: {
+    height: 50,
+    backgroundColor: "white",
+    borderColor: Palette.white,
+    borderWidth: 1,
+    borderRadius: mainBorderRadius,
+    padding: 15,
+  },
+  containerContentScrollView: {
+    paddingTop: responsiveHeight(3),
+    paddingBottom: responsiveHeight(15),
+    paddingHorizontal: gutters,
+  },
+  containerRound: {
+    ...containerCenter,
+    backgroundColor: Palette.white,
+    width: 40,
+    height: 40,
+    borderRadius: 500,
+    overflow: "hidden",
+  },
+  containerAbsoluteBottom: {
+    ...containerSpaceBetween,
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    left: 0,
+    backgroundColor: Palette.primary,
+    paddingHorizontal: gutters,
+    paddingVertical: 25,
+  },
+  containerActionSheet: {
+    paddingHorizontal: gutters,
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+  },
+  containerLightBorder: {
+    ...defaultBorder,
+    flex: 1,
+    width: "50%",
+    borderRightWidth: 0,
+    padding: "5%",
+    paddingRight: 0,
+  },
+
+  // Items
+  itemImageAvatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 150,
+    overflow: "hidden",
+  },
+
+  // Icon
+  containerIcon: {
+    ...containerCenter,
+    borderRadius: mainBorderRadius,
+    width: 30,
+    height: 30,
+    backgroundColor: Palette.primary,
+  },
+
+  iconSuperSmall: { width: 10, height: 10 },
+  iconSmall: { width: 15, height: 15 },
+  iconDefault: { width: 20, height: 20 },
+  iconLarge: { width: 30, height: 30 },
+
+  iconContainerRound: { width: "50%", height: "50%" },
+
+  // Badge
+  itemBadge: {
+    position: "absolute",
+    top: -5,
+    right: -5,
+    backgroundColor: Palette.primary,
+    borderRadius: 150,
+    width: 10,
+    height: 10,
+  },
+
+  // Separators
+  separatorVertical: {
+    width: 1,
+    height: 30,
+    marginHorizontal: 10,
+    backgroundColor: Palette.ultraLightWhite,
+  },
+
+  separatorHorizontal: {
+    width: "100%",
+    height: 1,
+    marginVertical: 10,
+    backgroundColor: Palette.ultraLightWhite,
+  },
+
+  separatorHorizontalLarge: {
+    height: 10,
+    marginVertical: responsiveHeight(2),
+    backgroundColor: Palette.ultraLightWhite,
+  },
+
+  // Hitslop
+  mainHitSlop: { top: 20, right: 20, left: 20, bottom: 20 },
+  extremeHitSlop: { top: 30, right: 30, left: 30, bottom: 30 },
+
+  // Misc UI
+
+  containerRadio: {
+    ...containerCenter,
+    ...containerCheckBox,
+    borderColor: Palette.white,
+    borderRadius: 150,
+  },
+
+  circleRadio: {
+    width: "50%",
+    height: "50%",
+    borderRadius: 150,
+    backgroundColor: Palette.primary,
+  },
+
+  containerCheckBox: {
+    ...containerCenter,
+    ...containerCheckBox,
+  },
+
+  squareCheckBox: {
+    width: "50%",
+    height: "50%",
+    borderRadius: 2,
+    backgroundColor: Palette.primary,
+  },
+
+  actionSheet,
+
+  // Transform
+  mirrorHorizontal: {
+    transform: [{ scaleX: -1 }],
+  },
+});
@@ -0,0 +1,13 @@
+*:focus {
+  outline: none;
+}
+
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none; /* hide scrollbar on Windows */
+}
+
+/* Pour les navigateurs WebKit comme Chrome, Safari */
+*::-webkit-scrollbar {
+  display: none;
+}
@@ -0,0 +1,6 @@
+import Colors from './Colors';
+import Palette from './Palette';
+import Fonts from './Fonts';
+import Style, {gutters, resHeight, resWidth} from './Style';
+
+export {Colors, Palette, Fonts, Style, gutters, resHeight, resWidth};