stitches.config.ts

import { createStitches } from '@stitches/react'

export const mediaQueries = {
  mobile: '(min-width: 340px)',
  tablet: '(min-width: 768px)',
  tabletLandscape: '(min-width: 1024px)',
  laptop: '(min-width: 1160px)',
  desktop: '(min-width: 1440px)',
  desktopLg: '(min-width: 1920px)',
  touch: '(pointer: coarse)',
  darkMode: '(prefers-color-scheme: dark)',
  prefersReducedMotion: '(prefers-reduced-motion: reduce)',
  uploadFlow: '(min-width: 900px)',
}

export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config } = createStitches({
  theme: {
    colors: {
      neutral50: '#FAFAFA',
      neutral100: '#F5F5F5',
      neutral200: '#E5E5E5',
      neutral300: '#D4D4D4',
      neutral400: '#A3A3A3',
      neutral500: '#737373',
      neutral600: '#525252',
      neutral700: '#404040',
      neutral800: '#262626',
      neutral900: '#171717',
      brand50: '#ECFDF5',
      brand200: '#A7F3D0',
      brand300: '#6EE7B7',
      brand400: '#34D399',
      brand500: '#10B981',
      brand600: '#059669',
      brand800: '#065F46',
      brand900: '#064E3B',
      brandAccent20: '#E5F3F0',
      brandAccent40: '#D5F0E9',
      brandAccent60: '#C3ECE2',
      brandAccent80: '#B2E9DB',
      brandAccent100: '#A1E6D5',
      brandPink500: '#F773FF',
      iconSDK: '#36F6EC',
      iconAPI: '#FF753A',
      accent300: '#F0ABFC',
      accent500: '#D946EF',
      success50: '#F0FDF4',
      success500: '#22C55E',
      success700: '#15803D',
      warning50: '#FFF7ED',
      warning500: '#EAB308',
      warning700: '#C2410C',
      destructive50: '#FEF2F2',
      destructive500: '#EF4444',
      destructive700: '#B91C1C',
      education50: '#ECECFF',
      education100: '#8280FF',
      education200: '#605DEC',

      white: '#fff',
      darkBg: '#171717',
      black: '#0E1213',
      blue400: '#4299E1',
      grey100: '#F3F4F6',
      grey200: '#E5E6EB',
      grey300: '#D2D5D9',
      grey400: '#9DA3AE',
      grey500: '#6D7180',
      grey600: '#4D5562',
      grey700: '#394150',
      grey800: '#192024',
      grey900: '#1A1B22',
      danger100: '#e53e3e',
      danger200: '#d32f2f',
      black100: '#262626',
      gray100: '#8F8F8F',
      gray200: '#EEEEEE',
      gray300: '#E7E7E7',
      green100: '#34D399',
      green200: '#A7F3D0',
    },
    fonts: {
      title: 'Acid Grotesk',
      base: 'Inter',
      kicker: 'Inter',
      numerals: 'NB Architekt Neue',
      body: 'Inter',
      mono: 'NB Architekt Neue, sans-serif',
    },
  },
  media: mediaQueries,
})

export const globalStyles = globalCss({
  'a.nx-text-primary-500': { color: theme.colors.brandPink500.value },
  '*::selection': {
    background: theme.colors.brandPink500.value,
    color: '#fff',
  },
  'h2, h3, h4, h5, h6': {
    fontWeight: '500 !important',
  },
  'h1, h2, h3, h4, h5, h6': {
    fontFamily: theme.fonts.title.value,
    fontFeatureSettings: 'normal',
  },
})