Add table variables

sass/elements/form.sass

@@ -53,7 +53,7 @@
   &:hover
     color: $control-hover
   &.is-disabled
-    color: $text-light
+    color: $control-disabled
     pointer-events: none
     input
       pointer-events: none
@@ -82,13 +82,13 @@
     select
       width: 100%
   &:after
-    +arrow($link)
+    +arrow($control-active)
     margin-top: -6px
     right: 16px
     top: 50%
   &:hover
     &:after
-      border-color: $link-hover
+      border-color: $control-hover
   &.is-small
     height: 24px
     select
@@ -106,7 +106,7 @@
       padding-right: 52px
 
 .label
-  color: $text-strong
+  color: $control
   display: block
   font-weight: bold
   &:not(:last-child)
@@ -114,7 +114,7 @@
 
 .help
   display: block
-  font-size: $size-small
+  font-size: $control-size-small
   margin-top: 5px
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -155,13 +155,13 @@
       &:focus
         z-index: 3
       &:first-child
-        border-radius: $radius 0 0 $radius
+        border-radius: $control-radius 0 0 $control-radius
         select
-          border-radius: $radius 0 0 $radius
+          border-radius: $control-radius 0 0 $control-radius
       &:last-child
-        border-radius: 0 $radius $radius 0
+        border-radius: 0 $control-radius $control-radius 0
         select
-          border-radius: 0 $radius $radius 0
+          border-radius: 0 $control-radius $control-radius 0
       &.is-expanded
         flex-grow: 1
         flex-shrink: 0
@@ -178,14 +178,14 @@
   &.has-icon
     & > .fa
       +fa(14px, 24px)
-      color: $text-light
+      color: $control-icon
       pointer-events: none
       position: absolute
       top: 4px
       z-index: 4
     .input
       &:focus + .fa
-        color: $text-strong
+        color: $control-icon-active
       &.is-small + .fa
         font-size: 10.5px
         top: 0