Fix button icons

sass/utilities/controls.sass

@@ -9,7 +9,7 @@ $control-radius-small: $radius-small !default
   border-radius: $control-radius
   box-shadow: none
   display: inline-flex
-  font-size: 1em
+  font-size: $size-normal
   height: 2.5em
   justify-content: flex-start
   line-height: 1.5
@@ -27,6 +27,7 @@ $control-radius-small: $radius-small !default
   &.is-disabled
     pointer-events: none
 
+// The controls sizes use mixins so they can be used at different breakpoints
 =control-small
   border-radius: $control-radius-small
   font-size: $size-small

sass/utilities/functions.sass

@@ -23,6 +23,6 @@
 
 @function findColorInvert($color)
   @if (colorLuminance($color) > 0.55)
-    @return rgba(black, 0.7)
+    @return rgba(#000, 0.7)
   @else
-    @return white
+    @return #fff

sass/utilities/mixins.sass

@@ -36,39 +36,38 @@
   border-radius: 290486px
   cursor: pointer
   display: inline-block
-  height: 24px
+  font-size: $size-normal
+  height: 1.5em
   outline: none
   position: relative
+  transform: rotate(45deg)
+  transform-origin: center center
   vertical-align: top
-  width: 24px
+  width: 1.5em
   &:before,
   &:after
     background-color: $white
     content: ""
     display: block
-    height: 2px
     left: 50%
-    margin-left: -25%
-    margin-top: -1px
     position: absolute
     top: 50%
-    width: 50%
+    transform: translateX(-50%) translateY(-50%)
   &:before
-    transform: rotate(45deg)
+    height: 2px
+    width: 50%
   &:after
-    transform: rotate(-45deg)
+    height: 50%
+    width: 2px
   &:hover
     background-color: rgba($black, 0.2)
   // Sizes
   &.is-small
-    height: 16px
-    width: 16px
+    font-size: $size-small
   &.is-medium
-    height: 32px
-    width: 32px
+    font-size: $size-medium
   &.is-large
-    height: 40px
-    width: 40px
+    font-size: $size-large
 
 =fa($size, $dimensions)
   display: inline-block

sass/utilities/variables.sass

@@ -30,18 +30,17 @@ $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ox
 $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
 $size-1: 3.5rem !default
-$size-2: 2.5rem !default
-$size-3: 1.75rem !default
+$size-2: 2.75rem !default
+$size-3: 2rem !default
 $size-4: 1.5rem !default
 $size-5: 1.25rem !default
 $size-6: 16px !default
+$size-7: 0.75rem !default
 
-$size-7: 0.875rem !default
-
+$weight-light: 300 !default
 $weight-normal: 400 !default
+$weight-semibold: 500 !default
 $weight-bold: 700 !default
-$weight-title-normal: 300 !default
-$weight-title-bold: 500 !default
 
 // Miscellaneous
 $easing: ease-out !default
@@ -117,7 +116,7 @@ $family-primary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
 $size-small: $size-7 !default
-$size-normal: $size-6 !default
+$size-normal: 1rem !default
 $size-medium: $size-5 !default
 $size-large: $size-4 !default