From d199d4d05000490ac544b95671ec3c2928cab922 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Tue, 16 Mar 2021 02:32:30 +0100
Subject: [PATCH] colors, badges, cards fixes

---
 src/scss/_variables.scss        | 16 ++++++++++++++--
 src/scss/mixins/_functions.scss |  4 ++--
 src/scss/ui/_avatars.scss       |  4 ++--
 src/scss/ui/_badges.scss        |  4 ++++
 src/scss/ui/_cards.scss         | 12 +++++++++++-
 src/scss/ui/_type.scss          |  4 ++++
 src/scss/utils/_colors.scss     |  2 +-
 7 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 956ad8ab..b87cd65b 100644
--- a/src/scss/_variables.scss
+++ b/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;
diff --git a/src/scss/mixins/_functions.scss b/src/scss/mixins/_functions.scss
index 51876739..49c64510 100644
--- a/src/scss/mixins/_functions.scss
+++ b/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%);
   }
 }
 
diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
index 513bf78f..344d1d75 100644
--- a/src/scss/ui/_avatars.scss
+++ b/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 {
diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss
index 18140621..810455f7 100644
--- a/src/scss/ui/_badges.scss
+++ b/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;
diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss
index 4eedfb93..a40beb9f 100644
--- a/src/scss/ui/_cards.scss
+++ b/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;
diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss
index 6617d537..a7d6241f 100644
--- a/src/scss/ui/_type.scss
+++ b/src/scss/ui/_type.scss
@@ -22,6 +22,10 @@ h6,
 .h6 {
   a {
     color: inherit;
+
+    &:hover {
+      color: inherit;
+    }
   }
 }
 
diff --git a/src/scss/utils/_colors.scss b/src/scss/utils/_colors.scss
index 7fa558b8..1d955356 100644
--- a/src/scss/utils/_colors.scss
+++ b/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;
     }
   }
-- 
GitLab