Map epic color_1 (to 20) to the latest Atlassian color scheme

Hi,
I am getting the epics and the epic color is presented as color_1, etc. I found some old documentation that maps COLOR_1 “#FF800D”, COLOR_2 “#23819C”, etc.
These colors don’t match the current colors of the epics.
Is there a new map or a better way to obtain it without looking at the HTML style of a modern epic?
Thanks,
Jerry

1 Like

Hey @jerry.laster,

Where are you getting the color_1 to _20 values from, the color custom field has values ghx-label-1 to ghx-label-14. Maybe they’re the same I’m not sure!

I’m not aware of any official documentation so we’ve manually matched them up with the Atlaskit colors. Keep next-gen in mind too as the colors are the same but the labels are different.

Here is our mapping:

import { colors } from "@atlaskit/theme";

const COLOR = {
    purple: colors.P200,
    dark_purple: colors.P400,
    blue: colors.B200,
    dark_blue: colors.B400,
    green: colors.G200,
    dark_green: colors.G400,
    teal: colors.T200,
    dark_teal: colors.T400,
    yellow: colors.Y200,
    dark_yellow: colors.Y400,
    orange: colors.R200,
    dark_orange: colors.R400,
    grey: colors.N200,
    dark_grey: colors.N700,
};

export const EPIC_COLOR_CLOUD = {
    // Next Gen Colors
    purple: COLOR.purple,
    dark_purple: COLOR.dark_purple,
    blue: COLOR.blue,
    dark_blue: COLOR.dark_blue,
    green: COLOR.green,
    dark_green: COLOR.dark_green,
    teal: COLOR.teal,
    dark_teal: COLOR.dark_teal,
    yellow: COLOR.yellow,
    dark_yellow: COLOR.dark_yellow,
    orange: COLOR.orange,
    dark_orange: COLOR.dark_orange,
    grey: COLOR.grey,
    dark_grey: COLOR.dark_grey,

    // Classic Colors
    "ghx-label-1": COLOR.dark_grey,
    "ghx-label-2": COLOR.dark_yellow,
    "ghx-label-3": COLOR.yellow,
    "ghx-label-4": COLOR.dark_blue,
    "ghx-label-5": COLOR.dark_teal,
    "ghx-label-6": COLOR.green,
    "ghx-label-7": COLOR.purple,
    "ghx-label-8": COLOR.dark_purple,
    "ghx-label-9": COLOR.orange,
    "ghx-label-10": COLOR.blue,
    "ghx-label-11": COLOR.teal,
    "ghx-label-12": COLOR.grey,
    "ghx-label-13": COLOR.dark_green,
    "ghx-label-14": COLOR.dark_orange,
};

In the API response from /rest/agile/1.0/issue/ one of the nodes is
epic:{“id”:25690,“key”:“NP-2726”,“self”:“a url”,“name”:“Epic2”,“summary”:“Epic 2”,“color”:{“key”:“color_9”},“done”:false}
I guess I will have to map them manually but I am going to look into @atlaskit/theme.
Thanks a lot.