development #1
@@ -3,18 +3,20 @@ import clsx from 'clsx'
 | 
			
		||||
 | 
			
		||||
const baseStyles = {
 | 
			
		||||
  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:
 | 
			
		||||
    '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 = {
 | 
			
		||||
  solid: {
 | 
			
		||||
    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',
 | 
			
		||||
    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',
 | 
			
		||||
    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: {
 | 
			
		||||
    slate:
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user