brutalism design

new-client/src/shared/components/ui/Button.vue

@@ -2,6 +2,7 @@
   <button
     class="chad-button"
     :data-loading="loading || undefined"
+    :data-disabled="disabled || undefined"
     :disabled="disabled"
     :type="type"
     :data-full="full || undefined"
@@ -32,28 +33,43 @@ interface Props {
 
 <style lang="scss">
 .chad-button {
+  @include font-display-14;
+
   border: none;
-  color: var(--bg-dark);
-  border-radius: 12px;
-  padding-inline: 12px;
+  color: var(--ink);
+  padding-inline: var(--space-3);
   height: 44px;
-  background-color: var(--primary);
+  background-color: var(--yellow);
   font-weight: 700;
   text-align: center;
   cursor: pointer;
-  transition-property: color, background-color;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-  outline: none;
+  outline: var(--border-w) solid var(--ink);
+  outline-offset: calc(var(--border-w) * -1);
 
   &[data-full] {
     width: 100%;
   }
 
   &:hover,
-  &:focus,
+  &:focus {
+    background-color: var(--yellow-deep);
+  }
+
   &:active {
-    background-color: var(--secondary);
+    background-color: var(--ink);
+    color: var(--yellow);
+  }
+
+  &[data-disabled],
+  &[data-loading],
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--grey-1);
+    color: var(--grey-3);
+  }
+
+  &[data-loading] {
+    cursor: wait;
   }
 }
 </style>