Replaced colors with common names

Uses final mapping of hex values to colors and sets default color

Updated HEX and Names to match colorcode.is

Matches the hex values to colors from colorcode

Fixed capitalization mistakes

Remaps the names to match the hex values

Updates the colors and default color

Ran yarn prettier

Regenerated gitlab pot

Replaced RGB in test

Updated GraphQL schema

Added a changelog

Added MR number and author

app/helpers/labels_helper.rb

@@ -80,27 +80,27 @@ module LabelsHelper
 
   def suggested_colors
     {
-      '#0033CC' => s_('SuggestedColors|UA blue'),
-      '#428BCA' => s_('SuggestedColors|Moderate blue'),
-      '#44AD8E' => s_('SuggestedColors|Lime green'),
-      '#A8D695' => s_('SuggestedColors|Feijoa'),
-      '#5CB85C' => s_('SuggestedColors|Slightly desaturated green'),
-      '#69D100' => s_('SuggestedColors|Bright green'),
-      '#004E00' => s_('SuggestedColors|Very dark lime green'),
-      '#34495E' => s_('SuggestedColors|Very dark desaturated blue'),
-      '#7F8C8D' => s_('SuggestedColors|Dark grayish cyan'),
-      '#A295D6' => s_('SuggestedColors|Slightly desaturated blue'),
-      '#5843AD' => s_('SuggestedColors|Dark moderate blue'),
-      '#8E44AD' => s_('SuggestedColors|Dark moderate violet'),
-      '#FFECDB' => s_('SuggestedColors|Very pale orange'),
-      '#AD4363' => s_('SuggestedColors|Dark moderate pink'),
-      '#D10069' => s_('SuggestedColors|Strong pink'),
-      '#CC0033' => s_('SuggestedColors|Strong red'),
-      '#FF0000' => s_('SuggestedColors|Pure red'),
-      '#D9534F' => s_('SuggestedColors|Soft red'),
-      '#D1D100' => s_('SuggestedColors|Strong yellow'),
-      '#F0AD4E' => s_('SuggestedColors|Soft orange'),
-      '#AD8D43' => s_('SuggestedColors|Dark moderate orange')
+      '#009966' => s_('SuggestedColors|Green-cyan'),
+      '#8fbc8f' => s_('SuggestedColors|Dark sea green'),
+      '#3cb371' => s_('SuggestedColors|Medium sea green'),
+      '#00b140' => s_('SuggestedColors|Green screen'),
+      '#013220' => s_('SuggestedColors|Dark green'),
+      '#6699cc' => s_('SuggestedColors|Blue-gray'),
+      '#0000ff' => s_('SuggestedColors|Blue'),
+      '#e6e6fa' => s_('SuggestedColors|Lavendar'),
+      '#9400d3' => s_('SuggestedColors|Dark violet'),
+      '#330066' => s_('SuggestedColors|Deep violet'),
+      '#808080' => s_('SuggestedColors|Gray'),
+      '#36454f' => s_('SuggestedColors|Charcoal grey'),
+      '#f7e7ce' => s_('SuggestedColors|Champagne'),
+      '#c21e56' => s_('SuggestedColors|Rose red'),
+      '#cc338b' => s_('SuggestedColors|Magenta-pink'),
+      '#dc143c' => s_('SuggestedColors|Crimson'),
+      '#ff0000' => s_('SuggestedColors|Red'),
+      '#cd5b45' => s_('SuggestedColors|Dark coral'),
+      '#eee600' => s_('SuggestedColors|Titanium yellow'),
+      '#ed9121' => s_('SuggestedColors|Carrot orange'),
+      '#c39953' => s_('SuggestedColors|Aztec Gold')
     }
   end
 

app/models/label.rb

@@ -12,7 +12,7 @@ class Label < ApplicationRecord
 
   cache_markdown_field :description, pipeline: :single_line
 
-  DEFAULT_COLOR = '#428BCA'
+  DEFAULT_COLOR = '#6699cc'
 
   default_value_for :color, DEFAULT_COLOR
 

changelogs/unreleased/ar-color-name-changes.yml

+---
+title: Update the HEX values and names of the color options for labels
+merge_request: 50393
+author:
+type: changed

