Deprecate and replace $gl-gray- variables

Deprecate $gl-gray- variables and replace with $gray- variables to syncronize the use of gray variables.

Deprecate and replace $gl-gray- variables
Deprecate $gl-gray- variables and replace with $gray- variables to syncronize the use of gray variables.
e62fc40c · jeldergl · 637169e7 · e62fc40c · e62fc40c · e62fc40c
Commit e62fc40c authored Aug 19, 2020 by jeldergl
37 changed files
--- a/app/assets/stylesheets/components/rich_content_editor.scss
+++ b/app/assets/stylesheets/components/rich_content_editor.scss
@@ -6,7 +6,7 @@

  // Toolbar buttons
  .tui-editor-defaultUI-toolbar .toolbar-button {
-    color: $gl-gray-600;
+    color: $gray-500;
    border: 0;

    &:hover,

--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -229,7 +229,7 @@
  }

  &.btn-icon {
-    color: $gl-gray-700;
+    color: $gray-700;
  }

  .fa-caret-down,
@@ -394,7 +394,7 @@
 }

 .clone-dropdown-btn a {
-  color: $gl-gray-700;
+  color: $gray-700;

  &:hover {
    text-decoration: none;

--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -74,7 +74,7 @@

 .hint {
  font-style: italic;
-  color: $gl-gray-200;
+  color: $gray-200;
 }

 .light { color: $gl-text-color; }
@@ -162,13 +162,13 @@ table {
 .loading {
  margin: 20px auto;
  height: 40px;
-  color: $gl-gray-700;
+  color: $gray-700;
  font-size: 32px;
  text-align: center;
 }

 p.time {
-  color: $gl-gray-200;
+  color: $gray-200;
  font-size: 90%;
  margin: 30px 3px 3px 2px;
 }
@@ -246,7 +246,7 @@ li.note {

 .gitlab-promo {
  a {
-    color: $gl-gray-350;
+    color: $gray-300;
    margin-right: 30px;
  }
 }

--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -410,7 +410,7 @@
      flex-direction: column;

      .reference {
-        color: $gl-gray-400;
+        color: $gray-300;
        margin-top: $gl-padding-4;
      }
    }
@@ -666,25 +666,25 @@
  width: 100%;
  min-height: 30px;
  padding: 0 7px;
-  color: $gl-gray-700;
+  color: $gray-700;
  line-height: 30px;
  border: 1px solid $dropdown-divider-bg;
  border-radius: 2px;
  outline: 0;

  &:focus {
-    color: $gl-gray-700;
+    color: $gray-700;
    border-color: $blue-300;
    box-shadow: 0 0 4px $dropdown-input-focus-shadow;

    ~ .fa {
-      color: $gl-gray-700;
+      color: $gray-700;
    }
  }

  &:hover {
    ~ .fa {
-      color: $gl-gray-700;
+      color: $gray-700;
    }
  }
 }
@@ -1070,7 +1070,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
      color: $dropdown-title-btn-color;

      &:hover {
-        color: $gl-gray-400;
+        color: $gray-300;
      }
    }
  }

--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -183,7 +183,7 @@

        &.line-numbers {
          float: none;
-          border-left: 1px solid $gl-gray-100;
+          border-left: 1px solid $gray-100;

          i {
            float: none;

--- a/app/assets/stylesheets/framework/job_log.scss
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -17,7 +17,7 @@
 }

 .line-number {
-  color: $gl-gray-500;
+  color: $gray-500;
  padding: 0 $gl-padding-8;
  min-width: $job-line-number-width;
  margin-left: -$job-line-number-margin;
@@ -28,7 +28,7 @@
  &:active,
  &:visited {
    text-decoration: underline;
-    color: $gl-gray-500;
+    color: $gray-500;
  }
 }

@@ -43,7 +43,7 @@
 }

 .log-duration-badge {
-  background: $gl-gray-400;
+  background: $gray-300;
 }

 .loader-animation {

--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -300,7 +300,7 @@
  }

  .group-path {
-    color: $gl-gray-400;
+    color: $gray-300;
  }
 }

@@ -310,7 +310,7 @@
  }

  .project-path {
-    color: $gl-gray-400;
+    color: $gray-300;
  }
 }

