routie dev init since i didn't adhere to any proper guidance up until now

frontend/node_modules/vuetify/lib/components/VAvatar/_variables.scss

@@ -0,0 +1,48 @@
+@use "sass:map";
+@use '../../styles/settings';
+@use "../../styles/settings/variables";
+@use "../../styles/tools/functions";
+
+// Defaults
+$avatar-background: rgb(var(--v-theme-surface)) !default;
+$avatar-border-radius: map.get(variables.$rounded, 'circle') !default;
+$avatar-border-color: settings.$border-color-root !default;
+$avatar-border-radius: map.get(settings.$rounded, 0) !default;
+$avatar-border-style: settings.$border-style-root !default;
+$avatar-border-thin-width: thin !default;
+$avatar-border-width: 0 !default;
+$avatar-color: functions.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
+$avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
+$avatar-elevation: 1 !default;
+$avatar-height: 40px !default;
+$avatar-line-height: normal !default;
+$avatar-plain-opacity: .62 !default;
+$avatar-rounded-border-radius: variables.$border-radius-root !default;
+$avatar-vertical-align: middle !default;
+$avatar-width: 40px !default;
+$avatar-margin-end: 8px !default;
+$avatar-margin-start: 8px !default;
+
+$avatar-sizes: () !default;
+$avatar-sizes: functions.map-deep-merge(
+  (
+    'height': $avatar-height,
+    'width': $avatar-width
+  ),
+  $avatar-sizes
+);
+
+$avatar-border: (
+  $avatar-border-color,
+  $avatar-border-style,
+  $avatar-border-width,
+  $avatar-border-thin-width
+) !default;
+
+$avatar-variants: (
+  $avatar-background,
+  $avatar-color,
+  $avatar-elevation,
+  $avatar-plain-opacity,
+  'v-avatar'
+) !default;