Skip to content

Instantly share code, notes, and snippets.

@tanftw

tanftw/stitches.config.ts

Created August 9, 2022 05:24
Show Gist options
  • Save tanftw/e79c0a805a320b417a9be0e730d7d958 to your computer and use it in GitHub Desktop.
Save tanftw/e79c0a805a320b417a9be0e730d7d958 to your computer and use it in GitHub Desktop.
Download ZIP
My stitches config
Raw
stitches.config.ts
import { createStitches } from '@stitches/react';
import {
gray,
mauve,
slate,
sage,
olive,
sand,
tomato,
red,
crimson,
pink,
plum,
purple,
violet,
indigo,
blue,
sky,
mint,
cyan,
teal,
green,
grass,
lime,
yellow,
amber,
orange,
brown,
bronze,
gold,
grayA,
mauveA,
slateA,
sageA,
oliveA,
sandA,
tomatoA,
redA,
crimsonA,
pinkA,
plumA,
purpleA,
violetA,
indigoA,
blueA,
skyA,
mintA,
cyanA,
tealA,
greenA,
grassA,
limeA,
yellowA,
amberA,
orangeA,
brownA,
bronzeA,
goldA,
whiteA,
blackA,
grayDark,
mauveDark,
slateDark,
sageDark,
oliveDark,
sandDark,
tomatoDark,
redDark,
crimsonDark,
pinkDark,
plumDark,
purpleDark,
violetDark,
indigoDark,
blueDark,
skyDark,
mintDark,
cyanDark,
tealDark,
greenDark,
grassDark,
limeDark,
yellowDark,
amberDark,
orangeDark,
brownDark,
bronzeDark,
goldDark,
grayDarkA,
mauveDarkA,
slateDarkA,
sageDarkA,
oliveDarkA,
sandDarkA,
tomatoDarkA,
redDarkA,
crimsonDarkA,
pinkDarkA,
plumDarkA,
purpleDarkA,
violetDarkA,
indigoDarkA,
blueDarkA,
skyDarkA,
mintDarkA,
cyanDarkA,
tealDarkA,
greenDarkA,
grassDarkA,
limeDarkA,
yellowDarkA,
amberDarkA,
orangeDarkA,
brownDarkA,
bronzeDarkA,
goldDarkA,
} from '@radix-ui/colors';
import type * as Stitches from '@stitches/react';
export type { VariantProps } from '@stitches/react';
const space = {
0: '0px',
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',
11: '2.75rem',
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 {
styled,
css,
theme,
createTheme,
getCssText,
globalCss,
keyframes,
config,
reset,
} = createStitches({
theme: {
colors: {
...gray,
...mauve,
...slate,
...sage,
...olive,
...sand,
...tomato,
...red,
...crimson,
...pink,
...plum,
...purple,
...violet,
...indigo,
...blue,
...sky,
...mint,
...cyan,
...teal,
...green,
...grass,
...lime,
...yellow,
...amber,
...orange,
...brown,
...bronze,
...gold,
...grayA,
...mauveA,
...slateA,
...sageA,
...oliveA,
...sandA,
...tomatoA,
...redA,
...crimsonA,
...pinkA,
...plumA,
...purpleA,
...violetA,
...indigoA,
...blueA,
...skyA,
...mintA,
...cyanA,
...tealA,
...greenA,
...grassA,
...limeA,
...yellowA,
...amberA,
...orangeA,
...brownA,
...bronzeA,
...goldA,
...whiteA,
...blackA,
// Semantic colors
hiContrast: '$slate12',
// loContrast: '$slate1',
loContrast: 'white',
canvas: 'hsl(0 0% 93%)',
panel: 'white',
transparentPanel: 'hsl(0 0% 0% / 97%)',
shadowLight: 'hsl(206 22% 7% / 35%)',
shadowDark: 'hsl(206 22% 7% / 20%)',
},
fonts: {
sans: `ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"`,
serif:
`ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`,
mono:
`ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace`,
},
space,
sizes: {
...space,
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
full: '100%',
screen: '100vh',
screenW: '100vw',
min: 'min-content',
max: 'max-content',
},
fontSizes: {
'xs': '0.75rem',
'sm': '0.875rem',
'base': '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',
},
radii: {
none: '0px',
sm: '0.125rem',
DEFAULT: '0.25rem',
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
},
zIndices: {
auto: 'auto',
0: '0',
10: '10',
20: '20',
30: '30',
40: '40',
50: '50',
},
borderStyles: {
none: 'none',
solid: 'solid',
double: 'double',
dashed: 'dashed',
dotted: 'dotted',
dashedDotted: 'dashed dotted',
dashedDottedDotted: 'dashed dotted dotted',
},
borderWidths: {
none: '0px',
0: '0px',
1: '1px',
2: '2px',
3: '3px',
4: '4px',
5: '5px',
},
lineHeights: {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
3: '.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
},
shadows: {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
none: 'none',
},
transitions: {
'default': '250ms ease-in-out',
'ease-in': '250ms ease-in',
'ease-out': '250ms ease-out',
'ease-in-out': '250ms ease-in-out',
'ease-in-quad': '250ms ease-in-quad',
'ease-out-quad': '250ms ease-out-quad',
'ease-in-out-quad': '250ms ease-in-out-quad',
'ease-in-cubic': '250ms ease-in-cubic',
'ease-out-cubic': '250ms ease-out-cubic',
'ease-in-out-cubic': '250ms ease-in-out-cubic',
'ease-in-quart': '250ms ease-in-quart',
'ease-out-quart': '250ms ease-out-quart',
'ease-in-out-quart': '250ms ease-in-out-quart',
'ease-in-quint': '250ms ease-in-quint',
'ease-out-quint': '250ms ease-out-quint',
'ease-in-out-quint': '250ms ease-in-out-quint',
'ease-in-sine': '250ms ease-in-sine',
'ease-out-sine': '250ms ease-out-sine',
'ease-in-out-sine': '250ms ease-in-out-sine',
'ease-in-expo': '250ms ease-in-expo',
'ease-out-expo': '250ms ease-out-expo',
'ease-in-out-expo': '250ms ease-in-out-expo',
'ease-in-circ': '250ms ease-in-circ',
'ease-out-circ': '250ms ease-out-circ',
'ease-in-out-circ': '250ms ease-in-out-circ',
'ease-in-back': '250ms ease-in-back',
'ease-out-back': '250ms ease-out-back',
'ease-in-out-back': '250ms ease-in-out-back',
},
fontWeights: {
100: '100',
200: '200',
300: '300',
400: '400',
500: '500',
600: '600',
700: '700',
800: '800',
900: '900',
},
letterSpacings: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
},
},
media: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
motion: '(prefers-reduced-motion)',
hover: '(any-hover: hover)',
dark: '(prefers-color-scheme: dark)',
light: '(prefers-color-scheme: light)',
},
utils: {
p: (value: Stitches.PropertyValue<'padding'>) => ({
padding: value,
}),
pt: (value: Stitches.PropertyValue<'paddingTop'>) => ({
paddingTop: value,
}),
pr: (value: Stitches.PropertyValue<'paddingRight'>) => ({
paddingRight: value,
}),
pb: (value: Stitches.PropertyValue<'paddingBottom'>) => ({
paddingBottom: value,
}),
pl: (value: Stitches.PropertyValue<'paddingLeft'>) => ({
paddingLeft: value,
}),
px: (value: Stitches.PropertyValue<'paddingLeft'>) => ({
paddingLeft: value,
paddingRight: value,
}),
py: (value: Stitches.PropertyValue<'paddingTop'>) => ({
paddingTop: value,
paddingBottom: value,
}),
m: (value: Stitches.PropertyValue<'margin'>) => ({
margin: value,
}),
mt: (value: Stitches.PropertyValue<'marginTop'>) => ({
marginTop: value,
}),
mr: (value: Stitches.PropertyValue<'marginRight'>) => ({
marginRight: value,
}),
mb: (value: Stitches.PropertyValue<'marginBottom'>) => ({
marginBottom: value,
}),
ml: (value: Stitches.PropertyValue<'marginLeft'>) => ({
marginLeft: value,
}),
mx: (value: Stitches.PropertyValue<'marginLeft'>) => ({
marginLeft: value,
marginRight: value,
}),
my: (value: Stitches.PropertyValue<'marginTop'>) => ({
marginTop: value,
marginBottom: value,
}),
ta: (value: Stitches.PropertyValue<'textAlign'>) => ({ textAlign: value }),
fd: (value: Stitches.PropertyValue<'flexDirection'>) => ({ flexDirection: value }),
fw: (value: Stitches.PropertyValue<'flexWrap'>) => ({ flexWrap: value }),
ai: (value: Stitches.PropertyValue<'alignItems'>) => ({ alignItems: value }),
ac: (value: Stitches.PropertyValue<'alignContent'>) => ({ alignContent: value }),
jc: (value: Stitches.PropertyValue<'justifyContent'>) => ({ justifyContent: value }),
as: (value: Stitches.PropertyValue<'alignSelf'>) => ({ alignSelf: value }),
fg: (value: Stitches.PropertyValue<'flexGrow'>) => ({ flexGrow: value }),
fs: (value: Stitches.PropertyValue<'flexShrink'>) => ({ flexShrink: value }),
fb: (value: Stitches.PropertyValue<'flexBasis'>) => ({ flexBasis: value }),
bc: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
backgroundColor: value,
}),
br: (value: Stitches.PropertyValue<'borderRadius'>) => ({
borderRadius: value,
}),
btrr: (value: Stitches.PropertyValue<'borderTopRightRadius'>) => ({
borderTopRightRadius: value,
}),
bbrr: (value: Stitches.PropertyValue<'borderBottomRightRadius'>) => ({
borderBottomRightRadius: value,
}),
bblr: (value: Stitches.PropertyValue<'borderBottomLeftRadius'>) => ({
borderBottomLeftRadius: value,
}),
btlr: (value: Stitches.PropertyValue<'borderTopLeftRadius'>) => ({
borderTopLeftRadius: value,
}),
bs: (value: Stitches.PropertyValue<'boxShadow'>) => ({ boxShadow: value }),
lh: (value: Stitches.PropertyValue<'lineHeight'>) => ({ lineHeight: value }),
ox: (value: Stitches.PropertyValue<'overflowX'>) => ({ overflowX: value }),
oy: (value: Stitches.PropertyValue<'overflowY'>) => ({ overflowY: value }),
pe: (value: Stitches.PropertyValue<'pointerEvents'>) => ({ pointerEvents: value }),
us: (value: Stitches.PropertyValue<'userSelect'>) => ({
WebkitUserSelect: value,
userSelect: value,
}),
userSelect: (value: Stitches.PropertyValue<'userSelect'>) => ({
WebkitUserSelect: value,
userSelect: value,
}),
size: (value: Stitches.PropertyValue<'width'>) => ({
width: value,
height: value,
}),
appearance: (value: Stitches.PropertyValue<'appearance'>) => ({
WebkitAppearance: value,
appearance: value,
}),
backgroundClip: (value: Stitches.PropertyValue<'backgroundClip'>) => ({
WebkitBackgroundClip: value,
backgroundClip: value,
}),
w: (value: Stitches.PropertyValue<'width'>) => ({ width: value }),
},
});
export type CSS = Stitches.CSS<typeof config>;
export const darkTheme = createTheme('dark-theme', {
colors: {
...grayDark,
...mauveDark,
...slateDark,
...sageDark,
...oliveDark,
...sandDark,
...tomatoDark,
...redDark,
...crimsonDark,
...pinkDark,
...plumDark,
...purpleDark,
...violetDark,
...indigoDark,
...blueDark,
...skyDark,
...mintDark,
...cyanDark,
...tealDark,
...greenDark,
...grassDark,
...limeDark,
...yellowDark,
...amberDark,
...orangeDark,
...brownDark,
...bronzeDark,
...goldDark,
...grayDarkA,
...mauveDarkA,
...slateDarkA,
...sageDarkA,
...oliveDarkA,
...sandDarkA,
...tomatoDarkA,
...redDarkA,
...crimsonDarkA,
...pinkDarkA,
...plumDarkA,
...purpleDarkA,
...violetDarkA,
...indigoDarkA,
...blueDarkA,
...skyDarkA,
...mintDarkA,
...cyanDarkA,
...tealDarkA,
...greenDarkA,
...grassDarkA,
...limeDarkA,
...yellowDarkA,
...amberDarkA,
...orangeDarkA,
...brownDarkA,
...bronzeDarkA,
...goldDarkA,
// Semantic colors
hiContrast: '$slate12',
loContrast: '$slate1',
canvas: 'hsl(0 0% 15%)',
panel: '$slate3',
transparentPanel: 'hsl(0 100% 100% / 97%)',
shadowLight: 'hsl(206 22% 7% / 35%)',
shadowDark: 'hsl(206 22% 7% / 20%)',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment