Merge branch '241728-update-orange-variables-in-gitlab-to-match-gitlab-ui' into 'master'

Update $orange- variables in GitLab to match GitLab UI

Closes #241728

See merge request gitlab-org/gitlab!40652

app/assets/stylesheets/components/related_items_list.scss

@@ -48,7 +48,7 @@ $item-remove-button-space: 42px;
   }
 
   .confidential-icon {
-    color: $orange-600;
+    color: $orange-500;
   }
 
   .item-title-wrapper {

app/assets/stylesheets/framework/buttons.scss

@@ -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 {

app/assets/stylesheets/framework/callout.scss

@@ -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;
   }
 }
 

app/assets/stylesheets/framework/common.scss

@@ -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 {

app/assets/stylesheets/framework/files.scss

@@ -300,7 +300,7 @@ span.idiff {
 
   .renamed-file {
     a {
-      color: $orange-600;
+      color: $orange-500;
     }
   }
 

app/assets/stylesheets/framework/flash.scss

@@ -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;
   }
 

app/assets/stylesheets/framework/gfm.scss

@@ -13,7 +13,7 @@
   border-radius: $border-radius-default;
 
   &.current-user {
-    background-color: $orange-100;
+    background-color: $orange-50;
   }
 }
 

app/assets/stylesheets/framework/header.scss

@@ -462,7 +462,7 @@
     }
 
     &.merge-requests-count {
-      background-color: $orange-600;
+      background-color: $orange-500;
     }
 
     &.todos-count {

app/assets/stylesheets/framework/lists.scss

@@ -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 {

app/assets/stylesheets/framework/spinner.scss

@@ -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);

app/assets/stylesheets/framework/variables.scss

@@ -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;

app/assets/stylesheets/pages/boards.scss

@@ -284,7 +284,7 @@
   }
 
   .confidential-icon {
-    color: $orange-600;
+    color: $orange-500;
     cursor: help;
   }
 

app/assets/stylesheets/pages/builds.scss

@@ -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;

app/assets/stylesheets/pages/clusters.scss

@@ -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 {

app/assets/stylesheets/pages/dev_ops_score.scss

@@ -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 {

app/assets/stylesheets/pages/issuable.scss

 .issuable-warning-icon {
-  background-color: $orange-100;
+  background-color: $orange-50;
   border-radius: $border-radius-default;
   width: $issuable-warning-size;
   height: $issuable-warning-size;
@@ -979,7 +979,7 @@
 }
 
 .suggestion-confidential {
-  color: $orange-600;
+  color: $orange-500;
 }
 
 .suggestion-state-open {

app/assets/stylesheets/pages/note_form.scss

@@ -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;

app/assets/stylesheets/pages/pipelines.scss

@@ -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,

app/assets/stylesheets/pages/settings.scss

@@ -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 {

app/assets/stylesheets/pages/status.scss

@@ -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,

app/assets/stylesheets/pages/tree.scss

@@ -173,7 +173,7 @@
 
   .tree-truncated-warning {
     color: $orange-600;
-    background-color: $orange-100;
+    background-color: $orange-50;
   }
 
   .tree-time-ago {

app/assets/stylesheets/vendors/atwho.scss

@@ -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;
         }
       }
 

ee/app/assets/stylesheets/components/batch_comments/draft_note.scss

@@ -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;
   }
 }

ee/app/assets/stylesheets/pages/issuable.scss

@@ -106,8 +106,8 @@
     }
 
     &-needs-attention {
-      color: $orange-700;
-      background-color: $orange-100;
+      color: $gray-900;
+      background-color: $orange-50;
     }
 
     &-on-track {

ee/changelogs/unreleased/241728-update-orange-variables-in-gitlab-to-match-gitlab-ui.yml

+---
+title: Update $orange variables to match GitLab UI and address contrast for accessibility
+merge_request: 40652
+author:
+type: other