fix: adjusted button label padding

adobe · May 19, 2021 · 2c8ba8c · 2c8ba8c
1 parent 03f888a
commit 2c8ba8c
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/components/button/index.css b/components/button/index.css
@@ -25,9 +25,8 @@ governing permissions and limitations under the License.
     filter: color;
     replace: --spectrum-button$1-;
   }
-
-  /* Fixup alignment of text on small */
-  --spectrum-button-primary-text-padding-top: calc(var(--spectrum-button-s-primary-texticon-text-padding-top) - 3px);
+  /* adjust padding above and below button label to compensate for line height rendering differences in css */
+  --spectrum-button-primary-textonly-text-padding-top: calc(var(--spectrum-button-s-primary-textonly-text-padding-top) -1px);
 }
 
 .spectrum-Button--sizeM {
@@ -36,6 +35,8 @@ governing permissions and limitations under the License.
     filter: color;
     replace: --spectrum-button$1-;
   }
+  /* adjust padding above and below button label to compensate for line height rendering differences in css */
+  --spectrum-button-primary-textonly-text-padding-bottom: calc(var(--spectrum-button-m-primary-textonly-text-padding-bottom) -1px);
 }
 
 .spectrum-Button--sizeL {
@@ -52,6 +53,8 @@ governing permissions and limitations under the License.
     filter: color;
     replace: --spectrum-button$1-;
   }
+  /* adjust padding above and below button label to compensate for line height rendering differences in css */
+  --spectrum-button-primary-textonly-text-padding-bottom: calc(var(--spectrum-button-xl-primary-textonly-text-padding-bottom) -1px);
 }
 
 .spectrum-Button {
@@ -60,9 +63,6 @@ governing permissions and limitations under the License.
   --spectrum-button-primary-padding-right-adjusted: calc(var(--spectrum-button-primary-texticon-padding-right) - var(--spectrum-button-primary-texticon-border-size));
   --spectrum-button-primary-textonly-padding-left-adjusted: calc(var(--spectrum-button-primary-texticon-padding-left) - var(--spectrum-button-primary-texticon-border-size));
   --spectrum-button-primary-textonly-padding-right-adjusted: calc(var(--spectrum-button-primary-texticon-padding-right) - var(--spectrum-button-primary-texticon-border-size));
-
-  /* Adjust padding to make things look right */
-  --spectrum-button-padding-y: calc(var(--spectrum-button-primary-text-padding-top) - 1px);
 }
 
 .spectrum-Button {
@@ -77,9 +77,8 @@ governing permissions and limitations under the License.
   block-size: auto;
   min-inline-size: var(--spectrum-button-primary-textonly-min-width);
 
-  /* @hack: fix button text vertical alignment at 14px */
-  padding-block-end: calc(var(--spectrum-button-padding-y) + 1px);
-  padding-block-start: calc(var(--spectrum-button-padding-y) - 1px);
+  padding-block-start: 0;
+  padding-block-end: 0;
 
   /* Start with text-only padding */
   padding-inline: var(--spectrum-button-primary-textonly-padding-left-adjusted) var(--spectrum-button-primary-textonly-padding-right-adjusted);
@@ -119,6 +118,8 @@ a.spectrum-Button {
   @inherit: %spectrum-ButtonLabel;
 
   line-height: var(--spectrum-button-primary-texticon-text-line-height);
+  padding-block-start: calc(var(--spectrum-button-primary-textonly-text-padding-top) - var(--spectrum-button-primary-textonly-border-size));
+  padding-block-end: calc(var(--spectrum-button-primary-textonly-text-padding-bottom) - var(--spectrum-button-primary-textonly-border-size));
 }
 
 .spectrum-LogicButton,