feat: wordlists user interface

src/components/ui/button.css

@@ -0,0 +1,81 @@
+.st-rnd-button {
+  --btn-background-color: var(--color-primary-3);
+  --btn-background-color-hover: var(--color-primary-4);
+  --btn-background-color-active: var(--color-primary-5);
+  --btn-border-color: var(--color-primary-6);
+  --btn-color: var(--color-primary-12);
+
+  &.button-neutral {
+    --btn-background-color: var(--color-neutral-3);
+    --btn-background-color-hover: var(--color-neutral-4);
+    --btn-background-color-active: var(--color-neutral-5);
+    --btn-border-color: var(--color-neutral-6);
+    --btn-color: var(--color-neutral-12);
+  }
+}
+
+.st-rnd-button {
+  display: inline-block;
+
+  padding: 4px 8px;
+
+  border-radius: 4px;
+  border: 1px solid var(--btn-border-color);
+  background-color: var(--btn-background-color);
+  color: var(--btn-color);
+
+  font-weight: 600;
+  text-align: center;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--btn-background-color-hover);
+  }
+
+  &:active {
+    background-color: var(--btn-background-color-active);
+  }
+
+  &:disabled {
+    background-color: color-mix(
+      in srgb,
+      var(--color-neutral-1) 60%,
+      var(--btn-background-color) 40%
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--color-neutral-1) 60%,
+      var(--btn-border-color) 40%
+    );
+    color: color-mix(in srgb, var(--color-neutral-1) 60%, var(--btn-color) 40%);
+
+    cursor: not-allowed;
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--color-neutral-1) 60%,
+        var(--btn-background-color) 40%
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--color-neutral-1) 60%,
+        var(--btn-border-color) 40%
+      );
+      color: color-mix(
+        in srgb,
+        var(--color-neutral-1) 60%,
+        var(--btn-color) 40%
+      );
+    }
+  }
+
+  &.button-icon {
+    padding: 4px;
+    height: auto;
+    width: auto ;
+    aspect-ratio: 1;
+
+    font-size: 0.8em;
+  }
+}