Skip to content

Instantly share code, notes, and snippets.

@joeyfigaro
Created January 6, 2022 21:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save joeyfigaro/1940a672bbbbe569ec6df284c9d534fe to your computer and use it in GitHub Desktop.
Stitches Debugging
import { createStitches } from '@stitches/react'
export const {
theme,
styled,
css,
config,
globalCss,
createTheme,
keyframes,
reset,
} = createStitches({
theme: {
colors: {
highContrast: 'hsl(206, 10%, 5%)',
lowContrast: 'white',
black: 'hsl(0, 10%, 0%)',
gray100: 'hsl(206,8%,12%)',
gray200: 'hsl(206,7%,14%)',
gray300: 'hsl(206,7%,15%)',
gray400: 'hsl(206,7%,24%)',
gray500: 'hsl(206,7%,30%)',
gray600: 'hsl(206,5%,53%)',
gray700: 'hsl(206,5%,75%)',
blue100: '#D9DAFC',
blue200: '#B3B6F9',
blue300: '#8A8DED',
blue400: '#696DDC',
blue500: '#3C40C6',
blue600: '#2B2FAA',
blue700: '#1E208E',
blue800: '#131572',
blue900: '#0B0C5F',
green100: '#CDFDD3',
green200: '#9CFCB2',
green300: '#6AF899',
green400: '#44F18F',
green500: '#0be881',
green600: '#08C781',
green700: '#05A77C',
green800: '#038670',
green900: '#026F68',
aqua100: '#CEFEFD',
aqua200: '#9EF9FE',
aqua300: '#6EEBFD',
aqua400: '#4AD9FB',
aqua500: '#0fbcf9',
aqua600: '#0A92D6',
aqua700: '#076EB3',
aqua800: '#044E90',
aqua900: '#023877',
yellow100: '#FFF9D4',
yellow200: '#FFF2A9',
yellow300: '#FFEA7F',
yellow400: '#FFE15F',
yellow500: '#ffd32a',
yellow600: '#DBB01E',
yellow700: '#B78F15',
yellow800: '#936F0D',
yellow900: '#7A5808',
red100: '#FEE0D7',
red200: '#FEBAB0',
red300: '#FC8D89',
red400: '#F96B73',
red500: '#f53b57',
red600: '#D22B54',
red700: '#B01D4F',
red800: '#8E1247',
red900: '#750B43',
primary: '$aqua500',
secondary: '$green500',
tertiary: '$blue500',
highlight: '$red500',
text: '$gray100',
},
space: {
1: '4px',
2: '8px',
3: '12px',
4: '16px',
5: '24px',
6: '32px',
},
fontSizes: {
1: '12px', // xxxs
2: '13px', // xxs
3: '14px', // xs
4: '15px', // s
5: '18px', // m
6: '21.6px', // l
7: '25.92px', // xl
8: '31.10px', // xxl
},
fonts: {
primary: 'Inter, sans-serif',
},
fontWeights: {
1: '400',
2: '500',
3: '600',
4: '800',
},
sizes: {
1: '2px',
2: '4px',
3: '8px',
4: '12px',
5: '16px',
},
borderWidths: {},
borderStyles: {},
radii: {
1: '2px',
2: '4px',
3: '8px',
round: '50%',
pill: '9999px',
},
shadows: {
1: 'rgba(0, 0, 0, 0.14) 0px 2px 10px',
},
},
})
export const globalStyles = globalCss({
'@import':
'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap")',
'*': {
fontFamily: theme.fonts.primary,
fontWeight: theme.fontWeights[1],
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment