fix(react): fix button styles according to the style guide (#119)

packages/styles/button.css

@@ -97,7 +97,7 @@
 }
 
 .Button--thin {
-  height: 23px;
+  height: var(--button-thin-height);
   min-width: 100px;
   font-size: var(--text-size-smallest);
   padding: 0 16px;

packages/styles/icon-button.css

@@ -1,26 +1,42 @@
 .IconButton {
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-content: center;
-  height: 18px;
-  width: 18px;
+  height: var(--button-thin-height);
+  width: var(--button-thin-height);
+  border: 1px solid transparent;
   border-radius: 3px;
-  border: 1px solid #fff;
-  box-sizing: border-box;
   background-color: var(--icon-button-background-color);
   color: var(--icon-button-icon-color);
+  margin: 2px;
 }
 
 .IconButton svg {
-  height: 14px;
-  width: 14px;
+  height: calc(var(--button-thin-height) - 4px);
+  width: calc(var(--button-thin-height) - 4px);
 }
 
-.IconButton:hover {
-  box-shadow: 0 0 0 1px var(--icon-button-background-color);
+.IconButton:before {
+  content: '';
+  position: absolute;
+  height: calc(var(--button-thin-height) + 4px);
+  width: calc(var(--button-thin-height) + 4px);
+  transform: translateY(-4px);
+  border-radius: 3px;
+}
+
+.IconButton:hover:before {
+  border: 1px solid var(--icon-button-background-color);
 }
 
 .IconButton:focus {
   outline: none;
-  box-shadow: 0 0 0 2px var(--focus), 0 0 4px 3px var(--focus-glow);
+}
+
+.IconButton:focus:before {
+  border: 2px solid var(--button-focus-ring-color);
+  height: calc(var(--button-thin-height) + 6px);
+  width: calc(var(--button-thin-height) + 6px);
+  transform: translateX(-1px) translateY(-5px);
+  box-shadow: 0 0 1px var(--button-focus-ring-color);
 }

packages/styles/variables.css

@@ -49,6 +49,7 @@
   --button-text-color-dark: #333333;
   --button-text-color-light: #ffffff;
   --button-focus-ring-color: #c11bde;
+  --button-thin-height: 23px;
 
   /* icon buttons */
   --icon-button-background-color: #dadada;