- Buttons now have the correct line-height & font-size

- Selects 7 inputs subtract their border from their height in order to match the designs
- Input-texts inside an `o-joined-ui` now work properly (border-radiuses etc)

scss/bitstyles/atoms/button-shapes/_settings.scss

@@ -2,6 +2,7 @@
 @use '../../settings/layout';
 @use '../../settings/typography';
 @use '../../tools/font-size';
+@use '../../tools/line-height';
 @use '../../tools/size';
 
 /* stylelint-disable length-zero-no-unit */
@@ -12,8 +13,8 @@ $default: (
   'border-radius': size.get('s4'),
   'min-height': 1em,
   'min-width': 0,
-  'font-size': font-size.get('2'),
   'font-weight': typography.$font-weight-semibold,
+  'line-height': line-height.get('4'),
 ) !default;
 /* stylelint-enable length-zero-no-unit */
 $small: (

scss/bitstyles/atoms/button/_index.scss

@@ -21,7 +21,7 @@
   max-width: 100%;
   min-height: var(#{custom-property.get($items: ('button', 'min-height'))});
   margin: 0;
-  padding: 
+  padding:
     calc(var(#{custom-property.get($items: ('button', 'padding-vertical'))}) - var(#{custom-property.get($items: ('button', 'border-width'))}, 0rem))
     calc(var(#{custom-property.get($items: ('button','padding-horizontal'))}) - var(#{custom-property.get($items: ('button', 'border-width'))}, 0rem));
   overflow: visible;
@@ -39,8 +39,9 @@
   box-shadow: var(#{custom-property.get($items: ('button', 'box-shadow'))});
   color: var(#{custom-property.get($items: ('button', 'color'))});
   font-family: settings.$font-family;
-  font-size: var(#{custom-property.get($items: ('button', 'font-size'))});
-  font-weight: var(#{custom-property.get($items: ('button', 'font-weight'))});
+  font-size: var(#{custom-property.get($items: ('button', 'font-size'))}, inherit);
+  font-weight: var(#{custom-property.get($items: ('button', 'font-weight'))}, inherit);
+  line-height: var(#{custom-property.get($items: ('button', 'line-height'))}, inherit);
   text-align: center;
   text-decoration: none;
   white-space: nowrap;

scss/bitstyles/atoms/button/_settings.scss

@@ -29,6 +29,7 @@ $allowed-shape-properties: (
   'min-width',
   'font-size',
   'font-weight',
+  'line-height',
   'justify-content'
 ) !default;
 $outline-color: palette.get('brand-2') !default;

scss/bitstyles/base/input-text/_index.scss

@@ -42,9 +42,14 @@ textarea {
   #{custom-property.get($items: ('input-text', 'border-bottom-right-radius'))}: settings.$border-radius;
   #{custom-property.get($items: ('input-text', 'border-bottom-left-radius'))}: settings.$border-radius;
   #{custom-property.get($items: ('input-text', 'border-top-left-radius'))}: settings.$border-radius;
+  #{custom-property.get($items: ('input-text', 'padding-vertical'))}: settings.$padding-vertical;
+  #{custom-property.get($items: ('input-text', 'padding-horizontal'))}: settings.$padding-horizontal;
+  #{custom-property.get($items: ('input-text', 'border-width'))}: settings.$border-width;
   display: block;
   width: 100%;
-  padding: settings.$padding-vertical settings.$padding-horizontal;
+  padding:
+      calc(var(#{custom-property.get($items: ('input-text', 'padding-vertical'))}) - var(#{custom-property.get($items: ('input-text', 'border-width'))}, 0rem))
+      calc(var(#{custom-property.get($items: ('input-text','padding-horizontal'))}) - var(#{custom-property.get($items: ('input-text', 'border-width'))}, 0rem));
   border: settings.$border-width solid settings.$border-color;
   border-radius:
     var(#{custom-property.get($items: ('input-text', 'border-top-left-radius'))})

scss/bitstyles/base/input-text/_settings.scss

@@ -6,7 +6,7 @@
 //
 // Base styles ////////////////////////////////////////
 
-$padding-vertical: size.get('s3') !default;
+$padding-vertical: size.get('s2') !default;
 $padding-horizontal: size.get('m') !default;
 $border-radius: size.get('s4') !default;
 $border-width: 0.1875rem !default;

scss/bitstyles/base/select/_index.scss

@@ -3,15 +3,20 @@
 @use '../../settings/animation';
 @use '../../settings/focus';
 @use '../../settings/typography';
+@use '../../tools/custom-property';
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
   (appearance: none) {
   /* stylelint-disable selector-max-type */
   select {
+    #{custom-property.get($items: ('select', 'padding-vertical'))}: settings.$padding-vertical;
+    #{custom-property.get($items: ('select', 'padding-horizontal'))}: settings.$padding-horizontal;
+    #{custom-property.get($items: ('select', 'border-width'))}: settings.$border-width;
     display: block;
     width: 100%;
-    padding: settings.$padding-vertical calc(settings.$padding-horizontal * 2)
-      settings.$padding-vertical settings.$padding-horizontal;
+    padding:
+      calc(var(#{custom-property.get($items: ('select', 'padding-vertical'))}) - var(#{custom-property.get($items: ('select', 'border-width'))}, 0rem))
+      calc(var(#{custom-property.get($items: ('select','padding-horizontal'))}) - var(#{custom-property.get($items: ('select', 'border-width'))}, 0rem));
     overflow: hidden;
     transition: color animation.$transition-duration
         animation.$transition-easing,

scss/bitstyles/organisms/joined-ui/_index.scss

@@ -6,6 +6,7 @@
 /* prettier-ignore */
 
 #{classname.get($classname-items: 'joined-ui', $layer: 'organism')} {
+  /* Buttons */
   $button-classname: classname.get($classname-items: 'button', $layer: 'atom');
   $button-border-top-left-radius-name: custom-property.get($items: ('button', 'border', 'top', 'left', 'radius'));
   $button-border-top-right-radius-name: custom-property.get($items: ('button', 'border', 'top', 'right', 'radius'));
@@ -14,6 +15,14 @@
   $button-border-width-name: custom-property.get($items: ('button', 'border', 'width'));
   $button-box-shadow-name: custom-property.get($items: ('button', 'box-shadow'));
 
+  /* Text inputs */
+  $input-text-border-top-left-radius-name: custom-property.get($items: ('input-text', 'border', 'top', 'left', 'radius'));
+  $input-text-border-top-right-radius-name: custom-property.get($items: ('input-text', 'border', 'top', 'right', 'radius'));
+  $input-text-border-bottom-right-radius-name: custom-property.get($items: ('input-text', 'border', 'bottom', 'right', 'radius'));
+  $input-text-border-bottom-left-radius-name: custom-property.get($items: ('input-text', 'border', 'bottom', 'left', 'radius'));
+  $input-text-border-width-name: custom-property.get($items: ('input-text', 'border', 'width'));
+  $input-text-box-shadow-name: custom-property.get($items: ('input-text', 'box-shadow'));
+
   border-radius: settings.$border-radius;
   box-shadow: settings.$box-shadow;
 
@@ -25,6 +34,14 @@
     margin-right: calc(var(#{$button-border-width-name}) * -1);
   }
 
+  > :first-child input,
+  > input:first-child {
+    #{$input-text-box-shadow-name}: none;
+    #{$input-text-border-top-right-radius-name}: #{0};
+    #{$input-text-border-bottom-right-radius-name}: #{0};
+    margin-right: calc(var(#{$input-text-border-width-name}) * -1);
+  }
+
   > :last-child #{$button-classname},
   > #{$button-classname}:last-child {
     #{$button-box-shadow-name}: none;
@@ -33,6 +50,14 @@
     margin-right: 0;
   }
 
+  > :last-child input,
+  > input:last-child {
+    #{$input-text-box-shadow-name}: none;
+    #{$input-text-border-top-left-radius-name}: #{0};
+    #{$input-text-border-bottom-left-radius-name}: #{0};
+    margin-right: 0;
+  }
+
   > :not(:first-child):not(:last-child) #{$button-classname},
   > #{$button-classname}:not(:first-child):not(:last-child) {
     #{$button-border-top-left-radius-name}: #{0};
@@ -41,4 +66,13 @@
     #{$button-border-bottom-left-radius-name}: #{0};
     margin-right: calc(var(#{$button-border-width-name}) * -1);
   }
+
+  > :not(:first-child):not(:last-child) input,
+  > input:not(:first-child):not(:last-child) {
+    #{$input-text-border-top-left-radius-name}: #{0};
+    #{$input-text-border-top-right-radius-name}: #{0};
+    #{$input-text-border-bottom-right-radius-name}: #{0};
+    #{$input-text-border-bottom-left-radius-name}: #{0};
+    margin-right: calc(var(#{$input-text-border-width-name}) * -1);
+  }
 }

scss/bitstyles/ui/forms.stories.mdx

@@ -303,10 +303,12 @@ The `role="search"` attribute highlights this functionality for screenreader use
 <Canvas>
   <Story name="Search form">
     {`
-    <form role="search" action="" method="POST" class="u-flex o-joined-ui">
+    <form role="search" action="" method="POST">
       <label for="search" class="u-sr-only">Search users</label>
-      <input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
-      <button type="submit" class="a-button a-button--outline">Search</button>
+      <div class="u-flex o-joined-ui">
+        <input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
+        <button type="submit" class="a-button a-button--outline">Search</button>
+      </div>
     </form>
     `}
   </Story>
@@ -315,15 +317,17 @@ The `role="search"` attribute highlights this functionality for screenreader use
 <Canvas>
   <Story name="Search form with icon button">
     {`
-    <form role="search" action="" method="POST" class="u-flex o-joined-ui">
+    <form role="search" action="" method="POST">
       <label for="search" class="u-sr-only">Search users</label>
-      <input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
-      <button type="submit" class="a-button a-button--outline" title="Search users">
-        <svg width="18" height="18" class="a-icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-          <use xlink:href="${icons}#icon-search"></use>
-        </svg>
-        <span class="u-sr-only">Search</span>
-      </button>
+      <div class="u-flex o-joined-ui">
+        <input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
+        <button type="submit" class="a-button a-button--outline" title="Search users">
+          <svg width="18" height="18" class="a-icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+            <use xlink:href="${icons}#icon-search"></use>
+          </svg>
+          <span class="u-sr-only">Search</span>
+        </button>
+      </div>
     </form>
     `}
   </Story>