pok
This commit is contained in:
@@ -3,9 +3,11 @@ import clsx from 'clsx'
|
||||
|
||||
const baseStyles = {
|
||||
solid:
|
||||
'group inline-flex items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
'group inline-flex items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
solidNoRounded:
|
||||
'group inline-flex items-center justify-center py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
outline:
|
||||
'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm focus:outline-none',
|
||||
'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none',
|
||||
}
|
||||
|
||||
const variantStyles = {
|
||||
@@ -13,9 +15,14 @@ const variantStyles = {
|
||||
slate:
|
||||
'bg-gold-900 text-white hover:bg-gold-800 hover:text-slate-100 active:bg-gold-800 active:text-gold-300 focus-visible:outline-gold-900',
|
||||
blue: 'bg-[#28602C] text-white hover:text-slate-100 hover:bg-[#245527] active:bg-[#1e4a21] active:text-slate-100 focus-visible:outline-[#28602C]',
|
||||
olive: 'bg-primary-olive text-white hover:bg-secondary-gold hover:text-text-dark active:bg-secondary-gold active:text-text-dark focus-visible:outline-primary-olive',
|
||||
terracotta: 'bg-primary-terracotta text-white hover:bg-primary-olive hover:text-white active:bg-primary-olive active:text-white focus-visible:outline-primary-terracotta',
|
||||
white:
|
||||
'bg-white text-slate-100 hover:bg-gold-50 active:bg-gold-200 active:text-slate-100 focus-visible:outline-white',
|
||||
},
|
||||
solidNoRounded: {
|
||||
bookNow: 'bg-darkgr-900 text-white hover:bg-darkgr-800 active:bg-darkgr-700 focus-visible:outline-darkgr-900',
|
||||
},
|
||||
outline: {
|
||||
slate:
|
||||
'ring-slate-200 text-slate-200 hover:text-slate-300 hover:ring-slate-300 active:bg-slate-100 active:text-slate-200 focus-visible:outline-gold-600 focus-visible:ring-slate-300',
|
||||
@@ -34,7 +41,9 @@ export function Button({ className, ...props }) {
|
||||
? variantStyles.outline[props.color]
|
||||
: props.variant === 'solid'
|
||||
? variantStyles.solid[props.color]
|
||||
: undefined,
|
||||
: props.variant === 'solidNoRounded'
|
||||
? variantStyles.solidNoRounded[props.color]
|
||||
: undefined,
|
||||
className,
|
||||
)
|
||||
|
||||
|
Reference in New Issue
Block a user