Hi all, with this issue I'll try to list all the required additions to our set of colors in order to include Severity Tokens in our system. I will go through file by file, I hope this is the best way for you to have this information, please let me know if you prefer something else, I am totally open
in _primitive_colors.ts we should add the following colors:
orange10: '#ffedd6',
orange20: '#ffdebf',
orange30: '#ffcda1',
orange40: '#ffb787',
orange50: '#ff995e',
orange60: '#fc8544',
orange70: '#ed6723',
orange80: '#db541b',
orange90: '#c24411',
orange100: '#9e3a16',
orange110: '#782e18',
orange120: '#5e281a',
orange130: '#4a221c',
orange140: '#361d18',
sky10: "#e5f6fa",
sky20: "#cfeef7",
sky30: "#b5e5f2",
sky40: "#94d8eb",
sky50: "#63c8e3",
sky60: "#37b8dc",
sky70: "#0da1c9",
sky80: "#1c8cb5",
sky90: "#19799f",
sky100: "#0f658a",
sky110: "#055476",
sky120: "#00425c",
sky130: "#003447",
sky140: "#002938",
In _semantic_colors.ts we should add the following colors:
risk10: PRIMITIVE_COLORS.orange10,
risk20: PRIMITIVE_COLORS.orange20,
risk30: PRIMITIVE_COLORS.orange30,
risk40: PRIMITIVE_COLORS.orange40,
risk50: PRIMITIVE_COLORS.orange50,
risk60: PRIMITIVE_COLORS.orange60,
risk70: PRIMITIVE_COLORS.orange70,
risk80: PRIMITIVE_COLORS.orange80,
risk90: PRIMITIVE_COLORS.orange90,
risk100: PRIMITIVE_COLORS.orange100,
risk110: PRIMITIVE_COLORS.orange110,
risk120: PRIMITIVE_COLORS.orange120,
risk130: PRIMITIVE_COLORS.orange130,
risk140: PRIMITIVE_COLORS.orange140,
regular10: PRIMITIVE_COLORS.sky10,
regular20: PRIMITIVE_COLORS.sky20,
regular30: PRIMITIVE_COLORS.sky30,
regular40: PRIMITIVE_COLORS.sky40,
regular50: PRIMITIVE_COLORS.sky50,
regular60: PRIMITIVE_COLORS.sky60,
regular70: PRIMITIVE_COLORS.sky70,
regular80: PRIMITIVE_COLORS.sky80,
regular90: PRIMITIVE_COLORS.sky90,
regular100: PRIMITIVE_COLORS.sky100,
regular110: PRIMITIVE_COLORS.sky110,
regular120: PRIMITIVE_COLORS.sky120,
regular130: PRIMITIVE_COLORS.sky130,
regular140: PRIMITIVE_COLORS.sky140,
in _color_light.ts we should add the following colors:
add following to text_colors
textRegular: SEMANTIC_COLORS.regular100,
textRisk: SEMANTIC_COLORS.risk100,
add following to background_colors
backgroundBaseRegular: SEMANTIC_COLORS.regular10,
backgroundBaseRisk: SEMANTIC_COLORS.risk10,
backgroundLightRegular: SEMANTIC_COLORS.regular20,
backgroundLightRisk: SEMANTIC_COLORS.risk20,
backgroundFilledRegular: SEMANTIC_COLORS.regular80,
backgroundFilledRisk: SEMANTIC_COLORS.risk70,
add following to transparent_background_colors
backgroundTransparentRegular: background_colors.backgroundBaseRegular,
backgroundTransparentRisk: background_colors.backgroundBaseRisk,
add following to border_colors
borderBaseRegular: SEMANTIC_COLORS.regular30,
borderBaseRisk: SEMANTIC_COLORS.risk30,
borderStrongRegular: SEMANTIC_COLORS.regular100,
borderStrongRisk: SEMANTIC_COLORS.risk100,
in _color_dark.ts we should add the following colors:
add following to dark_text_colors
textRegular: SEMANTIC_COLORS.regular60,
textRisk: SEMANTIC_COLORS.risk50,
add following to background_colors
backgroundBaseRegular: SEMANTIC_COLORS.regular140,
backgroundBaseRisk: SEMANTIC_COLORS.risk140,
backgroundLightRegular: SEMANTIC_COLORS.regular130,
backgroundLightRisk: SEMANTIC_COLORS.risk130,
backgroundFilledRegular: SEMANTIC_COLORS.regular50,
backgroundFilledRisk: SEMANTIC_COLORS.risk50,
add following to transparent_background_colors
backgroundTransparentRegular: dark_background_colors.backgroundBaseRegular,
backgroundTransparentRisk: dark_background_colors.backgroundBaseRisk,
add following to border_colors
borderBaseRegular: SEMANTIC_COLORS.regular120,
borderBaseRisk: SEMANTIC_COLORS.risk120,
borderStrongRegular: SEMANTIC_COLORS.regular60,
borderStrongRisk: SEMANTIC_COLORS.risk50,
in _colors_vis.ts we should remove all current Severity colors and replace them with the following:
euiColorSeverityUnknown: SEMANTIC_COLORS.shade20,
euiColorSeveritySuccess: SEMANTIC_COLORS.success60,
euiColorSeverityRegular: SEMANTIC_COLORS.regular30,
euiColorSeverityWarning: SEMANTIC_COLORS.warning30,
euiColorSeverityRisk: SEMANTIC_COLORS.risk50,
euiColorSeverityDanger: SEMANTIC_COLORS.danger70,
This last point brings me to a final consideration, what would you suggest to do in case somebody has already used the previous set of temporary severity colors? How can we detect if that happened already?
Hi all, with this issue I'll try to list all the required additions to our set of colors in order to include Severity Tokens in our system. I will go through file by file, I hope this is the best way for you to have this information, please let me know if you prefer something else, I am totally open
in
_primitive_colors.tswe should add the following colors:In
_semantic_colors.tswe should add the following colors:in
_color_light.tswe should add the following colors:in
_color_dark.tswe should add the following colors:in
_colors_vis.tswe should remove all current Severity colors and replace them with the following:This last point brings me to a final consideration, what would you suggest to do in case somebody has already used the previous set of temporary severity colors? How can we detect if that happened already?