stitches.config.ts

// stitches.config.ts
import type Stitches from '@stitches/react'
import { createStitches } from '@stitches/react'

import {
  gray,
  blue,
  crimson,
  grass,
  slate,
  mauve,
  mauveA,
  amber,
  purple,
  green,
  grayDark,
  blueDark,
  crimsonDark,
  grassDark,
  slateDark,
  mauveDark,
  mauveDarkA,
  amberDark,
  purpleDark,
  greenDark,
  red,
  redDark
} from '@radix-ui/colors'

export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config } =
  createStitches({
    theme: {
      colors: {
        ...gray,
        ...blue,
        ...crimson,
        ...grass,
        ...slate,
        ...mauve,
        ...mauveA,
        ...amber,
        ...purple,
        ...green,
        ...red,
        accent: '#9D2DFF',
        background: '$gray1',
        backgroundAlt: '$gray4',
        backgroundOverlay: '$mauve2',
        text: '$gray12',
        textMuted: '$gray10',
        primary: '$plum',
        error: '$red9',
        warning: '$amber11',
        success: '$grass11',
        white: 'white',
        black: 'black',
        deep: 'rgb(244, 244, 244)'
      },
      fonts: {
        body: 'Work Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
        heading: 'Work Sans, sans-serif',
        monospace: 'Roboto Mono, monospace'
      },
      fontSizes: {
        xs: '0.6875rem',
        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',
        '9xl': '8rem',
        default: '$md'
      },
      space: {
        px: '1px',
        0.5: '0.125rem',
        1: '0.25rem',
        1.5: '0.375rem',
        2: '0.5rem',
        2.5: '0.625rem',
        3: '0.75rem',
        3.5: '0.875rem',
        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',
        widePlus: '2048px',
        wide: '1536px',
        layoutPlus: '1260px',
        layout: '1024px',
        copyUltra: '980px',
        copyPlus: '768px',
        copy: '680px',
        narrowPlus: '600px',
        narrow: '512px',
        xs: '20rem',
        sm: '24rem',
        md: '28rem',
        lg: '32rem',
        xl: '36rem',
        '2xl': '42rem',
        '3xl': '48rem',
        '4xl': '56rem',
        '5xl': '64rem',
        '6xl': '72rem',
        '7xl': '80rem',
        '8xl': '90rem'
      },
      sizes: {
        px: '1px',
        0.5: '0.125rem',
        1: '0.25rem',
        1.5: '0.375rem',
        2: '0.5rem',
        2.5: '0.625rem',
        3: '0.75rem',
        3.5: '0.875rem',
        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',
        max: 'max-content',
        min: 'min-content',
        full: '100%',
        '3xs': '14rem',
        '2xs': '16rem',
        xs: '20rem',
        sm: '24rem',
        md: '28rem',
        lg: '32rem',
        xl: '36rem',
        '2xl': '42rem',
        '3xl': '48rem',
        '4xl': '56rem',
        '5xl': '64rem',
        '6xl': '72rem',
        '7xl': '80rem',
        '8xl': '90rem'
      },
      radii: {
        none: '0',
        sm: '0.2rem',
        base: '0.25rem',
        md: '0.375rem',
        lg: '0.5rem',
        xl: '0.75rem',
        '2xl': '1rem',
        '3xl': '1.5rem',
        full: '9999px'
      },
      fontWeights: {
        body: 400,
        heading: 700,
        bold: 700
      },
      lineHeights: {
        one: 1,
        body: 1.5,
        heading: 0.85
      },
      letterSpacings: {},
      borderWidths: {},
      borderStyles: {},
      shadows: {},
      zIndices: {},
      transitions: {}
    },
    media: {
      sm: '(min-width: 30em)',
      md: '(min-width: 48em)',
      lg: '(min-width: 62em)',
      xl: '(min-width: 80em)',
      '2xl': '(min-width: 96em)',
      hover: '(any-hover: hover)',
      dark: '(prefers-color-scheme: dark)',
      light: '(prefers-color-scheme: light)'
    },
    utils: {
      // Abbreviated margin properties
      m: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'margin'>) => ({
        margin: value
      }),
      mt: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginTop'>) => ({
        marginTop: value
      }),
      mr: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginRight'>) => ({
        marginRight: value
      }),
      mb: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginBottom'>) => ({
        marginBottom: value
      }),
      ml: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginLeft'>) => ({
        marginLeft: value
      }),
      mx: (
        value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginLeft' | 'marginRight'>
      ) => ({
        marginLeft: value,
        marginRight: value
      }),
      my: (
        value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginTop' | 'marginBottom'>
      ) => ({
        marginTop: value,
        marginBottom: value
      }),
      // Abbreviated margin properties
      p: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'padding'>) => ({
        padding: value
      }),
      pt: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingTop'>) => ({
        paddingTop: value
      }),
      pr: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingRight'>) => ({
        paddingRight: value
      }),
      pb: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingBottom'>) => ({
        paddingBottom: value
      }),
      pl: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingLeft'>) => ({
        paddingLeft: value
      }),
      px: (
        value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingLeft' | 'paddingRight'>
      ) => ({
        paddingLeft: value,
        paddingRight: value
      }),
      py: (
        value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingTop' | 'paddingBottom'>
      ) => ({
        paddingTop: value,
        paddingBottom: value
      }),

      // A property for applying width/height together
      size: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'width' | 'height'>) => ({
        width: value,
        height: value
      }),
      // color: (value: Stitches.PropertyValue<'color'> | Stitches.PropertyValue<'width' | 'height'> => ({
      //   color: value
      // }),

      // A property to apply linear gradient
      linearGradient: (value: Stitches.ScaleValue<'space'>) => ({
        backgroundImage: `linear-gradient(${value})`
      }),

      // An abbreviated property for border-radius
      br: (value: Stitches.ScaleValue<'space'>) => ({
        borderRadius: value
      })
    }
  })

export const darkTheme = createTheme('dark', {
  colors: {
    ...grayDark,
    ...blueDark,
    ...crimsonDark,
    ...grassDark,
    ...slateDark,
    ...mauveDark,
    ...mauveDarkA,
    ...amberDark,
    ...purpleDark,
    ...greenDark,
    ...redDark,
    deep: 'rgb(10, 10, 10)',
    backgroundOverlay: '$mauve5'
    // backgroundA: transparentize(0.1, grayDark.gray1),
  }
})

export const globalStyles = globalCss({
  // body: { backgroundColor: '$background', color: '$text', fontFamily: 'Helvetica' },
  'html, body': {
    backgroundColor: '$mauve2',
    color: '$mauve12',
    fontFamily: '$body',
    fontSize: '$md',
    '-webkit-font-smoothing': 'antialiased',
    '-moz-osx-font-smoothing': 'grayscale'
  },
  a: {
    color: 'inherit',
    textDecoration: 'none'
  }
})