From 84587da70131c4872830d2409f658644bb2f401d Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 9 Mar 2023 18:08:15 -0800
Subject: [PATCH] Add additional vars to base components

---
 src/renderer/components/badge/index.tsx  |   2 +
 src/renderer/components/button/index.tsx | 133 ++---------------------
 src/renderer/themes/default.scss         |  14 +++
 3 files changed, 28 insertions(+), 121 deletions(-)

diff --git a/src/renderer/components/badge/index.tsx b/src/renderer/components/badge/index.tsx
index 5f6cb680..fd40b60b 100644
--- a/src/renderer/components/badge/index.tsx
+++ b/src/renderer/components/badge/index.tsx
@@ -5,6 +5,8 @@ import styled from 'styled-components';
 export type BadgeProps = MantineBadgeProps;
 
 const StyledBadge = styled(MantineBadge)<BadgeProps>`
+  border-radius: var(--badge-radius);
+
   .mantine-Badge-root {
     color: var(--badge-fg);
   }
diff --git a/src/renderer/components/button/index.tsx b/src/renderer/components/button/index.tsx
index 755de521..9aafa6e5 100644
--- a/src/renderer/components/button/index.tsx
+++ b/src/renderer/components/button/index.tsx
@@ -20,145 +20,36 @@ interface StyledButtonProps extends ButtonProps {
 }
 
 const StyledButton = styled(MantineButton)<StyledButtonProps>`
-  color: ${(props) => {
-    switch (props.variant) {
-      case 'default':
-        return 'var(--btn-default-fg)';
-      case 'filled':
-        return 'var(--btn-primary-fg)';
-      case 'subtle':
-        return 'var(--btn-subtle-fg)';
-      default:
-        return '';
-    }
-  }};
-  background: ${(props) => {
-    switch (props.variant) {
-      case 'default':
-        return 'var(--btn-default-bg)';
-      case 'filled':
-        return 'var(--btn-primary-bg)';
-      case 'subtle':
-        return 'var(--btn-subtle-bg)';
-      default:
-        return '';
-    }
-  }};
-  border: none;
+  color: ${(props) => `var(--btn-${props.variant}-fg)`};
+  background: ${(props) => `var(--btn-${props.variant}-bg)`};
+  border: ${(props) => `var(--btn-${props.variant}-border)`};
+  border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 
   svg {
     transition: fill 0.2s ease-in-out;
-    fill: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-fg)';
-        case 'filled':
-          return 'var(--btn-primary-fg)';
-        case 'subtle':
-          return 'var(--btn-subtle-fg)';
-        default:
-          return '';
-      }
-    }};
+    fill: ${(props) => `var(--btn-${props.variant}-fg)`};
   }
 
   &:disabled {
-    color: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-fg)';
-        case 'filled':
-          return 'var(--btn-primary-fg)';
-        case 'subtle':
-          return 'var(--btn-subtle-fg)';
-        default:
-          return '';
-      }
-    }};
-    background: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-bg)';
-        case 'filled':
-          return 'var(--btn-primary-bg)';
-        case 'subtle':
-          return 'var(--btn-subtle-bg)';
-        default:
-          return '';
-      }
-    }};
+    color: ${(props) => `var(--btn-${props.variant}-fg)`};
+    background: ${(props) => `var(--btn-${props.variant}-bg)`};
 
     opacity: 0.6;
   }
 
   &:not([data-disabled])&:hover {
-    color: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-fg-hover)';
-        case 'filled':
-          return 'var(--btn-primary-fg-hover)';
-        case 'subtle':
-          return 'var(--btn-subtle-fg-hover) !important';
-        default:
-          return '';
-      }
-    }};
-    background: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-bg-hover)';
-        case 'filled':
-          return 'var(--btn-primary-bg-hover)';
-        case 'subtle':
-          return 'var(--btn-subtle-bg-hover)';
-        default:
-          return '';
-      }
-    }};
+    color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
+    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
 
     svg {
-      fill: ${(props) => {
-        switch (props.variant) {
-          case 'default':
-            return 'var(--btn-default-fg-hover)';
-          case 'filled':
-            return 'var(--btn-primary-fg-hover)';
-          case 'subtle':
-            return 'var(--btn-subtle-fg-hover)';
-          default:
-            return '';
-        }
-      }};
+      fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
     }
   }
 
   &:not([data-disabled])&:focus-visible {
-    color: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-fg-hover)';
-        case 'filled':
-          return 'var(--btn-primary-fg-hover)';
-        case 'subtle':
-          return 'var(--btn-subtle-fg-hover)';
-        default:
-          return '';
-      }
-    }};
-    background: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-bg-hover)';
-        case 'filled':
-          return 'var(--btn-primary-bg-hover)';
-        case 'subtle':
-          return 'var(--btn-subtle-bg-hover)';
-        default:
-          return '';
-      }
-    }};
+    color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
+    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
   }
 
   &:active {
diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss
index 8bc63a92..5f1ac80e 100644
--- a/src/renderer/themes/default.scss
+++ b/src/renderer/themes/default.scss
@@ -47,16 +47,29 @@
   --btn-primary-bg-hover: rgb(34, 96, 255);
   --btn-primary-fg: #ffffff;
   --btn-primary-fg-hover: #ffffff;
+  --btn-primary-border: none;
+  --btn-primary-radius: 0;
 
   --btn-default-bg: rgb(31, 31, 32);
   --btn-default-bg-hover: rgb(63, 63, 63);
   --btn-default-fg: rgb(193, 193, 193);
   --btn-default-fg-hover: rgb(193, 193, 193);
+  --btn-default-border: none;
+  --btn-default-radius: 0;
 
   --btn-subtle-bg: transparent;
   --btn-subtle-bg-hover: transparent;
   --btn-subtle-fg: rgb(220, 220, 220);
   --btn-subtle-fg-hover: rgb(255, 255, 255);
+  --btn-subtle-border: none;
+  --btn-subtle-radius: 0;
+
+  --btn-outline-bg: transparent;
+  --btn-outline-bg-hover: transparent;
+  --btn-outline-fg: rgb(220, 220, 220);
+  --btn-outline-fg-hover: rgb(255, 255, 255);
+  --btn-outline-border: 1px rgba(140, 140, 140, 0.5) solid;
+  --btn-outline-radius: 1px;
 
   --input-bg: rgb(35, 35, 35);
   --input-fg: rgb(193, 193, 193);
@@ -89,6 +102,7 @@
 
   --badge-bg: rgb(0, 0, 0);
   --badge-fg: rgb(255, 255, 255);
+  --badge-radius: 0;
 
   --paper-bg: rgb(20, 20, 20);