more theme color changes
This commit is contained in:
saml33
parent
1d8a91795e
commit
e553b07dbd
|
|
@ -22,6 +22,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
|
|||
import mangoStore from '@store/mangoStore'
|
||||
import HealthHeart from './account/HealthHeart'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
||||
const { t } = useTranslation('common')
|
||||
|
|
@ -197,13 +198,18 @@ const MenuItem = ({
|
|||
isExternal?: boolean
|
||||
showTooltip?: boolean
|
||||
}) => {
|
||||
const { theme } = useTheme()
|
||||
return (
|
||||
<Tooltip content={title} placement="right" show={collapsed && showTooltip}>
|
||||
<Link
|
||||
href={pagePath}
|
||||
shallow={true}
|
||||
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'}`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
|
|
@ -212,7 +218,9 @@ const MenuItem = ({
|
|||
className={
|
||||
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}
|
||||
|
|
@ -255,6 +263,7 @@ export const ExpandableMenuItem = ({
|
|||
title: string | ReactNode
|
||||
}) => {
|
||||
const [showMenu, setShowMenu] = useState(false)
|
||||
const { theme } = useTheme()
|
||||
|
||||
const onHoverMenu = (open: boolean, action: string) => {
|
||||
if (
|
||||
|
|
@ -288,14 +297,18 @@ export const ExpandableMenuItem = ({
|
|||
role="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()}
|
||||
>
|
||||
<div
|
||||
className={` ${
|
||||
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
|
||||
? 'default-transition flex h-[64px] w-[64px] items-center justify-center hover:bg-th-bkg-2'
|
||||
|
|
|
|||
|
|
@ -29,15 +29,15 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
|
|||
disabled={disabled}
|
||||
className={`whitespace-nowrap rounded-md ${
|
||||
secondary
|
||||
? 'border border-th-bkg-4 text-th-fgd-1 md:hover:border-th-fgd-4'
|
||||
: 'bg-th-button text-white md:hover:bg-th-button-hover'
|
||||
? 'border border-th-button md:hover:border-th-button-hover'
|
||||
: 'bg-th-button md:hover:bg-th-button-hover'
|
||||
} ${
|
||||
size === 'medium'
|
||||
? 'h-10 px-4'
|
||||
: size === 'large'
|
||||
? 'h-12 px-6'
|
||||
: '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}
|
||||
>
|
||||
{children}
|
||||
|
|
@ -72,7 +72,9 @@ export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
|
|||
? 'h-8 w-8'
|
||||
: 'h-10 w-10'
|
||||
} 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
|
||||
disabled:text-th-fgd-4 md:disabled:hover:text-th-fgd-4 ${className}`}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const IconDropMenu = ({
|
|||
: size === 'medium'
|
||||
? 'h-10 w-10'
|
||||
: '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={disabled}
|
||||
|
|
|
|||
|
|
@ -3,47 +3,42 @@ export const COLORS: any = {
|
|||
'Mango Classic': '#18181C',
|
||||
Dark: '#111113',
|
||||
Light: '#fcfcfc',
|
||||
// Smoothy: 'hsl(45, 100%, 96%)',
|
||||
Avocado: '#0c2219',
|
||||
Medium: '#1d1d20',
|
||||
Blueberry: '#0e265d',
|
||||
Banana: '#FFFDE8',
|
||||
Banana: '#fcf9cf',
|
||||
},
|
||||
BKG2: {
|
||||
'Mango Classic': '#282433',
|
||||
Dark: '#1d1d20',
|
||||
Light: '#f0f0f0',
|
||||
// Smoothy: 'hsl(45, 100%, 91%)',
|
||||
Avocado: '#133527',
|
||||
Medium: '#29292e',
|
||||
Blueberry: '#112f73',
|
||||
Banana: '#fcf9cf',
|
||||
Banana: '#f7f2ba',
|
||||
},
|
||||
BKG3: {
|
||||
'Mango Classic': '#332e42',
|
||||
Dark: '#29292e',
|
||||
Light: '#e3e3e3',
|
||||
// Smoothy: 'hsl(45, 100%, 86%)',
|
||||
Avocado: '#194835',
|
||||
Medium: '#35353b',
|
||||
Blueberry: '#15388a',
|
||||
Banana: '#f7f2ba',
|
||||
Banana: '#f0eaa8',
|
||||
},
|
||||
BKG4: {
|
||||
'Mango Classic': '#3f3851',
|
||||
Dark: '#35353b',
|
||||
Light: '#d6d6d6',
|
||||
// Smoothy: 'hsl(45, 100%, 81%)',
|
||||
Avocado: '#205b43',
|
||||
Medium: '#414149',
|
||||
Blueberry: '#1841a0',
|
||||
Banana: '#f0eaa8',
|
||||
Banana: '#e6df99',
|
||||
},
|
||||
FGD4: {
|
||||
'Mango Classic': '#9189ae',
|
||||
Dark: '#858585',
|
||||
Light: '#1c93a6',
|
||||
// Smoothy: 'hsl(45, 100%, 34%)',
|
||||
Light: '#878787',
|
||||
Avocado: '#8eb48e',
|
||||
Medium: '#808080',
|
||||
Blueberry: '#6b94e6',
|
||||
|
|
@ -51,31 +46,28 @@ export const COLORS: any = {
|
|||
},
|
||||
UP: {
|
||||
'Mango Classic': '#A6CD03',
|
||||
Dark: '#60bf4f',
|
||||
Dark: '#4aa13a',
|
||||
Light: '#60bf4f',
|
||||
// Smoothy: 'hsl(110, 73%, 40%)',
|
||||
Avocado: '#4bc34b',
|
||||
Medium: '#60bf4f',
|
||||
Medium: '#4aa13a',
|
||||
Blueberry: '#15d1a2',
|
||||
Banana: '#86AE7E',
|
||||
},
|
||||
ACTIVE: {
|
||||
'Mango Classic': '#f1c84b',
|
||||
Dark: '#f1c84b',
|
||||
Light: '#ff9c24',
|
||||
// Smoothy: 'hsl(321, 100%, 48%)',
|
||||
Light: '#141414',
|
||||
Avocado: '#E3E96C',
|
||||
Medium: '#f1c84b',
|
||||
Blueberry: '#f1c84b',
|
||||
Banana: '#4A97CF',
|
||||
Banana: '#606afb',
|
||||
},
|
||||
DOWN: {
|
||||
'Mango Classic': '#F84638',
|
||||
Dark: '#cc2828',
|
||||
Light: '#cc2828',
|
||||
// Smoothy: 'hsl(0, 100%, 56%)',
|
||||
Dark: '#d35555',
|
||||
Light: '#BE6A6A',
|
||||
Avocado: '#d1534d',
|
||||
Medium: '#cc2828',
|
||||
Medium: '#d35555',
|
||||
Blueberry: '#d1534d',
|
||||
Banana: '#BE6A6A',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -25,22 +25,22 @@ module.exports = {
|
|||
'mango-classic-theme': {
|
||||
active: {
|
||||
DEFAULT: 'hsl(45, 86%, 62%)',
|
||||
dark: 'hsl(45, 86%, 52%)',
|
||||
dark: 'hsl(45, 86%, 57%)',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: 'hsl(251, 41%, 48%)',
|
||||
hover: 'hsl(251, 41%, 38%)',
|
||||
DEFAULT: 'hsl(269, 23%, 48%)',
|
||||
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: {
|
||||
DEFAULT: 'hsl(4, 93%, 60%)',
|
||||
dark: 'hsl(4, 93%, 50%)',
|
||||
muted: 'hsl(4, 53%, 50%)',
|
||||
dark: 'hsl(4, 93%, 55%)',
|
||||
muted: 'hsl(4, 53%, 55%)',
|
||||
},
|
||||
up: {
|
||||
DEFAULT: 'hsl(72, 97%, 41%)',
|
||||
dark: 'hsl(72, 97%, 31%)',
|
||||
muted: 'hsl(72, 57%, 31%)',
|
||||
dark: 'hsl(72, 97%, 36%)',
|
||||
muted: 'hsl(72, 57%, 36%)',
|
||||
},
|
||||
error: 'hsl(4, 93%, 60%)',
|
||||
success: 'hsl(72, 97%, 41%)',
|
||||
|
|
@ -56,58 +56,58 @@ module.exports = {
|
|||
},
|
||||
'light-theme': {
|
||||
active: {
|
||||
DEFAULT: 'hsl(33, 100%, 57%)',
|
||||
dark: 'hsl(33, 100%, 47%)',
|
||||
DEFAULT: 'hsl(0, 0%, 8%)',
|
||||
dark: 'hsl(33, 100%, 52%)',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: 'hsl(251, 41%, 56%)',
|
||||
hover: 'hsl(251, 41%, 46%)',
|
||||
DEFAULT: 'hsl(0, 0%, 84%)',
|
||||
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: {
|
||||
DEFAULT: 'hsl(0, 67%, 48%)',
|
||||
dark: 'hsl(0, 67%, 38%)',
|
||||
muted: 'hsl(0, 27%, 38%)',
|
||||
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%, 43%)',
|
||||
muted: 'hsl(111, 7%, 43%)',
|
||||
dark: 'hsl(111, 47%, 48%)',
|
||||
muted: 'hsl(111, 7%, 48%)',
|
||||
},
|
||||
error: 'hsl(0, 67%, 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(188, 71%, 8%)',
|
||||
'fgd-2': 'hsl(188, 71%, 18%)',
|
||||
'fgd-3': 'hsl(188, 71%, 28%)',
|
||||
'fgd-4': 'hsl(188, 71%, 38%)',
|
||||
'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%, 52%)',
|
||||
dark: 'hsl(45, 86%, 57%)',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: 'hsl(251, 41%, 48%)',
|
||||
hover: 'hsl(251, 41%, 38%)',
|
||||
DEFAULT: 'hsl(269, 0%, 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: {
|
||||
DEFAULT: 'hsl(0, 67%, 48%)',
|
||||
dark: 'hsl(0, 67%, 38%)',
|
||||
muted: 'hsl(0, 27%, 38%)',
|
||||
DEFAULT: 'hsl(0, 59%, 58%)',
|
||||
dark: 'hsl(0, 59%, 53%)',
|
||||
muted: 'hsl(0, 19%, 53%)',
|
||||
},
|
||||
up: {
|
||||
DEFAULT: 'hsl(111, 47%, 53%)',
|
||||
dark: 'hsl(111, 47%, 43%)',
|
||||
muted: 'hsl(111, 7%, 43%)',
|
||||
DEFAULT: 'hsl(111, 47%, 43%)',
|
||||
dark: 'hsl(111, 47%, 38%)',
|
||||
muted: 'hsl(111, 7%, 38%)',
|
||||
},
|
||||
error: 'hsl(0, 67%, 48%)',
|
||||
success: 'hsl(111, 47%, 53%)',
|
||||
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%)',
|
||||
|
|
@ -121,25 +121,25 @@ module.exports = {
|
|||
'medium-theme': {
|
||||
active: {
|
||||
DEFAULT: 'hsl(45, 86%, 62%)',
|
||||
dark: 'hsl(45, 86%, 52%)',
|
||||
dark: 'hsl(45, 86%, 57%)',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: 'hsl(251, 35%, 38%)',
|
||||
hover: 'hsl(251, 35%, 28%)',
|
||||
DEFAULT: 'hsl(269, 0%, 43%)',
|
||||
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: {
|
||||
DEFAULT: 'hsl(0, 67%, 48%)',
|
||||
dark: 'hsl(0, 67%, 38%)',
|
||||
muted: 'hsl(0, 27%, 38%)',
|
||||
DEFAULT: 'hsl(0, 59%, 58%)',
|
||||
dark: 'hsl(0, 59%, 53%)',
|
||||
muted: 'hsl(0, 19%, 53%)',
|
||||
},
|
||||
up: {
|
||||
DEFAULT: 'hsl(111, 47%, 53%)',
|
||||
dark: 'hsl(111, 47%, 43%)',
|
||||
muted: 'hsl(111, 7%, 43%)',
|
||||
DEFAULT: 'hsl(111, 47%, 43%)',
|
||||
dark: 'hsl(111, 47%, 38%)',
|
||||
muted: 'hsl(111, 7%, 38%)',
|
||||
},
|
||||
error: 'hsl(0, 67%, 48%)',
|
||||
success: 'hsl(111, 47%, 53%)',
|
||||
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%)',
|
||||
|
|
@ -153,22 +153,22 @@ module.exports = {
|
|||
'blueberry-theme': {
|
||||
active: {
|
||||
DEFAULT: 'hsl(45, 86%, 62%)',
|
||||
dark: 'hsl(45, 86%, 52%)',
|
||||
dark: 'hsl(45, 86%, 57%)',
|
||||
},
|
||||
button: {
|
||||
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: {
|
||||
DEFAULT: 'hsl(3, 59%, 56%)',
|
||||
dark: 'hsl(3, 59%, 46%)',
|
||||
muted: 'hsl(3, 19%, 46%)',
|
||||
dark: 'hsl(3, 59%, 51%)',
|
||||
muted: 'hsl(3, 19%, 51%)',
|
||||
},
|
||||
up: {
|
||||
DEFAULT: 'hsl(165, 82%, 45%)',
|
||||
dark: 'hsl(165, 82%, 35%)',
|
||||
muted: 'hsl(165, 42%, 35%)',
|
||||
dark: 'hsl(165, 82%, 40%)',
|
||||
muted: 'hsl(165, 42%, 40%)',
|
||||
},
|
||||
error: 'hsl(3, 59%, 56%)',
|
||||
success: 'hsl(165, 82%, 45%)',
|
||||
|
|
@ -184,87 +184,55 @@ module.exports = {
|
|||
},
|
||||
'banana-theme': {
|
||||
active: {
|
||||
DEFAULT: 'hsl(205, 58%, 55%)',
|
||||
dark: 'hsl(205, 58%, 45%)',
|
||||
DEFAULT: 'hsl(236, 95%, 68%)',
|
||||
dark: 'hsl(236, 95%, 58%)',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: 'hsl(55, 80%, 42%)',
|
||||
hover: 'hsl(55, 80%, 32%)',
|
||||
DEFAULT: 'hsl(51, 95%, 72%)',
|
||||
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: {
|
||||
DEFAULT: 'hsl(0, 39%, 58%)',
|
||||
dark: 'hsl(0, 39%, 48%)',
|
||||
muted: 'hsl(0, 19%, 48%)',
|
||||
dark: 'hsl(0, 39%, 53%)',
|
||||
muted: 'hsl(0, 19%, 53%)',
|
||||
},
|
||||
up: {
|
||||
DEFAULT: 'hsl(110, 23%, 59%)',
|
||||
dark: 'hsl(110, 23%, 49%)',
|
||||
muted: 'hsl(110, 3%, 49%)',
|
||||
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, 100%, 95%)',
|
||||
'bkg-2': 'hsl(55, 90%, 90%)',
|
||||
'bkg-3': 'hsl(55, 80%, 85%)',
|
||||
'bkg-4': 'hsl(55, 70%, 80%)',
|
||||
'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%)',
|
||||
},
|
||||
// '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': {
|
||||
active: {
|
||||
DEFAULT: 'hsl(63, 74%, 67%)',
|
||||
dark: 'hsl(63, 74%, 57%)',
|
||||
dark: 'hsl(63, 74%, 62%)',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: 'hsl(202, 5%, 45%)',
|
||||
hover: 'hsl(202, 5%, 35%)',
|
||||
DEFAULT: 'hsl(156, 55%, 26%)',
|
||||
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: {
|
||||
DEFAULT: 'hsl(3, 59%, 56%)',
|
||||
dark: 'hsl(3, 59%, 46%)',
|
||||
muted: 'hsl(3, 19%, 46%)',
|
||||
dark: 'hsl(3, 59%, 51%)',
|
||||
muted: 'hsl(3, 19%, 51%)',
|
||||
},
|
||||
up: {
|
||||
DEFAULT: 'hsl(120, 50%, 53%)',
|
||||
dark: 'hsl(120, 50%, 43%)',
|
||||
muted: 'hsl(120, 10%, 43%)',
|
||||
dark: 'hsl(120, 50%, 48%)',
|
||||
muted: 'hsl(120, 10%, 48%)',
|
||||
},
|
||||
error: 'hsl(3, 59%, 56%)',
|
||||
success: 'hsl(120, 50%, 53%)',
|
||||
|
|
|
|||
Loading…
Reference in New Issue