styled.config.ts

import { blackA, whiteA, mauve, crimson, green, red } from "@radix-ui/colors";
import { createStitches } from "@stitches/react";

const spaceSizeScale = {
  1: "0.25rem",
  2: "0.5rem",
  3: "0.75rem",
  4: "1rem",
  5: "1.25rem",
  6: "1.5rem",
  7: "1.75rem",
  8: "2rem",
  9: "2.25rem",
  10: "2.5rem",
  12: "3rem",
  14: "3.5rem",
  16: "4rem",
  20: "5rem",
  24: "6rem",
  28: "7rem",
  32: "8rem",
  36: "9rem",
  40: "10rem",
  44: "11rem",
  48: "12rem",
  52: "13rem",
  56: "14rem",
  60: "15rem",
  64: "16rem",
  72: "18rem",
  80: "20rem",
  96: "24rem",
};

export const { css, styled, keyframes } = createStitches({
  theme: {
    colors: {
      ...crimson,
      ...mauve,
      ...green,
      ...red,
      ...whiteA,
      ...blackA,
    },
    space: spaceSizeScale,
    fonts: {
      sansSerif:
        "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
      mono: "Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
    },
    fontSizes: {
      "2xs": "0.5rem",
      xs: "0.75rem",
      sm: "0.875rem",
      md: "1rem",
      lg: "1.125rem",
      xl: "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
      "6xl": "3.75rem",
      "7xl": "4.5rem",
      "8xl": "6rem",
    },
    fontWeights: {},
    lineHeights: {
      "2xs": 0.9,
      xs: 1,
      sm: 1.1,
      md: 1.3,
      base: 1.5,
      lg: 1.7,
    },
    letterSpacings: {},
    sizes: {
      ...spaceSizeScale,
      "container-sm": "640px",
      "container-md": "768px",
      "container-lg": "1024px",
      "container-xl": "1280px",
    },
    borderWidths: {},
    borderStyles: {},
    radii: {
      none: 0,
      sm: "0.125rem",
      base: "0.25rem",
      md: "0.375rem",
      lg: "0.5rem",
      xl: "0.75rem",
      "2xl": "1rem",
      "3xl": "1.5rem",
      full: "9999px",
    },
    shadows: {},
    zIndices: {},
    transitions: {},
  },
});