Badge again

1 files changed, 26 insertions, 13 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index fd0fdc7..4ecde17 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -42,6 +42,17 @@
                     --bg: fn.global-color(--accent --primary --solid --obj-lo),
                 ),
             ),
+
+            --accent-quiet: (
+                --bg:    fn.global-color(--accent --primary --quiet --bg),
+                --label: fn.global-color(--accent --primary --quiet --fg),
+                --hover: (
+                    --bg: fn.global-color(--accent --primary --quiet --obj),
+                ),
+                --active: (
+                    --bg: fn.global-color(--accent --primary --quiet --obj-lo),
+                ),
+            )
         ),
     ), 'colors');
 
@@ -66,19 +77,21 @@
             }
         }
     
-        @include iro.bem-modifier('accent') {
-            background-color: fn.color(--accent --bg);
-            color:            fn.color(--accent --label);
-
-            &:link,
-            &:visited,
-            &:enabled {
-                &:hover {
-                    background-color: fn.color(--accent --hover --bg);
-                }
-
-                &:active {
-                    background-color: fn.color(--accent --active --bg);
+        @each $variant in 'accent' 'accent-quiet' {
+            @include iro.bem-modifier($variant) {
+                background-color: fn.color(--#{$variant} --bg);
+                color:            fn.color(--#{$variant} --label);
+    
+                &:link,
+                &:visited,
+                &:enabled {
+                    &:hover {
+                        background-color: fn.color(--#{$variant} --hover --bg);
+                    }
+    
+                    &:active {
+                        background-color: fn.color(--#{$variant} --active --bg);
+                    }
                 }
             }
         }