diff --git a/packages/eui-theme-borealis/changelogs/upcoming/8793.md b/packages/eui-theme-borealis/changelogs/upcoming/8793.md new file mode 100644 index 00000000000..73a4686bc84 --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/8793.md @@ -0,0 +1,29 @@ +- Added data vis text color tokens: + - `colors.vis.euiColorVisText0` + - `colors.vis.euiColorVisText1` + - `colors.vis.euiColorVisText2` + - `colors.vis.euiColorVisText3` + - `colors.vis.euiColorVisText4` + - `colors.vis.euiColorVisText5` + - `colors.vis.euiColorVisText6` + - `colors.vis.euiColorVisText7` + - `colors.vis.euiColorVisText8` + - `colors.vis.euiColorVisText9` + +**Breaking changes** + +- Removed tokens: + - `colors.vis.euiColorVisAsTextLight1` + - `colors.vis.euiColorVisAsTextLight0` + - `colors.vis.euiColorVisAsTextLight2` + - `colors.vis.euiColorVisAsTextLight3` + - `colors.vis.euiColorVisAsTextLight4` + - `colors.vis.euiColorVisAsTextLight5` + - `colors.vis.euiColorVisAsTextLight6` + - `colors.vis.euiColorVisAsTextDark1` + - `colors.vis.euiColorVisAsTextDark0` + - `colors.vis.euiColorVisAsTextDark2` + - `colors.vis.euiColorVisAsTextDark3` + - `colors.vis.euiColorVisAsTextDark4` + - `colors.vis.euiColorVisAsTextDark5` + - `colors.vis.euiColorVisAsTextDark6` 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 7a4ba32cb9d..1f865e3632a 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -282,20 +282,16 @@ "euiColorVis7_behindText": "#FFC9C2", "euiColorVis8_behindText": "#EAAE01", "euiColorVis9_behindText": "#FCD883", - "euiColorVisAsTextLight0": "#047471", - "euiColorVisAsTextLight1": "#1750BA", - "euiColorVisAsTextLight2": "#A11262", - "euiColorVisAsTextLight3": "#A71627", - "euiColorVisAsTextLight4": "#825803", - "euiColorVisAsTextLight5": "#09724D", - "euiColorVisAsTextLight6": "#6B3C9F", - "euiColorVisAsTextDark0": "#16C5C0", - "euiColorVisAsTextDark1": "#61A2FF", - "euiColorVisAsTextDark2": "#EE72A6", - "euiColorVisAsTextDark3": "#F6726A", - "euiColorVisAsTextDark4": "#EAAE01", - "euiColorVisAsTextDark5": "#24C292", - "euiColorVisAsTextDark6": "#B084F5", + "euiColorVisText0": "#16C5C0", + "euiColorVisText1": "#A6EDEA", + "euiColorVisText2": "#61A2FF", + "euiColorVisText3": "#BFDBFF", + "euiColorVisText4": "#EE72A6", + "euiColorVisText5": "#FFC7DB", + "euiColorVisText6": "#F6726A", + "euiColorVisText7": "#FFC9C2", + "euiColorVisText8": "#EAAE01", + "euiColorVisText9": "#FCD883", "euiColorVisSuccess0": "#24C292", "euiColorVisSuccess1": "#AEE8D2", "euiColorVisWarning0": "#FCD883", 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 9698fa46f5b..9dadadeb3cd 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 @@ -283,20 +283,16 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { euiColorVis7_behindText: string; euiColorVis8_behindText: string; euiColorVis9_behindText: string; - euiColorVisAsTextLight0: string; - euiColorVisAsTextLight1: string; - euiColorVisAsTextLight2: string; - euiColorVisAsTextLight3: string; - euiColorVisAsTextLight4: string; - euiColorVisAsTextLight5: string; - euiColorVisAsTextLight6: string; - euiColorVisAsTextDark0: string; - euiColorVisAsTextDark1: string; - euiColorVisAsTextDark2: string; - euiColorVisAsTextDark3: string; - euiColorVisAsTextDark4: string; - euiColorVisAsTextDark5: string; - euiColorVisAsTextDark6: string; + euiColorVisText0: string; + euiColorVisText1: string; + euiColorVisText2: string; + euiColorVisText3: string; + euiColorVisText4: string; + euiColorVisText5: string; + euiColorVisText6: string; + euiColorVisText7: string; + euiColorVisText8: string; + euiColorVisText9: string; euiColorVisSuccess0: string; euiColorVisSuccess1: string; euiColorVisWarning0: string; 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 488cfba7775..6b22a60d366 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json @@ -282,20 +282,16 @@ "euiColorVis7_behindText": "#FFC9C2", "euiColorVis8_behindText": "#EAAE01", "euiColorVis9_behindText": "#FCD883", - "euiColorVisAsTextLight0": "#047471", - "euiColorVisAsTextLight1": "#1750BA", - "euiColorVisAsTextLight2": "#A11262", - "euiColorVisAsTextLight3": "#A71627", - "euiColorVisAsTextLight4": "#825803", - "euiColorVisAsTextLight5": "#09724D", - "euiColorVisAsTextLight6": "#6B3C9F", - "euiColorVisAsTextDark0": "#16C5C0", - "euiColorVisAsTextDark1": "#61A2FF", - "euiColorVisAsTextDark2": "#EE72A6", - "euiColorVisAsTextDark3": "#F6726A", - "euiColorVisAsTextDark4": "#EAAE01", - "euiColorVisAsTextDark5": "#24C292", - "euiColorVisAsTextDark6": "#B084F5", + "euiColorVisText0": "#065B58", + "euiColorVisText1": "#047471", + "euiColorVisText2": "#154399", + "euiColorVisText3": "#0B64DD", + "euiColorVisText4": "#A11262", + "euiColorVisText5": "#D13680", + "euiColorVisText6": "#A71627", + "euiColorVisText7": "#DA3737", + "euiColorVisText8": "#6A4906", + "euiColorVisText9": "#966B03", "euiColorVisSuccess0": "#24C292", "euiColorVisSuccess1": "#AEE8D2", "euiColorVisWarning0": "#FCD883", 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 6b8e1c68be6..99c003a624f 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 @@ -283,20 +283,16 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { euiColorVis7_behindText: string; euiColorVis8_behindText: string; euiColorVis9_behindText: string; - euiColorVisAsTextLight0: string; - euiColorVisAsTextLight1: string; - euiColorVisAsTextLight2: string; - euiColorVisAsTextLight3: string; - euiColorVisAsTextLight4: string; - euiColorVisAsTextLight5: string; - euiColorVisAsTextLight6: string; - euiColorVisAsTextDark0: string; - euiColorVisAsTextDark1: string; - euiColorVisAsTextDark2: string; - euiColorVisAsTextDark3: string; - euiColorVisAsTextDark4: string; - euiColorVisAsTextDark5: string; - euiColorVisAsTextDark6: string; + euiColorVisText0: string; + euiColorVisText1: string; + euiColorVisText2: string; + euiColorVisText3: string; + euiColorVisText4: string; + euiColorVisText5: string; + euiColorVisText6: string; + euiColorVisText7: string; + euiColorVisText8: string; + euiColorVisText9: string; euiColorVisSuccess0: string; euiColorVisSuccess1: string; euiColorVisWarning0: string; diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts index be0662c5f17..56ff2a8b37a 100644 --- a/packages/eui-theme-borealis/src/index.ts +++ b/packages/eui-theme-borealis/src/index.ts @@ -19,7 +19,10 @@ import { focus } from './variables/_states'; import { components } from './variables/_components'; import { overrides } from './variables/_overrides'; -export { colorVis } from './variables/colors/_colors_vis'; +import { colorVisLight } from './variables/colors/_colors_vis_light'; +import { colorVisDark } from './variables/colors/_colors_vis_dark'; + +export { colorVisLight as colorVis, colorVisLight, colorVisDark }; export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS'; diff --git a/packages/eui-theme-borealis/src/theme_dark.scss b/packages/eui-theme-borealis/src/theme_dark.scss index d3054ee6b36..31ca1c308e2 100644 --- a/packages/eui-theme-borealis/src/theme_dark.scss +++ b/packages/eui-theme-borealis/src/theme_dark.scss @@ -1,5 +1,6 @@ // color mode specific variables +@import './variables/colors/colors_vis_dark'; @import './variables/colors/colors_dark'; diff --git a/packages/eui-theme-borealis/src/theme_light.scss b/packages/eui-theme-borealis/src/theme_light.scss index 72c1bd6fcc9..f3dbda60f99 100644 --- a/packages/eui-theme-borealis/src/theme_light.scss +++ b/packages/eui-theme-borealis/src/theme_light.scss @@ -1,4 +1,5 @@ // color mode specific variables +@import './variables/colors/colors_vis_light'; @import './variables/colors/colors_light'; diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 91b0a10d57d..f155f0db639 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -18,7 +18,6 @@ import { dark_border_colors, } from './colors/_colors_dark'; import { border_colors } from './colors/_colors_light'; -import { colorVis } from './colors/_colors_vis'; import { buttons } from './_buttons'; import { forms } from './_forms'; @@ -74,31 +73,32 @@ const component_colors: _EuiThemeComponentColors = { ([textParagraph]) => textParagraph, ['colors.textParagraph'] ), - codeInlineColor: colorVis.euiColorVisAsTextLight6, + codeInlineColor: SEMANTIC_COLORS.assistance100, codeCommentColor: computed( ([textSubdued]) => textSubdued, ['colors.textSubdued'] ), + codeSelectorColor: 'inherit', - codeStringColor: colorVis.euiColorVisAsTextLight2, - codeTagColor: colorVis.euiColorVisAsTextLight1, - codeNameColor: colorVis.euiColorVisAsTextLight1, - codeNumberColor: colorVis.euiColorVisAsTextLight0, - codeInlineCodeKeywordColor: colorVis.euiColorVisAsTextLight6, - codeKeywordColor: colorVis.euiColorVisAsTextLight1, + codeStringColor: SEMANTIC_COLORS.accent100, + codeTagColor: SEMANTIC_COLORS.primary100, + codeNameColor: SEMANTIC_COLORS.primary100, + codeNumberColor: SEMANTIC_COLORS.accentSecondary100, + codeInlineCodeKeywordColor: SEMANTIC_COLORS.assistance100, + codeKeywordColor: SEMANTIC_COLORS.primary100, codeFunctionTitleColor: 'inherit', - codeTypeColor: colorVis.euiColorVisAsTextLight1, + codeTypeColor: SEMANTIC_COLORS.primary100, codeAttributeColor: 'inherit', - codeSymbolColor: colorVis.euiColorVisAsTextLight3, + codeSymbolColor: SEMANTIC_COLORS.danger100, codeParamsColor: 'inherit', codeMetaColor: computed( ([textSubdued]) => textSubdued, ['colors.textSubdued'] ), - codeTitleColor: colorVis.euiColorVisAsTextLight4, - codeSectionColor: colorVis.euiColorVisAsTextLight3, - codeAdditionColor: colorVis.euiColorVisAsTextLight0, - codeDeletionColor: colorVis.euiColorVisAsTextLight3, + codeTitleColor: SEMANTIC_COLORS.warning100, + codeSectionColor: SEMANTIC_COLORS.danger100, + codeAdditionColor: SEMANTIC_COLORS.accentSecondary100, + codeDeletionColor: SEMANTIC_COLORS.danger100, codeSelectorClassColor: 'inherit', codeSelectorIdColor: 'inherit', @@ -331,18 +331,19 @@ export const components: _EuiThemeComponents = { buttonGroupFocusColor: SEMANTIC_COLORS.plainLight, - codeInlineColor: colorVis.euiColorVisAsTextDark6, - codeStringColor: colorVis.euiColorVisAsTextDark2, - codeTagColor: colorVis.euiColorVisAsTextDark1, - codeNameColor: colorVis.euiColorVisAsTextDark1, - codeNumberColor: colorVis.euiColorVisAsTextDark0, - codeKeywordColor: colorVis.euiColorVisAsTextDark6, - codeTypeColor: colorVis.euiColorVisAsTextDark1, - codeSymbolColor: colorVis.euiColorVisAsTextDark3, - codeTitleColor: colorVis.euiColorVisAsTextDark4, - codeSectionColor: colorVis.euiColorVisAsTextDark3, - codeAdditionColor: colorVis.euiColorVisAsTextDark0, - codeDeletionColor: colorVis.euiColorVisAsTextDark3, + codeInlineColor: SEMANTIC_COLORS.assistance60, + codeStringColor: SEMANTIC_COLORS.accent60, + codeTagColor: SEMANTIC_COLORS.primary60, + codeNameColor: SEMANTIC_COLORS.primary60, + codeNumberColor: SEMANTIC_COLORS.accentSecondary60, + codeInlineCodeKeywordColor: SEMANTIC_COLORS.assistance60, + codeKeywordColor: SEMANTIC_COLORS.assistance60, + codeTypeColor: SEMANTIC_COLORS.primary60, + codeSymbolColor: SEMANTIC_COLORS.danger60, + codeTitleColor: SEMANTIC_COLORS.warning60, + codeSectionColor: SEMANTIC_COLORS.danger60, + codeAdditionColor: SEMANTIC_COLORS.accentSecondary60, + codeDeletionColor: SEMANTIC_COLORS.danger60, filterButtonBadgeBackgroundHover: SEMANTIC_COLORS.shade105, diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss index 83a509c4b5b..c94dbfc238b 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -9,7 +9,6 @@ @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index'; @import 'states'; -@import './colors/colors_vis'; @import './colors/colors_severity'; @import 'form'; @import 'page'; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_vis.scss index a06c6f53367..8b5b75f5d23 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_vis.scss @@ -6,44 +6,44 @@ // The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function $euiPaletteColorBlind: ( euiColorVis0: ( - graphic: #00BEB8, - behindText: #00BEB8, + graphic: #16C5C0, + behindText: #16C5C0, ), euiColorVis1: ( - graphic: #93E5E0, - behindText: #93E5E0, + graphic: #A6EDEA, + behindText: #A6EDEA, ), euiColorVis2: ( - graphic: #599DFF, - behindText: #599DFF, + graphic: #61A2FF, + behindText: #61A2FF, ), euiColorVis3: ( - graphic: #B4D5FF, - behindText: #B4D5FF, + graphic: #BFDBFF, + behindText: #BFDBFF, ), euiColorVis4: ( graphic: #ED6BA2, - behindText: #ED6BA2, + behindText: #EE72A6, ), euiColorVis5: ( - graphic: #FFBED5, - behindText: #FFBED5, + graphic: #FFC7DB, + behindText: #FFC7DB, ), euiColorVis6: ( - graphic: #F66D64, - behindText: #F66D64, + graphic: #F6726A, + behindText: #F6726A, ), euiColorVis7: ( - graphic: #FFC0B8, + graphic: #FFC9C2, behindText: #FFC0B8, ), euiColorVis8: ( - graphic: #ED9E00, - behindText: #ED9E00, + graphic: #EAAE01, + behindText: #EAAE01, ), euiColorVis9: ( - graphic: #FFD569, - behindText: #FFD569, + graphic: #FCD883, + behindText: #FCD883, ) ) !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_vis_dark.scss new file mode 100644 index 00000000000..0a1e35e3fb8 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_vis_dark.scss @@ -0,0 +1,14 @@ +// stylelint-disable color-no-hex + +@import './colors_vis'; + +$euiColorVisText0: #16C5C0 !default; +$euiColorVisText1: #A6EDEA !default; +$euiColorVisText2: #61A2FF !default; +$euiColorVisText3: #BFDBFF !default; +$euiColorVisText4: #EE72A6 !default; +$euiColorVisText5: #FFC7DB !default; +$euiColorVisText6: #F6726A !default; +$euiColorVisText7: #FFC9C2 !default; +$euiColorVisText8: #EAAE01 !default; +$euiColorVisText9: #FCD883 !default; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_vis_dark.ts new file mode 100644 index 00000000000..2e07104bfac --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_vis_dark.ts @@ -0,0 +1,27 @@ +/* + * 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 { _EuiThemeVisColors } from '@elastic/eui-theme-common'; + +import { SEMANTIC_COLORS } from './_semantic_colors'; +import { colorVisLight } from './_colors_vis_light'; + +export const colorVisDark: _EuiThemeVisColors = { + ...colorVisLight, + + euiColorVisText0: SEMANTIC_COLORS.accentSecondary60, + euiColorVisText1: SEMANTIC_COLORS.accentSecondary30, + euiColorVisText2: SEMANTIC_COLORS.primary60, + euiColorVisText3: SEMANTIC_COLORS.primary30, + euiColorVisText4: SEMANTIC_COLORS.accent60, + euiColorVisText5: SEMANTIC_COLORS.accent30, + euiColorVisText6: SEMANTIC_COLORS.danger60, + euiColorVisText7: SEMANTIC_COLORS.danger30, + euiColorVisText8: SEMANTIC_COLORS.warning60, + euiColorVisText9: SEMANTIC_COLORS.warning30, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_vis_light.scss new file mode 100644 index 00000000000..40de64e7952 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_vis_light.scss @@ -0,0 +1,14 @@ +// stylelint-disable color-no-hex + +@import './colors_vis'; + +$euiColorVisText0: #065B58 !default; +$euiColorVisText1: #047471 !default; +$euiColorVisText2: #154399 !default; +$euiColorVisText3: #0B64DD !default; +$euiColorVisText4: #A11262 !default; +$euiColorVisText5: #D13680 !default; +$euiColorVisText6: #A71627 !default; +$euiColorVisText7: #DA3737 !default; +$euiColorVisText8: #6A4906 !default; +$euiColorVisText9: #966B03 !default; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_vis_light.ts similarity index 82% rename from packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts rename to packages/eui-theme-borealis/src/variables/colors/_colors_vis_light.ts index 88c6fe08113..97d27de6e94 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_vis.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_vis_light.ts @@ -47,7 +47,7 @@ const euiPaletteColorBlind = { }, }; -export const colorVis: _EuiThemeVisColors = { +export const colorVisLight: _EuiThemeVisColors = { euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, @@ -70,21 +70,16 @@ export const colorVis: _EuiThemeVisColors = { euiColorVisBehindText8: euiPaletteColorBlind.euiColorVis8.graphic, euiColorVisBehindText9: euiPaletteColorBlind.euiColorVis9.graphic, - euiColorVisAsTextLight0: SEMANTIC_COLORS.accentSecondary100, - euiColorVisAsTextLight1: SEMANTIC_COLORS.primary100, - euiColorVisAsTextLight2: SEMANTIC_COLORS.accent100, - euiColorVisAsTextLight3: SEMANTIC_COLORS.danger100, - euiColorVisAsTextLight4: SEMANTIC_COLORS.warning100, - euiColorVisAsTextLight5: SEMANTIC_COLORS.success100, - euiColorVisAsTextLight6: SEMANTIC_COLORS.assistance100, - - euiColorVisAsTextDark0: SEMANTIC_COLORS.accentSecondary60, - euiColorVisAsTextDark1: SEMANTIC_COLORS.primary60, - euiColorVisAsTextDark2: SEMANTIC_COLORS.accent60, - euiColorVisAsTextDark3: SEMANTIC_COLORS.danger60, - euiColorVisAsTextDark4: SEMANTIC_COLORS.warning60, - euiColorVisAsTextDark5: SEMANTIC_COLORS.success60, - euiColorVisAsTextDark6: SEMANTIC_COLORS.assistance60, + euiColorVisText0: SEMANTIC_COLORS.accentSecondary110, + euiColorVisText1: SEMANTIC_COLORS.accentSecondary100, + euiColorVisText2: SEMANTIC_COLORS.primary110, + euiColorVisText3: SEMANTIC_COLORS.primary90, + euiColorVisText4: SEMANTIC_COLORS.accent100, + euiColorVisText5: SEMANTIC_COLORS.accent80, + euiColorVisText6: SEMANTIC_COLORS.danger100, + euiColorVisText7: SEMANTIC_COLORS.danger80, + euiColorVisText8: SEMANTIC_COLORS.warning110, + euiColorVisText9: SEMANTIC_COLORS.warning90, euiColorVisNeutral0: SEMANTIC_COLORS.neutral60, euiColorVisNeutral1: SEMANTIC_COLORS.neutral30, 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 7f83df38e0f..016176d7014 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -80,20 +80,20 @@ $euiColorAccentSecondary70Alpha12: rgba($euiColorAccentSecondary70, 0.12) !defau $euiColorAccentSecondary70Alpha16: rgba($euiColorAccentSecondary70, 0.16) !default; $euiColorAccentSecondary70Alpha20: rgba($euiColorAccentSecondary70, 0.2) !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; +$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; @@ -152,20 +152,20 @@ $euiColorDanger70Alpha12: rgba($euiColorDanger70, 0.12) !default; $euiColorDanger70Alpha16: rgba($euiColorDanger70, 0.16) !default; $euiColorDanger70Alpha20: rgba($euiColorDanger70, 0.2) !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; +$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; diff --git a/packages/eui-theme-borealis/src/variables/colors/index.ts b/packages/eui-theme-borealis/src/variables/colors/index.ts index 4c0ae458220..1b9a42cc96b 100644 --- a/packages/eui-theme-borealis/src/variables/colors/index.ts +++ b/packages/eui-theme-borealis/src/variables/colors/index.ts @@ -11,7 +11,8 @@ import type { _EuiThemeColors } from '@elastic/eui-theme-common'; import { SEMANTIC_COLORS } from './_semantic_colors'; import { light_colors } from './_colors_light'; import { dark_colors } from './_colors_dark'; -import { colorVis } from './_colors_vis'; +import { colorVisLight } from './_colors_vis_light'; +import { colorVisDark } from './_colors_vis_dark'; import { severityColors } from './_colors_severity'; export const colors: _EuiThemeColors = { @@ -19,8 +20,13 @@ export const colors: _EuiThemeColors = { ink: SEMANTIC_COLORS.plainDark, plainLight: SEMANTIC_COLORS.plainLight, plainDark: SEMANTIC_COLORS.plainDark, - LIGHT: light_colors, - DARK: dark_colors, - vis: colorVis, severity: severityColors, + LIGHT: { + ...light_colors, + vis: colorVisLight, + }, + DARK: { + ...dark_colors, + vis: colorVisDark, + }, }; diff --git a/packages/eui-theme-common/changelogs/upcoming/8793.md b/packages/eui-theme-common/changelogs/upcoming/8793.md new file mode 100644 index 00000000000..77076c215d5 --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/8793.md @@ -0,0 +1,29 @@ +- Added type for tokens: + - `colors.vis.euiColorVisText0` + - `colors.vis.euiColorVisText1` + - `colors.vis.euiColorVisText2` + - `colors.vis.euiColorVisText3` + - `colors.vis.euiColorVisText4` + - `colors.vis.euiColorVisText5` + - `colors.vis.euiColorVisText6` + - `colors.vis.euiColorVisText7` + - `colors.vis.euiColorVisText8` + - `colors.vis.euiColorVisText9` + +**Breaking changes** + +- Removed support for tokens: + - `colors.vis.euiColorVisAsTextLight1` + - `colors.vis.euiColorVisAsTextLight0` + - `colors.vis.euiColorVisAsTextLight2` + - `colors.vis.euiColorVisAsTextLight3` + - `colors.vis.euiColorVisAsTextLight4` + - `colors.vis.euiColorVisAsTextLight5` + - `colors.vis.euiColorVisAsTextLight6` + - `colors.vis.euiColorVisAsTextDark1` + - `colors.vis.euiColorVisAsTextDark0` + - `colors.vis.euiColorVisAsTextDark2` + - `colors.vis.euiColorVisAsTextDark3` + - `colors.vis.euiColorVisAsTextDark4` + - `colors.vis.euiColorVisAsTextDark5` + - `colors.vis.euiColorVisAsTextDark6` 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 7637f17c6d8..6b312c69663 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -310,21 +310,16 @@ export type _EuiThemeVisColors = { /** @deprecated - temp token; used only during theme migration */ euiColorVisBehindText9: string; - euiColorVisAsTextLight0: string; - euiColorVisAsTextLight1: string; - euiColorVisAsTextLight2: string; - euiColorVisAsTextLight3: string; - euiColorVisAsTextLight4: string; - euiColorVisAsTextLight5: string; - euiColorVisAsTextLight6: string; - - euiColorVisAsTextDark0: string; - euiColorVisAsTextDark1: string; - euiColorVisAsTextDark2: string; - euiColorVisAsTextDark3: string; - euiColorVisAsTextDark4: string; - euiColorVisAsTextDark5: string; - euiColorVisAsTextDark6: string; + euiColorVisText0: string; + euiColorVisText1: string; + euiColorVisText2: string; + euiColorVisText3: string; + euiColorVisText4: string; + euiColorVisText5: string; + euiColorVisText6: string; + euiColorVisText7: string; + euiColorVisText8: string; + euiColorVisText9: string; euiColorVisNeutral0: string; euiColorVisNeutral1: string; @@ -372,7 +367,6 @@ export type _EuiThemeConstantColors = { plainLight: string; plainDark: string; - vis: _EuiThemeVisColors; severity: _EuiThemeSeverityColors; }; @@ -385,5 +379,7 @@ export type _EuiThemeColorsMode = _EuiThemeBrandColors & _EuiThemeTransparentBackgroundColors & _EuiThemeBorderColors; -export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & +export type _EuiThemeColors = StrictColorModeSwitch< + _EuiThemeColorsMode & { vis: _EuiThemeVisColors } +> & _EuiThemeConstantColors; diff --git a/packages/eui/changelogs/upcoming/8793.md b/packages/eui/changelogs/upcoming/8793.md new file mode 100644 index 00000000000..763482a83f5 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8793.md @@ -0,0 +1,33 @@ +- Added data vis text color tokens: + - `colors.vis.euiColorVisText0` + - `colors.vis.euiColorVisText1` + - `colors.vis.euiColorVisText2` + - `colors.vis.euiColorVisText3` + - `colors.vis.euiColorVisText4` + - `colors.vis.euiColorVisText5` + - `colors.vis.euiColorVisText6` + - `colors.vis.euiColorVisText7` + - `colors.vis.euiColorVisText8` + - `colors.vis.euiColorVisText9` + +**Deprecations** + +- Deprecated `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` palettes. Use the newly added data vis color tokens instead. + +**Breaking changes** + +- Removed tokens: + - `colors.vis.euiColorVisAsTextLight1` + - `colors.vis.euiColorVisAsTextLight0` + - `colors.vis.euiColorVisAsTextLight2` + - `colors.vis.euiColorVisAsTextLight3` + - `colors.vis.euiColorVisAsTextLight4` + - `colors.vis.euiColorVisAsTextLight5` + - `colors.vis.euiColorVisAsTextLight6` + - `colors.vis.euiColorVisAsTextDark1` + - `colors.vis.euiColorVisAsTextDark0` + - `colors.vis.euiColorVisAsTextDark2` + - `colors.vis.euiColorVisAsTextDark3` + - `colors.vis.euiColorVisAsTextDark4` + - `colors.vis.euiColorVisAsTextDark5` + - `colors.vis.euiColorVisAsTextDark6` diff --git a/packages/eui/src/components/button/button.stories.tsx b/packages/eui/src/components/button/button.stories.tsx index 04e20b8c3f4..dfb9e9e7691 100644 --- a/packages/eui/src/components/button/button.stories.tsx +++ b/packages/eui/src/components/button/button.stories.tsx @@ -16,7 +16,6 @@ import { import { EuiButtonEmpty } from './button_empty'; import { EuiButton, Props as EuiButtonProps } from './button'; -import { useEuiTheme } from '../../services'; const meta: Meta = { title: 'Navigation/EuiButton', @@ -65,16 +64,3 @@ export const HighContrast: Story = { ), }; - -export const TESTING_EXAMPLE: Story = { - render: function Render() { - const { euiTheme } = useEuiTheme(); - - return ( - <> - ink: {euiTheme.colors.ink} - primary: {euiTheme.colors.primary} - - ); - }, -}; diff --git a/packages/eui/src/services/color/eui_palettes.test.ts b/packages/eui/src/services/color/eui_palettes.test.ts index 1aadc8b2223..f87214e1a3e 100644 --- a/packages/eui/src/services/color/eui_palettes.test.ts +++ b/packages/eui/src/services/color/eui_palettes.test.ts @@ -65,7 +65,7 @@ describe('euiPaletteForLightBackground', () => { const customColor = '#00ff00'; const colors = { ...colorVis, - euiColorVisAsTextLight0: customColor, + euiColorVisText0: customColor, }; const result = euiPaletteForLightBackground({ @@ -81,7 +81,7 @@ describe('euiPaletteForDarkBackground', () => { const customColor = '#00ff00'; const colors = { ...colorVis, - euiColorVisAsTextDark0: customColor, + euiColorVisText0: customColor, }; const result = euiPaletteForDarkBackground({ diff --git a/packages/eui/src/services/color/eui_palettes.ts b/packages/eui/src/services/color/eui_palettes.ts index 0dd13c96452..08e0e34acca 100644 --- a/packages/eui/src/services/color/eui_palettes.ts +++ b/packages/eui/src/services/color/eui_palettes.ts @@ -182,6 +182,8 @@ const _getVisColorsAsText = ( }, [] as EuiPalette); /** + * @deprecated - use `euiColorVisText{NUMBER}` tokens directly + * * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store. */ @@ -191,13 +193,15 @@ export const euiPaletteForLightBackground = function ({ const visColors = colors ?? EUI_VIS_COLOR_STORE.visColors; const visColorsAsTextKeys = Object.keys(visColors).filter((color) => - color.includes('AsTextLight') + color.includes('euiColorVisText') ) as Array; return _getVisColorsAsText(visColors, visColorsAsTextKeys); }; /** + * @deprecated - use `euiColorVisText{NUMBER}` tokens directly + * * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store. */ @@ -207,7 +211,7 @@ export const euiPaletteForDarkBackground = function ({ const visColors = colors ?? EUI_VIS_COLOR_STORE.visColors; const visColorsAsTextKeys = Object.keys(visColors).filter((color) => - color.includes('AsTextDark') + color.includes('euiColorVisText') ) as Array; return _getVisColorsAsText(visColors, visColorsAsTextKeys); diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts index 21777215c58..9eea7d7a9fc 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts @@ -30,7 +30,8 @@ import { makeHighContrastColor, makeDisabledContrastColor, } from '../../../../services/color/contrast'; -import { colorVis } from './_colors_vis'; +import { colorVisLight } from './_colors_vis_light'; +import { colorVisDark } from './_colors_vis_dark'; import { severityColors } from './_colors_severity'; /* @@ -645,8 +646,13 @@ export const colors: _EuiThemeColors = { ink: '#000000', plainLight: '#FFFFFF', plainDark: '#000000', - LIGHT: light_colors, - DARK: dark_colors_ams, - vis: colorVis, severity: severityColors, + LIGHT: { + ...light_colors, + vis: colorVisLight, + }, + DARK: { + ...dark_colors_ams, + vis: colorVisDark, + }, }; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_dark.scss b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_dark.scss new file mode 100644 index 00000000000..7dc10784890 --- /dev/null +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_dark.scss @@ -0,0 +1,14 @@ +// stylelint-disable color-no-hex + +@import './colors_vis'; + +$euiColorVisText0: #7DE2D1 !default; +$euiColorVisText1: #1BA9F5 !default; +$euiColorVisText2: #F990C0 !default; +$euiColorVisText3: #BA9FDA !default; +$euiColorVisText4: #E9B8D2 !default; +$euiColorVisText5: #F4E08C !default; +$euiColorVisText6: #DBCDB3 !default; +$euiColorVisText7: #FFCE7A !default; +$euiColorVisText8: #D09689 !default; +$euiColorVisText9: #F66 !default; \ No newline at end of file diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_dark.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_dark.ts new file mode 100644 index 00000000000..4e2a320d4fe --- /dev/null +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_dark.ts @@ -0,0 +1,42 @@ +/* + * 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 { _EuiThemeVisColors } from '@elastic/eui-theme-common'; + +import { tint } from '../../../../services/color/manipulation'; +import { colorVisLight } from './_colors_vis_light'; + +export const colorVisDark: _EuiThemeVisColors = { + ...colorVisLight, + + euiColorVisText0: '#7DE2D1', + euiColorVisText1: '#1BA9F5', + euiColorVisText2: '#F990C0', + euiColorVisText3: tint( + colorVisLight.euiColorVisBehindText3, + 0.2 + ).toUpperCase(), // '#BA9FDA', + euiColorVisText4: tint( + colorVisLight.euiColorVisBehindText4, + 0.2 + ).toUpperCase(), // '#E9B8D2', + euiColorVisText5: tint( + colorVisLight.euiColorVisBehindText5, + 0.2 + ).toUpperCase(), // '#F4E08C', + euiColorVisText6: tint( + colorVisLight.euiColorVisBehindText6, + 0.2 + ).toUpperCase(), // '#DBCDB3', + euiColorVisText7: '#FFCE7A', + euiColorVisText8: tint( + colorVisLight.euiColorVisBehindText8, + 0.2 + ).toUpperCase(), // '#D09689', + euiColorVisText9: '#F66', +}; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_light.scss b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_light.scss new file mode 100644 index 00000000000..b855792c63d --- /dev/null +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_light.scss @@ -0,0 +1,14 @@ +// stylelint-disable color-no-hex + +@import './colors_vis'; + +$euiColorVisText0: #017D73 !default; +$euiColorVisText1: #006BB4 !default; +$euiColorVisText2: #DD0A73 !default; +$euiColorVisText3: #745A93 !default; +$euiColorVisText4: #A2728B !default; +$euiColorVisText5: #AB9946 !default; +$euiColorVisText6: #94866D !default; +$euiColorVisText7: #F5A700 !default; +$euiColorVisText8: #885145 !default; +$euiColorVisText9: #BD271E !default; \ No newline at end of file diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_light.ts similarity index 85% rename from packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis.ts rename to packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_light.ts index 3c43130cfe2..25e98f548e3 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_colors_vis_light.ts @@ -62,7 +62,7 @@ const euiPaletteColorBlind = { }, }; -export const colorVis: _EuiThemeVisColors = { +export const colorVisLight: _EuiThemeVisColors = { euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, @@ -89,21 +89,31 @@ export const colorVis: _EuiThemeVisColors = { euiColorVisBehindText8: euiPaletteColorBlind.euiColorVis8.behindText, euiColorVisBehindText9: euiPaletteColorBlind.euiColorVis9.behindText, - euiColorVisAsTextLight0: '#006BB4', - euiColorVisAsTextLight1: '#017D73', - euiColorVisAsTextLight2: '#F5A700', - euiColorVisAsTextLight3: '#BD271E', - euiColorVisAsTextLight4: '#DD0A73', - euiColorVisAsTextLight5: '#006BB4', // duplicated to handle color amount difference between themes - euiColorVisAsTextLight6: '#017D73', - - euiColorVisAsTextDark0: '#1BA9F5', - euiColorVisAsTextDark1: '#7DE2D1', - euiColorVisAsTextDark2: '#F990C0', - euiColorVisAsTextDark3: '#F66', - euiColorVisAsTextDark4: '#FFCE7A', - euiColorVisAsTextDark5: '#1BA9F5', - euiColorVisAsTextDark6: '#7DE2D1', + euiColorVisText0: '#017D73', + euiColorVisText1: '#006BB4', + euiColorVisText2: '#DD0A73', + euiColorVisText3: shade( + euiPaletteColorBlind.euiColorVis3.graphic, + 0.2 + ).toUpperCase(), // #745A93 + euiColorVisText4: shade( + euiPaletteColorBlind.euiColorVis4.graphic, + 0.2 + ).toUpperCase(), // #A2728B + euiColorVisText5: shade( + euiPaletteColorBlind.euiColorVis5.graphic, + 0.2 + ).toUpperCase(), // #AB9946 + euiColorVisText6: shade( + euiPaletteColorBlind.euiColorVis6.graphic, + 0.2 + ).toUpperCase(), // #94866D + euiColorVisText7: '#F5A700', + euiColorVisText8: shade( + euiPaletteColorBlind.euiColorVis8.graphic, + 0.2 + ).toUpperCase(), // #885145 + euiColorVisText9: '#BD271E', euiColorVisNeutral0: tint(euiPaletteColorBlind.euiColorVis1.graphic, 0.3), euiColorVisNeutral1: tint(euiPaletteColorBlind.euiColorVis1.graphic, 0.56), diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts index 3d3d0e85891..fe212a6b429 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -21,7 +21,7 @@ import { makeHighContrastColor } from '../../../../services/color/contrast'; import { buttons } from './_buttons'; import { forms } from './_forms'; -import { colorVis } from './_colors_vis'; +import { colorVisLight as colorVis } from './_colors_vis_light'; const component_colors: _EuiThemeComponentColors = { badgeBackground: computed( diff --git a/packages/eui/src/themes/index.ts b/packages/eui/src/themes/index.ts index c8d6ab640cf..04db94c2a3f 100644 --- a/packages/eui/src/themes/index.ts +++ b/packages/eui/src/themes/index.ts @@ -5,7 +5,10 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -export { colorVis } from './amsterdam/global_styling/variables/_colors_vis'; +import { colorVisLight } from './amsterdam/global_styling/variables/_colors_vis_light'; +import { colorVisDark } from './amsterdam/global_styling/variables/_colors_vis_dark'; + +export { colorVisLight as colorVis, colorVisLight, colorVisDark }; export type { EUI_THEME } from './themes'; export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme'; diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json index d81a4f03771..a11c558ff0f 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json @@ -282,20 +282,16 @@ "euiColorVis7_behindText": "#F5A35C", "euiColorVis8_behindText": "#C47C6C", "euiColorVis9_behindText": "#FF7E62", - "euiColorVisAsTextLight0": "#006BB4", - "euiColorVisAsTextLight1": "#017D73", - "euiColorVisAsTextLight2": "#F5A700", - "euiColorVisAsTextLight3": "#BD271E", - "euiColorVisAsTextLight4": "#DD0A73", - "euiColorVisAsTextLight5": "#006BB4", - "euiColorVisAsTextLight6": "#017D73", - "euiColorVisAsTextDark0": "#1BA9F5", - "euiColorVisAsTextDark1": "#7DE2D1", - "euiColorVisAsTextDark2": "#F990C0", - "euiColorVisAsTextDark3": "#F66", - "euiColorVisAsTextDark4": "#FFCE7A", - "euiColorVisAsTextDark5": "#1BA9F5", - "euiColorVisAsTextDark6": "#7DE2D1", + "euiColorVisText0": "#7DE2D1", + "euiColorVisText1": "#1BA9F5", + "euiColorVisText2": "#F990C0", + "euiColorVisText3": "#BA9FDA", + "euiColorVisText4": "#E9B8D2", + "euiColorVisText5": "#F4E08C", + "euiColorVisText6": "#DBCDB3", + "euiColorVisText7": "#FFCE7A", + "euiColorVisText8": "#D09689", + "euiColorVisText9": "#F66", "euiColorVisSuccess0": "#209280", "euiColorVisSuccess1": "#54B399", "euiColorVisWarning0": "#D6BF57", diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts index afd03354874..69b4443eb97 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts @@ -283,20 +283,16 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' { euiColorVis7_behindText: string; euiColorVis8_behindText: string; euiColorVis9_behindText: string; - euiColorVisAsTextLight0: string; - euiColorVisAsTextLight1: string; - euiColorVisAsTextLight2: string; - euiColorVisAsTextLight3: string; - euiColorVisAsTextLight4: string; - euiColorVisAsTextLight5: string; - euiColorVisAsTextLight6: string; - euiColorVisAsTextDark0: string; - euiColorVisAsTextDark1: string; - euiColorVisAsTextDark2: string; - euiColorVisAsTextDark3: string; - euiColorVisAsTextDark4: string; - euiColorVisAsTextDark5: string; - euiColorVisAsTextDark6: string; + euiColorVisText0: string; + euiColorVisText1: string; + euiColorVisText2: string; + euiColorVisText3: string; + euiColorVisText4: string; + euiColorVisText5: string; + euiColorVisText6: string; + euiColorVisText7: string; + euiColorVisText8: string; + euiColorVisText9: string; euiColorVisSuccess0: string; euiColorVisSuccess1: string; euiColorVisWarning0: string; diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json index d838c4d5790..1f38bcf5c3e 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json @@ -282,20 +282,16 @@ "euiColorVis7_behindText": "#F5A35C", "euiColorVis8_behindText": "#C47C6C", "euiColorVis9_behindText": "#FF7E62", - "euiColorVisAsTextLight0": "#006BB4", - "euiColorVisAsTextLight1": "#017D73", - "euiColorVisAsTextLight2": "#F5A700", - "euiColorVisAsTextLight3": "#BD271E", - "euiColorVisAsTextLight4": "#DD0A73", - "euiColorVisAsTextLight5": "#006BB4", - "euiColorVisAsTextLight6": "#017D73", - "euiColorVisAsTextDark0": "#1BA9F5", - "euiColorVisAsTextDark1": "#7DE2D1", - "euiColorVisAsTextDark2": "#F990C0", - "euiColorVisAsTextDark3": "#F66", - "euiColorVisAsTextDark4": "#FFCE7A", - "euiColorVisAsTextDark5": "#1BA9F5", - "euiColorVisAsTextDark6": "#7DE2D1", + "euiColorVisText0": "#017D73", + "euiColorVisText1": "#006BB4", + "euiColorVisText2": "#DD0A73", + "euiColorVisText3": "#745A93", + "euiColorVisText4": "#A2728B", + "euiColorVisText5": "#AB9946", + "euiColorVisText6": "#94866D", + "euiColorVisText7": "#F5A700", + "euiColorVisText8": "#885145", + "euiColorVisText9": "#BD271E", "euiColorVisSuccess0": "#209280", "euiColorVisSuccess1": "#54B399", "euiColorVisWarning0": "#D6BF57", diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts index d5de28c48d7..27d05e11898 100644 --- a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts +++ b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts @@ -283,20 +283,16 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' { euiColorVis7_behindText: string; euiColorVis8_behindText: string; euiColorVis9_behindText: string; - euiColorVisAsTextLight0: string; - euiColorVisAsTextLight1: string; - euiColorVisAsTextLight2: string; - euiColorVisAsTextLight3: string; - euiColorVisAsTextLight4: string; - euiColorVisAsTextLight5: string; - euiColorVisAsTextLight6: string; - euiColorVisAsTextDark0: string; - euiColorVisAsTextDark1: string; - euiColorVisAsTextDark2: string; - euiColorVisAsTextDark3: string; - euiColorVisAsTextDark4: string; - euiColorVisAsTextDark5: string; - euiColorVisAsTextDark6: string; + euiColorVisText0: string; + euiColorVisText1: string; + euiColorVisText2: string; + euiColorVisText3: string; + euiColorVisText4: string; + euiColorVisText5: string; + euiColorVisText6: string; + euiColorVisText7: string; + euiColorVisText8: string; + euiColorVisText9: string; euiColorVisSuccess0: string; euiColorVisSuccess1: string; euiColorVisWarning0: string; diff --git a/packages/eui/src/themes/json/eui_theme_borealis_dark.json b/packages/eui/src/themes/json/eui_theme_borealis_dark.json index 7a4ba32cb9d..1f865e3632a 100644 --- a/packages/eui/src/themes/json/eui_theme_borealis_dark.json +++ b/packages/eui/src/themes/json/eui_theme_borealis_dark.json @@ -282,20 +282,16 @@ "euiColorVis7_behindText": "#FFC9C2", "euiColorVis8_behindText": "#EAAE01", "euiColorVis9_behindText": "#FCD883", - "euiColorVisAsTextLight0": "#047471", - "euiColorVisAsTextLight1": "#1750BA", - "euiColorVisAsTextLight2": "#A11262", - "euiColorVisAsTextLight3": "#A71627", - "euiColorVisAsTextLight4": "#825803", - "euiColorVisAsTextLight5": "#09724D", - "euiColorVisAsTextLight6": "#6B3C9F", - "euiColorVisAsTextDark0": "#16C5C0", - "euiColorVisAsTextDark1": "#61A2FF", - "euiColorVisAsTextDark2": "#EE72A6", - "euiColorVisAsTextDark3": "#F6726A", - "euiColorVisAsTextDark4": "#EAAE01", - "euiColorVisAsTextDark5": "#24C292", - "euiColorVisAsTextDark6": "#B084F5", + "euiColorVisText0": "#16C5C0", + "euiColorVisText1": "#A6EDEA", + "euiColorVisText2": "#61A2FF", + "euiColorVisText3": "#BFDBFF", + "euiColorVisText4": "#EE72A6", + "euiColorVisText5": "#FFC7DB", + "euiColorVisText6": "#F6726A", + "euiColorVisText7": "#FFC9C2", + "euiColorVisText8": "#EAAE01", + "euiColorVisText9": "#FCD883", "euiColorVisSuccess0": "#24C292", "euiColorVisSuccess1": "#AEE8D2", "euiColorVisWarning0": "#FCD883", diff --git a/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts b/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts index 81ab5ff7296..9dadadeb3cd 100644 --- a/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts +++ b/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts @@ -1,4 +1,4 @@ -declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { +declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' { const sassVariables: { euiZDataGrid: number; euiZHeaderBelowDataGrid: number; @@ -283,20 +283,16 @@ declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { euiColorVis7_behindText: string; euiColorVis8_behindText: string; euiColorVis9_behindText: string; - euiColorVisAsTextLight0: string; - euiColorVisAsTextLight1: string; - euiColorVisAsTextLight2: string; - euiColorVisAsTextLight3: string; - euiColorVisAsTextLight4: string; - euiColorVisAsTextLight5: string; - euiColorVisAsTextLight6: string; - euiColorVisAsTextDark0: string; - euiColorVisAsTextDark1: string; - euiColorVisAsTextDark2: string; - euiColorVisAsTextDark3: string; - euiColorVisAsTextDark4: string; - euiColorVisAsTextDark5: string; - euiColorVisAsTextDark6: string; + euiColorVisText0: string; + euiColorVisText1: string; + euiColorVisText2: string; + euiColorVisText3: string; + euiColorVisText4: string; + euiColorVisText5: string; + euiColorVisText6: string; + euiColorVisText7: string; + euiColorVisText8: string; + euiColorVisText9: string; euiColorVisSuccess0: string; euiColorVisSuccess1: string; euiColorVisWarning0: string; diff --git a/packages/eui/src/themes/json/eui_theme_borealis_light.json b/packages/eui/src/themes/json/eui_theme_borealis_light.json index 488cfba7775..6b22a60d366 100644 --- a/packages/eui/src/themes/json/eui_theme_borealis_light.json +++ b/packages/eui/src/themes/json/eui_theme_borealis_light.json @@ -282,20 +282,16 @@ "euiColorVis7_behindText": "#FFC9C2", "euiColorVis8_behindText": "#EAAE01", "euiColorVis9_behindText": "#FCD883", - "euiColorVisAsTextLight0": "#047471", - "euiColorVisAsTextLight1": "#1750BA", - "euiColorVisAsTextLight2": "#A11262", - "euiColorVisAsTextLight3": "#A71627", - "euiColorVisAsTextLight4": "#825803", - "euiColorVisAsTextLight5": "#09724D", - "euiColorVisAsTextLight6": "#6B3C9F", - "euiColorVisAsTextDark0": "#16C5C0", - "euiColorVisAsTextDark1": "#61A2FF", - "euiColorVisAsTextDark2": "#EE72A6", - "euiColorVisAsTextDark3": "#F6726A", - "euiColorVisAsTextDark4": "#EAAE01", - "euiColorVisAsTextDark5": "#24C292", - "euiColorVisAsTextDark6": "#B084F5", + "euiColorVisText0": "#065B58", + "euiColorVisText1": "#047471", + "euiColorVisText2": "#154399", + "euiColorVisText3": "#0B64DD", + "euiColorVisText4": "#A11262", + "euiColorVisText5": "#D13680", + "euiColorVisText6": "#A71627", + "euiColorVisText7": "#DA3737", + "euiColorVisText8": "#6A4906", + "euiColorVisText9": "#966B03", "euiColorVisSuccess0": "#24C292", "euiColorVisSuccess1": "#AEE8D2", "euiColorVisWarning0": "#FCD883", diff --git a/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts b/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts index 4739685767f..99c003a624f 100644 --- a/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts +++ b/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts @@ -1,4 +1,4 @@ -declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { +declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' { const sassVariables: { euiZDataGrid: number; euiZHeaderBelowDataGrid: number; @@ -283,20 +283,16 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { euiColorVis7_behindText: string; euiColorVis8_behindText: string; euiColorVis9_behindText: string; - euiColorVisAsTextLight0: string; - euiColorVisAsTextLight1: string; - euiColorVisAsTextLight2: string; - euiColorVisAsTextLight3: string; - euiColorVisAsTextLight4: string; - euiColorVisAsTextLight5: string; - euiColorVisAsTextLight6: string; - euiColorVisAsTextDark0: string; - euiColorVisAsTextDark1: string; - euiColorVisAsTextDark2: string; - euiColorVisAsTextDark3: string; - euiColorVisAsTextDark4: string; - euiColorVisAsTextDark5: string; - euiColorVisAsTextDark6: string; + euiColorVisText0: string; + euiColorVisText1: string; + euiColorVisText2: string; + euiColorVisText3: string; + euiColorVisText4: string; + euiColorVisText5: string; + euiColorVisText6: string; + euiColorVisText7: string; + euiColorVisText8: string; + euiColorVisText9: string; euiColorVisSuccess0: string; euiColorVisSuccess1: string; euiColorVisWarning0: string; diff --git a/packages/website/docs/getting-started/theming/tokens/colors/data_vis_colors_preview.tsx b/packages/website/docs/getting-started/theming/tokens/colors/data_vis_colors_preview.tsx index c81912afa45..8939990ef00 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/data_vis_colors_preview.tsx +++ b/packages/website/docs/getting-started/theming/tokens/colors/data_vis_colors_preview.tsx @@ -16,3 +16,19 @@ export const DataVisColorsPreview = () => { ); }; + +export const DataVisTextColorsPreview = () => { + const { euiTheme } = useEuiTheme(); + + return ( +
+ color: {euiTheme.colors.vis.euiColorVisText0} +
+ ); +}; diff --git a/packages/website/docs/getting-started/theming/tokens/colors/data_vis_colors_table.tsx b/packages/website/docs/getting-started/theming/tokens/colors/data_vis_colors_table.tsx index 119e84b3933..375d85daa8b 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/data_vis_colors_table.tsx +++ b/packages/website/docs/getting-started/theming/tokens/colors/data_vis_colors_table.tsx @@ -126,3 +126,54 @@ export const DataVisColorsBehindTextColorsTable = () => { ); }; + +export const DataVisTextColorsTable = () => { + const { euiTheme } = useEuiTheme(); + + return ( + + ); +}; 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 557a073c193..74f33ecc164 100644 --- a/packages/website/docs/getting-started/theming/tokens/colors/index.mdx +++ b/packages/website/docs/getting-started/theming/tokens/colors/index.mdx @@ -198,7 +198,7 @@ import { SpecialColorsTable } from './special_colors_table'; :::note Guidance -Data visualization colors semantically tied to data visualizations and are not meant for use in other contexts. Do not use these colors in other contexts. +Data visualization colors are semantically tied to data visualizations and are not meant for use in other contexts. Do not use these colors in other contexts. ::: import { DataVisColorsTable, DataVisColorsBehindTextColorsTable, DataVisBackgroundColor } from './data_vis_colors_table'; @@ -212,6 +212,8 @@ import { DataVisColorsPreview } from './data_vis_colors_preview' The following colors are color-blind safe and should be used in categorically seried visualizations and graphics. They are meant to be contrasted against the value of for the current theme. + See the [Data visualization text colors](#dataVisText) section for a note about text colors. + See the [Color Contrast](#contrast) section for a note about color contrast. @@ -263,13 +265,49 @@ import { SeverityColorsPreview } from './severity_colors_preview' + +## Data visualization text colors {#dataVisText} + +:::note Guidance + +Data visualization text colors are semantically tied to data visualizations colors and are not meant for use in other contexts. +::: + +import { DataVisTextColorsTable } from './data_vis_colors_table'; +import { DataVisTextColorsPreview } from './data_vis_colors_preview' + + + + + ### `euiTheme.colors.vis[token]` token + + The following colors are special text colors that are directly related to the data visualization colors. In dark mode these colors + equal the values of the regular data visualization colors and only differ in light mode to provide higher color contrasts. Their only purpose is to be used as possible + text fallbacks for data visualization colors. + + + + + + ``` + css` + color: ${euiTheme.colors.vis.euiColorVisText0}; + ` + ``` + + + + + + + + ## Contrast ratios and color modes {#contrast} Our Data visualization colors and Health and Severity colors prioritize visual clarity and aesthetic appeal over strict contrast compliance in light mode. **This means some colors may not meet WCAG contrast requirements against light backgrounds**, as lighter and more saturated tones help differentiate data and create a more visually engaging experience. However, in dark mode, all colors meet the minimum 3:1 contrast ratio, ensuring accessibility compliance. - import { EuiTable, EuiTableHeader, EuiTableHeaderCell, EuiTableRow, EuiTableRowCell } from '@elastic/eui';