Change full colors to a more harmonious palette

parent ed808a9f
...@@ -68,23 +68,19 @@ ...@@ -68,23 +68,19 @@
} }
@mixin btn-green { @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 { @mixin btn-blue {
@include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-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-blue-medium {
@include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, $white-light);
} }
@mixin btn-orange { @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 { @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 { @mixin btn-gray {
...@@ -145,11 +141,11 @@ ...@@ -145,11 +141,11 @@
&.btn-new, &.btn-new,
&.btn-create, &.btn-create,
&.btn-save { &.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 { &.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 @@ ...@@ -157,11 +153,8 @@
@include btn-gray; @include btn-gray;
} }
&.btn-primary {
@include btn-blue-medium;
}
&.btn-info, &.btn-info,
&.btn-primary,
&.btn-register { &.btn-register {
@include btn-blue; @include btn-blue;
} }
...@@ -171,11 +164,11 @@ ...@@ -171,11 +164,11 @@
} }
&.btn-close { &.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 { &.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, &.btn-danger,
...@@ -360,7 +353,7 @@ ...@@ -360,7 +353,7 @@
.btn-inverted { .btn-inverted {
&-secondary { &-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);
} }
} }
......
...@@ -195,7 +195,7 @@ ...@@ -195,7 +195,7 @@
text-decoration: none; text-decoration: none;
.badge { .badge {
background-color: darken($row-hover, 5%); background-color: darken($dropdown-link-hover-bg, 5%);
} }
} }
......
...@@ -177,34 +177,34 @@ label { ...@@ -177,34 +177,34 @@ label {
} }
.gl-field-error { .gl-field-error {
color: $red-normal; color: $red-500;
} }
.gl-show-field-errors { .gl-show-field-errors {
.gl-field-success-outline { .gl-field-success-outline {
border: 1px solid $green-normal; border: 1px solid $green-600;
&:focus { &: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; border: 0 none;
} }
} }
.gl-field-error-outline { .gl-field-error-outline {
border: 1px solid $red-normal; border: 1px solid $red-500;
&:focus { &: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; border: 0 none;
} }
} }
.gl-field-success-message { .gl-field-success-message {
color: $green-normal; color: $green-600;
} }
.gl-field-error-message { .gl-field-error-message {
color: $red-normal; color: $red-500;
} }
.gl-field-hint { .gl-field-hint {
......
...@@ -265,7 +265,7 @@ header { ...@@ -265,7 +265,7 @@ header {
} }
.impersonation i { .impersonation i {
color: $red-normal; color: $red-500;
} }
} }
......
.ci-status-icon-success { .ci-status-icon-success {
color: $gl-success; color: $green-500;
svg { svg {
fill: $gl-success; fill: $green-500;
} }
} }
...@@ -17,18 +17,18 @@ ...@@ -17,18 +17,18 @@
.ci-status-icon-pending, .ci-status-icon-pending,
.ci-status-icon-failed_with_warnings, .ci-status-icon-failed_with_warnings,
.ci-status-icon-success_with_warnings { .ci-status-icon-success_with_warnings {
color: $gl-warning; color: $orange-500;
svg { svg {
fill: $gl-warning; fill: $orange-500;
} }
} }
.ci-status-icon-running { .ci-status-icon-running {
color: $blue-normal; color: $blue-400;
svg { svg {
fill: $blue-normal; fill: $blue-400;
} }
} }
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
} }
&.status-box-open { &.status-box-open {
background-color: $green-light; background-color: $green-500;
} }
&.status-box-expired { &.status-box-expired {
......
...@@ -76,28 +76,28 @@ body { ...@@ -76,28 +76,28 @@ body {
/* Stripe the background colors so that adjacent alert-warnings are distinct from one another */ /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
.alert-warning { .alert-warning {
transition: background-color 0.15s, border-color 0.15s; transition: background-color 0.15s, border-color 0.15s;
background-color: lighten($gl-warning, 4%); background-color: $orange-500;
border-color: lighten($gl-warning, 4%); border-color: $orange-500;
} }
.alert-warning + .alert-warning { .alert-warning + .alert-warning {
background-color: $gl-warning; background-color: $orange-600;
border-color: $gl-warning; border-color: $orange-600;
} }
.alert-warning + .alert-warning + .alert-warning { .alert-warning + .alert-warning + .alert-warning {
background-color: darken($gl-warning, 4%); background-color: $orange-700;
border-color: darken($gl-warning, 4%); border-color: $orange-700;
} }
.alert-warning + .alert-warning + .alert-warning + .alert-warning { .alert-warning + .alert-warning + .alert-warning + .alert-warning {
background-color: darken($gl-warning, 8%); background-color: $orange-800;
border-color: darken($gl-warning, 8%); border-color: $orange-800;
} }
.alert-warning:only-of-type { .alert-warning:only-of-type {
background-color: $gl-warning; background-color: $orange-500;
border-color: $gl-warning; border-color: $orange-500;
} }
} }
......
...@@ -122,7 +122,7 @@ ul.content-list { ...@@ -122,7 +122,7 @@ ul.content-list {
} }
.member-group-link { .member-group-link {
color: $blue-normal; color: $blue-600;
} }
.description { .description {
......
...@@ -31,6 +31,7 @@ $border-radius-small: 3px !default; ...@@ -31,6 +31,7 @@ $border-radius-small: 3px !default;
// //
$text-color: $gl-text-color; $text-color: $gl-text-color;
$link-color: $gl-link-color; $link-color: $gl-link-color;
$link-hover-color: $gl-link-hover-color;
//== Typography //== Typography
...@@ -73,7 +74,7 @@ $pagination-hover-color: $gl-text-color; ...@@ -73,7 +74,7 @@ $pagination-hover-color: $gl-text-color;
$pagination-hover-bg: $row-hover; $pagination-hover-bg: $row-hover;
$pagination-hover-border: $border-color; $pagination-hover-border: $border-color;
$pagination-active-color: $blue-dark; $pagination-active-color: $blue-600;
$pagination-active-bg: $white-light; $pagination-active-bg: $white-light;
$pagination-active-border: $border-color; $pagination-active-border: $border-color;
...@@ -135,8 +136,8 @@ $well-border: #eee; ...@@ -135,8 +136,8 @@ $well-border: #eee;
// //
//## //##
$code-color: #c7254e; $code-color: $red-600;
$code-bg: #f9f2f4; $code-bg: lighten($red-50, 2%);
$kbd-color: $white-light; $kbd-color: $white-light;
$kbd-bg: #333; $kbd-bg: #333;
......
...@@ -487,9 +487,9 @@ ...@@ -487,9 +487,9 @@
right: -3px; right: -3px;
top: -3px; top: -3px;
width: 17px; width: 17px;
background-color: $blue-light; background-color: $blue-500;
color: $white-light; color: $white-light;
border: 1px solid $border-blue-light; border: 1px solid $blue-600;
font-size: 9px; font-size: 9px;
line-height: 15px; line-height: 15px;
border-radius: 50%; border-radius: 50%;
......
...@@ -520,12 +520,12 @@ ...@@ -520,12 +520,12 @@
&.over_estimate { &.over_estimate {
.meter-fill { .meter-fill {
background: $red-light; background: $red-500;
} }
.time-remaining, .time-remaining,
.compare-value.spent { .compare-value.spent {
color: $red-light; color: $red-500;
} }
} }
} }
......
...@@ -69,21 +69,17 @@ ul.related-merge-requests > li { ...@@ -69,21 +69,17 @@ ul.related-merge-requests > li {
height: 20px; height: 20px;
border-radius: 3px; border-radius: 3px;
line-height: 18px; line-height: 18px;
border: 1px solid;
&.merged { &.merged {
border-color: darken($blue-normal, 10%); background: $blue-500;
background: $blue-normal;
} }
&.closed { &.closed {
border-color: darken($red-normal, 10%); background: $red-500;
background: $red-normal;
} }
&.open { &.open {
border: 1px solid darken($green-normal, 10%); background: $green-500;
background: $green-normal;
} }
} }
......
...@@ -85,11 +85,11 @@ ...@@ -85,11 +85,11 @@
} }
.username .validation-success { .username .validation-success {
color: $green-normal; color: $green-600;
} }
.username .validation-error { .username .validation-error {
color: $red-normal; color: $red-500;
} }
} }
} }
......
...@@ -255,7 +255,7 @@ $colors: ( ...@@ -255,7 +255,7 @@ $colors: (
&.saved { &.saved {
.editor { .editor {
border-top: solid 2px $border-green-extra-light; border-top: solid 2px $green-200;
} }
} }
......
...@@ -535,7 +535,7 @@ ...@@ -535,7 +535,7 @@
} }
.fa-info-circle { .fa-info-circle {
color: $orange-normal; color: $orange-500;
padding-right: 5px; padding-right: 5px;
} }
} }
......
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
} }
.remaining-days { .remaining-days {
color: $orange-light; color: $orange-600;
} }
.milestone-stats-and-buttons { .milestone-stats-and-buttons {
......
...@@ -462,17 +462,18 @@ ul.notes { ...@@ -462,17 +462,18 @@ ul.notes {
background: $white-light; background: $white-light;
padding: 1px 5px; padding: 1px 5px;
font-size: 12px; font-size: 12px;
color: $gl-link-color; color: $blue-500;
margin-left: -55px; margin-left: -55px;
position: absolute; position: absolute;
z-index: 10; z-index: 10;
width: 23px; width: 23px;
height: 23px; height: 23px;
border: 1px solid $border-color; border: 1px solid $blue-500;
transition: transform .1s ease-in-out; transition: transform .1s ease-in-out;
&:hover { &:hover {
background: $gl-info; background: $blue-500;
border-color: $blue-600;
color: $white-light; color: $white-light;
transform: scale(1.15); transform: scale(1.15);
} }
......
...@@ -667,51 +667,71 @@ ...@@ -667,51 +667,71 @@
// Dropdown button animation in mini pipeline graph // Dropdown button animation in mini pipeline graph
&.ci-status-icon-success { &.ci-status-icon-success {
border-color: $gl-success; border-color: $green-500;
color: $gl-success; color: $green-500;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: rgba($gl-success, 0.1); background-color: $green-50;
border-color: $gl-success; border-color: $green-600;
color: $green-600;
svg {
fill: $green-600;
}
} }
} }
&.ci-status-icon-failed { &.ci-status-icon-failed {
border-color: $gl-danger; border-color: $red-500;
color: $gl-danger; color: $red-500;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: rgba($gl-danger, 0.1); background-color: $red-50;
border-color: $gl-danger; border-color: $red-600;
color: $red-600;
svg {
fill: $red-600;
}
} }
} }
&.ci-status-icon-pending, &.ci-status-icon-pending,
&.ci-status-icon-success_with_warnings { &.ci-status-icon-success_with_warnings {
border-color: $gl-warning; border-color: $orange-500;
color: $gl-warning; color: $orange-500;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: rgba($gl-warning, 0.1); background-color: $orange-50;
border-color: $gl-warning; border-color: $orange-600;
color: $orange-600;
svg {
fill: $orange-600;
}
} }
} }
&.ci-status-icon-running { &.ci-status-icon-running {
border-color: $blue-normal; border-color: $blue-400;
color: $blue-normal; color: $blue-400;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: rgba($blue-normal, 0.1); background-color: $blue-50;
border-color: $blue-normal; border-color: $blue-600;
color: $blue-600;
svg {
fill: $blue-600;
}
} }
} }
......
...@@ -74,7 +74,6 @@ ...@@ -74,7 +74,6 @@
display: inline; display: inline;
a { a {
color: $blue-dark;
text-decoration: none; text-decoration: none;
} }
} }
......
...@@ -28,6 +28,6 @@ table .sherlock-code { ...@@ -28,6 +28,6 @@ table .sherlock-code {
} }
.sherlock-line-samples-table .slow { .sherlock-line-samples-table .slow {
color: $red-light; color: $red-500;
font-weight: bold; font-weight: bold;
} }
...@@ -21,42 +21,41 @@ ...@@ -21,42 +21,41 @@
&.ci-failed, &.ci-failed,
&.ci-failed_with_warnings { &.ci-failed_with_warnings {
color: $gl-danger; color: $red-500;
border-color: $gl-danger; border-color: $red-500;
&:not(span):hover { &: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 { svg {
fill: $gl-danger; fill: $red-500;
} }
} }
&.ci-success, &.ci-success,
&.ci-success_with_warnings { &.ci-success_with_warnings {
color: $gl-success; color: $green-600;
border-color: $gl-success; border-color: $green-500;
&:not(span):hover { &:not(span):hover {
background-color: rgba($gl-success, .07); background-color: $green-50;
} color: $green-700;
border-color: $green-600;
svg {
fill: $gl-success;
}
}
&.ci-info {
color: $gl-info;
border-color: $gl-info;
&:not(span):hover { svg {
background-color: rgba($gl-info, .07); fill: $green-600;
}
} }
svg { svg {
fill: $gl-info; fill: $green-500;
} }
} }
...@@ -75,28 +74,41 @@ ...@@ -75,28 +74,41 @@
} }
&.ci-pending { &.ci-pending {
color: $gl-warning; color: $orange-600;
border-color: $gl-warning; border-color: $orange-500;
&:not(span):hover { &: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 { svg {
fill: $gl-warning; fill: $orange-500;
} }
} }
&.ci-info,
&.ci-running { &.ci-running {
color: $blue-normal; color: $blue-500;
border-color: $blue-normal; border-color: $blue-500;
&:not(span):hover { &: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 { svg {
fill: $blue-normal; fill: $blue-500;
} }
} }
......
---
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