first commit

src/@core/scss/_mixins.scss

@@ -0,0 +1,66 @@
+@use "vuetify/lib/styles/settings" as vuetify_settings;
+
+@mixin themed($property, $light-value, $dark-value) {
+  @at-root {
+    .v-theme {
+      &--light {
+        #{$property}: $light-value;
+      }
+
+      &--dark {
+        #{$property}: $dark-value;
+      }
+    }
+  }
+}
+
+// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
+@mixin before-pseudo() {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    background: currentcolor;
+    block-size: 100%;
+    border-radius: inherit;
+    content: "";
+    inline-size: 100%;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+// ——— Light background generator ——————— //
+// ℹ️ With this you have to give text color to the component you want light bg
+// e.g. class="avatar-initial text-primary" for primary light bg
+@mixin light-bg-provider($component, $inner-selector: "", $opacity: 0.12) {
+  .#{$component}.#{$component}-light-bg #{$inner-selector} {
+    background-color: transparent !important;
+
+    &.bg-static-white {
+      background-color: white !important;
+    }
+
+    &::before {
+      position: absolute;
+      background-color: currentcolor;
+      border-radius: inherit;
+      content: "";
+      inset: 0;
+      opacity: $opacity;
+      pointer-events: none;
+    }
+  }
+}
+
+@mixin avatar-font-sizes($map: $avatar-sizes) {
+  @each $sizeName, $multiplier in vuetify_settings.$size-scales {
+    /* stylelint-disable-next-line scss/no-global-function-names */
+    $size: map-get($map, $sizeName);
+
+    &.v-avatar--size-#{$sizeName} {
+      font-size: #{$size}px;
+    }
+  }
+}