From b662c253f3ceb537978f84ff80a24214cd67a966 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Thu, 31 Mar 2022 15:13:22 +0200
Subject: [PATCH] feat(system): use colors from design system in Button

---
 .../status-react/src/system/button/styles.tsx | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/status-react/src/system/button/styles.tsx b/packages/status-react/src/system/button/styles.tsx
index 0e93574e..2482abd5 100644
--- a/packages/status-react/src/system/button/styles.tsx
+++ b/packages/status-react/src/system/button/styles.tsx
@@ -14,31 +14,35 @@ export const Base = styled('button', {
   justifyContent: 'center',
   alignItems: 'center',
   padding: '11px 24px',
-  borderRadius: 8,
+  borderRadius: '$8',
   transitionProperty: 'background-color, border-color, color, fill, stroke',
   transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
   transitionDuration: '150ms',
 
   '&:disabled': {
-    background: '#EEF2F5',
-    color: '#939BA1',
+    color: '$gray-1',
+    background: '$gray-2',
     cursor: 'not-allowed',
+    '&:hover': {
+      background: '$gray-2',
+    },
   },
 
   variants: {
     variant: {
       default: {
-        background: 'rgba(67, 96, 223, 0.1)',
-        color: '#4360DF',
-        '&:hover': {},
-      },
-      minimal: {
-        '&:hover': {},
+        background: '$primary-3',
+        color: '$primary-1',
+        '&:hover': {
+          background: '$primary-2',
+        },
       },
       danger: {
-        background: 'rgba(255, 45, 85, 0.1)',
-        color: '#FF2D55',
-        '&:hover': {},
+        background: '$danger-3',
+        color: '$danger-1',
+        '&:hover': {
+          background: '$danger-2',
+        },
       },
     },
     loading: {