Enable ColorVariable in scss-lint

.scss-lint.yml

@@ -30,7 +30,7 @@ linters:
   # variable declarations. They should be referred to via variables everywhere
   # else.
   ColorVariable:
-    enabled: false
+    enabled: true
   
   # Which form of comments to prefer in CSS.
   Comment:

app/assets/stylesheets/framework/avatar.scss

@@ -8,7 +8,7 @@
   float: left;
   margin-right: 15px;
   border-radius: $avatar_radius;
-  border: 1px solid rgba(0, 0, 0, .1);
+  border: 1px solid $avatar-border;
   &.s16 { @include avatar-size(16px, 6px); }
   &.s20 { @include avatar-size(20px, 7px); }
   &.s24 { @include avatar-size(24px, 8px); }

app/assets/stylesheets/framework/blocks.scss

@@ -41,7 +41,7 @@
   }
 
   &.white {
-    background-color: white;
+    background-color: $white-light;
   }
 
   &.top-block {
@@ -158,7 +158,7 @@
 
     p {
       padding: 0 $gl-padding;
-      color: #5c5d5e;
+      color: $gl-text-color-dark;
     }
   }
 

app/assets/stylesheets/framework/buttons.scss

@@ -68,23 +68,23 @@
 }
 
 @mixin btn-green {
-  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff);
+  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, $white-light);
 }
 
 @mixin btn-blue {
-  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff);
+  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, $white-light);
 }
 
 @mixin btn-blue-medium {
-  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff);
+  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, $white-light);
 }
 
 @mixin btn-orange {
-  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff);
+  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, $white-light);
 }
 
 @mixin btn-red {
-  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff);
+  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, $white-light);
 }
 
 @mixin btn-gray {
@@ -289,8 +289,8 @@
   .active {
     box-shadow: $gl-btn-active-background;
 
-    border: 1px solid #c6cacf !important;
-    background-color: #e4e7ed !important;
+    border: 1px solid $border-white-dark !important;
+    background-color: $btn-active-gray-light !important;
   }
 }
 
@@ -345,13 +345,13 @@
 
 .btn-static {
   background-color: $background-color !important;
-  border: 1px solid lightgrey;
+  border: 1px solid $border-gray-light;
   cursor: default;
 
   &:active {
-    -moz-box-shadow: inset 0 0 0 white;
-    -webkit-box-shadow: inset 0 0 0 white;
-    box-shadow: inset 0 0 0 white;
+    -moz-box-shadow: inset 0 0 0 $white-light;
+    -webkit-box-shadow: inset 0 0 0 $white-light;
+    box-shadow: inset 0 0 0 $white-light;
   }
 }
 

app/assets/stylesheets/framework/calendar.scss

