refactor: create reusable buttons

2026-08-16 12:53:32 +00:00 · 2025-06-03 21:44:15 +02:00
parent 44d5859844
commit 97e3e8f435
4 changed files with 125 additions and 8 deletions
@@ -0,0 +1,52 @@
+@use '../../../theme/viewerDefs' as *;
+
+.baseButton {
+  height: 2rem;
+  padding-inline: 1em;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+
+  border: 1px solid transparent;
+  border-radius: 3px;
+
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.subtle {
+  background: $gray-1050;
+  color: $blue-400;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}
+
+.primary {
+  background: $blue-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $blue-600;
+  }
+
+  &:active:not(:disabled) {
+    background: $blue-800;
+    border-color: $blue-900;
+  }
+
+  &:disabled {
+    opacity: $viewer-opacity-disabled;
+  }
+}