Skip to content

Instantly share code, notes, and snippets.

@knownasilya
Last active December 10, 2019 14:25
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save knownasilya/0ceb5fe6c02d558f2e908516dc1551bd to your computer and use it in GitHub Desktop.
Save knownasilya/0ceb5fe6c02d558f2e908516dc1551bd to your computer and use it in GitHub Desktop.
const colors = [
'transparent', // transparent
'#000', // black
'#fff', // white
// gray
'#f7fafc', // 100
'#edf2f7', // 200
'#e2e8f0', // 300
'#cbd5e0', // 400
'#a0aec0', // 500
'#718096', // 600
'#4a5568', // 700
'#2d3748', // 800
'#1a202c', // 900
// red
'#fff5f5', // 100
'#fed7d7', // 200
'#feb2b2', // 300
'#fc8181', // 400
'#f56565', // 500
'#e53e3e', // 600
'#c53030', // 700
'#9b2c2c', // 800
'#742a2a', // 900
// orange
'#fffaf0', // 100
'#feebc8', // 200
'#fbd38d', // 300
'#f6ad55', // 400
'#ed8936', // 500
'#dd6b20', // 600
'#c05621', // 700
'#9c4221', // 800
'#7b341e', // 900
// yellow: {
'#fffff0', // 100
'#fefcbf', // 200
'#faf089', // 300
'#f6e05e', // 400
'#ecc94b', // 500
'#d69e2e', // 600
'#b7791f', // 700
'#975a16', // 800
'#744210', // 900
// green
'#f0fff4', // 100
'#c6f6d5', // 200
'#9ae6b4', // 300
'#68d391', // 400
'#48bb78', // 500
'#38a169', // 600
'#2f855a', // 700
'#276749', // 800
'#22543d', // 900
// teal
'#e6fffa', // 100
'#b2f5ea', // 200
'#81e6d9', // 300
'#4fd1c5', // 400
'#38b2ac', // 500
'#319795', // 600
'#2c7a7b', // 700
'#285e61', // 800
'#234e52', // 900
// blue
'#ebf8ff', // 100
'#bee3f8', // 200
'#90cdf4', // 300
'#63b3ed', // 400
'#4299e1', // 500
'#3182ce', // 600
'#2b6cb0', // 700
'#2c5282', // 800
'#2a4365', // 900
// indigo
'#ebf4ff', // 100
'#c3dafe', // 200
'#a3bffa', // 300
'#7f9cf5', // 400
'#667eea', // 500
'#5a67d8', // 600
'#4c51bf', // 700
'#434190', // 800
'#3c366b', // 900
// purple
'#faf5ff', // 100
'#e9d8fd', // 200
'#d6bcfa', // 300
'#b794f4', // 400
'#9f7aea', // 500
'#805ad5', // 600
'#6b46c1', // 700
'#553c9a', // 800
'#44337a', // 900
// pink
'#fff5f7', // 100
'#fed7e2', // 200
'#fbb6ce', // 300
'#f687b3', // 400
'#ed64a6', // 500
'#d53f8c', // 600
'#b83280', // 700
'#97266d', // 800
'#702459', // 900
];
const spacing = [
'0', // 0
'1px', // px
'0.25rem', // 1
'0.5rem', // 2
'0.75rem', // 3
'1rem', // 4
'1.25rem', // 5
'1.5rem', // 6
'2rem', // 8
'2.5rem', // 10
'3rem', // 12
'4rem', // 16
'5rem', // 20
'6rem', // 24
'8rem', // 32
'10rem', // 40
'12rem', // 48
'14rem', // 56
'16rem', // 64
];
const negative = values => {
return values.reduce((all, value) => {
if (value !== '0') {
all.push(`-${value}`);
}
}, []);
};
module.exports = {
'subsets': {
'font-size': [
'0.75rem', // xs
'0.875rem', // sm
'1rem', // base
'1.125rem', // lg
'1.25rem', // xl
'1.5rem', // 2xl
'1.875rem', // 3xl
'2.25rem', // 4xl
'3rem', // 5xl
'4rem', // 6xl
],
'font-weight': [
'100', // hairline
'200', // thin
'300', // light
'400', // normal
'500', // medium
'600', // semibold
'700', // bold
'800', // extrabold
'900', // black
],
'font-family': [
// sans
'-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
'Georgia',
'Cambria',
'"Times New Roman"',
'Times',
'serif',
// mono
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
],
'height': [
...spacing,
'auto', // auto
'100%', // full
'100vh', // screen
],
'inset': [
'0', // 0
'auto', // auto
],
'letter-spacing': [
'-0.05em', // tighter
'-0.025em', // tight
'0', // normal
'0.025em', // wide
'0.05em', // wider
'0.1em', // widest
],
'line-height': [
'1', // none
'1.25', // tight
'1.375', // snug
'1.5', // normal
'1.625', // relaxed
'2', // loose
],
'list-style-type': [
'none', // none
'disc', // disc
'decimal', //decimal
],
'margin': [
'auto', // auto
...spacing,
...negative(spacing)
],
'max-height': [
'100%', // full
'100vh' // screen
],
'max-width': [
'20rem', // xs
'24rem', // sm
'28rem', // md
'32rem', // lg
'36rem', // xl
'42rem', // '2xl'
'48rem', // '3xl'
'56rem', // '4xl'
'64rem', // '5xl'
'72rem', // '6xl'
'100%', // full
],
'min-height': [
'0', // 0
'100%', // full
'100vh' // screen
],
'min-width': [
'0', // 0
'100%' // full
],
'border-width': [
'0', // 0
'1px', // default
'2px', // 2
'4px', // 4
'8px', // 8
],
'border-radius': [
'0', // none
'0.125rem', // sm
'0.25rem', // default
'0.5rem', // lg
'9999px', // full
],
'border-color': [
...colors
],
'border-style': ['solid'],
'box-shadow': [
'0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // default
'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', // md
'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', // lg
'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', // xl
'0 25px 50px -12px rgba(0, 0, 0, 0.25)', // '2xl
'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', // inner
'0 0 0 3px rgba(66, 153, 225, 0.5)', // outline
'none', // none
],
'cursor': [
'auto', // auto
'default', // default
'pointer', // pointer
'wait', // wait
'text', // text
'move', // move
'not-allowed', // not-allowed
],
'fill': [
'currentColor' // current
],
'flex': [
'1 1 0%', // 1
'1 1 auto', // auto
'0 1 auto', // initial
'none', // none
],
'flex-grow': [
'0', // 0
'1', // default
],
'flex-shrink': [
'0', // 0
'1', // default
],
'opacity': [
'0', // 0
'0.25', // 25
'0.5', // 50
'0.75', // 75
'1' // 100
],
'order': [
'0', // none
'1', // 1
'2', // 2
'3', // '3'
'4', // '4'
'5', // '5'
'6', // '6'
'7', // '7'
'8', // '8'
'9', // '9'
'10', // '10'
'11', // '11'
'12', // '12'
'-9999', //first
'9999', // last
],
'padding': [...spacing],
'stroke': [
'currentColor' // current
],
'color': [...colors],
'width': [
...spacing,
'auto', // auto
'50%', // '1/2'
'33.333333%', // '1/3'
'66.666667%', // '2/3'
'25%', // '1/4'
'50%', // '2/4'
'75%', // '3/4'
'20%', // '1/5'
'40%', // '2/5'
'60%', // '3/5'
'80%', // '4/5'
'16.666667%', // '1/6'
'33.333333%', // '2/6'
'50%', // '3/6'
'66.666667%', // '4/6'
'83.333333%', // '5/6'
'8.333333%', // '1/12'
'16.666667%', // '2/12'
'25%', // '3/12'
'33.333333%', // '4/12'
'41.666667%', // '5/12'
'50%', // '6/12'
'58.333333%', // '7/12'
'66.666667%', // '8/12'
'75%', // '9/12'
'83.333333%', // '10/12'
'91.666667%', // '11/12'
'100%', // full
'100vw', // screen
],
'z-index': [
'auto', // auto
'0', // 0
'10', // 10
'20', // 20
'30', // 30
'40', // 40
'50', // 50
],
'background-color': [...colors],
'background-position': [
'bottom', // bottom
'center', // center
'left', // left
'left bottom', // left-bottom
'left top', // left-top
'right', // right
'right bottom', // right-bottom
'right top', // right-top
'top', // top
],
'background-size': [
'auto', // auto
'cover', // cover
'contain', // contain
]
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment