Rename variables

website/themes/uppy/source/css/_common.scss

@@ -1,28 +1,28 @@
 body {
-  font-family: $body-font;
-  font-size: $body-font-size;
+  font-family: $fontFamily-body;
+  font-size: $fontSize-body;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: $medium;
+  color: $color-medium;
   margin: 0;
 }
 
 a {
   text-decoration: none;
-  color: $medium;
+  color: $color-medium;
 }
 
 img { border: none; }
 
 h1, h2, h3, h4, strong {
   font-weight: 600;
-  color: $dark;
+  color: $color-dark;
 }
 
 code, pre {
-  font-family: $code-font;;
-  font-size: $code-font-size;
-  background-color: $codebg;
+  font-family: $fontFamily-code;;
+  font-size: $fontSize-code;
+  background-color: $color-codebg;
   -webkit-font-smoothing: initial;
   -moz-osx-font-smoothing: initial;
 }
@@ -35,23 +35,23 @@ code {
   white-space: nowrap;
 }
 
-em { color: $light; }
+em { color: $color-light; }
 
 p { word-spacing: 0.05em; }
 
 a.button {
   display: inline-block;
-  font-family: $code-font;
+  font-family: $fontFamily-code;
   font-weight: 700;
   color: #fff;
-  background-color: lighten($primary, 8%);
-  border-bottom: 2px solid darken($primary, 12%);
+  background-color: lighten($color-primary, 8%);
+  border-bottom: 2px solid darken($color-primary, 12%);
   padding: 12px 14px;
   border-radius: 4px;
   transition: all .15s ease;
 
   &:hover {
-    background-color: lighten($primary, 15%);
+    background-color: lighten($color-primary, 15%);
     transform: translate(0, -2px);
   }
 }
