🎨 Isolate infra and ui components

The src/base.rs is still to be reworked.

src/ui/components/button.scss

@@ -0,0 +1,60 @@
+@import "../_base.scss"
+
+%button {
+    height: 100%;
+    aspect-ratio: 3.5;
+
+    border: $border-normal;
+    border-radius: $border-radius;
+
+    color: get-color(greyscale, 0);
+
+    font-family: "Geist";
+    font-weight: bold;
+
+    svg {
+        height: 100%;
+        width: 100%;
+
+        text {
+            font-size: 50;
+            text-anchor: middle;
+            dominant-baseline: central;
+            fill: get-color(greyscale, 0);
+        }
+    }
+}
+
+@mixin button($color-name, $color-level) {
+    @extend %button;
+
+    background-color: get_color($color-name, $color-level);
+
+    &:hover {
+        background-color: get_color($color-name, calc($color-level - 10));
+    }
+
+    &:active {
+        background-color: get_color($color-name, calc($color-level - 20));
+    }
+}
+
+.register-button {
+    @include button(ternary, 90);
+}
+
+.login-button {
+    @include button(secondary, 90);
+}
+
+.success-button {
+    @include button(success, 100);
+}
+
+.warning-button {
+    @include button(warning, 100);
+}
+
+.error-button {
+    @include button(critical, 100);
+}