BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 48079c31 by Annabel Dunstone Gray
Options

Merge branch '28614-harmonious-color-palette' into 'master'

Change full colors to a more harmonious palette Closes #28614 See merge request !10154
parents 27c4d339 c8fd7025
Showing with 249 additions and 221 deletions
app/assets/stylesheets/framework/buttons.scss
......@@ -68,23 +68,19 @@
}
@mixin btn-green {
@include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, $white-light);
@include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white-light);
}
@mixin btn-blue {
@include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, $white-light);
}
@mixin btn-blue-medium {
@include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, $white-light);
@include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-light);
}
@mixin btn-orange {
@include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, $white-light);
@include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white-light);
}
@mixin btn-red {
@include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, $white-light);
@include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-light);
}
@mixin btn-gray {
......@@ -145,11 +141,11 @@
&.btn-new,
&.btn-create,
&.btn-save {
@include btn-outline($white-light, $border-green-light, $border-green-light, $green-light, $white-light, $border-green-light, $green-normal, $border-green-normal);
@include btn-outline($white-light, $green-600, $green-500, $green-500, $white-light, $green-600, $green-600, $green-700);
}
&.btn-remove {
@include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
@include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
}
}
......@@ -157,11 +153,8 @@
@include btn-gray;
}
&.btn-primary {
@include btn-blue-medium;
}
&.btn-info,
&.btn-primary,
&.btn-register {
@include btn-blue;
}
......@@ -171,11 +164,11 @@
}
&.btn-close {
@include btn-outline($white-light, $border-orange-light, $border-orange-light, $orange-light, $white-light, $border-orange-light, $orange-normal, $border-orange-normal);
@include btn-outline($white-light, $orange-600, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700);
}
&.btn-spam {
@include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
@include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
}
&.btn-danger,
......@@ -360,7 +353,7 @@
.btn-inverted {
&-secondary {
@include btn-outline($white-light, $border-blue-light, $border-blue-light, $blue-light, $white-light, $border-blue-light, $blue-normal, $border-blue-normal);
@include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);
}
}
......
app/assets/stylesheets/framework/dropdowns.scss
......@@ -195,7 +195,7 @@
text-decoration: none;
.badge {
background-color: darken($row-hover, 5%);
background-color: darken($dropdown-link-hover-bg, 5%);
}
}
......
app/assets/stylesheets/framework/forms.scss
......@@ -177,34 +177,34 @@ label {
}
.gl-field-error {
color: $red-normal;
color: $red-500;
}
.gl-show-field-errors {
.gl-field-success-outline {
border: 1px solid $green-normal;
border: 1px solid $green-600;
&:focus {
box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-normal;
box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
border: 0 none;
}
}
.gl-field-error-outline {
border: 1px solid $red-normal;
border: 1px solid $red-500;
&:focus {
box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
border: 0 none;
}
}
.gl-field-success-message {
color: $green-normal;
color: $green-600;
}
.gl-field-error-message {
color: $red-normal;
color: $red-500;
}
.gl-field-hint {
......
app/assets/stylesheets/framework/header.scss
......@@ -265,7 +265,7 @@ header {
}
.impersonation i {
color: $red-normal;
color: $red-500;
}
}
......
app/assets/stylesheets/framework/icons.scss
.ci-status-icon-success {
color: $gl-success;
color: $green-500;
svg {
fill: $gl-success;
fill: $green-500;
}
}
......@@ -17,18 +17,18 @@
.ci-status-icon-pending,
.ci-status-icon-failed_with_warnings,
.ci-status-icon-success_with_warnings {
color: $gl-warning;
color: $orange-500;
svg {
fill: $gl-warning;
fill: $orange-500;
}
}
.ci-status-icon-running {
color: $blue-normal;
color: $blue-400;
svg {
fill: $blue-normal;
fill: $blue-400;
}
}
......
app/assets/stylesheets/framework/issue_box.scss
......@@ -33,7 +33,7 @@
}
&.status-box-open {
background-color: $green-light;
background-color: $green-500;
}
&.status-box-expired {
......
app/assets/stylesheets/framework/layout.scss
......@@ -76,28 +76,28 @@ body {
/* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
.alert-warning {
transition: background-color 0.15s, border-color 0.15s;
background-color: lighten($gl-warning, 4%);
border-color: lighten($gl-warning, 4%);
background-color: $orange-500;
border-color: $orange-500;
}
.alert-warning + .alert-warning {
background-color: $gl-warning;
border-color: $gl-warning;
background-color: $orange-600;
border-color: $orange-600;
}
.alert-warning + .alert-warning + .alert-warning {
background-color: darken($gl-warning, 4%);
border-color: darken($gl-warning, 4%);
background-color: $orange-700;
border-color: $orange-700;
}
.alert-warning + .alert-warning + .alert-warning + .alert-warning {
background-color: darken($gl-warning, 8%);
border-color: darken($gl-warning, 8%);
background-color: $orange-800;
border-color: $orange-800;
}
.alert-warning:only-of-type {
background-color: $gl-warning;
border-color: $gl-warning;
background-color: $orange-500;
border-color: $orange-500;
}
}
......
app/assets/stylesheets/framework/lists.scss
......@@ -122,7 +122,7 @@ ul.content-list {
}
.member-group-link {
color: $blue-normal;
color: $blue-600;
}
.description {
......
app/assets/stylesheets/framework/tw_bootstrap_variables.scss
......@@ -31,6 +31,7 @@ $border-radius-small: 3px !default;
//
$text-color: $gl-text-color;
$link-color: $gl-link-color;
$link-hover-color: $gl-link-hover-color;
//== Typography
......@@ -73,7 +74,7 @@ $pagination-hover-color: $gl-text-color;
$pagination-hover-bg: $row-hover;
$pagination-hover-border: $border-color;
$pagination-active-color: $blue-dark;
$pagination-active-color: $blue-600;
$pagination-active-bg: $white-light;
$pagination-active-border: $border-color;
......@@ -135,8 +136,8 @@ $well-border: #eee;
//
//##
$code-color: #c7254e;
$code-bg: #f9f2f4;
$code-color: $red-600;
$code-bg: lighten($red-50, 2%);
$kbd-color: $white-light;
$kbd-bg: #333;
......
app/assets/stylesheets/framework/variables.scss
......@@ -26,27 +26,49 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
$gray-darker: #eee;
$gray-darkest: #c4c4c4;
$green-light: #3cbd70;
$green-normal: darken($green-light, $darken-normal-factor);
$green-dark: darken($green-light, $darken-dark-factor);
$blue-light: #2ea8e5;
$blue-normal: darken($blue-light, $darken-normal-factor);
$blue-dark: darken($blue-light, $darken-dark-factor);
$blue-medium-light: #3498cb;
$blue-medium: darken($blue-medium-light, $darken-normal-factor);
$blue-medium-dark: darken($blue-medium-light, $darken-dark-factor);
$blue-light-transparent: rgba(44, 159, 216, 0.05);
$orange-light: #fc8a51;
$orange-normal: darken($orange-light, $darken-normal-factor);
$orange-dark: darken($orange-light, $darken-dark-factor);
$red-light: #eb4d5c;
$red-normal: darken($red-light, $darken-normal-factor);
$red-dark: darken($red-light, $darken-dark-factor);
$green-50: #e4f5eb;
$green-100: #bae6cc;
$green-200: #8dd5aa;
$green-300: #5fc488;
$green-400: #3cb76f;
$green-500: #1aaa55;
$green-600: #168f48;
$green-700: #12753a;
$green-800: #0e5a2d;
$green-900: #0a4020;
$blue-50: #e4eff9;
$blue-100: #bcd7f1;
$blue-200: #8fbce8;
$blue-300: #62a1df;
$blue-400: #418cd8;
$blue-500: #1f78d1;
$blue-600: #1b69b6;
$blue-700: #17599c;
$blue-800: #134a81;
$blue-900: #0f3b66;
$orange-50: #fff2e1;
$orange-100: #fedfb3;
$orange-200: #feca81;
$orange-300: #fdb44f;
$orange-400: #fca429;
$orange-500: #fc9403;
$orange-600: #de7e00;
$orange-700: #c26700;
$orange-800: #a35100;
$orange-900: #853b00;
$red-50: #fbe7e4;
$red-100: #f4c4bc;
$red-200: #ed9d90;
$red-300: #e67664;
$red-400: #e05842;
$red-500: #db3b21;
$red-600: #c0341d;
$red-700: #a62d19;
$red-800: #8b2615;
$red-900: #711e11;
$black: #000;
$black-transparent: rgba(0, 0, 0, 0.3);
......@@ -58,32 +80,11 @@ $border-gray-light: darken($gray-light, $darken-border-factor);
$border-gray-normal: darken($gray-normal, $darken-border-factor);
$border-gray-dark: darken($white-normal, $darken-border-factor);
$border-green-extra-light: #9adb84;
$border-green-light: darken($green-light, $darken-border-factor);
$border-green-normal: darken($green-normal, $darken-border-factor);
$border-green-dark: darken($green-dark, $darken-border-factor);
$border-blue-light: darken($blue-light, $darken-border-factor);
$border-blue-normal: darken($blue-normal, $darken-border-factor);
$border-blue-dark: darken($blue-dark, $darken-border-factor);
$border-orange-light: darken($orange-light, $darken-border-factor);
$border-orange-normal: darken($orange-normal, $darken-border-factor);
$border-orange-dark: darken($orange-dark, $darken-border-factor);
$border-red-light: darken($red-light, $darken-border-factor);
$border-red-normal: darken($red-normal, $darken-border-factor);
$border-red-dark: darken($red-dark, $darken-border-factor);
$warning-message-bg: #fbf2d9;
$warning-message-color: #9e8e60;
$warning-message-border: #f0e2bb;
/*
* UI elements
*/
$border-color: #e5e5e5;
$focus-border-color: #3aabf0;
$focus-border-color: $blue-300;
$well-expand-item: #e8f2f7;
$well-inner-border: #eef0f2;
$well-light-border: #f1f1f1;
......@@ -96,10 +97,11 @@ $gl-font-size: 14px;
$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-text-green: $green-600;
$gl-text-red: $red-500;
$gl-text-orange: $orange-600;
$gl-link-color: $blue-600;
$gl-link-hover-color: $blue-800;
$gl-grayish-blue: #7f8fa4;
$gl-gray: $gl-text-color;
$gl-gray-dark: #313236;
......@@ -116,9 +118,9 @@ $list-text-disabled-color: $gl-text-color-disabled;
$list-border-light: #eee;
$list-border: rgba(0, 0, 0, 0.05);
$list-text-height: 42px;
$list-warning-row-bg: #fcf8e3;
$list-warning-row-border: #faebcc;
$list-warning-row-color: #8a6d3b;
$list-warning-row-bg: $orange-50;
$list-warning-row-border: $orange-100;
$list-warning-row-color: $orange-700;
/*
* Markdown
......@@ -145,24 +147,24 @@ $gl-sidebar-padding: 22px;
/*
* Misc
*/
$row-hover: #f7faff;
$row-hover-border: #b2d7ff;
$row-hover: lighten($blue-50, 2%);
$row-hover-border: $blue-100;
$progress-color: #c0392b;
$header-height: 50px;
$fixed-layout-width: 1280px;
$limited-layout-width: 990px;
$gl-avatar-size: 40px;
$error-exclamation-point: #e62958;
$error-exclamation-point: $red-500;
$border-radius-default: 2px;
$settings-icon-size: 18px;
$provider-btn-not-active-color: #4688f1;
$link-underline-blue: #4a8bee;
$active-item-blue: #4a8bee;
$provider-btn-not-active-color: $blue-500;
$link-underline-blue: $blue-500;
$active-item-blue: $blue-500;
$layout-link-gray: #7e7c7c;
$btn-side-margin: 10px;
$btn-sm-side-margin: 7px;
$btn-xs-side-margin: 5px;
$issue-status-expired: #cea61b;
$issue-status-expired: $orange-500;
$issuable-sidebar-color: $gl-text-color-secondary;
$show-aside-bg: #eee;
$show-aside-color: #777;
......@@ -191,10 +193,10 @@ $user-mention-color: #2fa0bb;
$time-color: #999;
$project-member-show-color: #aaa;
$gl-promo-color: #aaa;
$error-bg: #c67;
$warning-message-bg: #ffffe6;
$warning-message-border: #ed9;
$warning-message-color: #b90;
$error-bg: $red-400;
$warning-message-bg: $orange-50;
$warning-message-border: $orange-100;
$warning-message-color: $orange-700;
$control-group-descr-color: #666;
$table-permission-x-bg: #d9edf7;
$username-color: #666;
......@@ -209,30 +211,30 @@ $tanuki-yellow: #fca326;
/*
* State colors:
*/
$gl-primary: $blue-normal;
$gl-success: $green-normal;
$gl-primary: $blue-500;
$gl-success: $green-500;
$gl-success-focus: rgba($gl-success, .4);
$gl-info: $blue-normal;
$gl-warning: $orange-normal;
$gl-danger: $red-normal;
$gl-info: $blue-500;
$gl-warning: $orange-500;
$gl-danger: $red-500;
$gl-btn-active-background: rgba(0, 0, 0, 0.16);
$gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
/*
* Commit Diff Colors
*/
$added: #63c363;
$deleted: #f77;
$line-added: #ecfdf0;
$line-added-dark: #c7f0d2;
$line-removed: #fbe9eb;
$line-removed-dark: #fac5cd;
$line-number-old: #f9d7dc;
$line-number-new: #ddfbe6;
$line-number-select: #fbf2da;
$line-target-blue: #f6faff;
$line-select-yellow: #fcf8e7;
$line-select-yellow-dark: #f0e2bd;
$added: $green-300;
$deleted: $red-300;
$line-added: $green-50;
$line-added-dark: $green-100;
$line-removed: $red-50;
$line-removed-dark: $red-100;
$line-number-old: lighten($red-100, 5%);
$line-number-new: lighten($green-100, 5%);
$line-number-select: lighten($orange-100, 5%);
$line-target-blue: $blue-50;
$line-select-yellow: $orange-50;
$line-select-yellow-dark: $orange-100;
$dark-diff-match-bg: rgba(255, 255, 255, 0.3);
$dark-diff-match-color: rgba(255, 255, 255, 0.1);
$file-mode-changed: #777;
......@@ -272,7 +274,7 @@ $dropdown-toggle-active-border-color: darken($border-color, 14%);
/*
* Filtered Search
*/
$dropdown-hover-color: #3b86ff;
$dropdown-hover-color: $blue-400;
/*
* Buttons
......@@ -295,10 +297,10 @@ $award-emoji-menu-shadow: rgba(0,0,0,.175);
/*
* Search Box
*/
$search-input-border-color: rgba(#4688f1, .8);
$search-input-border-color: rgba($blue-400, .8);
$search-input-focus-shadow-color: $dropdown-input-focus-shadow;
$search-input-width: 220px;
$location-badge-active-bg: #4f91f8;
$location-badge-active-bg: $blue-500;
$location-icon-color: #e7e9ed;
/*
......@@ -360,18 +362,18 @@ $builds-trace-bg: #111;
/*
* Callout
*/
$callout-danger-bg: #fdf7f7;
$callout-danger-border: #eed3d7;
$callout-danger-color: #b94a48;
$callout-warning-bg: #faf8f0;
$callout-warning-border: #faebcc;
$callout-warning-color: #8a6d3b;
$callout-info-bg: #f4f8fa;
$callout-info-border: #bce8f1;
$callout-info-color: #34789a;
$callout-success-bg: #dff0d8;
$callout-success-border: #5ca64d;
$callout-success-color: #3c763d;
$callout-danger-bg: $red-50;
$callout-danger-border: $red-100;
$callout-danger-color: $red-700;
$callout-warning-bg: $orange-50;
$callout-warning-border: $orange-100;
$callout-warning-color: $orange-700;
$callout-info-bg: $blue-50;
$callout-info-border: $blue-100;
$callout-info-color: $blue-700;
$callout-success-bg: $green-50;
$callout-success-border: $green-100;
$callout-success-color: $green-700;
/*
* Commit Page
......@@ -391,7 +393,7 @@ $common-green: $gl-text-green;
/*
* Editor
*/
$editor-cancel-color: #b94a48;
$editor-cancel-color: $red-600;
/*
* Events
......@@ -415,10 +417,10 @@ $logs-p-color: #333;
* Forms
*/
$input-danger-bg: #f2dede;
$input-danger-border: #d66;
$input-danger-border: $red-400;
$input-group-addon-bg: #f7f8fa;
$gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
$gl-field-focus-shadow-error: rgba(210, 40, 82, 0.6);
$gl-field-focus-shadow-error: rgba($red-500, 0.6);
/*
* Help
......@@ -452,14 +454,14 @@ $label-border-radius: 100px;
/*
* Lint
*/
$lint-incorrect-color: red;
$lint-correct-color: #47a447;
$lint-incorrect-color: $red-500;
$lint-correct-color: $green-500;
/*
* Login
*/
$login-brand-holder-color: #888;
$login-devise-error-color: #a00;
$login-devise-error-color: $red-700;
/*
* Nav
......@@ -473,33 +475,33 @@ $nav-toggle-gray: #666;
*/
$notify-details: #777;
$notify-footer: #777;
$notify-new-file: #090;
$notify-deleted-file: #b00;
$notify-new-file: $green-600;
$notify-deleted-file: $red-700;
/*
* Projects
*/
$project-option-descr-color: #54565b;
$project-breadcrumb-color: #999;
$project-private-forks-notice-odd: #2aa056;
$project-private-forks-notice-odd: $green-600;
$project-network-controls-color: #888;
/*
* Runners
*/
$runner-state-shared-bg: #32b186;
$runner-state-specific-bg: #3498db;
$runner-status-online-color: $green-normal;
$runner-state-shared-bg: $green-400;
$runner-state-specific-bg: $blue-400;
$runner-status-online-color: $green-600;
$runner-status-offline-color: $gray-darkest;
$runner-status-paused-color: $red-normal;
$runner-status-paused-color: $red-500;
/*
Stat Graph
*/
$stat-graph-common-bg: #f3f3f3;
$stat-graph-area-fill: #1db34f;
$stat-graph-area-fill: $green-500;
$stat-graph-axis-fill: #aaa;
$stat-graph-orange-fill: #f17f49;
$stat-graph-orange-fill: $orange-500;
$stat-graph-selection-fill: #333;
$stat-graph-selection-stroke: #333;
......@@ -513,7 +515,7 @@ $select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
/*
* Todo
*/
$todo-alert-blue: #428bca;
$todo-alert-blue: $blue-500;
$todo-body-pre-color: #777;
$todo-body-border: #ddd;
......
app/assets/stylesheets/pages/boards.scss
......@@ -487,9 +487,9 @@
right: -3px;
top: -3px;
width: 17px;
background-color: $blue-light;
background-color: $blue-500;
color: $white-light;
border: 1px solid $border-blue-light;
border: 1px solid $blue-600;
font-size: 9px;
line-height: 15px;
border-radius: 50%;
......
app/assets/stylesheets/pages/issuable.scss
......@@ -520,12 +520,12 @@
&.over_estimate {
.meter-fill {
background: $red-light;
background: $red-500;
}
.time-remaining,
.compare-value.spent {
color: $red-light;
color: $red-500;
}
}
}
......
app/assets/stylesheets/pages/issues.scss
......@@ -69,21 +69,17 @@ ul.related-merge-requests > li {
height: 20px;
border-radius: 3px;
line-height: 18px;
border: 1px solid;
&.merged {
border-color: darken($blue-normal, 10%);
background: $blue-normal;
background: $blue-500;
}
&.closed {
border-color: darken($red-normal, 10%);
background: $red-normal;
background: $red-500;
}
&.open {
border: 1px solid darken($green-normal, 10%);
background: $green-normal;
background: $green-500;
}
}
......
app/assets/stylesheets/pages/login.scss
......@@ -85,11 +85,11 @@
}
.username .validation-success {
color: $green-normal;
color: $green-600;
}
.username .validation-error {
color: $red-normal;
color: $red-500;
}
}
}
......
app/assets/stylesheets/pages/merge_conflicts.scss
......@@ -255,7 +255,7 @@ $colors: (
&.saved {
.editor {
border-top: solid 2px $border-green-extra-light;
border-top: solid 2px $green-200;
}
}
......
app/assets/stylesheets/pages/merge_requests.scss
......@@ -535,7 +535,7 @@
}
.fa-info-circle {
color: $orange-normal;
color: $orange-500;
padding-right: 5px;
}
}
......
app/assets/stylesheets/pages/milestone.scss
......@@ -63,7 +63,7 @@
}
.remaining-days {
color: $orange-light;
color: $orange-600;
}
.milestone-stats-and-buttons {
......
app/assets/stylesheets/pages/notes.scss
......@@ -462,17 +462,18 @@ ul.notes {
background: $white-light;
padding: 1px 5px;
font-size: 12px;
color: $gl-link-color;
color: $blue-500;
margin-left: -55px;
position: absolute;
z-index: 10;
width: 23px;
height: 23px;
border: 1px solid $border-color;
border: 1px solid $blue-500;
transition: transform .1s ease-in-out;
&:hover {
background: $gl-info;
background: $blue-500;
border-color: $blue-600;
color: $white-light;
transform: scale(1.15);
}
......
app/assets/stylesheets/pages/pipelines.scss
......@@ -673,51 +673,71 @@
// Dropdown button animation in mini pipeline graph
&.ci-status-icon-success {
border-color: $gl-success;
color: $gl-success;
border-color: $green-500;
color: $green-500;
&:hover,
&:focus,
&:active {
background-color: rgba($gl-success, 0.1);
border-color: $gl-success;
background-color: $green-50;
border-color: $green-600;
color: $green-600;
svg {
fill: $green-600;
}
}
}
&.ci-status-icon-failed {
border-color: $gl-danger;
color: $gl-danger;
border-color: $red-500;
color: $red-500;
&:hover,
&:focus,
&:active {
background-color: rgba($gl-danger, 0.1);
border-color: $gl-danger;
background-color: $red-50;
border-color: $red-600;
color: $red-600;
svg {
fill: $red-600;
}
}
}
&.ci-status-icon-pending,
&.ci-status-icon-success_with_warnings {
border-color: $gl-warning;
color: $gl-warning;
border-color: $orange-500;
color: $orange-500;
&:hover,
&:focus,
&:active {
background-color: rgba($gl-warning, 0.1);
border-color: $gl-warning;
background-color: $orange-50;
border-color: $orange-600;
color: $orange-600;
svg {
fill: $orange-600;
}
}
}
&.ci-status-icon-running {
border-color: $blue-normal;
color: $blue-normal;
border-color: $blue-400;
color: $blue-400;
&:hover,
&:focus,
&:active {
background-color: rgba($blue-normal, 0.1);
border-color: $blue-normal;
background-color: $blue-50;
border-color: $blue-600;
color: $blue-600;
svg {
fill: $blue-600;
}
}
}
......
app/assets/stylesheets/pages/profile.scss
......@@ -74,7 +74,6 @@
display: inline;
a {
color: $blue-dark;
text-decoration: none;
}
}
......
app/assets/stylesheets/pages/sherlock.scss
......@@ -28,6 +28,6 @@ table .sherlock-code {
}
.sherlock-line-samples-table .slow {
color: $red-light;
color: $red-500;
font-weight: bold;
}
app/assets/stylesheets/pages/status.scss
......@@ -21,42 +21,41 @@
&.ci-failed,
&.ci-failed_with_warnings {
color: $gl-danger;
border-color: $gl-danger;
color: $red-500;
border-color: $red-500;
&:not(span):hover {
background-color: rgba($gl-danger, .07);
background-color: $red-50;
color: $red-600;
border-color: $red-600;
svg {
fill: $red-600;
}
}
svg {
fill: $gl-danger;
fill: $red-500;
}
}
&.ci-success,
&.ci-success_with_warnings {
color: $gl-success;
border-color: $gl-success;
color: $green-600;
border-color: $green-500;
&:not(span):hover {
background-color: rgba($gl-success, .07);
}
svg {
fill: $gl-success;
}
}
&.ci-info {
color: $gl-info;
border-color: $gl-info;
background-color: $green-50;
color: $green-700;
border-color: $green-600;
&:not(span):hover {
background-color: rgba($gl-info, .07);
svg {
fill: $green-600;
}
}
svg {
fill: $gl-info;
fill: $green-500;
}
}
......@@ -75,28 +74,41 @@
}
&.ci-pending {
color: $gl-warning;
border-color: $gl-warning;
color: $orange-600;
border-color: $orange-500;
&:not(span):hover {
background-color: rgba($gl-warning, .07);
background-color: $orange-50;
color: $orange-700;
border-color: $orange-600;
svg {
fill: $orange-600;
}
}
svg {
fill: $gl-warning;
fill: $orange-500;
}
}
&.ci-info,
&.ci-running {
color: $blue-normal;
border-color: $blue-normal;
color: $blue-500;
border-color: $blue-500;
&:not(span):hover {
background-color: rgba($blue-normal, .07);
background-color: $blue-50;
color: $blue-600;
border-color: $blue-600;
svg {
fill: $blue-600;
}
}
svg {
fill: $blue-normal;
fill: $blue-500;
}
}
......
changelogs/unreleased/28614-harmonious-color-palette.yml 0 → 100644
---
title: Update color palette to a more harmonious and consistent one.
merge_request: 10154
author:
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