Add transparent button style

Author: rossta

app/javascript/css/components/button.css

@@ -55,6 +55,27 @@
       background-color: var(--joy-button-tertiary-active);
     }
   }
+  &.transparent {
+    color: inherit;
+    border: 1px solid var(--joy-button-transparent-active);
+    background-color: var(--joy-button-transparent);
+    &:hover {
+      background-color: var(--joy-button-transparent-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-transparent-active);
+    }
+  }
+  &.tertiary {
+    border: 1px solid var(--joy-button-tertiary);
+    background-color: var(--joy-button-tertiary);
+    &:hover {
+      background-color: var(--joy-button-tertiary-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-tertiary-active);
+    }
+  }
   &.warn {
     background-color: var(--joy-button-warn);
     &:hover {

app/javascript/css/config/theme.css

@@ -85,6 +85,9 @@
   --joy-button-tertiary: var(--color-slate-500);
   --joy-button-tertiary-hover: var(--color-slate-600);
   --joy-button-tertiary-active: var(--color-slate-700);
+  --joy-button-transparent: none;
+  --joy-button-transparent-hover: var(--joy-color-100);
+  --joy-button-transparent-active: var(--joy-color-200);
   --joy-button-warn: var(--color-red-500);
   --joy-button-warn-hover: var(--color-red-400);
 }
@@ -123,4 +126,8 @@
   --joy-link-visited: var(--joy-link-3);
   --joy-link-decoration: var(--joy-link-8);
   --joy-link-active: var(--joy-link-5);
+
+  --joy-button-transparent: none;
+  --joy-button-transparent-hover: var(--joy-color-950);
+  --joy-button-transparent-active: var(--joy-color-900);
 }