Added primary badge

2 files changed, 19 insertions, 2 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index c359abc..7258cc0 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -32,6 +32,17 @@
                 --shadow: fn.global-color(--focus --shadow),
             ),
 
+            --primary: (
+                --bg:    fn.global-color(--fg-lo),
+                --label: fn.global-color(--bg),
+                --hover: (
+                    --bg: fn.global-color(--fg),
+                ),
+                --active: (
+                    --bg: fn.global-color(--fg),
+                ),
+            ),
+
             --accent: (
                 --bg:    fn.global-color(--accent --primary --solid --bg),
                 --label: fn.global-color(--accent --primary --solid --fg),
@@ -77,7 +88,7 @@
             }
         }
     
-        @each $variant in 'accent' 'accent-quiet' {
+        @each $variant in 'primary' 'accent' 'accent-quiet' {
             @include iro.bem-modifier($variant) {
                 background-color: fn.color(--#{$variant} --bg);
                 color:            fn.color(--#{$variant} --label);
@@ -101,7 +112,9 @@
         &:enabled {
             @include iro.bem-at-theme('keyboard') {
                 &:focus {
-                    box-shadow: inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
+                    background-color: transparent;
+                    box-shadow:       inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
+                    color:            currentColor;
                 }
             }
         }
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index e81a723..9979049 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -3,12 +3,16 @@ mixin view-badge
         .c-box
             +badge= '100'
             = ' '
+            +badge('primary')= 'new'
+            = ' '
             +badge('accent')= 'new'
             = ' '
             +badge('accent-quiet')= 'new'
             = ' '
             +badge(size=200)= '100'
             = ' '
+            +badge('primary')(size=200)= 'new'
+            = ' '
             +badge('accent')(size=200)= 'new'
             = ' '
             +badge('accent-quiet')(size=200)= 'new'