@@ -28,13 +28,13 @@
 .user-contrib-cell {
   &:hover {
     cursor: pointer;
-    stroke: #000;
+    stroke: $black;
   }
 }
 
 .user-contrib-text {
   font-size: 12px;
-  fill: #959494;
+  fill: $calendar-user-contrib-text;
 }
 
 .calendar-hint {

app/assets/stylesheets/framework/callout.scss

@@ -25,25 +25,25 @@
 
 /* Variations */
 .bs-callout-danger {
-  background-color: #fdf7f7;
-  border-color: #eed3d7;
-  color: #b94a48;
+  background-color: $callout-danger-bg;
+  border-color: $callout-danger-border;
+  color: $callout-danger-color;
 }
 
 .bs-callout-warning {
-  background-color: #faf8f0;
-  border-color: #faebcc;
-  color: #8a6d3b;
+  background-color: $callout-warning-bg;
+  border-color: $callout-warning-border;
+  color: $callout-warning-color;
 }
 
 .bs-callout-info {
-  background-color: #f4f8fa;
-  border-color: #bce8f1;
-  color: #34789a;
+  background-color: $callout-info-bg;
+  border-color: $callout-info-border;
+  color: $callout-info-color;
 }
 
 .bs-callout-success {
-  background-color: #dff0d8;
-  border-color: #5ca64d;
-  color: #3c763d;
+  background-color: $callout-success-bg;
+  border-color: $callout-success-border;
+  color: $callout-success-color;
 }

app/assets/stylesheets/framework/common.scss

 /** COLORS **/
-.cgray { color: $gl-gray; }
-.clgray { color: #bbb; }
-.cred { color: $gl-text-red; }
-.cgreen { color: $gl-text-green; }
-.cdark { color: #444; }
+.cgray { color: $common-gray; }
+.clgray { color: $common-gray-light; }
+.cred { color: $common-red; }
+.cgreen { color: $common-green; }
+.cdark { color: $common-gray-dark; }
 
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
@@ -28,11 +28,11 @@
 .center { text-align: center; }
 
 .underlined-link { text-decoration: underline; }
-.hint { font-style: italic; color: #999; }
-.light { color: $gl-gray; }
+.hint { font-style: italic; color: $hint-color; }
+.light { color: $common-gray; }
 
 .slead {
-  color: $gl-gray;
+  color: $common-gray;
   font-size: 15px;
   margin-bottom: 12px;
   font-weight: normal;
@@ -52,10 +52,10 @@ pre {
   }
 
   &.well-pre {
-    border: 1px solid #eee;
+    border: 1px solid $well-pre-bg;
     background: $gray-light;
     border-radius: 0;
-    color: #555;
+    color: $well-pre-color;
   }
 }
 
@@ -87,14 +87,14 @@ table a code {
 .loading {
   margin: 20px auto;
   height: 40px;
-  color: #555;
+  color: $loading-color;
   font-size: 32px;
   text-align: center;
 }
 
 span.update-author {
   display: block;
-  color: #999;
+  color: $update-author-color;
   font-weight: normal;
   font-style: italic;
 
@@ -105,7 +105,7 @@ span.update-author {
 }
 
 .user-mention {
-  color: #2fa0bb;
+  color: $user-mention-color;
   font-weight: bold;
 }
 
@@ -114,7 +114,7 @@ span.update-author {
 }
 
 p.time {
-  color: #999;
+  color: $time-color;
   font-size: 90%;
   margin: 30px 3px 3px 2px;
 }
@@ -150,7 +150,7 @@ li.note {
 
 .project_member_show {
   td:first-child {
-    color: #aaa;
+    color: $project-member-show-color;
   }
 }
 
@@ -176,7 +176,7 @@ li.note {
   margin-top: 40px;
 
   pre {
-    background: white;
+    background: $white-light;
     border: none;
     font-size: 12px;
   }
@@ -184,12 +184,12 @@ li.note {
 
 .error-message {
   padding: 10px;
-  background: #c67;
+  background: $error-bg;
   margin: 0;
-  color: #fff;
+  color: $white-light;
 
   a {
-    color: #fff;
+    color: $white-light;
     text-decoration: underline;
   }
 }
@@ -197,22 +197,22 @@ li.note {
 .browser-alert {
   padding: 10px;
   text-align: center;
-  background: #c67;
-  color: #fff;
+  background: $error-bg;
+  color: $white-light;
   font-weight: bold;
 
   a {
-    color: #fff;
+    color: $white-light;
     text-decoration: underline;
   }
 }
 
 .warning_message {
-  border-left: 4px solid #ed9;
-  color: #b90;
+  border-left: 4px solid $warning-message-border;
+  color: $warning-message-color;
   padding: 10px;
   margin-bottom: 10px;
-  background: #ffffe6;
+  background: $warning-message-bg;
   padding-left: 20px;
 
   &.centered {
@@ -222,7 +222,7 @@ li.note {
 
 .gitlab-promo {
   a {
-    color: #aaa;
+    color: $gl-promo-color;
     margin-right: 30px;
   }
 }
@@ -245,7 +245,7 @@ li.note {
         position: relative;
         top: 2px;
         left: 5px;
-        color: #666;
+        color: $control-group-descr-color;
       }
     }
   }
@@ -270,7 +270,7 @@ img.emoji {
 
 table {
   td.permission-x {
-    background: #d9edf7 !important;
+    background: $table-permission-x-bg !important;
     text-align: center;
   }
 }
@@ -323,13 +323,13 @@ table {
 
   .username {
     font-size: 18px;
-    color: #666;
+    color: $username-color;
     margin-top: 8px;
   }
 
   .description {
     font-size: $gl-font-size;
-    color: #666;
+    color: $description-color;
     margin-top: 8px;
   }
 }
@@ -339,7 +339,7 @@ table {
 
   .profiler-button,
   .profiler-controls {
-    border-color: #eee !important;
+    border-color: $profiler-border !important;
   }
 }
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -376,7 +376,7 @@
     position: absolute;
     top: 10px;
     right: 20px;
-    color: #c7c7c7;
+    color: $dropdown-input-fa-color;
     font-size: 12px;
     pointer-events: none;
   }
@@ -529,7 +529,7 @@
     .ui-datepicker-calendar {
       .ui-state-hover,
       .ui-state-active {
-        color: #fff;
+        color: $white-light;
         border: 0;
       }
     }

app/assets/stylesheets/framework/files.scss

@@ -59,10 +59,10 @@
   }
 
   .file-content {
-    background: #fff;
+    background: $white-light;
 
     &.image_file {
-      background: #eee;
+      background: $file-image-bg;
       text-align: center;
 
       img {
@@ -84,8 +84,8 @@
     }
 
     &.blob-no-preview {
-      background: #eee;
-      text-shadow: 0 1px 2px #fff;
+      background: $blob-bg;
+      text-shadow: 0 1px 2px $white-light;
       padding: 100px 0;
     }
 
@@ -99,7 +99,7 @@
       }
 
       tr {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid $blame-border;
       }
 
       td {
@@ -120,7 +120,7 @@
 
       td.line-numbers {
         float: none;
-        border-left: 1px solid #ddd;
+        border-left: 1px solid $blame-line-numbers-border;
 
         i {
           float: none;
@@ -134,7 +134,7 @@
     }
 
     &.logs {
-      background: #eee;
+      background: $logs-bg;
       max-height: 700px;
       overflow-y: auto;
 
@@ -143,14 +143,14 @@
         padding: 10px 0;
         border-left: 1px solid $border-color;
         margin-bottom: 0;
-        background: white;
+        background: $white-light;
 
         li {
-          color: #888;
+          color: $logs-li-color;
 
           p {
             margin: 0;
-            color: #333;
+            color: $logs-p-color;
             line-height: 24px;
             padding-left: 10px;
           }

app/assets/stylesheets/framework/forms.scss

@@ -7,9 +7,9 @@ input {
 }
 
 input[type='text'].danger {
-  background: #f2dede!important;
-  border-color: #d66;
-  text-shadow: 0 1px 1px #fff;
+  background: $input-danger-bg !important;
+  border-color: $input-danger-border;
+  text-shadow: 0 1px 1px $white-light;
 }
 
 .datetime-controls {
@@ -159,7 +159,7 @@ label {
   }
 
   .input-group-addon {
-    background-color: #f7f8fa;
+    background-color: $input-group-addon-bg;
   }
 
   .input-group-addon:not(:first-child):not(:last-child) {
@@ -181,7 +181,7 @@ label {
     border: 1px solid $green-normal;
 
     &:focus {
-      box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal;
+      box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-normal;
       border: 0 none;
     }
   }
@@ -190,7 +190,7 @@ label {
     border: 1px solid $red-normal;
 
     &:focus {
-      box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 rgba(210, 40, 82, 0.6);
+      box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
       border: 0 none;
     }
   }

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -85,37 +85,57 @@
 }
 
 $theme-charcoal: #3d454d;
+$theme-charcoal-light: #485157;
 $theme-charcoal-dark: #383f45;
 $theme-charcoal-text: #b9bbbe;
 
+$theme-blue-light: #becde9;
 $theme-blue: #2980b9;
+$theme-blue-dark: #1970a9;
+$theme-blue-darker: #096099;
+
+$theme-graphite-lighter: #ccc;
+$theme-graphite-light: #777;
 $theme-graphite: #666;
+$theme-graphite-dark: #555;
+
+$theme-gray-light: #979797;
 $theme-gray: #373737;
+$theme-gray-dark: #272727;
+$theme-gray-darker: #222;
+
+$theme-green-light: #adc;
 $theme-green: #019875;
+$theme-green-dark: #018865;
+$theme-green-darker: #017855;
+
+$theme-violet-light: #98c;
 $theme-violet: #548;
+$theme-violet-dark: #436;
+$theme-violet-darker: #325;
 
 body {
   &.ui_blue {
-    @include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
+    @include gitlab-theme($theme-blue-light, $theme-blue, $theme-blue-dark, $theme-blue-darker);
   }
 
   &.ui_charcoal {
-    @include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark);
+    @include gitlab-theme($theme-charcoal-text, $theme-charcoal-light, $theme-charcoal, $theme-charcoal-dark);
   }
 
   &.ui_graphite {
-    @include gitlab-theme(#ccc, #777, $theme-graphite, #555);
+    @include gitlab-theme($theme-graphite-lighter, $theme-graphite-light, $theme-graphite, $theme-graphite-dark);
   }
 
   &.ui_gray {
-    @include gitlab-theme(#979797, $theme-gray, #272727, #222);
+    @include gitlab-theme($theme-gray-light, $theme-gray, $theme-gray-dark, $theme-gray-darker);
   }
 
   &.ui_green {
-    @include gitlab-theme(#adc, $theme-green, #018865, #017855);
+    @include gitlab-theme($theme-green-light, $theme-green, $theme-green-dark, $theme-green-darker);
   }
 
   &.ui_violet {
-    @include gitlab-theme(#98c, $theme-violet, #436, #325);
+    @include gitlab-theme($theme-violet-light, $theme-violet, $theme-violet-dark, $theme-violet-darker);
   }
 }

app/assets/stylesheets/framework/header.scss

@@ -8,7 +8,7 @@ header {
 
   &.navbar-empty {
     height: $header-height;
-    background: #fff;
+    background: $white-light;
     border-bottom: 1px solid $btn-gray-hover;
 
     .center-logo {
@@ -76,7 +76,7 @@ header {
       }
 
       .navbar-toggle {
-        color: #666;
+        color: $nav-toggle-gray;
         margin: 6px 0;
         border-radius: 0;
         position: absolute;

app/assets/stylesheets/framework/issue_box.scss

@@ -20,7 +20,7 @@
   display: block;
   float: left;
   margin-right: 10px;
-  color: #fff;
+  color: $white-light;
   font-size: $gl-font-size;
   line-height: 25px;
 
@@ -37,10 +37,10 @@
   }
 
   &.status-box-expired {
-    background: #cea61b;
+    background-color: $issue-status-expired;
   }
 
   &.status-box-upcoming {
-    background: #8f8f8f;
+    background: $issue-box-upcoming-bg;
   }
 }

app/assets/stylesheets/framework/jquery.scss

@@ -4,13 +4,13 @@
 
   &.ui-datepicker,
   &.ui-datepicker-inline {
-    border: 1px solid #ddd;
+    border: 1px solid $jq-ui-border;
     padding: 10px;
     width: 270px;
 
     .ui-datepicker-header {
-      background: #fff;
-      border-color: #ddd;
+      background: $white-light;
+      border-color: $jq-ui-border;
 
       .ui-datepicker-prev,
       .ui-datepicker-next {
@@ -39,7 +39,7 @@
   }
 
   &.ui-autocomplete {
-    border-color: #ddd;
+    border-color: $jq-ui-border;
     padding: 0;
     margin-top: 2px;
     z-index: 1001;
@@ -50,9 +50,9 @@
   }
 
   .ui-state-default {
-    border: 1px solid #fff;
-    background: #fff;
-    color: #777;
+    border: 1px solid $white-light;
+    background: $white-light;
+    color: $jq-ui-default-color;
   }
 
   .ui-state-highlight {
@@ -66,7 +66,7 @@
     .ui-state-focus {
       border: 1px solid $gl-primary;
       background: $gl-primary;
-      color: #fff;
+      color: $white-light;
     }
   }
 }

app/assets/stylesheets/framework/layout.scss

@@ -6,7 +6,7 @@ html {
 
 body {
   &.navless {
-    background-color: white !important;
+    background-color: $white-light !important;
   }
 }
 

app/assets/stylesheets/framework/lists.scss

@@ -11,8 +11,8 @@
   > li {
     padding: 10px 15px;
     min-height: 20px;
-    border-bottom: 1px solid #eee;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid $list-border-light;
+    border-bottom: 1px solid $list-border;
 
     &::after {
       content: " ";
@@ -21,7 +21,7 @@
     }
 
     &.disabled {
-      color: #888;
+      color: $list-text-disabled-color;
     }
 
     &.unstyled {
@@ -31,9 +31,9 @@
     }
 
     &.warning-row {
-      background-color: #fcf8e3;
-      border-color: #faebcc;
-      color: #8a6d3b;
+      background-color: $list-warning-row-bg;
+      border-color: $list-warning-row-border;
+      color: $list-warning-row-color;
     }
 
     &.smoke { background-color: $background-color; }

app/assets/stylesheets/framework/markdown_area.scss

@@ -73,7 +73,7 @@
 }
 
 .referenced-users {
-  color: #4c4e54;
+  color: $gl-header-color;
   padding-top: 10px;
 }
 
@@ -85,8 +85,8 @@
 
 .markdown-area {
   border-radius: 0;
-  background: #fff;
-  border: 1px solid #ddd;
+  background: $white-light;
+  border: 1px solid $md-area-border;
   min-height: 140px;
   max-height: 500px;
   padding: 5px;
@@ -108,7 +108,7 @@
 
   hr {
     // Darken 'whitesmoke' a bit to make it more visible in note bodies
-    border-color: darken(#f5f5f5, 8%);
+    border-color: darken($gray-normal, 8%);
     margin: 10px 0;
   }
 
@@ -135,7 +135,7 @@
 .toolbar-btn {
   float: left;
   padding: 0 5px;
-  color: #959494;
+  color: $note-toolbar-color;
   background: transparent;