Skip to content

Instantly share code, notes, and snippets.

@phobon

phobon/system.ts

Created March 25, 2021 01:36
Show Gist options
  • Save phobon/b37184528ae8c9eefcea46efc53b2912 to your computer and use it in GitHub Desktop.
Save phobon/b37184528ae8c9eefcea46efc53b2912 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
system.ts
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable max-len */
import { StitchesCss, createCss } from '@stitches/react'
export const config = createCss({
prefix: '',
theme: {
colors: {
grey50: '#F9F9F9',
grey100: '#EAEDF0',
grey200: '#E2E6EA',
grey300: '#C2C8C8',
grey400: '#A7ADB3',
grey500: '#899197',
grey600: '#6A7278',
grey700: '#535D63',
grey800: '#414A4F',
grey900: '#2D353C',
grey950: '#1E262B',
accent50: '#FAFBFF',
accent100: '#D7DFFD',
accent200: '#B4C4FC',
accent300: '#91A8FC',
accent400: '#6D8BFC',
accent500: '#496ffc',
accent600: '#3355CD',
accent700: '#203D9C',
accent800: '#12276A',
accent900: '#071338',
red50: '#FFF9FA',
red100: '#FDD3D6',
red200: '#FCADB2',
red300: '#FB858E',
red400: '#FB5E69',
red500: '#fb3644',
red600: '#CD232F',
red700: '#9C131E',
red800: '#6A0910',
red900: '#380207',
green50: '#F9FDFB',
green100: '#CFF1E2',
green200: '#A6E4CA',
green300: '#7BD9B1',
green400: '#51CD99',
green500: '#26c280',
green600: '#18A368',
green700: '#0D8150',
green800: '#055B37',
green900: '#01321D',
orange50: '#fff8f5',
orange100: '#fee3d5',
orange200: '#fdbb8f',
orange300: '#f59420',
orange400: '#d07d15',
orange500: '#a9640a',
orange600: '#8a5106',
orange700: '#704004',
orange800: '#532e02',
orange900: '#3b1f01',
yellow50: '#FFF9EC',
yellow100: '#FEE7A5',
yellow200: '#EBC727',
yellow300: '#C8A91F',
yellow400: '#A98F14',
yellow500: '#89730A',
yellow600: '#6F5D06',
yellow700: '#594A04',
yellow800: '#423602',
yellow900: '#2E2501',
blue50: '#f8f9ff',
blue100: '#e2e7fe',
blue200: '#bac7fd',
blue300: '#8fa8fc',
blue400: '#608cfc',
blue500: '#116ef2',
blue600: '#0c59c7',
blue700: '#0847a1',
blue800: '#043379',
blue900: '#022357',
cyan50: '#F4FAFF',
cyan100: '#D3EBFE',
cyan200: '#88D2FD',
cyan300: '#25B8EF',
cyan400: '#199BCC',
cyan500: '#0D7DA5',
cyan600: '#096687',
cyan700: '#05516D',
cyan800: '#033C51',
cyan900: '#012939',
purple50: '#F9F9FF',
purple100: '#E9E5FE',
purple200: '#CCC2FD',
purple300: '#B09EFC',
purple400: '#987CFC',
purple500: '#8052FC',
purple600: '#6D20FB',
purple700: '#590BD4',
purple800: '#4106A0',
purple900: '#2D0375',
violet50: '#FBF8FF',
violet100: '#F1E3FE',
violet200: '#E0BBFD',
violet300: '#D191FC',
violet400: '#C565FC',
violet500: '#B912F9',
violet600: '#970CCC',
violet700: '#7A08A6',
violet800: '#5B047D',
violet900: '#41025A',
// Theme-specific
foreground: '$grey950',
backgroundPrimary: '$grey100',
backgroundSecondary: '#fff',
backgroundTertiary:
'linear-gradient(to top, rgba(221, 226, 230, 0) 0%, rgba(221, 226, 230, 0) 50%, rgba(221, 226, 230, 1))',
// Guidance palettes
successHigh: '$green900',
successMedium: '$green500',
successLow: '$green100',
dangerHigh: '$red900',
dangerMedium: '$red500',
dangerLow: '$red100',
warningHigh: '$orange900',
warningMedium: '$orange00',
warningLow: '$orange100',
infoHigh: '$blue900',
infoMedium: '$blue500',
infoLow: '$blue100',
// Primary accent gradient
flarePrimary: 'linear-gradient(131deg, #05d5f8 2%, #037be9 60%)',
flarePrimaryReverse: 'linear-gradient(312deg, #05d5f8 2%, #037be9 60%)',
// Banner/Secondary gradient
flareSecondaryHigh:
'radial-gradient(circle at 100% 95%, #03f2c2, #4f8bff 34%, #f60575 65%, #ff672c 81%, #ffb207 97%, #ffb600 103%)',
flareSecondaryMedium:
'radial-gradient(circle at 100% 95%, rgba(3, 242, 194, 0.07), rgba(79, 139, 255, 0.07) 34%, rgba(246, 5, 117, 0.07) 65%, rgba(255, 103, 44, 0.07) 81%, rgba(255, 178, 7, 0.07) 97%, rgba(255, 182, 0, 0.07) 103%)',
flareSecondaryLow:
'radial-gradient(circle at 100% 95%, rgba(3, 242, 194, 0.3), rgba(79, 139, 255, 0.3) 34%, rgba(246, 5, 117, 0.3) 66%, rgba(255, 103, 44, 0.3) 81%, rgba(255, 178, 7, 0.3) 97%, rgba(255, 182, 0, 0.3) 103%)',
},
space: {
0: '0px',
1: '4px',
2: '8px',
3: '16px',
4: '24px',
5: '32px',
6: '48px',
7: '64px',
8: '96px',
9: '128px',
10: '192px',
11: '256px',
12: '384px',
13: '512px',
14: '640px',
},
fontSizes: {
0: '10px',
1: '12px',
2: '14px',
3: '16px',
4: '18px',
5: '20px',
6: '24px',
7: '30px',
8: '36px',
9: '48px',
10: '60px',
11: '72px',
},
fonts: {
system:
'system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif,',
monospace:
'SF Mono, Segoe UI Mono, Roboto Mono, Ubuntu Mono, Menlo, Courier, monospace',
},
radii: {
0: '0px',
1: '2px',
2: '4px',
3: '8px',
4: '16px',
5: '24px',
full: '50%',
},
shadows: {
default:
'7px 7px 21px 0 hsla(212 27% 88% / 0.78), -14px -14px 21px 0 hsla(0 0% 100% / 0.5)',
0: 'none',
1: '0 1px 3px hsla(212 27% 24% / .12), 0 1px 2px hsla(0 0% 100% / .24)',
2: '0 3px 6px hsla(212 27% 24% / .15), 0 2px 4px hsla(0 0% 100% / .12)',
3: '0 10px 20px hsla(212 27% 24% / .15), 0 3px 6px hsla(0 0% 100% / .10)',
},
zIndices: {
1: '100',
2: '200',
3: '300',
4: '400',
max: '999',
},
},
media: {
sm: '(min-width: 640px)',
md: 'min-width: 768px)',
lg: 'min-width: 1024px)',
xl: 'min-width: 1280px)',
motion: '(prefers-reduced-motion)',
hover: '(any-hover: hover)',
dark: '(prefers-color-scheme: dark)',
light: '(prefers-color-scheme: light)',
},
utils: {
p: (config) => (value) => ({
padding: value,
}),
pl: (config) => (value) => ({
paddingLeft: value,
}),
pt: (config) => (value) => ({
paddingTop: value,
}),
pr: (config) => (value) => ({
paddingRight: value,
}),
pb: (config) => (value) => ({
paddingBottom: value,
}),
px: (config) => (value) => ({
paddingLeft: value,
paddingRight: value,
}),
py: (config) => (value) => ({
paddingTop: value,
paddingBottom: value,
}),
m: (config) => (value) => ({
margin: value,
}),
ml: (config) => (value) => ({
marginLeft: value,
}),
mt: (config) => (value) => ({
marginTop: value,
}),
mr: (config) => (value) => ({
marginRight: value,
}),
mb: (config) => (value) => ({
marginBottom: value,
}),
mx: (config) => (value) => ({
marginLeft: value,
marginRight: value,
}),
my: (config) => (value) => ({
marginTop: value,
marginBottom: value,
}),
fd: (config) => (value: any) => ({ flexDirection: value }),
fw: (config) => (value: any) => ({ flexWrap: value }),
ai: (config) => (value: any) => ({ alignItems: value }),
ac: (config) => (value: any) => ({ alignContent: value }),
jc: (config) => (value: any) => ({ justifyContent: value }),
as: (config) => (value: any) => ({ alignSelf: value }),
fg: (config) => (value: any) => ({ flexGrow: value }),
fs: (config) => (value: any) => ({ flexShrink: value }),
fb: (config) => (value: any) => ({ flexBasis: value }),
bc: (config) => (value: any) => ({
backgroundColor: value,
}),
},
})
export const {
// eslint-disable-next-line
// @ts-ignore
css,
styled,
global: globalCss,
theme,
keyframes,
getCssString,
} = config
export const dark = theme('topic__theme--dark', {
colors: {
grey50: '#1E262B',
grey100: '#2D353C',
grey200: '#414A4F',
grey300: '#535D63',
grey400: '#6A7278',
grey500: '#899197',
grey600: '#A7ADB3',
grey700: '#C2C8C8',
grey800: '#E2E6EA',
grey900: '#EAEDF0',
grey950: '#F9F9F9',
// Theme-specific
foreground: '$grey950',
backgroundPrimary: '#141518',
backgroundSecondary: '#1a1c1f',
backgroundTertiary:
'linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #141518)',
// Guidance palettes
successHigh: '$green50',
successLow: '$green400',
dangerHigh: '$red50',
dangerLow: '$red400',
warningHigh: '$orange50',
warningLow: '$orange400',
infoHigh: '$blue50',
infoLow: '$blue400',
},
shadows: {
default: 'none',
0: 'none',
1: 'none',
2: 'none',
3: 'none',
},
})
export type CSS = StitchesCss<typeof config>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment