colors, badges, cards fixes

src/scss/_variables.scss

@@ -203,7 +203,8 @@ $avatar-sizes: (
   "sm": 2rem,
   "md": 3.75rem,
   "lg": 5rem,
-  "xl": 7rem
+  "xl": 7rem,
+  "2xl": 11rem,
 ) !default;
 $avatar-border-radius: $border-radius !default;
 $avatar-font-size: $h4-font-size;
@@ -212,7 +213,7 @@ $link-decoration: none !default;
 $link-hover-decoration: underline !default;
 
 //Typography
-$headings-font-weight: $font-weight-medium !default;
+$headings-font-weight: $font-weight-bold !default;
 
 $hr-opacity: $border-opacity !default;
 $hr-margin-y: 2rem !default;
@@ -258,6 +259,17 @@ $container-variations: (
 
 $content-padding-y: 1.25rem !default;
 
+
+$aspect-ratios: (
+  "1x1": 100%,
+  "4x3": calc(3 / 4 * 100%),
+  "3x4": calc(4 / 3 * 100%),
+  "16x9": calc(9 / 16 * 100%),
+  "9x16": calc(16 / 9 * 100%),
+  "21x9": calc(9 / 21 * 100%),
+  "9x21": calc(21 / 9 * 100%),
+) !default;
+
 //accordion
 $accordion-border-color: $border-color-transparent !default;
 $accordion-icon-width: 1rem !default;

src/scss/mixins/_functions.scss

@@ -4,9 +4,9 @@
 
 @function theme-color-lighter($color, $transparent: false) {
   @if ($transparent) {
-    @return rgba($color, .08);
+    @return rgba($color, .1);
   } @else {
-    @return tint-color($color, 92%);
+    @return tint-color($color, 9%);
   }
 }
 

src/scss/ui/_avatars.scss

@@ -17,8 +17,8 @@
   border-radius: $avatar-border-radius;
 
   svg {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: calc(var(--tblr-avatar-size) / 2);
+    height: calc(var(--tblr-avatar-size) / 2);
   }
 
   .badge {

src/scss/ui/_badges.scss

@@ -9,6 +9,10 @@
   height: 1.25rem;
   border: 1px solid transparent;
   min-width: 1.25rem;
+  font-weight: $headings-font-weight;
+  font-size: $h6-font-size;
+  letter-spacing: .04em;
+  text-transform: uppercase;
 
   @at-root a#{&} {
     color: $white;

src/scss/ui/_cards.scss

@@ -31,7 +31,7 @@
 }
 
 
-
+// Card image
 .card-img,
 .card-img-start {
   @include border-start-radius($card-inner-border-radius);
@@ -42,6 +42,16 @@
   @include border-end-radius($card-inner-border-radius);
 }
 
+.card-img-overlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.card-img-overlay-dark {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%);
+}
+
 .card-inactive {
   pointer-events: none;
   box-shadow: none;

src/scss/ui/_type.scss

@@ -22,6 +22,10 @@ h6,
 .h6 {
   a {
     color: inherit;
+
+    &:hover {
+      color: inherit;
+    }
   }
 }
 

src/scss/utils/_colors.scss

@@ -26,7 +26,7 @@ SOCIAL COLORS
     }
 
     .bg-#{$color}-lt {
-      color: theme-color-darker($value) !important;
+      color: $value !important;
       background: theme-color-lighter($value, true) !important;
     }
   }