Merge branch 'gt-rename-gray-theme-color-variables-ee' into 'master'

Remove all `$theme-gray-{weight}` variables in favor of `$gray-{weight}`

See merge request gitlab-org/gitlab-ee!9133

app/assets/stylesheets/bootstrap_migration.scss

@@ -225,7 +225,7 @@ h3.popover-header {
 }
 
 .info-well {
-  background: $theme-gray-50;
+  background: $gray-50;
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 4px;

app/assets/stylesheets/framework/animations.scss

@@ -204,7 +204,7 @@ a {
 
   [class^="skeleton-line-"] {
     position: relative;
-    background-color: $theme-gray-100;
+    background-color: $gray-100;
     height: 10px;
     overflow: hidden;
 
@@ -220,10 +220,10 @@ a {
       background-size: cover;
       background-image: linear-gradient(
         to right,
-        $theme-gray-100 0%,
-        $theme-gray-50 20%,
-        $theme-gray-100 40%,
-        $theme-gray-100 100%
+        $gray-100 0%,
+        $gray-50 20%,
+        $gray-100 40%,
+        $gray-100 100%
       );
       height: 10px;
     }

app/assets/stylesheets/framework/awards.scss

@@ -176,7 +176,7 @@
   &.user-authored {
     cursor: default;
     background-color: $gray-light;
-    border-color: $theme-gray-200;
+    border-color: $gray-200;
     color: $gl-text-color-disabled;
 
     gl-emoji {

app/assets/stylesheets/framework/buttons.scss

@@ -483,7 +483,7 @@
 // All disabled buttons, regardless of color, type, etc
 %disabled {
   background-color: $gray-light !important;
-  border-color: $theme-gray-200 !important;
+  border-color: $gray-200 !important;
   color: $gl-text-color-disabled !important;
   opacity: 1 !important;
   cursor: default !important;

app/assets/stylesheets/framework/forms.scss

@@ -261,7 +261,7 @@ label {
     right: 0.8em;
     top: 50%;
     transform: translateY(-50%);
-    color: $theme-gray-600;
+    color: $gray-600;
   }
 }
 

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -282,31 +282,31 @@ body {
 
   &.ui-dark {
     @include gitlab-theme(
-      $theme-gray-200,
-      $theme-gray-500,
-      $theme-gray-700,
-      $theme-gray-800,
-      $theme-gray-900,
+      $gray-200,
+      $gray-500,
+      $gray-700,
+      $gray-800,
+      $gray-900,
       $white-light
     );
   }
 
   &.ui-light {
     @include gitlab-theme(
-      $theme-gray-700,
-      $theme-gray-800,
-      $theme-gray-700,
-      $theme-gray-700,
-      $theme-gray-100,
-      $theme-gray-700
+      $gray-700,
+      $gray-800,
+      $gray-700,
+      $gray-700,
+      $gray-100,
+      $gray-700
     );
 
     .navbar-gitlab {
-      background-color: $theme-gray-100;
+      background-color: $gray-100;
       box-shadow: 0 1px 0 0 $border-color;
 
       .logo-text svg {
-        fill: $theme-gray-900;
+        fill: $gray-900;
       }
 
       .navbar-sub-nav,
@@ -315,7 +315,7 @@ body {
           > a:hover,
           > a:focus,
           > button:hover {
-            color: $theme-gray-900;
+            color: $gray-900;
           }
 
           &.active > a,
@@ -329,8 +329,8 @@ body {
       .container-fluid {
         .navbar-toggler,
         .navbar-toggler:hover {
-          color: $theme-gray-700;
-          border-left: 1px solid $theme-gray-200;
+          color: $gray-700;
+          border-left: 1px solid $gray-200;
         }
       }
     }
@@ -348,7 +348,7 @@ body {
 
       .search-input-wrap {
         .search-icon {
-          fill: $theme-gray-200;
+          fill: $gray-200;
         }
 
         .search-input {
@@ -359,16 +359,16 @@ body {
 
     .nav-sidebar li.active {
       > a {
-        color: $theme-gray-900;
+        color: $gray-900;
       }
 
       svg {
-        fill: $theme-gray-900;
+        fill: $gray-900;
       }
     }
 
     .sidebar-top-level-items > li.active .badge.badge-pill {
-      color: $theme-gray-900;
+      color: $gray-900;
     }
   }
 }

app/assets/stylesheets/framework/icons.scss

@@ -87,8 +87,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: $border-size solid $theme-gray-400;
+  border: $border-size solid $gray-400;
   border-radius: 50%;
   padding: $gl-padding-8 - $border-size;
-  color: $theme-gray-700;
+  color: $gray-700;
 }

app/assets/stylesheets/framework/stacked_progress_bar.scss

@@ -3,7 +3,7 @@
   height: 16px;
   border-radius: 10px;
   overflow: hidden;
-  background-color: $theme-gray-100;
+  background-color: $gray-100;
 
   .status-unavailable,
   .status-green,
@@ -24,7 +24,7 @@
 
   .status-unavailable {
     padding: 0 10px;
-    color: $theme-gray-700;
+    color: $gray-700;
   }
 
   .status-green {
@@ -36,11 +36,11 @@
   }
 
   .status-neutral {
-    background-color: $theme-gray-200;
+    background-color: $gray-200;
     color: $gl-gray-dark;
 
     &:hover {
-      background-color: $theme-gray-300;
+      background-color: $gray-300;
     }
   }
 

app/assets/stylesheets/framework/variables.scss

@@ -98,6 +98,18 @@ $red-800: #8b2615;
 $red-900: #711e11;
 $red-950: #4b140b;
 
+$gray-50: #fafafa;
+$gray-100: #f2f2f2;
+$gray-200: #dfdfdf;
+$gray-300: #cccccc;
+$gray-400: #bababa;
+$gray-500: #a7a7a7;
+$gray-600: #919191;
+$gray-700: #707070;
+$gray-800: #4f4f4f;
+$gray-900: #2e2e2e;
+$gray-950: #1f1f1f;
+
 // GitLab themes
 
 $indigo-50: #f7f7ff;
@@ -112,18 +124,6 @@ $indigo-800: #393982;
 $indigo-900: #292961;
 $indigo-950: #1a1a40;
 
-$theme-gray-50: #fafafa;
-$theme-gray-100: #f2f2f2;
-$theme-gray-200: #dfdfdf;
-$theme-gray-300: #cccccc;
-$theme-gray-400: #bababa;
-$theme-gray-500: #a7a7a7;
-$theme-gray-600: #919191;
-$theme-gray-700: #707070;
-$theme-gray-800: #4f4f4f;
-$theme-gray-900: #2e2e2e;
-$theme-gray-950: #1f1f1f;
-
 $theme-blue-50: #f4f8fc;
 $theme-blue-100: #e6edf5;
 $theme-blue-200: #c8d7e6;

app/assets/stylesheets/framework/variables_overrides.scss

@@ -5,7 +5,7 @@
 
 $secondary: $gray-light;
 $input-disabled-bg: $gray-light;
-$input-border-color: $theme-gray-200;
+$input-border-color: $gray-200;
 $input-color: $gl-text-color;
 $font-family-sans-serif: $regular-font;
 $font-family-monospace: $monospace-font;
@@ -20,7 +20,7 @@ $warning: $orange-500;
 $danger: $red-500;
 $zindex-modal-backdrop: 1040;
 $nav-divider-margin-y: ($grid-size / 2);
-$dropdown-divider-bg: $theme-gray-200;
+$dropdown-divider-bg: $gray-200;
 $dropdown-item-padding-y: 8px;
 $dropdown-item-padding-x: 12px;
 $popover-max-width: 300px;

app/assets/stylesheets/page_bundles/ide.scss

@@ -130,7 +130,7 @@ $ide-commit-header-height: 48px;
   background: none;
   border: 0;
   border-radius: $border-radius-default;
-  color: $theme-gray-900;
+  color: $gray-900;
 
   svg {
     position: relative;
@@ -145,7 +145,7 @@ $ide-commit-header-height: 48px;
   }
 
   &:not([disabled]):hover {
-    background-color: $theme-gray-200;
+    background-color: $gray-200;
   }
 
   &:not([disabled]):focus {
@@ -265,7 +265,7 @@ $ide-commit-header-height: 48px;
 
     .margin {
       background-color: $white-light;
-      border-right: 1px solid $theme-gray-100;
+      border-right: 1px solid $gray-100;
 
       .line-insert {
         border-right: 1px solid $line-added-dark;
@@ -292,7 +292,7 @@ $ide-commit-header-height: 48px;
     .monaco-editor,
     .monaco-editor-background,
     .monaco-editor .inputarea.ime-input {
-      background-color: $theme-gray-50;
+      background-color: $gray-50;
     }
   }
 }
@@ -527,7 +527,7 @@ $ide-commit-header-height: 48px;
     display: block;
     margin-left: auto;
     margin-right: auto;
-    color: $theme-gray-700;
+    color: $gray-700;
   }
 
   .file-status-icon {
@@ -551,7 +551,7 @@ $ide-commit-header-height: 48px;
 
   &:hover,
   &:focus {
-    background: $theme-gray-100;
+    background: $gray-100;
 
     outline: 0;
 
@@ -563,7 +563,7 @@ $ide-commit-header-height: 48px;
   }
 
   &:active {
-    background: $theme-gray-200;
+    background: $gray-200;
   }
 
   &.is-active {
@@ -767,12 +767,12 @@ $ide-commit-header-height: 48px;
 
   &:hover {
     color: $gl-text-color;
-    background-color: $theme-gray-100;
+    background-color: $gray-100;
   }
 
   &:focus {
     color: $gl-text-color;
-    background-color: $theme-gray-200;
+    background-color: $gray-200;
   }
 
   &.active {
@@ -1273,10 +1273,10 @@ $ide-commit-header-height: 48px;
 .ide-entry-dropdown-toggle {
   padding: $gl-padding-4;
   color: $gl-text-color;
-  background-color: $theme-gray-100;
+  background-color: $gray-100;
 
   &:hover {
-    background-color: $theme-gray-200;
+    background-color: $gray-200;
   }
 
   &:active,
@@ -1331,7 +1331,7 @@ $ide-commit-header-height: 48px;
   &:focus {
     outline: 0;
     box-shadow: none;
-    border-color: $theme-gray-200;
+    border-color: $gray-200;
   }
 }
 
@@ -1358,7 +1358,7 @@ $ide-commit-header-height: 48px;
 .ide-commit-editor-header {
   height: 65px;
   padding: 8px 16px;
-  background-color: $theme-gray-50;
+  background-color: $gray-50;
   box-shadow: inset 0 -1px $white-dark;
 }
 
@@ -1370,7 +1370,7 @@ $ide-commit-header-height: 48px;
 .ide-file-icon-holder {
   display: flex;
   align-items: center;
-  color: $theme-gray-700;
+  color: $gray-700;
 }
 
 .file-row:hover,

app/assets/stylesheets/pages/boards.scss

@@ -322,7 +322,7 @@
   padding: $gl-padding;
   background: $white-light;
   border-radius: $border-radius-default;
-  border: 1px solid $theme-gray-200;
+  border: 1px solid $gray-200;
   box-shadow: 0 1px 2px $issue-boards-card-shadow;
   list-style: none;
   line-height: $gl-padding;
@@ -777,7 +777,7 @@
   }
 
   .board-card-info-icon {
-    color: $theme-gray-600;
+    color: $gray-600;
     margin-right: $gl-padding-4;
   }
 

app/assets/stylesheets/pages/builds.scss

@@ -254,7 +254,7 @@
   .trigger-variables-table-cell {
     font-size: $gl-font-size-small;
     line-height: $gl-line-height;
-    border: 1px solid $theme-gray-200;
+    border: 1px solid $gray-200;
     padding: $gl-padding-4 6px;
     width: 50%;
     vertical-align: top;

app/assets/stylesheets/pages/environments.scss

@@ -427,7 +427,7 @@
 
 .prometheus-graph-cursor {
   position: absolute;
-  background: $theme-gray-600;
+  background: $gray-600;
   width: 1px;
 }
 
@@ -469,7 +469,7 @@
       > .arrow::after {
         border-top: 6px solid transparent;
         border-bottom: 6px solid transparent;
-        border-left: 4px solid $theme-gray-50;
+        border-left: 4px solid $gray-50;
       }
 
       .arrow-shadow {
@@ -491,7 +491,7 @@
       > .arrow::after {
         border-top: 6px solid transparent;
         border-bottom: 6px solid transparent;
-        border-right: 4px solid $theme-gray-50;
+        border-right: 4px solid $gray-50;
       }
 
       .arrow-shadow {
@@ -523,8 +523,8 @@
       position: relative;
     }
 
-    > .popover-header {
-      background-color: $theme-gray-50;
+    > .popover-title {
+      background-color: $gray-50;
       border-radius: $border-radius-default $border-radius-default 0 0;
     }
   }
@@ -599,7 +599,7 @@
       }
 
       > text {
-        fill: $theme-gray-600;
+        fill: $gray-600;
         font-size: 10px;
       }
     }
@@ -642,7 +642,7 @@
 }
 
 .prometheus-table-row-highlight {
-  background-color: $theme-gray-100;
+  background-color: $gray-100;
 }
 
 // EE-only

app/assets/stylesheets/pages/graph.scss

@@ -44,7 +44,7 @@
   }
 
   .x-axis-text {
-    fill: $theme-gray-900;
+    fill: $gray-900;
   }
 
   .bar-rect {
@@ -64,7 +64,7 @@
     text {
       font-weight: bold;
       font-size: 12px;
-      fill: $theme-gray-800;
+      fill: $gray-800;
     }
   }
 }
@@ -87,5 +87,5 @@
 
 .animate-flicker {
   animation: flickerAnimation 1.5s infinite;
-  fill: $theme-gray-500;
+  fill: $gray-500;
 }

app/assets/stylesheets/pages/groups.scss

@@ -83,7 +83,7 @@
 
         &:hover {
           background-color: $gray-darker;
-          color: $theme-gray-900;
+          color: $gray-900;
         }
       }
 

app/assets/stylesheets/pages/issuable.scss

@@ -989,7 +989,7 @@
     .sidebar-collapsed-divider {
       line-height: 5px;
       font-size: 12px;
-      color: $theme-gray-700;
+      color: $gray-700;
 
       + .sidebar-collapsed-icon {
         padding-top: 0;

app/assets/stylesheets/pages/labels.scss

@@ -82,7 +82,7 @@
     justify-content: space-between;
     padding: $gl-padding;
     border-radius: $border-radius-default;
-    border: 1px solid $theme-gray-100;
+    border: 1px solid $gray-100;
 
     &:last-child {
       margin-bottom: 0;
@@ -257,7 +257,7 @@
 }
 
 .label-badge {
-  color: $theme-gray-900;
+  color: $gray-900;
   font-weight: $gl-font-weight-normal;
   padding: $gl-padding-4 $gl-padding-8;
   border-radius: $border-radius-default;
@@ -269,7 +269,7 @@
 }
 
 .label-badge-gray {
-  background-color: $theme-gray-100;
+  background-color: $gray-100;
 }
 
 .label-links {
@@ -326,11 +326,11 @@
   }
 
   .label-action {
-    color: $theme-gray-800;
+    color: $gray-800;
     cursor: pointer;
 
     svg {
-      fill: $theme-gray-800;
+      fill: $gray-800;
     }
 
     &:hover {

app/assets/stylesheets/pages/merge_requests.scss

@@ -64,7 +64,7 @@
 
   &::before {
     content: '';
-    border-left: 1px solid $theme-gray-200;
+    border-left: 1px solid $gray-200;
     position: absolute;
     left: 32px;
     top: -17px;
@@ -907,7 +907,7 @@
   }
 
   .btn svg {
-    fill: $theme-gray-700;
+    fill: $gray-700;
   }
 
   .dropdown-menu {
@@ -951,7 +951,7 @@
 
   .coverage {
     font-size: 12px;
-    color: $theme-gray-700;
+    color: $gray-700;
     line-height: initial;
   }
 

app/assets/stylesheets/pages/milestone.scss

@@ -8,7 +8,7 @@ $status-box-line-height: 26px;
   padding: $gl-padding-8;
   margin-top: $gl-padding-8;
   border-radius: $border-radius-default;
-  background-color: $theme-gray-100;
+  background-color: $gray-100;
 
   .milestone {
     border: 0;

app/assets/stylesheets/pages/note_form.scss

@@ -147,7 +147,7 @@
   }
 
   .sidebar-item-value & {
-    fill: $theme-gray-700;
+    fill: $gray-700;
   }
 }
 

app/assets/stylesheets/pages/notes.scss

@@ -5,7 +5,7 @@ $note-form-margin-left: 72px;
 @mixin vertical-line($left) {
   &::before {
     content: '';
-    border-left: 2px solid $theme-gray-100;
+    border-left: 2px solid $gray-100;
     position: absolute;
     top: 0;
     bottom: 0;

app/assets/stylesheets/pages/profiles/preferences.scss

@@ -60,11 +60,11 @@
     }
 
     &.ui-dark {
-      background-color: $theme-gray-900;
+      background-color: $gray-900;
     }
 
     &.ui-light {
-      background-color: $theme-gray-200;
+      background-color: $gray-200;
     }
   }
 

app/assets/stylesheets/pages/projects.scss

@@ -459,7 +459,7 @@
     margin-right: $gl-padding-4;
     margin-bottom: $gl-padding-4;
     color: $gl-text-color-secondary;
-    background-color: $theme-gray-100;
+    background-color: $gray-100;
     line-height: $gl-btn-line-height;
 
     &:hover {
@@ -914,7 +914,7 @@
 }
 
 .repository-language-bar-tooltip-share {
-  color: $theme-gray-400;
+  color: $gray-400;
 }
 
 pre.light-well {

app/assets/stylesheets/pages/reports.scss

@@ -96,7 +96,7 @@
   }
 
   &.neutral svg {
-    color: $theme-gray-700;
+    color: $gray-700;
   }
 
   .ci-status-icon {

app/assets/stylesheets/pages/settings.scss

@@ -338,7 +338,7 @@
 
   .btn-clipboard {
     background-color: $white-light;
-    border: 1px solid $theme-gray-200;
+    border: 1px solid $gray-200;
   }
 
   .deploy-token-help-block {

changelogs/unreleased/gt-rename-gray-theme-color-variables.yml

+---
+title: Remove all `$theme-gray-{weight}` variables in favor of `$gray-{weight}`
+merge_request: 24333
+author: George Tsiolis
+type: other

ee/app/assets/stylesheets/framework/sortable.scss

@@ -27,7 +27,7 @@
 
     &:hover {
       cursor: pointer;
-      background-color: $theme-gray-100;
+      background-color: $gray-100;
     }
 
     &:focus {

ee/app/assets/stylesheets/pages/geo_nodes.scss

@@ -37,7 +37,7 @@
 }
 
 .geo-node-offline {
-  color: $theme-gray-950;
+  color: $gray-950;
 }
 
 .geo-node-disabled {
@@ -96,7 +96,7 @@
   .detail-section-item,
   .section-items-container {
     .node-detail-title {
-      color: $theme-gray-700;
+      color: $gray-700;
 
       .node-detail-help-text {
         color: $blue-600;

ee/app/assets/stylesheets/pages/roadmap.scss

@@ -141,11 +141,11 @@ $column-right-gradient: linear-gradient(
 
     .item-label,
     .item-sublabel .sublabel-value {
-      color: $theme-gray-600;
+      color: $gray-600;
       font-weight: 400;
 
       &.label-dark {
-        color: $theme-gray-900;
+        color: $gray-900;
       }
 
       &.label-bold {
@@ -209,7 +209,7 @@ $column-right-gradient: linear-gradient(
     &:hover {
       .epic-details-cell,
       .epic-timeline-cell {
-        background-color: $theme-gray-100;
+        background-color: $gray-100;
       }
     }
 
@@ -258,7 +258,7 @@ $column-right-gradient: linear-gradient(
 
         .epic-url {
           display: table-cell;
-          color: $theme-gray-900;
+          color: $gray-900;
           font-weight: 600;
           white-space: nowrap;
           overflow: hidden;
@@ -267,7 +267,7 @@ $column-right-gradient: linear-gradient(
       }
 
       .epic-group-timeframe {
-        color: $theme-gray-700;
+        color: $gray-700;
         width: 100%;
         white-space: nowrap;
         overflow: hidden;