diff --git a/packages/website/docs/getting-started/theming/tokens/colors/background_colors_table.tsx b/packages/website/docs/getting-started/theming/tokens/colors/background_colors_table.tsx index 1ccdceb01fa..3f70cbbc190 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/background_colors_table.tsx +++ b/packages/website/docs/getting-started/theming/tokens/colors/background_colors_table.tsx @@ -20,6 +20,10 @@ export const BackgroundColorsTable = () => { value: euiTheme.colors.backgroundBaseAccentSecondary, token: 'colors.backgroundBaseAccentSecondary', }, + { + value: euiTheme.colors.backgroundBaseNeutral, + token: 'colors.backgroundBaseNeutral', + }, { value: euiTheme.colors.backgroundBaseSuccess, token: 'colors.backgroundBaseSuccess', @@ -28,6 +32,10 @@ export const BackgroundColorsTable = () => { value: euiTheme.colors.backgroundBaseWarning, token: 'colors.backgroundBaseWarning', }, + { + value: euiTheme.colors.backgroundBaseRisk, + token: 'colors.backgroundBaseRisk', + }, { value: euiTheme.colors.backgroundBaseDanger, token: 'colors.backgroundBaseDanger', @@ -88,6 +96,10 @@ export const BackgroundColorsTable = () => { value: euiTheme.colors.backgroundLightAccentSecondary, token: 'colors.backgroundLightAccentSecondary', }, + { + value: euiTheme.colors.backgroundLightNeutral, + token: 'colors.backgroundLightNeutral', + }, { value: euiTheme.colors.backgroundLightSuccess, token: 'colors.backgroundLightSuccess', @@ -96,6 +108,10 @@ export const BackgroundColorsTable = () => { value: euiTheme.colors.backgroundLightWarning, token: 'colors.backgroundLightWarning', }, + { + value: euiTheme.colors.backgroundLightRisk, + token: 'colors.backgroundLightRisk', + }, { value: euiTheme.colors.backgroundLightDanger, token: 'colors.backgroundLightDanger', @@ -116,6 +132,10 @@ export const BackgroundColorsTable = () => { value: euiTheme.colors.backgroundFilledAccentSecondary, token: 'colors.backgroundFilledAccentSecondary', }, + { + value: euiTheme.colors.backgroundFilledNeutral, + token: 'colors.backgroundFilledNeutral', + }, { value: euiTheme.colors.backgroundFilledSuccess, token: 'colors.backgroundFilledSuccess', @@ -124,6 +144,10 @@ export const BackgroundColorsTable = () => { value: euiTheme.colors.backgroundFilledWarning, token: 'colors.backgroundFilledWarning', }, + { + value: euiTheme.colors.backgroundFilledRisk, + token: 'colors.backgroundFilledRisk', + }, { value: euiTheme.colors.backgroundFilledDanger, token: 'colors.backgroundFilledDanger', diff --git a/packages/website/docs/getting-started/theming/tokens/colors/border_colors_table.tsx b/packages/website/docs/getting-started/theming/tokens/colors/border_colors_table.tsx index ef1dfcba493..d22882b49a3 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/border_colors_table.tsx +++ b/packages/website/docs/getting-started/theming/tokens/colors/border_colors_table.tsx @@ -24,6 +24,10 @@ export const BorderColorsTable = () => { value: euiTheme.colors.borderBaseAccentSecondary, token: 'colors.borderBaseAccentSecondary', }, + { + value: euiTheme.colors.borderBaseNeutral, + token: 'colors.borderBaseNeutral', + }, { value: euiTheme.colors.borderBaseSuccess, token: 'colors.borderBaseSuccess', @@ -32,6 +36,10 @@ export const BorderColorsTable = () => { value: euiTheme.colors.borderBaseWarning, token: 'colors.borderBaseWarning', }, + { + value: euiTheme.colors.borderBaseRisk, + token: 'colors.borderBaseRisk', + }, { value: euiTheme.colors.borderBaseDanger, token: 'colors.borderBaseDanger', @@ -72,6 +80,10 @@ export const BorderColorsTable = () => { value: euiTheme.colors.borderStrongAccentSecondary, token: 'colors.borderStrongAccentSecondary', }, + { + value: euiTheme.colors.borderStrongNeutral, + token: 'colors.borderStrongNeutral', + }, { value: euiTheme.colors.borderStrongSuccess, token: 'colors.borderStrongSuccess', @@ -80,6 +92,10 @@ export const BorderColorsTable = () => { value: euiTheme.colors.borderStrongWarning, token: 'colors.borderStrongWarning', }, + { + value: euiTheme.colors.borderStrongRisk, + token: 'colors.borderStrongRisk', + }, { value: euiTheme.colors.borderStrongDanger, token: 'colors.borderStrongDanger', diff --git a/packages/website/docs/getting-started/theming/tokens/colors/index.mdx b/packages/website/docs/getting-started/theming/tokens/colors/index.mdx index 4a27e902ae8..e17583628a8 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/index.mdx +++ b/packages/website/docs/getting-started/theming/tokens/colors/index.mdx @@ -229,13 +229,14 @@ import { DataVisColorsPreview } from './data_vis_colors_preview' import { SeverityColorsTable } from './severity_colors_table'; import { SeverityColorsPreview } from './severity_colors_preview' - ### `euiTheme.colors.severity[token]` token 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. + + More guidance is available in the [**Health and Color Pattern**](../../../../patterns/severity.mdx). diff --git a/packages/website/docs/getting-started/theming/tokens/colors/severity_background_colors_table.tsx b/packages/website/docs/getting-started/theming/tokens/colors/severity_background_colors_table.tsx new file mode 100644 index 00000000000..42620771e45 --- /dev/null +++ b/packages/website/docs/getting-started/theming/tokens/colors/severity_background_colors_table.tsx @@ -0,0 +1,86 @@ +import { useEuiTheme } from '@elastic/eui'; +import { ColorsTable } from './colors_table'; + +export const SeverityBackgroundColorsTable = () => { + const { euiTheme } = useEuiTheme(); + + return ( + + ); +}; diff --git a/packages/website/docs/getting-started/theming/tokens/colors/severity_text_colors_table.tsx b/packages/website/docs/getting-started/theming/tokens/colors/severity_text_colors_table.tsx new file mode 100644 index 00000000000..ec4a65e0c06 --- /dev/null +++ b/packages/website/docs/getting-started/theming/tokens/colors/severity_text_colors_table.tsx @@ -0,0 +1,38 @@ +import { useEuiTheme } from '@elastic/eui'; +import { ColorsTable } from './colors_table'; + +export const SeverityTextColorsTable = () => { + const { euiTheme } = useEuiTheme(); + + return ( + + ); +}; diff --git a/packages/website/docs/getting-started/theming/tokens/colors/text_colors_table.tsx b/packages/website/docs/getting-started/theming/tokens/colors/text_colors_table.tsx index 16ddf11c40f..1d488bce468 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/text_colors_table.tsx +++ b/packages/website/docs/getting-started/theming/tokens/colors/text_colors_table.tsx @@ -36,6 +36,10 @@ export const TextColorsTable = () => { value: euiTheme.colors.textAccentSecondary, token: 'colors.textAccentSecondary', }, + { + value: euiTheme.colors.textNeutral, + token: 'colors.textNeutral', + }, { value: euiTheme.colors.textSuccess, token: 'colors.textSuccess', @@ -44,6 +48,10 @@ export const TextColorsTable = () => { value: euiTheme.colors.textWarning, token: 'colors.textWarning', }, + { + value: euiTheme.colors.textRisk, + token: 'colors.textRisk', + }, { value: euiTheme.colors.textDanger, token: 'colors.textDanger', diff --git a/packages/website/docs/patterns/severity.mdx b/packages/website/docs/patterns/severity.mdx new file mode 100644 index 00000000000..ad3cbbfc001 --- /dev/null +++ b/packages/website/docs/patterns/severity.mdx @@ -0,0 +1,199 @@ +--- +title: Health and Severity +sidebar_position: 6 +--- + +```mdx-code-block +import { EuiTable, EuiTableBody, EuiTableHeader, EuiTableHeaderCell, EuiTableRow, EuiTableRowCell, EuiButton, EuiButtonIcon, icon, label } from '@elastic/eui'; +``` + +Health describes the status of an element (eg. node, environment, host) that would be typically associated with positive or negative values, while in severity indicates an increasing level of risk. + +## Levels + +These levels, accordingly applied, serve both purposes of communicating Health statuses and Severity concerns among different contexts. They are willingly generic and descriptive only at a high level so that they can be applied and adapted to different contexts, while at the same time providing consistency across the product. + + + + Level + Name + Description + + + + + 0 + Unknown + Created for unknown or unassigned values that can’t be associated with a specific level. It does not imply any positive or negative meaning. + + + + 1 + Good / Success + Created for a direct association with positive meanings, used for healthy elements and positive outcomes. + + + + 2 + Regular / Neutral + Used for usual, acceptable states that need to be recognised but don't need to stand out. + + + + 3 + Warning + The starting level of concern, used for elements that would need attention. + + + + 4 + Risk + Middle level of risk, used for potential escalations and increasing level of severity. + + + + 5 + Danger + Highest level of danger, used for elements that need immediate support and attention. + + + + + +## Use cases + +The following mapping is not exhaustive of all use cases but it serves as an example of how the Health & Severity levels might be applied. Different contexts and environments might need dedicated terminology, therefore these levels can be used with alternative, customised variations in terms of words and naming, serving the dedicated purpose while aligning the use of colors across the product. + + + + Level + Use case A + Use case B + Use case C + + + + + Unknown + - + Unknown / No data + Other + + + + Good / Success + - + Healthy + - + + + + Regular / Neutral + Low + - + Low + + + + Warning + Medium + Degrading + Warn + + + + Risk + High + - + Minor, Major + + + + Danger + Critical + Violated + Critical + + + + +## Colors + +This association between levels and colors has been created to be recognised and immediately understood, avoiding conflicts with other EUI elements and tints. + + + + Level + Name + Tint + + + + + 0 + Unknown + Blue grey + + + + 1 + Good / Success + Green + + + + 2 + Regular / Neutral + Sky blue + + + + 3 + Warning + Yellow + + + + 4 + Risk + Orange + + + + 5 + Danger + Red + + + + + +## Text Tokens + +import { TextColorPreview } from '../getting-started/theming/tokens/colors/text_color_preview.tsx'; +import { SeverityTextColorsTable } from '../getting-started/theming/tokens/colors/severity_text_colors_table.tsx'; +import { Example } from '@site/src/components'; + + + + +## Background Tokens + +import { BackgroundColorPreview } from '../getting-started/theming/tokens/colors/background_color_preview.tsx'; +import { SeverityBackgroundColorsTable } from '../getting-started/theming/tokens/colors/severity_background_colors_table.tsx'; + + + + +## Datavis Tokens + +import { SeverityColorsTable } from '../getting-started/theming/tokens/colors/severity_colors_table.tsx'; +import { DataVisBackgroundColor } from '../getting-started/theming/tokens/colors/data_vis_colors_table.tsx'; +import { DataVisColorsPreview } from '../getting-started/theming/tokens/colors/data_vis_colors_preview.tsx' + + + + +## Edge cases + +There might be cases in which these levels are not sufficient and don't fully fullfill the needs, in that case please reach out to EUI team. \ No newline at end of file