ourworld_web/www_ourworld_new
20
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add white varian

Browse Source
This commit is contained in:
sasha-astiadi 2025-07-09 16:15:05 +02:00
parent b5d6901f91
commit 4c6b0b2594
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Button.tsx
View File

@ -3,18 +3,20 @@ import clsx from 'clsx'
const baseStyles = { const baseStyles = {
solid: solid:
'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2', 'group inline-flex items-center justify-center rounded-full py-2.5 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2',
outline: outline:
'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm', 'group inline-flex ring-1 items-center justify-center rounded-full py-2.5 px-6 text-sm',
} }
const variantStyles = { const variantStyles = {
solid: { solid: {
slate: slate:
'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900', 'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
black:
'bg-black text-white hover:bg-gray-800 hover:text-white active:bg-gray-900 active:text-gray-100 focus-visible:outline-black',
blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600', blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
white: white:
'bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white', 'bg-white text-black hover:bg-gray-100 hover:text-black active:bg-gray-200 active:text-gray-800 focus-visible:outline-white',
}, },
outline: { outline: {
slate: slate: