From 1f47ff68e213a90b6ae63d9b3a7f8d098e695cee Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Mon, 26 Feb 2024 15:58:12 +0000
Subject: [PATCH] feat: make button and input heights match

---
 components/control/Button/Button.css        |  7 ++++++-
 components/control/Button/Button.stories.ts |  2 +-
 components/control/Input/Input.css          | 13 ++++++-------
 styles/tokens/button.css                    |  1 +
 styles/tokens/input.css                     |  8 ++++----
 5 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/components/control/Button/Button.css b/components/control/Button/Button.css
index 84f0dad..f47541a 100644
--- a/components/control/Button/Button.css
+++ b/components/control/Button/Button.css
@@ -11,6 +11,8 @@ diamond-button {
   --_size: 1rem;
   --_padding-block: var(--diamond-button-padding-block);
   --_padding-inline: var(--diamond-button-padding-inline);
+  --_line-height: var(--diamond-button-line-height);
+  display: inline-block;
 
   button,
   a,
@@ -31,7 +33,9 @@ diamond-button {
     gap: var(--diamond-button-gap);
     justify-content: center;
     letter-spacing: inherit;
-    line-height: var(--diamond-font-line-height);
+    line-height: var(--_line-height);
+    min-height: var(--diamond-spacing-thumb);
+    min-width: var(--diamond-spacing-thumb);
     padding-block: var(--_padding-block);
     padding-inline: var(--_padding-inline);
     -webkit-tap-highlight-color: transparent;
@@ -100,6 +104,7 @@ diamond-button {
   }
 
   &[width='square'] {
+    --_line-height: 1;
     --_padding-inline: var(--diamond-button-padding-block);
   }
 
diff --git a/components/control/Button/Button.stories.ts b/components/control/Button/Button.stories.ts
index f513350..f88857c 100644
--- a/components/control/Button/Button.stories.ts
+++ b/components/control/Button/Button.stories.ts
@@ -106,7 +106,7 @@ export const TextButton: StoryObj = {
 
 export const IconOnlyButton: StoryObj = {
   render: () => html`
-    <diamond-grid wrap="wrap">
+    <diamond-grid wrap="wrap" align-items="center">
       <diamond-grid-item>
         <diamond-button width="square">
           <button type="button">
diff --git a/components/control/Input/Input.css b/components/control/Input/Input.css
index fa22f01..10ede08 100644
--- a/components/control/Input/Input.css
+++ b/components/control/Input/Input.css
@@ -62,11 +62,10 @@ diamond-input {
   select {
     cursor: pointer;
     margin-right: calc(
-      var(--diamond-icon-size) * -1 - var(--diamond-input-padding-horizontal) *
-        0.5
+      var(--diamond-icon-size) * -1 - var(--diamond-input-padding-inline) * 0.5
     );
     padding-right: calc(
-      var(--diamond-icon-size) + var(--diamond-input-padding-horizontal) * 1.5
+      var(--diamond-icon-size) + var(--diamond-input-padding-inline) * 1.5
     );
   }
 
@@ -84,13 +83,13 @@ diamond-input {
 
   /* Prefix */
   &:has(* + :is(input, textarea, select)) > :first-child {
-    margin-right: calc(var(--diamond-input-padding-horizontal) / 2 * -1);
-    padding: 0 0 0 var(--diamond-input-padding-horizontal);
+    margin-right: calc(var(--diamond-input-padding-inline) / 2 * -1);
+    padding: 0 0 0 var(--diamond-input-padding-inline);
   }
 
   /* Suffix */
   :is(input, textarea, select) + * {
-    margin-left: calc(var(--diamond-input-padding-horizontal) / 2 * -1);
-    padding: 0 var(--diamond-input-padding-horizontal) 0 0;
+    margin-left: calc(var(--diamond-input-padding-inline) / 2 * -1);
+    padding: 0 var(--diamond-input-padding-inline) 0 0;
   }
 }
diff --git a/styles/tokens/button.css b/styles/tokens/button.css
index 1962ae2..cdc26e4 100644
--- a/styles/tokens/button.css
+++ b/styles/tokens/button.css
@@ -7,6 +7,7 @@
   --diamond-button-gap: 0.75ch;
   --diamond-button-outline-offset: 5px;
   --diamond-button-font-weight: var(--diamond-font-size-base);
+  --diamond-button-line-height: var(--diamond-font-line-height);
 
   /* Default variant */
   --diamond-button-background: var(--diamond-theme-background);
diff --git a/styles/tokens/input.css b/styles/tokens/input.css
index b399a5e..4cb19d8 100644
--- a/styles/tokens/input.css
+++ b/styles/tokens/input.css
@@ -15,10 +15,10 @@
   --diamond-input-checkbox-border-radius: var(--diamond-border-radius-sm);
   --diamond-input-radio-checkbox-padding: 0.1875rem;
 
-  --diamond-input-padding-vertical: var(--diamond-spacing-sm);
-  --diamond-input-padding-horizontal: var(--diamond-spacing);
-  --diamond-input-padding: var(--diamond-input-padding-vertical)
-    var(--diamond-input-padding-horizontal);
+  --diamond-input-padding-block: var(--diamond-spacing-sm);
+  --diamond-input-padding-inline: var(--diamond-spacing);
+  --diamond-input-padding: var(--diamond-input-padding-block)
+    var(--diamond-input-padding-inline);
 
   --diamond-input-line-height: var(--diamond-font-line-height);
 }