Style updates for buttons

Author: rossta

app/javascript/css/components/button.css

@@ -7,8 +7,7 @@
   font-family: var(--sans-serif);
   line-height: 1.5715;
   font-weight: 600;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: var(--joy-light);
   line-height: inherit;
 
   &:is(a) {
@@ -17,8 +16,6 @@
 
   &:hover {
     cursor: pointer;
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
     text-decoration-line: none;
   }
 
@@ -27,12 +24,31 @@
   }
   &.primary {
     background-color: var(--joy-button-primary);
+
+    &:hover {
+      background-color: var(--joy-button-primary-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-primary-active);
+    }
   }
   &.secondary {
     background-color: var(--joy-button-secondary);
+    &:hover {
+      background-color: var(--joy-button-secondary-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-secondary-active);
+    }
   }
   &.warn {
     background-color: var(--joy-button-warn);
+    &:hover {
+      background-color: var(--joy-button-warn-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-warn);
+    }
   }
   &.danger {
     background-color: var(--joy-button-warn);

app/javascript/css/config/theme.css

@@ -51,9 +51,15 @@
   --joy-link-visited: var(--joy-link-9);
   --joy-link-decoration: var(--joy-link-1);
   --joy-link-active: var(--joy-link-2);
+
   --joy-button-primary: var(--joy-color-600);
-  --joy-button-secondary: var(--color-slate-500);
+  --joy-button-primary-hover: var(--joy-color-700);
+  --joy-button-primary-active: var(--joy-color-800);
+  --joy-button-secondary: var(--color-slate-400);
+  --joy-button-secondary-hover: var(--color-slate-500);
+  --joy-button-secondary-active: var(--color-slate-600);
   --joy-button-warn: var(--color-red-500);
+  --joy-button-warn-hover: var(--color-red-400);
 }
 
 .dark {