procode.config.ts - example

const config = {
  spacings: {
    0: "0px",
    1: "1px",
    2: "2px",
    4: "4px",
    5: "5px",
    6: "6px",
    8: "8px",
  },
  borderRadius: {
    0: "0px",
    5: "5px",
    8: "8px",
  },
  colors: {
    light: {
      primary: "#fff",
      primaryAnimation: "#fff", // animation text for <Text>
      secondary: "#000",
    },
    dark: {
      primary: "#fff",
      primaryAnimation: "#fff", // animation text for <Text>
      secondary: "#000",
    },
  },
  gradients: {
    light: {
      primary: "linear-gradient(136deg, #FA8B3C 0%, #DF5117 100%)",
      primaryAnimation: "linear-gradient(136deg, #FA8B3C 0%, #DF5117 100%)", // animation text for <Text>
    },
    dark: {
      primary: "linear-gradient(136deg, #FA8B3C 0%, #DF5117 100%)",
      primaryAnimation: "linear-gradient(136deg, #FA8B3C 0%, #DF5117 100%)", // animation text for <Text>
    },
  },
  shadows: {
    light: {
      primary: "0px 0px 50px 0px rgba(0, 0, 0, 0.05)",
    },
    dark: {
      primary: "0px 0px 50px 0px rgba(0, 0, 0, 0.05)",
    },
  },
  fontSizes: {
    10: "0.625rem",
    12: "0.75rem",
    14: "0.875rem",
    16: "1rem",
    18: "1.125rem",
  },
  fontWeights: {
    thin: 300,
    normal: 500,
    semiBold: 600,
    bold: 700,
  },
  fontLineHeights: {
    12: "0.75rem",
    14: "0.875rem",
    15: "0.9375rem",
    16: "1rem",
  },
  fontLetterSpacings: {
    0: "0rem",
    0.5: "0.05rem",
    1: "0.1rem",
    1.5: "0.15rem",
    2: "0.2rem",
  },
  media: {
    isMobile: `@media only screen and (max-width: 576px)`,
    isTabletOrMobile: `@media only screen and (max-width: 1020px)`,
    isTablet: `@media only screen and (min-width: 577px) and (max-width: 1020px)`,
    isDesktopOrTablet: `@media only screen and (min-width: 577px)`,
    isDesktop: `@media only screen and (min-width: 1021px)`,
    isMaxWidthFullScreen: `@media only screen and (min-width: 1920px)`,
    isAll: `@media screen`,
    isBrowserDarkMode: "@media (prefers-color-scheme: dark)",
    isBrowserLightMode: "@media (prefers-color-scheme: light)",
  },
  animation: {
    transitionTimingFunction: "ease",
    transitionDuration: "0.3s",
    iterationCount: "initial",
    direction: "normal",
  },
};

export default config;

| Parameter | Type | Default | Description | | :--------------------------------- | :------- | :---------- | :---------------------------------------------------------------------------------------------------------------------------------------- | | colors.dark / colors.light | string | undefined | Required. If you want to have an animated color in ui Text, the color name must have Animation at the end, e.g.: textPrimaryAnimation | | gradients.dark / gradients.light | string | undefined | Required. If you want to have an animated color in ui Text, the color name must have Animation at the end, e.g.: textPrimaryAnimation |