Skip to content

Instantly share code, notes, and snippets.

@imkrish

imkrish/theme.ts

Last active March 4, 2020 20:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save imkrish/a8f4deb8df684ea9242cb04d3b0cc91d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save imkrish/a8f4deb8df684ea9242cb04d3b0cc91d to your computer and use it in GitHub Desktop.
Download ZIP
theme.ts
Raw
theme.ts
const theme = {
breakpoints: ['30em', '48em', '62em', '80em'],
zIndices: {
hide: -1,
auto: 'auto',
base: 0,
docked: 10,
dropdown: 1000,
sticky: 1100,
banner: 1200,
overlay: 1300,
modal: 1400,
popover: 1500,
skipLink: 1600,
toast: 1700,
tooltip: 1800,
},
radii: {
none: '0',
sm: '0.125rem',
md: '0.25rem',
lg: '0.5rem',
full: '9999px',
},
opacity: {
'0': '0',
'20%': '0.2',
'40%': '0.4',
'60%': '0.6',
'80%': '0.8',
'100%': '1',
},
borders: {
none: 0,
'1px': '1px solid',
'2px': '2px solid',
'4px': '4px solid',
},
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000000',
white: '#ffffff',
whiteAlpha: {
'50': 'rgba(255, 255, 255, 0.04)',
'100': 'rgba(255, 255, 255, 0.06)',
'200': 'rgba(255, 255, 255, 0.08)',
'300': 'rgba(255, 255, 255, 0.16)',
'400': 'rgba(255, 255, 255, 0.24)',
'500': 'rgba(255, 255, 255, 0.36)',
'600': 'rgba(255, 255, 255, 0.48)',
'700': 'rgba(255, 255, 255, 0.64)',
'800': 'rgba(255, 255, 255, 0.80)',
'900': 'rgba(255, 255, 255, 0.92)',
},
blackAlpha: {
'50': 'rgba(0, 0, 0, 0.04)',
'100': 'rgba(0, 0, 0, 0.06)',
'200': 'rgba(0, 0, 0, 0.08)',
'300': 'rgba(0, 0, 0, 0.16)',
'400': 'rgba(0, 0, 0, 0.24)',
'500': 'rgba(0, 0, 0, 0.36)',
'600': 'rgba(0, 0, 0, 0.48)',
'700': 'rgba(0, 0, 0, 0.64)',
'800': 'rgba(0, 0, 0, 0.80)',
'900': 'rgba(0, 0, 0, 0.92)',
},
gray: {
'50': '#F7FAFC',
'100': '#EDF2F7',
'200': '#E2E8F0',
'300': '#CBD5E0',
'400': '#A0AEC0',
'500': '#718096',
'600': '#4A5568',
'700': '#2D3748',
'800': '#1A202C',
'900': '#171923',
},
red: {
'50': '#fff5f5',
'100': '#fed7d7',
'200': '#feb2b2',
'300': '#fc8181',
'400': '#f56565',
'500': '#e53e3e',
'600': '#c53030',
'700': '#9b2c2c',
'800': '#822727',
'900': '#63171b',
},
orange: {
'50': '#FFFAF0',
'100': '#FEEBC8',
'200': '#FBD38D',
'300': '#F6AD55',
'400': '#ED8936',
'500': '#DD6B20',
'600': '#C05621',
'700': '#9C4221',
'800': '#7B341E',
'900': '#652B19',
},
yellow: {
'50': '#fffff0',
'100': '#fefcbf',
'200': '#faf089',
'300': '#f6e05e',
'400': '#ecc94b',
'500': '#d69e2e',
'600': '#b7791f',
'700': '#975a16',
'800': '#744210',
'900': '#5F370E',
},
green: {
'50': '#f0fff4',
'100': '#c6f6d5',
'200': '#9ae6b4',
'300': '#68d391',
'400': '#48bb78',
'500': '#38a169',
'600': '#2f855a',
'700': '#276749',
'800': '#22543d',
'900': '#1C4532',
},
teal: {
'50': '#E6FFFA',
'100': '#B2F5EA',
'200': '#81E6D9',
'300': '#4FD1C5',
'400': '#38B2AC',
'500': '#319795',
'600': '#2C7A7B',
'700': '#285E61',
'800': '#234E52',
'900': '#1D4044',
},
blue: {
'50': '#ebf8ff',
'100': '#ceedff',
'200': '#90cdf4',
'300': '#63b3ed',
'400': '#4299e1',
'500': '#3182ce',
'600': '#2a69ac',
'700': '#1e4e8c',
'800': '#153e75',
'900': '#1a365d',
},
cyan: {
'50': '#EDFDFD',
'100': '#C4F1F9',
'200': '#9DECF9',
'300': '#76E4F7',
'400': '#0BC5EA',
'500': '#00B5D8',
'600': '#00A3C4',
'700': '#0987A0',
'800': '#086F83',
'900': '#065666',
},
purple: {
'50': '#faf5ff',
'100': '#e9d8fd',
'200': '#d6bcfa',
'300': '#b794f4',
'400': '#9f7aea',
'500': '#805ad5',
'600': '#6b46c1',
'700': '#553c9a',
'800': '#44337a',
'900': '#322659',
},
pink: {
'50': '#fff5f7',
'100': '#fed7e2',
'200': '#fbb6ce',
'300': '#f687b3',
'400': '#ed64a6',
'500': '#d53f8c',
'600': '#b83280',
'700': '#97266d',
'800': '#702459',
'900': '#521B41',
},
linkedin: {
'50': '#E8F4F9',
'100': '#CFEDFB',
'200': '#9BDAF3',
'300': '#68C7EC',
'400': '#34B3E4',
'500': '#00A0DC',
'600': '#008CC9',
'700': '#0077B5',
'800': '#005E93',
'900': '#004471',
},
facebook: {
'50': '#E8F4F9',
'100': '#D9DEE9',
'200': '#B7C2DA',
'300': '#6482C0',
'400': '#4267B2',
'500': '#385898',
'600': '#314E89',
'700': '#29487D',
'800': '#223B67',
'900': '#1E355B',
},
messenger: {
'50': '#D0E6FF',
'100': '#B9DAFF',
'200': '#A2CDFF',
'300': '#7AB8FF',
'400': '#2E90FF',
'500': '#0078FF',
'600': '#0063D1',
'700': '#0052AC',
'800': '#003C7E',
'900': '#002C5C',
},
whatsapp: {
'50': '#e2f7f4',
'100': '#c3f0e9',
'200': '#a0e7dc',
'300': '#76dccd',
'400': '#43cfba',
'500': '#00BFA5',
'600': '#00ac92',
'700': '#009780',
'800': '#007d6a',
'900': '#005a4c',
},
twitter: {
'50': '#e5f4fd',
'100': '#c8e9fb',
'200': '#a8dcfa',
'300': '#83cdf7',
'400': '#57bbf5',
'500': '#1DA1F2',
'600': '#1a94da',
'700': '#1681bf',
'800': '#136b9e',
'900': '#0d4d71',
},
telegram: {
'50': '#e3f2f9',
'100': '#c5e4f3',
'200': '#a2d4ec',
'300': '#7ac1e4',
'400': '#47a9da',
'500': '#0088CC',
'600': '#007ab8',
'700': '#006ba1',
'800': '#005885',
'900': '#003f5e',
},
blacks: {
'25': 'rgba(0,0,0,0.25)',
'35': 'rgba(0,0,0,0.35)',
'50': 'rgba(0,0,0,0.5)',
'65': 'rgba(0,0,0,0.65)',
},
whites: {
'25': 'rgba(255,255,255,0.25)',
'35': 'rgba(255,255,255,0.35)',
'50': 'rgba(255,255,255,0.5)',
'65': 'rgba(255,255,255,0.65)',
},
primary: { '01': '#028a87', '01-hover': '#00625f', '02': '#324164' },
grey: {
'01': '#797979',
'02': '#979797',
'03': '#cbcaca',
'04': '#f3f3f3',
},
success: '#94c82c',
info: '#58c7dd',
warning: '#f9e500',
alert: '#ed1938',
alerts: { light: '#fde6ea' },
},
letterSpacings: {
tighter: '-0.05em',
tight: '-0.025em',
normal: '0',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
},
lineHeights: {
normal: 'normal',
none: '1',
shorter: '1.25',
short: '1.375',
base: '1.5',
tall: '1.625',
taller: '2',
},
fontWeights: {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
bolder: 900,
},
fonts: {
heading: 'Gotham',
body: 'Gotham',
mono:
'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
black: 'Gotham',
},
fontSizes: {
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '1.875rem',
'4xl': '2.25rem',
'5xl': '3rem',
'6xl': '4rem',
xxs: '0.65rem',
h1: '3.466666666666667rem',
h1m: '2.6666666666666665rem',
h2: '2.2666666666666666rem',
h2m: '2rem',
h3: '1.7333333333333334rem',
h3m: '1.3333333333333333rem',
h4: '1.3333333333333333rem',
h4m: '1.0666666666666667rem',
h5: '1.0666666666666667rem',
h6: '0.8666666666666667rem',
text: '1rem',
},
sizes: {
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
'40': '10rem',
'48': '12rem',
'56': '14rem',
'64': '16rem',
px: '1px',
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',
containers: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px' },
},
shadows: {
sm: '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)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
none: 'none',
},
space: {
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
'40': '10rem',
'48': '12rem',
'56': '14rem',
'64': '16rem',
px: '1px',
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment