fix #1464: avatars overlap transparently

src/scss/layout/_root.scss

@@ -8,6 +8,8 @@
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
     --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
     --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
+    --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
   }
 
   --#{$prefix}bg-surface: #{$bg-surface};

src/scss/mixins/_functions.scss

@@ -2,7 +2,7 @@
   @if ($transparent) {
     @return rgba($color, .1);
   } @else {
-    @return tint-color($color, 10%);
+    @return tint-color($color, 90%);
   }
 }
 

src/scss/ui/_avatars.scss

@@ -71,7 +71,7 @@
 
   .avatar {
     margin-right: calc(-.5 * var(--#{$prefix}avatar-size)) !important;
-    box-shadow: var(--#{$prefix}avatar-shadow), 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
+    box-shadow: var(--#{$prefix}avatar-shadow), 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)));
   }
 }
 

src/scss/utils/_colors.scss

@@ -6,10 +6,10 @@
   }
 
   .bg-#{"" + $color}-lt {
-    --#{$prefix}bg-opacity: .1;
+    --#{$prefix}bg-opacity: 1;
     --#{$prefix}text-opacity: 1;
     color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}text-opacity)) !important;
-    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
+    background-color: rgba(var(--#{$prefix}#{$color}-lt-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 }