Use primary theme color as default tag color

TrestleAdmin · Aug 4, 2024 · 3f887fc · 3f887fc
1 parent 13dcabe
commit 3f887fc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/app/assets/bundle/trestle/admin.css b/app/assets/bundle/trestle/admin.css
diff --git a/frontend/css/components/_tags.scss b/frontend/css/components/_tags.scss
@@ -27,11 +27,13 @@
   --tag-font-weight: normal;
   --tag-line-height: 1.1;
 
-  --tag-bg: #{shift-color($primary, $tag-bg-scale)};
-  --tag-border-color: #{rgba(black, 0.25)};
   --tag-color: white;
 
-  --tag-hover-border-color: #{rgba(black, 0.35)};
+  --tag-bg: #{shift-color($primary, $tag-bg-scale)};
+  --tag-border-color: #{$primary};
+
+  --tag-hover-bg: #{shift-color($primary, $tag-hover-bg-scale)};
+  --tag-hover-border-color: #{shift-color($primary, $tag-hover-border-scale)};
 
   display: inline-block;
   padding: var(--tag-padding-y) var(--tag-padding-x) var(--tag-padding-y) calc(var(--tag-padding-x) - var(--tag-border-width) / 2);
@@ -62,6 +64,14 @@
   }
 }
 
+.tag {
+  --tag-bg: #{adjust-theme-hsl(primary, $lightness: -$tag-bg-scale)};
+  --tag-border-color: var(--primary);
+
+  --tag-hover-bg: #{adjust-theme-hsl(primary, $lightness: -$tag-hover-bg-scale)};
+  --tag-hover-border-color: #{adjust-theme-hsl(primary, $lightness: -$tag-hover-border-scale)};
+}
+
 @each $state, $value in $theme-colors {
   .tag-#{$state} {
     @include tag-variant($value);