packages/ui: add button outline variants

apps/web/components/Form.tsx

@@ -41,8 +41,8 @@ export function Form({ data, metaData, title }: Props) {
       <Divider />
       <div className="grid grid-cols-1 gap-2 gap-x-4 md:grid-cols-3">
         <Button>Сохранить</Button>
-        <Button>Возврат на доработку</Button>
-        <Button color="danger">Отмена</Button>
+        <Button intent="secondary">Возврат на доработку</Button>
+        <Button intent="outline-danger">Отмена</Button>
       </div>
     </Background>
   );

packages/ui/button.tsx

@@ -8,12 +8,19 @@ const variants = cva(
   'rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white transition-all ease-in-out',
   {
     defaultVariants: {
-      color: 'default',
+      intent: 'default',
     },
     variants: {
-      color: {
+      intent: {
         danger: 'bg-danger hover:bg-danger-700',
         default: 'bg-primary hover:bg-primary-700',
+        'outline-danger':
+          'bg-transparent text-danger border border-danger hover:bg-danger hover:text-white',
+        'outline-default':
+          'bg-transparent text-primary border border-primary hover:bg-primary hover:text-white',
+        'outline-secondary':
+          'opacity-70 bg-transparent text-primary border border-primary hover:bg-primary hover:text-white',
+        secondary: 'bg-primary-400 hover:bg-primary-700 hover:opacity-100',
       },
     },
   }
@@ -22,7 +29,12 @@ const variants = cva(
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof variants>;
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, color, ...props }, ref) => (
-    <button type="button" className={cn(variants({ className, color }))} ref={ref} {...props} />
+  ({ className, intent, type, ...props }, ref) => (
+    <button
+      type="button"
+      className={cn(variants({ className, intent, type }))}
+      ref={ref}
+      {...props}
+    />
   )
 );