Dingdong_app/constants/Theme.js

export default {
  colors: {
    gray900: "#262626",
    gray800: "#404040",
    gray700: "#595959",
    gray600: "#737373",
    gray500: "#8c8c8c",
    gray400: "#a6a6a6",
    gray300: "#bfbfbf",
    gray200: "rgb(228, 233, 242)",
    gray100: "#F0F0F0",

    brand900: "#420a2b",
    brand800: "#6e1147",
    brand700: "#9a1864",
    brand600: "#c61f80",
    brand500: "#e0399a",
    brand400: "#e765b0",
    brand300: "#ee91c7",
    brand200: "#f5bddd",
    brand100: "#fce9f4",

    red100: "#fce8ea",
    red200: "#f7bac1",
    red300: "#f28c98",
    red400: "#ed5e6f",
    red500: "#e83045",
    red600: "#cf172c",
    red700: "#a11222",
    red800: "#730d18",
    red900: "#45080f",

    yellow100: "#fef9e6",
    yellow200: "#FFF2C7",
    yellow300: "#fae084",
    yellow400: "#f8d453",
    yellow500: "#FFC21C",
    yellow600: "#ddae09",
    yellow700: "#ac8707",
    yellow800: "#7b6005",
    yellow900: "#4a3a03",

    green100: "#eefbe9",
    green200: "#cdf4bd",
    green300: "#84CCC9",
    green400: "#8be665",
    green500: "#69df39",
    green600: "#50c620",
    green700: "#3e9a19",
    green800: "#2c6e12",
    green900: "#1b420b",

    blue100: "#e8f2fc",
    blue200: "#bad7f7",
    blue300: "#8cbcf2",
    blue400: "#5ea1ed",
    blue500: "#3087e8",
    blue600: "#176dcf",
    blue700: "#1255a1",
    blue800: "#0d3d73",
    blue900: "#082445",

    teal100: "#e8fdfc",
    teal200: "#b9f8f5",
    teal300: "#8bf4ee",
    teal400: "#5cefe7",
    teal500: "#2eebe0",
    teal600: "#14d1c6",
    teal700: "#10a39a",
    teal800: "#0b746e",
    teal900: "#074642",

    white: "#FFFFFF",
    black: "#000000",
    transparent: "rgba(0,0,0,0)",
    black600: "rgba(0,0,0,0.6)",
  },

  fontSize: {
    xs: 10,
    sm: 12,
    md: 14,
    lg: 15,
    xl: 16,
    "2xl": 19,
    "3xl": 21,
    "4xl": 24,
    "5xl": 27,
    "6xl": 32,
  },

  shadowColor: "#000",

  shadow: {
    none: {},
    xs: {
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.18,
      shadowRadius: 1.0,

      elevation: 1,
    },
    sm: {
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.23,
      shadowRadius: 2.62,

      elevation: 4,
    },
    md: {
      shadowOffset: {
        width: 0,
        height: 4,
      },
      shadowOpacity: 0.3,
      shadowRadius: 4.65,

      elevation: 8,
    },
    lg: {
      shadowOffset: {
        width: 0,
        height: 6,
      },
      shadowOpacity: 0.37,
      shadowRadius: 7.49,

      elevation: 12,
    },
    xl: {
      shadowOffset: {
        width: 0,
        height: 8,
      },
      shadowOpacity: 0.44,
      shadowRadius: 10.32,

      elevation: 16,
    },
    "2xl": {
      shadowOffset: {
        width: 0,
        height: 10,
      },
      shadowOpacity: 0.51,
      shadowRadius: 13.16,

      elevation: 20,
    },
  },

  borderRadius: {
    none: 0,
    xs: 2,
    sm: 4,
    md: 6,
    lg: 8,
    xl: 12,
    "2xl": 16,
    circle: 1000000,
  },

  spacing: {
    none: 0,
    xs: 4,
    sm: 6,
    md: 8,
    lg: 12,
    xl: 24,
    "2xl": 32,
    "3xl": 64,
  },
};