Commit 3cb408f1 authored by Martin Wortschack's avatar Martin Wortschack

Merge branch '231490-replace-gl-gray-variables-with-gray-variables' into 'master'

Replace $gl-gray- variables with $gray- variables

Closes #231490

See merge request gitlab-org/gitlab!39860
parents 3da79e6e e62fc40c
......@@ -6,7 +6,7 @@
// Toolbar buttons
.tui-editor-defaultUI-toolbar .toolbar-button {
color: $gl-gray-600;
color: $gray-500;
border: 0;
&:hover,
......
......@@ -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;
......
......@@ -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;
}
}
......
......@@ -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;
}
}
}
......
......@@ -183,7 +183,7 @@
&.line-numbers {
float: none;
border-left: 1px solid $gl-gray-100;
border-left: 1px solid $gray-100;
i {
float: none;
......
......@@ -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 {
......
......@@ -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;
}
......
......@@ -37,7 +37,7 @@
.status-neutral {
background-color: $gray-100;
color: $gl-gray-dark;
color: $gray-900;
&:hover {
background-color: $gray-200;
......
......@@ -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;
......
......@@ -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;
......
......@@ -35,7 +35,7 @@
.zen-control {
padding: 0;
color: $gl-gray-700;
color: $gray-700;
background: none;
border: 0;
}
......
......@@ -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 {
......
......@@ -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;
......
......@@ -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;
}
}
......
......@@ -124,7 +124,7 @@
background-color: none;
border: 0;
font-weight: bold;
color: $gl-gray-500;
color: $gray-500;
}
}
}
......
......@@ -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;
}
}
......
......@@ -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;
}
......
......@@ -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;
......
......@@ -43,7 +43,7 @@
.y-axis-label {
line {
stroke: $gl-gray-350;
stroke: $gray-300;
}
text {
......
......@@ -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 {
......
.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;
}
......
......@@ -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;
......
......@@ -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;
}
}
......
......@@ -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;
}
}
......
......@@ -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 {
......
......@@ -301,7 +301,7 @@
}
.loading-metrics .metrics-load-spinner {
color: $gl-gray-700;
color: $gray-700;
}
.metrics-list {
......
......@@ -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;
}
}
......
......@@ -6,7 +6,7 @@
.example {
padding: 15px;
border: 1px dashed $gl-gray-100;
border: 1px dashed $gray-100;
margin-bottom: 15px;
&::before {
......
......@@ -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;
......
......@@ -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;
......
.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 {
......
......@@ -28,8 +28,8 @@ button[disabled] {
&:focus,
&:hover {
.gl-badge {
background: $gl-gray-100;
color: $gl-gray-500;
background: $gray-100;
color: $gray-500;
}
}
}
......
......@@ -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;
}
}
}
......@@ -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 {
......
......@@ -29,6 +29,6 @@
}
&:not([data-plan]) {
svg g { fill: $gl-gray-light; }
svg g { fill: $gray-600; }
}
}
......@@ -2,7 +2,7 @@
margin-top: 35px;
.trial-description {
color: $gl-gray-light;
color: $gray-600;
}
}
......
---
title: Deprecate -gray- variables and replace with - variables
merge_request: 39860
author:
type: other
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment