refactor(components): rewrite Button and ButtonLink components

Both:
* move styles to Sass placeholders

Button:
* add `isPressed` prop to Button
* add `isLoading` prop to Button (to differentiate state from
disabled)

ButtonLink:
* replace `external` prop with `isExternal` prop
* replace `href` prop with `to` prop

1 files changed, 0 insertions, 179 deletions

diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
deleted file mode 100644
index a46f55c..0000000
--- a/src/components/atoms/buttons/buttons.module.scss
+++ /dev/null
@@ -1,179 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.btn {
-  display: inline-flex;
-  place-content: center;
-  align-items: center;
-  border: none;
-  border-radius: fun.convert-px(5);
-  font-size: var(--font-size-md);
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.3s ease-in-out 0s;
-
-  &--initial {
-    border-radius: 0;
-  }
-
-  &--rectangle {
-    padding: var(--spacing-2xs) var(--spacing-sm);
-  }
-
-  &--square,
-  &--circle {
-    min-width: fit-content;
-    min-height: fit-content;
-    padding: var(--spacing-xs);
-    aspect-ratio: 1 / 1;
-  }
-
-  &--circle {
-    border-radius: 50%;
-  }
-
-  &:disabled {
-    cursor: wait;
-  }
-
-  &--neutral {
-    background: inherit;
-  }
-
-  &--primary {
-    background: var(--color-primary);
-    border: fun.convert-px(2) solid var(--color-bg);
-    box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
-      0 0 0 fun.convert-px(3) var(--color-primary-darker),
-      fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(3)
-        var(--color-primary-dark);
-    color: var(--color-fg-inverted);
-    text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
-
-    &:disabled {
-      background: var(--color-primary-darker);
-    }
-
-    &:not(:disabled) {
-      &:hover,
-      &:focus {
-        background: var(--color-primary-light);
-        box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary-light),
-          0 0 0 fun.convert-px(3) var(--color-primary-darker),
-          fun.convert-px(7) fun.convert-px(7) 0 fun.convert-px(2)
-            var(--color-primary-dark);
-        color: var(--color-fg-inverted);
-        transform: translateX(#{fun.convert-px(-4)})
-          translateY(#{fun.convert-px(-4)});
-      }
-
-      &:focus {
-        text-decoration: underline solid var(--color-fg-inverted)
-          fun.convert-px(2);
-      }
-
-      &:active {
-        background: var(--color-primary-dark);
-        box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
-          0 0 0 fun.convert-px(3) var(--color-primary-darker),
-          0 0 0 0 var(--color-primary-dark);
-        text-decoration: none;
-        transform: translateX(#{fun.convert-px(4)})
-          translateY(#{fun.convert-px(4)});
-      }
-    }
-  }
-
-  &--secondary {
-    background: var(--color-bg);
-    border: fun.convert-px(3) solid var(--color-primary);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow),
-      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-        var(--color-shadow),
-      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-        var(--color-shadow);
-    color: var(--color-primary);
-
-    &:disabled {
-      border-color: var(--color-border-dark);
-      color: var(--color-fg-light);
-    }
-
-    &:not(:disabled) {
-      &:hover,
-      &:focus {
-        border-color: var(--color-primary-light);
-        color: var(--color-primary-light);
-        box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-            var(--color-shadow-light),
-          fun.convert-px(1) fun.convert-px(2) fun.convert-px(2)
-            fun.convert-px(-2) var(--color-shadow-light),
-          fun.convert-px(3) fun.convert-px(4) fun.convert-px(5)
-            fun.convert-px(-4) var(--color-shadow-light),
-          fun.convert-px(7) fun.convert-px(10) fun.convert-px(12)
-            fun.convert-px(-3) var(--color-shadow-light);
-        transform: scale(var(--scale-up, 1.1));
-      }
-
-      &:focus {
-        text-decoration: underline var(--color-primary-light) fun.convert-px(3);
-      }
-
-      &:active {
-        border-color: var(--color-primary-dark);
-        box-shadow: 0 0 0 0 var(--color-shadow);
-        color: var(--color-primary-dark);
-        text-decoration: none;
-        transform: scale(var(--scale-down, 0.94));
-      }
-    }
-  }
-
-  &--tertiary {
-    background: var(--color-bg);
-    border: fun.convert-px(3) solid var(--color-primary);
-    box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg),
-      fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark),
-      fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg),
-      fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-dark);
-    color: var(--color-primary);
-
-    &:disabled {
-      color: var(--color-fg-light);
-      border-color: var(--color-border-dark);
-      box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg),
-        fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-darker),
-        fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg),
-        fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-darker);
-    }
-
-    &:not(:disabled) {
-      &:hover,
-      &:focus {
-        border-color: var(--color-primary-light);
-        box-shadow: fun.convert-px(2) fun.convert-px(3) 0 0 var(--color-bg),
-          fun.convert-px(4) fun.convert-px(5) 0 0 var(--color-primary),
-          fun.convert-px(6) fun.convert-px(8) 0 0 var(--color-bg),
-          fun.convert-px(8) fun.convert-px(10) 0 0 var(--color-primary),
-          fun.convert-px(10) fun.convert-px(12) fun.convert-px(1) 0
-            var(--color-shadow-light),
-          fun.convert-px(10) fun.convert-px(12) fun.convert-px(5)
-            fun.convert-px(1) var(--color-shadow-light);
-        color: var(--color-primary-light);
-        transform: translateX(#{fun.convert-px(-3)})
-          translateY(#{fun.convert-px(-5)});
-      }
-
-      &:focus {
-        text-decoration: underline var(--color-primary) fun.convert-px(2);
-      }
-
-      &:active {
-        box-shadow: 0 0 0 0 var(--color-shadow);
-        text-decoration: none;
-        transform: translateX(#{fun.convert-px(5)})
-          translateY(#{fun.convert-px(6)});
-      }
-    }
-  }
-}