diff --git a/packages/eui-theme-borealis/changelogs/upcoming/8595.md b/packages/eui-theme-borealis/changelogs/upcoming/8595.md new file mode 100644 index 00000000000..75659f97a3b --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/8595.md @@ -0,0 +1,10 @@ +- Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` +- Added new button background component tokens: + - `background{color}Hover` + - `background{color}Active` + - `backgroundFilled{color}Hover` + - `backgroundFilled{color}Active` + - `backgroundEmpty{color}Hover` + - `backgroundEmpty{color}Active` +- Updated `backgroundLightText` token value to `shade120` + diff --git a/packages/eui-theme-borealis/changelogs/upcoming/8652.md b/packages/eui-theme-borealis/changelogs/upcoming/8652.md new file mode 100644 index 00000000000..dce6473af9f --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/8652.md @@ -0,0 +1,3 @@ +- Added token `filterButtonBadgeBackgroundHover` +- Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` + 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 7b9d9c799c4..7a4ba32cb9d 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -392,7 +392,7 @@ "euiColorBackgroundLightWarning": "#3D3014", "euiColorBackgroundLightRisk": "#4A221C", "euiColorBackgroundLightDanger": "#491D27", - "euiColorBackgroundLightText": "#1D2A3E", + "euiColorBackgroundLightText": "#2B394F", "euiColorBackgroundFilledPrimary": "#61A2FF", "euiColorBackgroundFilledAccent": "#EE72A6", "euiColorBackgroundFilledAccentSecondary": "#16C5C0", diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts index 017c69b5abe..be0662c5f17 100644 --- a/packages/eui-theme-borealis/src/index.ts +++ b/packages/eui-theme-borealis/src/index.ts @@ -37,6 +37,7 @@ export const euiThemeBorealis: EuiThemeShape = { flags: { hasGlobalFocusColor: true, hasVisColorAdjustment: false, + buttonVariant: 'refresh', }, overrides, }; diff --git a/packages/eui-theme-borealis/src/variables/_buttons.ts b/packages/eui-theme-borealis/src/variables/_buttons.ts index ceb34ddecb8..60fea4089b2 100644 --- a/packages/eui-theme-borealis/src/variables/_buttons.ts +++ b/packages/eui-theme-borealis/src/variables/_buttons.ts @@ -6,9 +6,30 @@ * Side Public License, v 1. */ -import { _EuiThemeButton, computed } from '@elastic/eui-theme-common'; +import { + _EuiThemeButton, + EuiThemeVariantFlags, + ColorModeSwitch, + computed, +} from '@elastic/eui-theme-common'; import { SEMANTIC_COLORS } from './colors/_semantic_colors'; +const getTokenByVariant = ( + buttonVariant: EuiThemeVariantFlags['buttonVariant'], + tokens: { + classic: ColorModeSwitch; + refresh: ColorModeSwitch; + } +) => { + switch (buttonVariant) { + case 'refresh': + return tokens.refresh; + default: { + return tokens.classic; + } + } +}; + const _buttons = { backgroundPrimary: computed( ([backgroundLightPrimary]) => backgroundLightPrimary, @@ -43,14 +64,43 @@ const _buttons = { ['colors.backgroundLightDanger'] ), backgroundText: computed( - ([backgroundLightText]) => backgroundLightText, - ['colors.backgroundLightText'] + ([buttonVariant, backgroundBasePlain, backgroundLightText]) => { + return getTokenByVariant(buttonVariant, { + refresh: backgroundBasePlain, + classic: backgroundLightText, + }); + }, + [ + 'flags.buttonVariant', + 'colors.backgroundBasePlain', + 'colors.backgroundLightText', + ] ), backgroundDisabled: computed( ([backgroundBaseDisabled]) => backgroundBaseDisabled, ['colors.backgroundBaseDisabled'] ), + backgroundPrimaryHover: SEMANTIC_COLORS.primary70Alpha12, + backgroundAccentHover: SEMANTIC_COLORS.accent70Alpha12, + backgroundAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha12, + backgroundNeutralHover: SEMANTIC_COLORS.neutral70Alpha12, + backgroundSuccessHover: SEMANTIC_COLORS.success70Alpha12, + backgroundWarningHover: SEMANTIC_COLORS.warning60Alpha16, + backgroundRiskHover: SEMANTIC_COLORS.risk60Alpha16, + backgroundDangerHover: SEMANTIC_COLORS.danger70Alpha12, + backgroundTextHover: SEMANTIC_COLORS.primary100Alpha8, + + backgroundPrimaryActive: SEMANTIC_COLORS.primary70Alpha16, + backgroundAccentActive: SEMANTIC_COLORS.accent70Alpha16, + backgroundAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary70Alpha16, + backgroundNeutralActive: SEMANTIC_COLORS.neutral70Alpha16, + backgroundSuccessActive: SEMANTIC_COLORS.success70Alpha16, + backgroundWarningActive: SEMANTIC_COLORS.warning60Alpha20, + backgroundRiskActive: SEMANTIC_COLORS.risk60Alpha20, + backgroundDangerActive: SEMANTIC_COLORS.danger70Alpha16, + backgroundTextActive: SEMANTIC_COLORS.primary100Alpha12, + backgroundFilledPrimary: computed( ([backgroundFilledPrimary]) => backgroundFilledPrimary, ['colors.backgroundFilledPrimary'] @@ -92,43 +142,46 @@ const _buttons = { ['colors.backgroundBaseDisabled'] ), - // Temp. mapping to support more variants in old theme - backgroundEmptyPrimaryHover: computed( - ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, - ['colors.backgroundBaseInteractiveHover'] - ), - backgroundEmptyAccentHover: computed( - ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, - ['colors.backgroundBaseInteractiveHover'] - ), - backgroundEmptyAccentSecondaryHover: computed( - ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, - ['colors.backgroundBaseInteractiveHover'] - ), - backgroundEmptyNeutralHover: computed( - ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, - ['colors.backgroundBaseInteractiveHover'] - ), - backgroundEmptySuccessHover: computed( - ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, - ['colors.backgroundBaseInteractiveHover'] - ), - backgroundEmptyWarningHover: computed( - ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, - ['colors.backgroundBaseInteractiveHover'] - ), - backgroundEmptyRiskHover: computed( - ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, - ['colors.backgroundBaseInteractiveHover'] - ), - backgroundEmptyDangerHover: computed( - ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, - ['colors.backgroundBaseInteractiveHover'] - ), - backgroundEmptyTextHover: computed( - ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, - ['colors.backgroundBaseInteractiveHover'] - ), + backgroundFilledPrimaryHover: SEMANTIC_COLORS.primary100, + backgroundFilledAccentHover: SEMANTIC_COLORS.accent100, + backgroundFilledAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary100, + backgroundFilledNeutralHover: SEMANTIC_COLORS.neutral100, + backgroundFilledSuccessHover: SEMANTIC_COLORS.success100, + backgroundFilledWarningHover: SEMANTIC_COLORS.warning50, + backgroundFilledRiskHover: SEMANTIC_COLORS.risk80, + backgroundFilledDangerHover: SEMANTIC_COLORS.danger100, + backgroundFilledTextHover: SEMANTIC_COLORS.shade100, + + backgroundFilledPrimaryActive: SEMANTIC_COLORS.primary110, + backgroundFilledAccentActive: SEMANTIC_COLORS.accent110, + backgroundFilledAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary110, + backgroundFilledNeutralActive: SEMANTIC_COLORS.neutral110, + backgroundFilledSuccessActive: SEMANTIC_COLORS.success110, + backgroundFilledWarningActive: SEMANTIC_COLORS.warning60, + backgroundFilledRiskActive: SEMANTIC_COLORS.risk90, + backgroundFilledDangerActive: SEMANTIC_COLORS.danger110, + backgroundFilledTextActive: SEMANTIC_COLORS.shade110, + + backgroundEmptyPrimaryHover: SEMANTIC_COLORS.primary70Alpha12, + backgroundEmptyAccentHover: SEMANTIC_COLORS.accent70Alpha12, + backgroundEmptyAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha12, + backgroundEmptyNeutralHover: SEMANTIC_COLORS.neutral70Alpha12, + backgroundEmptySuccessHover: SEMANTIC_COLORS.success70Alpha12, + backgroundEmptyWarningHover: SEMANTIC_COLORS.warning60Alpha16, + backgroundEmptyRiskHover: SEMANTIC_COLORS.risk60Alpha16, + backgroundEmptyDangerHover: SEMANTIC_COLORS.danger70Alpha12, + backgroundEmptyTextHover: SEMANTIC_COLORS.primary100Alpha8, + + backgroundEmptyPrimaryActive: SEMANTIC_COLORS.primary70Alpha16, + backgroundEmptyAccentActive: SEMANTIC_COLORS.accent70Alpha16, + backgroundEmptyAccentSecondaryActive: + SEMANTIC_COLORS.accentSecondary70Alpha16, + backgroundEmptyNeutralActive: SEMANTIC_COLORS.neutral70Alpha16, + backgroundEmptySuccessActive: SEMANTIC_COLORS.success70Alpha16, + backgroundEmptyWarningActive: SEMANTIC_COLORS.warning60Alpha20, + backgroundEmptyRiskActive: SEMANTIC_COLORS.risk60Alpha20, + backgroundEmptyDangerActive: SEMANTIC_COLORS.danger70Alpha16, + backgroundEmptyTextActive: SEMANTIC_COLORS.primary100Alpha12, textColorPrimary: computed( ([textPrimary]) => textPrimary, @@ -210,6 +263,67 @@ const _buttons = { const _dark_buttons = { ..._buttons, + backgroundPrimaryHover: SEMANTIC_COLORS.primary70Alpha16, + backgroundAccentHover: SEMANTIC_COLORS.accent70Alpha16, + backgroundAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha16, + backgroundNeutralHover: SEMANTIC_COLORS.neutral70Alpha16, + backgroundSuccessHover: SEMANTIC_COLORS.success70Alpha16, + backgroundWarningHover: SEMANTIC_COLORS.warning60Alpha12, + backgroundRiskHover: SEMANTIC_COLORS.risk60Alpha12, + backgroundDangerHover: SEMANTIC_COLORS.danger70Alpha16, + backgroundTextHover: SEMANTIC_COLORS.plainLightAlpha12, + + backgroundPrimaryActive: SEMANTIC_COLORS.primary70Alpha20, + backgroundAccentActive: SEMANTIC_COLORS.accent70Alpha20, + backgroundAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary70Alpha20, + backgroundNeutralActive: SEMANTIC_COLORS.neutral70Alpha20, + backgroundSuccessActive: SEMANTIC_COLORS.success70Alpha20, + backgroundWarningActive: SEMANTIC_COLORS.warning60Alpha16, + backgroundRiskActive: SEMANTIC_COLORS.risk60Alpha16, + backgroundDangerActive: SEMANTIC_COLORS.danger70Alpha20, + backgroundTextActive: SEMANTIC_COLORS.plainLightAlpha16, + + backgroundFilledPrimaryHover: SEMANTIC_COLORS.primary70, + backgroundFilledAccentHover: SEMANTIC_COLORS.accent70, + backgroundFilledAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70, + backgroundFilledNeutralHover: SEMANTIC_COLORS.neutral70, + backgroundFilledSuccessHover: SEMANTIC_COLORS.success70, + backgroundFilledWarningHover: SEMANTIC_COLORS.warning50, + backgroundFilledRiskHover: SEMANTIC_COLORS.risk60, + backgroundFilledDangerHover: SEMANTIC_COLORS.danger70, + backgroundFilledTextHover: SEMANTIC_COLORS.shade70, + + backgroundFilledPrimaryActive: SEMANTIC_COLORS.primary80, + backgroundFilledAccentActive: SEMANTIC_COLORS.accent80, + backgroundFilledAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary80, + backgroundFilledNeutralActive: SEMANTIC_COLORS.neutral80, + backgroundFilledSuccessActive: SEMANTIC_COLORS.success80, + backgroundFilledWarningActive: SEMANTIC_COLORS.warning60, + backgroundFilledRiskActive: SEMANTIC_COLORS.risk70, + backgroundFilledDangerActive: SEMANTIC_COLORS.danger80, + backgroundFilledTextActive: SEMANTIC_COLORS.shade80, + + backgroundEmptyPrimaryHover: SEMANTIC_COLORS.primary70Alpha16, + backgroundEmptyAccentHover: SEMANTIC_COLORS.accent70Alpha16, + backgroundEmptyAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha16, + backgroundEmptyNeutralHover: SEMANTIC_COLORS.neutral70Alpha16, + backgroundEmptySuccessHover: SEMANTIC_COLORS.success70Alpha16, + backgroundEmptyWarningHover: SEMANTIC_COLORS.warning60Alpha12, + backgroundEmptyRiskHover: SEMANTIC_COLORS.risk60Alpha12, + backgroundEmptyDangerHover: SEMANTIC_COLORS.danger70Alpha16, + backgroundEmptyTextHover: SEMANTIC_COLORS.plainLightAlpha12, + + backgroundEmptyPrimaryActive: SEMANTIC_COLORS.primary70Alpha20, + backgroundEmptyAccentActive: SEMANTIC_COLORS.accent70Alpha20, + backgroundEmptyAccentSecondaryActive: + SEMANTIC_COLORS.accentSecondary70Alpha20, + backgroundEmptySuccessActive: SEMANTIC_COLORS.success70Alpha20, + backgroundEmptyNeutralActive: SEMANTIC_COLORS.neutral70Alpha20, + backgroundEmptyWarningActive: SEMANTIC_COLORS.warning60Alpha16, + backgroundEmptyRiskActive: SEMANTIC_COLORS.risk60Alpha16, + backgroundEmptyDangerActive: SEMANTIC_COLORS.danger70Alpha20, + backgroundEmptyTextActive: SEMANTIC_COLORS.plainLightAlpha16, + textColorFilledWarning: SEMANTIC_COLORS.warning110, }; diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index 9526e626f24..91b0a10d57d 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -17,11 +17,10 @@ import { dark_background_colors, 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'; -import { colorVis } from './colors/_colors_vis'; -import { border_colors } from './colors/_colors_light'; const component_colors: _EuiThemeComponentColors = { badgeBackground: computed( @@ -53,9 +52,8 @@ const component_colors: _EuiThemeComponentColors = { bottomBarBackground: SEMANTIC_COLORS.plainDark, buttonGroupBackgroundDisabledSelected: computed( - ([backgroundBaseFormsControlDisabled]) => - backgroundBaseFormsControlDisabled, - ['colors.backgroundBaseFormsControlDisabled'] + ([backgroundBaseDisabled]) => backgroundBaseDisabled, + ['colors.backgroundBaseDisabled'] ), buttonGroupBorderColor: computed( ([borderBasePlain]) => borderBasePlain, @@ -65,10 +63,7 @@ const component_colors: _EuiThemeComponentColors = { ([borderBasePlain]) => borderBasePlain, ['colors.borderBasePlain'] ), - buttonGroupFocusColor: computed( - ([textPrimary]) => textPrimary, - ['colors.textPrimary'] - ), + buttonGroupFocusColor: SEMANTIC_COLORS.plainDark, codeBackground: computed( ([backgroundBaseHighlighted]) => backgroundBaseHighlighted, @@ -144,6 +139,8 @@ const component_colors: _EuiThemeComponentColors = { ['colors.backgroundLightSuccess'] ), + filterButtonBadgeBackgroundHover: SEMANTIC_COLORS.shade25, + filterSelectItemBackgroundFocusDisabled: computed( ([backgroundBaseDisabled]) => backgroundBaseDisabled, ['colors.backgroundBaseDisabled'] @@ -332,6 +329,8 @@ export const components: _EuiThemeComponents = { DARK: { ...component_colors, + buttonGroupFocusColor: SEMANTIC_COLORS.plainLight, + codeInlineColor: colorVis.euiColorVisAsTextDark6, codeStringColor: colorVis.euiColorVisAsTextDark2, codeTagColor: colorVis.euiColorVisAsTextDark1, @@ -345,6 +344,8 @@ export const components: _EuiThemeComponents = { codeAdditionColor: colorVis.euiColorVisAsTextDark0, codeDeletionColor: colorVis.euiColorVisAsTextDark3, + filterButtonBadgeBackgroundHover: SEMANTIC_COLORS.shade105, + loadingSpinnerBorder: dark_border_colors.borderBasePlain, loadingChartMonoBackground0: SEMANTIC_COLORS.shade110, 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 7e8e1a7dffe..72a6ae04773 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -59,7 +59,7 @@ $euiColorBackgroundLightSuccess: $euiColorSuccess130 !default; $euiColorBackgroundLightRisk: $euiColorRisk130 !default; $euiColorBackgroundLightWarning: $euiColorWarning130 !default; $euiColorBackgroundLightDanger: $euiColorDanger130 !default; -$euiColorBackgroundLightText: $euiColorShade130 !default; +$euiColorBackgroundLightText: $euiColorShade120 !default; $euiColorBackgroundFilledPrimary: $euiColorPrimary60 !default; $euiColorBackgroundFilledAccent: $euiColorAccent60 !default; 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 5a590081dad..7e803a2c029 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -110,7 +110,7 @@ export const dark_background_colors: _EuiThemeBackgroundColors = { backgroundLightWarning: SEMANTIC_COLORS.warning130, backgroundLightRisk: SEMANTIC_COLORS.risk130, backgroundLightDanger: SEMANTIC_COLORS.danger130, - backgroundLightText: SEMANTIC_COLORS.shade130, + backgroundLightText: SEMANTIC_COLORS.shade120, backgroundFilledPrimary: SEMANTIC_COLORS.primary60, backgroundFilledAccent: SEMANTIC_COLORS.accent60, 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 bac70d6ebfa..7f83df38e0f 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -36,6 +36,7 @@ $euiColorPrimary140: #0A2342 !default; $euiColorPrimary70Alpha12: rgba($euiColorPrimary70, 0.12) !default; $euiColorPrimary70Alpha16: rgba($euiColorPrimary70, 0.16) !default; +$euiColorPrimary70Alpha20: rgba($euiColorPrimary70, 0.2) !default; $euiColorPrimary100Alpha4: rgba($euiColorPrimary100, 0.04) !default; $euiColorPrimary100Alpha8: rgba($euiColorPrimary100, 0.08) !default; @@ -58,6 +59,7 @@ $euiColorAccent140: #351725 !default; $euiColorAccent70Alpha12: rgba($euiColorAccent70, 0.12) !default; $euiColorAccent70Alpha16: rgba($euiColorAccent70, 0.16) !default; +$euiColorAccent70Alpha20: rgba($euiColorAccent70, 0.2) !default; $euiColorAccentSecondary10: #E2F9F7 !default; $euiColorAccentSecondary20: #C9F3F0 !default; @@ -76,6 +78,7 @@ $euiColorAccentSecondary140: #03282B !default; $euiColorAccentSecondary70Alpha12: rgba($euiColorAccentSecondary70, 0.12) !default; $euiColorAccentSecondary70Alpha16: rgba($euiColorAccentSecondary70, 0.16) !default; +$euiColorAccentSecondary70Alpha20: rgba($euiColorAccentSecondary70, 0.2) !default; $euiColorNeutral10: '#E5F6FA' !default; $euiColorNeutral20: '#CFEEF7' !default; @@ -109,6 +112,7 @@ $euiColorSuccess140: #092A26 !default; $euiColorSuccess70Alpha12: rgba($euiColorSuccess70, 0.12) !default; $euiColorSuccess70Alpha16: rgba($euiColorSuccess70, 0.16) !default; +$euiColorSuccess70Alpha20: rgba($euiColorSuccess70, 0.2) !default; $euiColorWarning10: #FDF3D8 !default; $euiColorWarning20: #FDE9B5 !default; @@ -125,8 +129,9 @@ $euiColorWarning120: #513910 !default; $euiColorWarning130: #3D3014 !default; $euiColorWarning140: #2C2721 !default; -$euiColorWarning40Alpha12: rgba($euiColorWarning40, 0.12) !default; -$euiColorWarning40Alpha24: rgba($euiColorWarning40, 0.24) !default; +$euiColorWarning60Alpha12: rgba($euiColorWarning60, 0.12) !default; +$euiColorWarning60Alpha16: rgba($euiColorWarning60, 0.16) !default; +$euiColorWarning60Alpha20: rgba($euiColorWarning60, 0.2) !default; $euiColorDanger10: #FFE8E5 !default; $euiColorDanger20: #FDDDD8 !default; @@ -145,6 +150,7 @@ $euiColorDanger140: #351721 !default; $euiColorDanger70Alpha12: rgba($euiColorDanger70, 0.12) !default; $euiColorDanger70Alpha16: rgba($euiColorDanger70, 0.16) !default; +$euiColorDanger70Alpha20: rgba($euiColorDanger70, 0.2) !default; $euiColorRisk10: '#FFEDD6' !default; $euiColorRisk20: '#FFDEBF' !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 3cb8427b0a5..4862efcdeb3 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts @@ -184,8 +184,10 @@ const _semantic_rgb_colors = { primary100RGB: chroma(_semantic_colors.primary100).rgb().join(), accent70RGB: chroma(_semantic_colors.accent70).rgb().join(), accentSecondary70RGB: chroma(_semantic_colors.accentSecondary70).rgb().join(), + neutral70RGB: chroma(_semantic_colors.neutral70).rgb().join(), success70RGB: chroma(_semantic_colors.success70).rgb().join(), - warning40RGB: chroma(_semantic_colors.warning40).rgb().join(), + warning60RGB: chroma(_semantic_colors.warning60).rgb().join(), + risk60RGB: chroma(_semantic_colors.risk60).rgb().join(), danger70RGB: chroma(_semantic_colors.danger70).rgb().join(), shade100RGB: chroma(_semantic_colors.shade100).rgb().join(), shade120RGB: chroma(_semantic_colors.shade120).rgb().join(), @@ -200,6 +202,7 @@ const _semantic_alpha_colors = { primary70Alpha12: `rgba(${_semantic_rgb_colors.primary70RGB}, 0.12)`, primary70Alpha16: `rgba(${_semantic_rgb_colors.primary70RGB}, 0.16)`, + primary70Alpha20: `rgba(${_semantic_rgb_colors.primary70RGB}, 0.2)`, primary100Alpha4: `rgba(${_semantic_rgb_colors.primary100RGB}, 0.04)`, primary100Alpha8: `rgba(${_semantic_rgb_colors.primary100RGB}, 0.08)`, @@ -207,18 +210,31 @@ const _semantic_alpha_colors = { accent70Alpha12: `rgba(${_semantic_rgb_colors.accent70RGB}, 0.12)`, accent70Alpha16: `rgba(${_semantic_rgb_colors.accent70RGB}, 0.16)`, + accent70Alpha20: `rgba(${_semantic_rgb_colors.accent70RGB}, 0.2)`, accentSecondary70Alpha12: `rgba(${_semantic_rgb_colors.accentSecondary70RGB}, 0.12)`, accentSecondary70Alpha16: `rgba(${_semantic_rgb_colors.accentSecondary70RGB}, 0.16)`, + accentSecondary70Alpha20: `rgba(${_semantic_rgb_colors.accentSecondary70RGB}, 0.2)`, + + neutral70Alpha12: `rgba(${_semantic_rgb_colors.neutral70RGB}, 0.12)`, + neutral70Alpha16: `rgba(${_semantic_rgb_colors.neutral70RGB}, 0.16)`, + neutral70Alpha20: `rgba(${_semantic_rgb_colors.neutral70RGB}, 0.2)`, success70Alpha12: `rgba(${_semantic_rgb_colors.success70RGB}, 0.12)`, success70Alpha16: `rgba(${_semantic_rgb_colors.success70RGB}, 0.16)`, + success70Alpha20: `rgba(${_semantic_rgb_colors.success70RGB}, 0.2)`, + + warning60Alpha12: `rgba(${_semantic_rgb_colors.warning60RGB}, 0.12)`, + warning60Alpha16: `rgba(${_semantic_rgb_colors.warning60RGB}, 0.16)`, + warning60Alpha20: `rgba(${_semantic_rgb_colors.warning60RGB}, 0.2)`, - warning40Alpha12: `rgba(${_semantic_rgb_colors.warning40RGB}, 0.12)`, - warning40Alpha24: `rgba(${_semantic_rgb_colors.warning40RGB}, 0.24)`, + risk60Alpha12: `rgba(${_semantic_rgb_colors.risk60RGB}, 0.12)`, + risk60Alpha16: `rgba(${_semantic_rgb_colors.risk60RGB}, 0.16)`, + risk60Alpha20: `rgba(${_semantic_rgb_colors.risk60RGB}, 0.2)`, danger70Alpha12: `rgba(${_semantic_rgb_colors.danger70RGB}, 0.12)`, danger70Alpha16: `rgba(${_semantic_rgb_colors.danger70RGB}, 0.16)`, + danger70Alpha20: `rgba(${_semantic_rgb_colors.danger70RGB}, 0.2)`, shade100Alpha4: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.04)`, shade100Alpha16: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.16)`, diff --git a/packages/eui-theme-common/changelogs/upcoming/8595.md b/packages/eui-theme-common/changelogs/upcoming/8595.md new file mode 100644 index 00000000000..d3eb0977d24 --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/8595.md @@ -0,0 +1,10 @@ +- Added support for `buttonVariant` on `_EuiThemeFlags` +- Added support for new button background component tokens: + - `background{color}Hover` + - `background{color}Active` + - `backgroundFilled{color}Hover` + - `backgroundFilled{color}Active` + - `backgroundEmpty{color}Hover` + - `backgroundEmpty{color}Active` +- Updated `getTokenName` util making the `variant` argument optional + diff --git a/packages/eui-theme-common/changelogs/upcoming/8652.md b/packages/eui-theme-common/changelogs/upcoming/8652.md new file mode 100644 index 00000000000..7e8fcf16bc7 --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/8652.md @@ -0,0 +1,2 @@ +- Added type for token `filterButtonBadgeBackgroundHover` + 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 9c6c0a534e7..115a68b0a4f 100644 --- a/packages/eui-theme-common/src/global_styling/variables/buttons.ts +++ b/packages/eui-theme-common/src/global_styling/variables/buttons.ts @@ -23,6 +23,26 @@ export type _EuiThemeButtonColors = { backgroundText: ColorModeSwitch; backgroundDisabled: ColorModeSwitch; + backgroundPrimaryHover: ColorModeSwitch; + backgroundAccentHover: ColorModeSwitch; + backgroundAccentSecondaryHover: ColorModeSwitch; + backgroundNeutralHover: ColorModeSwitch; + backgroundSuccessHover: ColorModeSwitch; + backgroundWarningHover: ColorModeSwitch; + backgroundRiskHover: ColorModeSwitch; + backgroundDangerHover: ColorModeSwitch; + backgroundTextHover: ColorModeSwitch; + + backgroundPrimaryActive: ColorModeSwitch; + backgroundAccentActive: ColorModeSwitch; + backgroundAccentSecondaryActive: ColorModeSwitch; + backgroundNeutralActive: ColorModeSwitch; + backgroundSuccessActive: ColorModeSwitch; + backgroundWarningActive: ColorModeSwitch; + backgroundRiskActive: ColorModeSwitch; + backgroundDangerActive: ColorModeSwitch; + backgroundTextActive: ColorModeSwitch; + backgroundFilledPrimary: ColorModeSwitch; backgroundFilledAccent: ColorModeSwitch; backgroundFilledAccentSecondary: ColorModeSwitch; @@ -34,6 +54,26 @@ export type _EuiThemeButtonColors = { backgroundFilledText: ColorModeSwitch; backgroundFilledDisabled: ColorModeSwitch; + backgroundFilledPrimaryHover: ColorModeSwitch; + backgroundFilledAccentHover: ColorModeSwitch; + backgroundFilledAccentSecondaryHover: ColorModeSwitch; + backgroundFilledNeutralHover: ColorModeSwitch; + backgroundFilledSuccessHover: ColorModeSwitch; + backgroundFilledWarningHover: ColorModeSwitch; + backgroundFilledRiskHover: ColorModeSwitch; + backgroundFilledDangerHover: ColorModeSwitch; + backgroundFilledTextHover: ColorModeSwitch; + + backgroundFilledPrimaryActive: ColorModeSwitch; + backgroundFilledAccentActive: ColorModeSwitch; + backgroundFilledAccentSecondaryActive: ColorModeSwitch; + backgroundFilledNeutralActive: ColorModeSwitch; + backgroundFilledSuccessActive: ColorModeSwitch; + backgroundFilledWarningActive: ColorModeSwitch; + backgroundFilledRiskActive: ColorModeSwitch; + backgroundFilledDangerActive: ColorModeSwitch; + backgroundFilledTextActive: ColorModeSwitch; + backgroundEmptyPrimaryHover: ColorModeSwitch; backgroundEmptyAccentHover: ColorModeSwitch; backgroundEmptyAccentSecondaryHover: ColorModeSwitch; @@ -44,6 +84,16 @@ export type _EuiThemeButtonColors = { backgroundEmptyDangerHover: ColorModeSwitch; backgroundEmptyTextHover: ColorModeSwitch; + backgroundEmptyPrimaryActive: ColorModeSwitch; + backgroundEmptyAccentActive: ColorModeSwitch; + backgroundEmptyAccentSecondaryActive: ColorModeSwitch; + backgroundEmptyNeutralActive: ColorModeSwitch; + backgroundEmptySuccessActive: ColorModeSwitch; + backgroundEmptyWarningActive: ColorModeSwitch; + backgroundEmptyRiskActive: ColorModeSwitch; + backgroundEmptyDangerActive: ColorModeSwitch; + backgroundEmptyTextActive: ColorModeSwitch; + textColorPrimary: ColorModeSwitch; textColorAccent: ColorModeSwitch; textColorAccentSecondary: ColorModeSwitch; diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts index 44ee04568ca..62c4347df76 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -10,7 +10,7 @@ import { ColorModeSwitch, StrictColorModeSwitch, } from '../../services/theme/types'; -import { _EuiThemeButtonColors } from './buttons'; +import { _EuiThemeButton } from './buttons'; import { _EuiThemeForm, _EuiThemeFormColors } from './forms'; export type _EuiThemeComponentColors = { @@ -71,6 +71,8 @@ export type _EuiThemeComponentColors = { headerDarkSearchBorderColor: ColorModeSwitch; headerDarkSectionItemBackgroundFocus: ColorModeSwitch; + filterButtonBadgeBackgroundHover: ColorModeSwitch; + filterSelectItemBackgroundFocusDisabled: ColorModeSwitch; flyoutFooterBackground: ColorModeSwitch; @@ -138,7 +140,7 @@ export type _EuiThemeComponentColors = { }; export type _EuiThemeComponents = { - buttons: StrictColorModeSwitch<_EuiThemeButtonColors>; + buttons: _EuiThemeButton; forms: _EuiThemeForm & StrictColorModeSwitch<_EuiThemeFormColors>; /** * internal-only key that holds temporary tokens used while migrating themes diff --git a/packages/eui-theme-common/src/global_styling/variables/flags.ts b/packages/eui-theme-common/src/global_styling/variables/flags.ts index e56ed84a9f1..0860b3cdf0d 100644 --- a/packages/eui-theme-common/src/global_styling/variables/flags.ts +++ b/packages/eui-theme-common/src/global_styling/variables/flags.ts @@ -6,10 +6,14 @@ * Side Public License, v 1. */ +export type EuiThemeVariantFlags = { + buttonVariant: 'classic' | 'refresh'; +}; + /** * Theme specific setting flags */ export type _EuiThemeFlags = { hasGlobalFocusColor: boolean; hasVisColorAdjustment: boolean; -}; +} & EuiThemeVariantFlags; diff --git a/packages/eui-theme-common/src/utils.ts b/packages/eui-theme-common/src/utils.ts index 16fcd3173cc..290ba00065c 100644 --- a/packages/eui-theme-common/src/utils.ts +++ b/packages/eui-theme-common/src/utils.ts @@ -450,13 +450,19 @@ export const mergeDeep = ( */ export const getTokenName = ( prefix: string, - variant: string, + variant?: string, suffix?: string ) => { const getCapitalized = (str: string) => str.charAt(0).toUpperCase() + str.slice(1); - const colorName = variant.charAt(0).toUpperCase() + variant.slice(1); + const _suffix = suffix ? getCapitalized(suffix) : ''; + if (!variant) { + return `${prefix}${_suffix}`; + } + + const colorName = variant.charAt(0).toUpperCase() + variant.slice(1); + return `${prefix}${getCapitalized(colorName)}${_suffix}`; }; diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png index 27db870143f..44a00df5e44 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png index 5a0b94a82b5..473709cadf5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png index 0ad91465182..6ef395394ee 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png index 6078948d3a5..69cc52448a5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png index 9267ce57065..02fd43c98d9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png index 936d524154c..d09f594c02b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png index 9267ce57065..597802ca8c6 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png index f3594757073..43e4a23b300 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png index b91c16c67c1..72445d2304f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png index fbbed4e2145..9c54070d5e7 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSearchBar_EuiSearchBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png index 776b1a5b702..a773db1429e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png index 908551aad11..a28f1bbc80c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png index facc4a5f617..56fd4dfd949 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png index facc4a5f617..56fd4dfd949 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png index cfaaf47e961..3f29106901f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png index c9e8bcf7154..18412bb66a5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png index 5edb80892cc..c16eaa045c4 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png index dd2279e4cae..ac3e36f4462 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index a7f2205879d..569802b8de8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png index 46e89ca1f35..0cd83c7c537 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png index 31ad72c102f..186293e715b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png index fd0415d3441..f4070878cbd 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Draggable_Columns.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index 7cf6fc95d1d..2fe12457054 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png index 23b39eb8826..46a8a4540b5 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png index 220180ef45f..69c3ccd13b9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png index b3a6bbfde57..b27a364fea8 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png index a682f19d399..c873dedbc2c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png index 7874b47b93a..02eb3ac5aae 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png index 00fb3bf51a3..2d98a808695 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png index 918f6490a71..3b813fc094b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index ff70789584a..faa33678382 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index 9fe88d00ac3..fcf24566352 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png index 0e393b5aae1..994669c6ef2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png index 84228246206..6018ec6336d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png index 3c900985774..0a33c0f322a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png index 44b74b49d85..602d89b397f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png index 43f01c19c46..4d2bd2cc402 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png index 2ef23fae0bb..3fa8fa6d11b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png index 051db958431..0f02e530674 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png index 6c706d56d2f..ab47e71cf01 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png index 0dd35b78d5d..00f4ae1849b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png index c3d4b5a105c..4745b8e0caa 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png index 66e4ec2de1c..9e4908ba02b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png index aac16151a74..0f065f5a53b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index bb3f118b6d1..3251232cdb9 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png index 98571451d84..e7168f6d229 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png index 22d37d8c774..63d9a0bc927 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png index 65f0869c1c9..eb26d533a67 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png index 93f4b25fe0e..d70d20299a5 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png index 3dd85e36518..fecc45c24c3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png index cd619bb6b47..1a6a814c5b4 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png index 448484ac875..d989be7b306 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png index 90e39abc884..fca11014607 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png index 6a4f117d255..6d52a4b3541 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png index 90e39abc884..9bcafae9f09 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png index 0383a6503fa..c416346bdb1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png index 77bead553c4..9f66d0c13b3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBarFilters_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png index bf16814d5d7..d0234f60e02 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSearchBar_EuiSearchBar_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png index fec6f7dee08..6a9acdfeaf3 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png index 2df51313885..a2bc349f62d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png index 809f5df963b..81573a49c00 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png index 809f5df963b..81573a49c00 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png index 3b8f47fca4d..61e8c17e28b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png index b97391660dc..ef068683f15 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png index bcdc2131baa..d3c3cd3d7db 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiButton_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png index c0e20b4fe45..54f9cf80f07 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png index 4af2686896c..dbfad8b28ab 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png index c180baec682..a4c5dbc7f83 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png index 5bef70f662e..ddff0119fad 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png index 031a1d13a61..5f38ae976c6 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Draggable_Columns.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png index 445acf8ee28..5116a81cf53 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png index ccc06127dd1..396c19b0843 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Header.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png index 48fb69a7d19..650a6c0e5eb 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png index bf88f8d92ce..b0d116f701f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png index e09d97c84e6..2c1b922b778 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png index 10a10979413..42ff0c58fd9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png index cdf998adb44..9da87180427 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png index 05eedd39d76..ccf1bc9f7e2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png index dd748463e85..7727a0f7cf9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index e9bcef130e6..5e680384a22 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png index 75ffe5ab914..e69d27c1b3f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto_Below_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png index 1c7f3fccb49..42082056729 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png index eeff10ac694..3603d50a39f 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png index 656d91d6923..963c445f26c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png index 5af65eed77d..f080f46780a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png index 6ef1dbe5495..33d1f04ecf7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png index 4dc0035a674..7d07bdc5d7e 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png index a557ab7c61e..7e2b3d42e2a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Additional_Controls_Options.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png index 5f4db293fe4..da3b2fa1735 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png index 9b84e4d4898..9c44fd29a68 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png index 462fbdee6f9..bc3c28a42ea 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png index 276f17e1207..91234362154 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Full_Screen_Toggle.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index 1cb7a877201..ebe9665b8e9 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png index 1eab5010c95..7808291cad7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png index 33dca5c3b51..bb31dea1db2 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ diff --git a/packages/eui/changelogs/upcoming/8595.md b/packages/eui/changelogs/upcoming/8595.md new file mode 100644 index 00000000000..731715a485f --- /dev/null +++ b/packages/eui/changelogs/upcoming/8595.md @@ -0,0 +1,13 @@ +- Added new `refresh` design variant for button components: + - `EuiButton` + - `EuiButtonEmpty` + - `EuiButtonIcon` +- Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` +- Added new button background component tokens to Amsterdam theme: + - `background{color}Hover` + - `background{color}Active` + - `backgroundFilled{color}Hover` + - `backgroundFilled{color}Active` + - `backgroundEmpty{color}Hover` + - `backgroundEmpty{color}Active` + diff --git a/packages/eui/changelogs/upcoming/8652.md b/packages/eui/changelogs/upcoming/8652.md new file mode 100644 index 00000000000..ca869070c20 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8652.md @@ -0,0 +1,7 @@ +- Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button +- Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state +- Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states +- Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` +- Updated `EuiNotificationBadge` border radius to `2px` +- Updated `EuiBreadcrumbs` text color for `type="application"` + diff --git a/packages/eui/changelogs/upcoming/8670.md b/packages/eui/changelogs/upcoming/8670.md new file mode 100644 index 00000000000..2c2bf19866b --- /dev/null +++ b/packages/eui/changelogs/upcoming/8670.md @@ -0,0 +1,2 @@ +- Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast + diff --git a/packages/eui/src/components/badge/color_utils.ts b/packages/eui/src/components/badge/color_utils.ts index 845fd17afca..4f2167fa9b1 100644 --- a/packages/eui/src/components/badge/color_utils.ts +++ b/packages/eui/src/components/badge/color_utils.ts @@ -32,7 +32,6 @@ export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { risk: euiButtonFillColor(euiThemeContext, 'risk'), danger: euiButtonFillColor(euiThemeContext, 'danger'), accent: euiButtonFillColor(euiThemeContext, 'accent'), - accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'), disabled: { ...euiButtonColor(euiThemeContext, 'disabled'), borderColor: highContrastMode ? euiTheme.colors.textDisabled : '', @@ -63,10 +62,6 @@ export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { ? badgeColorsAccentText.backgroundColor : '', }, - accentSecondaryText: getBadgeColors( - euiThemeContext, - euiTheme.colors.textAccentSecondary - ), }; }; diff --git a/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts b/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts index 70ae9bf80c6..76f708ee5d1 100644 --- a/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts +++ b/packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts @@ -15,12 +15,20 @@ import { mathWithUnits, } from '../../../global_styling'; import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast'; -import { UseEuiTheme } from '../../../services'; +import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../../services'; import { euiBadgeColors } from '../color_utils'; export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); + const badgeColors = euiBadgeColors(euiThemeContext); + const borderRadius = isRefreshVariant + ? mathWithUnits(euiTheme.border.radius.small, (x) => x / 2) + : euiTheme.border.radius.small; return { euiNotificationBadge: css` @@ -30,7 +38,7 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => { align-items: center; vertical-align: middle; ${logicalCSS('padding-horizontal', euiTheme.size.xs)} - border-radius: ${euiTheme.border.radius.small}; + border-radius: ${borderRadius}; ${highContrastModeStyles(euiThemeContext, { preferred: ` border: ${euiTheme.border.thin}; diff --git a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts index 2d1a409f9e4..c5d9f79b0d3 100644 --- a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts +++ b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts @@ -15,9 +15,9 @@ import { logicalCSS, logicalBorderRadiusCSS, mathWithUnits, + euiButtonColor, } from '../../global_styling'; import { highContrastModeStyles } from '../../global_styling/functions/high_contrast'; -import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/button'; /** * Styles cast to inner , + class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" + > + + + + `; exports[`EuiFilterButton props badgeColor renders 1`] = ` - + class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" + > + + + + `; exports[`EuiFilterButton props grow can be turned off 1`] = ` - + class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" + > + + + + `; exports[`EuiFilterButton props iconType and iconSide renders 1`] = ` - + class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon" + > + + + + + `; exports[`EuiFilterButton props isDisabled renders 1`] = ` - + class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" + > + + + + `; exports[`EuiFilterButton props isSelected renders 1`] = ` - + class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" + > + + + + `; exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`] = ` - + + `; exports[`EuiFilterButton props numFilters renders 1`] = ` - + + `; exports[`EuiFilterButton props type renders 1`] = ` - + class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" + > + + + + `; exports[`EuiFilterButton props withNext renders 1`] = ` - + class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" + > + + + + `; exports[`EuiFilterButton renders 1`] = ` - + class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content" + > + + + + `; exports[`EuiFilterButton renders zero properly 1`] = ` - + + `; diff --git a/packages/eui/src/components/filter_group/filter_button.stories.tsx b/packages/eui/src/components/filter_group/filter_button.stories.tsx index 704ea57967c..2770d6415e7 100644 --- a/packages/eui/src/components/filter_group/filter_button.stories.tsx +++ b/packages/eui/src/components/filter_group/filter_button.stories.tsx @@ -26,6 +26,7 @@ const meta: Meta = { color: 'text', badgeColor: 'accent', grow: true, + isToggle: false, isSelected: false, isDisabled: false, withNext: false, @@ -66,29 +67,28 @@ export const MultipleButtons: Story = { export const FullWidthAndGrow: Story = { render: ({ ...args }) => ( - + Filter - + On - + Off - + Off Selected filter - + Filter with a very long name diff --git a/packages/eui/src/components/filter_group/filter_button.styles.ts b/packages/eui/src/components/filter_group/filter_button.styles.ts index 7025a0accdc..5041bbbea89 100644 --- a/packages/eui/src/components/filter_group/filter_button.styles.ts +++ b/packages/eui/src/components/filter_group/filter_button.styles.ts @@ -8,26 +8,44 @@ import { css } from '@emotion/react'; -import { UseEuiTheme } from '../../services'; +import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../services'; import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate, + highContrastModeStyles, + preventForcedColors, + euiButtonEmptyColor, } from '../../global_styling'; +import { cssSupportsHasWithNextSibling } from '../../global_styling/functions/supports'; import { euiFormVariables } from '../form/form.styles'; -export const euiFilterButtonDisplay = ({ euiTheme }: UseEuiTheme) => { +export const euiFilterButtonDisplay = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); + return { flex: '1 1 auto', - minInlineSize: mathWithUnits(euiTheme.size.base, (x) => x * 3), + minInlineSize: mathWithUnits( + euiTheme.size.base, + (x) => x * (isRefreshVariant ? 2.75 : 3) + ), }; }; export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); const { controlHeight, borderColor } = euiFormVariables(euiThemeContext); + const selectedSelector = '.euiFilterButton-isSelected'; const border = `${euiTheme.border.width.thin} solid ${borderColor}`; // Pseudo elements create borders without affecting width. We also prefer them @@ -52,13 +70,24 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => { } `; - return { - euiFilterButton: css` - position: relative; - ${euiFilterButtonDisplay(euiThemeContext)} + const buttonStyles = isRefreshVariant + ? ` + ${logicalCSS('width', '100%')} + + &:not(${selectedSelector}) { + &:hover, + &:active { + .euiFilterButton__notification[class*="subdued"] { + background-color: ${ + euiTheme.components.filterButtonBadgeBackgroundHover + } + } + } + } + ` + : ` ${logicalCSS('height', controlHeight)} border-radius: 0; - ${leftBorder} ${bottomBorder} @@ -73,19 +102,96 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => { text-decoration: underline; } } + `; - &:focus-visible { - outline-offset: -${euiTheme.focus.width}; + const toggleTypeStyles = isRefreshVariant + ? ` + ${euiFilterButtonDisplay(euiThemeContext)}; + + ${highContrastModeStyles(euiThemeContext, { + forced: ` + &:is(${selectedSelector}) { + ${preventForcedColors(euiThemeContext)} + color: ${euiTheme.colors.emptyShade}; + background-color: ${euiTheme.colors.fullShade}; + } + `, + })} + ` + : ` + font-weight: ${euiTheme.font.weight.medium}; + padding: 0; + + &:is(${selectedSelector}) { + color: ${euiButtonEmptyColor(euiThemeContext, 'text').color}; + background-color: transparent; + font-weight: ${euiTheme.font.weight.bold}; + } + `; + + const withNextSelector = isRefreshVariant + ? '& + .euiFilterButton__wrapper' + : '.euiFilterButton__wrapper:has(&) + .euiFilterButton__wrapper'; + // handles display of borders between buttons + const withNextStyles = isRefreshVariant + ? ` + &::before { + border: none; + } + + ${cssSupportsHasWithNextSibling( + ` + &:has(+ :not(&)) { + ${logicalCSS('padding-right', '0')} + } + ` + )} + ` + : ` + .euiFilterButton { + &::before { + border: none; + } } + `; + + return { + euiFilterButton: css` + ${!isRefreshVariant && euiFilterButtonDisplay(euiThemeContext)}; + position: relative; + + ${buttonStyles} `, + buttonType: { + default: css` + ${isRefreshVariant && + ` + border-radius: 0; + + &:focus-visible { + z-index: 1; + outline-offset: -${euiTheme.border.width.thick}; + border-radius: ${euiTheme.border.radius.small}; + transition: none; + } + `} + `, + toggle: css` + &:focus-visible { + outline-offset: ${mathWithUnits(euiTheme.focus.width, (x) => + isRefreshVariant ? x / 2 : x * -1 + )}; + } + + ${toggleTypeStyles} + `, + }, withNext: css` - & + .euiFilterButton { + ${withNextSelector} { ${logicalCSS('margin-left', `-${euiTheme.size.xs}`)} /* Remove just the left faux border */ - &::before { - display: none; - } + ${withNextStyles} } `, noGrow: css` @@ -98,15 +204,96 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => { )} `, hasActiveFilters: css` - font-weight: ${euiTheme.font.weight.bold}; + font-weight: ${isRefreshVariant + ? euiTheme.font.weight.regular + : euiTheme.font.weight.bold}; + `, + }; +}; + +export const euiFilterButtonWrapperStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); + + const { borderColor } = euiFormVariables(euiThemeContext); + const border = `${euiTheme.border.width.thin} solid ${borderColor}`; + + // Pseudo elements create borders without affecting width. We also prefer them + // over box-shadow for Windows high contrast theme compatibility + const leftBorder = ` + &::before { + content: ''; + position: absolute; + inset: 0; + ${logicalCSS('border-left', border)} + + pointer-events: none; + } + `; + // Bottom borders are needed for responsive flex-wrap behavior + const bottomBorder = ` + &::after { + content: ''; + position: absolute; + inset: 0; + ${logicalCSS('border-bottom', border)} + pointer-events: none; + } + `; + + return { + wrapper: css` + ${euiFilterButtonDisplay(euiThemeContext)} + position: relative; + display: flex; + align-items: center; + + ${isRefreshVariant && + ` + ${leftBorder} + ${bottomBorder} + `} + + ${logicalCSS('padding-vertical', euiTheme.border.width.thin)} + `, + hasToggle: css` + ${logicalCSS( + 'padding-horizontal', + isRefreshVariant ? euiTheme.border.width.thin : '0' + )} + + /* removes right padding for toggle buttons that have a right divider border */ + ${cssSupportsHasWithNextSibling( + ` + &:not([class*="withNext"]):has(+ :not(&)) { + ${logicalCSS('padding-right', '0')} + } + ` + )} `, }; }; -export const euiFilterButtonChildStyles = ({ euiTheme }: UseEuiTheme) => { +export const euiFilterButtonChildStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); + return { content: { - euiFilterButton__content: css``, + euiFilterButton__content: css` + ${isRefreshVariant && + ` + .euiThemeProvider { + display: inline-flex; + } + `} + `, hasIcon: css` /* Align the dropdown arrow/caret to the right */ & > .euiIcon:last-child { @@ -122,13 +309,23 @@ export const euiFilterButtonChildStyles = ({ euiTheme }: UseEuiTheme) => { hasNotification: css` ${logicalCSS( 'min-width', - mathWithUnits(euiTheme.size.base, (x) => x * 3) + mathWithUnits( + euiTheme.size.base, + (x) => x * (isRefreshVariant ? 2 : 3) + ) )} `, }, notification: { euiFilterButton__notification: css` cursor: inherit; + /* ensures correct styles in forced high contrast mode as its wrapper uses forced-color-adjust: none */ + forced-color-adjust: auto; + + /* uses & to ensure override by same selector specificity instead of using !important */ + & { + transition: none; + } `, disabled: css` opacity: 0.5; diff --git a/packages/eui/src/components/filter_group/filter_button.tsx b/packages/eui/src/components/filter_group/filter_button.tsx index 924dc4ecdd1..8b05d98c1ec 100644 --- a/packages/eui/src/components/filter_group/filter_button.tsx +++ b/packages/eui/src/components/filter_group/filter_button.tsx @@ -6,11 +6,17 @@ * Side Public License, v 1. */ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, MouseEvent } from 'react'; import classNames from 'classnames'; -import { useEuiMemoizedStyles } from '../../services'; import { _EuiButtonColor } from '../../global_styling'; +import { + EuiThemeProvider, + useEuiMemoizedStyles, + useEuiTheme, + useGeneratedHtmlId, + useEuiThemeRefreshVariant, +} from '../../services'; import { useEuiI18n } from '../i18n'; import { useInnerText } from '../inner_text'; import { DistributiveOmit } from '../common'; @@ -20,12 +26,15 @@ import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button/button_empty'; import { euiFilterButtonStyles, + euiFilterButtonWrapperStyles, euiFilterButtonChildStyles, } from './filter_button.styles'; +import { EuiButtonGroupButton } from '../button/button_group/button_group_button'; +import { _compressedButtonFocusColors } from '../button/button_group/button_group_button.styles'; export type EuiFilterButtonProps = { /** - * Bolds the button if true + * Highlights active filters */ hasActiveFilters?: boolean; /** @@ -39,7 +48,15 @@ export type EuiFilterButtonProps = { */ numActiveFilters?: number; /** - * Applies a visual state to the button useful when using with a popover. + * Switches between toggle and regular button + * @default false + */ + isToggle?: boolean; + /** + * Applies a visual state to the button. + * Automatically applies `aria-pressed` when used with `isToggle={true}`. + * Otherwise applies `aria-expanded` when used with `isToggle={false}` and + * `iconType="arrowDown"` as trigger button for e.g. a popover. */ isSelected?: boolean; /** @@ -63,7 +80,10 @@ export type EuiFilterButtonProps = { * - warning */ color?: _EuiButtonColor; -} & DistributiveOmit; +} & DistributiveOmit< + EuiButtonEmptyProps, + 'flush' | 'size' | 'color' | 'isSelected' +>; export const EuiFilterButton: FunctionComponent = ({ children, @@ -75,6 +95,7 @@ export const EuiFilterButton: FunctionComponent = ({ hasActiveFilters, numFilters, numActiveFilters, + isToggle, isDisabled, isSelected, type = 'button', @@ -84,30 +105,65 @@ export const EuiFilterButton: FunctionComponent = ({ contentProps, ...rest }) => { + const id = useGeneratedHtmlId({ prefix: 'filter-button' }); const numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined const numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0; + const euiThemeContext = useEuiTheme(); + const { colorMode } = euiThemeContext; + + const isRefreshVariant = useEuiThemeRefreshVariant('buttonVariant'); + + // assumption about type of usage based on icon usage + // requires manual override to apply correct aria attributes for more custom usages + const isCollapsible = !isToggle && iconType === 'arrowDown'; + // NOTE: in Amsterdam `hasActiveFilters` applies selected styling while `isSelected` does not. + // With Borealis this is more granular as EuiFilterButton now supports proper toggle buttons next to regular buttons + const isExpanded = isCollapsible && (isSelected ?? hasActiveFilters); + const styles = useEuiMemoizedStyles(euiFilterButtonStyles); + const focusColorStyles = useEuiMemoizedStyles(_compressedButtonFocusColors); + + const toggleVariantStyles = isRefreshVariant + ? [ + isToggle && styles.buttonType.toggle, + !isToggle && !isDisabled && focusColorStyles[color], + !isToggle && styles.buttonType.default, + ] + : [isToggle && styles.buttonType.toggle]; + const cssStyles = [ styles.euiFilterButton, - withNext && styles.withNext, - !grow && styles.noGrow, + !isRefreshVariant && withNext && styles.withNext, hasActiveFilters && styles.hasActiveFilters, + ...toggleVariantStyles, + ]; + + const wrapperStyles = useEuiMemoizedStyles(euiFilterButtonWrapperStyles); + + const wrapperCssStyles = [ + wrapperStyles.wrapper, + isRefreshVariant && withNext && styles.withNext, numFiltersDefined && styles.hasNotification, + isToggle && wrapperStyles.hasToggle, + !grow && styles.noGrow, ]; + const { content: contentStyles, text: textStyles, notification: notificationStyles, } = useEuiMemoizedStyles(euiFilterButtonChildStyles); + const wrapperClasses = classNames('euiFilterButton__wrapper'); const classes = classNames( 'euiFilterButton', { 'euiFilterButton-isSelected': isSelected, 'euiFilterButton-hasActiveFilters': hasActiveFilters, 'euiFilterButton-hasNotification': numFiltersDefined, + 'euiFilterButton-isToggle': isRefreshVariant && isToggle, }, className ); @@ -132,6 +188,30 @@ export const EuiFilterButton: FunctionComponent = ({ isDisabled && notificationStyles.disabled, ]; + const badgeContent = ( + + {badgeCount} + + ); + + const badgeElement = + showBadge && + (isRefreshVariant ? ( + + {badgeContent} + + ) : ( + badgeContent + )); + /** * Text */ @@ -150,7 +230,21 @@ export const EuiFilterButton: FunctionComponent = ({ const dataText = children && typeof children === 'string' ? children : innerText; - return ( + const textContent = ( + + {children} + + ); + + /** Button element */ + const button = ( = ({ contentProps?.css, ], }} + aria-expanded={isCollapsible ? isExpanded : undefined} {...rest} > - - {children} - - - {showBadge && ( - - {badgeCount} - - )} + {textContent} + {badgeElement} ); + + const onToggleClick = ( + e: MouseEvent + ) => { + rest?.onClick?.(e); + }; + + return ( +
+ {isToggle && !isCollapsible ? ( + + {textContent} + {badgeElement} + + } + className={classes} + css={cssStyles} + color={color} + isSelected={isSelected} + size="compressed" + isDisabled={isDisabled} + iconSide={iconSide} + iconType={iconType} + isIconOnly={false} + type={type} + textProps={false} + contentProps={{ + ...contentProps, + css: [ + contentStyles.euiFilterButton__content, + iconType && contentStyles.hasIcon, + contentProps?.css, + ], + }} + {...rest} + onClick={onToggleClick} + /> + ) : ( + button + )} +
+ ); }; diff --git a/packages/eui/src/components/filter_group/filter_group.stories.tsx b/packages/eui/src/components/filter_group/filter_group.stories.tsx index 3262890a317..e4211925d54 100644 --- a/packages/eui/src/components/filter_group/filter_group.stories.tsx +++ b/packages/eui/src/components/filter_group/filter_group.stories.tsx @@ -29,8 +29,9 @@ type Story = StoryObj; export const Playground: Story = { render: ({ ...args }) => ( + Toggle Filter - Filter + Selection Filter ), diff --git a/packages/eui/src/components/filter_group/filter_group.styles.ts b/packages/eui/src/components/filter_group/filter_group.styles.ts index 407742a5fff..4c6a82a0c1b 100644 --- a/packages/eui/src/components/filter_group/filter_group.styles.ts +++ b/packages/eui/src/components/filter_group/filter_group.styles.ts @@ -9,7 +9,7 @@ import { CSSProperties } from 'react'; import { css } from '@emotion/react'; -import { UseEuiTheme } from '../../services'; +import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../services'; import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling'; import { highContrastModeStyles } from '../../global_styling/functions/high_contrast'; import { euiFormVariables } from '../form/form.styles'; @@ -18,29 +18,61 @@ import { euiFilterButtonDisplay } from './filter_button.styles'; export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); const { backgroundColor, borderColor, controlBorderRadius, + controlHeight, controlCompressedBorderRadius, controlCompressedHeight, } = euiFormVariables(euiThemeContext); + const borderRadius = isRefreshVariant + ? euiTheme.border.radius.small + : controlBorderRadius; + + const borderRadiusCompressed = isRefreshVariant + ? euiTheme.border.radius.small + : controlCompressedBorderRadius; + + const borderStyle = isRefreshVariant + ? ` + /* Adds the border on a pseudo element to prevent height differences between wrapper and buttons. + Uses ::after to ensure overlap and prevents blocking by setting pointer-events: none */ + &::after { + content: ''; + position: absolute; + inset: 0; + border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}; + border-radius: inherit; + pointer-events: none; + } + ` + : ` + ${highContrastModeStyles(euiThemeContext, { + none: `box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${borderColor};`, + forced: `border: ${euiTheme.border.thin};`, + })} + `; + return { euiFilterGroup: css` + ${isRefreshVariant && `position: relative;`} display: inline-flex; ${logicalCSS('max-width', '100%')} overflow: hidden; background-color: ${backgroundColor}; - ${highContrastModeStyles(euiThemeContext, { - none: `box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${borderColor};`, - forced: `border: ${euiTheme.border.thin};`, - })} + + ${borderStyle} /* Account for popover or tooltip wrappers around EuiFilterButtons */ - > *:not(.euiFilterButton) { + > *:not(.euiFilterButton__wrapper, .euiFilterButton) { ${euiFilterButtonDisplay(euiThemeContext)} } /* Force popover anchors to expand */ @@ -55,25 +87,78 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => { /* Force all tiny screens to take up the entire width */ display: flex; - .euiFilterButton { + .euiFilterButton__wrapper { flex-grow: 1; } + + ${isRefreshVariant && + ` + .euiPopover:focus-within { + z-index: 1; + } + + .euiFilterButton__wrapper { + flex-grow: 1; + } + `} } `, fullWidth: css` display: flex; `, uncompressed: css` - border-radius: ${controlBorderRadius}; - ${buttonChildrenBorderRadii(controlBorderRadius)} + border-radius: ${borderRadius}; + + .euiFilterButton__wrapper { + ${logicalCSS('height', controlHeight)} + } + + .euiFilterButton { + ${logicalCSS('height', controlHeight)} + } + + ${!isRefreshVariant && buttonChildrenBorderRadii(borderRadius)} + ${isRefreshVariant && + ` + .euiFilterButton-isToggle { + ${logicalCSS( + 'height', + mathWithUnits( + [controlHeight, euiTheme.size.xxs], + (x, y) => x - 3 * y + ) + )} + } + `} `, compressed: css` - border-radius: ${controlCompressedBorderRadius}; - ${buttonChildrenBorderRadii(controlCompressedBorderRadius)} + border-radius: ${borderRadiusCompressed}; + ${!isRefreshVariant && buttonChildrenBorderRadii(borderRadiusCompressed)} .euiFilterButton { - ${logicalCSS('height', controlCompressedHeight)} + ${logicalCSS( + 'height', + isRefreshVariant + ? mathWithUnits( + [controlCompressedHeight, euiTheme.border.width.thin], + (x, y) => x - 2 * y + ) + : controlCompressedHeight + )} } + + ${isRefreshVariant && + ` + .euiFilterButton-isToggle { + ${logicalCSS( + 'height', + mathWithUnits( + [controlCompressedHeight, euiTheme.size.xxs], + (x, y) => x - 3 * y + ) + )} + } + `} `, /** * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers diff --git a/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap index c39d00b2a02..148114a41d9 100644 --- a/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap +++ b/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap @@ -139,48 +139,58 @@ exports[`SearchBar render - provided query, filters 1`] = `
-
+
+
+ +
+
diff --git a/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap b/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap index 078e7691eae..cc689f4346c 100644 --- a/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap +++ b/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap @@ -10,47 +10,57 @@ exports[`EuiSearchBarFilters render - with filters 1`] = `
-
+
+
+ +
+
`; diff --git a/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.tsx.snap b/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.tsx.snap index 85a70db08b2..3e6a8580ca5 100644 --- a/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.tsx.snap +++ b/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.tsx.snap @@ -1,81 +1,101 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`FieldValueToggleFilter render - active 1`] = ` - + + `; exports[`FieldValueToggleFilter render - active negated - custom negated name 1`] = ` - + + `; exports[`FieldValueToggleFilter render - active negated 1`] = ` - + + `; exports[`FieldValueToggleFilter renders 1`] = ` - + + `; diff --git a/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap b/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap index 838f9e4575d..dcba52df270 100644 --- a/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap +++ b/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap @@ -1,81 +1,101 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TermToggleGroupFilter render - active 1`] = ` - + + `; exports[`TermToggleGroupFilter render - active negated - custom negated name 1`] = ` - + + `; exports[`TermToggleGroupFilter render - active negated 1`] = ` - + + `; exports[`TermToggleGroupFilter renders 1`] = ` - + + `; diff --git a/packages/eui/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap b/packages/eui/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap index 48522efff02..12555d6978f 100644 --- a/packages/eui/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap +++ b/packages/eui/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap @@ -1,21 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`IsFilter render 1`] = ` - + + `; diff --git a/packages/eui/src/components/search_bar/filters/field_value_selection_filter.tsx b/packages/eui/src/components/search_bar/filters/field_value_selection_filter.tsx index cc51874508a..54bcacd5f7b 100644 --- a/packages/eui/src/components/search_bar/filters/field_value_selection_filter.tsx +++ b/packages/eui/src/components/search_bar/filters/field_value_selection_filter.tsx @@ -309,6 +309,7 @@ export class FieldValueSelectionFilter extends Component< {name} diff --git a/packages/eui/src/components/search_bar/filters/field_value_toggle_group_filter.tsx b/packages/eui/src/components/search_bar/filters/field_value_toggle_group_filter.tsx index 6cc9c335238..9a4e9011a24 100644 --- a/packages/eui/src/components/search_bar/filters/field_value_toggle_group_filter.tsx +++ b/packages/eui/src/components/search_bar/filters/field_value_toggle_group_filter.tsx @@ -78,9 +78,11 @@ export class FieldValueToggleGroupFilter extends Component {name} diff --git a/packages/eui/src/components/search_bar/filters/is_filter.tsx b/packages/eui/src/components/search_bar/filters/is_filter.tsx index e1dfe107442..96b5cd26bf9 100644 --- a/packages/eui/src/components/search_bar/filters/is_filter.tsx +++ b/packages/eui/src/components/search_bar/filters/is_filter.tsx @@ -59,8 +59,10 @@ export class IsFilter extends Component { return ( {name} diff --git a/packages/eui/src/components/search_bar/search_bar.a11y.tsx b/packages/eui/src/components/search_bar/search_bar.a11y.tsx index a1e07543ef5..666c0321f14 100644 --- a/packages/eui/src/components/search_bar/search_bar.a11y.tsx +++ b/packages/eui/src/components/search_bar/search_bar.a11y.tsx @@ -202,7 +202,7 @@ describe('EuiSearchBar', () => { }); it('has zero violations after filtering on Open items', () => { - cy.get('button.euiButtonEmpty').first().focus(); + cy.get('button.euiFilterButton').first().focus(); cy.realPress('Enter'); cy.get('table.euiTable tbody').find('tr').should('have.length', 3); cy.checkAxe(); @@ -214,12 +214,12 @@ describe('EuiSearchBar', () => { }); it('has zero violations after filtering by Tags', () => { - cy.get('button.euiButtonEmpty').last().focus(); + cy.get('button.euiFilterButton').last().focus(); cy.realPress('Enter'); cy.realPress('ArrowDown'); cy.realPress('Enter'); cy.realPress('Escape'); - cy.get('button.euiButtonEmpty').last().should('have.focus'); + cy.get('button.euiFilterButton').last().should('have.focus'); cy.get('table.euiTable tbody').find('tr').should('have.length', 3); cy.checkAxe(); cy.repeatRealPress(['Shift', 'Tab'], 3); diff --git a/packages/eui/src/global_styling/mixins/__snapshots__/_button.test.ts.snap b/packages/eui/src/global_styling/mixins/__snapshots__/_button.test.ts.snap index 45a813f8503..f5eff7acb2c 100644 --- a/packages/eui/src/global_styling/mixins/__snapshots__/_button.test.ts.snap +++ b/packages/eui/src/global_styling/mixins/__snapshots__/_button.test.ts.snap @@ -4,72 +4,374 @@ exports[`useEuiButtonColorCSS base 1`] = ` { "accent": { "map": undefined, - "name": "1s9ak2j-displaysColorsMap-display-color", + "name": "t2u6im-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#a11262;background-color:#FDDDE9;;;label:base-accent;", + "styles": "color:#a11262;background-color:#FDDDE9; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(229,74,145, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(229,74,145, 0.16); + } + } + + false + ;;label:base-accent;", "toString": [Function], }, "accentSecondary": { "map": undefined, - "name": "l7co5e-displaysColorsMap-display-color", + "name": "q87o3e-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#046e6b;background-color:#C9F3F0;;;label:base-accentSecondary;", + "styles": "color:#046e6b;background-color:#C9F3F0; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(0,176,170, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(0,176,170, 0.16); + } + } + + false + ;;label:base-accentSecondary;", "toString": [Function], }, "danger": { "map": undefined, - "name": "imzzne-displaysColorsMap-display-color", + "name": "1g7pp6a-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#a71627;background-color:#FDDDD8;;;label:base-danger;", + "styles": "color:#a71627;background-color:#FDDDD8; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(238,76,72, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(238,76,72, 0.16); + } + } + + false + ;;label:base-danger;", "toString": [Function], }, "disabled": { "map": undefined, - "name": "w9bf0z-displaysColorsMap-display-color", + "name": "up0w9g-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#798EAF;background-color:#ECF1F9;;;label:base-disabled;", + "styles": "color:#798EAF;background-color:#ECF1F9; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: undefined; + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: undefined; + } + } + + false + ;;label:base-disabled;", "toString": [Function], }, "neutral": { "map": undefined, - "name": "1cygr32-displaysColorsMap-display-color", + "name": "1uzxovy-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#0f658a;background-color:#CFEEF7;;;label:base-neutral;", + "styles": "color:#0f658a;background-color:#CFEEF7; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(13,161,201, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(13,161,201, 0.16); + } + } + + false + ;;label:base-neutral;", "toString": [Function], }, "primary": { "map": undefined, - "name": "nzkzxt-displaysColorsMap-display-color", + "name": "yk1sqq-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#1750ba;background-color:#D9E8FF;;;label:base-primary;", + "styles": "color:#1750ba;background-color:#D9E8FF; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(55,136,255, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(55,136,255, 0.16); + } + } + + false + ;;label:base-primary;", "toString": [Function], }, "risk": { "map": undefined, - "name": "16ebbxg-displaysColorsMap-display-color", + "name": "gia4ur-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#9e3a16;background-color:#FFDEBF;;;label:base-risk;", + "styles": "color:#9e3a16;background-color:#FFDEBF; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(252,133,68, 0.16); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(252,133,68, 0.2); + } + } + + false + ;;label:base-risk;", "toString": [Function], }, "success": { "map": undefined, - "name": "nkw4q7-displaysColorsMap-display-color", + "name": "1wzbnhz-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#09724d;background-color:#C9F3E3;;;label:base-success;", + "styles": "color:#09724d;background-color:#C9F3E3; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(4,174,126, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(4,174,126, 0.16); + } + } + + false + ;;label:base-success;", "toString": [Function], }, "text": { "map": undefined, - "name": "1qxdqy4-displaysColorsMap-display-color", + "name": "4mvtb6-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#1d2a3e;background-color:#E3E8F2;;;label:base-text;", + "styles": "color:#1d2a3e;background-color:#FFFFFF; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(23,80,186, 0.08); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(23,80,186, 0.12); + } + } + + + border: 1px solid #CAD3E2; + + ;;label:base-text;", "toString": [Function], }, "warning": { "map": undefined, - "name": "1cacn07-displaysColorsMap-display-color", + "name": "3ntpwv-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#6a4906;background-color:#FDE9B5;;;label:base-warning;", + "styles": "color:#6a4906;background-color:#FDE9B5; + + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(234,174,1, 0.16); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(234,174,1, 0.2); + } + } + + false + ;;label:base-warning;", "toString": [Function], }, } @@ -79,72 +381,342 @@ exports[`useEuiButtonColorCSS empty 1`] = ` { "accent": { "map": undefined, - "name": "6nx0ov-displaysColorsMap-display-color", + "name": "acar8m-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#a11262;&:focus,&:active{background-color:rgba(23,80,186, 0.04);};label:empty-accent;", + "styles": "color:#a11262; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(229,74,145, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(229,74,145, 0.16); + } + } + ;;label:empty-accent;", "toString": [Function], }, "accentSecondary": { "map": undefined, - "name": "eugem9-displaysColorsMap-display-color", + "name": "ci2qqz-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#046e6b;&:focus,&:active{background-color:rgba(23,80,186, 0.04);};label:empty-accentSecondary;", + "styles": "color:#046e6b; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(0,176,170, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(0,176,170, 0.16); + } + } + ;;label:empty-accentSecondary;", "toString": [Function], }, "danger": { "map": undefined, - "name": "tlly31-displaysColorsMap-display-color", + "name": "ttz2kz-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#a71627;&:focus,&:active{background-color:rgba(23,80,186, 0.04);};label:empty-danger;", + "styles": "color:#a71627; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(238,76,72, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(238,76,72, 0.16); + } + } + ;;label:empty-danger;", "toString": [Function], }, "disabled": { "map": undefined, - "name": "1riraik-displaysColorsMap-display-color", + "name": "ioqbxh-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#798EAF;&:focus,&:active{background-color:transparent;};label:empty-disabled;", + "styles": "color:#798EAF; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: undefined; + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: undefined; + } + } + ;;label:empty-disabled;", "toString": [Function], }, "neutral": { "map": undefined, - "name": "11o72vc-displaysColorsMap-display-color", + "name": "1muhyse-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#0f658a;&:focus,&:active{background-color:rgba(23,80,186, 0.04);};label:empty-neutral;", + "styles": "color:#0f658a; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(13,161,201, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(13,161,201, 0.16); + } + } + ;;label:empty-neutral;", "toString": [Function], }, "primary": { "map": undefined, - "name": "134brx-displaysColorsMap-display-color", + "name": "8pznf8-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#1750ba;&:focus,&:active{background-color:rgba(23,80,186, 0.04);};label:empty-primary;", + "styles": "color:#1750ba; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(55,136,255, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(55,136,255, 0.16); + } + } + ;;label:empty-primary;", "toString": [Function], }, "risk": { "map": undefined, - "name": "1vuw7lh-displaysColorsMap-display-color", + "name": "19334xv-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#9e3a16;&:focus,&:active{background-color:rgba(23,80,186, 0.04);};label:empty-risk;", + "styles": "color:#9e3a16; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(252,133,68, 0.16); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(252,133,68, 0.2); + } + } + ;;label:empty-risk;", "toString": [Function], }, "success": { "map": undefined, - "name": "1sisv9i-displaysColorsMap-display-color", + "name": "1kafuaw-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#09724d;&:focus,&:active{background-color:rgba(23,80,186, 0.04);};label:empty-success;", + "styles": "color:#09724d; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(4,174,126, 0.12); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(4,174,126, 0.16); + } + } + ;;label:empty-success;", "toString": [Function], }, "text": { "map": undefined, - "name": "pyzzr1-displaysColorsMap-display-color", + "name": "1j2ow8l-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#1d2a3e;&:focus,&:active{background-color:rgba(23,80,186, 0.04);};label:empty-text;", + "styles": "color:#1d2a3e; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(23,80,186, 0.08); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(23,80,186, 0.12); + } + } + ;;label:empty-text;", "toString": [Function], }, "warning": { "map": undefined, - "name": "ou8n3e-displaysColorsMap-display-color", + "name": "16o0n91-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#6a4906;&:focus,&:active{background-color:rgba(23,80,186, 0.04);};label:empty-warning;", + "styles": "color:#6a4906; + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: rgba(234,174,1, 0.16); + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + inline-size: 100%; + block-size: 100%; + + content: ''; + position: absolute; + inset: 0; + background-color: rgba(234,174,1, 0.2); + } + } + ;;label:empty-warning;", "toString": [Function], }, } @@ -154,72 +726,152 @@ exports[`useEuiButtonColorCSS fill 1`] = ` { "accent": { "map": undefined, - "name": "1x15kz9-displaysColorsMap-display-color", + "name": "g1i4pl-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#FFFFFF;background-color:#BC1E70;outline-color:#07101F;;label:fill-accent;", + "styles": "color:#FFFFFF;background-color:#BC1E70;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: #A11262; + } + + &:active:not(:disabled) { + background-color: #831652; + } + ;;label:fill-accent;", "toString": [Function], }, "accentSecondary": { "map": undefined, - "name": "nn2r8y-displaysColorsMap-display-color", + "name": "b8zumr-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#FFFFFF;background-color:#008B87;outline-color:#07101F;;label:fill-accentSecondary;", + "styles": "color:#FFFFFF;background-color:#008B87;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: #047471; + } + + &:active:not(:disabled) { + background-color: #065B58; + } + ;;label:fill-accentSecondary;", "toString": [Function], }, "danger": { "map": undefined, - "name": "1e8fk7p-displaysColorsMap-display-color", + "name": "azzo4j-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#FFFFFF;background-color:#C61E25;outline-color:#07101F;;label:fill-danger;", + "styles": "color:#FFFFFF;background-color:#C61E25;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: #A71627; + } + + &:active:not(:disabled) { + background-color: #7F1F27; + } + ;;label:fill-danger;", "toString": [Function], }, "disabled": { "map": undefined, - "name": "1mgqlj7-displaysColorsMap-display-color", + "name": "105tcc3-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#798EAF;background-color:#ECF1F9;outline-color:#07101F;;label:fill-disabled;", + "styles": "color:#798EAF;background-color:#ECF1F9;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: undefined; + } + + &:active:not(:disabled) { + background-color: undefined; + } + ;;label:fill-disabled;", "toString": [Function], }, "neutral": { "map": undefined, - "name": "55fmkx-displaysColorsMap-display-color", + "name": "dfjdt8-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#FFFFFF;background-color:#1C8CB5;outline-color:#07101F;;label:fill-neutral;", + "styles": "color:#FFFFFF;background-color:#1C8CB5;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: #0F658A; + } + + &:active:not(:disabled) { + background-color: #055476; + } + ;;label:fill-neutral;", "toString": [Function], }, "primary": { "map": undefined, - "name": "jlyla4-displaysColorsMap-display-color", + "name": "1kc1763-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#FFFFFF;background-color:#0B64DD;outline-color:#07101F;;label:fill-primary;", + "styles": "color:#FFFFFF;background-color:#0B64DD;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: #1750BA; + } + + &:active:not(:disabled) { + background-color: #154399; + } + ;;label:fill-primary;", "toString": [Function], }, "risk": { "map": undefined, - "name": "yiryfu-displaysColorsMap-display-color", + "name": "1c96cw4-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#FFFFFF;background-color:#ED6723;outline-color:#07101F;;label:fill-risk;", + "styles": "color:#FFFFFF;background-color:#ED6723;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: #DB541B; + } + + &:active:not(:disabled) { + background-color: #C24411; + } + ;;label:fill-risk;", "toString": [Function], }, "success": { "map": undefined, - "name": "1vkmljm-displaysColorsMap-display-color", + "name": "kg8lp3-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#FFFFFF;background-color:#008A5E;outline-color:#07101F;;label:fill-success;", + "styles": "color:#FFFFFF;background-color:#008A5E;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: #09724D; + } + + &:active:not(:disabled) { + background-color: #0C5A3F; + } + ;;label:fill-success;", "toString": [Function], }, "text": { "map": undefined, - "name": "d8tzvz-displaysColorsMap-display-color", + "name": "9ey25n-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#FFFFFF;background-color:#5A6D8C;outline-color:#07101F;;label:fill-text;", + "styles": "color:#FFFFFF;background-color:#5A6D8C;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: #485975; + } + + &:active:not(:disabled) { + background-color: #384861; + } + ;;label:fill-text;", "toString": [Function], }, "warning": { "map": undefined, - "name": "16cnufy-displaysColorsMap-display-color", + "name": "dz0udx-displaysColorsMap-display-color", "next": undefined, - "styles": "color:#6A4906;background-color:#FACB3D;outline-color:#07101F;;label:fill-warning;", + "styles": "color:#6A4906;background-color:#FACB3D;outline-color:#07101F; + &:hover:not(:disabled) { + background-color: #F5BC00; + } + + &:active:not(:disabled) { + background-color: #EAAE01; + } + ;;label:fill-warning;", "toString": [Function], }, } @@ -228,17 +880,9 @@ exports[`useEuiButtonColorCSS fill 1`] = ` exports[`useEuiButtonFocusCSS 1`] = ` { "map": undefined, - "name": "1s8jae7-focusCSS", - "next": { - "name": "animation-70pju1", - "next": undefined, - "styles": "@keyframes animation-70pju1{ - 50% { - transform: translateY(1px); - } -}", - }, - "styles": "@media screen and (prefers-reduced-motion: no-preference){transition:transform 250ms ease-in-out,background-color 250ms ease-in-out;&:hover:not(:disabled){transform:translateY(-1px);}&:focus{animation:animation-70pju1 250ms cubic-bezier(.34, 1.61, .7, 1);}&:active:not(:disabled){transform:translateY(1px);}};", + "name": "1w5psrn-focusCSS", + "next": undefined, + "styles": ";", "toString": [Function], } `; diff --git a/packages/eui/src/global_styling/mixins/_button.ts b/packages/eui/src/global_styling/mixins/_button.ts index 41a9bd4af85..68b82a03e9c 100644 --- a/packages/eui/src/global_styling/mixins/_button.ts +++ b/packages/eui/src/global_styling/mixins/_button.ts @@ -11,13 +11,16 @@ import { _EuiThemeButtonColors, getTokenName, euiCanAnimate, + mathWithUnits, } from '@elastic/eui-theme-common'; import { makeHighContrastColor, UseEuiTheme, useEuiMemoizedStyles, + isEuiThemeRefreshVariant, } from '../../services'; +import { highContrastModeStyles, logicalCSS } from '../functions'; /** Tentative usage; these exist only to be used as button directly when used within other components */ export const SEVERITY_COLORS = ['neutral', 'risk'] as const; @@ -45,6 +48,67 @@ export interface _EuiButtonOptions { display?: _EuiButtonDisplay; } +type ButtonVariantColors = { + color: string; + background: string; + backgroundHover: string; + backgroundActive: string; +}; + +const getButtonVariantTokenValues = ( + { euiTheme, highContrastMode }: UseEuiTheme, + color: _EuiExtendedButtonColor | 'disabled', + variant: 'base' | 'filled' | 'empty' +): ButtonVariantColors => { + const backgroundTokenBase = + variant === 'base' + ? 'background' + : `background${variant.charAt(0).toUpperCase() + variant.slice(1)}`; + const textTokenBase = variant === 'filled' ? 'textColorFilled' : 'textColor'; + + const backgroundTokenName = getTokenName( + backgroundTokenBase, + color + ) as keyof _EuiThemeButtonColors; + + const textTokenName = getTokenName( + textTokenBase, + color + ) as keyof _EuiThemeButtonColors; + + const backgroundHoverTokenName = getTokenName( + backgroundTokenBase, + color, + 'hover' + ) as keyof _EuiThemeButtonColors; + + const backgroundActiveTokenName = getTokenName( + backgroundTokenBase, + color, + 'active' + ) as keyof _EuiThemeButtonColors; + + const highContrastForeground = ['warning', 'neutral', 'risk'].includes(color) + ? euiTheme.colors.ink + : color === 'disabled' + ? euiTheme.components.buttons[textTokenName] + : euiTheme.colors.textInverse; + + const foreground = + variant === 'filled' + ? highContrastMode + ? highContrastForeground + : euiTheme.components.buttons[textTokenName] + : euiTheme.components.buttons[textTokenName]; + + return { + color: foreground, + background: euiTheme.components.buttons[backgroundTokenName], + backgroundHover: euiTheme.components.buttons[backgroundHoverTokenName], + backgroundActive: euiTheme.components.buttons[backgroundActiveTokenName], + }; +}; + /** * Creates the `base` version of button styles with proper text contrast. * @param euiThemeContext @@ -55,20 +119,14 @@ export const euiButtonColor = ( euiThemeContext: UseEuiTheme, color: _EuiExtendedButtonColor | 'disabled' ) => { - const { euiTheme } = euiThemeContext; - - const backgroundTokenName = getTokenName( - 'background', - color - ) as keyof _EuiThemeButtonColors; - - const textTokenName = getTokenName( - 'textColor', - color - ) as keyof _EuiThemeButtonColors; + const buttonColors = getButtonVariantTokenValues( + euiThemeContext, + color, + 'base' + ); - const foreground = euiTheme.components.buttons[textTokenName]; - const background = euiTheme.components.buttons[backgroundTokenName]; + const foreground = buttonColors.color; + const background = buttonColors.background; return { color: @@ -90,28 +148,14 @@ export const euiButtonFillColor = ( euiThemeContext: UseEuiTheme, color: _EuiExtendedButtonColor | 'disabled' ) => { - const { euiTheme, highContrastMode } = euiThemeContext; - - const backgroundTokenName = getTokenName( - 'backgroundFilled', - color - ) as keyof _EuiThemeButtonColors; - - const textColorTokenName = getTokenName( - 'textColorFilled', - color - ) as keyof _EuiThemeButtonColors; - - const highContrastForeground = ['warning', 'neutral', 'risk'].includes(color) - ? euiTheme.colors.ink - : color === 'disabled' - ? euiTheme.components.buttons[textColorTokenName] - : euiTheme.colors.textInverse; + const buttonColors = getButtonVariantTokenValues( + euiThemeContext, + color, + 'filled' + ); - const foreground = highContrastMode - ? highContrastForeground - : euiTheme.components.buttons[textColorTokenName]; - const background = euiTheme.components.buttons[backgroundTokenName]; + const foreground = buttonColors.color; + const background = buttonColors.background; return { color: foreground, @@ -142,14 +186,14 @@ export const euiButtonEmptyColor = ( background = 'transparent'; break; default: { - const backgroundToken = getTokenName( - 'backgroundEmpty', + const buttonColors = getButtonVariantTokenValues( + euiThemeContext, color, - 'hover' - ) as keyof _EuiThemeButtonColors; + 'empty' + ); foreground = euiButtonColor(euiThemeContext, color).color; - background = euiThemeContext.euiTheme.components.buttons[backgroundToken]; + background = buttonColors.backgroundHover; break; } @@ -174,6 +218,12 @@ export const useEuiButtonColorCSS = (options: _EuiButtonOptions = {}) => { }; const euiButtonDisplaysColors = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); + const COLORS = [...EXTENDED_BUTTON_COLORS, 'disabled'] as const; type Colors = (typeof COLORS)[number]; @@ -187,33 +237,86 @@ const euiButtonDisplaysColors = (euiThemeContext: UseEuiTheme) => { COLORS.forEach((color) => { switch (display) { - case 'base': + case 'base': { + const buttonColors = getButtonVariantTokenValues( + euiThemeContext, + color, + 'base' + ); + + const borderStyle = + color === 'text' && + ` + border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}; + `; + + const refreshVariantStyles = + isRefreshVariant && + ` + ${_interactionStyles(euiThemeContext, buttonColors, 'overlay')} + ${borderStyle} + `; + displaysColorsMap[display][color] = css` ${euiButtonColor(euiThemeContext, color)} + ${refreshVariantStyles} `; break; - case 'fill': + } + case 'fill': { + const buttonColors = getButtonVariantTokenValues( + euiThemeContext, + color, + 'filled' + ); + + const refreshVariantStyles = + isRefreshVariant && + _interactionStyles(euiThemeContext, buttonColors); + displaysColorsMap[display][color] = css` ${euiButtonFillColor(euiThemeContext, color)} /* Use full shade for outline-color except for dark mode text buttons which need to stay currentColor */ - outline-color: ${euiThemeContext.colorMode === 'DARK' && + outline-color: ${euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade}; + + ${refreshVariantStyles} `; break; - case 'empty': + } + case 'empty': { + const buttonColors = getButtonVariantTokenValues( + euiThemeContext, + color, + 'empty' + ); + + const classicVariantStyles = + !isRefreshVariant && + ` + &:focus, + &:active { + background-color: ${ + euiButtonEmptyColor(euiThemeContext, color).backgroundColor + }; + } + `; + + const refreshVariantStyles = + isRefreshVariant && + _interactionStyles(euiThemeContext, buttonColors, 'overlay'); + displaysColorsMap[display][color] = css` color: ${euiButtonEmptyColor(euiThemeContext, color).color}; - &:focus, - &:active { - background-color: ${euiButtonEmptyColor(euiThemeContext, color) - .backgroundColor}; - } + ${classicVariantStyles} + ${refreshVariantStyles} `; break; + } } // Tweak auto-generated Emotion label/className output @@ -240,26 +343,34 @@ const euiButtonFocusAnimation = keyframes` transform: translateY(1px); } `; -const euiButtonFocusCSS = ({ euiTheme }: UseEuiTheme) => { - const focusCSS = css` - ${euiCanAnimate} { - transition: transform ${euiTheme.animation.normal} ease-in-out, - background-color ${euiTheme.animation.normal} ease-in-out; - - &:hover:not(:disabled) { - transform: translateY(-1px); - } - - &:focus { - animation: ${euiButtonFocusAnimation} ${euiTheme.animation.normal} - ${euiTheme.animation.bounce}; - } - - &:active:not(:disabled) { - transform: translateY(1px); - } - } - `; +const euiButtonFocusCSS = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); + + const focusCSS = isRefreshVariant + ? css`` + : css` + ${euiCanAnimate} { + transition: transform ${euiTheme.animation.normal} ease-in-out, + background-color ${euiTheme.animation.normal} ease-in-out; + + &:hover:not(:disabled) { + transform: translateY(-1px); + } + + &:focus { + animation: ${euiButtonFocusAnimation} ${euiTheme.animation.normal} + ${euiTheme.animation.bounce}; + } + + &:active:not(:disabled) { + transform: translateY(1px); + } + } + `; // Remove the auto-generated label. // We could typically avoid a label by using a plain string `` instead of css``, // but we need css`` for keyframes`` to work for the focus animation @@ -271,23 +382,134 @@ const euiButtonFocusCSS = ({ euiTheme }: UseEuiTheme) => { * Map of `size` props to various sizings/scales * that should remain consistent across all buttons */ -export const euiButtonSizeMap = ({ euiTheme }: UseEuiTheme) => ({ - xs: { - height: euiTheme.size.l, - radius: euiTheme.border.radius.small, - fontScale: 'xs' as const, - }, - s: { - height: euiTheme.size.xl, - radius: euiTheme.border.radius.small, - fontScale: 's' as const, - }, - m: { - height: euiTheme.size.xxl, - radius: euiTheme.border.radius.medium, - fontScale: 's' as const, - }, -}); +export const euiButtonSizeMap = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); + + return { + xs: { + minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7), + height: euiTheme.size.l, + radius: euiTheme.border.radius.small, + fontScale: 'xs' as const, + }, + s: { + minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7), + height: euiTheme.size.xl, + radius: euiTheme.border.radius.small, + fontScale: 's' as const, + }, + m: { + minWidth: euiTheme.base * 7, + height: euiTheme.size.xxl, + radius: isRefreshVariant + ? euiTheme.border.radius.small + : euiTheme.border.radius.medium, + fontScale: 's' as const, + }, + }; +}; + +/** + * internal styles util for applying button background color on hover + */ +const _interactionStyles = ( + euiThemeContext: UseEuiTheme, + buttonColors: ButtonVariantColors, + type: 'fill' | 'overlay' = 'fill' +) => { + const isRefreshVariant = isEuiThemeRefreshVariant( + euiThemeContext, + 'buttonVariant' + ); + + if (!isRefreshVariant) return ``; + + const baseStyles = () => { + // button hover is applied as pseudo element with a transparent background-color + if (type === 'overlay') { + return ` + position: relative; + overflow: hidden; + + &:hover:not(:disabled) { + &::before { + content: ''; + position: absolute; + /* should stay under the content */ + z-index: 0; + inset: 0; + background-color: ${buttonColors.backgroundHover}; + pointer-events: none; + } + } + + &:active:not(:disabled) { + &::before { + ${logicalCSS('width', '100%')} + ${logicalCSS('height', '100%')} + + content: ''; + position: absolute; + inset: 0; + background-color: ${buttonColors.backgroundActive}; + } + } + `; + } + + // button hover is applied as opaque color + return ` + &:hover:not(:disabled) { + background-color: ${buttonColors.backgroundHover}; + } + + &:active:not(:disabled) { + background-color: ${buttonColors.backgroundActive}; + } + `; + }; + + return ` + ${highContrastModeStyles(euiThemeContext, { + none: baseStyles(), + forced: ` + position: relative; + overflow: hidden; + + ${highContrastHoverIndicatorStyles(euiThemeContext)} + `, + })} + `; +}; + +/** + * creates a bottom border on hover/focus to ensure a visible change as forced mode removed background colors + */ +export const highContrastHoverIndicatorStyles = ({ euiTheme }: UseEuiTheme) => ` + &:hover:not(:disabled) { + transition: none; + + /* using pseudo border to be able to control the color */ + &::after { + content: ''; + position: absolute; + inset: ${euiTheme.border.width.thin}; + border: ${ + euiTheme.border.width.thick + } solid var(--highContrastHoverIndicatorColor, ${euiTheme.border.color}); + border-radius: ${mathWithUnits( + euiTheme.border.radius.small, + (x) => x / 2 + )}; + background-color: transparent; + pointer-events: none; + } + } +`; /** * Internal util for high contrast button borders diff --git a/packages/eui/src/services/theme/index.ts b/packages/eui/src/services/theme/index.ts index 80b2fe7880f..c9f1cc9cec9 100644 --- a/packages/eui/src/services/theme/index.ts +++ b/packages/eui/src/services/theme/index.ts @@ -54,3 +54,4 @@ export type { EuiThemeSystem, } from './types'; export { COLOR_MODES_STANDARD } from './types'; +export * from './theme_variant'; diff --git a/packages/eui/src/services/theme/provider.tsx b/packages/eui/src/services/theme/provider.tsx index 9f3af8f284c..e723576a0f7 100644 --- a/packages/eui/src/services/theme/provider.tsx +++ b/packages/eui/src/services/theme/provider.tsx @@ -210,16 +210,56 @@ export const EuiThemeProvider = ({ useEffect(() => { if (!isParentTheme.current) { - setTheme( - getComputed( - system, - buildTheme(modificationsWithHighContrast, `_${system.key}`), - colorMode, - highContrastMode - ) + /* Enables recomputation of component colors when flags are overridden on the provider + by adding the respective key to modifications to trigger a recomputation. */ + // TODO: remove once visual refresh is completed and flags are obsolete + const flagsToRecompute = [ + { flag: 'buttonVariant', componentKey: 'buttons' }, + ]; + + const keys: { [key: string]: { LIGHT: {}; DARK: {} } } = {}; + + const forceRecomputeComponents = flagsToRecompute.some((item) => { + if ( + Object.keys(modifications.flags ?? {}).includes(item.flag) && + !Object.keys(modifications.components ?? {}).includes( + item.componentKey + ) + ) { + keys[item.componentKey] = { LIGHT: {}, DARK: {} }; + + return true; + } + + return false; + }); + + const componentModifications = forceRecomputeComponents + ? { components: keys } + : {}; + + // force recomputing of color & component tokens based on flag changes + const enhancedModifications = { + ...modificationsWithHighContrast, + ...componentModifications, + }; + + const rebuiltTheme = getComputed( + system, + buildTheme(enhancedModifications, `_${system.key}`), + colorMode, + highContrastMode ); + + setTheme(rebuiltTheme); } - }, [colorMode, highContrastMode, system, modificationsWithHighContrast]); + }, [ + colorMode, + highContrastMode, + system, + modificationsWithHighContrast, + modifications, + ]); const [themeCSSVariables, _setThemeCSSVariables] = useState(); const setThemeCSSVariables = useCallback( diff --git a/packages/eui/src/services/theme/theme_variant.ts b/packages/eui/src/services/theme/theme_variant.ts new file mode 100644 index 00000000000..265445dee5a --- /dev/null +++ b/packages/eui/src/services/theme/theme_variant.ts @@ -0,0 +1,28 @@ +/* + * 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 { EuiThemeVariantFlags, UseEuiTheme } from '@elastic/eui-theme-common'; + +import { useEuiTheme } from './hooks'; + +export const isEuiThemeRefreshVariant = ( + { euiTheme }: UseEuiTheme, + flag: keyof EuiThemeVariantFlags +) => { + return euiTheme.flags[flag] === 'refresh'; +}; + +/** + * Util to retrieve visual variant for UI elements + * Note: Temporary only - will be removed once the visual refresh is completed. + */ +export const useEuiThemeRefreshVariant = (flag: keyof EuiThemeVariantFlags) => { + const euiThemeContext = useEuiTheme(); + + return isEuiThemeRefreshVariant(euiThemeContext, flag); +}; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.ts index 99faab9ea0d..042dee05974 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.ts @@ -58,6 +58,68 @@ const _buttons = { ['colors.lightShade'] ), + backgroundPrimaryHover: computed( + ([primary]) => transparentize(primary, 0.1), + ['colors.primary'] + ), + backgroundAccentHover: computed( + ([accent]) => transparentize(accent, 0.1), + ['colors.accent'] + ), + backgroundAccentSecondaryHover: computed( + ([success]) => transparentize(success, 0.1), + ['colors.success'] + ), + backgroundNeutralHover: transparentize(severityColors.neutral, 0.1), + backgroundSuccessHover: computed( + ([success]) => transparentize(success, 0.1), + ['colors.success'] + ), + backgroundWarningHover: computed( + ([warning]) => transparentize(warning, 0.1), + ['colors.warning'] + ), + backgroundRiskHover: transparentize(severityColors.risk, 0.1), + backgroundDangerHover: computed( + ([danger]) => transparentize(danger, 0.1), + ['colors.danger'] + ), + backgroundTextHover: computed( + ([lightShade]) => transparentize(lightShade, 0.2), + ['colors.lightShade'] + ), + + backgroundPrimaryActive: computed( + ([primary]) => transparentize(primary, 0.1), + ['colors.primary'] + ), + backgroundAccentActive: computed( + ([accent]) => transparentize(accent, 0.1), + ['colors.accent'] + ), + backgroundAccentSecondaryActive: computed( + ([success]) => transparentize(success, 0.1), + ['colors.success'] + ), + backgroundNeutralActive: transparentize(severityColors.neutral, 0.1), + backgroundSuccessActive: computed( + ([success]) => transparentize(success, 0.1), + ['colors.success'] + ), + backgroundWarningActive: computed( + ([warning]) => transparentize(warning, 0.1), + ['colors.warning'] + ), + backgroundRiskActive: transparentize(severityColors.risk, 0.1), + backgroundDangerActive: computed( + ([danger]) => transparentize(danger, 0.1), + ['colors.danger'] + ), + backgroundTextActive: computed( + ([lightShade]) => transparentize(lightShade, 0.2), + ['colors.lightShade'] + ), + backgroundFilledPrimary: computed( ([backgroundFilledPrimary]) => backgroundFilledPrimary, ['colors.backgroundFilledPrimary'] @@ -99,6 +161,80 @@ const _buttons = { ['colors.lightShade'] ), + backgroundFilledPrimaryHover: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledPrimary'] + ), + backgroundFilledAccentHover: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledAccent'] + ), + backgroundFilledAccentSecondaryHover: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledAccentSecondary'] + ), + backgroundFilledNeutralHover: computed( + ([backgroundFilledNeutral]) => backgroundFilledNeutral, + ['components.buttons.backgroundFilledNeutral'] + ), + backgroundFilledSuccessHover: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledSuccess'] + ), + backgroundFilledWarningHover: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledWarning'] + ), + backgroundFilledRiskHover: computed( + ([backgroundFilledRisk]) => backgroundFilledRisk, + ['components.buttons.backgroundFilledRisk'] + ), + backgroundFilledDangerHover: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledDanger'] + ), + backgroundFilledTextHover: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledText'] + ), + + backgroundFilledPrimaryActive: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledPrimary'] + ), + backgroundFilledAccentActive: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledAccent'] + ), + backgroundFilledAccentSecondaryActive: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledAccentSecondary'] + ), + backgroundFilledNeutralActive: computed( + ([backgroundFilledNeutral]) => backgroundFilledNeutral, + ['components.buttons.backgroundFilledNeutral'] + ), + backgroundFilledSuccessActive: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledSuccess'] + ), + backgroundFilledWarningActive: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledWarning'] + ), + backgroundFilledRiskActive: computed( + ([backgroundFilledRisk]) => backgroundFilledRisk, + ['components.buttons.backgroundFilledRisk'] + ), + backgroundFilledDangerActive: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledDanger'] + ), + backgroundFilledTextActive: computed( + ([backgroundFilledPrimary]) => backgroundFilledPrimary, + ['components.buttons.backgroundFilledText'] + ), + backgroundEmptyPrimaryHover: computed( ([primary]) => transparentize(primary, 0.1), ['colors.primary'] @@ -130,6 +266,37 @@ const _buttons = { ['colors.lightShade'] ), + backgroundEmptyPrimaryActive: computed( + ([primary]) => transparentize(primary, 0.1), + ['colors.primary'] + ), + backgroundEmptyAccentActive: computed( + ([accent]) => transparentize(accent, 0.1), + ['colors.accent'] + ), + backgroundEmptyAccentSecondaryActive: computed( + ([success]) => transparentize(success, 0.1), + ['colors.success'] + ), + backgroundEmptyNeutralActive: transparentize(severityColors.neutral, 0.1), + backgroundEmptySuccessActive: computed( + ([success]) => transparentize(success, 0.1), + ['colors.success'] + ), + backgroundEmptyWarningActive: computed( + ([warning]) => transparentize(warning, 0.1), + ['colors.warning'] + ), + backgroundEmptyRiskActive: transparentize(severityColors.risk, 0.1), + backgroundEmptyDangerActive: computed( + ([danger]) => transparentize(danger, 0.1), + ['colors.danger'] + ), + backgroundEmptyTextActive: computed( + ([lightShade]) => transparentize(lightShade, 0.2), + ['colors.lightShade'] + ), + textColorPrimary: computed( ([primaryText]) => primaryText, ['colors.primaryText'] 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 33efb3185f2..3d3d0e85891 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -192,6 +192,11 @@ const component_colors: _EuiThemeComponentColors = { ['colors.success'] ), + filterButtonBadgeBackgroundHover: computed( + ([lightShade]) => tint(lightShade, 0.3), + ['colors.lightShade'] + ), + filterSelectItemBackgroundFocusDisabled: computed( ([disabled]) => transparentize(disabled, 0.1), ['colors.disabled'] diff --git a/packages/eui/src/themes/amsterdam/theme.ts b/packages/eui/src/themes/amsterdam/theme.ts index d0fc3b18adc..87e961c1a61 100644 --- a/packages/eui/src/themes/amsterdam/theme.ts +++ b/packages/eui/src/themes/amsterdam/theme.ts @@ -35,6 +35,7 @@ export const euiThemeAmsterdam: EuiThemeShape = { flags: { hasGlobalFocusColor: false, hasVisColorAdjustment: true, + buttonVariant: 'classic', }, }; 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 7b9d9c799c4..7a4ba32cb9d 100644 --- a/packages/eui/src/themes/json/eui_theme_borealis_dark.json +++ b/packages/eui/src/themes/json/eui_theme_borealis_dark.json @@ -392,7 +392,7 @@ "euiColorBackgroundLightWarning": "#3D3014", "euiColorBackgroundLightRisk": "#4A221C", "euiColorBackgroundLightDanger": "#491D27", - "euiColorBackgroundLightText": "#1D2A3E", + "euiColorBackgroundLightText": "#2B394F", "euiColorBackgroundFilledPrimary": "#61A2FF", "euiColorBackgroundFilledAccent": "#EE72A6", "euiColorBackgroundFilledAccentSecondary": "#16C5C0", diff --git a/packages/website/docs/components/forms/search-and-filter/filter-group.mdx b/packages/website/docs/components/forms/search-and-filter/filter-group.mdx index 1441ca67d1a..5e4fb71b24f 100644 --- a/packages/website/docs/components/forms/search-and-filter/filter-group.mdx +++ b/packages/website/docs/components/forms/search-and-filter/filter-group.mdx @@ -13,6 +13,8 @@ Add the prop `withNext` to remove the border between it and the next EuiFilterBu Set `hasActiveFilters` to true when the filter is active. +Use `isToggle` to change the visual and functional type of the button element that's being rendered from a regular button to a toggle button. + ```tsx interactive import React, { useState } from 'react'; import { EuiFilterGroup, EuiFilterButton } from '@elastic/eui'; @@ -38,19 +40,23 @@ export default () => { return ( - + Single filter On Off @@ -254,22 +260,28 @@ export default () => { Filter On Off @@ -288,8 +300,10 @@ export default () => { Filter with a very long name