blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

more theme color changes

This commit is contained in:
saml33 2022-12-02 22:28:46 +11:00
parent 1d8a91795e
commit e553b07dbd
5 changed files with 111 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/SideNav.tsx
View File

@ -22,6 +22,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
import mangoStore from '@store/mangoStore' import mangoStore from '@store/mangoStore'
import HealthHeart from './account/HealthHeart' import HealthHeart from './account/HealthHeart'
import useMangoAccount from 'hooks/useMangoAccount' import useMangoAccount from 'hooks/useMangoAccount'
import { useTheme } from 'next-themes'
const SideNav = ({ collapsed }: { collapsed: boolean }) => { const SideNav = ({ collapsed }: { collapsed: boolean }) => {
const { t } = useTranslation('common') const { t } = useTranslation('common')
@ -197,13 +198,18 @@ const MenuItem = ({
isExternal?: boolean isExternal?: boolean
showTooltip?: boolean showTooltip?: boolean
}) => { }) => {
const { theme } = useTheme()
return ( return (
<Tooltip content={title} placement="right" show={collapsed && showTooltip}> <Tooltip content={title} placement="right" show={collapsed && showTooltip}>
<Link <Link
href={pagePath} href={pagePath}
shallow={true} shallow={true}
className={`default-transition flex cursor-pointer px-4 focus:text-th-active focus:outline-none md:hover:text-th-active ${ className={`default-transition flex cursor-pointer px-4 focus:text-th-active focus:outline-none md:hover:text-th-active ${
active ? 'text-th-active' : 'text-th-fgd-1' active
? 'text-th-active'
: theme === 'Light'
? 'text-th-fgd-3'
: 'text-th-fgd-2'
} ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`} } ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}
> >
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
@ -212,7 +218,9 @@ const MenuItem = ({
className={ className={
hideIconBg hideIconBg
? '' ? ''
: 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3' : `flex h-8 w-8 items-center justify-center rounded-full ${
theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
}`
} }
> >
{icon} {icon}
@ -255,6 +263,7 @@ export const ExpandableMenuItem = ({
title: string | ReactNode title: string | ReactNode
}) => { }) => {
const [showMenu, setShowMenu] = useState(false) const [showMenu, setShowMenu] = useState(false)
const { theme } = useTheme()
const onHoverMenu = (open: boolean, action: string) => { const onHoverMenu = (open: boolean, action: string) => {
if ( if (
@ -288,14 +297,18 @@ export const ExpandableMenuItem = ({
role="button" role="button"
> >
<Popover.Button <Popover.Button
className="md:hover:text-th-active" className={`${
theme === 'Light' ? 'text-th-fgd-3' : 'text-th-fgd-2'
} md:hover:text-th-active`}
onClick={() => toggleMenu()} onClick={() => toggleMenu()}
> >
<div <div
className={` ${ className={` ${
hideIconBg hideIconBg
? '' ? ''
: 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3' : `flex h-8 w-8 items-center justify-center rounded-full ${
theme === 'Light' ? 'bg-th-bkg-2' : 'bg-th-bkg-3'
}`
} ${ } ${
alignBottom alignBottom
? 'default-transition flex h-[64px] w-[64px] items-center justify-center hover:bg-th-bkg-2' ? 'default-transition flex h-[64px] w-[64px] items-center justify-center hover:bg-th-bkg-2'

10
components/shared/Button.tsx
View File

@ -29,15 +29,15 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
disabled={disabled} disabled={disabled}
className={`whitespace-nowrap rounded-md ${ className={`whitespace-nowrap rounded-md ${
secondary secondary
? 'border border-th-bkg-4 text-th-fgd-1 md:hover:border-th-fgd-4' ? 'border border-th-button md:hover:border-th-button-hover'
: 'bg-th-button text-white md:hover:bg-th-button-hover' : 'bg-th-button md:hover:bg-th-button-hover'
} ${ } ${
size === 'medium' size === 'medium'
? 'h-10 px-4' ? 'h-10 px-4'
: size === 'large' : size === 'large'
? 'h-12 px-6' ? 'h-12 px-6'
: 'h-8 px-3' : 'h-8 px-3'
} default-transition font-bold focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:brightness-100 ${className}`} } default-transition font-bold text-th-fgd-1 focus:outline-none disabled:cursor-not-allowed disabled:text-th-fgd-3 disabled:opacity-60 disabled:hover:brightness-100 ${className}`}
{...props} {...props}
> >
{children} {children}
@ -72,7 +72,9 @@ export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
? 'h-8 w-8' ? 'h-8 w-8'
: 'h-10 w-10' : 'h-10 w-10'
} default-transition items-center justify-center rounded-full ${ } default-transition items-center justify-center rounded-full ${
hideBg ? 'md:hover:text-th-active' : 'bg-th-bkg-4 md:hover:bg-th-bkg-3' hideBg
? 'md:hover:text-th-active'
: 'border border-th-button md:hover:border-th-button-hover'
} text-th-fgd-1 focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 } text-th-fgd-1 focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4
disabled:text-th-fgd-4 md:disabled:hover:text-th-fgd-4 ${className}`} disabled:text-th-fgd-4 md:disabled:hover:text-th-fgd-4 ${className}`}
{...props} {...props}

2
components/shared/IconDropMenu.tsx
View File

@ -44,7 +44,7 @@ const IconDropMenu = ({
: size === 'medium' : size === 'medium'
? 'h-10 w-10' ? 'h-10 w-10'
: 'h-8 w-8' : 'h-8 w-8'
} default-transition items-center justify-center rounded-full border border-th-bkg-4 text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:text-th-fgd-1 ${ } default-transition items-center justify-center rounded-full border border-th-button text-th-fgd-1 md:hover:border-th-button-hover md:hover:text-th-fgd-1 ${
disabled ? 'cursor-not-allowed opacity-60' : '' disabled ? 'cursor-not-allowed opacity-60' : ''
}`} }`}
disabled={disabled} disabled={disabled}

32
styles/colors.ts
View File

@ -3,47 +3,42 @@ export const COLORS: any = {
'Mango Classic': '#18181C', 'Mango Classic': '#18181C',
Dark: '#111113', Dark: '#111113',
Light: '#fcfcfc', Light: '#fcfcfc',
// Smoothy: 'hsl(45, 100%, 96%)',
Avocado: '#0c2219', Avocado: '#0c2219',
Medium: '#1d1d20', Medium: '#1d1d20',
Blueberry: '#0e265d', Blueberry: '#0e265d',
Banana: '#FFFDE8', Banana: '#fcf9cf',
}, },
BKG2: { BKG2: {
'Mango Classic': '#282433', 'Mango Classic': '#282433',
Dark: '#1d1d20', Dark: '#1d1d20',
Light: '#f0f0f0', Light: '#f0f0f0',
// Smoothy: 'hsl(45, 100%, 91%)',
Avocado: '#133527', Avocado: '#133527',
Medium: '#29292e', Medium: '#29292e',
Blueberry: '#112f73', Blueberry: '#112f73',
Banana: '#fcf9cf', Banana: '#f7f2ba',
}, },
BKG3: { BKG3: {
'Mango Classic': '#332e42', 'Mango Classic': '#332e42',
Dark: '#29292e', Dark: '#29292e',
Light: '#e3e3e3', Light: '#e3e3e3',
// Smoothy: 'hsl(45, 100%, 86%)',
Avocado: '#194835', Avocado: '#194835',
Medium: '#35353b', Medium: '#35353b',
Blueberry: '#15388a', Blueberry: '#15388a',
Banana: '#f7f2ba', Banana: '#f0eaa8',
}, },
BKG4: { BKG4: {
'Mango Classic': '#3f3851', 'Mango Classic': '#3f3851',
Dark: '#35353b', Dark: '#35353b',
Light: '#d6d6d6', Light: '#d6d6d6',
// Smoothy: 'hsl(45, 100%, 81%)',
Avocado: '#205b43', Avocado: '#205b43',
Medium: '#414149', Medium: '#414149',
Blueberry: '#1841a0', Blueberry: '#1841a0',
Banana: '#f0eaa8', Banana: '#e6df99',
}, },
FGD4: { FGD4: {
'Mango Classic': '#9189ae', 'Mango Classic': '#9189ae',
Dark: '#858585', Dark: '#858585',
Light: '#1c93a6', Light: '#878787',
// Smoothy: 'hsl(45, 100%, 34%)',
Avocado: '#8eb48e', Avocado: '#8eb48e',
Medium: '#808080', Medium: '#808080',
Blueberry: '#6b94e6', Blueberry: '#6b94e6',
@ -51,31 +46,28 @@ export const COLORS: any = {
}, },
UP: { UP: {
'Mango Classic': '#A6CD03', 'Mango Classic': '#A6CD03',
Dark: '#60bf4f', Dark: '#4aa13a',
Light: '#60bf4f', Light: '#60bf4f',
// Smoothy: 'hsl(110, 73%, 40%)',
Avocado: '#4bc34b', Avocado: '#4bc34b',
Medium: '#60bf4f', Medium: '#4aa13a',
Blueberry: '#15d1a2', Blueberry: '#15d1a2',
Banana: '#86AE7E', Banana: '#86AE7E',
}, },
ACTIVE: { ACTIVE: {
'Mango Classic': '#f1c84b', 'Mango Classic': '#f1c84b',
Dark: '#f1c84b', Dark: '#f1c84b',
Light: '#ff9c24', Light: '#141414',
// Smoothy: 'hsl(321, 100%, 48%)',
Avocado: '#E3E96C', Avocado: '#E3E96C',
Medium: '#f1c84b', Medium: '#f1c84b',
Blueberry: '#f1c84b', Blueberry: '#f1c84b',
Banana: '#4A97CF', Banana: '#606afb',
}, },
DOWN: { DOWN: {
'Mango Classic': '#F84638', 'Mango Classic': '#F84638',
Dark: '#cc2828', Dark: '#d35555',
Light: '#cc2828', Light: '#BE6A6A',
// Smoothy: 'hsl(0, 100%, 56%)',
Avocado: '#d1534d', Avocado: '#d1534d',
Medium: '#cc2828', Medium: '#d35555',
Blueberry: '#d1534d', Blueberry: '#d1534d',
Banana: '#BE6A6A', Banana: '#BE6A6A',
}, },

182
tailwind.config.js
View File

@ -25,22 +25,22 @@ module.exports = {
'mango-classic-theme': { 'mango-classic-theme': {
active: { active: {
DEFAULT: 'hsl(45, 86%, 62%)', DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 52%)', dark: 'hsl(45, 86%, 57%)',
}, },
button: { button: {
DEFAULT: 'hsl(251, 41%, 48%)', DEFAULT: 'hsl(269, 23%, 48%)',
hover: 'hsl(251, 41%, 38%)', hover: 'hsl(269, 23%, 43%)',
}, },
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 47%)' }, link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
down: { down: {
DEFAULT: 'hsl(4, 93%, 60%)', DEFAULT: 'hsl(4, 93%, 60%)',
dark: 'hsl(4, 93%, 50%)', dark: 'hsl(4, 93%, 55%)',
muted: 'hsl(4, 53%, 50%)', muted: 'hsl(4, 53%, 55%)',
}, },
up: { up: {
DEFAULT: 'hsl(72, 97%, 41%)', DEFAULT: 'hsl(72, 97%, 41%)',
dark: 'hsl(72, 97%, 31%)', dark: 'hsl(72, 97%, 36%)',
muted: 'hsl(72, 57%, 31%)', muted: 'hsl(72, 57%, 36%)',
}, },
error: 'hsl(4, 93%, 60%)', error: 'hsl(4, 93%, 60%)',
success: 'hsl(72, 97%, 41%)', success: 'hsl(72, 97%, 41%)',
@ -56,58 +56,58 @@ module.exports = {
}, },
'light-theme': { 'light-theme': {
active: { active: {
DEFAULT: 'hsl(33, 100%, 57%)', DEFAULT: 'hsl(0, 0%, 8%)',
dark: 'hsl(33, 100%, 47%)', dark: 'hsl(33, 100%, 52%)',
}, },
button: { button: {
DEFAULT: 'hsl(251, 41%, 56%)', DEFAULT: 'hsl(0, 0%, 84%)',
hover: 'hsl(251, 41%, 46%)', hover: 'hsl(0, 0%, 74%)',
}, },
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 47%)' }, link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
down: { down: {
DEFAULT: 'hsl(0, 67%, 48%)', DEFAULT: 'hsl(0, 39%, 58%)',
dark: 'hsl(0, 67%, 38%)', dark: 'hsl(0, 39%, 53%)',
muted: 'hsl(0, 27%, 38%)', muted: 'hsl(0, 19%, 53%)',
}, },
up: { up: {
DEFAULT: 'hsl(111, 47%, 53%)', DEFAULT: 'hsl(111, 47%, 53%)',
dark: 'hsl(111, 47%, 43%)', dark: 'hsl(111, 47%, 48%)',
muted: 'hsl(111, 7%, 43%)', muted: 'hsl(111, 7%, 48%)',
}, },
error: 'hsl(0, 67%, 48%)', error: 'hsl(0, 39%, 58%)',
success: 'hsl(111, 47%, 53%)', success: 'hsl(111, 47%, 53%)',
warning: 'hsl(33, 100%, 57%)', warning: 'hsl(33, 100%, 57%)',
'bkg-1': 'hsl(0, 0%, 99%)', 'bkg-1': 'hsl(0, 0%, 99%)',
'bkg-2': 'hsl(0, 0%, 94%)', 'bkg-2': 'hsl(0, 0%, 94%)',
'bkg-3': 'hsl(0, 0%, 89%)', 'bkg-3': 'hsl(0, 0%, 89%)',
'bkg-4': 'hsl(0, 0%, 84%)', 'bkg-4': 'hsl(0, 0%, 84%)',
'fgd-1': 'hsl(188, 71%, 8%)', 'fgd-1': 'hsl(0, 0%, 8%)',
'fgd-2': 'hsl(188, 71%, 18%)', 'fgd-2': 'hsl(0, 0%, 23%)',
'fgd-3': 'hsl(188, 71%, 28%)', 'fgd-3': 'hsl(0, 0%, 38%)',
'fgd-4': 'hsl(188, 71%, 38%)', 'fgd-4': 'hsl(0, 0%, 53%)',
}, },
'dark-theme': { 'dark-theme': {
active: { active: {
DEFAULT: 'hsl(45, 86%, 62%)', DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 52%)', dark: 'hsl(45, 86%, 57%)',
}, },
button: { button: {
DEFAULT: 'hsl(251, 41%, 48%)', DEFAULT: 'hsl(269, 0%, 38%)',
hover: 'hsl(251, 41%, 38%)', hover: 'hsl(269, 0%, 33%)',
}, },
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' }, link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: { down: {
DEFAULT: 'hsl(0, 67%, 48%)', DEFAULT: 'hsl(0, 59%, 58%)',
dark: 'hsl(0, 67%, 38%)', dark: 'hsl(0, 59%, 53%)',
muted: 'hsl(0, 27%, 38%)', muted: 'hsl(0, 19%, 53%)',
}, },
up: { up: {
DEFAULT: 'hsl(111, 47%, 53%)', DEFAULT: 'hsl(111, 47%, 43%)',
dark: 'hsl(111, 47%, 43%)', dark: 'hsl(111, 47%, 38%)',
muted: 'hsl(111, 7%, 43%)', muted: 'hsl(111, 7%, 38%)',
}, },
error: 'hsl(0, 67%, 48%)', error: 'hsl(0, 59%, 58%)',
success: 'hsl(111, 47%, 53%)', success: 'hsl(111, 47%, 43%)',
warning: 'hsl(45, 86%, 62%)', warning: 'hsl(45, 86%, 62%)',
'bkg-1': 'hsl(240, 6%, 7%)', 'bkg-1': 'hsl(240, 6%, 7%)',
'bkg-2': 'hsl(240, 6%, 12%)', 'bkg-2': 'hsl(240, 6%, 12%)',
@ -121,25 +121,25 @@ module.exports = {
'medium-theme': { 'medium-theme': {
active: { active: {
DEFAULT: 'hsl(45, 86%, 62%)', DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 52%)', dark: 'hsl(45, 86%, 57%)',
}, },
button: { button: {
DEFAULT: 'hsl(251, 35%, 38%)', DEFAULT: 'hsl(269, 0%, 43%)',
hover: 'hsl(251, 35%, 28%)', hover: 'hsl(269, 0%, 38%)',
}, },
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' }, link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: { down: {
DEFAULT: 'hsl(0, 67%, 48%)', DEFAULT: 'hsl(0, 59%, 58%)',
dark: 'hsl(0, 67%, 38%)', dark: 'hsl(0, 59%, 53%)',
muted: 'hsl(0, 27%, 38%)', muted: 'hsl(0, 19%, 53%)',
}, },
up: { up: {
DEFAULT: 'hsl(111, 47%, 53%)', DEFAULT: 'hsl(111, 47%, 43%)',
dark: 'hsl(111, 47%, 43%)', dark: 'hsl(111, 47%, 38%)',
muted: 'hsl(111, 7%, 43%)', muted: 'hsl(111, 7%, 38%)',
}, },
error: 'hsl(0, 67%, 48%)', error: 'hsl(0, 59%, 58%)',
success: 'hsl(111, 47%, 53%)', success: 'hsl(111, 47%, 43%)',
warning: 'hsl(45, 86%, 62%)', warning: 'hsl(45, 86%, 62%)',
'bkg-1': 'hsl(240, 6%, 12%)', 'bkg-1': 'hsl(240, 6%, 12%)',
'bkg-2': 'hsl(240, 6%, 17%)', 'bkg-2': 'hsl(240, 6%, 17%)',
@ -153,22 +153,22 @@ module.exports = {
'blueberry-theme': { 'blueberry-theme': {
active: { active: {
DEFAULT: 'hsl(45, 86%, 62%)', DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 52%)', dark: 'hsl(45, 86%, 57%)',
}, },
button: { button: {
DEFAULT: 'hsl(220, 91%, 64%)', DEFAULT: 'hsl(220, 91%, 64%)',
hover: 'hsl(220, 91%, 54%)', hover: 'hsl(220, 91%, 59%)',
}, },
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' }, link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: { down: {
DEFAULT: 'hsl(3, 59%, 56%)', DEFAULT: 'hsl(3, 59%, 56%)',
dark: 'hsl(3, 59%, 46%)', dark: 'hsl(3, 59%, 51%)',
muted: 'hsl(3, 19%, 46%)', muted: 'hsl(3, 19%, 51%)',
}, },
up: { up: {
DEFAULT: 'hsl(165, 82%, 45%)', DEFAULT: 'hsl(165, 82%, 45%)',
dark: 'hsl(165, 82%, 35%)', dark: 'hsl(165, 82%, 40%)',
muted: 'hsl(165, 42%, 35%)', muted: 'hsl(165, 42%, 40%)',
}, },
error: 'hsl(3, 59%, 56%)', error: 'hsl(3, 59%, 56%)',
success: 'hsl(165, 82%, 45%)', success: 'hsl(165, 82%, 45%)',
@ -184,87 +184,55 @@ module.exports = {
}, },
'banana-theme': { 'banana-theme': {
active: { active: {
DEFAULT: 'hsl(205, 58%, 55%)', DEFAULT: 'hsl(236, 95%, 68%)',
dark: 'hsl(205, 58%, 45%)', dark: 'hsl(236, 95%, 58%)',
}, },
button: { button: {
DEFAULT: 'hsl(55, 80%, 42%)', DEFAULT: 'hsl(51, 95%, 72%)',
hover: 'hsl(55, 80%, 32%)', hover: 'hsl(51, 95%, 68%)',
}, },
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 47%)' }, link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 52%)' },
down: { down: {
DEFAULT: 'hsl(0, 39%, 58%)', DEFAULT: 'hsl(0, 39%, 58%)',
dark: 'hsl(0, 39%, 48%)', dark: 'hsl(0, 39%, 53%)',
muted: 'hsl(0, 19%, 48%)', muted: 'hsl(0, 19%, 53%)',
}, },
up: { up: {
DEFAULT: 'hsl(110, 23%, 59%)', DEFAULT: 'hsl(110, 23%, 59%)',
dark: 'hsl(110, 23%, 49%)', dark: 'hsl(110, 23%, 54%)',
muted: 'hsl(110, 3%, 49%)', muted: 'hsl(110, 3%, 54%)',
}, },
error: 'hsl(0, 39%, 58%)', error: 'hsl(0, 39%, 58%)',
success: 'hsl(110, 23%, 59%)', success: 'hsl(110, 23%, 59%)',
warning: 'hsl(33, 100%, 57%)', warning: 'hsl(33, 100%, 57%)',
'bkg-1': 'hsl(55, 100%, 95%)', 'bkg-1': 'hsl(55, 90%, 90%)',
'bkg-2': 'hsl(55, 90%, 90%)', 'bkg-2': 'hsl(55, 80%, 85%)',
'bkg-3': 'hsl(55, 80%, 85%)', 'bkg-3': 'hsl(55, 70%, 80%)',
'bkg-4': 'hsl(55, 70%, 80%)', 'bkg-4': 'hsl(55, 60%, 75%)',
'fgd-1': 'hsl(60, 10%, 14%)', 'fgd-1': 'hsl(60, 10%, 14%)',
'fgd-2': 'hsl(60, 10%, 24%)', 'fgd-2': 'hsl(60, 10%, 24%)',
'fgd-3': 'hsl(60, 10%, 34%)', 'fgd-3': 'hsl(60, 10%, 34%)',
'fgd-4': 'hsl(60, 10%, 44%)', 'fgd-4': 'hsl(60, 10%, 44%)',
}, },
// 'smoothy-theme': {
// active: {
// DEFAULT: 'hsl(321, 100%, 48%)',
// dark: 'hsl(321, 100%, 38%)',
// },
// button: {
// DEFAULT: 'hsl(284, 100%, 56%)',
// hover: 'hsl(284, 100%, 46%)',
// },
// link: { DEFAULT: 'hsl(21, 100%, 56%)', hover: 'hsl(21, 100%, 46%)' },
// down: {
// DEFAULT: 'hsl(0, 100%, 56%)',
// dark: 'hsl(0, 100%, 46%)',
// muted: 'hsl(0, 60%, 46%)',
// },
// up: {
// DEFAULT: 'hsl(110, 73%, 40%)',
// dark: 'hsl(110, 73%, 30%)',
// muted: 'hsl(110, 33%, 30%)',
// },
// error: 'hsl(0, 100%, 56%)',
// success: 'hsl(110, 73%, 40%)',
// warning: 'hsl(21, 100%, 56%)',
// 'bkg-1': 'hsl(45, 100%, 96%)',
// 'bkg-2': 'hsl(45, 100%, 91%)',
// 'bkg-3': 'hsl(45, 100%, 86%)',
// 'bkg-4': 'hsl(45, 100%, 81%)',
// 'fgd-1': 'hsl(45, 100%, 4%)',
// 'fgd-2': 'hsl(45, 100%, 14%)',
// 'fgd-3': 'hsl(45, 100%, 24%)',
// 'fgd-4': 'hsl(45, 100%, 34%)',
// },
'avocado-theme': { 'avocado-theme': {
active: { active: {
DEFAULT: 'hsl(63, 74%, 67%)', DEFAULT: 'hsl(63, 74%, 67%)',
dark: 'hsl(63, 74%, 57%)', dark: 'hsl(63, 74%, 62%)',
}, },
button: { button: {
DEFAULT: 'hsl(202, 5%, 45%)', DEFAULT: 'hsl(156, 55%, 26%)',
hover: 'hsl(202, 5%, 35%)', hover: 'hsl(202, 5%, 40%)',
}, },
link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 47%)' }, link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 42%)' },
down: { down: {
DEFAULT: 'hsl(3, 59%, 56%)', DEFAULT: 'hsl(3, 59%, 56%)',
dark: 'hsl(3, 59%, 46%)', dark: 'hsl(3, 59%, 51%)',
muted: 'hsl(3, 19%, 46%)', muted: 'hsl(3, 19%, 51%)',
}, },
up: { up: {
DEFAULT: 'hsl(120, 50%, 53%)', DEFAULT: 'hsl(120, 50%, 53%)',
dark: 'hsl(120, 50%, 43%)', dark: 'hsl(120, 50%, 48%)',
muted: 'hsl(120, 10%, 43%)', muted: 'hsl(120, 10%, 48%)',
}, },
error: 'hsl(3, 59%, 56%)', error: 'hsl(3, 59%, 56%)',
success: 'hsl(120, 50%, 53%)', success: 'hsl(120, 50%, 53%)',