FBCM-5076 Add pill blocks

We add variants style buttons to `Button` which we call "pills". These
are intended for button-like elements that require a more "flat"
appearance.

We depart a bit from the traditional "block" pattern here, which has
proved difficult to scale, when there are a multiplicity of variants.

Instead, we use `Option` to provide a convenient API for taking
advantage of the various configurations we offer. We won't know for sure
without enough usage, but this does seem a major improvement over the
current "block" pattern, and we ought to consider adopting it more
broadly.

Author: Dave Zuch

css/src/index.css

@@ -191,7 +191,9 @@ dt {
 .group:hover .group-hover\:\!focus\:\!disabled\:sibling\:border-grey-70:not(:focus):not(:disabled) ~ * { @apply .border-grey-70; }
 .focus\:next\:text-blue-88:focus + * { @apply .text-blue-88; }
 .\!active\:border-b:not(:active) { @apply .border-b; }
+.\!active\:border-b-2:not(:active) { @apply .border-b-2; }
 .active\:border-t:active { @apply .border-t; }
+.active\:border-t-2:active { @apply .border-t-2; }
 .disabled\:opacity-50:disabled { @apply .opacity-50; }
 .disabled\:cursor-default:disabled { @apply .cursor-default; }
 .\!disabled\:cursor-pointer:not(:disabled) { @apply .cursor-pointer; }

css/src/tailwind.js

@@ -66,6 +66,7 @@ config.colors = Object.assign(config.colors, {
   'blue-75': '#009FBF',
   'blue-82': '#00ABD1',
   'blue-88': '#00BBE0',
+  'blue-88-a40': '#00BBE060',
   'facebook-blue': '#3B5998',
   'fb-blue': '#3B5998',
   'google-blue': '#4285F4',