doc/api/graphql/reference/gitlab_schema.graphql

@@ -14840,7 +14840,7 @@ input LabelCreateInput {
   (e.g. #FFAABB) or one of the CSS color names in
   https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords.
   """
-  color: String = "#428BCA"
+  color: String = "#6699cc"
 
   """
   Description of the label.

doc/api/graphql/reference/gitlab_schema.json

@@ -40547,7 +40547,7 @@
                 "name": "String",
                 "ofType": null
               },
-              "defaultValue": "\"#428BCA\""
+              "defaultValue": "\"#6699cc\""
             },
             {
               "name": "clientMutationId",

locale/gitlab.pot

@@ -28433,67 +28433,67 @@ msgstr ""
 msgid "Suggested solutions help link"
 msgstr ""
 
-msgid "SuggestedColors|Bright green"
+msgid "SuggestedColors|Aztec Gold"
 msgstr ""
 
-msgid "SuggestedColors|Dark grayish cyan"
+msgid "SuggestedColors|Blue"
 msgstr ""
 
-msgid "SuggestedColors|Dark moderate blue"
+msgid "SuggestedColors|Blue-gray"
 msgstr ""
 
-msgid "SuggestedColors|Dark moderate orange"
+msgid "SuggestedColors|Carrot orange"
 msgstr ""
 
-msgid "SuggestedColors|Dark moderate pink"
+msgid "SuggestedColors|Champagne"
 msgstr ""
 
-msgid "SuggestedColors|Dark moderate violet"
+msgid "SuggestedColors|Charcoal grey"
 msgstr ""
 
-msgid "SuggestedColors|Feijoa"
+msgid "SuggestedColors|Crimson"
 msgstr ""
 
-msgid "SuggestedColors|Lime green"
+msgid "SuggestedColors|Dark coral"
 msgstr ""
 
-msgid "SuggestedColors|Moderate blue"
+msgid "SuggestedColors|Dark green"
 msgstr ""
 
-msgid "SuggestedColors|Pure red"
+msgid "SuggestedColors|Dark sea green"
 msgstr ""
 
-msgid "SuggestedColors|Slightly desaturated blue"
+msgid "SuggestedColors|Dark violet"
 msgstr ""
 
-msgid "SuggestedColors|Slightly desaturated green"
+msgid "SuggestedColors|Deep violet"
 msgstr ""
 
-msgid "SuggestedColors|Soft orange"
+msgid "SuggestedColors|Gray"
 msgstr ""
 
-msgid "SuggestedColors|Soft red"
+msgid "SuggestedColors|Green screen"
 msgstr ""
 
-msgid "SuggestedColors|Strong pink"
+msgid "SuggestedColors|Green-cyan"
 msgstr ""
 
-msgid "SuggestedColors|Strong red"
+msgid "SuggestedColors|Lavendar"
 msgstr ""
 
-msgid "SuggestedColors|Strong yellow"
+msgid "SuggestedColors|Magenta-pink"
 msgstr ""
 
-msgid "SuggestedColors|UA blue"
+msgid "SuggestedColors|Medium sea green"
 msgstr ""
 
-msgid "SuggestedColors|Very dark desaturated blue"
+msgid "SuggestedColors|Red"
 msgstr ""
 
-msgid "SuggestedColors|Very dark lime green"
+msgid "SuggestedColors|Rose red"
 msgstr ""
 
-msgid "SuggestedColors|Very pale orange"
+msgid "SuggestedColors|Titanium yellow"
 msgstr ""
 
 msgid "Suggestion is not applicable as the suggestion was not found."

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js

@@ -79,7 +79,7 @@ describe('DropdownCreateLabelComponent', () => {
       const colorItemEl = colorsListContainerEl.querySelectorAll('a')[0];
 
       expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0].colorCode);
-      expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 51, 204);');
+      expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 153, 102);');
     });
 
     it('renders color input element', () => {

spec/frontend/vue_shared/components/sidebar/labels_select/mock_data.js

@@ -16,27 +16,27 @@ export const mockLabels = [
 ];
 
 export const mockSuggestedColors = {
-  '#0033CC': 'UA blue',
-  '#428BCA': 'Moderate blue',
-  '#44AD8E': 'Lime green',
-  '#A8D695': 'Feijoa',
-  '#5CB85C': 'Slightly desaturated green',
-  '#69D100': 'Bright green',
-  '#004E00': 'Very dark lime green',
-  '#34495E': 'Very dark desaturated blue',
-  '#7F8C8D': 'Dark grayish cyan',
-  '#A295D6': 'Slightly desaturated blue',
-  '#5843AD': 'Dark moderate blue',
-  '#8E44AD': 'Dark moderate violet',
-  '#FFECDB': 'Very pale orange',
-  '#AD4363': 'Dark moderate pink',
-  '#D10069': 'Strong pink',
-  '#CC0033': 'Strong red',
-  '#FF0000': 'Pure red',
-  '#D9534F': 'Soft red',
-  '#D1D100': 'Strong yellow',
-  '#F0AD4E': 'Soft orange',
-  '#AD8D43': 'Dark moderate orange',
+  '#009966': 'Green-cyan',
+  '#8fbc8f': 'Dark sea green',
+  '#3cb371': 'Medium sea green',
+  '#00b140': 'Green screen',
+  '#013220': 'Dark green',
+  '#6699cc': 'Blue-gray',
+  '#0000ff': 'Blue',
+  '#e6e6fa': 'Lavendar',
+  '#9400d3': 'Dark violet',
+  '#330066': 'Deep violet',
+  '#808080': 'Gray',
+  '#36454f': 'Charcoal grey',
+  '#f7e7ce': 'Champagne',
+  '#c21e56': 'Rose red',
+  '#cc338b': 'Magenta-pink',
+  '#dc143c': 'Crimson',
+  '#ff0000': 'Red',
+  '#cd5b45': 'Dark coral',
+  '#eee600': 'Titanium yellow',
+  '#ed9121': 'Carrot orange',
+  '#c39953': 'Aztec Gold',
 };
 
 export const mockConfig = {

spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js

@@ -50,25 +50,25 @@ export const mockConfig = {
 };
 
 export const mockSuggestedColors = {
-  '#0033CC': 'UA blue',
-  '#428BCA': 'Moderate blue',
-  '#44AD8E': 'Lime green',
-  '#A8D695': 'Feijoa',
-  '#5CB85C': 'Slightly desaturated green',
-  '#69D100': 'Bright green',
-  '#004E00': 'Very dark lime green',
-  '#34495E': 'Very dark desaturated blue',
-  '#7F8C8D': 'Dark grayish cyan',
-  '#A295D6': 'Slightly desaturated blue',
-  '#5843AD': 'Dark moderate blue',
-  '#8E44AD': 'Dark moderate violet',
-  '#FFECDB': 'Very pale orange',
-  '#AD4363': 'Dark moderate pink',
-  '#D10069': 'Strong pink',
-  '#CC0033': 'Strong red',
-  '#FF0000': 'Pure red',
-  '#D9534F': 'Soft red',
-  '#D1D100': 'Strong yellow',
-  '#F0AD4E': 'Soft orange',
-  '#AD8D43': 'Dark moderate orange',
+  '#009966': 'Green-cyan',
+  '#8fbc8f': 'Dark sea green',
+  '#3cb371': 'Medium sea green',
+  '#00b140': 'Green screen',
+  '#013220': 'Dark green',
+  '#6699cc': 'Blue-gray',
+  '#0000ff': 'Blue',
+  '#e6e6fa': 'Lavendar',
+  '#9400d3': 'Dark violet',
+  '#330066': 'Deep violet',
+  '#808080': 'Gray',
+  '#36454f': 'Charcoal grey',
+  '#f7e7ce': 'Champagne',
+  '#c21e56': 'Rose red',
+  '#cc338b': 'Magenta-pink',
+  '#dc143c': 'Crimson',
+  '#ff0000': 'Red',
+  '#cd5b45': 'Dark coral',
+  '#eee600': 'Titanium yellow',
+  '#ed9121': 'Carrot orange',
+  '#c39953': 'Aztec Gold',
 };