[Visual Refresh] Implement button design changes

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`
+

packages/eui-theme-borealis/changelogs/upcoming/8652.md

@@ -0,0 +1,3 @@
+- Added token `filterButtonBadgeBackgroundHover`
+- Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected`
+

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",

packages/eui-theme-borealis/src/index.ts

@@ -37,6 +37,7 @@ export const euiThemeBorealis: EuiThemeShape = {
   flags: {
     hasGlobalFocusColor: true,
     hasVisColorAdjustment: false,
+    buttonVariant: 'refresh',
   },
   overrides,
 };

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,
 };
 

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,

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;

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,

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;