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

Replaced colors with common names
0ec5066c · Austin Regnery · Vitaly Slobodin · aad3e7ac · 0ec5066c · 0ec5066c
Commit 0ec5066c authored 4 years ago by Austin Regnery Committed by Vitaly Slobodin 4 years ago
--- a/app/helpers/labels_helper.rb
+++ b/app/helpers/labels_helper.rb
@@ -80,27 +80,27 @@ def label_tooltip_title(label)
  
  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
  

--- a/app/models/label.rb
+++ b/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
  

--- a/changelogs/unreleased/ar-color-name-changes.yml
+++ b/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
--- a/doc/api/graphql/reference/gitlab_schema.graphql
+++ b/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.

--- a/doc/api/graphql/reference/gitlab_schema.json
+++ b/doc/api/graphql/reference/gitlab_schema.json
@@ -40547,7 +40547,7 @@
                "name": "String",
                "ofType": null
              },
-              "defaultValue": "\"#428BCA\""
+              "defaultValue": "\"#6699cc\""
            },
            {
              "name": "clientMutationId",
--- a/locale/gitlab.pot
+++ b/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."

--- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
+++ b/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', () => {

--- a/spec/frontend/vue_shared/components/sidebar/labels_select/mock_data.js
+++ b/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 = {

--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js
+++ b/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',
 };