@@ -332,7 +332,7 @@

 .namespace-result {
  .namespace-kind {
-    color: $gl-gray-350;
+    color: $gray-300;
    font-weight: $gl-font-weight-normal;
  }


--- a/app/assets/stylesheets/framework/stacked_progress_bar.scss
+++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss
@@ -37,7 +37,7 @@

  .status-neutral {
    background-color: $gray-100;
-    color: $gl-gray-dark;
+    color: $gray-900;

    &:hover {
      background-color: $gray-200;

--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -84,7 +84,7 @@
    padding: 3px 5px;
    font-size: 11px;
    line-height: 10px;
-    color: $gl-gray-700;
+    color: $gray-700;
    vertical-align: middle;
    background-color: $gray-10;
    border-width: 1px;

--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -104,15 +104,6 @@ $t-gray-a-04: rgba($black, 0.04) !default;
 $t-gray-a-06: rgba($black, 0.06) !default;
 $t-gray-a-08: rgba($black, 0.08) !default;

-$gl-gray-100: #ddd !default;
-$gl-gray-200: #ccc !default;
-$gl-gray-350: #aaa !default;
-$gl-gray-400: #999 !default;
-$gl-gray-500: #777 !default;
-$gl-gray-600: #666 !default;
-$gl-gray-700: #555 !default;
-$gl-gray-800: #333 !default;
-
 $green-50: #ecf4ee !default;
 $green-100: #c3e6cd !default;
 $green-200: #91d4a8 !default;
@@ -357,8 +348,6 @@ $gl-text-color-inverted: $white;
 $gl-text-color-secondary-inverted: rgba($white, 0.85);
 $gl-text-color-disabled: $gray-400;
 $gl-grayish-blue: #7f8fa4;
-$gl-gray-dark: #313236;
-$gl-gray-light: #5c5c5c;
 $gl-header-color: #4c4e54;
 $gl-font-size-12: 12px;
 $gl-font-size-14: 14px;

--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -35,7 +35,7 @@

 .zen-control {
  padding: 0;
-  color: $gl-gray-700;
+  color: $gray-700;
  background: none;
  border: 0;
 }

--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -7,12 +7,12 @@ img {

 p.details {
  font-style: italic;
-  color: $gl-gray-500;
+  color: $gray-500;
 }

 .footer > p {
  font-size: small;
-  color: $gl-gray-500;
+  color: $gray-500;
 }

 pre.commit-message {

--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1080,7 +1080,7 @@ $ide-commit-header-height: 48px;
  max-width: 24px;
  padding: 0;
  margin: 0 ($grid-size / 2);
-  color: var(--ide-text-color-secondary, $gl-gray-light);
+  color: var(--ide-text-color-secondary, $gray-600);

  &:first-child {
    margin-left: 0;

--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -23,7 +23,7 @@

    .bar {
      height: 4px;
-      background-color: $gl-gray-100;
+      background-color: $gray-100;
    }

    .count {
@@ -34,7 +34,7 @@
  .graph-separator {
    width: $graph-separator-width;
    height: 18px;
-    background-color: $gl-gray-100;
+    background-color: $gray-100;
  }
 }


--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -124,7 +124,7 @@
      background-color: none;
      border: 0;
      font-weight: bold;
-      color: $gl-gray-500;
+      color: $gray-500;
    }
  }
 }

--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -102,7 +102,7 @@

    .file-mode-changed {
      padding: 10px;
-      color: $gl-gray-500;
+      color: $gray-500;
    }

    .suppressed-container {
@@ -181,7 +181,7 @@

      .swipe-wrap {
        overflow: hidden;
-        border-right: 1px solid $gl-gray-400;
+        border-right: 1px solid $gray-300;
        position: absolute;
        display: block;
        top: 13px;
@@ -190,7 +190,7 @@
        &.left-oriented {
          /* only for commit view (different swipe viewer) */
          border-right: 0;
-          border-left: 1px solid $gl-gray-400;
+          border-left: 1px solid $gray-300;
        }
      }


--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -83,7 +83,7 @@

 .x-axis path,
 .y-axis path {
-  stroke: $gl-gray-350;
+  stroke: $gray-300;
 }

 .label-x-axis-line,
@@ -93,7 +93,7 @@

 .y-axis {
  line {
-    stroke: $gl-gray-350;
+    stroke: $gray-300;
    stroke-width: 1;
  }
 }
@@ -117,7 +117,7 @@
 }

 .selected-metric-line {
-  stroke: $gl-gray-dark;
+  stroke: $gray-900;
  stroke-width: 1;
 }


--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -94,7 +94,7 @@
        border: 0;
        background: $gray-light;
        border-radius: 0;
-        color: $gl-gray-500;
+        color: $gray-500;
        overflow: hidden;
      }

@@ -111,7 +111,7 @@
    }

    .event-note-icon {
-      color: $gl-gray-500;
+      color: $gray-500;
      float: left;
      font-size: $gl-font-size;
      margin-right: 5px;

--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -43,7 +43,7 @@

  .y-axis-label {
    line {
-      stroke: $gl-gray-350;
+      stroke: $gray-300;
    }

    text {

--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -52,7 +52,7 @@
 .save-group-loader {
  margin-top: $gl-padding-50;
  margin-bottom: $gl-padding-50;
-  color: $gl-gray-700;
+  color: $gray-700;
 }

 .group-nav-container .nav-controls {

--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
 .shortcut-mappings {
  font-size: 12px;
-  color: $gl-gray-700;
+  color: $gray-700;

  tbody:first-child tr:first-child {
    padding-top: 0;
@@ -22,7 +22,7 @@

  .shortcut {
    padding-right: 10px;
-    color: $gl-gray-400;
+    color: $gray-300;
    text-align: right;
    white-space: nowrap;
  }

--- a/app/assets/stylesheets/pages/incident_management_list.scss
+++ b/app/assets/stylesheets/pages/incident_management_list.scss
@@ -108,7 +108,7 @@
    border-bottom-width: 0;

    .gl-tab-nav-item {
-      color: $gl-gray-600;
+      color: $gray-500;

      > .gl-tab-counter-badge {
        color: inherit;

--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -64,7 +64,7 @@ $mr-widget-min-height: 69px;
  background-color: $gray-light;

  &.clickable:hover {
-    background-color: $gl-gray-100;
+    background-color: $gray-100;
    cursor: pointer;
  }
 }
@@ -311,7 +311,7 @@ $mr-widget-min-height: 69px;

    .bold {
      font-weight: $gl-font-weight-bold;
-      color: $gl-gray-light;
+      color: $gray-600;
      margin-left: 10px;
    }

@@ -980,7 +980,7 @@ $mr-widget-min-height: 69px;
    opacity: 0.65;

    &:hover {
-      color: $gl-gray-500;
+      color: $gray-500;
      text-decoration: none;
    }
  }

--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -186,8 +186,8 @@ $note-form-margin-left: 72px;
      padding: $gl-padding;

      .dummy-avatar {
-        background-color: $gl-gray-100;
-        border: 1px solid darken($gl-gray-100, 25%);
+        background-color: $gray-100;
+        border: 1px solid darken($gray-100, 25%);
      }

      .note-headline-light,
@@ -835,7 +835,7 @@ $note-form-margin-left: 72px;
  &[disabled] {
    background: $white;
    border-color: $gray-200;
-    color: $gl-gray-400;
+    color: $gray-300;
    cursor: not-allowed;
  }
 }

--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -353,7 +353,7 @@
 .save-project-loader {
  margin-top: 50px;
  margin-bottom: 50px;
-  color: $gl-gray-700;
+  color: $gray-700;
 }

 .transfer-project .select2-container {
@@ -429,7 +429,7 @@

  > li + li::before {
    padding: 0 3px;
-    color: $gl-gray-400;
+    color: $gray-300;
  }

  a {
@@ -1444,7 +1444,7 @@ pre.light-well {

 .project-filters {
  .btn svg {
-    color: $gl-gray-700;
+    color: $gray-700;
  }

  .button-filter-group {

--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -301,7 +301,7 @@
  }

  .loading-metrics .metrics-load-spinner {
-    color: $gl-gray-700;
+    color: $gray-700;
  }

  .metrics-list {

--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -127,7 +127,7 @@
      border: 0;
      background: $gray-light;
      border-radius: 0;
-      color: $gl-gray-500;
+      color: $gray-500;
      margin: 0 20px;
      overflow: hidden;
    }
@@ -191,7 +191,7 @@

    .todo-body {
      margin: 0;
-      border-left: 2px solid $gl-gray-100;
+      border-left: 2px solid $gray-100;
      padding-left: 10px;
    }
  }

--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -6,7 +6,7 @@

  .example {
    padding: 15px;
-    border: 1px dashed $gl-gray-100;
+    border: 1px dashed $gray-100;
    margin-bottom: 15px;

    &::before {

--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -11,15 +11,15 @@
  height: $performance-bar-height;
  background: $black;
  line-height: $performance-bar-height;
-  color: $gl-gray-400;
+  color: $gray-300;

  select {
-    color: $gl-gray-400;
+    color: $gray-300;
    width: 200px;
  }

  input {
-    color: $gl-gray-400;
+    color: $gray-300;
    width: $input-short-width - 60px;
  }

@@ -61,7 +61,7 @@
    padding: 4px 6px;
    font-family: Consolas, 'Liberation Mono', Courier, monospace;
    line-height: 1;
-    color: $gl-gray-100;
+    color: $gray-100;
    border-radius: 3px;
    box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
      inset 0 1px 2px $perf-bar-bucket-box-shadow-to;

--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -11,15 +11,6 @@ $gray-800: #f2f2f2;
 $gray-900: #fafafa;
 $gray-950: #fff;

-$gl-gray-100: #333;
-$gl-gray-200: #555;
-$gl-gray-350: #666;
-$gl-gray-400: #777;
-$gl-gray-500: #999;
-$gl-gray-600: #aaa;
-$gl-gray-700: #ccc;
-$gl-gray-800: #ddd;
-
 $green-50: #072b15;
 $green-100: #0a4020;
 $green-200: #0e5a2d;

--- a/app/assets/stylesheets/vendors/tribute.scss
+++ b/app/assets/stylesheets/vendors/tribute.scss
 .tribute-container {
  background: $white;
-  border: 1px solid $gl-gray-100;
+  border: 1px solid $gray-100;
  border-radius: $border-radius-base;
  box-shadow: 0 0 5px $issue-boards-card-shadow;
  color: $black;
@@ -22,7 +22,7 @@
    white-space: nowrap;

    small {
-      color: $gl-gray-500;
+      color: $gray-500;
    }

    &.highlight {

--- a/ee/app/assets/stylesheets/components/batch_comments/draft_note.scss
+++ b/ee/app/assets/stylesheets/components/batch_comments/draft_note.scss
@@ -28,8 +28,8 @@ button[disabled] {
  &:focus,
  &:hover {
    .gl-badge {
-      background: $gl-gray-100;
-      color: $gl-gray-500;
+      background: $gray-100;
+      color: $gray-500;
    }
  }
 }

--- a/ee/app/assets/stylesheets/pages/ee_start_trial.scss
+++ b/ee/app/assets/stylesheets/pages/ee_start_trial.scss
@@ -86,11 +86,11 @@
    margin-top: 10px;
    text-align: center;
    font-size: 18px;
-    color: $gl-gray-light;
+    color: $gray-600;

    &:hover {
      text-decoration: none;
-      color: $gl-gray-dark;
+      color: $gray-900;
    }
  }
 }
--- a/ee/app/assets/stylesheets/pages/feature_flags.scss
+++ b/ee/app/assets/stylesheets/pages/feature_flags.scss
@@ -14,7 +14,7 @@ $label-blue: #428bca;
 .clear-search-input {
  position: absolute;
  z-index: 10;
-  fill: $gl-gray-400;
+  fill: $gray-300;
 }

 .seach-icon-input {

--- a/ee/app/assets/stylesheets/pages/groups.scss
+++ b/ee/app/assets/stylesheets/pages/groups.scss
@@ -29,6 +29,6 @@
  }

  &:not([data-plan]) {
-    svg g { fill: $gl-gray-light; }
+    svg g { fill: $gray-600; }
  }
 }
--- a/ee/app/assets/stylesheets/pages/licenses.scss
+++ b/ee/app/assets/stylesheets/pages/licenses.scss
@@ -2,7 +2,7 @@
  margin-top: 35px;

  .trial-description {
-    color: $gl-gray-light;
+    color: $gray-600;
  }
 }


--- a/ee/changelogs/unreleased/231490-replace-gl-gray-variables-with-gray-variables.yml
+++ b/ee/changelogs/unreleased/231490-replace-gl-gray-variables-with-gray-variables.yml
+---
+title: Deprecate -gray- variables and replace with - variables
+merge_request: 39860
+author:
+type: other