diff --git a/packages/eui-theme-borealis/changelogs/upcoming/8601.md b/packages/eui-theme-borealis/changelogs/upcoming/8601.md new file mode 100644 index 00000000000..d6470e622f3 --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/8601.md @@ -0,0 +1,51 @@ +- Added semantic severity color tokens: + - `colors.severity.unknown` + - `colors.severity.neutral` + - `colors.severity.success` + - `colors.severity.warning` + - `colors.severity.risk` + - `colors.severity.danger` +- Added semantic color tokens for variants `neutral` and `risk`: + - `colors.textNeutral` + - `colors.textRisk` + - `colors.backgroundBaseNeutral` + - `colors.backgroundBaseRisk` + - `colors.backgroundLightNeutral` + - `colors.backgroundLightRisk` + - `colors.backgroundFilledNeutral` + - `colors.backgroundFilledRisk` + - `colors.borderBaseNeutral` + - `colors.borderBaseRisk` + - `colors.borderStrongNeutral` + - `colors.borderStrongRisk` +- Added button component tokens for variants `neutral` and `risk`: + - `components.buttons.backgroundNeutral` + - `components.buttons.backgroundRisk` + - `components.buttons.backgroundFilledNeutral` + - `components.buttons.backgroundFilledRisk` + - `components.buttons.backgroundEmptyNeutralHover` + - `components.buttons.backgroundEmptyRiskHover` + - `components.buttons.textColorNeutral` + - `components.buttons.textColorRisk` + - `components.buttons.textColorFilledNeutral` + - `components.buttons.textColorFilledRisk` + +**Breaking changes** + +- Removed numbered severity color tokens: + - `colors.vis.euiColorSeverity0` + - `colors.vis.euiColorSeverity1` + - `colors.vis.euiColorSeverity2` + - `colors.vis.euiColorSeverity3` + - `colors.vis.euiColorSeverity4` + - `colors.vis.euiColorSeverity5` + - `colors.vis.euiColorSeverity6` + - `colors.vis.euiColorSeverity7` + - `colors.vis.euiColorSeverity8` + - `colors.vis.euiColorSeverity9` + - `colors.vis.euiColorSeverity10` + - `colors.vis.euiColorSeverity11` + - `colors.vis.euiColorSeverity12` + - `colors.vis.euiColorSeverity13` + - `colors.vis.euiColorSeverity14` + diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json index 774dacf87d2..7b9d9c799c4 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -39,8 +39,10 @@ "primary": "#61A2FF", "accent": "#EE72A6", "accentSecondary": "#16C5C0", + "neutral": "#63C8E3", "success": "#24C292", "warning": "#FACB3D", + "risk": "#FF995E", "danger": "#F6726A", "ghost": "#07101F", "text": "#8E9FBC" @@ -300,21 +302,6 @@ "euiColorVisDanger0": "#F6726A", "euiColorVisDanger1": "#FFC9C2", "euiColorVisNeutral0": "#F6F9FC", - "euiColorSeverity0": "#E3E6EB", - "euiColorSeverity1": "#5A6D8C", - "euiColorSeverity2": "#7186A8", - "euiColorSeverity3": "#8E9FBC", - "euiColorSeverity4": "#ABB9D0", - "euiColorSeverity5": "#CAD3E2", - "euiColorSeverity6": "#FDE9B5", - "euiColorSeverity7": "#FCD883", - "euiColorSeverity8": "#FFC9C2", - "euiColorSeverity9": "#FFB5AD", - "euiColorSeverity10": "#FC9188", - "euiColorSeverity11": "#F6726A", - "euiColorSeverity12": "#EE4C48", - "euiColorSeverity13": "#DA3737", - "euiColorSeverity14": "#C61E25", "euiColorVisGrey0": "#CAD3E2", "euiColorVisGrey1": "#8E9FBC", "euiColorVisGrey2": "#5A6D8C", @@ -327,6 +314,12 @@ "euiColorVisCool2": "#61A2FF", "euiColorVisComplementary0": "#61A2FF", "euiColorVisComplementary1": "#EAAE01", + "euiColorSeverityUnknown": "#E3E8F2", + "euiColorSeverityNeutral": "#B5E5F2", + "euiColorSeveritySuccess": "#24C292", + "euiColorSeverityWarning": "#FCD883", + "euiColorSeverityRisk": "#FF995E", + "euiColorSeverityDanger": "#EE4C48", "euiColorChartLines": "#7186A8", "euiColorChartBand": "#243147", "euiColorGhost": "#FFFFFF", @@ -362,8 +355,10 @@ "euiColorTextPrimary": "#61A2FF", "euiColorTextAccent": "#EE72A6", "euiColorTextAccentSecondary": "#16C5C0", + "euiColorTextNeutral": "#37B8DC", "euiColorTextSuccess": "#24C292", "euiColorTextWarning": "#FCD883", + "euiColorTextRisk": "#FF995E", "euiColorTextDanger": "#F6726A", "euiColorTextParagraph": "#CAD3E2", "euiColorTextHeading": "#E3E8F2", @@ -373,8 +368,10 @@ "euiColorBackgroundBasePrimary": "#0A2342", "euiColorBackgroundBaseAccent": "#351725", "euiColorBackgroundBaseAccentSecondary": "#03282B", + "euiColorBackgroundBaseNeutral": "#002938", "euiColorBackgroundBaseSuccess": "#092A26", "euiColorBackgroundBaseWarning": "#2C2721", + "euiColorBackgroundBaseRisk": "#361D18", "euiColorBackgroundBaseDanger": "#351721", "euiColorBackgroundBaseSubdued": "#07101F", "euiColorBackgroundBasePlain": "#0B1628", @@ -390,22 +387,28 @@ "euiColorBackgroundLightPrimary": "#0D2F5E", "euiColorBackgroundLightAccent": "#481E32", "euiColorBackgroundLightAccentSecondary": "#023436", + "euiColorBackgroundLightNeutral": "#003447", "euiColorBackgroundLightSuccess": "#0D362B", "euiColorBackgroundLightWarning": "#3D3014", + "euiColorBackgroundLightRisk": "#4A221C", "euiColorBackgroundLightDanger": "#491D27", "euiColorBackgroundLightText": "#1D2A3E", "euiColorBackgroundFilledPrimary": "#61A2FF", "euiColorBackgroundFilledAccent": "#EE72A6", "euiColorBackgroundFilledAccentSecondary": "#16C5C0", + "euiColorBackgroundFilledNeutral": "#63C8E3", "euiColorBackgroundFilledSuccess": "#24C292", "euiColorBackgroundFilledWarning": "#FACB3D", + "euiColorBackgroundFilledRisk": "#FF995E", "euiColorBackgroundFilledDanger": "#F6726A", "euiColorBackgroundFilledText": "#8E9FBC", "euiColorBorderBasePrimary": "#123778", "euiColorBorderBaseAccent": "#5E2140", "euiColorBorderBaseAccentSecondary": "#044949", + "euiColorBorderBaseNeutral": "#00425C", "euiColorBorderBaseSuccess": "#094837", "euiColorBorderBaseWarning": "#513910", + "euiColorBorderBaseRisk": "#5E281A", "euiColorBorderBaseDanger": "#5E2129", "euiColorBorderBasePlain": "#485975", "euiColorBorderBaseSubdued": "#2B394F", @@ -416,7 +419,9 @@ "euiColorBorderStrongPrimary": "#61A2FF", "euiColorBorderStrongAccent": "#EE72A6", "euiColorBorderStrongAccentSecondary": "#16C5C0", + "euiColorBorderStrongNeutral": "#37B8DC", "euiColorBorderStrongSuccess": "#24C292", "euiColorBorderStrongWarning": "#FACB3D", + "euiColorBorderStrongRisk": "#FC8544", "euiColorBorderStrongDanger": "#F6726A" } diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts index 8309584d8e5..9698fa46f5b 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts @@ -40,8 +40,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { primary: string; accent: string; accentSecondary: string; + neutral: string; success: string; warning: string; + risk: string; danger: string; ghost: string; text: string; @@ -313,21 +315,12 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { euiColorVisCool2: string; euiColorVisComplementary0: string; euiColorVisComplementary1: string; - euiColorSeverity0: string; - euiColorSeverity1: string; - euiColorSeverity2: string; - euiColorSeverity3: string; - euiColorSeverity4: string; - euiColorSeverity5: string; - euiColorSeverity6: string; - euiColorSeverity7: string; - euiColorSeverity8: string; - euiColorSeverity9: string; - euiColorSeverity10: string; - euiColorSeverity11: string; - euiColorSeverity12: string; - euiColorSeverity13: string; - euiColorSeverity14: string; + euiColorSeverityUnknown: string; + euiColorSeverityNeutral: string; + euiColorSeveritySuccess: string; + euiColorSeverityWarning: string; + euiColorSeverityRisk: string; + euiColorSeverityDanger: string; euiColorChartLines: string; euiColorChartBand: string; euiColorGhost: string; @@ -363,8 +356,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { euiColorTextPrimary: string; euiColorTextAccent: string; euiColorTextAccentSecondary: string; + euiColorTextNeutral: string; euiColorTextSuccess: string; euiColorTextWarning: string; + euiColorTextRisk: string; euiColorTextDanger: string; euiColorTextParagraph: string; euiColorTextHeading: string; @@ -374,8 +369,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { euiColorBackgroundBasePrimary: string; euiColorBackgroundBaseAccent: string; euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseNeutral: string; euiColorBackgroundBaseSuccess: string; euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseRisk: string; euiColorBackgroundBaseDanger: string; euiColorBackgroundBaseSubdued: string; euiColorBackgroundBasePlain: string; @@ -391,22 +388,28 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { euiColorBackgroundLightPrimary: string; euiColorBackgroundLightAccent: string; euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightNeutral: string; euiColorBackgroundLightSuccess: string; euiColorBackgroundLightWarning: string; + euiColorBackgroundLightRisk: string; euiColorBackgroundLightDanger: string; euiColorBackgroundLightText: string; euiColorBackgroundFilledPrimary: string; euiColorBackgroundFilledAccent: string; euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledNeutral: string; euiColorBackgroundFilledSuccess: string; euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledRisk: string; euiColorBackgroundFilledDanger: string; euiColorBackgroundFilledText: string; euiColorBorderBasePrimary: string; euiColorBorderBaseAccent: string; euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseNeutral: string; euiColorBorderBaseSuccess: string; euiColorBorderBaseWarning: string; + euiColorBorderBaseRisk: string; euiColorBorderBaseDanger: string; euiColorBorderBasePlain: string; euiColorBorderBaseSubdued: string; @@ -417,8 +420,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { euiColorBorderStrongPrimary: string; euiColorBorderStrongAccent: string; euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongNeutral: string; euiColorBorderStrongSuccess: string; euiColorBorderStrongWarning: string; + euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; }; export default sassVariables; diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json index 348a36a8575..488cfba7775 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json @@ -39,8 +39,10 @@ "primary": "#0B64DD", "accent": "#BC1E70", "accentSecondary": "#008B87", + "neutral": "#1C8CB5", "success": "#008A5E", "warning": "#FACB3D", + "risk": "#ED6723", "danger": "#C61E25", "ghost": "#ffffff", "text": "#5A6D8C" @@ -300,21 +302,6 @@ "euiColorVisDanger0": "#F6726A", "euiColorVisDanger1": "#FFC9C2", "euiColorVisNeutral0": "#F6F9FC", - "euiColorSeverity0": "#E3E6EB", - "euiColorSeverity1": "#5A6D8C", - "euiColorSeverity2": "#7186A8", - "euiColorSeverity3": "#8E9FBC", - "euiColorSeverity4": "#ABB9D0", - "euiColorSeverity5": "#CAD3E2", - "euiColorSeverity6": "#FDE9B5", - "euiColorSeverity7": "#FCD883", - "euiColorSeverity8": "#FFC9C2", - "euiColorSeverity9": "#FFB5AD", - "euiColorSeverity10": "#FC9188", - "euiColorSeverity11": "#F6726A", - "euiColorSeverity12": "#EE4C48", - "euiColorSeverity13": "#DA3737", - "euiColorSeverity14": "#C61E25", "euiColorVisGrey0": "#CAD3E2", "euiColorVisGrey1": "#8E9FBC", "euiColorVisGrey2": "#5A6D8C", @@ -327,6 +314,12 @@ "euiColorVisCool2": "#61A2FF", "euiColorVisComplementary0": "#61A2FF", "euiColorVisComplementary1": "#EAAE01", + "euiColorSeverityUnknown": "#E3E8F2", + "euiColorSeverityNeutral": "#B5E5F2", + "euiColorSeveritySuccess": "#24C292", + "euiColorSeverityWarning": "#FCD883", + "euiColorSeverityRisk": "#FF995E", + "euiColorSeverityDanger": "#EE4C48", "euiColorChartLines": "#CAD3E2", "euiColorChartBand": "#F6F9FC", "euiColorGhost": "#FFFFFF", @@ -362,8 +355,10 @@ "euiColorTextPrimary": "#1750BA", "euiColorTextAccent": "#A11262", "euiColorTextAccentSecondary": "#047471", + "euiColorTextNeutral": "#0F658A", "euiColorTextSuccess": "#09724D", "euiColorTextWarning": "#6A4906", + "euiColorTextRisk": "#9E3A16", "euiColorTextDanger": "#A71627", "euiColorTextParagraph": "#1D2A3E", "euiColorTextHeading": "#111C2C", @@ -373,8 +368,10 @@ "euiColorBackgroundBasePrimary": "#E8F1FF", "euiColorBackgroundBaseAccent": "#FFEBF5", "euiColorBackgroundBaseAccentSecondary": "#E2F9F7", + "euiColorBackgroundBaseNeutral": "#E5F6FA", "euiColorBackgroundBaseSuccess": "#E2F8F0", "euiColorBackgroundBaseWarning": "#FDF3D8", + "euiColorBackgroundBaseRisk": "#FFEDD6", "euiColorBackgroundBaseDanger": "#FFE8E5", "euiColorBackgroundBaseSubdued": "#F6F9FC", "euiColorBackgroundBasePlain": "#FFFFFF", @@ -390,22 +387,28 @@ "euiColorBackgroundLightPrimary": "#D9E8FF", "euiColorBackgroundLightAccent": "#FDDDE9", "euiColorBackgroundLightAccentSecondary": "#C9F3F0", + "euiColorBackgroundLightNeutral": "#CFEEF7", "euiColorBackgroundLightSuccess": "#C9F3E3", "euiColorBackgroundLightWarning": "#FDE9B5", + "euiColorBackgroundLightRisk": "#FFDEBF", "euiColorBackgroundLightDanger": "#FDDDD8", "euiColorBackgroundLightText": "#E3E8F2", "euiColorBackgroundFilledPrimary": "#0B64DD", "euiColorBackgroundFilledAccent": "#BC1E70", "euiColorBackgroundFilledAccentSecondary": "#008B87", + "euiColorBackgroundFilledNeutral": "#1C8CB5", "euiColorBackgroundFilledSuccess": "#008A5E", "euiColorBackgroundFilledWarning": "#FACB3D", + "euiColorBackgroundFilledRisk": "#ED6723", "euiColorBackgroundFilledDanger": "#C61E25", "euiColorBackgroundFilledText": "#5A6D8C", "euiColorBorderBasePrimary": "#BFDBFF", "euiColorBorderBaseAccent": "#FFC7DB", "euiColorBorderBaseAccentSecondary": "#A6EDEA", + "euiColorBorderBaseNeutral": "#B5E5F2", "euiColorBorderBaseSuccess": "#AEE8D2", "euiColorBorderBaseWarning": "#FCD883", + "euiColorBorderBaseRisk": "#FFCDA1", "euiColorBorderBaseDanger": "#FFC9C2", "euiColorBorderBasePlain": "#CAD3E2", "euiColorBorderBaseSubdued": "#E3E8F2", @@ -416,7 +419,9 @@ "euiColorBorderStrongPrimary": "#1750BA", "euiColorBorderStrongAccent": "#A11262", "euiColorBorderStrongAccentSecondary": "#047471", + "euiColorBorderStrongNeutral": "#0F658A", "euiColorBorderStrongSuccess": "#09724D", "euiColorBorderStrongWarning": "#825803", + "euiColorBorderStrongRisk": "#9E3A16", "euiColorBorderStrongDanger": "#A71627" } diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts index c5f553d2553..6b8e1c68be6 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts @@ -40,8 +40,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { primary: string; accent: string; accentSecondary: string; + neutral: string; success: string; warning: string; + risk: string; danger: string; ghost: string; text: string; @@ -313,21 +315,12 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { euiColorVisCool2: string; euiColorVisComplementary0: string; euiColorVisComplementary1: string; - euiColorSeverity0: string; - euiColorSeverity1: string; - euiColorSeverity2: string; - euiColorSeverity3: string; - euiColorSeverity4: string; - euiColorSeverity5: string; - euiColorSeverity6: string; - euiColorSeverity7: string; - euiColorSeverity8: string; - euiColorSeverity9: string; - euiColorSeverity10: string; - euiColorSeverity11: string; - euiColorSeverity12: string; - euiColorSeverity13: string; - euiColorSeverity14: string; + euiColorSeverityUnknown: string; + euiColorSeverityNeutral: string; + euiColorSeveritySuccess: string; + euiColorSeverityWarning: string; + euiColorSeverityRisk: string; + euiColorSeverityDanger: string; euiColorChartLines: string; euiColorChartBand: string; euiColorGhost: string; @@ -363,8 +356,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { euiColorTextPrimary: string; euiColorTextAccent: string; euiColorTextAccentSecondary: string; + euiColorTextNeutral: string; euiColorTextSuccess: string; euiColorTextWarning: string; + euiColorTextRisk: string; euiColorTextDanger: string; euiColorTextParagraph: string; euiColorTextHeading: string; @@ -374,8 +369,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { euiColorBackgroundBasePrimary: string; euiColorBackgroundBaseAccent: string; euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseNeutral: string; euiColorBackgroundBaseSuccess: string; euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseRisk: string; euiColorBackgroundBaseDanger: string; euiColorBackgroundBaseSubdued: string; euiColorBackgroundBasePlain: string; @@ -391,22 +388,28 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { euiColorBackgroundLightPrimary: string; euiColorBackgroundLightAccent: string; euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightNeutral: string; euiColorBackgroundLightSuccess: string; euiColorBackgroundLightWarning: string; + euiColorBackgroundLightRisk: string; euiColorBackgroundLightDanger: string; euiColorBackgroundLightText: string; euiColorBackgroundFilledPrimary: string; euiColorBackgroundFilledAccent: string; euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledNeutral: string; euiColorBackgroundFilledSuccess: string; euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledRisk: string; euiColorBackgroundFilledDanger: string; euiColorBackgroundFilledText: string; euiColorBorderBasePrimary: string; euiColorBorderBaseAccent: string; euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseNeutral: string; euiColorBorderBaseSuccess: string; euiColorBorderBaseWarning: string; + euiColorBorderBaseRisk: string; euiColorBorderBaseDanger: string; euiColorBorderBasePlain: string; euiColorBorderBaseSubdued: string; @@ -417,8 +420,10 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { euiColorBorderStrongPrimary: string; euiColorBorderStrongAccent: string; euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongNeutral: string; euiColorBorderStrongSuccess: string; euiColorBorderStrongWarning: string; + euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; }; export default sassVariables; diff --git a/packages/eui-theme-borealis/src/variables/_buttons.scss b/packages/eui-theme-borealis/src/variables/_buttons.scss index 65ac53b809e..192990b3e7d 100644 --- a/packages/eui-theme-borealis/src/variables/_buttons.scss +++ b/packages/eui-theme-borealis/src/variables/_buttons.scss @@ -6,8 +6,10 @@ $euiButtonHeightXSmall: $euiSizeL !default; $euiButtonTypes: ( primary: $euiColorBackgroundFilledPrimary, accent: $euiColorBackgroundFilledAccent, + neutral: $euiColorBackgroundFilledNeutral, success: $euiColorBackgroundFilledSuccess, warning: $euiColorBackgroundFilledWarning, + risk: $euiColorBackgroundFilledRisk, danger: $euiColorBackgroundFilledDanger, ghost: $euiColorGhost, // Ghost is special, and does not care about theming. text: $euiColorBackgroundFilledText, // Reserved for special use cases diff --git a/packages/eui-theme-borealis/src/variables/_buttons.ts b/packages/eui-theme-borealis/src/variables/_buttons.ts index 974bb1969aa..ceb34ddecb8 100644 --- a/packages/eui-theme-borealis/src/variables/_buttons.ts +++ b/packages/eui-theme-borealis/src/variables/_buttons.ts @@ -22,6 +22,10 @@ const _buttons = { ([backgroundLightAccentSecondary]) => backgroundLightAccentSecondary, ['colors.backgroundLightAccentSecondary'] ), + backgroundNeutral: computed( + ([backgroundLightNeutral]) => backgroundLightNeutral, + ['colors.backgroundLightNeutral'] + ), backgroundSuccess: computed( ([backgroundLightSuccess]) => backgroundLightSuccess, ['colors.backgroundLightSuccess'] @@ -30,6 +34,10 @@ const _buttons = { ([backgroundLightWarning]) => backgroundLightWarning, ['colors.backgroundLightWarning'] ), + backgroundRisk: computed( + ([backgroundLightRisk]) => backgroundLightRisk, + ['colors.backgroundLightRisk'] + ), backgroundDanger: computed( ([backgroundLightDanger]) => backgroundLightDanger, ['colors.backgroundLightDanger'] @@ -55,6 +63,10 @@ const _buttons = { ([backgroundFilledAccentSecondary]) => backgroundFilledAccentSecondary, ['colors.backgroundFilledAccentSecondary'] ), + backgroundFilledNeutral: computed( + ([backgroundFilledNeutral]) => backgroundFilledNeutral, + ['colors.backgroundFilledNeutral'] + ), backgroundFilledSuccess: computed( ([backgroundFilledSuccess]) => backgroundFilledSuccess, ['colors.backgroundFilledSuccess'] @@ -63,6 +75,10 @@ const _buttons = { ([backgroundFilledWarning]) => backgroundFilledWarning, ['colors.backgroundFilledWarning'] ), + backgroundFilledRisk: computed( + ([backgroundFilledRisk]) => backgroundFilledRisk, + ['colors.backgroundFilledRisk'] + ), backgroundFilledDanger: computed( ([backgroundFilledDanger]) => backgroundFilledDanger, ['colors.backgroundFilledDanger'] @@ -89,6 +105,10 @@ const _buttons = { ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover'] ), + backgroundEmptyNeutralHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), backgroundEmptySuccessHover: computed( ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover'] @@ -97,6 +117,10 @@ const _buttons = { ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover'] ), + backgroundEmptyRiskHover: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), backgroundEmptyDangerHover: computed( ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover'] @@ -118,6 +142,10 @@ const _buttons = { ([textAccentSecondary]) => textAccentSecondary, ['colors.textAccentSecondary'] ), + textColorNeutral: computed( + ([textNeutral]) => textNeutral, + ['colors.textNeutral'] + ), textColorSuccess: computed( ([textSuccess]) => textSuccess, ['colors.textSuccess'] @@ -126,6 +154,7 @@ const _buttons = { ([textWarning]) => textWarning, ['colors.textWarning'] ), + textColorRisk: computed(([textRisk]) => textRisk, ['colors.textRisk']), textColorDanger: computed( ([textDanger]) => textDanger, ['colors.textDanger'] @@ -151,11 +180,19 @@ const _buttons = { ([textInverse]) => textInverse, ['colors.textInverse'] ), + textColorFilledNeutral: computed( + ([textInverse]) => textInverse, + ['colors.textInverse'] + ), textColorFilledSuccess: computed( ([textInverse]) => textInverse, ['colors.textInverse'] ), textColorFilledWarning: SEMANTIC_COLORS.warning110, + textColorFilledRisk: computed( + ([textInverse]) => textInverse, + ['colors.textInverse'] + ), textColorFilledDanger: computed( ([textInverse]) => textInverse, ['colors.textInverse'] diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss index 712a68345bf..83a509c4b5b 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -10,6 +10,7 @@ @import 'states'; @import './colors/colors_vis'; +@import './colors/colors_severity'; @import 'form'; @import 'page'; @import 'font_weight'; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index ddf36a9a1a4..7e8e1a7dffe 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -33,8 +33,10 @@ $euiColorHighlight: $euiColorPrimary100 !default; $euiColorBackgroundBasePrimary: $euiColorPrimary140 !default; $euiColorBackgroundBaseAccent: $euiColorAccent140 !default; $euiColorBackgroundBaseAccentSecondary: $euiColorAccentSecondary140 !default; +$euiColorBackgroundBaseNeutral: $euiColorNeutral140 !default; $euiColorBackgroundBaseSuccess: $euiColorSuccess140 !default; $euiColorBackgroundBaseWarning: $euiColorWarning140 !default; +$euiColorBackgroundBaseRisk: $euiColorRisk140 !default; $euiColorBackgroundBaseDanger: $euiColorDanger140 !default; $euiColorBackgroundBaseSubdued: $euiColorPlainDark !default; $euiColorBackgroundBasePlain: $euiColorShade145 !default; @@ -52,7 +54,9 @@ $euiColorBackgroundBaseSkeletonMiddle: $euiColorPlainLightAlpha8 !default; $euiColorBackgroundLightPrimary: $euiColorPrimary130 !default; $euiColorBackgroundLightAccent: $euiColorAccent130 !default; $euiColorBackgroundLightAccentSecondary: $euiColorAccentSecondary130 !default; +$euiColorBackgroundLightNeutral: $euiColorNeutral130 !default; $euiColorBackgroundLightSuccess: $euiColorSuccess130 !default; +$euiColorBackgroundLightRisk: $euiColorRisk130 !default; $euiColorBackgroundLightWarning: $euiColorWarning130 !default; $euiColorBackgroundLightDanger: $euiColorDanger130 !default; $euiColorBackgroundLightText: $euiColorShade130 !default; @@ -60,8 +64,10 @@ $euiColorBackgroundLightText: $euiColorShade130 !default; $euiColorBackgroundFilledPrimary: $euiColorPrimary60 !default; $euiColorBackgroundFilledAccent: $euiColorAccent60 !default; $euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary60 !default; +$euiColorBackgroundFilledNeutral: $euiColorNeutral50 !default; $euiColorBackgroundFilledSuccess: $euiColorSuccess60 !default; $euiColorBackgroundFilledWarning: $euiColorWarning40 !default; +$euiColorBackgroundFilledRisk: $euiColorRisk50 !default; $euiColorBackgroundFilledDanger: $euiColorDanger60 !default; $euiColorBackgroundFilledText: $euiColorShade60 !default; @@ -91,16 +97,20 @@ $euiColorDangerText: $euiColorDanger60 !default; $euiColorTextPrimary: $euiColorPrimary60 !default; $euiColorTextAccent: $euiColorAccent60 !default; $euiColorTextAccentSecondary: $euiColorAccentSecondary60 !default; +$euiColorTextNeutral: $euiColorNeutral60 !default; $euiColorTextSuccess: $euiColorSuccess60 !default; $euiColorTextWarning: $euiColorWarning30 !default; +$euiColorTextRisk: $euiColorRisk50 !default; $euiColorTextDanger: $euiColorDanger60 !default; // Borders $euiColorBorderBasePrimary: $euiColorPrimary120 !default; $euiColorBorderBaseAccent: $euiColorAccent120 !default; $euiColorBorderBaseAccentSecondary: $euiColorAccentSecondary120 !default; +$euiColorBorderBaseNeutral: $euiColorNeutral120 !default; $euiColorBorderBaseSuccess: $euiColorSuccess120 !default; $euiColorBorderBaseWarning: $euiColorWarning120 !default; +$euiColorBorderBaseRisk: $euiColorRisk120 !default; $euiColorBorderBaseDanger: $euiColorDanger120 !default; $euiColorBorderBasePlain: $euiColorShade100 !default; @@ -113,8 +123,10 @@ $euiColorBorderBaseFormsControl: $euiColorShade80 !default; $euiColorBorderStrongPrimary: $euiColorPrimary60 !default; $euiColorBorderStrongAccent: $euiColorAccent60 !default; $euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary60 !default; +$euiColorBorderStrongNeutral: $euiColorNeutral60 !default; $euiColorBorderStrongSuccess: $euiColorSuccess60 !default; $euiColorBorderStrongWarning: $euiColorWarning40 !default; +$euiColorBorderStrongRisk: $euiColorRisk50 !default; $euiColorBorderStrongDanger: $euiColorDanger60 !default; // Charts diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index c989a192c1b..5a590081dad 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -46,8 +46,10 @@ export const dark_brand_text_colors: _EuiThemeBrandTextColors = { textPrimary: SEMANTIC_COLORS.primary60, textAccent: SEMANTIC_COLORS.accent60, textAccentSecondary: SEMANTIC_COLORS.accentSecondary60, + textNeutral: SEMANTIC_COLORS.neutral60, textSuccess: SEMANTIC_COLORS.success60, textWarning: SEMANTIC_COLORS.warning30, + textRisk: SEMANTIC_COLORS.risk50, textDanger: SEMANTIC_COLORS.danger60, }; @@ -80,8 +82,10 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { backgroundBasePrimary: SEMANTIC_COLORS.primary140, backgroundBaseAccent: SEMANTIC_COLORS.accent140, backgroundBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary140, + backgroundBaseNeutral: SEMANTIC_COLORS.neutral140, backgroundBaseSuccess: SEMANTIC_COLORS.success140, backgroundBaseWarning: SEMANTIC_COLORS.warning140, + backgroundBaseRisk: SEMANTIC_COLORS.risk140, backgroundBaseDanger: SEMANTIC_COLORS.danger140, backgroundBaseSubdued: SEMANTIC_COLORS.plainDark, backgroundBasePlain: SEMANTIC_COLORS.shade145, @@ -101,16 +105,20 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { backgroundLightPrimary: SEMANTIC_COLORS.primary130, backgroundLightAccent: SEMANTIC_COLORS.accent130, backgroundLightAccentSecondary: SEMANTIC_COLORS.accentSecondary130, + backgroundLightNeutral: SEMANTIC_COLORS.neutral130, backgroundLightSuccess: SEMANTIC_COLORS.success130, backgroundLightWarning: SEMANTIC_COLORS.warning130, + backgroundLightRisk: SEMANTIC_COLORS.risk130, backgroundLightDanger: SEMANTIC_COLORS.danger130, backgroundLightText: SEMANTIC_COLORS.shade130, backgroundFilledPrimary: SEMANTIC_COLORS.primary60, backgroundFilledAccent: SEMANTIC_COLORS.accent60, backgroundFilledAccentSecondary: SEMANTIC_COLORS.accentSecondary60, + backgroundFilledNeutral: SEMANTIC_COLORS.neutral50, backgroundFilledSuccess: SEMANTIC_COLORS.success60, backgroundFilledWarning: SEMANTIC_COLORS.warning40, + backgroundFilledRisk: SEMANTIC_COLORS.risk50, backgroundFilledDanger: SEMANTIC_COLORS.danger60, backgroundFilledText: SEMANTIC_COLORS.shade60, }; @@ -127,8 +135,10 @@ export const dark_transparent_background_colors: _EuiThemeTransparentBackgroundC backgroundTransparentAccent: dark_background_colors.backgroundBaseAccent, backgroundTransparentAccentSecondary: dark_background_colors.backgroundBaseAccent, + backgroundTransparentNeutral: dark_background_colors.backgroundBaseNeutral, backgroundTransparentSuccess: dark_background_colors.backgroundBaseSuccess, backgroundTransparentWarning: dark_background_colors.backgroundBaseWarning, + backgroundTransparentRisk: dark_background_colors.backgroundBaseRisk, backgroundTransparentDanger: dark_background_colors.backgroundBaseDanger, backgroundTransparentSubdued: dark_background_colors.backgroundBaseSubdued, backgroundTransparentHighlighted: @@ -140,8 +150,10 @@ export const dark_border_colors: _EuiThemeBorderColors = { borderBasePrimary: SEMANTIC_COLORS.primary120, borderBaseAccent: SEMANTIC_COLORS.accent120, borderBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary120, + borderBaseNeutral: SEMANTIC_COLORS.neutral120, borderBaseSuccess: SEMANTIC_COLORS.success120, borderBaseWarning: SEMANTIC_COLORS.warning120, + borderBaseRisk: SEMANTIC_COLORS.risk120, borderBaseDanger: SEMANTIC_COLORS.danger120, borderBasePlain: SEMANTIC_COLORS.shade100, @@ -155,8 +167,10 @@ export const dark_border_colors: _EuiThemeBorderColors = { borderStrongPrimary: SEMANTIC_COLORS.primary60, borderStrongAccent: SEMANTIC_COLORS.accent60, borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary60, + borderStrongNeutral: SEMANTIC_COLORS.neutral60, borderStrongSuccess: SEMANTIC_COLORS.success60, borderStrongWarning: SEMANTIC_COLORS.warning40, + borderStrongRisk: SEMANTIC_COLORS.risk50, borderStrongDanger: SEMANTIC_COLORS.danger60, }; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss index 667ea531c29..b6657eb3e13 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -34,8 +34,10 @@ $euiColorHighlight: $euiColorPrimary10 !default; $euiColorBackgroundBasePrimary: $euiColorPrimary10 !default; $euiColorBackgroundBaseAccent: $euiColorAccent10 !default; $euiColorBackgroundBaseAccentSecondary: $euiColorAccentSecondary10 !default; +$euiColorBackgroundBaseNeutral: $euiColorNeutral10 !default; $euiColorBackgroundBaseSuccess: $euiColorSuccess10 !default; $euiColorBackgroundBaseWarning: $euiColorWarning10 !default; +$euiColorBackgroundBaseRisk: $euiColorRisk10 !default; $euiColorBackgroundBaseDanger: $euiColorDanger10 !default; $euiColorBackgroundBaseSubdued: $euiColorShade10 !default; $euiColorBackgroundBasePlain: $euiColorPlainLight !default; @@ -53,16 +55,20 @@ $euiColorBackgroundBaseSkeletonMiddle: $euiColorShade100Alpha4 !default; $euiColorBackgroundLightPrimary: $euiColorPrimary20 !default; $euiColorBackgroundLightAccent: $euiColorAccent20 !default; $euiColorBackgroundLightAccentSecondary: $euiColorAccentSecondary20 !default; +$euiColorBackgroundLightNeutral: $euiColorNeutral20 !default; $euiColorBackgroundLightSuccess: $euiColorSuccess20 !default; $euiColorBackgroundLightWarning: $euiColorWarning20 !default; +$euiColorBackgroundLightRisk: $euiColorRisk20 !default; $euiColorBackgroundLightDanger: $euiColorDanger20 !default; $euiColorBackgroundLightText: $euiColorShade20 !default; $euiColorBackgroundFilledPrimary: $euiColorPrimary90 !default; $euiColorBackgroundFilledAccent: $euiColorAccent90 !default; $euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary90 !default; +$euiColorBackgroundFilledNeutral: $euiColorNeutral80 !default; $euiColorBackgroundFilledSuccess: $euiColorSuccess90 !default; $euiColorBackgroundFilledWarning: $euiColorWarning40 !default; +$euiColorBackgroundFilledRisk: $euiColorRisk70 !default; $euiColorBackgroundFilledDanger: $euiColorDanger90 !default; $euiColorBackgroundFilledText: $euiColorShade90 !default; @@ -92,16 +98,20 @@ $euiColorDangerText: $euiColorDanger100 !default; $euiColorTextPrimary: $euiColorPrimary100 !default; $euiColorTextAccent: $euiColorAccent100 !default; $euiColorTextAccentSecondary: $euiColorAccentSecondary100 !default; +$euiColorTextNeutral: $euiColorNeutral100 !default; $euiColorTextSuccess: $euiColorSuccess100 !default; $euiColorTextWarning: $euiColorWarning110 !default; +$euiColorTextRisk: $euiColorRisk100 !default; $euiColorTextDanger: $euiColorDanger100 !default; // Borders $euiColorBorderBasePrimary: $euiColorPrimary30 !default; $euiColorBorderBaseAccent: $euiColorAccent30 !default; $euiColorBorderBaseAccentSecondary: $euiColorAccentSecondary30 !default; +$euiColorBorderBaseNeutral: $euiColorNeutral30 !default; $euiColorBorderBaseSuccess: $euiColorSuccess30 !default; $euiColorBorderBaseWarning: $euiColorWarning30 !default; +$euiColorBorderBaseRisk: $euiColorRisk30 !default; $euiColorBorderBaseDanger: $euiColorDanger30 !default; $euiColorBorderBasePlain: $euiColorShade30 !default; @@ -115,8 +125,10 @@ $euiColorBorderBaseFormsControl: $euiColorShade60 !default; $euiColorBorderStrongPrimary: $euiColorPrimary100 !default; $euiColorBorderStrongAccent: $euiColorAccent100 !default; $euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary100 !default; +$euiColorBorderStrongNeutral: $euiColorNeutral100 !default; $euiColorBorderStrongSuccess: $euiColorSuccess100 !default; $euiColorBorderStrongWarning: $euiColorWarning100 !default; +$euiColorBorderStrongRisk: $euiColorRisk100 !default; $euiColorBorderStrongDanger: $euiColorDanger100 !default; // Charts diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts index cb03fd3e03b..62c84723e34 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -46,8 +46,10 @@ export const brand_text_colors: _EuiThemeBrandTextColors = { textPrimary: SEMANTIC_COLORS.primary100, textAccent: SEMANTIC_COLORS.accent100, textAccentSecondary: SEMANTIC_COLORS.accentSecondary100, + textNeutral: SEMANTIC_COLORS.neutral100, textSuccess: SEMANTIC_COLORS.success100, textWarning: SEMANTIC_COLORS.warning110, + textRisk: SEMANTIC_COLORS.risk100, textDanger: SEMANTIC_COLORS.danger100, }; @@ -80,8 +82,10 @@ export const background_colors: _EuiThemeBackgroundColors = { backgroundBasePrimary: SEMANTIC_COLORS.primary10, backgroundBaseAccent: SEMANTIC_COLORS.accent10, backgroundBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary10, + backgroundBaseNeutral: SEMANTIC_COLORS.neutral10, backgroundBaseSuccess: SEMANTIC_COLORS.success10, backgroundBaseWarning: SEMANTIC_COLORS.warning10, + backgroundBaseRisk: SEMANTIC_COLORS.risk10, backgroundBaseDanger: SEMANTIC_COLORS.danger10, backgroundBaseSubdued: SEMANTIC_COLORS.shade10, backgroundBasePlain: SEMANTIC_COLORS.plainLight, @@ -101,16 +105,20 @@ export const background_colors: _EuiThemeBackgroundColors = { backgroundLightPrimary: SEMANTIC_COLORS.primary20, backgroundLightAccent: SEMANTIC_COLORS.accent20, backgroundLightAccentSecondary: SEMANTIC_COLORS.accentSecondary20, + backgroundLightNeutral: SEMANTIC_COLORS.neutral20, backgroundLightSuccess: SEMANTIC_COLORS.success20, backgroundLightWarning: SEMANTIC_COLORS.warning20, + backgroundLightRisk: SEMANTIC_COLORS.risk20, backgroundLightDanger: SEMANTIC_COLORS.danger20, backgroundLightText: SEMANTIC_COLORS.shade20, backgroundFilledPrimary: SEMANTIC_COLORS.primary90, backgroundFilledAccent: SEMANTIC_COLORS.accent90, backgroundFilledAccentSecondary: SEMANTIC_COLORS.accentSecondary90, + backgroundFilledNeutral: SEMANTIC_COLORS.neutral80, backgroundFilledSuccess: SEMANTIC_COLORS.success90, backgroundFilledWarning: SEMANTIC_COLORS.warning40, + backgroundFilledRisk: SEMANTIC_COLORS.risk70, backgroundFilledDanger: SEMANTIC_COLORS.danger90, backgroundFilledText: SEMANTIC_COLORS.shade90, }; @@ -127,8 +135,10 @@ export const transparent_background_colors: _EuiThemeTransparentBackgroundColors backgroundTransparentAccent: background_colors.backgroundBaseAccent, backgroundTransparentAccentSecondary: background_colors.backgroundBaseAccentSecondary, + backgroundTransparentNeutral: background_colors.backgroundBaseNeutral, backgroundTransparentSuccess: background_colors.backgroundBaseSuccess, backgroundTransparentWarning: background_colors.backgroundBaseWarning, + backgroundTransparentRisk: background_colors.backgroundBaseRisk, backgroundTransparentDanger: background_colors.backgroundBaseDanger, backgroundTransparentSubdued: SEMANTIC_COLORS.shade15, backgroundTransparentHighlighted: SEMANTIC_COLORS.shade15, @@ -139,8 +149,10 @@ export const border_colors: _EuiThemeBorderColors = { borderBasePrimary: SEMANTIC_COLORS.primary30, borderBaseAccent: SEMANTIC_COLORS.accent30, borderBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary30, + borderBaseNeutral: SEMANTIC_COLORS.neutral30, borderBaseSuccess: SEMANTIC_COLORS.success30, borderBaseWarning: SEMANTIC_COLORS.warning30, + borderBaseRisk: SEMANTIC_COLORS.risk30, borderBaseDanger: SEMANTIC_COLORS.danger30, borderBasePlain: SEMANTIC_COLORS.shade30, @@ -154,8 +166,10 @@ export const border_colors: _EuiThemeBorderColors = { borderStrongPrimary: SEMANTIC_COLORS.primary100, borderStrongAccent: SEMANTIC_COLORS.accent100, borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary100, + borderStrongNeutral: SEMANTIC_COLORS.neutral100, borderStrongSuccess: SEMANTIC_COLORS.success100, borderStrongWarning: SEMANTIC_COLORS.warning100, + borderStrongRisk: SEMANTIC_COLORS.risk100, borderStrongDanger: SEMANTIC_COLORS.danger100, }; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_severity.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_severity.scss new file mode 100644 index 00000000000..d908dcfd386 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_severity.scss @@ -0,0 +1,7 @@ +// Severity +$euiColorSeverityUnknown: #E3E8F2 !default; +$euiColorSeverityNeutral: #B5E5F2 !default; +$euiColorSeveritySuccess: #24C292 !default; +$euiColorSeverityWarning: #FCD883 !default; +$euiColorSeverityRisk: #FF995E !default; +$euiColorSeverityDanger: #EE4C48 !default; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_severity.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_severity.ts new file mode 100644 index 00000000000..38a61e70459 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_severity.ts @@ -0,0 +1,18 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { SEMANTIC_COLORS } from './_semantic_colors'; + +export const severityColors = { + unknown: SEMANTIC_COLORS.shade20, + neutral: SEMANTIC_COLORS.neutral30, + success: SEMANTIC_COLORS.success60, + warning: SEMANTIC_COLORS.warning30, + risk: SEMANTIC_COLORS.risk50, + danger: SEMANTIC_COLORS.danger70, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts index c2d7d03df47..ad23d720054 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts @@ -94,22 +94,6 @@ export const colorVis: _EuiThemeVisColors = { euiColorVisNeutral0: PRIMITIVE_COLORS.mutedGrey10, - euiColorSeverity0: PRIMITIVE_COLORS.mutedGrey20, - euiColorSeverity1: SEMANTIC_COLORS.shade90, - euiColorSeverity2: SEMANTIC_COLORS.shade75, - euiColorSeverity3: SEMANTIC_COLORS.shade60, - euiColorSeverity4: SEMANTIC_COLORS.shade45, - euiColorSeverity5: SEMANTIC_COLORS.shade30, - euiColorSeverity6: SEMANTIC_COLORS.warning20, - euiColorSeverity7: SEMANTIC_COLORS.warning30, - euiColorSeverity8: SEMANTIC_COLORS.danger30, - euiColorSeverity9: SEMANTIC_COLORS.danger40, - euiColorSeverity10: SEMANTIC_COLORS.danger50, - euiColorSeverity11: SEMANTIC_COLORS.danger60, - euiColorSeverity12: SEMANTIC_COLORS.danger70, - euiColorSeverity13: SEMANTIC_COLORS.danger80, - euiColorSeverity14: SEMANTIC_COLORS.danger90, - euiColorVisGrey0: PRIMITIVE_COLORS.blueGrey30, euiColorVisGrey1: PRIMITIVE_COLORS.blueGrey60, euiColorVisGrey2: PRIMITIVE_COLORS.blueGrey90, diff --git a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts index 128d145f947..e570577d603 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts @@ -86,6 +86,21 @@ export const PRIMITIVE_COLORS = { blue130: '#0D2F5E', blue140: '#0A2342', + 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', + teal10: '#E2F9F7', teal20: '#C9F3F0', teal30: '#A6EDEA', @@ -146,6 +161,21 @@ export const PRIMITIVE_COLORS = { yellow130: '#3D3014', yellow140: '#2C2721', + 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', + red10: '#FFE8E5', red20: '#FDDDD8', red30: '#FFC9C2', diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss index ed5ece438ae..bac70d6ebfa 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -77,6 +77,21 @@ $euiColorAccentSecondary140: #03282B !default; $euiColorAccentSecondary70Alpha12: rgba($euiColorAccentSecondary70, 0.12) !default; $euiColorAccentSecondary70Alpha16: rgba($euiColorAccentSecondary70, 0.16) !default; +$euiColorNeutral10: '#E5F6FA' !default; +$euiColorNeutral20: '#CFEEF7' !default; +$euiColorNeutral30: '#B5E5F2' !default; +$euiColorNeutral40: '#94D8EB' !default; +$euiColorNeutral50: '#63C8E3' !default; +$euiColorNeutral60: '#37B8DC' !default; +$euiColorNeutral70: '#0dA1C9' !default; +$euiColorNeutral80: '#1C8CB5' !default; +$euiColorNeutral90: '#19799F' !default; +$euiColorNeutral100: '#0F658A' !default; +$euiColorNeutral110: '#055476' !default; +$euiColorNeutral120: '#00425C' !default; +$euiColorNeutral130: '#003447' !default; +$euiColorNeutral140: '#002938' !default; + $euiColorSuccess10: #E2F8F0 !default; $euiColorSuccess20: #C9F3E3 !default; $euiColorSuccess30: #AEE8D2 !default; @@ -131,6 +146,21 @@ $euiColorDanger140: #351721 !default; $euiColorDanger70Alpha12: rgba($euiColorDanger70, 0.12) !default; $euiColorDanger70Alpha16: rgba($euiColorDanger70, 0.16) !default; +$euiColorRisk10: '#FFEDD6' !default; +$euiColorRisk20: '#FFDEBF' !default; +$euiColorRisk30: '#FFCDA1' !default; +$euiColorRisk40: '#FFB787' !default; +$euiColorRisk50: '#FF995E' !default; +$euiColorRisk60: '#FC8544' !default; +$euiColorRisk70: '#ED6723' !default; +$euiColorRisk80: '#DB541B' !default; +$euiColorRisk90: '#C24411' !default; +$euiColorRisk100: '#9E3A16' !default; +$euiColorRisk110: '#782E18' !default; +$euiColorRisk120: '#5E281A' !default; +$euiColorRisk130: '#4A221C' !default; +$euiColorRisk140: '#361D18' !default; + $euiColorAssistance10: #F3ECFE !default; $euiColorAssistance20: #ECE2FE !default; $euiColorAssistance30: #DECDFE !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts index 4beb59c8675..3cb8427b0a5 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts @@ -58,6 +58,21 @@ const _semantic_colors = { accentSecondary130: PRIMITIVE_COLORS.teal130, accentSecondary140: PRIMITIVE_COLORS.teal140, + neutral10: PRIMITIVE_COLORS.sky10, + neutral20: PRIMITIVE_COLORS.sky20, + neutral30: PRIMITIVE_COLORS.sky30, + neutral40: PRIMITIVE_COLORS.sky40, + neutral50: PRIMITIVE_COLORS.sky50, + neutral60: PRIMITIVE_COLORS.sky60, + neutral70: PRIMITIVE_COLORS.sky70, + neutral80: PRIMITIVE_COLORS.sky80, + neutral90: PRIMITIVE_COLORS.sky90, + neutral100: PRIMITIVE_COLORS.sky100, + neutral110: PRIMITIVE_COLORS.sky110, + neutral120: PRIMITIVE_COLORS.sky120, + neutral130: PRIMITIVE_COLORS.sky130, + neutral140: PRIMITIVE_COLORS.sky140, + success10: PRIMITIVE_COLORS.green10, success20: PRIMITIVE_COLORS.green20, success30: PRIMITIVE_COLORS.green30, @@ -103,6 +118,21 @@ const _semantic_colors = { danger130: PRIMITIVE_COLORS.red130, danger140: PRIMITIVE_COLORS.red140, + 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, + assistance10: PRIMITIVE_COLORS.purple10, assistance20: PRIMITIVE_COLORS.purple20, assistance30: PRIMITIVE_COLORS.purple30, diff --git a/packages/eui-theme-borealis/src/variables/colors/index.ts b/packages/eui-theme-borealis/src/variables/colors/index.ts index a6e61366653..4c0ae458220 100644 --- a/packages/eui-theme-borealis/src/variables/colors/index.ts +++ b/packages/eui-theme-borealis/src/variables/colors/index.ts @@ -12,6 +12,7 @@ import { SEMANTIC_COLORS } from './_semantic_colors'; import { light_colors } from './_colors_light'; import { dark_colors } from './_colors_dark'; import { colorVis } from './_colors_vis'; +import { severityColors } from './_colors_severity'; export const colors: _EuiThemeColors = { ghost: SEMANTIC_COLORS.plainLight, @@ -21,4 +22,5 @@ export const colors: _EuiThemeColors = { LIGHT: light_colors, DARK: dark_colors, vis: colorVis, + severity: severityColors, }; diff --git a/packages/eui-theme-common/changelogs/upcoming/8601.md b/packages/eui-theme-common/changelogs/upcoming/8601.md new file mode 100644 index 00000000000..e55108c1d7c --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/8601.md @@ -0,0 +1,52 @@ +- Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` +- Added type for semantic severity color tokens + - `colors.severity.unknown` + - `colors.severity.neutral` + - `colors.severity.success` + - `colors.severity.warning` + - `colors.severity.risk` + - `colors.severity.danger` +- Added types for semantic color tokens for variants `neutral` and `risk`: + - `colors.textNeutral` + - `colors.textRisk` + - `colors.backgroundBaseNeutral` + - `colors.backgroundBaseRisk` + - `colors.backgroundLightNeutral` + - `colors.backgroundLightRisk` + - `colors.backgroundFilledNeutral` + - `colors.backgroundFilledRisk` + - `colors.borderBaseNeutral` + - `colors.borderBaseRisk` + - `colors.borderStrongNeutral` + - `colors.borderStrongRisk` +- Added types for button component tokens for variants `neutral` and `risk`: + - `components.buttons.backgroundNeutral` + - `components.buttons.backgroundRisk` + - `components.buttons.backgroundFilledNeutral` + - `components.buttons.backgroundFilledRisk` + - `components.buttons.backgroundEmptyNeutralHover` + - `components.buttons.backgroundEmptyRiskHover` + - `components.buttons.textColorNeutral` + - `components.buttons.textColorRisk` + - `components.buttons.textColorFilledNeutral` + - `components.buttons.textColorFilledRisk` + +**Breaking changes** + +- Removed types for numbered severity color tokens: + - `colors.vis.euiColorSeverity0` + - `colors.vis.euiColorSeverity1` + - `colors.vis.euiColorSeverity2` + - `colors.vis.euiColorSeverity3` + - `colors.vis.euiColorSeverity4` + - `colors.vis.euiColorSeverity5` + - `colors.vis.euiColorSeverity6` + - `colors.vis.euiColorSeverity7` + - `colors.vis.euiColorSeverity8` + - `colors.vis.euiColorSeverity9` + - `colors.vis.euiColorSeverity10` + - `colors.vis.euiColorSeverity11` + - `colors.vis.euiColorSeverity12` + - `colors.vis.euiColorSeverity13` + - `colors.vis.euiColorSeverity14` + diff --git a/packages/eui-theme-common/src/global_styling/variables/buttons.ts b/packages/eui-theme-common/src/global_styling/variables/buttons.ts index 6ba1f96d4ff..9c6c0a534e7 100644 --- a/packages/eui-theme-common/src/global_styling/variables/buttons.ts +++ b/packages/eui-theme-common/src/global_styling/variables/buttons.ts @@ -15,8 +15,10 @@ export type _EuiThemeButtonColors = { backgroundPrimary: ColorModeSwitch; backgroundAccent: ColorModeSwitch; backgroundAccentSecondary: ColorModeSwitch; + backgroundNeutral: ColorModeSwitch; backgroundSuccess: ColorModeSwitch; backgroundWarning: ColorModeSwitch; + backgroundRisk: ColorModeSwitch; backgroundDanger: ColorModeSwitch; backgroundText: ColorModeSwitch; backgroundDisabled: ColorModeSwitch; @@ -24,8 +26,10 @@ export type _EuiThemeButtonColors = { backgroundFilledPrimary: ColorModeSwitch; backgroundFilledAccent: ColorModeSwitch; backgroundFilledAccentSecondary: ColorModeSwitch; + backgroundFilledNeutral: ColorModeSwitch; backgroundFilledSuccess: ColorModeSwitch; backgroundFilledWarning: ColorModeSwitch; + backgroundFilledRisk: ColorModeSwitch; backgroundFilledDanger: ColorModeSwitch; backgroundFilledText: ColorModeSwitch; backgroundFilledDisabled: ColorModeSwitch; @@ -33,16 +37,20 @@ export type _EuiThemeButtonColors = { backgroundEmptyPrimaryHover: ColorModeSwitch; backgroundEmptyAccentHover: ColorModeSwitch; backgroundEmptyAccentSecondaryHover: ColorModeSwitch; + backgroundEmptyNeutralHover: ColorModeSwitch; backgroundEmptySuccessHover: ColorModeSwitch; backgroundEmptyWarningHover: ColorModeSwitch; + backgroundEmptyRiskHover: ColorModeSwitch; backgroundEmptyDangerHover: ColorModeSwitch; backgroundEmptyTextHover: ColorModeSwitch; textColorPrimary: ColorModeSwitch; textColorAccent: ColorModeSwitch; textColorAccentSecondary: ColorModeSwitch; + textColorNeutral: ColorModeSwitch; textColorSuccess: ColorModeSwitch; textColorWarning: ColorModeSwitch; + textColorRisk: ColorModeSwitch; textColorDanger: ColorModeSwitch; textColorText: ColorModeSwitch; textColorDisabled: ColorModeSwitch; @@ -50,8 +58,10 @@ export type _EuiThemeButtonColors = { textColorFilledPrimary: ColorModeSwitch; textColorFilledAccent: ColorModeSwitch; textColorFilledAccentSecondary: ColorModeSwitch; + textColorFilledNeutral: ColorModeSwitch; textColorFilledSuccess: ColorModeSwitch; textColorFilledWarning: ColorModeSwitch; + textColorFilledRisk: ColorModeSwitch; textColorFilledDanger: ColorModeSwitch; textColorFilledText: ColorModeSwitch; textColorFilledDisabled: ColorModeSwitch; diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts index bc876f52c92..567d3887cc8 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -74,8 +74,10 @@ export type _EuiThemeBrandTextColors = { textPrimary: ColorModeSwitch; textAccent: ColorModeSwitch; textAccentSecondary: ColorModeSwitch; + textNeutral: ColorModeSwitch; textSuccess: ColorModeSwitch; textWarning: ColorModeSwitch; + textRisk: ColorModeSwitch; textDanger: ColorModeSwitch; }; @@ -177,8 +179,10 @@ export type _EuiThemeBackgroundColors = { backgroundBasePrimary: ColorModeSwitch; backgroundBaseAccent: ColorModeSwitch; backgroundBaseAccentSecondary: ColorModeSwitch; + backgroundBaseNeutral: ColorModeSwitch; backgroundBaseSuccess: ColorModeSwitch; backgroundBaseWarning: ColorModeSwitch; + backgroundBaseRisk: ColorModeSwitch; backgroundBaseDanger: ColorModeSwitch; backgroundBaseSubdued: ColorModeSwitch; backgroundBasePlain: ColorModeSwitch; @@ -195,16 +199,20 @@ export type _EuiThemeBackgroundColors = { backgroundLightPrimary: ColorModeSwitch; backgroundLightAccent: ColorModeSwitch; backgroundLightAccentSecondary: ColorModeSwitch; + backgroundLightNeutral: ColorModeSwitch; backgroundLightSuccess: ColorModeSwitch; backgroundLightWarning: ColorModeSwitch; + backgroundLightRisk: ColorModeSwitch; backgroundLightDanger: ColorModeSwitch; backgroundLightText: ColorModeSwitch; backgroundFilledPrimary: ColorModeSwitch; backgroundFilledAccent: ColorModeSwitch; backgroundFilledAccentSecondary: ColorModeSwitch; + backgroundFilledNeutral: ColorModeSwitch; backgroundFilledSuccess: ColorModeSwitch; backgroundFilledWarning: ColorModeSwitch; + backgroundFilledRisk: ColorModeSwitch; backgroundFilledDanger: ColorModeSwitch; backgroundFilledText: ColorModeSwitch; }; @@ -220,10 +228,14 @@ export type _EuiThemeTransparentBackgroundColors = { /** @deprecated - temp. token, was never in use */ backgroundTransparentAccentSecondary: ColorModeSwitch; /** @deprecated - temp. token, was never in use */ + backgroundTransparentNeutral: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ backgroundTransparentSuccess: ColorModeSwitch; /** @deprecated - temp. token, was never in use */ backgroundTransparentWarning: ColorModeSwitch; /** @deprecated - temp. token, was never in use */ + backgroundTransparentRisk: ColorModeSwitch; + /** @deprecated - temp. token, was never in use */ backgroundTransparentDanger: ColorModeSwitch; /** @deprecated - temp. token, was never in use */ backgroundTransparentSubdued: ColorModeSwitch; @@ -237,8 +249,10 @@ export type _EuiThemeBorderColors = { borderBasePrimary: ColorModeSwitch; borderBaseAccent: ColorModeSwitch; borderBaseAccentSecondary: ColorModeSwitch; + borderBaseNeutral: ColorModeSwitch; borderBaseSuccess: ColorModeSwitch; borderBaseWarning: ColorModeSwitch; + borderBaseRisk: ColorModeSwitch; borderBaseDanger: ColorModeSwitch; borderBasePlain: ColorModeSwitch; @@ -256,8 +270,10 @@ export type _EuiThemeBorderColors = { borderStrongPrimary: ColorModeSwitch; borderStrongAccent: ColorModeSwitch; borderStrongAccentSecondary: ColorModeSwitch; + borderStrongNeutral: ColorModeSwitch; borderStrongSuccess: ColorModeSwitch; borderStrongWarning: ColorModeSwitch; + borderStrongRisk: ColorModeSwitch; borderStrongDanger: ColorModeSwitch; }; @@ -318,22 +334,6 @@ export type _EuiThemeVisColors = { euiColorVisNeutral0: string; - euiColorSeverity0: string; - euiColorSeverity1: string; - euiColorSeverity2: string; - euiColorSeverity3: string; - euiColorSeverity4: string; - euiColorSeverity5: string; - euiColorSeverity6: string; - euiColorSeverity7: string; - euiColorSeverity8: string; - euiColorSeverity9: string; - euiColorSeverity10: string; - euiColorSeverity11: string; - euiColorSeverity12: string; - euiColorSeverity13: string; - euiColorSeverity14: string; - euiColorVisGrey0: string; euiColorVisGrey1: string; euiColorVisGrey2: string; @@ -351,6 +351,15 @@ export type _EuiThemeVisColors = { euiColorVisComplementary1: string; }; +export type _EuiThemeSeverityColors = { + unknown: string; + success: string; + neutral: string; + warning: string; + risk: string; + danger: string; +}; + export type _EuiThemeConstantColors = { ghost: string; ink: string; @@ -359,6 +368,7 @@ export type _EuiThemeConstantColors = { plainDark: string; vis: _EuiThemeVisColors; + severity: _EuiThemeSeverityColors; }; export type _EuiThemeColorsMode = _EuiThemeBrandColors & diff --git a/packages/eui/changelogs/upcoming/8601.md b/packages/eui/changelogs/upcoming/8601.md new file mode 100644 index 00000000000..c5c047b19a3 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8601.md @@ -0,0 +1,47 @@ +- Added semantic severity color tokens: + - `colors.severity.unknown` + - `colors.severity.neutral` + - `colors.severity.success` + - `colors.severity.warning` + - `colors.severity.risk` + - `colors.severity.danger` +- Added semantic color tokens for variants `neutral` and `risk`: + - `colors.textNeutral` + - `colors.textRisk` + - `colors.backgroundBaseNeutral` + - `colors.backgroundBaseRisk` + - `colors.backgroundLightNeutral` + - `colors.backgroundLightRisk` + - `colors.backgroundFilledNeutral` + - `colors.backgroundFilledRisk` + - `colors.borderBaseNeutral` + - `colors.borderBaseRisk` + - `colors.borderStrongNeutral` + - `colors.borderStrongRisk` +- Added semantic color variants `neutral` and `risk` for the following components: + - `EuiButton` + - `EuiButtonEmpty` + - `EuiButtonIcon` + - `EuiBadge` + - `EuiIcon` + - `EuiPanel` + +**Breaking changes** + +- Removed numbered severity color tokens: + - `colors.vis.euiColorSeverity0` + - `colors.vis.euiColorSeverity1` + - `colors.vis.euiColorSeverity2` + - `colors.vis.euiColorSeverity3` + - `colors.vis.euiColorSeverity4` + - `colors.vis.euiColorSeverity5` + - `colors.vis.euiColorSeverity6` + - `colors.vis.euiColorSeverity7` + - `colors.vis.euiColorSeverity8` + - `colors.vis.euiColorSeverity9` + - `colors.vis.euiColorSeverity10` + - `colors.vis.euiColorSeverity11` + - `colors.vis.euiColorSeverity12` + - `colors.vis.euiColorSeverity13` + - `colors.vis.euiColorSeverity14` + diff --git a/packages/eui/src-docs/src/views/guidelines/_index.scss b/packages/eui/src-docs/src/views/guidelines/_index.scss index 26a79af1b06..50b713acceb 100644 --- a/packages/eui/src-docs/src/views/guidelines/_index.scss +++ b/packages/eui/src-docs/src/views/guidelines/_index.scss @@ -258,6 +258,12 @@ background: $euiColorVis0; } +.guideSass__severity { + padding: $euiSizeS; + color: $euiColorInk; + background: $euiColorSeverityRisk; +} + .guideSass__fontFamily { font-size: $euiSizeL; background: $euiColorDarkestShade; diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json index 932b64419c0..d81a4f03771 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json @@ -39,8 +39,10 @@ "primary": "#36a2ef", "accent": "#f68fbe", "accentSecondary": "#7dded8", + "neutral": "#becfe3", "success": "#7dded8", "warning": "#f3d371", + "risk": "#da8b45", "danger": "#f86b63", "ghost": "#ffffff", "text": "#98a2b3" @@ -300,21 +302,6 @@ "euiColorVisDanger0": "#CC5642", "euiColorVisDanger1": "#E7664C", "euiColorVisNeutral0": "#FFFFFF", - "euiColorSeverity0": "#D3DAE6", - "euiColorSeverity1": "#6092C0", - "euiColorSeverity2": "#78A2C9", - "euiColorSeverity3": "#90B0D1", - "euiColorSeverity4": "#A6C0DA", - "euiColorSeverity5": "#BECFE3", - "euiColorSeverity6": "#DECC79", - "euiColorSeverity7": "#D6BF57", - "euiColorSeverity8": "#E69D8F", - "euiColorSeverity9": "#E2907F", - "euiColorSeverity10": "#E18773", - "euiColorSeverity11": "#DD7B67", - "euiColorSeverity12": "#D66E5C", - "euiColorSeverity13": "#D2634E", - "euiColorSeverity14": "#CC5642", "euiColorVisGrey0": "#d3dae6", "euiColorVisGrey1": "#98a2b3", "euiColorVisGrey2": "#69707d", @@ -327,6 +314,12 @@ "euiColorVisCool2": "#6092C0", "euiColorVisComplementary0": "#6092C0", "euiColorVisComplementary1": "#DA8B45", + "euiColorSeverityUnknown": "#D3DAE6", + "euiColorSeverityNeutral": "#BECFE3", + "euiColorSeveritySuccess": "#54B399", + "euiColorSeverityWarning": "#D6BF57", + "euiColorSeverityRisk": "#DA8B45", + "euiColorSeverityDanger": "#E7664C", "euiColorChartLines": "#343741", "euiColorChartBand": "#2a2b33", "euiColorGhost": "#ffffff", @@ -362,8 +355,10 @@ "euiColorTextPrimary": "#36a2ef", "euiColorTextAccent": "#f68fbe", "euiColorTextAccentSecondary": "#7dded8", + "euiColorTextNeutral": "#becfe3", "euiColorTextSuccess": "#7dded8", "euiColorTextWarning": "#f3d371", + "euiColorTextRisk": "#da8b45", "euiColorTextDanger": "#f86b63", "euiColorTextParagraph": "#DFE5EF", "euiColorTextHeading": "#DFE5EF", @@ -373,8 +368,10 @@ "euiColorBackgroundBasePrimary": "#0b2030", "euiColorBackgroundBaseAccent": "#311d26", "euiColorBackgroundBaseAccentSecondary": "#192c2b", + "euiColorBackgroundBaseNeutral": "#26292d", "euiColorBackgroundBaseSuccess": "#192c2b", "euiColorBackgroundBaseWarning": "#312a17", + "euiColorBackgroundBaseRisk": "#2c1c0e", "euiColorBackgroundBaseDanger": "#321514", "euiColorBackgroundBaseSubdued": "#141519", "euiColorBackgroundBaseDisabled": "#515761", @@ -390,22 +387,28 @@ "euiColorBackgroundLightPrimary": "#103148", "euiColorBackgroundLightAccent": "#4a2b39", "euiColorBackgroundLightAccentSecondary": "#264341", + "euiColorBackgroundLightNeutral": "#393e44", "euiColorBackgroundLightSuccess": "#264341", "euiColorBackgroundLightWarning": "#493f22", + "euiColorBackgroundLightRisk": "#412a15", "euiColorBackgroundLightDanger": "#4a201e", "euiColorBackgroundLightText": "#2a2c34", "euiColorBackgroundFilledPrimary": "#36A2EF", "euiColorBackgroundFilledAccent": "#F68FBE", "euiColorBackgroundFilledAccentSecondary": "#7DDED8", + "euiColorBackgroundFilledNeutral": "#BECFE3", "euiColorBackgroundFilledSuccess": "#7DDED8", "euiColorBackgroundFilledWarning": "#F3D371", + "euiColorBackgroundFilledRisk": "#DA8B45", "euiColorBackgroundFilledDanger": "#F86B63", "euiColorBackgroundFilledText": "#DFE5EF", "euiColorBorderBasePrimary": "#164160", "euiColorBorderBaseAccent": "#62394c", "euiColorBorderBaseAccentSecondary": "#325956", + "euiColorBorderBaseNeutral": "#4c535b", "euiColorBorderBaseSuccess": "#325956", "euiColorBorderBaseWarning": "#927f44", + "euiColorBorderBaseRisk": "#835329", "euiColorBorderBaseDanger": "#632b28", "euiColorBorderBaseSubdued": "#343741", "euiColorBorderBaseDisabled": "rgba(255,255,255,0.1)", @@ -416,7 +419,9 @@ "euiColorBorderStrongPrimary": "#164160", "euiColorBorderStrongAccent": "#62394c", "euiColorBorderStrongAccentSecondary": "#325956", + "euiColorBorderStrongNeutral": "#4c535b", "euiColorBorderStrongSuccess": "#325956", "euiColorBorderStrongWarning": "#927f44", + "euiColorBorderStrongRisk": "#835329", "euiColorBorderStrongDanger": "#632b28" } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json.d.ts index 0657faa6809..afd03354874 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json.d.ts +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json.d.ts @@ -40,8 +40,10 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { primary: string; accent: string; accentSecondary: string; + neutral: string; success: string; warning: string; + risk: string; danger: string; ghost: string; text: string; @@ -313,21 +315,12 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { euiColorVisCool2: string; euiColorVisComplementary0: string; euiColorVisComplementary1: string; - euiColorSeverity0: string; - euiColorSeverity1: string; - euiColorSeverity2: string; - euiColorSeverity3: string; - euiColorSeverity4: string; - euiColorSeverity5: string; - euiColorSeverity6: string; - euiColorSeverity7: string; - euiColorSeverity8: string; - euiColorSeverity9: string; - euiColorSeverity10: string; - euiColorSeverity11: string; - euiColorSeverity12: string; - euiColorSeverity13: string; - euiColorSeverity14: string; + euiColorSeverityUnknown: string; + euiColorSeverityNeutral: string; + euiColorSeveritySuccess: string; + euiColorSeverityWarning: string; + euiColorSeverityRisk: string; + euiColorSeverityDanger: string; euiColorChartLines: string; euiColorChartBand: string; euiColorGhost: string; @@ -363,8 +356,10 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { euiColorTextPrimary: string; euiColorTextAccent: string; euiColorTextAccentSecondary: string; + euiColorTextNeutral: string; euiColorTextSuccess: string; euiColorTextWarning: string; + euiColorTextRisk: string; euiColorTextDanger: string; euiColorTextParagraph: string; euiColorTextHeading: string; @@ -374,8 +369,10 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { euiColorBackgroundBasePrimary: string; euiColorBackgroundBaseAccent: string; euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseNeutral: string; euiColorBackgroundBaseSuccess: string; euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseRisk: string; euiColorBackgroundBaseDanger: string; euiColorBackgroundBaseSubdued: string; euiColorBackgroundBasePlain: string; @@ -391,22 +388,28 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { euiColorBackgroundLightPrimary: string; euiColorBackgroundLightAccent: string; euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightNeutral: string; euiColorBackgroundLightSuccess: string; euiColorBackgroundLightWarning: string; + euiColorBackgroundLightRisk: string; euiColorBackgroundLightDanger: string; euiColorBackgroundLightText: string; euiColorBackgroundFilledPrimary: string; euiColorBackgroundFilledAccent: string; euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledNeutral: string; euiColorBackgroundFilledSuccess: string; euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledRisk: string; euiColorBackgroundFilledDanger: string; euiColorBackgroundFilledText: string; euiColorBorderBasePrimary: string; euiColorBorderBaseAccent: string; euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseNeutral: string; euiColorBorderBaseSuccess: string; euiColorBorderBaseWarning: string; + euiColorBorderBaseRisk: string; euiColorBorderBaseDanger: string; euiColorBorderBasePlain: string; euiColorBorderBaseSubdued: string; @@ -417,8 +420,10 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { euiColorBorderStrongPrimary: string; euiColorBorderStrongAccent: string; euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongNeutral: string; euiColorBorderStrongSuccess: string; euiColorBorderStrongWarning: string; + euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; }; export default sassVariables; diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json index a9f5df6bed0..d838c4d5790 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json @@ -39,8 +39,10 @@ "primary": "#0077cc", "accent": "#f04e98", "accentSecondary": "#00bfb3", + "neutral": "#bedfe3", "success": "#00bfb3", "warning": "#fec514", + "risk": "#da8b45", "danger": "#bd271e", "ghost": "#ffffff", "text": "#69707d" @@ -300,21 +302,6 @@ "euiColorVisDanger0": "#CC5642", "euiColorVisDanger1": "#E7664C", "euiColorVisNeutral0": "#FFFFFF", - "euiColorSeverity0": "#D3DAE6", - "euiColorSeverity1": "#6092C0", - "euiColorSeverity2": "#78A2C9", - "euiColorSeverity3": "#90B0D1", - "euiColorSeverity4": "#A6C0DA", - "euiColorSeverity5": "#BECFE3", - "euiColorSeverity6": "#DECC79", - "euiColorSeverity7": "#D6BF57", - "euiColorSeverity8": "#E69D8F", - "euiColorSeverity9": "#E2907F", - "euiColorSeverity10": "#E18773", - "euiColorSeverity11": "#DD7B67", - "euiColorSeverity12": "#D66E5C", - "euiColorSeverity13": "#D2634E", - "euiColorSeverity14": "#CC5642", "euiColorVisGrey0": "#d3dae6", "euiColorVisGrey1": "#98a2b3", "euiColorVisGrey2": "#69707d", @@ -327,6 +314,12 @@ "euiColorVisCool2": "#6092C0", "euiColorVisComplementary0": "#6092C0", "euiColorVisComplementary1": "#DA8B45", + "euiColorSeverityUnknown": "#D3DAE6", + "euiColorSeverityNeutral": "#BECFE3", + "euiColorSeveritySuccess": "#54B399", + "euiColorSeverityWarning": "#D6BF57", + "euiColorSeverityRisk": "#DA8B45", + "euiColorSeverityDanger": "#E7664C", "euiColorChartLines": "#eef0f3", "euiColorChartBand": "#f5f7fa", "euiColorGhost": "#ffffff", @@ -362,8 +355,10 @@ "euiColorTextPrimary": "#006bb8", "euiColorTextAccent": "#ba3d76", "euiColorTextAccentSecondary": "#007871", + "euiColorTextNeutral": "#626a75", "euiColorTextSuccess": "#007871", "euiColorTextWarning": "#83650a", + "euiColorTextRisk": "#915c2e", "euiColorTextDanger": "#bd271e", "euiColorTextParagraph": "#343741", "euiColorTextHeading": "#1a1c21", @@ -373,8 +368,10 @@ "euiColorBackgroundBasePrimary": "#e6f1fa", "euiColorBackgroundBaseAccent": "#feedf5", "euiColorBackgroundBaseAccentSecondary": "#e6f9f7", + "euiColorBackgroundBaseNeutral": "#f9fafc", "euiColorBackgroundBaseSuccess": "#e6f9f7", "euiColorBackgroundBaseWarning": "#fff9e8", + "euiColorBackgroundBaseRisk": "#fbf3ec", "euiColorBackgroundBaseDanger": "#f8e9e9", "euiColorBackgroundBaseSubdued": "#f7f8fc", "euiColorBackgroundBaseDisabled": "#ABB4C4", @@ -390,22 +387,28 @@ "euiColorBackgroundLightPrimary": "#cce4f5", "euiColorBackgroundLightAccent": "#fcdcea", "euiColorBackgroundLightAccentSecondary": "#ccf2f0", + "euiColorBackgroundLightNeutral": "#f2f5f9", "euiColorBackgroundLightSuccess": "#ccf2f0", "euiColorBackgroundLightWarning": "#fff3d0", + "euiColorBackgroundLightRisk": "#f8e8da", "euiColorBackgroundLightDanger": "#f2d4d2", "euiColorBackgroundLightText": "#e9edf3", "euiColorBackgroundFilledPrimary": "#0077CC", "euiColorBackgroundFilledAccent": "#f583b7", "euiColorBackgroundFilledAccentSecondary": "#4dd2ca", + "euiColorBackgroundFilledNeutral": "#BECFE3", "euiColorBackgroundFilledSuccess": "#4dd2ca", "euiColorBackgroundFilledWarning": "#FEC514", + "euiColorBackgroundFilledRisk": "#DA8B45", "euiColorBackgroundFilledDanger": "#BD271E", "euiColorBackgroundFilledText": "#69707D", "euiColorBorderBasePrimary": "#99c9eb", "euiColorBorderBaseAccent": "#f9b8d6", "euiColorBorderBaseAccentSecondary": "#99e5e1", + "euiColorBorderBaseNeutral": "#e5ecf4", "euiColorBorderBaseSuccess": "#99e5e1", "euiColorBorderBaseWarning": "#fedc72", + "euiColorBorderBaseRisk": "#e9b98f", "euiColorBorderBaseDanger": "#e5a9a5", "euiColorBorderBaseSubdued": "#D3DAE6", "euiColorBorderBaseDisabled": "rgba(191,198,210,0.1)", @@ -416,7 +419,9 @@ "euiColorBorderStrongPrimary": "#99c9eb", "euiColorBorderStrongAccent": "#f9b8d6", "euiColorBorderStrongAccentSecondary": "#99e5e1", + "euiColorBorderStrongNeutral": "#e5ecf4", "euiColorBorderStrongSuccess": "#99e5e1", "euiColorBorderStrongWarning": "#fedc72", + "euiColorBorderStrongRisk": "#e9b98f", "euiColorBorderStrongDanger": "#e5a9a5" } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json.d.ts index 6b7bd9a9d20..d5de28c48d7 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json.d.ts +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json.d.ts @@ -40,8 +40,10 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { primary: string; accent: string; accentSecondary: string; + neutral: string; success: string; warning: string; + risk: string; danger: string; ghost: string; text: string; @@ -313,21 +315,12 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { euiColorVisCool2: string; euiColorVisComplementary0: string; euiColorVisComplementary1: string; - euiColorSeverity0: string; - euiColorSeverity1: string; - euiColorSeverity2: string; - euiColorSeverity3: string; - euiColorSeverity4: string; - euiColorSeverity5: string; - euiColorSeverity6: string; - euiColorSeverity7: string; - euiColorSeverity8: string; - euiColorSeverity9: string; - euiColorSeverity10: string; - euiColorSeverity11: string; - euiColorSeverity12: string; - euiColorSeverity13: string; - euiColorSeverity14: string; + euiColorSeverityUnknown: string; + euiColorSeverityNeutral: string; + euiColorSeveritySuccess: string; + euiColorSeverityWarning: string; + euiColorSeverityRisk: string; + euiColorSeverityDanger: string; euiColorChartLines: string; euiColorChartBand: string; euiColorGhost: string; @@ -363,8 +356,10 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { euiColorTextPrimary: string; euiColorTextAccent: string; euiColorTextAccentSecondary: string; + euiColorTextNeutral: string; euiColorTextSuccess: string; euiColorTextWarning: string; + euiColorTextRisk: string; euiColorTextDanger: string; euiColorTextParagraph: string; euiColorTextHeading: string; @@ -374,8 +369,10 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { euiColorBackgroundBasePrimary: string; euiColorBackgroundBaseAccent: string; euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseNeutral: string; euiColorBackgroundBaseSuccess: string; euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseRisk: string; euiColorBackgroundBaseDanger: string; euiColorBackgroundBaseSubdued: string; euiColorBackgroundBasePlain: string; @@ -391,22 +388,28 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { euiColorBackgroundLightPrimary: string; euiColorBackgroundLightAccent: string; euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightNeutral: string; euiColorBackgroundLightSuccess: string; euiColorBackgroundLightWarning: string; + euiColorBackgroundLightRisk: string; euiColorBackgroundLightDanger: string; euiColorBackgroundLightText: string; euiColorBackgroundFilledPrimary: string; euiColorBackgroundFilledAccent: string; euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledNeutral: string; euiColorBackgroundFilledSuccess: string; euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledRisk: string; euiColorBackgroundFilledDanger: string; euiColorBackgroundFilledText: string; euiColorBorderBasePrimary: string; euiColorBorderBaseAccent: string; euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseNeutral: string; euiColorBorderBaseSuccess: string; euiColorBorderBaseWarning: string; + euiColorBorderBaseRisk: string; euiColorBorderBaseDanger: string; euiColorBorderBasePlain: string; euiColorBorderBaseSubdued: string; @@ -417,8 +420,10 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { euiColorBorderStrongPrimary: string; euiColorBorderStrongAccent: string; euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongNeutral: string; euiColorBorderStrongSuccess: string; euiColorBorderStrongWarning: string; + euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; }; export default sassVariables; diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json index 774dacf87d2..7b9d9c799c4 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json @@ -39,8 +39,10 @@ "primary": "#61A2FF", "accent": "#EE72A6", "accentSecondary": "#16C5C0", + "neutral": "#63C8E3", "success": "#24C292", "warning": "#FACB3D", + "risk": "#FF995E", "danger": "#F6726A", "ghost": "#07101F", "text": "#8E9FBC" @@ -300,21 +302,6 @@ "euiColorVisDanger0": "#F6726A", "euiColorVisDanger1": "#FFC9C2", "euiColorVisNeutral0": "#F6F9FC", - "euiColorSeverity0": "#E3E6EB", - "euiColorSeverity1": "#5A6D8C", - "euiColorSeverity2": "#7186A8", - "euiColorSeverity3": "#8E9FBC", - "euiColorSeverity4": "#ABB9D0", - "euiColorSeverity5": "#CAD3E2", - "euiColorSeverity6": "#FDE9B5", - "euiColorSeverity7": "#FCD883", - "euiColorSeverity8": "#FFC9C2", - "euiColorSeverity9": "#FFB5AD", - "euiColorSeverity10": "#FC9188", - "euiColorSeverity11": "#F6726A", - "euiColorSeverity12": "#EE4C48", - "euiColorSeverity13": "#DA3737", - "euiColorSeverity14": "#C61E25", "euiColorVisGrey0": "#CAD3E2", "euiColorVisGrey1": "#8E9FBC", "euiColorVisGrey2": "#5A6D8C", @@ -327,6 +314,12 @@ "euiColorVisCool2": "#61A2FF", "euiColorVisComplementary0": "#61A2FF", "euiColorVisComplementary1": "#EAAE01", + "euiColorSeverityUnknown": "#E3E8F2", + "euiColorSeverityNeutral": "#B5E5F2", + "euiColorSeveritySuccess": "#24C292", + "euiColorSeverityWarning": "#FCD883", + "euiColorSeverityRisk": "#FF995E", + "euiColorSeverityDanger": "#EE4C48", "euiColorChartLines": "#7186A8", "euiColorChartBand": "#243147", "euiColorGhost": "#FFFFFF", @@ -362,8 +355,10 @@ "euiColorTextPrimary": "#61A2FF", "euiColorTextAccent": "#EE72A6", "euiColorTextAccentSecondary": "#16C5C0", + "euiColorTextNeutral": "#37B8DC", "euiColorTextSuccess": "#24C292", "euiColorTextWarning": "#FCD883", + "euiColorTextRisk": "#FF995E", "euiColorTextDanger": "#F6726A", "euiColorTextParagraph": "#CAD3E2", "euiColorTextHeading": "#E3E8F2", @@ -373,8 +368,10 @@ "euiColorBackgroundBasePrimary": "#0A2342", "euiColorBackgroundBaseAccent": "#351725", "euiColorBackgroundBaseAccentSecondary": "#03282B", + "euiColorBackgroundBaseNeutral": "#002938", "euiColorBackgroundBaseSuccess": "#092A26", "euiColorBackgroundBaseWarning": "#2C2721", + "euiColorBackgroundBaseRisk": "#361D18", "euiColorBackgroundBaseDanger": "#351721", "euiColorBackgroundBaseSubdued": "#07101F", "euiColorBackgroundBasePlain": "#0B1628", @@ -390,22 +387,28 @@ "euiColorBackgroundLightPrimary": "#0D2F5E", "euiColorBackgroundLightAccent": "#481E32", "euiColorBackgroundLightAccentSecondary": "#023436", + "euiColorBackgroundLightNeutral": "#003447", "euiColorBackgroundLightSuccess": "#0D362B", "euiColorBackgroundLightWarning": "#3D3014", + "euiColorBackgroundLightRisk": "#4A221C", "euiColorBackgroundLightDanger": "#491D27", "euiColorBackgroundLightText": "#1D2A3E", "euiColorBackgroundFilledPrimary": "#61A2FF", "euiColorBackgroundFilledAccent": "#EE72A6", "euiColorBackgroundFilledAccentSecondary": "#16C5C0", + "euiColorBackgroundFilledNeutral": "#63C8E3", "euiColorBackgroundFilledSuccess": "#24C292", "euiColorBackgroundFilledWarning": "#FACB3D", + "euiColorBackgroundFilledRisk": "#FF995E", "euiColorBackgroundFilledDanger": "#F6726A", "euiColorBackgroundFilledText": "#8E9FBC", "euiColorBorderBasePrimary": "#123778", "euiColorBorderBaseAccent": "#5E2140", "euiColorBorderBaseAccentSecondary": "#044949", + "euiColorBorderBaseNeutral": "#00425C", "euiColorBorderBaseSuccess": "#094837", "euiColorBorderBaseWarning": "#513910", + "euiColorBorderBaseRisk": "#5E281A", "euiColorBorderBaseDanger": "#5E2129", "euiColorBorderBasePlain": "#485975", "euiColorBorderBaseSubdued": "#2B394F", @@ -416,7 +419,9 @@ "euiColorBorderStrongPrimary": "#61A2FF", "euiColorBorderStrongAccent": "#EE72A6", "euiColorBorderStrongAccentSecondary": "#16C5C0", + "euiColorBorderStrongNeutral": "#37B8DC", "euiColorBorderStrongSuccess": "#24C292", "euiColorBorderStrongWarning": "#FACB3D", + "euiColorBorderStrongRisk": "#FC8544", "euiColorBorderStrongDanger": "#F6726A" } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts index 46176116e6b..81ab5ff7296 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts @@ -40,8 +40,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { primary: string; accent: string; accentSecondary: string; + neutral: string; success: string; warning: string; + risk: string; danger: string; ghost: string; text: string; @@ -313,21 +315,12 @@ declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { euiColorVisCool2: string; euiColorVisComplementary0: string; euiColorVisComplementary1: string; - euiColorSeverity0: string; - euiColorSeverity1: string; - euiColorSeverity2: string; - euiColorSeverity3: string; - euiColorSeverity4: string; - euiColorSeverity5: string; - euiColorSeverity6: string; - euiColorSeverity7: string; - euiColorSeverity8: string; - euiColorSeverity9: string; - euiColorSeverity10: string; - euiColorSeverity11: string; - euiColorSeverity12: string; - euiColorSeverity13: string; - euiColorSeverity14: string; + euiColorSeverityUnknown: string; + euiColorSeverityNeutral: string; + euiColorSeveritySuccess: string; + euiColorSeverityWarning: string; + euiColorSeverityRisk: string; + euiColorSeverityDanger: string; euiColorChartLines: string; euiColorChartBand: string; euiColorGhost: string; @@ -363,8 +356,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { euiColorTextPrimary: string; euiColorTextAccent: string; euiColorTextAccentSecondary: string; + euiColorTextNeutral: string; euiColorTextSuccess: string; euiColorTextWarning: string; + euiColorTextRisk: string; euiColorTextDanger: string; euiColorTextParagraph: string; euiColorTextHeading: string; @@ -374,8 +369,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { euiColorBackgroundBasePrimary: string; euiColorBackgroundBaseAccent: string; euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseNeutral: string; euiColorBackgroundBaseSuccess: string; euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseRisk: string; euiColorBackgroundBaseDanger: string; euiColorBackgroundBaseSubdued: string; euiColorBackgroundBasePlain: string; @@ -391,22 +388,28 @@ declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { euiColorBackgroundLightPrimary: string; euiColorBackgroundLightAccent: string; euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightNeutral: string; euiColorBackgroundLightSuccess: string; euiColorBackgroundLightWarning: string; + euiColorBackgroundLightRisk: string; euiColorBackgroundLightDanger: string; euiColorBackgroundLightText: string; euiColorBackgroundFilledPrimary: string; euiColorBackgroundFilledAccent: string; euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledNeutral: string; euiColorBackgroundFilledSuccess: string; euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledRisk: string; euiColorBackgroundFilledDanger: string; euiColorBackgroundFilledText: string; euiColorBorderBasePrimary: string; euiColorBorderBaseAccent: string; euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseNeutral: string; euiColorBorderBaseSuccess: string; euiColorBorderBaseWarning: string; + euiColorBorderBaseRisk: string; euiColorBorderBaseDanger: string; euiColorBorderBasePlain: string; euiColorBorderBaseSubdued: string; @@ -417,8 +420,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { euiColorBorderStrongPrimary: string; euiColorBorderStrongAccent: string; euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongNeutral: string; euiColorBorderStrongSuccess: string; euiColorBorderStrongWarning: string; + euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; }; export default sassVariables; diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json index 348a36a8575..488cfba7775 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json @@ -39,8 +39,10 @@ "primary": "#0B64DD", "accent": "#BC1E70", "accentSecondary": "#008B87", + "neutral": "#1C8CB5", "success": "#008A5E", "warning": "#FACB3D", + "risk": "#ED6723", "danger": "#C61E25", "ghost": "#ffffff", "text": "#5A6D8C" @@ -300,21 +302,6 @@ "euiColorVisDanger0": "#F6726A", "euiColorVisDanger1": "#FFC9C2", "euiColorVisNeutral0": "#F6F9FC", - "euiColorSeverity0": "#E3E6EB", - "euiColorSeverity1": "#5A6D8C", - "euiColorSeverity2": "#7186A8", - "euiColorSeverity3": "#8E9FBC", - "euiColorSeverity4": "#ABB9D0", - "euiColorSeverity5": "#CAD3E2", - "euiColorSeverity6": "#FDE9B5", - "euiColorSeverity7": "#FCD883", - "euiColorSeverity8": "#FFC9C2", - "euiColorSeverity9": "#FFB5AD", - "euiColorSeverity10": "#FC9188", - "euiColorSeverity11": "#F6726A", - "euiColorSeverity12": "#EE4C48", - "euiColorSeverity13": "#DA3737", - "euiColorSeverity14": "#C61E25", "euiColorVisGrey0": "#CAD3E2", "euiColorVisGrey1": "#8E9FBC", "euiColorVisGrey2": "#5A6D8C", @@ -327,6 +314,12 @@ "euiColorVisCool2": "#61A2FF", "euiColorVisComplementary0": "#61A2FF", "euiColorVisComplementary1": "#EAAE01", + "euiColorSeverityUnknown": "#E3E8F2", + "euiColorSeverityNeutral": "#B5E5F2", + "euiColorSeveritySuccess": "#24C292", + "euiColorSeverityWarning": "#FCD883", + "euiColorSeverityRisk": "#FF995E", + "euiColorSeverityDanger": "#EE4C48", "euiColorChartLines": "#CAD3E2", "euiColorChartBand": "#F6F9FC", "euiColorGhost": "#FFFFFF", @@ -362,8 +355,10 @@ "euiColorTextPrimary": "#1750BA", "euiColorTextAccent": "#A11262", "euiColorTextAccentSecondary": "#047471", + "euiColorTextNeutral": "#0F658A", "euiColorTextSuccess": "#09724D", "euiColorTextWarning": "#6A4906", + "euiColorTextRisk": "#9E3A16", "euiColorTextDanger": "#A71627", "euiColorTextParagraph": "#1D2A3E", "euiColorTextHeading": "#111C2C", @@ -373,8 +368,10 @@ "euiColorBackgroundBasePrimary": "#E8F1FF", "euiColorBackgroundBaseAccent": "#FFEBF5", "euiColorBackgroundBaseAccentSecondary": "#E2F9F7", + "euiColorBackgroundBaseNeutral": "#E5F6FA", "euiColorBackgroundBaseSuccess": "#E2F8F0", "euiColorBackgroundBaseWarning": "#FDF3D8", + "euiColorBackgroundBaseRisk": "#FFEDD6", "euiColorBackgroundBaseDanger": "#FFE8E5", "euiColorBackgroundBaseSubdued": "#F6F9FC", "euiColorBackgroundBasePlain": "#FFFFFF", @@ -390,22 +387,28 @@ "euiColorBackgroundLightPrimary": "#D9E8FF", "euiColorBackgroundLightAccent": "#FDDDE9", "euiColorBackgroundLightAccentSecondary": "#C9F3F0", + "euiColorBackgroundLightNeutral": "#CFEEF7", "euiColorBackgroundLightSuccess": "#C9F3E3", "euiColorBackgroundLightWarning": "#FDE9B5", + "euiColorBackgroundLightRisk": "#FFDEBF", "euiColorBackgroundLightDanger": "#FDDDD8", "euiColorBackgroundLightText": "#E3E8F2", "euiColorBackgroundFilledPrimary": "#0B64DD", "euiColorBackgroundFilledAccent": "#BC1E70", "euiColorBackgroundFilledAccentSecondary": "#008B87", + "euiColorBackgroundFilledNeutral": "#1C8CB5", "euiColorBackgroundFilledSuccess": "#008A5E", "euiColorBackgroundFilledWarning": "#FACB3D", + "euiColorBackgroundFilledRisk": "#ED6723", "euiColorBackgroundFilledDanger": "#C61E25", "euiColorBackgroundFilledText": "#5A6D8C", "euiColorBorderBasePrimary": "#BFDBFF", "euiColorBorderBaseAccent": "#FFC7DB", "euiColorBorderBaseAccentSecondary": "#A6EDEA", + "euiColorBorderBaseNeutral": "#B5E5F2", "euiColorBorderBaseSuccess": "#AEE8D2", "euiColorBorderBaseWarning": "#FCD883", + "euiColorBorderBaseRisk": "#FFCDA1", "euiColorBorderBaseDanger": "#FFC9C2", "euiColorBorderBasePlain": "#CAD3E2", "euiColorBorderBaseSubdued": "#E3E8F2", @@ -416,7 +419,9 @@ "euiColorBorderStrongPrimary": "#1750BA", "euiColorBorderStrongAccent": "#A11262", "euiColorBorderStrongAccentSecondary": "#047471", + "euiColorBorderStrongNeutral": "#0F658A", "euiColorBorderStrongSuccess": "#09724D", "euiColorBorderStrongWarning": "#825803", + "euiColorBorderStrongRisk": "#9E3A16", "euiColorBorderStrongDanger": "#A71627" } diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts index 16afb1dd999..4739685767f 100644 --- a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts @@ -40,8 +40,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { primary: string; accent: string; accentSecondary: string; + neutral: string; success: string; warning: string; + risk: string; danger: string; ghost: string; text: string; @@ -313,21 +315,12 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { euiColorVisCool2: string; euiColorVisComplementary0: string; euiColorVisComplementary1: string; - euiColorSeverity0: string; - euiColorSeverity1: string; - euiColorSeverity2: string; - euiColorSeverity3: string; - euiColorSeverity4: string; - euiColorSeverity5: string; - euiColorSeverity6: string; - euiColorSeverity7: string; - euiColorSeverity8: string; - euiColorSeverity9: string; - euiColorSeverity10: string; - euiColorSeverity11: string; - euiColorSeverity12: string; - euiColorSeverity13: string; - euiColorSeverity14: string; + euiColorSeverityUnknown: string; + euiColorSeverityNeutral: string; + euiColorSeveritySuccess: string; + euiColorSeverityWarning: string; + euiColorSeverityRisk: string; + euiColorSeverityDanger: string; euiColorChartLines: string; euiColorChartBand: string; euiColorGhost: string; @@ -363,8 +356,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { euiColorTextPrimary: string; euiColorTextAccent: string; euiColorTextAccentSecondary: string; + euiColorTextNeutral: string; euiColorTextSuccess: string; euiColorTextWarning: string; + euiColorTextRisk: string; euiColorTextDanger: string; euiColorTextParagraph: string; euiColorTextHeading: string; @@ -374,8 +369,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { euiColorBackgroundBasePrimary: string; euiColorBackgroundBaseAccent: string; euiColorBackgroundBaseAccentSecondary: string; + euiColorBackgroundBaseNeutral: string; euiColorBackgroundBaseSuccess: string; euiColorBackgroundBaseWarning: string; + euiColorBackgroundBaseRisk: string; euiColorBackgroundBaseDanger: string; euiColorBackgroundBaseSubdued: string; euiColorBackgroundBasePlain: string; @@ -391,22 +388,28 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { euiColorBackgroundLightPrimary: string; euiColorBackgroundLightAccent: string; euiColorBackgroundLightAccentSecondary: string; + euiColorBackgroundLightNeutral: string; euiColorBackgroundLightSuccess: string; euiColorBackgroundLightWarning: string; + euiColorBackgroundLightRisk: string; euiColorBackgroundLightDanger: string; euiColorBackgroundLightText: string; euiColorBackgroundFilledPrimary: string; euiColorBackgroundFilledAccent: string; euiColorBackgroundFilledAccentSecondary: string; + euiColorBackgroundFilledNeutral: string; euiColorBackgroundFilledSuccess: string; euiColorBackgroundFilledWarning: string; + euiColorBackgroundFilledRisk: string; euiColorBackgroundFilledDanger: string; euiColorBackgroundFilledText: string; euiColorBorderBasePrimary: string; euiColorBorderBaseAccent: string; euiColorBorderBaseAccentSecondary: string; + euiColorBorderBaseNeutral: string; euiColorBorderBaseSuccess: string; euiColorBorderBaseWarning: string; + euiColorBorderBaseRisk: string; euiColorBorderBaseDanger: string; euiColorBorderBasePlain: string; euiColorBorderBaseSubdued: string; @@ -417,8 +420,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { euiColorBorderStrongPrimary: string; euiColorBorderStrongAccent: string; euiColorBorderStrongAccentSecondary: string; + euiColorBorderStrongNeutral: string; euiColorBorderStrongSuccess: string; euiColorBorderStrongWarning: string; + euiColorBorderStrongRisk: string; euiColorBorderStrongDanger: string; }; export default sassVariables; diff --git a/packages/eui/src-docs/src/views/theme/color/_color_js.tsx b/packages/eui/src-docs/src/views/theme/color/_color_js.tsx index c37ea7342c8..4e2d4b7245b 100644 --- a/packages/eui/src-docs/src/views/theme/color/_color_js.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_color_js.tsx @@ -434,6 +434,59 @@ export const DataVisValuesJS = () => { ); }; +export const SeverityJS: FunctionComponent = ({ + description, +}) => { + const { euiTheme } = useEuiTheme(); + + return ( + <> + euiTheme.colors.severity[severity]} + description={description} + example={ +
+ background: {euiTheme.colors.severity.risk} +
+ } + snippet={`background-color: \${euiTheme.colors.severity.risk};`} + snippetLanguage="emotion" + /> + + ); +}; + +export const SeverityValuesJS = () => { + const { euiTheme } = useEuiTheme(); + const props = getPropsFromComponent(EuiThemeColors); + const colorKeys = Object.keys(euiTheme.colors.severity).filter( + (item) => item !== '__docgenInfo' + ); + + return ( + <> + { + return { + id: color, + token: `colors.severity.${color}`, + type: props[color], + // @ts-ignore TODO + value: euiTheme.colors.severity[color], + }; + })} + render={(item) => } + /> + + ); +}; + export const UtilsJS = () => { const { euiTheme } = useEuiTheme(); diff --git a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx index d59c57c762d..3bf1a27d7ec 100644 --- a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx @@ -102,15 +102,15 @@ export const TextSass: FunctionComponent = ({ description }) => { export const TextValuesSass = () => { const values = useJsonVars(); - const textColors = [ + const textColors = new Set([ ...Object.keys(values).filter((v) => v.startsWith('euiColorText')), ...euiTextColors, - ]; + ]); return ( <> { + items={[...textColors].map((color) => { return { id: color, token: `$${color}`, @@ -356,3 +356,47 @@ export const DataVisValuesSass = () => { ); }; + +export const SeveritySass: FunctionComponent = ({ + description, +}) => { + const values = useJsonVars(); + + return ( + <> + $euiColorSeverity[Severity]} + description={description} + example={ +
+ background: {values.euiColorSeverityRisk} +
+ } + snippet={`background-color: \$euiColorSeverityRisk;`} + snippetLanguage="scss" + /> + + ); +}; + +export const SeverityValuesSass = () => { + const values = useJsonVars(); + const severityKeys = Object.keys(values).filter((key: string) => + key.match(/euiColorSeverity/) + ); + + return ( + <> + { + return { + id: color, + token: `$${color}`, + value: values[color], + }; + })} + render={(item) => } + /> + + ); +}; diff --git a/packages/eui/src-docs/src/views/theme/color/tokens.tsx b/packages/eui/src-docs/src/views/theme/color/tokens.tsx index 953e03aa568..f4973177c65 100644 --- a/packages/eui/src-docs/src/views/theme/color/tokens.tsx +++ b/packages/eui/src-docs/src/views/theme/color/tokens.tsx @@ -24,6 +24,8 @@ import { BrandValuesJS, DataVisJS, DataVisValuesJS, + SeverityJS, + SeverityValuesJS, ShadeJS, ShadeValuesJS, SpecialJS, @@ -40,6 +42,8 @@ import { BrandValuesSass, DataVisSass, DataVisValuesSass, + SeveritySass, + SeverityValuesSass, ShadeSass, ShadeValuesSass, SpecialSass, @@ -131,6 +135,7 @@ export const colorsSections = [ { title: 'Shades', id: 'shades' }, { title: 'Special colors', id: 'special-colors' }, { title: 'Data visualization colors', id: 'data-vis-colors' }, + { title: 'Severity and Health colors', id: 'severity-colors' }, ]; export default () => { @@ -205,6 +210,11 @@ export default () => { return ; }, [showSass]); + const severityContent = useMemo(() => { + if (showSass) return ; + return ; + }, [showSass]); + return ( <> @@ -386,6 +396,27 @@ export default () => { {showSass ? : } + + {/* Severity colors */} + + + {' '} +

{`${colorsSections[7].title}`}

+

+ Severity indicates an increasing level of risk and Health describes + the status of an element that would typically be associated with + positive or negative values. +

+ + + + + {severityContent} + + + + {showSass ? : } + ); }; diff --git a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap index 9654eb247b9..52b33d383bd 100644 --- a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -262,6 +262,23 @@ exports[`EuiBadge props color hollow is rendered 1`] = ` `; +exports[`EuiBadge props color neutral is rendered 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge props color primary is rendered 1`] = ` `; +exports[`EuiBadge props color risk is rendered 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge props color success is rendered 1`] = ` `; +exports[`EuiBadge props style is rendered with neutral 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge props style is rendered with primary 1`] = ` `; +exports[`EuiBadge props style is rendered with risk 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge props style is rendered with success 1`] = ` { `, primary: css(setBadgeColorVars(badgeColors.primary)), accent: css(setBadgeColorVars(badgeColors.accent)), + neutral: css(setBadgeColorVars(badgeColors.neutral)), + success: css(setBadgeColorVars(badgeColors.success)), warning: css(setBadgeColorVars(badgeColors.warning)), + risk: css(setBadgeColorVars(badgeColors.risk)), danger: css(setBadgeColorVars(badgeColors.danger)), - success: css(setBadgeColorVars(badgeColors.success)), disabled: css` ${setBadgeColorVars(badgeColors.disabled)} border-color: ${badgeColors.disabled.borderColor}; diff --git a/packages/eui/src/components/badge/badge.tsx b/packages/eui/src/components/badge/badge.tsx index 735576b30b6..957d0bbcb75 100644 --- a/packages/eui/src/components/badge/badge.tsx +++ b/packages/eui/src/components/badge/badge.tsx @@ -38,9 +38,11 @@ export const COLORS = [ 'default', 'hollow', 'primary', - 'success', 'accent', + 'neutral', + 'success', 'warning', + 'risk', 'danger', ] as const; type BadgeColor = (typeof COLORS)[number]; diff --git a/packages/eui/src/components/badge/color_utils.ts b/packages/eui/src/components/badge/color_utils.ts index c162ea1d280..845fd17afca 100644 --- a/packages/eui/src/components/badge/color_utils.ts +++ b/packages/eui/src/components/badge/color_utils.ts @@ -26,8 +26,10 @@ export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { return { // Colors shared between buttons and badges primary: euiButtonFillColor(euiThemeContext, 'primary'), + neutral: euiButtonFillColor(euiThemeContext, 'neutral'), success: euiButtonFillColor(euiThemeContext, 'success'), warning: euiButtonFillColor(euiThemeContext, 'warning'), + risk: euiButtonFillColor(euiThemeContext, 'risk'), danger: euiButtonFillColor(euiThemeContext, 'danger'), accent: euiButtonFillColor(euiThemeContext, 'accent'), accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'), diff --git a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap index 42ae2874090..5a4cd37dc9c 100644 --- a/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap +++ b/packages/eui/src/components/button/__snapshots__/button.test.tsx.snap @@ -52,6 +52,17 @@ exports[`EuiButton props color danger is rendered 1`] = ` `; +exports[`EuiButton props color neutral is rendered 1`] = ` + +`; + exports[`EuiButton props color primary is rendered 1`] = ` +`; + exports[`EuiButton props color success is rendered 1`] = ` +`; + exports[`EuiButtonEmpty props color primary is rendered 1`] = ` +`; + exports[`EuiButtonEmpty props color success is rendered 1`] = ` + + + + +`; + +exports[`EuiButtonGroup button props color neutral is rendered for single 1`] = ` +
+ + test + +
+ + + +
+
+`; + exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
`; +exports[`EuiButtonGroup button props color risk is rendered for multi 1`] = ` +
+ + test + +
+ + + +
+
+`; + +exports[`EuiButtonGroup button props color risk is rendered for single 1`] = ` +
+ + test + +
+ + + +
+
+`; + exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
`; +exports[`EuiButtonIcon props color neutral is rendered 1`] = ` + +`; + exports[`EuiButtonIcon props color primary is rendered 1`] = ` +`; + exports[`EuiButtonIcon props color success is rendered 1`] = `