Refactor sass themeable style (forem#2762) [ci skip]

app/assets/stylesheets/credits.scss

@@ -43,10 +43,16 @@
   }
 
   .InputElement {
-    background-color: white;
-    background-color: var(--theme-container-background, white);
-    color: $black;
-    color: var(--theme-color, $black);
+    @include themeable(
+      background-color, 
+      theme-container-background, 
+      white
+    );
+    @include themeable(
+      color, 
+      theme-color, 
+      $black
+    );
   }
 
   .StripeElement, input[type="number"], button, .existing-card {
@@ -55,10 +61,16 @@
     padding: 10px 12px;
     border: 1px solid transparent;
     border-radius: 4px;
-    background-color: white;
-    background-color: var(--theme-container-background, white);
-    color: $black;
-    color: var(--theme-color, $black);
+    @include themeable(
+      background-color, 
+      theme-container-background, 
+      white
+    );
+    @include themeable(
+      color, 
+      theme-color, 
+      $black
+    );
 
     box-shadow: 0 1px 3px 0 #e6ebf1;
     -webkit-transition: box-shadow 150ms ease;
@@ -183,10 +195,16 @@
     font-weight: bold;
   }
   button#add-new-card {
-    background-color: $light-gray;
-    background-color: var(--theme-container-background, $light-gray);
-    color: $black;
-    color: var(--theme-color, $black);
+    @include themeable(
+      background-color, 
+      theme-container-background, 
+      $light-gray
+    );
+    @include themeable(
+      color, 
+      theme-color, 
+      $black
+    );
     font-size: 15px;
   }
 
@@ -202,8 +220,11 @@
       padding: 10px 0px;
     }
     .credit-card-component {
-      background: $lightest-gray;
-      background: var(--theme-container-accent-background, $lightest-gray);
+      @include themeable(
+        background, 
+        theme-container-accent-background, 
+        $lightest-gray
+      );
       border-radius: 3px;
       margin: 0px 5px;
       display: inline-block;
@@ -213,8 +234,11 @@
 
   label.main-form-label {
     margin-bottom: 4px;
-    background: $light-gray;
-    background: var(--theme-container-accent-background, $light-gray);
+    @include themeable(
+      background, 
+      theme-container-accent-background, 
+      $light-gray
+    );
     border-radius: 3px;
     padding: 2px 8px;
     display: inline-block;

app/assets/stylesheets/sidebar-data.scss

@@ -1,12 +1,16 @@
 @import 'variables';
+@import 'mixins';
 
 .sidebar-data{
   border-radius:3px;
   font-size:14px;
   font-weight:bold;
   padding:1px 12px 1px;
   margin:3px 1px;
-  color: $dark-medium-gray;
-  color: var(--theme-secondary-color, $dark-medium-gray);
+  @include themeable(
+    color, 
+    theme-secondary-color, 
+    $dark-medium-gray
+  );
   font-family: $monospace;
 }

app/assets/stylesheets/sticky-nav.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 
 .primary-sticky-nav {
   display: none;
@@ -16,8 +17,11 @@
   }
   .primary-sticky-nav-author{
     a{
-      color: $black;
-      color: var(--theme-container-color, $black);
+      @include themeable(
+        color, 
+        theme-container-color, 
+        $black
+      );
     }
     .primary-sticky-nav-author-top-profile-image{
       width: 35px;
@@ -36,8 +40,11 @@
     }
     .primary-sticky-nav-author-summary{
       font-weight: 400;
-      color: $medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
+      @include themeable(
+        color, 
+        theme-secondary-color, 
+        $medium-gray
+      );
       padding: 10px 0px 5px;
       font-style: italic;
       font-size:0.88em;
@@ -73,8 +80,11 @@
       vertical-align: -1px;
     }
     a{
-      color: $black;
-      color: var(--theme-container-color, $black);
+      @include themeable(
+        color, 
+        theme-container-color, 
+        $black
+      );
       display: inline-block;
     }
   }
@@ -83,16 +93,28 @@
     padding: 10px 13px;
     font-size:0.9em;
     font-weight: bold;
-    background: white;
-    background: var(--theme-container-background,	#fff);
+    @include themeable(
+      background, 
+      theme-container-background, 
+      #fff
+    );
     margin-bottom: 10px;
     margin-left: 10px;
-    border: 1px solid $outline-color;
-    border: var(--theme-container-border, 1px solid $outline-color);
-    box-shadow: $bold-shadow;
-    box-shadow: var(--theme-container-box-shadow, $bold-shadow);
-    color: $black;
-    color: var(--theme-container-color, $black);
+    @include themeable(
+      border, 
+      theme-container-border, 
+      1px solid $outline-color
+    );
+    @include themeable(
+      box-shadow, 
+      theme-container-box-shadow, 
+      $bold-shadow
+    );
+    @include themeable(
+      color, 
+      theme-container-color, 
+      $black
+    );
     width: 262px;
     border-radius: 3px;
     &.sticky-join-cta{
@@ -117,8 +139,11 @@
     .primary-sticky-nav-element-details{
       margin-top:9px;
       font-size: 0.8em;
-      color: $medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
+      @include themeable(
+        color, 
+        theme-secondary-color, 
+        $medium-gray
+      );
     }
     &:hover{
       border: 1px solid darken($light-medium-gray, 17%);
@@ -138,8 +163,11 @@
       font-size: 0.8em;
       font-weight: 800;
       margin-bottom: 2px;
-      color: $medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
+      @include themeable(
+        color, 
+        theme-secondary-color, 
+        $medium-gray
+      );
     }
     .value{
       display: inline-block;
@@ -155,8 +183,11 @@
 
   .primary-sticky-nav-org-summary{
     font-weight: 400;
-    color: $black;
-    color: var(--theme-container-color, $black);
+    @include themeable(
+      color, 
+      theme-container-color, 
+      $black
+    );
     padding: 4px 0px;
     font-size:0.95em;
     margin-top: 20px;