stitches.config.js

import { createCss } from "@stitches/react";

export const {
  theme,
  css,
  styled,
  keyframes,
  global,
  getCssString,
} = createCss({
  theme: {
    colors: {
      dark: "#2b2d35",
      light: "#dddddd",
      grey100: "#dddcd3",
      grey200: "#b9b9b6",
      grey300: "#9c9e9d",
      grey400: "#858789",
      grey500: "#73767c",
      grey600: "#63676f",
      grey700: "#575b65",
      grey800: "#414450",
      grey900: "#3e3f43",
      blue200: "#5fd1be",
      blue300: "#5fc0d2",
      blue400: "#609ad2",
      blue500: "#629ed9",
      blue600: "#6074d3",
      blue700: "#58659d",
      green400: "#b0c87c",
      green500: "#53bd97",
      green600: "#4ca585",
      green700: "#4e8b78",
      yellow400: "#d8c679",
      yellow500: "#fee787",
      yellow600: "#dbba7e",
      yellow700: "#dbba7e",
      red300: "#cea37f",
      red400: "#d88e79",
      red500: "#d38676",
      red600: "#b7776b",
    },
    space: {
      1: "5px",
      2: "10px",
      3: "15px",
      4: "20px",
      5: "25px",
      6: "35px",
    },
    sizes: {
      1: "5px",
      2: "10px",
      3: "15px",
      4: "20px",
      5: "25px",
      6: "35px",
    },
    fontSizes: {
      1: "12px",
      2: "13px",
      3: "15px",
      4: "17px",
      5: "19px",
      6: "21px",
    },
    fonts: {
      system: "system-ui",
      untitled: "Untitled Sans, apple-system, sans-serif",
      serif: `'Cardo', serif`,
      mono: `'JetBrains Mono', monospace`,
    },
    radii: {
      1: "0",
      2: "2px",
      3: "5px",
    },
  },
  utils: {
    marginX: (config) => (value) => ({
      marginLeft: value,
      marginRight: value,
    }),
    marginY: (config) => (value) => ({
      marginTop: value,
      marginBottom: value,
    }),
    paddingX: (config) => (value) => ({
      paddingLeft: value,
      paddingRight: value,
    }),
    paddingY: (config) => (value) => ({
      paddingTop: value,
      paddingBottom: value,
    }),
  },
  media: {
    sm: "(min-width: 640px)",
    md: "(min-width: 768px)",
    lg: "(min-width: 1024px)",
  },
});