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 @@ ...@@ -6,7 +6,7 @@
// Toolbar buttons // Toolbar buttons
.tui-editor-defaultUI-toolbar .toolbar-button { .tui-editor-defaultUI-toolbar .toolbar-button {
color: $gl-gray-600; color: $gray-500;
border: 0; border: 0;
&:hover, &:hover,
......
...@@ -229,7 +229,7 @@ ...@@ -229,7 +229,7 @@
} }
&.btn-icon { &.btn-icon {
color: $gl-gray-700; color: $gray-700;
} }
.fa-caret-down, .fa-caret-down,
...@@ -394,7 +394,7 @@ ...@@ -394,7 +394,7 @@
} }
.clone-dropdown-btn a { .clone-dropdown-btn a {
color: $gl-gray-700; color: $gray-700;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
......
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
.hint { .hint {
font-style: italic; font-style: italic;
color: $gl-gray-200; color: $gray-200;
} }
.light { color: $gl-text-color; } .light { color: $gl-text-color; }
...@@ -162,13 +162,13 @@ table { ...@@ -162,13 +162,13 @@ table {
.loading { .loading {
margin: 20px auto; margin: 20px auto;
height: 40px; height: 40px;
color: $gl-gray-700; color: $gray-700;
font-size: 32px; font-size: 32px;
text-align: center; text-align: center;
} }
p.time { p.time {
color: $gl-gray-200; color: $gray-200;
font-size: 90%; font-size: 90%;
margin: 30px 3px 3px 2px; margin: 30px 3px 3px 2px;
} }
...@@ -246,7 +246,7 @@ li.note { ...@@ -246,7 +246,7 @@ li.note {
.gitlab-promo { .gitlab-promo {
a { a {
color: $gl-gray-350; color: $gray-300;
margin-right: 30px; margin-right: 30px;
} }
} }
......
...@@ -410,7 +410,7 @@ ...@@ -410,7 +410,7 @@
flex-direction: column; flex-direction: column;
.reference { .reference {
color: $gl-gray-400; color: $gray-300;
margin-top: $gl-padding-4; margin-top: $gl-padding-4;
} }
} }
...@@ -666,25 +666,25 @@ ...@@ -666,25 +666,25 @@
width: 100%; width: 100%;
min-height: 30px; min-height: 30px;
padding: 0 7px; padding: 0 7px;
color: $gl-gray-700; color: $gray-700;
line-height: 30px; line-height: 30px;
border: 1px solid $dropdown-divider-bg; border: 1px solid $dropdown-divider-bg;
border-radius: 2px; border-radius: 2px;
outline: 0; outline: 0;
&:focus { &:focus {
color: $gl-gray-700; color: $gray-700;
border-color: $blue-300; border-color: $blue-300;
box-shadow: 0 0 4px $dropdown-input-focus-shadow; box-shadow: 0 0 4px $dropdown-input-focus-shadow;
~ .fa { ~ .fa {
color: $gl-gray-700; color: $gray-700;
} }
} }
&:hover { &:hover {
~ .fa { ~ .fa {
color: $gl-gray-700; color: $gray-700;
} }
} }
} }
...@@ -1070,7 +1070,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { ...@@ -1070,7 +1070,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
color: $dropdown-title-btn-color; color: $dropdown-title-btn-color;
&:hover { &:hover {
color: $gl-gray-400; color: $gray-300;
} }
} }
} }
......
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
&.line-numbers { &.line-numbers {
float: none; float: none;
border-left: 1px solid $gl-gray-100; border-left: 1px solid $gray-100;
i { i {
float: none; float: none;
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
} }
.line-number { .line-number {
color: $gl-gray-500; color: $gray-500;
padding: 0 $gl-padding-8; padding: 0 $gl-padding-8;
min-width: $job-line-number-width; min-width: $job-line-number-width;
margin-left: -$job-line-number-margin; margin-left: -$job-line-number-margin;
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
&:active, &:active,
&:visited { &:visited {
text-decoration: underline; text-decoration: underline;
color: $gl-gray-500; color: $gray-500;
} }
} }
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
} }
.log-duration-badge { .log-duration-badge {
background: $gl-gray-400; background: $gray-300;
} }
.loader-animation { .loader-animation {
......
...@@ -300,7 +300,7 @@ ...@@ -300,7 +300,7 @@
} }
.group-path { .group-path {
color: $gl-gray-400; color: $gray-300;
} }
} }
...@@ -310,7 +310,7 @@ ...@@ -310,7 +310,7 @@
} }
.project-path { .project-path {
color: $gl-gray-400; color: $gray-300;
} }
} }
...@@ -332,7 +332,7 @@ ...@@ -332,7 +332,7 @@
.namespace-result { .namespace-result {
.namespace-kind { .namespace-kind {
color: $gl-gray-350; color: $gray-300;
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
} }
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
.status-neutral { .status-neutral {
background-color: $gray-100; background-color: $gray-100;
color: $gl-gray-dark; color: $gray-900;
&:hover { &:hover {
background-color: $gray-200; background-color: $gray-200;
......
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
padding: 3px 5px; padding: 3px 5px;
font-size: 11px; font-size: 11px;
line-height: 10px; line-height: 10px;
color: $gl-gray-700; color: $gray-700;
vertical-align: middle; vertical-align: middle;
background-color: $gray-10; background-color: $gray-10;
border-width: 1px; border-width: 1px;
......
...@@ -104,15 +104,6 @@ $t-gray-a-04: rgba($black, 0.04) !default; ...@@ -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-06: rgba($black, 0.06) !default;
$t-gray-a-08: rgba($black, 0.08) !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-50: #ecf4ee !default;
$green-100: #c3e6cd !default; $green-100: #c3e6cd !default;
$green-200: #91d4a8 !default; $green-200: #91d4a8 !default;
...@@ -357,8 +348,6 @@ $gl-text-color-inverted: $white; ...@@ -357,8 +348,6 @@ $gl-text-color-inverted: $white;
$gl-text-color-secondary-inverted: rgba($white, 0.85); $gl-text-color-secondary-inverted: rgba($white, 0.85);
$gl-text-color-disabled: $gray-400; $gl-text-color-disabled: $gray-400;
$gl-grayish-blue: #7f8fa4; $gl-grayish-blue: #7f8fa4;
$gl-gray-dark: #313236;
$gl-gray-light: #5c5c5c;
$gl-header-color: #4c4e54; $gl-header-color: #4c4e54;
$gl-font-size-12: 12px; $gl-font-size-12: 12px;
$gl-font-size-14: 14px; $gl-font-size-14: 14px;
......
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
.zen-control { .zen-control {
padding: 0; padding: 0;
color: $gl-gray-700; color: $gray-700;
background: none; background: none;
border: 0; border: 0;
} }
......
...@@ -7,12 +7,12 @@ img { ...@@ -7,12 +7,12 @@ img {
p.details { p.details {
font-style: italic; font-style: italic;
color: $gl-gray-500; color: $gray-500;
} }
.footer > p { .footer > p {
font-size: small; font-size: small;
color: $gl-gray-500; color: $gray-500;
} }
pre.commit-message { pre.commit-message {
......
...@@ -1080,7 +1080,7 @@ $ide-commit-header-height: 48px; ...@@ -1080,7 +1080,7 @@ $ide-commit-header-height: 48px;
max-width: 24px; max-width: 24px;
padding: 0; padding: 0;
margin: 0 ($grid-size / 2); margin: 0 ($grid-size / 2);
color: var(--ide-text-color-secondary, $gl-gray-light); color: var(--ide-text-color-secondary, $gray-600);
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
.bar { .bar {
height: 4px; height: 4px;
background-color: $gl-gray-100; background-color: $gray-100;
} }
.count { .count {
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
.graph-separator { .graph-separator {
width: $graph-separator-width; width: $graph-separator-width;
height: 18px; height: 18px;
background-color: $gl-gray-100; background-color: $gray-100;
} }
} }
......
...@@ -124,7 +124,7 @@ ...@@ -124,7 +124,7 @@
background-color: none; background-color: none;
border: 0; border: 0;
font-weight: bold; font-weight: bold;
color: $gl-gray-500; color: $gray-500;
} }
} }
} }
......
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
.file-mode-changed { .file-mode-changed {
padding: 10px; padding: 10px;
color: $gl-gray-500; color: $gray-500;
} }
.suppressed-container { .suppressed-container {
...@@ -181,7 +181,7 @@ ...@@ -181,7 +181,7 @@
.swipe-wrap { .swipe-wrap {
overflow: hidden; overflow: hidden;
border-right: 1px solid $gl-gray-400; border-right: 1px solid $gray-300;
position: absolute; position: absolute;
display: block; display: block;
top: 13px; top: 13px;
...@@ -190,7 +190,7 @@ ...@@ -190,7 +190,7 @@
&.left-oriented { &.left-oriented {
/* only for commit view (different swipe viewer) */ /* only for commit view (different swipe viewer) */
border-right: 0; border-right: 0;
border-left: 1px solid $gl-gray-400; border-left: 1px solid $gray-300;
} }
} }
......
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
.x-axis path, .x-axis path,
.y-axis path { .y-axis path {
stroke: $gl-gray-350; stroke: $gray-300;
} }
.label-x-axis-line, .label-x-axis-line,
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
.y-axis { .y-axis {
line { line {
stroke: $gl-gray-350; stroke: $gray-300;
stroke-width: 1; stroke-width: 1;
} }
} }
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
} }
.selected-metric-line { .selected-metric-line {
stroke: $gl-gray-dark; stroke: $gray-900;
stroke-width: 1; stroke-width: 1;
} }
......
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
border: 0; border: 0;
background: $gray-light; background: $gray-light;
border-radius: 0; border-radius: 0;
color: $gl-gray-500; color: $gray-500;
overflow: hidden; overflow: hidden;
} }
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
} }
.event-note-icon { .event-note-icon {
color: $gl-gray-500; color: $gray-500;
float: left; float: left;
font-size: $gl-font-size; font-size: $gl-font-size;
margin-right: 5px; margin-right: 5px;
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
.y-axis-label { .y-axis-label {
line { line {
stroke: $gl-gray-350; stroke: $gray-300;
} }
text { text {
......
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
.save-group-loader { .save-group-loader {
margin-top: $gl-padding-50; margin-top: $gl-padding-50;
margin-bottom: $gl-padding-50; margin-bottom: $gl-padding-50;
color: $gl-gray-700; color: $gray-700;
} }
.group-nav-container .nav-controls { .group-nav-container .nav-controls {
......
.shortcut-mappings { .shortcut-mappings {
font-size: 12px; font-size: 12px;
color: $gl-gray-700; color: $gray-700;
tbody:first-child tr:first-child { tbody:first-child tr:first-child {
padding-top: 0; padding-top: 0;
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
.shortcut { .shortcut {
padding-right: 10px; padding-right: 10px;
color: $gl-gray-400; color: $gray-300;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
} }
......
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
border-bottom-width: 0; border-bottom-width: 0;
.gl-tab-nav-item { .gl-tab-nav-item {
color: $gl-gray-600; color: $gray-500;
> .gl-tab-counter-badge { > .gl-tab-counter-badge {
color: inherit; color: inherit;
......
...@@ -64,7 +64,7 @@ $mr-widget-min-height: 69px; ...@@ -64,7 +64,7 @@ $mr-widget-min-height: 69px;
background-color: $gray-light; background-color: $gray-light;
&.clickable:hover { &.clickable:hover {
background-color: $gl-gray-100; background-color: $gray-100;
cursor: pointer; cursor: pointer;
} }
} }
...@@ -311,7 +311,7 @@ $mr-widget-min-height: 69px; ...@@ -311,7 +311,7 @@ $mr-widget-min-height: 69px;
.bold { .bold {
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
color: $gl-gray-light; color: $gray-600;
margin-left: 10px; margin-left: 10px;
} }
...@@ -980,7 +980,7 @@ $mr-widget-min-height: 69px; ...@@ -980,7 +980,7 @@ $mr-widget-min-height: 69px;
opacity: 0.65; opacity: 0.65;
&:hover { &:hover {
color: $gl-gray-500; color: $gray-500;
text-decoration: none; text-decoration: none;
} }
} }
......
...@@ -186,8 +186,8 @@ $note-form-margin-left: 72px; ...@@ -186,8 +186,8 @@ $note-form-margin-left: 72px;
padding: $gl-padding; padding: $gl-padding;
.dummy-avatar { .dummy-avatar {
background-color: $gl-gray-100; background-color: $gray-100;
border: 1px solid darken($gl-gray-100, 25%); border: 1px solid darken($gray-100, 25%);
} }
.note-headline-light, .note-headline-light,
...@@ -835,7 +835,7 @@ $note-form-margin-left: 72px; ...@@ -835,7 +835,7 @@ $note-form-margin-left: 72px;
&[disabled] { &[disabled] {
background: $white; background: $white;
border-color: $gray-200; border-color: $gray-200;
color: $gl-gray-400; color: $gray-300;
cursor: not-allowed; cursor: not-allowed;
} }
} }
......
...@@ -353,7 +353,7 @@ ...@@ -353,7 +353,7 @@
.save-project-loader { .save-project-loader {
margin-top: 50px; margin-top: 50px;
margin-bottom: 50px; margin-bottom: 50px;
color: $gl-gray-700; color: $gray-700;
} }
.transfer-project .select2-container { .transfer-project .select2-container {
...@@ -429,7 +429,7 @@ ...@@ -429,7 +429,7 @@
> li + li::before { > li + li::before {
padding: 0 3px; padding: 0 3px;
color: $gl-gray-400; color: $gray-300;
} }
a { a {
...@@ -1444,7 +1444,7 @@ pre.light-well { ...@@ -1444,7 +1444,7 @@ pre.light-well {
.project-filters { .project-filters {
.btn svg { .btn svg {
color: $gl-gray-700; color: $gray-700;
} }
.button-filter-group { .button-filter-group {
......
...@@ -301,7 +301,7 @@ ...@@ -301,7 +301,7 @@
} }
.loading-metrics .metrics-load-spinner { .loading-metrics .metrics-load-spinner {
color: $gl-gray-700; color: $gray-700;
} }
.metrics-list { .metrics-list {
......
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
border: 0; border: 0;
background: $gray-light; background: $gray-light;
border-radius: 0; border-radius: 0;
color: $gl-gray-500; color: $gray-500;
margin: 0 20px; margin: 0 20px;
overflow: hidden; overflow: hidden;
} }
...@@ -191,7 +191,7 @@ ...@@ -191,7 +191,7 @@
.todo-body { .todo-body {
margin: 0; margin: 0;
border-left: 2px solid $gl-gray-100; border-left: 2px solid $gray-100;
padding-left: 10px; padding-left: 10px;
} }
} }
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
.example { .example {
padding: 15px; padding: 15px;
border: 1px dashed $gl-gray-100; border: 1px dashed $gray-100;
margin-bottom: 15px; margin-bottom: 15px;
&::before { &::before {
......
...@@ -11,15 +11,15 @@ ...@@ -11,15 +11,15 @@
height: $performance-bar-height; height: $performance-bar-height;
background: $black; background: $black;
line-height: $performance-bar-height; line-height: $performance-bar-height;
color: $gl-gray-400; color: $gray-300;
select { select {
color: $gl-gray-400; color: $gray-300;
width: 200px; width: 200px;
} }
input { input {
color: $gl-gray-400; color: $gray-300;
width: $input-short-width - 60px; width: $input-short-width - 60px;
} }
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
padding: 4px 6px; padding: 4px 6px;
font-family: Consolas, 'Liberation Mono', Courier, monospace; font-family: Consolas, 'Liberation Mono', Courier, monospace;
line-height: 1; line-height: 1;
color: $gl-gray-100; color: $gray-100;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from, box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
inset 0 1px 2px $perf-bar-bucket-box-shadow-to; inset 0 1px 2px $perf-bar-bucket-box-shadow-to;
......
...@@ -11,15 +11,6 @@ $gray-800: #f2f2f2; ...@@ -11,15 +11,6 @@ $gray-800: #f2f2f2;
$gray-900: #fafafa; $gray-900: #fafafa;
$gray-950: #fff; $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-50: #072b15;
$green-100: #0a4020; $green-100: #0a4020;
$green-200: #0e5a2d; $green-200: #0e5a2d;
......
.tribute-container { .tribute-container {
background: $white; background: $white;
border: 1px solid $gl-gray-100; border: 1px solid $gray-100;
border-radius: $border-radius-base; border-radius: $border-radius-base;
box-shadow: 0 0 5px $issue-boards-card-shadow; box-shadow: 0 0 5px $issue-boards-card-shadow;
color: $black; color: $black;
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
white-space: nowrap; white-space: nowrap;
small { small {
color: $gl-gray-500; color: $gray-500;
} }
&.highlight { &.highlight {
......
...@@ -28,8 +28,8 @@ button[disabled] { ...@@ -28,8 +28,8 @@ button[disabled] {
&:focus, &:focus,
&:hover { &:hover {
.gl-badge { .gl-badge {
background: $gl-gray-100; background: $gray-100;
color: $gl-gray-500; color: $gray-500;
} }
} }
} }
......
...@@ -86,11 +86,11 @@ ...@@ -86,11 +86,11 @@
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
color: $gl-gray-light; color: $gray-600;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: $gl-gray-dark; color: $gray-900;
} }
} }
} }
...@@ -14,7 +14,7 @@ $label-blue: #428bca; ...@@ -14,7 +14,7 @@ $label-blue: #428bca;
.clear-search-input { .clear-search-input {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
fill: $gl-gray-400; fill: $gray-300;
} }
.seach-icon-input { .seach-icon-input {
......
...@@ -29,6 +29,6 @@ ...@@ -29,6 +29,6 @@
} }
&:not([data-plan]) { &:not([data-plan]) {
svg g { fill: $gl-gray-light; } svg g { fill: $gray-600; }
} }
} }
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
margin-top: 35px; margin-top: 35px;
.trial-description { .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