[Visual Refresh][EuiButton] Add Refresh design update #1

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/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/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;

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,25 +202,39 @@ 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)`,
   primary100Alpha12: `rgba(${_semantic_rgb_colors.primary100RGB}, 0.12)`,
 
   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)`,

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
+