Add additional vars to base components

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);
   }

src/renderer/components/button/index.tsx

@@ -20,145 +20,36 @@ interface StyledButtonProps extends ButtonProps {
 }
 
 const StyledButton = styled(MantineButton)<StyledButtonProps>`
-  color: ${(props) => {
+  color: ${(props) => `var(--btn-${props.variant}-fg)`};
-    switch (props.variant) {
+  background: ${(props) => `var(--btn-${props.variant}-bg)`};
-      case 'default':
+  border: ${(props) => `var(--btn-${props.variant}-border)`};
-        return 'var(--btn-default-fg)';
+  border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
-      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;
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 
   svg {
     transition: fill 0.2s ease-in-out;
-    fill: ${(props) => {
+    fill: ${(props) => `var(--btn-${props.variant}-fg)`};
-      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 '';
-      }
-    }};
   }
 
   &:disabled {
-    color: ${(props) => {
+    color: ${(props) => `var(--btn-${props.variant}-fg)`};
-      switch (props.variant) {
+    background: ${(props) => `var(--btn-${props.variant}-bg)`};
-        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 '';
-      }
-    }};
 
     opacity: 0.6;
   }
 
   &:not([data-disabled])&:hover {
-    color: ${(props) => {
+    color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
-      switch (props.variant) {
+    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
-        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 '';
-      }
-    }};
 
     svg {
-      fill: ${(props) => {
+      fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
-        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 '';
-        }
-      }};
     }
   }
 
   &:not([data-disabled])&:focus-visible {
-    color: ${(props) => {
+    color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
-      switch (props.variant) {
+    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
-        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 '';
-      }
-    }};
   }
 
   &:active {

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);