464 lines
15 KiB
JavaScript
464 lines
15 KiB
JavaScript
module.exports = {
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx}',
|
|
'./components/**/*.{js,ts,jsx,tsx}',
|
|
],
|
|
theme: {
|
|
fontFamily: {
|
|
display: ['TT Commons Expanded, sans-serif'],
|
|
body: 'TT Commons, sans-serif',
|
|
mono: ['TT Mono, mono'],
|
|
},
|
|
extend: {
|
|
animation: {
|
|
shake: 'shake 0.4s linear 4',
|
|
'spin-fast': 'spin 0.5s linear infinite',
|
|
},
|
|
backgroundImage: {
|
|
'long-loss': "url('/share_images/bg-long-loss.png')",
|
|
'long-profit': "url('/share_images/bg-long-profit.png')",
|
|
'short-loss': "url('/share_images/bg-short-loss.png')",
|
|
'short-profit': "url('/share_images/bg-short-profit.png')",
|
|
},
|
|
boxShadow: {
|
|
bottomBar: '0px -4px 8px -1px rgba(0,0,0,0.2)',
|
|
},
|
|
// each color category in a theme has a single base color with the variations acheived by adjusting lightness (dark and hover variants) and lightness and saturation for muted variants
|
|
colors: {
|
|
'mango-classic-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(45, 86%, 62%)',
|
|
dark: 'hsl(45, 86%, 57%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(269, 23%, 48%)',
|
|
hover: 'hsl(269, 23%, 43%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(256, 18%, 10%)',
|
|
border: 'hsl(253, 19%, 41%)',
|
|
borderDark: 'hsl(253, 19%, 31%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(4, 63%, 55%)',
|
|
dark: 'hsl(4, 93%, 55%)',
|
|
muted: 'hsl(4, 43%, 38%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(77, 63%, 40%)',
|
|
dark: 'hsl(85, 50%, 36%)',
|
|
muted: 'hsl(84, 40%, 32%)',
|
|
},
|
|
error: 'hsl(4, 93%, 60%)',
|
|
success: 'hsl(82, 97%, 41%)',
|
|
warning: 'hsl(33, 100%, 57%)',
|
|
'bkg-1': 'hsl(256, 18%, 12%)',
|
|
'bkg-2': 'hsl(256, 18%, 17%)',
|
|
'bkg-3': 'hsl(256, 18%, 22%)',
|
|
'bkg-4': 'hsl(256, 18%, 27%)',
|
|
'fgd-1': 'hsl(253, 19%, 91%)',
|
|
'fgd-2': 'hsl(253, 19%, 81%)',
|
|
'fgd-3': 'hsl(253, 19%, 71%)',
|
|
'fgd-4': 'hsl(253, 19%, 61%)',
|
|
},
|
|
'light-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(0, 0%, 8%)',
|
|
dark: 'hsl(33, 100%, 52%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(0, 0%, 84%)',
|
|
hover: 'hsl(0, 0%, 74%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(0, 0%, 97%)',
|
|
border: 'hsl(0, 0%, 33%)',
|
|
borderDark: 'hsl(0, 0%, 23%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(0, 39%, 58%)',
|
|
dark: 'hsl(0, 39%, 53%)',
|
|
muted: 'hsl(0, 19%, 53%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(111, 47%, 53%)',
|
|
dark: 'hsl(111, 47%, 48%)',
|
|
muted: 'hsl(111, 7%, 48%)',
|
|
},
|
|
error: 'hsl(0, 39%, 58%)',
|
|
success: 'hsl(111, 47%, 53%)',
|
|
warning: 'hsl(33, 100%, 57%)',
|
|
'bkg-1': 'hsl(0, 0%, 99%)',
|
|
'bkg-2': 'hsl(0, 0%, 94%)',
|
|
'bkg-3': 'hsl(0, 0%, 89%)',
|
|
'bkg-4': 'hsl(0, 0%, 84%)',
|
|
'fgd-1': 'hsl(0, 0%, 8%)',
|
|
'fgd-2': 'hsl(0, 0%, 23%)',
|
|
'fgd-3': 'hsl(0, 0%, 38%)',
|
|
'fgd-4': 'hsl(0, 0%, 53%)',
|
|
},
|
|
'dark-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(45, 86%, 62%)',
|
|
dark: 'hsl(45, 86%, 57%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(269, 0%, 38%)',
|
|
hover: 'hsl(269, 0%, 33%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(240, 6%, 5%)',
|
|
border: 'hsl(0, 0%, 32%)',
|
|
borderDark: 'hsl(0, 0%, 22%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(358, 55%, 50%)',
|
|
dark: 'hsl(0, 45%, 26%)',
|
|
muted: 'hsl(0, 45%, 30%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(111, 47%, 43%)',
|
|
dark: 'hsl(111, 47%, 38%)',
|
|
muted: 'hsl(130, 34%, 26%)',
|
|
},
|
|
error: 'hsl(0, 59%, 58%)',
|
|
success: 'hsl(111, 47%, 43%)',
|
|
warning: 'hsl(45, 86%, 62%)',
|
|
'bkg-1': 'hsl(240, 6%, 7%)',
|
|
'bkg-2': 'hsl(240, 6%, 12%)',
|
|
'bkg-3': 'hsl(240, 6%, 17%)',
|
|
'bkg-4': 'hsl(240, 6%, 22%)',
|
|
'fgd-1': 'hsl(0, 0%, 82%)',
|
|
'fgd-2': 'hsl(0, 0%, 72%)',
|
|
'fgd-3': 'hsl(0, 0%, 62%)',
|
|
'fgd-4': 'hsl(0, 0%, 52%)',
|
|
},
|
|
'medium-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(45, 86%, 62%)',
|
|
dark: 'hsl(45, 86%, 57%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(269, 0%, 43%)',
|
|
hover: 'hsl(269, 0%, 38%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(240, 6%, 10%)',
|
|
border: 'hsl(0, 0%, 30%)',
|
|
borderDark: 'hsl(0, 0%, 20%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(0, 59%, 58%)',
|
|
dark: 'hsl(0, 59%, 53%)',
|
|
muted: 'hsl(0, 19%, 53%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(111, 47%, 43%)',
|
|
dark: 'hsl(111, 47%, 38%)',
|
|
muted: 'hsl(111, 7%, 38%)',
|
|
},
|
|
error: 'hsl(0, 59%, 58%)',
|
|
success: 'hsl(111, 47%, 43%)',
|
|
warning: 'hsl(45, 86%, 62%)',
|
|
'bkg-1': 'hsl(240, 6%, 12%)',
|
|
'bkg-2': 'hsl(240, 6%, 17%)',
|
|
'bkg-3': 'hsl(240, 6%, 22%)',
|
|
'bkg-4': 'hsl(240, 6%, 27%)',
|
|
'fgd-1': 'hsl(0, 0%, 80%)',
|
|
'fgd-2': 'hsl(0, 0%, 70%)',
|
|
'fgd-3': 'hsl(0, 0%, 60%)',
|
|
'fgd-4': 'hsl(0, 0%, 50%)',
|
|
},
|
|
'high-contrast-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(62, 96%, 54%)',
|
|
dark: 'hsl(62, 96%, 49%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(62, 96%, 54%)',
|
|
hover: 'hsl(62, 96%, 49%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(0, 0%, 0%)',
|
|
border: 'hsl(0, 0%, 65%)',
|
|
borderDark: 'hsl(0, 0%, 55%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(0, 100%, 58%)',
|
|
dark: 'hsl(0, 100%, 58%)',
|
|
muted: 'hsl(0, 49%, 48%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(111, 90%, 58%)',
|
|
dark: 'hsl(111, 90%, 58%)',
|
|
muted: 'hsl(111, 40%, 48%)',
|
|
},
|
|
error: 'hsl(0, 100%, 58%)',
|
|
success: 'hsl(111, 90%, 58%)',
|
|
warning: 'hsl(45, 86%, 62%)',
|
|
'bkg-1': 'hsl(0, 0%, 0%)',
|
|
'bkg-2': 'hsl(0, 0%, 7%)',
|
|
'bkg-3': 'hsl(0, 0%, 14%)',
|
|
'bkg-4': 'hsl(0, 0%, 21%)',
|
|
'fgd-1': 'hsl(0, 0%, 100%)',
|
|
'fgd-2': 'hsl(0, 0%, 95%)',
|
|
'fgd-3': 'hsl(0, 0%, 90%)',
|
|
'fgd-4': 'hsl(0, 0%, 85%)',
|
|
},
|
|
'blueberry-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(45, 86%, 62%)',
|
|
dark: 'hsl(45, 86%, 57%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(220, 91%, 44%)',
|
|
hover: 'hsl(220, 91%, 39%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(222, 74%, 19%)',
|
|
border: 'hsl(220, 71%, 46%)',
|
|
borderDark: 'hsl(220, 71%, 36%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(3, 59%, 56%)',
|
|
dark: 'hsl(3, 59%, 51%)',
|
|
muted: 'hsl(3, 19%, 51%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(165, 82%, 37%)',
|
|
dark: 'hsl(165, 82%, 32%)',
|
|
muted: 'hsl(165, 42%, 32%)',
|
|
},
|
|
error: 'hsl(3, 59%, 56%)',
|
|
success: 'hsl(165, 82%, 37%)',
|
|
warning: 'hsl(45, 86%, 62%)',
|
|
'bkg-1': 'hsl(222, 74%, 21%)',
|
|
'bkg-2': 'hsl(222, 74%, 26%)',
|
|
'bkg-3': 'hsl(222, 74%, 31%)',
|
|
'bkg-4': 'hsl(222, 74%, 36%)',
|
|
'fgd-1': 'hsl(220, 71%, 96%)',
|
|
'fgd-2': 'hsl(220, 71%, 86%)',
|
|
'fgd-3': 'hsl(220, 71%, 76%)',
|
|
'fgd-4': 'hsl(220, 71%, 66%)',
|
|
},
|
|
'banana-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(236, 95%, 68%)',
|
|
dark: 'hsl(236, 95%, 58%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(51, 95%, 72%)',
|
|
hover: 'hsl(51, 95%, 68%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(55, 90%, 88%)',
|
|
border: 'hsl(60, 10%, 24%)',
|
|
borderDark: 'hsl(60, 10%, 14%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(0, 39%, 58%)',
|
|
dark: 'hsl(0, 39%, 53%)',
|
|
muted: 'hsl(0, 19%, 53%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(110, 23%, 59%)',
|
|
dark: 'hsl(110, 23%, 54%)',
|
|
muted: 'hsl(110, 3%, 54%)',
|
|
},
|
|
error: 'hsl(0, 39%, 58%)',
|
|
success: 'hsl(110, 23%, 59%)',
|
|
warning: 'hsl(33, 100%, 57%)',
|
|
'bkg-1': 'hsl(55, 90%, 90%)',
|
|
'bkg-2': 'hsl(55, 80%, 85%)',
|
|
'bkg-3': 'hsl(55, 70%, 80%)',
|
|
'bkg-4': 'hsl(55, 60%, 75%)',
|
|
'fgd-1': 'hsl(60, 10%, 14%)',
|
|
'fgd-2': 'hsl(60, 10%, 24%)',
|
|
'fgd-3': 'hsl(60, 10%, 34%)',
|
|
'fgd-4': 'hsl(60, 10%, 44%)',
|
|
},
|
|
'avocado-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(63, 74%, 67%)',
|
|
dark: 'hsl(63, 74%, 62%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(156, 55%, 26%)',
|
|
hover: 'hsl(156, 55%, 21%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(156, 48%, 7%)',
|
|
border: 'hsl(120, 20%, 43%)',
|
|
borderDark: 'hsl(120, 20%, 33%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 42%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(3, 59%, 56%)',
|
|
dark: 'hsl(3, 59%, 51%)',
|
|
muted: 'hsl(3, 19%, 51%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(120, 50%, 53%)',
|
|
dark: 'hsl(120, 50%, 48%)',
|
|
muted: 'hsl(120, 10%, 48%)',
|
|
},
|
|
error: 'hsl(3, 59%, 56%)',
|
|
success: 'hsl(120, 50%, 53%)',
|
|
warning: 'hsl(37, 92%, 62%)',
|
|
'bkg-1': 'hsl(156, 48%, 9%)',
|
|
'bkg-2': 'hsl(156, 48%, 14%)',
|
|
'bkg-3': 'hsl(156, 48%, 19%)',
|
|
'bkg-4': 'hsl(156, 48%, 24%)',
|
|
'fgd-1': 'hsl(120, 20%, 93%)',
|
|
'fgd-2': 'hsl(120, 20%, 83%)',
|
|
'fgd-3': 'hsl(120, 20%, 73%)',
|
|
'fgd-4': 'hsl(120, 20%, 63%)',
|
|
},
|
|
'olive-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(53, 68%, 71%)',
|
|
dark: 'hsl(53, 68%, 66%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(51, 13%, 44%)',
|
|
hover: 'hsl(51, 13%, 39%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(51, 16%, 17%)',
|
|
border: 'hsl(55, 17%, 41%)',
|
|
borderDark: 'hsl(55, 17%, 31%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(3, 85%, 56%)',
|
|
dark: 'hsl(3, 85%, 51%)',
|
|
muted: 'hsl(3, 45%, 51%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(102, 63%, 41%)',
|
|
dark: 'hsl(102, 63%, 36%)',
|
|
muted: 'hsl(102, 23%, 36%)',
|
|
},
|
|
error: 'hsl(3, 59%, 76%)',
|
|
success: 'hsl(102, 63%, 41%)',
|
|
warning: 'hsl(45, 86%, 62%)',
|
|
'bkg-1': 'hsl(51, 16%, 19%)',
|
|
'bkg-2': 'hsl(51, 16%, 24%)',
|
|
'bkg-3': 'hsl(51, 16%, 29%)',
|
|
'bkg-4': 'hsl(51, 16%, 34%)',
|
|
'fgd-1': 'hsl(55, 47%, 91%)',
|
|
'fgd-2': 'hsl(55, 37%, 81%)',
|
|
'fgd-3': 'hsl(55, 27%, 71%)',
|
|
'fgd-4': 'hsl(55, 17%, 61%)',
|
|
},
|
|
'lychee-theme': {
|
|
active: {
|
|
DEFAULT: 'hsl(236, 95%, 32%)',
|
|
dark: 'hsl(236, 95%, 27%)',
|
|
},
|
|
button: {
|
|
DEFAULT: 'hsl(356, 61%, 80%)',
|
|
hover: 'hsl(356, 61%, 75%)',
|
|
},
|
|
input: {
|
|
bkg: 'hsl(356, 58%, 93%)',
|
|
border: 'hsl(357, 41%, 31%)',
|
|
borderDark: 'hsl(357, 41%, 21%)',
|
|
},
|
|
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
|
|
down: {
|
|
DEFAULT: 'hsl(356, 61%, 48%)',
|
|
dark: 'hsl(356, 61%, 43%)',
|
|
muted: 'hsl(356, 21%, 43%)',
|
|
},
|
|
up: {
|
|
DEFAULT: 'hsl(155, 48%, 34%)',
|
|
dark: 'hsl(155, 48%, 29%)',
|
|
muted: 'hsl(155, 8%, 29%)',
|
|
},
|
|
error: 'hsl(356, 61%, 48%)',
|
|
success: 'hsl(155, 48%, 34%)',
|
|
warning: 'hsl(33, 100%, 44%)',
|
|
'bkg-1': 'hsl(356, 58%, 95%)',
|
|
'bkg-2': 'hsl(356, 58%, 90%)',
|
|
'bkg-3': 'hsl(356, 58%, 85%)',
|
|
'bkg-4': 'hsl(356, 58%, 80%)',
|
|
'fgd-1': 'hsl(357, 56%, 21%)',
|
|
'fgd-2': 'hsl(357, 51%, 31%)',
|
|
'fgd-3': 'hsl(357, 46%, 41%)',
|
|
'fgd-4': 'hsl(357, 41%, 51%)',
|
|
},
|
|
'th-bkg-1': 'var(--bkg-1)',
|
|
'th-bkg-2': 'var(--bkg-2)',
|
|
'th-bkg-3': 'var(--bkg-3)',
|
|
'th-bkg-4': 'var(--bkg-4)',
|
|
'th-fgd-1': 'var(--fgd-1)',
|
|
'th-fgd-2': 'var(--fgd-2)',
|
|
'th-fgd-3': 'var(--fgd-3)',
|
|
'th-fgd-4': 'var(--fgd-4)',
|
|
'th-active': 'var(--active)',
|
|
'th-active-dark': 'var(--active-dark)',
|
|
'th-error': 'var(--error)',
|
|
'th-success': 'var(--success)',
|
|
'th-warning': 'var(--warning)',
|
|
'th-down': 'var(--down)',
|
|
'th-down-dark': 'var(--down-dark)',
|
|
'th-down-muted': 'var(--down-muted)',
|
|
'th-up': 'var(--up)',
|
|
'th-up-dark': 'var(--up-dark)',
|
|
'th-up-muted': 'var(--up-muted)',
|
|
'th-link': 'var(--link)',
|
|
'th-link-hover': 'var(--link-hover)',
|
|
'th-button': 'var(--button)',
|
|
'th-button-hover': 'var(--button-hover)',
|
|
'th-input-bkg': 'var(--input-bkg)',
|
|
'th-input-border': 'var(--input-border)',
|
|
'th-input-border-hover': 'var(--input-border-hover)',
|
|
},
|
|
cursor: {
|
|
help: 'help',
|
|
},
|
|
fontSize: {
|
|
xxs: '.65rem',
|
|
},
|
|
keyframes: {
|
|
shake: {
|
|
'0%, 100%': {
|
|
transform: 'rotate(0deg)',
|
|
},
|
|
'20%, 60%': {
|
|
transform: 'rotate(6deg)',
|
|
},
|
|
'40%, 80%': {
|
|
transform: 'rotate(-6deg)',
|
|
},
|
|
},
|
|
shimmer: {
|
|
'100%': {
|
|
transform: 'translateX(100%)',
|
|
},
|
|
},
|
|
},
|
|
screens: {
|
|
xl: '1600px',
|
|
},
|
|
},
|
|
},
|
|
// variants: {
|
|
// extend: {
|
|
// cursor: ['hover', 'focus', 'disabled'],
|
|
// opacity: ['disabled'],
|
|
// backgroundColor: ['disabled'],
|
|
// textColor: ['disabled'],
|
|
// },
|
|
// },
|
|
plugins: [],
|
|
}
|