Commit 6ff078cd authored by Jeremy Elder's avatar Jeremy Elder Committed by Simon Knox

Updating $orange variables

Updating each $orange hex and evaluating usage for each instance.
parent a8ed9972
......@@ -48,7 +48,7 @@ $item-remove-button-space: 42px;
}
.confidential-icon {
color: $orange-600;
color: $orange-500;
}
.item-title-wrapper {
......
......@@ -112,7 +112,7 @@
}
@mixin btn-orange {
@include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white);
@include btn-color($orange-500, $orange-600, $orange-500, $orange-600, $orange-600, $orange-800, $white);
}
@mixin btn-red {
......@@ -182,7 +182,7 @@
}
&.btn-warning {
@include btn-outline($white, $orange-500, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
@include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700);
}
&.btn-primary,
......@@ -202,7 +202,7 @@
&.btn-close,
&.btn-close-color {
@include btn-outline($white, $orange-600, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800);
@include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700);
}
&.btn-spam {
......
......@@ -37,12 +37,12 @@
}
.bs-callout-warning {
background-color: $orange-100;
background-color: $orange-50;
border-color: $orange-200;
color: $orange-900;
color: $gray-900;
a {
color: $orange-900;
color: $blue-600;
}
}
......
......@@ -237,7 +237,7 @@ li.note {
}
.warning_message {
@include message($orange-100, $orange-200, $orange-800);
@include message($orange-50, $orange-200, $gray-900);
}
.danger_message {
......
......@@ -300,7 +300,7 @@ span.idiff {
.renamed-file {
a {
color: $orange-600;
color: $orange-500;
}
}
......
......@@ -65,8 +65,8 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
}
.flash-warning {
background-color: $orange-100;
color: $orange-800;
background-color: $orange-50;
color: $gray-900;
cursor: default;
}
......
......@@ -13,7 +13,7 @@
border-radius: $border-radius-default;
&.current-user {
background-color: $orange-100;
background-color: $orange-50;
}
}
......
......@@ -462,7 +462,7 @@
}
&.merge-requests-count {
background-color: $orange-600;
background-color: $orange-500;
}
&.todos-count {
......
......@@ -34,17 +34,6 @@
}
}
&.warning-row {
background-color: $orange-100;
border-color: $orange-200;
color: $orange-700;
&:hover {
background: $orange-100;
}
}
&.smoke { background-color: $gray-light; }
&:last-child {
......
......@@ -31,7 +31,7 @@
border-style: solid;
display: inline-flex;
@include spinner-size(16px, 2px);
@include spinner-color($orange-600);
@include spinner-color($orange-400);
&.spinner-md {
@include spinner-size(32px, 3px);
......
......@@ -128,17 +128,17 @@ $blue-800: #064787 !default;
$blue-900: #033464 !default;
$blue-950: #002850 !default;
$orange-50: #fffaf4 !default;
$orange-100: #fff1de !default;
$orange-200: #fed69f !default;
$orange-300: #fdbc60 !default;
$orange-400: #fca429 !default;
$orange-500: #fc9403 !default;
$orange-600: #de7e00 !default;
$orange-700: #c26700 !default;
$orange-800: #a35200 !default;
$orange-900: #853c00 !default;
$orange-950: #592800 !default;
$orange-50: #fdf1dd !default;
$orange-100: #f5d9a8 !default;
$orange-200: #e9be74 !default;
$orange-300: #d99530 !default;
$orange-400: #c17d10 !default;
$orange-500: #ab6100 !default;
$orange-600: #9e5400 !default;
$orange-700: #8f4700 !default;
$orange-800: #703800 !default;
$orange-900: #5c2900 !default;
$orange-950: #421f00 !default;
$red-50: #fcf1ef !default;
$red-100: #fdd4cd !default;
......
......@@ -283,7 +283,7 @@
}
.confidential-icon {
color: $orange-600;
color: $orange-500;
cursor: help;
}
......
......@@ -50,7 +50,7 @@
top: $header-height;
border-radius: 2px 2px 0 0;
color: $orange-600;
background-color: $orange-100;
background-color: $orange-50;
border: 1px solid $border-gray-normal;
padding: 3px 12px;
margin: auto;
......
......@@ -69,7 +69,7 @@
align-self: flex-start;
font-weight: 500;
font-size: 20px;
color: $orange-900;
color: $orange-500;
opacity: 1;
margin: $gl-padding-8 14px 0 0;
}
......@@ -156,7 +156,7 @@
}
.cluster-deployments-warning {
color: $orange-600;
color: $orange-500;
}
.badge.pods-badge {
......
......@@ -88,7 +88,7 @@ $space-between-cards: 8px;
}
.devops-card-average {
border-top-color: $orange-400;
border-top-color: $orange-200;
.board-card-score-big {
background-color: $orange-50;
......@@ -247,7 +247,7 @@ $space-between-cards: 8px;
}
.devops-average-score {
color: $orange-400;
color: $orange-500;
}
.devops-low-score {
......
.issuable-warning-icon {
background-color: $orange-100;
background-color: $orange-50;
border-radius: $border-radius-default;
width: $issuable-warning-size;
height: $issuable-warning-size;
......@@ -982,7 +982,7 @@
}
.suggestion-confidential {
color: $orange-600;
color: $orange-500;
}
.suggestion-state-open {
......
......@@ -97,7 +97,7 @@
.issuable-note-warning {
color: $orange-600;
background-color: $orange-100;
background-color: $orange-50;
border-radius: $border-radius-default $border-radius-default 0 0;
border: 1px solid $border-gray-normal;
border-bottom: 0;
......
......@@ -781,7 +781,7 @@
&.ci-status-icon-pending,
&.ci-status-icon-waiting-for-resource,
&.ci-status-icon-success-with-warnings {
@include mini-pipeline-graph-color($white, $orange-100, $orange-200, $orange-500, $orange-600, $orange-700);
@include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
}
&.ci-status-icon-preparing,
......
......@@ -124,8 +124,8 @@
.settings-message {
padding: 5px;
line-height: 1.3;
color: $orange-700;
background-color: $orange-100;
color: $gray-900;
background-color: $orange-50;
border: 1px solid $orange-200;
border-radius: $border-radius-base;
}
......@@ -135,7 +135,7 @@
}
.warning-title {
color: $orange-500;
color: $gray-900;
}
.danger-title {
......
......@@ -43,7 +43,7 @@
&.ci-waiting-for-resource,
&.ci-failed-with-warnings,
&.ci-success-with-warnings {
@include status-color($orange-100, $orange-500, $orange-700);
@include status-color($orange-50, $orange-500, $orange-700);
}
&.ci-info,
......
......@@ -173,7 +173,7 @@
.tree-truncated-warning {
color: $orange-600;
background-color: $orange-100;
background-color: $orange-50;
}
.tree-time-ago {
......
......@@ -24,8 +24,8 @@
.has-warning {
.description {
color: $orange-700;
background-color: $orange-100;
color: $gray-900;
background-color: $orange-50;
}
}
......@@ -58,7 +58,7 @@
}
&.has-warning {
color: $orange-700;
color: $orange-500;
}
}
......
......@@ -5,7 +5,7 @@ $draft-actions-left-margin: 40px + $gl-padding;
background: $orange-50;
.referenced-commands.draft-note-commands {
background: $orange-100;
background: $orange-50;
font-size: $label-font-size;
margin: 0 0 $gl-padding $draft-actions-left-margin;
}
......@@ -35,7 +35,7 @@ button[disabled] {
}
.draft-pending-label {
background: $orange-600;
background: $orange-500;
color: $white;
vertical-align: text-top;
}
......@@ -72,6 +72,6 @@ button[disabled] {
.frame,
.diff-discussions {
.badge.is-draft {
background-color: $orange-600;
background-color: $orange-500;
}
}
......@@ -106,8 +106,8 @@
}
&-needs-attention {
color: $orange-700;
background-color: $orange-100;
color: $gray-900;
background-color: $orange-50;
}
&-on-track {
......
---
title: Update $orange variables to match GitLab UI and address contrast for accessibility
merge_request: 40652
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