3 files changed, 22 insertions, 3 deletions

diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 94d55b1..7b4670f 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -267,19 +267,19 @@ $themes-config: (
 @each $theme, $key in $themes-config {
     $themes: props.merge($themes, (
         --#{$theme}: (
-            --bg-color:     props.get(core.$theme, $key, --200),
+            --bg-color:     props.get(core.$theme, $key, --100),
             --label-color:  props.get(core.$theme, $key, --1100),
             --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
             --shadow-color: props.get(core.$theme, $key, --200),
 
             --hover: (
-                --bg-color:     props.get(core.$theme, $key, --300),
+                --bg-color:     props.get(core.$theme, $key, --200),
                 --label-color:  props.get(core.$theme, $key, --1200),
                 --border-color: props.get(core.$theme, $key, --600),
             ),
 
             --active: (
-                --bg-color:     props.get(core.$theme, $key, --400),
+                --bg-color:     props.get(core.$theme, $key, --300),
                 --label-color:  props.get(core.$theme, $key, --1300),
                 --border-color: props.get(core.$theme, $key, --800),
             ),
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 6c0e7d2..2beff5f 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -104,6 +104,24 @@
             }
         }
 
+        @include bem.modifier('pill') {
+            border-radius: 100em;
+
+            @include bem.elem('bg') {
+                border-radius: 100em;
+            }
+
+            @include bem.elem('native') {
+                padding-inline: props.get(vars.$pad-i-pill);
+
+                &:focus {
+                    @include bem.sibling-elem('bg') {
+                        border-radius: 100em;
+                    }
+                }
+            }
+        }
+
         @include bem.modifier('extended') {
             padding: props.get(vars.$extended--pad);
 
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index f64c42b..51099d8 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -4,6 +4,7 @@
 
 $line-height:  props.def(--o-text-field--line-height, 1.4) !default;
 $pad-i:        props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
+$pad-i-pill:   props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;
 $pad-b:        props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
 $border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
 $rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;