treewide: fix various UI bugs; optimize crypto dependencies & format

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: If8fe8b38c1d9c4fecd40ff71f88d2ae06a6a6964

crates/pinakes-ui/assets/styles/_base.scss

@@ -0,0 +1,210 @@
+@use 'variables' as *;
+@use 'mixins' as *;
+
+// Reset & base
+@media (prefers-reduced-motion: reduce) {
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  @include scrollbar;
+}
+
+// CSS custom properties
+:root {
+  // Background
+  --bg-0: #{$bg-0};
+  --bg-1: #{$bg-1};
+  --bg-2: #{$bg-2};
+  --bg-3: #{$bg-3};
+
+  // Border
+  --border-subtle: #{$border-subtle};
+  --border: #{$border};
+  --border-strong: #{$border-strong};
+
+  // Text
+  --text-0: #{$text-0};
+  --text-1: #{$text-1};
+  --text-2: #{$text-2};
+
+  // Accent
+  --accent: #{$accent};
+  --accent-dim: #{$accent-dim};
+  --accent-text: #{$accent-text};
+
+  // Semantic
+  --success: #{$success};
+  --error: #{$error};
+  --warning: #{$warning};
+
+  // Border radius
+  --radius-sm: #{$radius-sm};
+  --radius: #{$radius};
+  --radius-md: #{$radius-md};
+
+  // Shadows
+  --shadow-sm: #{$shadow-sm};
+  --shadow: #{$shadow};
+  --shadow-lg: #{$shadow-lg};
+}
+
+// Body
+body {
+  font-family: $font-family-base;
+  background: var(--bg-0);
+  color: var(--text-0);
+  font-size: $font-size-lg;
+  line-height: $line-height-relaxed;
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+
+// Focus styles
+:focus-visible {
+  @include focus-outline;
+}
+
+// Selection
+::selection {
+  background: $accent-dim;
+  color: $accent-text;
+}
+
+// Links
+a {
+  color: $accent-text;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// Code
+code {
+  padding: 1px 5px;
+  border-radius: $radius-sm;
+  background: $bg-0;
+  color: $accent-text;
+  font-family: $font-family-mono;
+  font-size: $font-size-base;
+}
+
+// Lists
+ul {
+  list-style: none;
+  padding: 0;
+
+  li {
+    padding: 3px 0;
+    font-size: $font-size-md;
+    color: $text-1;
+  }
+}
+
+// Utility text
+.text-muted {
+  color: $text-1;
+}
+
+.text-sm {
+  font-size: $font-size-base;
+}
+
+.mono {
+  font-family: $font-family-mono;
+  font-size: $font-size-md;
+}
+
+// Utility layout
+.flex-row {
+  @include flex(row, flex-start, center, $space-4);
+}
+
+.flex-between {
+  @include flex-between;
+}
+
+.mb-16 {
+  margin-bottom: $space-8;
+}
+
+.mb-8 {
+  margin-bottom: $space-6;
+}
+
+// Animations
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(400%);
+  }
+}