Added larger badge variant

2 files changed, 33 insertions, 8 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index f24d2f8..0f73382 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -14,6 +14,10 @@
                 --pad-x: fn.px-to-em(6px),
                 --pad-y: fn.px-to-em(2px),
             ),
+            --300: (
+                --pad-x: fn.px-to-em(10px),
+                --pad-y: fn.px-to-em(6px),
+            ),
 
             --pill: (
                 --pad-x: fn.px-to-em(9px),
@@ -21,6 +25,9 @@
                 --200: (
                     --pad-x: fn.px-to-em(10px),
                 ),
+                --300: (
+                    --pad-x: fn.px-to-em(16px),
+                ),
             ),
         ),
     ), 'dims');
@@ -136,12 +143,14 @@
             border-radius: 10em;
         }
     
-        @include iro.bem-modifier('200') {
-            padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x);
-    
-            @include iro.bem-modifier('pill') {
-                padding-right: fn.dim(--pill --200 --pad-x);
-                padding-left:  fn.dim(--pill --200 --pad-x);
+        @each $size in '200' '300' {
+            @include iro.bem-modifier($size) {
+                padding: fn.dim(--#{$size} --pad-y) fn.dim(--#{$size} --pad-x);
+        
+                @include iro.bem-modifier('pill') {
+                    padding-right: fn.dim(--pill --#{$size} --pad-x);
+                    padding-left:  fn.dim(--pill --#{$size} --pad-x);
+                }
             }
         }
     
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index d4ca4b0..a3c4eed 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -9,13 +9,21 @@ mixin view-badge
             = ' '
             +badge('accent-quiet')= 'new'
             = ' '
-            +badge(size=200 href='#')= '100'
+            +badge(size=200 href='#')= '200'
             = ' '
             +badge('primary')(size=200 href='#')= 'new'
             = ' '
             +badge('accent')(size=200 href='#')= 'new'
             = ' '
             +badge('accent-quiet')(size=200 href='#')= 'new'
+            = ' '
+            +badge(size=300 href='#')= '300'
+            = ' '
+            +badge('primary')(size=300 href='#')= 'new'
+            = ' '
+            +badge('accent')(size=300 href='#')= 'new'
+            = ' '
+            +badge('accent-quiet')(size=300 href='#')= 'new'
 
         .c-box
             +badge(pill=true)= '100'
@@ -26,10 +34,18 @@ mixin view-badge
             = ' '
             +badge('accent-quiet')(pill=true)= 'new'
             = ' '
-            +badge(size=200, pill=true)= '100'
+            +badge(size=200, pill=true)= '200'
             = ' '
             +badge('primary')(size=200, pill=true)= 'new'
             = ' '
             +badge('accent')(size=200, pill=true)= 'new'
             = ' '
             +badge('accent-quiet')(size=200, pill=true)= 'new'
+            = ' '
+            +badge(size=300, pill=true)= '300'
+            = ' '
+            +badge('primary')(size=300, pill=true)= 'new'
+            = ' '
+            +badge('accent')(size=300, pill=true)= 'new'
+            = ' '
+            +badge('accent-quiet')(size=300, pill=true)= 'new'