Style toolbar buttons (#1086)

* chore: 🤖 move loading-button component to core addon

* style: toolbar buttons should align with Structure

* fix: buttons should have consistent font

addons/rose/addon/styles/rose/_typography.scss

@@ -17,7 +17,8 @@ body {
 }
 
 input,
-textarea {
+textarea,
+button {
   font-family: typography.$family-primary;
 }
 

addons/rose/addon/styles/rose/components/_index.scss

@@ -19,4 +19,3 @@
 @import 'link-button';
 @import 'badge';
 @import 'toolbar';
-@import 'loading-button';

addons/rose/addon/styles/rose/components/_loading-button.scss

@@ -1,10 +0,0 @@
-@use '../variables/sizing';
-
-.rose-loading-button {
-  color: var(--stark);
-  vertical-align: middle;
-  margin: auto ($size-xs + $size-xxxs) auto auto;
-  &.is-loading {
-    color: var(--ui-gray-starker-1);
-  }
-}

addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss

@@ -1,5 +1,6 @@
 @use '../../variables/sizing';
 @use '../../variables/media';
+@use '../../utilities/type';
 
 $xxs: sizing.rems(xxs); // 4
 $xxxxs: sizing.rems(xxxxs); // 1
@@ -7,12 +8,20 @@ $xxxxs: sizing.rems(xxxxs); // 1
 .rose-toolbar {
   background-color: var(--ui-gray-subtler-6);
   padding: $xxs + $xxxxs;
-  button {
-    display: inline-block;
-    font-weight: normal;
-    vertical-align: middle;
-  }
-  .rose-form {
+
+  // inside a toolbar, forms are always full-width
+  .rose-form,
+  .rose-form:not(.full-width) {
     display: flex;
+    width: auto;
+  }
+
+  .rose-button-inline-link-action {
+    @include type.type(button, semibold);
+    color: var(--stark);
+    display: inline-block;
+    vertical-align: middle;
+    $yPadding: sizing.rems(xxs) + sizing.rems(xxxs);
+    padding: $yPadding sizing.rems(m);
   }
 }