big ui refractor

client/src/styles/base/_base.scss

@@ -0,0 +1,69 @@
+@use '../abstracts' as *;
+
+:root {
+	--color-background: #{$color-bg-dark};
+	--color-surface: #{$color-surface};
+	--color-primary: #{$color-primary};
+
+	@each $level, $color in $srs-colors {
+		--srs-#{$level}: #{$color};
+	}
+}
+
+body,
+html,
+.zen-app,
+.v-application {
+	background-color: $color-bg-dark !important;
+	font-family: $font-family-sans;
+	color: $color-text-white;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.v-card {
+	box-shadow: $shadow-lg !important;
+}
+
+.cursor-pointer {
+	cursor: pointer;
+}
+
+.tracking-wide {
+	letter-spacing: $tracking-wider;
+}
+
+.tracking-tight {
+	letter-spacing: $tracking-tight;
+}
+
+.border-subtle {
+	border: $border-width-sm solid $color-border;
+}
+
+@each $level, $color in $srs-colors {
+	.text-srs-#{$level} {
+		color: var(--srs-#{$level}) !important;
+	}
+
+	.bg-srs-#{$level} {
+		background-color: var(--srs-#{$level}) !important;
+	}
+}
+
+.page-enter-active,
+.page-leave-active {
+	transition:
+		opacity 0.4s ease,
+		transform 0.4s ease;
+}
+
+.page-enter-from {
+	opacity: 0;
+	transform: translateY(15px);
+}
+
+.page-leave-to {
+	opacity: 0;
+	transform: translateY(-15px);
+}

client/src/styles/base/_index.scss

@@ -0,0 +1,2 @@
+@use 'typography';
+@use 'base';

client/src/styles/base/_typography.scss

@@ -1,4 +1,4 @@
-@use '../abstracts/variables' as *;
+@use '../abstracts' as *;
 
 body {
 	font-family: $font-family-sans;