Improve styles of fancy components

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -88,6 +88,7 @@
   }
   .is-selected:not(.spectrum-ActionButton--emphasized) {
     background: var(--spectrum-global-color-gray-300);
+    border-color: var(--spectrum-global-color-gray-700);
   }
   .noPadding {
     padding: 0;

packages/bbui/src/FancyForm/FancyButtonRadio.svelte

@@ -33,7 +33,7 @@
   }
 </script>
 
-<FancyField {error} {value} {validate} {disabled}>
+<FancyField {error} {value} {validate} {disabled} autoHeight>
   {#if label}
     <FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
   {/if}
@@ -42,7 +42,6 @@
     {#each options as option}
       <ActionButton
         selected={getOptionValue(option) === value}
-        size="S"
         on:click={() => onChange(getOptionValue(option))}
       >
         {getOptionLabel(option)}
@@ -53,11 +52,18 @@
 
 <style>
   .options {
-    margin-top: 22px;
+    margin-top: 34px;
+    margin-bottom: 14px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: 6px;
   }
+  .options :global(.spectrum-ActionButton) {
+    font-size: 15px;
+    line-height: 17px;
+    height: auto;
+    padding: 6px 10px;
+  }
 </style>

packages/bbui/src/FancyForm/FancyCheckbox.svelte

@@ -39,6 +39,7 @@
   }
   .text {
     font-size: 15px;
+    line-height: 17px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;

packages/bbui/src/FancyForm/FancyField.svelte

@@ -10,6 +10,7 @@
   export let validate
   export let value
   export let ref
+  export let autoHeight
 
   const formContext = getContext("fancy-form")
   const id = Math.random()
@@ -41,6 +42,7 @@
   class:disabled
   class:focused
   class:clickable
+  class:auto-height={autoHeight}
 >
   <div class="content" on:click>
     <div class="field">
@@ -94,6 +96,9 @@
     height: 64px;
     padding: 0 16px;
   }
+  .fancy-field.auto-height .content {
+    height: auto;
+  }
   .content,
   .field {
     display: flex;

packages/bbui/src/FancyForm/FancyFieldLabel.svelte

@@ -9,6 +9,7 @@
 <style>
   div {
     font-size: 14px;
+    line-height: 15px;
     font-weight: 500;
     position: absolute;
     top: 10px;

packages/bbui/src/FancyForm/FancyInput.svelte

@@ -47,6 +47,8 @@
     transform: translateY(9px);
     background: transparent;
     font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
     color: var(--spectrum-global-color-gray-900);
     outline: none;
     border: none;

packages/bbui/src/FancyForm/FancySelect.svelte

@@ -96,16 +96,18 @@
     display: block;
     flex: 1 1 auto;
     font-size: 15px;
-    margin-top: 18px;
+    line-height: 17px;
     color: var(--spectrum-global-color-gray-900);
-    transition: margin-top 130ms ease-out, opacity 130ms ease-out;
+    transition: transform 130ms ease-out, opacity 130ms ease-out;
     opacity: 1;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     width: 0;
+    transform: translateY(9px);
   }
   .value.placeholder {
+    transform: translateY(0);
     opacity: 0;
     pointer-events: none;
     margin-top: 0;

packages/bbui/src/FancyForm/index.js

@@ -3,3 +3,4 @@ export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
 export { default as FancySelect } from "./FancySelect.svelte"
 export { default as FancyButton } from "./FancyButton.svelte"
 export { default as FancyForm } from "./FancyForm.svelte"
+export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"