fix: ghost button normal and field padding (#3364)

* fix: ghost button normal and field padding * docs: add button padding explanation
carbon-design-system · Jul 17, 2019 · 07da0e5 · 07da0e5
1 parent 3850475
commit 07da0e5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -161,6 +161,10 @@
     &.#{$prefix}--btn--sm {
       padding: $button-padding-ghost-sm;
     }
+
+    &.#{$prefix}--btn--field {
+      padding: $button-padding-ghost-field;
+    }
   }
 
   .#{$prefix}--btn--icon-only {

diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -105,11 +105,19 @@
   /// @type Number
   /// @access public
   /// @group button
-  $button-padding-ghost: 11px 13px !default !global;
+  /// Uses the same padding-y as normal buttons, but removes extra padding-right
+  $button-padding-ghost: calc(0.875rem - 3px) 12px !default !global;
 
   /// @type Number
   /// @access public
   /// @group button
+  /// Uses the same padding-y as field buttons, but removes extra padding-right
+  $button-padding-ghost-field: calc(0.675rem - 3px) 12px !default !global;
+
+  /// @type Number
+  /// @access public
+  /// @group button
+  /// Uses the same padding-y as small buttons, but removes extra padding-right
   $button-padding-ghost-sm: calc(0.375rem - 3px) 1rem !default !global;
 
   /// @type Number