From 86b1dfc7a494b19a20cf677f040d2f9c8a1efad7 Mon Sep 17 00:00:00 2001
From: tauriedavis <taurie@gitlab.com>
Date: Fri, 30 Dec 2016 12:18:27 -0800
Subject: [PATCH] 25701 standardize text colors
---
app/assets/stylesheets/framework/badges.scss | 5 ---
app/assets/stylesheets/framework/blocks.scss | 14 ++++----
app/assets/stylesheets/framework/buttons.scss | 6 ++--
app/assets/stylesheets/framework/common.scss | 2 +-
.../stylesheets/framework/dropdowns.scss | 14 ++++----
app/assets/stylesheets/framework/forms.scss | 2 +-
app/assets/stylesheets/framework/header.scss | 6 ++--
app/assets/stylesheets/framework/icons.scss | 4 +--
.../stylesheets/framework/issue_box.scss | 2 +-
app/assets/stylesheets/framework/lists.scss | 4 +--
.../stylesheets/framework/markdown_area.scss | 4 +--
app/assets/stylesheets/framework/mixins.scss | 2 +-
app/assets/stylesheets/framework/nav.scss | 4 +--
.../stylesheets/framework/page-header.scss | 4 +--
.../stylesheets/framework/timeline.scss | 4 +--
.../stylesheets/framework/tw_bootstrap.scss | 2 +-
.../framework/tw_bootstrap_variables.scss | 9 +++--
.../stylesheets/framework/typography.scss | 14 ++++----
.../stylesheets/framework/variables.scss | 36 +++++++------------
app/assets/stylesheets/framework/wells.scss | 2 +-
app/assets/stylesheets/framework/zen.scss | 2 +-
app/assets/stylesheets/highlight/white.scss | 2 +-
app/assets/stylesheets/pages/boards.scss | 2 +-
app/assets/stylesheets/pages/branches.scss | 2 +-
app/assets/stylesheets/pages/builds.scss | 4 +--
app/assets/stylesheets/pages/ci_projects.scss | 2 +-
app/assets/stylesheets/pages/commits.scss | 16 ++++-----
.../stylesheets/pages/cycle_analytics.scss | 18 +++++-----
app/assets/stylesheets/pages/detail_page.scss | 8 ++---
app/assets/stylesheets/pages/diff.scss | 6 ++--
.../stylesheets/pages/environments.scss | 10 +++---
app/assets/stylesheets/pages/events.scss | 2 +-
app/assets/stylesheets/pages/groups.scss | 2 +-
app/assets/stylesheets/pages/issuable.scss | 16 ++++-----
app/assets/stylesheets/pages/labels.scss | 2 +-
.../stylesheets/pages/merge_requests.scss | 14 ++++----
app/assets/stylesheets/pages/milestone.scss | 2 +-
app/assets/stylesheets/pages/note_form.scss | 4 +--
app/assets/stylesheets/pages/notes.scss | 2 +-
app/assets/stylesheets/pages/pipelines.scss | 26 +++++++-------
app/assets/stylesheets/pages/projects.scss | 14 ++++----
app/assets/stylesheets/pages/settings.scss | 2 +-
app/assets/stylesheets/pages/status.scss | 16 ++++-----
app/assets/stylesheets/pages/todos.scss | 2 +-
app/assets/stylesheets/pages/tree.scss | 10 +++---
app/assets/stylesheets/pages/wiki.scss | 4 +--
app/views/layouts/nav/_admin.html.haml | 2 +-
app/views/layouts/nav/_group.html.haml | 4 +--
app/views/layouts/nav/_project.html.haml | 4 +--
.../25701-standardize-text-colors.yml | 4 +++
50 files changed, 167 insertions(+), 177 deletions(-)
create mode 100644 changelogs/unreleased/25701-standardize-text-colors.yml
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index e9d7cda0647..47a8f44c709 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -4,8 +4,3 @@
color: $badge-color;
vertical-align: baseline;
}
-
-.badge-dark {
- background-color: $badge-bg-dark;
- color: $badge-color-dark;
-}
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index e9aadffc73c..407c800feb7 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -1,13 +1,13 @@
.centered-light-block {
text-align: center;
- color: $gl-gray;
+ color: $gl-text-color;
margin: 20px;
}
.nothing-here-block {
text-align: center;
padding: 20px;
- color: $gl-gray;
+ color: $gl-text-color;
font-weight: normal;
font-size: 14px;
line-height: 36px;
@@ -29,7 +29,7 @@
margin-bottom: 0;
border-top: 1px solid $white-dark;
border-bottom: 1px solid $white-dark;
- color: $gl-gray;
+ color: $gl-text-color;
&.oneline-block {
line-height: 42px;
@@ -135,11 +135,11 @@
}
.cover-title {
- color: $gl-header-color;
+ color: $gl-text-color;
font-size: 23px;
h1 {
- color: $gl-gray-dark;
+ color: $gl-text-color;
margin-bottom: 6px;
font-size: 23px;
}
@@ -153,7 +153,7 @@
p {
padding: 0 $gl-padding;
- color: $gl-text-color-dark;
+ color: $gl-text-color;
}
}
@@ -211,7 +211,7 @@
display: inline;
font-weight: normal;
font-size: 24px;
- color: $gl-title-color;
+ color: $gl-text-color;
}
}
}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index a11f1cd7735..e04a87a7327 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -88,7 +88,7 @@
}
@mixin btn-gray {
- @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark);
+ @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-text-color);
}
@mixin btn-white {
@@ -242,7 +242,7 @@
}
.btn-transparent {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
background-color: transparent;
border: 0;
@@ -338,7 +338,7 @@
margin-left: 10px;
i {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 67b5aa37ae7..0ce94a26a7f 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -412,7 +412,7 @@ table {
padding: 0 10px;
clip: auto;
text-decoration: none;
- color: $gl-title-color;
+ color: $gl-text-color;
background: $gray-light;
z-index: 1;
}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 889366d6ddf..755eddefa42 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -201,7 +201,7 @@
}
.icon-play {
- fill: $gl-gray-light;
+ fill: $gl-text-color-secondary;
margin-right: 6px;
height: 12px;
width: 11px;
@@ -209,7 +209,7 @@
}
.dropdown-header {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
font-size: 13px;
line-height: 22px;
padding: 0 10px;
@@ -222,7 +222,7 @@
.unclickable {
cursor: not-allowed;
padding: 5px 8px;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
}
@@ -592,7 +592,7 @@
}
.ui-datepicker-title {
- color: $gl-gray;
+ color: $gl-text-color;
font-size: 14px;
line-height: 1;
font-weight: normal;
@@ -614,17 +614,17 @@
.dropdown-menu-inner-title {
display: block;
- color: $gl-title-color;
+ color: $gl-text-color;
font-weight: 600;
}
.dropdown-menu-inner-content {
display: block;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
.dropdown-toggle-text {
&.is-default {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 8726a69867b..25d6fbe465a 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -153,7 +153,7 @@ label {
}
.form-control::-webkit-input-placeholder {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
.input-group {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 971940773f7..72b3fe2016c 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -45,7 +45,7 @@ header {
padding: 0;
.nav > li > a {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
font-size: 18px;
padding: 0;
margin: ($header-height - 28) / 2 0;
@@ -63,7 +63,7 @@ header {
&:focus,
&:active {
background-color: $gray-light;
- color: darken($gl-gray-light, 30%);
+ color: darken($gl-text-color-secondary, 30%);
.todos-pending-count {
background: darken($todo-alert-blue, 10%);
@@ -88,7 +88,7 @@ header {
}
&.active {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
}
}
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 8624a25c052..dccf5177e35 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -34,10 +34,10 @@
.ci-status-icon-canceled,
.ci-status-icon-disabled,
.ci-status-icon-not-found {
- color: $gl-gray;
+ color: $gl-text-color;
svg {
- fill: $gl-gray;
+ fill: $gl-text-color;
}
}
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 298913108ee..46632f15f35 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -41,6 +41,6 @@
}
&.status-box-upcoming {
- background: $gl-gray-light;
+ background: $gl-text-color-secondary;
}
}
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index bffd0e6f0cd..771dfaec46e 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -128,7 +128,7 @@ ul.content-list {
}
a {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
.member-group-link {
@@ -230,7 +230,7 @@ ul.content-list {
}
.label-default {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
}
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index e30d81d09f0..5bff694658c 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -73,7 +73,7 @@
}
.referenced-users {
- color: $gl-header-color;
+ color: $gl-text-color;
padding-top: 10px;
}
@@ -135,7 +135,7 @@
.toolbar-btn {
float: left;
padding: 0 5px;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
background: transparent;
border: 0;
outline: 0;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 4f2ac77f228..1acd06122a3 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -46,7 +46,7 @@
&.light {
a {
- color: $gl-gray;
+ color: $gl-text-color;
}
}
}
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 5abda13a963..a292e7686f9 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -51,7 +51,7 @@
margin-bottom: -1px;
font-size: 14px;
line-height: 28px;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
border-bottom: 2px solid transparent;
&:hover,
@@ -315,7 +315,7 @@
.fa-caret-down {
margin-left: 5px;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
.dropdown {
diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss
index 625bea96aaa..4decee2c525 100644
--- a/app/assets/stylesheets/framework/page-header.scss
+++ b/app/assets/stylesheets/framework/page-header.scss
@@ -14,7 +14,7 @@
.header-action-buttons {
i {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
font-size: 13px;
margin-right: 3px;
}
@@ -42,7 +42,7 @@
.commit-committer-link,
.commit-author-link {
- color: $gl-gray;
+ color: $gl-text-color;
font-weight: bold;
}
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 6078505807e..ff185cd8767 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -7,7 +7,7 @@
.timeline-entry {
padding: $gl-padding $gl-btn-padding 11px;
border-color: $white-normal;
- color: $gl-gray;
+ color: $gl-text-color;
border-bottom: 1px solid $border-white-light;
&:target {
@@ -32,7 +32,7 @@
.system-note {
.note-text {
- color: $gl-gray !important;
+ color: $gl-text-color !important;
}
}
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 28cbae9a449..12d56359d7d 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -98,7 +98,7 @@
&.label-gray {
background-color: $label-gray-bg;
- color: $gl-gray;
+ color: $gl-text-color;
text-shadow: none;
}
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 876adf7f712..0fc89d5976a 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -65,11 +65,11 @@ $legend-color: $text-color;
//
//##
-$pagination-color: $gl-gray;
+$pagination-color: $gl-text-color;
$pagination-bg: $white-light;
$pagination-border: $border-color;
-$pagination-hover-color: $gl-gray;
+$pagination-hover-color: $gl-text-color;
$pagination-hover-bg: $row-hover;
$pagination-hover-border: $border-color;
@@ -121,6 +121,9 @@ $panel-default-heading-bg: $gray-light;
$panel-footer-bg: $gray-light;
$panel-inner-border: $border-color;
+$badge-bg: $badge-bg;
+$badge-color: $badge-color;
+
//== Wells
//
//##
@@ -154,7 +157,7 @@ $nav-link-padding: 13px $gl-padding;
//
//##
$pre-bg: $gray-light !default;
-$pre-color: $gl-gray !default;
+$pre-color: $gl-text-color !default;
$pre-border-color: $border-color;
$table-bg-accent: $gray-light;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index d906d26bba9..bd58a26f429 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,5 +1,5 @@
@mixin md-typography {
- color: $md-text-color;
+ color: $gl-text-color;
word-wrap: break-word;
a {
@@ -50,14 +50,14 @@
margin: 16px 0 10px;
padding: 0 0 0.3em;
border-bottom: 1px solid $white-dark;
- color: $gl-gray-dark;
+ color: $gl-text-color;
}
h2 {
font-size: 1.5em;
font-weight: 600;
margin: 16px 0 10px;
- color: $gl-gray-dark;
+ color: $gl-text-color;
}
h3 {
@@ -100,7 +100,7 @@
}
p {
- color: $gl-text-color-dark;
+ color: $gl-text-color;
margin: 6px 0 0;
}
@@ -108,7 +108,7 @@
@extend .table;
@extend .table-bordered;
margin: 12px 0;
- color: $gl-text-color-dark;
+ color: $gl-text-color;
th {
background: $label-gray-bg;
@@ -230,7 +230,7 @@ h3,
h4,
h5,
h6 {
- color: $gl-title-color;
+ color: $gl-text-color;
font-weight: 600;
}
@@ -292,7 +292,7 @@ h2,
h3,
h4 {
small {
- color: $gl-gray;
+ color: $gl-text-color;
}
}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index dc211fc55a7..6595010d221 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -94,29 +94,22 @@ $well-light-text-color: #5b6169;
* Text
*/
$gl-font-size: 14px;
-$gl-title-color: #333;
-$gl-text-color: #5c5c5c;
-$gl-text-color-dark: #5c5d5e;
-$gl-text-color-light: #8c8c8c;
+$gl-text-color: rgba(0, 0, 0, .85);
+$gl-text-color-secondary: rgba(0, 0, 0, .55);
+$gl-text-color-disabled: rgba(0, 0, 0, .35);
$gl-text-green: #4a2;
$gl-text-red: #d12f19;
$gl-text-orange: #d90;
$gl-link-color: #3777b0;
-$gl-diff-text-color: #555;
-$gl-dark-link-color: #333;
-$gl-gray-light: #8f8f8f;
$gl-grayish-blue: #7f8fa4;
-$gl-gray: $gl-text-color;
-$gl-gray-dark: #313236;
-$gl-header-color: #4c4e54;
/*
* Lists
*/
$list-font-size: $gl-font-size;
-$list-title-color: $gl-title-color;
+$list-title-color: $gl-text-color;
$list-text-color: $gl-text-color;
-$list-text-disabled-color: #888;
+$list-text-disabled-color: $gl-text-color-disabled;
$list-border-light: #eee;
$list-border: rgba(0, 0, 0, 0.05);
$list-text-height: 42px;
@@ -127,7 +120,6 @@ $list-warning-row-color: #8a6d3b;
/*
* Markdown
*/
-$md-text-color: $gl-text-color;
$md-link-color: $gl-link-color;
$md-area-border: #ddd;
@@ -168,9 +160,7 @@ $btn-side-margin: 10px;
$btn-sm-side-margin: 7px;
$btn-xs-side-margin: 5px;
$issue-status-expired: #cea61b;
-$issuable-sidebar-color: #999;
-$issuable-avatar-hover-border: #999;
-$issuable-clipboard-color: #999;
+$issuable-sidebar-color: $gl-text-color-secondary;
$show-aside-bg: #eee;
$show-aside-color: #777;
$show-aside-shadow: #ddd;
@@ -282,10 +272,8 @@ $btn-active-gray-light: e4e7ed;
/*
* Badges
*/
-$badge-bg: #f3f3f3;
-$badge-bg-dark: #eee;
-$badge-color: #929292;
-$badge-color-dark: #8f8f8f;
+$badge-bg: #eee;
+$badge-color: $gl-text-color-secondary;
/*
* Award emoji
@@ -304,8 +292,8 @@ $location-icon-color: #e7e9ed;
/*
* Notes
*/
-$notes-light-color: #8e8e8e;
-$notes-role-color: #8e8e8e;
+$notes-light-color: $gl-text-color-secondary;
+$notes-role-color: $gl-text-color-secondary;
$note-disabled-comment-color: #b2b2b2;
$note-targe3-outside: #fffff0;
$note-targe3-inside: #ffffd3;
@@ -330,7 +318,7 @@ $calendar-user-contrib-text: #959494;
$cycle-analytics-box-padding: 30px;
$cycle-analytics-box-text-color: #8c8c8c;
$cycle-analytics-big-font: 19px;
-$cycle-analytics-dark-text: $gl-title-color;
+$cycle-analytics-dark-text: $gl-text-color;
$cycle-analytics-light-gray: #bfbfbf;
$cycle-analytics-dismiss-icon-color: #b2b2b2;
@@ -382,7 +370,7 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0.0);
/*
* Common
*/
-$common-gray: $gl-gray;
+$common-gray: $gl-text-color;
$common-gray-light: #bbb;
$common-gray-dark: #444;
$common-red: $gl-text-red;
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index f9c850ebdc8..32eb750180f 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -1,6 +1,6 @@
.info-well {
background: $gray-light;
- color: $gl-gray;
+ color: $gl-text-color;
border: 1px solid $border-color;
border-radius: $border-radius-default;
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 84b639fabf5..97ade638db6 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -40,7 +40,7 @@
}
.zen-control-full {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
&:hover {
color: $gl-link-color;
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 54a5664a874..b425c78e0d5 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -3,7 +3,7 @@
/*
* White Syntax Colors
*/
-$white-code-color: #333;
+$white-code-color: $gl-text-color;
$white-highlight: #fafe3d;
$white-pre-hll-bg: #f8eec7;
$white-hll-bg: #f8f8f8;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 76a88d96183..c18de7b940a 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -259,7 +259,7 @@
.board-list-count {
padding: 10px 0;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
font-size: 13px;
> .fa {
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
index 8d671585b7a..3e2fa8ca88d 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -29,7 +29,7 @@
padding-top: 6px;
padding-bottom: 0;
font-size: 12px;
- color: $gl-title-color;
+ color: $gl-text-color;
display: block;
}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f9e8d297c05..fd101d43b5b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -160,7 +160,7 @@
flex: 1;
a {
- color: $gl-gray;
+ color: $gl-text-color;
&:hover {
color: $gl-link-color;
@@ -357,7 +357,7 @@
}
.build-light-text {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
.build-gutter-toggle {
diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss
index d1cd1e5d848..90643832390 100644
--- a/app/assets/stylesheets/pages/ci_projects.scss
+++ b/app/assets/stylesheets/pages/ci_projects.scss
@@ -18,7 +18,7 @@
}
td {
- color: $gl-gray;
+ color: $gl-text-color;
vertical-align: middle !important;
a {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index d890cf3502b..fef8e8eec27 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -19,7 +19,7 @@
.commit-title {
margin: 0;
- color: $gl-gray-dark;
+ color: $gl-text-color;
}
.commit-description {
@@ -96,14 +96,14 @@
}
.commit-row-message {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
}
.text-expander {
display: inline-block;
background: $gray-light;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
padding: 0 5px;
cursor: pointer;
border: 1px solid $border-gray-dark;
@@ -153,7 +153,7 @@
a,
button {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
vertical-align: baseline;
}
@@ -176,7 +176,7 @@
}
a {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
}
@@ -193,7 +193,7 @@
}
.branch-commit {
- color: $gl-gray;
+ color: $gl-text-color;
.commit-icon {
text-align: center;
@@ -203,7 +203,7 @@
height: 14px;
width: 14px;
vertical-align: middle;
- fill: $gl-gray-light;
+ fill: $gl-text-color-secondary;
}
}
@@ -212,6 +212,6 @@
}
.commit-row-message {
- color: $gl-gray;
+ color: $gl-text-color;
}
}
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 9ce261eafef..6566f27ea2d 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -111,14 +111,14 @@
line-height: 19px;
font-size: 14px;
font-weight: 600;
- color: $gl-title-color;
+ color: $gl-text-color;
}
&.text {
color: $layout-link-gray;
&.value-col {
- color: $gl-title-color;
+ color: $gl-text-color;
}
}
}
@@ -260,7 +260,7 @@
.stage-empty,
.not-available {
- color: $gl-text-color-light;
+ color: $gl-text-color-secondary;
}
}
}
@@ -327,7 +327,7 @@
@include text-overflow();
a {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
}
}
@@ -355,7 +355,7 @@
.issue-link,
.commit-author-link,
.issue-author-link {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
// Custom CSS for components
@@ -396,11 +396,11 @@
}
.item-build-name {
- color: $gl-title-color;
+ color: $gl-text-color;
}
.pipeline-id {
- color: $gl-title-color;
+ color: $gl-text-color;
padding: 0 3px 0 0;
}
@@ -423,7 +423,7 @@
}
.fa {
- color: $gl-text-color-light;
+ color: $gl-text-color-secondary;
font-size: $code_font_size;
}
}
@@ -435,7 +435,7 @@
width: 75%;
margin: 0 auto;
padding-top: 130px;
- color: $gl-text-color-light;
+ color: $gl-text-color-secondary;
h4 {
color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 9b28df1afc5..46fd19c93f9 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -1,15 +1,15 @@
.detail-page-header {
padding: $gl-padding-top 0;
border-bottom: 1px solid $border-color;
- color: $gl-text-color-dark;
+ color: $gl-text-color;
line-height: 34px;
.author {
- color: $gl-text-color-dark;
+ color: $gl-text-color;
}
.identifier {
- color: $gl-text-color-dark;
+ color: $gl-text-color;
}
.issue_created_ago,
@@ -22,7 +22,7 @@
.title {
margin: 0 0 16px;
font-size: 2em;
- color: $gl-gray-dark;
+ color: $gl-text-color;
padding: 0 0 0.3em;
border-bottom: 1px solid $white-dark;
}
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index f30795fd2c2..96ba7c40634 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -14,7 +14,7 @@
background: $gray-light;
border-bottom: 1px solid $border-color;
padding: 10px 16px;
- color: $gl-diff-text-color;
+ color: $gl-text-color;
z-index: 10;
border-radius: 3px 3px 0 0;
@@ -50,7 +50,7 @@
overflow: auto;
overflow-y: hidden;
background: $white-light;
- color: $gl-title-color;
+ color: $gl-text-color;
border-radius: 0 0 3px 3px;
.unfold {
@@ -380,7 +380,7 @@
}
cursor: default;
- color: $gl-title-color;
+ color: $gl-text-color;
}
&.disabled {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 5517dc5dcbd..778ef01430e 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -72,25 +72,25 @@
.external-url,
.dropdown-new {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
.dropdown-menu {
.fa {
margin-right: 6px;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
}
.build-link,
.branch-name {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
.stop-env-link,
.external-url {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
.stop-env-icon {
font-size: 14px;
@@ -101,7 +101,7 @@
.build-column {
.build-link {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
.avatar {
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 98925c2d0cb..b989d72ce1c 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -21,7 +21,7 @@
}
a {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
.avatar {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 16bff5f1e03..d377526e655 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -13,7 +13,7 @@
.stats {
float: right;
line-height: $list-text-height;
- color: $gl-gray;
+ color: $gl-text-color;
span {
margin-right: 15px;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 42a3f5baed9..0a8c037c402 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -103,7 +103,7 @@
}
.edit-link {
- color: $gl-gray;
+ color: $gl-text-color;
&:hover {
color: $md-link-color;
@@ -139,7 +139,7 @@
}
.btn-clipboard:hover {
- color: $gl-gray;
+ color: $gl-text-color;
}
}
@@ -174,7 +174,7 @@
}
.no-value {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
.sidebar-collapsed-icon {
@@ -242,7 +242,7 @@
color: $issuable-sidebar-color;
&:hover {
- color: $gl-gray;
+ color: $gl-text-color;
}
span {
@@ -255,16 +255,16 @@
}
.avatar:hover {
- border-color: $issuable-avatar-hover-border;
+ border-color: $issuable-sidebar-color;
}
.btn-clipboard {
border: none;
- color: $issuable-clipboard-color;
+ color: $issuable-sidebar-color;
&:hover {
background: transparent;
- color: $gl-gray;
+ color: $gl-text-color;
}
}
}
@@ -338,7 +338,7 @@
margin-left: 5px;
a {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
}
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index d129eb12a45..78683c7d574 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -117,7 +117,7 @@
.manage-labels-list {
.btn-action {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
.fa {
font-size: 18px;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 98d5967e76a..45ff9f7ff5f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -4,7 +4,7 @@
*/
.mr-state-widget {
background: $gray-light;
- color: $gl-gray;
+ color: $gl-text-color;
border: 1px solid $border-color;
border-radius: 2px;
@@ -58,7 +58,7 @@
padding-right: 0;
a {
- color: $gl-gray;
+ color: $gl-text-color;
}
}
@@ -70,7 +70,7 @@
.ci_widget {
border-bottom: 1px solid $well-inner-border;
- color: $gl-gray;
+ color: $gl-text-color;
svg {
margin-right: 4px;
@@ -94,7 +94,7 @@
}
.normal {
- color: $gl-text-color-dark;
+ color: $gl-text-color;
}
.js-deployment-link {
@@ -106,7 +106,7 @@
font-weight: 600;
font-size: 16px;
margin: 5px 0;
- color: $gl-gray-dark;
+ color: $gl-text-color;
&.has-conflicts .fa-exclamation-triangle {
color: $gl-warning;
@@ -190,7 +190,7 @@
}
.label-branch {
- color: $gl-gray-dark;
+ color: $gl-text-color;
font-family: $monospace_font;
font-weight: bold;
overflow: hidden;
@@ -363,7 +363,7 @@
th {
background-color: $white-light;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
}
}
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index f47ae9c6157..e284b7269ce 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -102,7 +102,7 @@
margin-top: 7px;
.issuable-number {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
margin-right: 5px;
}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index e54e12be82f..9f1c6a8a264 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -44,7 +44,7 @@
.note-textarea {
display: block;
padding: 10px 0;
- color: $gl-gray;
+ color: $gl-text-color;
font-family: $regular_font;
border: 0;
@@ -204,7 +204,7 @@
.comment-toolbar {
padding-top: $gl-padding-top;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
border-top: 1px solid $border-color;
}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 21d72791e81..38c548908f8 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -345,7 +345,7 @@ ul.notes {
}
.author_link {
- color: $gl-gray;
+ color: $gl-text-color;
}
}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 578003f6d36..1e4f242d40d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -131,7 +131,7 @@
height: 14px;
width: 14px;
vertical-align: middle;
- fill: $gl-gray-light;
+ fill: $gl-text-color-secondary;
}
.fa {
@@ -210,7 +210,7 @@
.duration,
.finished-at {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
margin: 4px 0;
.fa {
@@ -231,7 +231,7 @@
.btn {
margin: 0;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
.cancel-retry-btns {
@@ -244,10 +244,10 @@
.dropdown-toggle,
.dropdown-menu {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
.fa {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
font-size: 14px;
}
@@ -281,7 +281,7 @@
.build-link {
a {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
}
@@ -344,7 +344,7 @@
a {
text-decoration: none;
- color: $gl-text-color-light;
+ color: $gl-text-color-secondary;
}
svg {
@@ -468,13 +468,13 @@
width: 186px;
margin-bottom: 10px;
white-space: normal;
- color: $gl-text-color-light;
+ color: $gl-text-color-secondary;
.dropdown-menu-toggle {
background-color: transparent;
border: none;
padding: 0;
- color: $gl-text-color-light;
+ color: $gl-text-color-secondary;
&:focus {
outline: none;
@@ -730,7 +730,7 @@
}
.dropdown-build {
- color: $gl-text-color-light;
+ color: $gl-text-color-secondary;
.build-content {
padding: 4px 7px 8px;
@@ -784,7 +784,7 @@
.builds-dropdown {
background-color: transparent;
padding: 0;
- color: $gl-text-color-light;
+ color: $gl-text-color-secondary;
border: none;
margin: 0;
@@ -827,7 +827,7 @@
.ci-status-icon-canceled,
.ci-status-icon-disabled,
.ci-status-icon-not-found {
- background-color: rgba($gl-gray, .1);
+ background-color: rgba($gl-text-color, .1);
}
.ci-status-icon-created,
@@ -866,7 +866,7 @@
min-height: 50px;
a {
- color: $gl-text-color-light;
+ color: $gl-text-color-secondary;
}
}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 4a1bc560292..e30d73886e1 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -292,7 +292,7 @@
.option-title {
font-weight: normal;
display: inline-block;
- color: $gl-gray-dark;
+ color: $gl-text-color;
}
.option-descr {
@@ -331,7 +331,7 @@
a.deploy-project-label {
padding: 5px;
margin-right: 5px;
- color: $gl-gray;
+ color: $gl-text-color;
background-color: $row-hover;
&:hover {
@@ -372,7 +372,7 @@ a.deploy-project-label {
}
a {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
.dropdown-menu {
@@ -426,7 +426,7 @@ a.deploy-project-label {
width: 100%;
height: 100%;
padding-top: $gl-padding;
- color: $gl-gray;
+ color: $gl-text-color;
.caption {
min-height: 30px;
@@ -552,7 +552,7 @@ pre.light-well {
margin: 0 7px 7px;
h5 {
- color: $gl-text-color-dark;
+ color: $gl-text-color;
}
.light-well {
@@ -662,7 +662,7 @@ pre.light-well {
}
.commit-row-message {
- color: $gl-gray;
+ color: $gl-text-color;
}
.commit_short_id {
@@ -750,7 +750,7 @@ pre.light-well {
.protected-branches-list {
a {
- color: $gl-gray;
+ color: $gl-text-color;
&:hover {
color: $gl-link-color;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index ddee2c95247..a28a87ed4f8 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -1,5 +1,5 @@
.settings-list-icon {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
font-size: $settings-icon-size;
line-height: 42px;
}
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 2f6f03e9877..f19275770be 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -61,15 +61,15 @@
&.ci-canceled,
&.ci-disabled {
- color: $gl-gray;
- border-color: $gl-gray;
+ color: $gl-text-color;
+ border-color: $gl-text-color;
&:not(span):hover {
- background-color: rgba($gl-gray, .07);
+ background-color: rgba($gl-text-color, .07);
}
svg {
- fill: $gl-gray;
+ fill: $gl-text-color;
}
}
@@ -101,15 +101,15 @@
&.ci-created,
&.ci-skipped {
- color: $gl-gray-light;
- border-color: $gl-gray-light;
+ color: $gl-text-color-secondary;
+ border-color: $gl-text-color-secondary;
&:not(span):hover {
- background-color: rgba($gl-gray-light, .07);
+ background-color: rgba($gl-text-color-secondary, .07);
}
svg {
- fill: $gl-gray-light;
+ fill: $gl-text-color-secondary;
}
}
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 508b30f3947..01675acc62e 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -90,7 +90,7 @@
}
p {
- color: $gl-text-color-dark;
+ color: $gl-text-color;
}
}
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index fe4f08e4749..4cce1c363eb 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -78,7 +78,7 @@
i,
a {
- color: $gl-dark-link-color;
+ color: $gl-text-color;
}
img {
@@ -104,21 +104,21 @@
padding-right: 8px;
.commit-author-name {
- color: $gl-gray;
+ color: $gl-text-color;
}
}
.tree-time-ago {
min-width: 135px;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
.tree-commit {
max-width: 320px;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
.tree-commit-link {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
&:hover {
text-decoration: underline;
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index b9f81533150..d5783e14b21 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -15,7 +15,7 @@
}
.wiki-last-edit-by {
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
strong {
color: $gl-text-color;
@@ -24,7 +24,7 @@
.light {
font-weight: normal;
- color: $gl-gray-light;
+ color: $gl-text-color-secondary;
}
.git-access-header {
diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml
index b69114c96cc..ac04f57e217 100644
--- a/app/views/layouts/nav/_admin.html.haml
+++ b/app/views/layouts/nav/_admin.html.haml
@@ -31,7 +31,7 @@
= link_to admin_abuse_reports_path, title: "Abuse Reports" do
%span
Abuse Reports
- %span.badge.badge-dark.count= number_with_delimiter(AbuseReport.count(:all))
+ %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
- if askimet_enabled?
= nav_link(controller: :spam_logs) do
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index 221f3ec1ffe..f3539fd372d 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -26,13 +26,13 @@
%span
Issues
- issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
- %span.badge.badge-dark.count= number_with_delimiter(issues.count)
+ %span.badge.count= number_with_delimiter(issues.count)
= nav_link(path: 'groups#merge_requests') do
= link_to merge_requests_group_path(@group), title: 'Merge Requests' do
%span
Merge Requests
- merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened', non_archived: true).execute
- %span.badge.badge-dark.count= number_with_delimiter(merge_requests.count)
+ %span.badge.count= number_with_delimiter(merge_requests.count)
= nav_link(controller: [:group_members]) do
= link_to group_group_members_path(@group), title: 'Members' do
%span
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 3c8c7b8f25e..a8bbd67de80 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -61,14 +61,14 @@
%span
Issues
- if @project.default_issues_tracker?
- %span.badge.badge-dark.count.issue_counter= number_with_delimiter(IssuesFinder.new(current_user, project_id: @project.id).execute.opened.count)
+ %span.badge.count.issue_counter= number_with_delimiter(IssuesFinder.new(current_user, project_id: @project.id).execute.opened.count)
- if project_nav_tab? :merge_requests
= nav_link(controller: :merge_requests) do
= link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
%span
Merge Requests
- %span.badge.badge-dark.count.merge_counter= number_with_delimiter(MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.count)
+ %span.badge.count.merge_counter= number_with_delimiter(MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.count)
- if project_nav_tab? :wiki
= nav_link(controller: :wikis) do
diff --git a/changelogs/unreleased/25701-standardize-text-colors.yml b/changelogs/unreleased/25701-standardize-text-colors.yml
new file mode 100644
index 00000000000..a48ca6c187d
--- /dev/null
+++ b/changelogs/unreleased/25701-standardize-text-colors.yml
@@ -0,0 +1,4 @@
+---
+title: 25701 standardize text colors
+merge_request:
+author:
--
GitLab