@@ -60,10 +60,10 @@ a.button {
   overflow-x: auto;
   position: relative;
   padding: 0;
-  background-color: $codebg;
+  background-color: $color-codebg;
   padding: .8em .8em .4em;
   line-height: 1.1em;
-  border-radius: $radius;
+  border-radius: $size-radius;
 
   figcaption {
     display: none;
@@ -154,11 +154,11 @@ a.button {
   //   }
   //
   //   a {
-  //     color: $light;
+  //     color: $color-light;
   //     font-size: .9em;
   //     display: block;
   //     padding: 0 30px 0 20px;
-  //     &:hover { color: $primary; }
+  //     &:hover { color: $color-primary; }
   //   }
   // }
 }

website/themes/uppy/source/css/_index.scss

@@ -26,7 +26,7 @@ html, body {
 //   margin-bottom: 3em;
 //
 //   .delimiter {
-//     color: $light;
+//     color: $color-light;
 //     margin: 0 5px;
 //   }
 //
@@ -36,12 +36,12 @@ html, body {
 // }
 
 .nav-link {
-  color: $light;
+  color: $color-light;
   padding-bottom: 3px;
   margin: 0 1.5em;
 
   &:first-child { margin-left: 0; }
-  &:hover, &.current { border-bottom: 3px solid $primary; }
+  &:hover, &.current { border-bottom: 3px solid $color-primary; }
 }
 
 .page-index .MainLogo {
@@ -63,7 +63,7 @@ html, body {
   position: relative;
 
   .warning {
-    color: $light;
+    color: $color-light;
   }
 }
 
@@ -77,7 +77,7 @@ html, body {
 }
 
 .IndexHero-title {
-  font-family: $logo-font;
+  font-family: $fontFamily-logo;
   font-weight: 300;
   font-size: 4em;
   margin: 0;
@@ -88,7 +88,7 @@ html, body {
   padding: 0 20px;
   text-align: center;
   margin: 1.5em auto;
-  color: $light;
+  color: $color-light;
 }
 
 .IndexSocial {
@@ -138,7 +138,7 @@ html, body {
     line-height: 9em;
     padding: 0 .5em;
     font-weight: 600;
-    color: $light;
+    color: $color-light;
   }
 
   .block {
@@ -164,7 +164,7 @@ html, body {
     font-size: 1.8em;
     text-align: center;
     margin-top: 1em;
-    color: $light;
+    color: $color-light;
   }
 
   .feats {
@@ -182,19 +182,19 @@ html, body {
   }
 
   h2 {
-    color: $medium;
+    color: $color-medium;
     line-height: 40px;
     margin-bottom: 0;
   }
 
   p {
-    color: $light;
+    color: $color-light;
     padding-left: 52px;
     margin: .4em 0;
   }
 
   a {
-    color: $primary;
+    color: $color-primary;
     font-weight: 600;
   }
 
@@ -218,7 +218,7 @@ html, body {
 
 #design_goals {
   padding: 4em 0;
-  background-color: $primary;
+  background-color: $color-primary;
   color: #fff;
 
   h2 {
@@ -254,7 +254,7 @@ html, body {
   text-align: center;
   color: #fff;
   padding: 4em 0;
-  background-color: $darkgray;
+  background-color: $color-darkgray;
 
   .avatar {
     width: 100px;

website/themes/uppy/source/css/_page.scss

@@ -10,8 +10,8 @@
   position: absolute;
   right: 60px;
   top: 25px;
-  height: $header-height;
-  line-height: $header-height;
+  height: $size-headerHeight;
+  line-height: $size-headerHeight;
   .break { display: none; }
 
   li {
@@ -23,7 +23,7 @@
 
 .nav-link {
   padding-bottom: 3px;
-  &:hover, &.current { border-bottom: 3px solid $primary; }
+  &:hover, &.current { border-bottom: 3px solid $color-primary; }
 }
 
 #search-query {
@@ -38,22 +38,22 @@
   transition: border-color .2s ease;
   background: #fff url(/images/search.png) 8px 5px no-repeat;
   background-size: 20px;
-  &:focus { border-color: $primary; }
+  &:focus { border-color: $color-primary; }
 }
 
 .MainLogo {
   display: inline-block;
   font-size: 1.5em;
-  line-height: $header-height;
-  color: $dark;
-  font-family: $logo-font;
+  line-height: $size-headerHeight;
+  color: $color-dark;
+  font-family: $fontFamily-logo;
   font-weight: 500;
 
   img {
     vertical-align: middle;
     margin-right: 6px;
-    width: $header-height;
-    height: $header-height;
+    width: $size-headerHeight;
+    height: $size-headerHeight;
   }
 }
 
@@ -128,11 +128,11 @@
   }
 
   .sidebar-link {
-    color: $light;
+    color: $color-light;
 
     &.current {
       font-weight: 600;
-      color: $primary;
+      color: $color-primary;
     }
 
     &.new &:after {
@@ -141,7 +141,7 @@
       font-size: 10px;
       font-weight: 600;
       color: #fff;
-      background-color: $primary;
+      background-color: $color-primary;
       line-height: 14px;
       padding: 0 4px;
       border-radius: 3px;
@@ -151,12 +151,12 @@
       top: -1px;
     }
 
-    &:hover { border-bottom: 2px solid $primary; }
+    &:hover { border-bottom: 2px solid $color-primary; }
   }
 
   .section-link &.active {
     font-weight: bold;
-    color: $primary;
+    color: $color-primary;
   }
 
   .main-menu {
@@ -194,7 +194,7 @@
   img { max-width: 100%; }
 
   span.light {
-    color: $light;
+    color: $color-light;
   }
 
   span.info {
@@ -210,7 +210,7 @@
   h2 {
     margin: 2em 0 .8em;
     padding-bottom: .7em;
-    border-bottom: 1px solid $border;
+    border-bottom: 1px solid $color-border;
   }
 
   h3 {
@@ -218,7 +218,7 @@
     position: relative;
     &:before {
       content: "#";
-      color: $primary;
+      color: $color-primary;
       position: absolute;
       left: -0.7em;
       top: -2px;
@@ -240,14 +240,14 @@
   }
 
   a {
-    color: $primary;
+    color: $color-primary;
     font-weight: 600;
   }
 
   blockquote {
     margin: 2em 0;
     padding-left: 20px;
-    border-left: 4px solid $primary;
+    border-left: 4px solid $color-primary;
     p {
       font-weight: 600;
       margin-left: 0;
@@ -259,17 +259,17 @@
   p.tip {
     padding: 12px 24px 12px 30px;
     margin: 2em 0;
-    border-left: 4px solid $red;
-    background-color: $codebg;
+    border-left: 4px solid $color-red;
+    background-color: $color-codebg;
     position: relative;
-    border-bottom-right-radius: $radius;
-    border-top-right-radius: $radius;
+    border-bottom-right-radius: $size-radius;
+    border-top-right-radius: $size-radius;
 
     &:before {
       position: absolute;
       top: 14px;
       left: -12px;
-      background-color: $red;
+      background-color: $color-red;
       color: #fff;
       content: '!';
       width: 20px;
@@ -278,7 +278,7 @@
       text-align: center;
       line-height: 20px;
       font-weight: bold;
-      font-family: $logo-font;
+      font-family: $fontFamily-logo;
       font-size: 14px;
     }
   }
@@ -290,7 +290,7 @@
 }
 
 .footer {
-  color: $light;
+  color: $color-light;
   margin-top: 2em;
   padding-top: 2em;
   border-top: 1px solid #e5e5e5;
@@ -341,7 +341,7 @@
   .nav-link {
     padding-bottom: 1px;
     &:hover, &.current {
-      border-bottom: 2px solid $primary;
+      border-bottom: 2px solid $color-primary;
     }
   }
 

website/themes/uppy/source/css/_settings.scss

@@ -1,25 +1,24 @@
 // font faces
-$body-font: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-$logo-font : 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-$code-font : 'Roboto Mono', Monaco, courier, monospace;
+$fontFamily-body : 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+$fontFamily-logo : 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+$fontFamily-code : 'Roboto Mono', Monaco, courier, monospace;
 
 // font sizes
-$body-font-size : 15px;
-$code-font-size : .8em;
+$fontSize-body : 15px;
+$fontSize-code : .8em;
 
 // colors
-$blue     : #01A5E1;
-$dark     : #2c3e50;
-$medium   : #34495e;
-$light    : #7f8c8d;
-$green    : #42b983;
-$border   : #dddddd;
-$codebg   : #f8f8f8;
-$red      : #ff6666;
-$darkgray : #34393A;
-$primary  : $blue;
-
-$radius : 2px;
+$color-blue       : #01A5E1;
+$color-dark       : #2c3e50;
+$color-medium     : #34495e;
+$color-light      : #7f8c8d;
+$color-green      : #42b983;
+$color-border     : #dddddd;
+$color-codebg     : #f8f8f8;
+$color-red        : #ff6666;
+$color-darkgray   : #34393A;
+$color-primary    : $color-blue;
 
 // sizes
-$header-height: 40px;
+$size-radius : 2px;
+$size-headerHeight: 40px;

website/themes/uppy/source/css/_syntax.scss

@@ -40,7 +40,7 @@ pre {
   .symbol .string,
   .value,
   .regexp {
-    color: $green;
+    color: $color-green;
   }
 
   .title {
@@ -71,7 +71,7 @@ pre {
   .apache .cbracket,
   .tex .command,
   .prompt {
-    color: $green;
+    color: $color-green;
   }
 
   .comment,