[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

@@ -393,7 +393,7 @@
   "euiColorBackgroundLightSuccess": "#0D362B",
   "euiColorBackgroundLightWarning": "#3D3014",
   "euiColorBackgroundLightDanger": "#491D27",
-  "euiColorBackgroundLightText": "#1D2A3E",
+  "euiColorBackgroundLightText": "#2B394F",
   "euiColorBackgroundFilledPrimary": "#61A2FF",
   "euiColorBackgroundFilledAccent": "#EE72A6",
   "euiColorBackgroundFilledAccentSecondary": "#16C5C0",

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

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

packages/eui-theme-borealis/src/variables/_buttons.ts

@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { _EuiThemeButton } from '@elastic/eui-theme-common';
+import {
+  _EuiThemeButton,
+  EuiThemeVariantFlags,
+  ColorModeSwitch,
+  computed,
+} from '@elastic/eui-theme-common';
 import { SEMANTIC_COLORS } from './colors/_semantic_colors';
 import {
   background_colors,
@@ -19,16 +24,56 @@ import {
   dark_text_colors,
 } from './colors/_colors_dark';
 
+const getTokenByVariant = (
+  buttonVariant: EuiThemeVariantFlags['buttonVariant'],
+  tokens: {
+    classic: ColorModeSwitch;
+    refresh: ColorModeSwitch;
+  }
+) => {
+  switch (buttonVariant) {
+    case 'refresh':
+      return tokens.refresh;
+    default: {
+      return tokens.classic;
+    }
+  }
+};
+
 const _buttons = {
   backgroundPrimary: background_colors.backgroundLightPrimary,
   backgroundAccent: background_colors.backgroundLightAccent,
   backgroundAccentSecondary: background_colors.backgroundLightAccentSecondary,
   backgroundSuccess: background_colors.backgroundLightSuccess,
   backgroundWarning: background_colors.backgroundLightWarning,
   backgroundDanger: background_colors.backgroundLightDanger,
-  backgroundText: background_colors.backgroundLightText,
+  backgroundText: computed(
+    ([buttonVariant]) => {
+      return getTokenByVariant(buttonVariant, {
+        refresh: background_colors.backgroundBasePlain,
+        classic: background_colors.backgroundLightText,
+      });
+    },
+    ['flags.buttonVariant']
+  ),
   backgroundDisabled: background_colors.backgroundBaseDisabled,
 
+  backgroundPrimaryHover: SEMANTIC_COLORS.primary70Alpha12,
+  backgroundAccentHover: SEMANTIC_COLORS.accent70Alpha12,
+  backgroundAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha12,
+  backgroundSuccessHover: SEMANTIC_COLORS.success70Alpha12,
+  backgroundWarningHover: SEMANTIC_COLORS.warning60Alpha16,
+  backgroundDangerHover: SEMANTIC_COLORS.danger70Alpha12,
+  backgroundTextHover: SEMANTIC_COLORS.primary100Alpha8,
+
+  backgroundPrimaryActive: SEMANTIC_COLORS.primary70Alpha16,
+  backgroundAccentActive: SEMANTIC_COLORS.accent70Alpha16,
+  backgroundAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary70Alpha16,
+  backgroundSuccessActive: SEMANTIC_COLORS.success70Alpha16,
+  backgroundWarningActive: SEMANTIC_COLORS.warning60Alpha20,
+  backgroundDangerActive: SEMANTIC_COLORS.danger70Alpha16,
+  backgroundTextActive: SEMANTIC_COLORS.primary100Alpha12,
+
   backgroundFilledPrimary: background_colors.backgroundFilledPrimary,
   backgroundFilledAccent: background_colors.backgroundFilledAccent,
   backgroundFilledAccentSecondary:
@@ -39,15 +84,38 @@ const _buttons = {
   backgroundFilledText: background_colors.backgroundFilledText,
   backgroundFilledDisabled: background_colors.backgroundBaseDisabled,
 
-  // Temp. mapping to support more variants in old theme
-  backgroundEmptyPrimaryHover: background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyAccentHover: background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyAccentSecondaryHover:
-    background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptySuccessHover: background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyWarningHover: background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyDangerHover: background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyTextHover: background_colors.backgroundBaseInteractiveHover,
+  backgroundFilledPrimaryHover: SEMANTIC_COLORS.primary100,
+  backgroundFilledAccentHover: SEMANTIC_COLORS.accent100,
+  backgroundFilledAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary100,
+  backgroundFilledSuccessHover: SEMANTIC_COLORS.success100,
+  backgroundFilledWarningHover: SEMANTIC_COLORS.warning50,
+  backgroundFilledDangerHover: SEMANTIC_COLORS.danger100,
+  backgroundFilledTextHover: SEMANTIC_COLORS.shade100,
+
+  backgroundFilledPrimaryActive: SEMANTIC_COLORS.primary110,
+  backgroundFilledAccentActive: SEMANTIC_COLORS.accent110,
+  backgroundFilledAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary110,
+  backgroundFilledSuccessActive: SEMANTIC_COLORS.success110,
+  backgroundFilledWarningActive: SEMANTIC_COLORS.warning60,
+  backgroundFilledDangerActive: SEMANTIC_COLORS.danger110,
+  backgroundFilledTextActive: SEMANTIC_COLORS.shade110,
+
+  backgroundEmptyPrimaryHover: SEMANTIC_COLORS.primary70Alpha12,
+  backgroundEmptyAccentHover: SEMANTIC_COLORS.accent70Alpha12,
+  backgroundEmptyAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha12,
+  backgroundEmptySuccessHover: SEMANTIC_COLORS.success70Alpha12,
+  backgroundEmptyWarningHover: SEMANTIC_COLORS.warning60Alpha16,
+  backgroundEmptyDangerHover: SEMANTIC_COLORS.danger70Alpha12,
+  backgroundEmptyTextHover: SEMANTIC_COLORS.primary100Alpha8,
+
+  backgroundEmptyPrimaryActive: SEMANTIC_COLORS.primary70Alpha16,
+  backgroundEmptyAccentActive: SEMANTIC_COLORS.accent70Alpha16,
+  backgroundEmptyAccentSecondaryActive:
+    SEMANTIC_COLORS.accentSecondary70Alpha16,
+  backgroundEmptySuccessActive: SEMANTIC_COLORS.success70Alpha16,
+  backgroundEmptyWarningActive: SEMANTIC_COLORS.warning60Alpha20,
+  backgroundEmptyDangerActive: SEMANTIC_COLORS.danger70Alpha16,
+  backgroundEmptyTextActive: SEMANTIC_COLORS.primary100Alpha12,
 
   textColorPrimary: brand_text_colors.textPrimary,
   textColorAccent: brand_text_colors.textAccent,
@@ -76,9 +144,33 @@ const _dark_buttons = {
   backgroundSuccess: dark_background_colors.backgroundLightSuccess,
   backgroundWarning: dark_background_colors.backgroundLightWarning,
   backgroundDanger: dark_background_colors.backgroundLightDanger,
-  backgroundText: dark_background_colors.backgroundLightText,
+  backgroundText: computed(
+    ([buttonVariant]) => {
+      return getTokenByVariant(buttonVariant, {
+        refresh: dark_background_colors.backgroundBasePlain,
+        classic: dark_background_colors.backgroundLightText,
+      });
+    },
+    ['flags.buttonVariant']
+  ),
   backgroundDisabled: dark_background_colors.backgroundBaseDisabled,
 
+  backgroundPrimaryHover: SEMANTIC_COLORS.primary70Alpha16,
+  backgroundAccentHover: SEMANTIC_COLORS.accent70Alpha16,
+  backgroundAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha16,
+  backgroundSuccessHover: SEMANTIC_COLORS.success70Alpha16,
+  backgroundWarningHover: SEMANTIC_COLORS.warning60Alpha12,
+  backgroundDangerHover: SEMANTIC_COLORS.danger70Alpha16,
+  backgroundTextHover: SEMANTIC_COLORS.plainLightAlpha12,
+
+  backgroundPrimaryActive: SEMANTIC_COLORS.primary70Alpha20,
+  backgroundAccentActive: SEMANTIC_COLORS.accent70Alpha20,
+  backgroundAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary70Alpha20,
+  backgroundSuccessActive: SEMANTIC_COLORS.success70Alpha20,
+  backgroundWarningActive: SEMANTIC_COLORS.warning60Alpha16,
+  backgroundDangerActive: SEMANTIC_COLORS.danger70Alpha20,
+  backgroundTextActive: SEMANTIC_COLORS.plainLightAlpha16,
+
   backgroundFilledPrimary: dark_background_colors.backgroundFilledPrimary,
   backgroundFilledAccent: dark_background_colors.backgroundFilledAccent,
   backgroundFilledAccentSecondary:
@@ -89,20 +181,38 @@ const _dark_buttons = {
   backgroundFilledText: dark_background_colors.backgroundFilledText,
   backgroundFilledDisabled: dark_background_colors.backgroundBaseDisabled,
 
-  backgroundEmptyPrimaryHover:
-    dark_background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyAccentHover:
-    dark_background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyAccentSecondaryHover:
-    dark_background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptySuccessHover:
-    dark_background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyWarningHover:
-    dark_background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyDangerHover:
-    dark_background_colors.backgroundBaseInteractiveHover,
-  backgroundEmptyTextHover:
-    dark_background_colors.backgroundBaseInteractiveHover,
+  backgroundFilledPrimaryHover: SEMANTIC_COLORS.primary70,
+  backgroundFilledAccentHover: SEMANTIC_COLORS.accent70,
+  backgroundFilledAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70,
+  backgroundFilledSuccessHover: SEMANTIC_COLORS.success70,
+  backgroundFilledWarningHover: SEMANTIC_COLORS.warning50,
+  backgroundFilledDangerHover: SEMANTIC_COLORS.danger70,
+  backgroundFilledTextHover: SEMANTIC_COLORS.shade70,
+
+  backgroundFilledPrimaryActive: SEMANTIC_COLORS.primary80,
+  backgroundFilledAccentActive: SEMANTIC_COLORS.accent80,
+  backgroundFilledAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary80,
+  backgroundFilledSuccessActive: SEMANTIC_COLORS.success80,
+  backgroundFilledWarningActive: SEMANTIC_COLORS.warning60,
+  backgroundFilledDangerActive: SEMANTIC_COLORS.danger80,
+  backgroundFilledTextActive: SEMANTIC_COLORS.shade80,
+
+  backgroundEmptyPrimaryHover: SEMANTIC_COLORS.primary70Alpha16,
+  backgroundEmptyAccentHover: SEMANTIC_COLORS.accent70Alpha16,
+  backgroundEmptyAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha16,
+  backgroundEmptySuccessHover: SEMANTIC_COLORS.success70Alpha16,
+  backgroundEmptyWarningHover: SEMANTIC_COLORS.warning60Alpha12,
+  backgroundEmptyDangerHover: SEMANTIC_COLORS.danger70Alpha16,
+  backgroundEmptyTextHover: SEMANTIC_COLORS.plainLightAlpha12,
+
+  backgroundEmptyPrimaryActive: SEMANTIC_COLORS.primary70Alpha20,
+  backgroundEmptyAccentActive: SEMANTIC_COLORS.accent70Alpha20,
+  backgroundEmptyAccentSecondaryActive:
+    SEMANTIC_COLORS.accentSecondary70Alpha20,
+  backgroundEmptySuccessActive: SEMANTIC_COLORS.success70Alpha20,
+  backgroundEmptyWarningActive: SEMANTIC_COLORS.warning60Alpha16,
+  backgroundEmptyDangerActive: SEMANTIC_COLORS.danger70Alpha20,
+  backgroundEmptyTextActive: SEMANTIC_COLORS.plainLightAlpha16,
 
   textColorPrimary: dark_brand_text_colors.textPrimary,
   textColorAccent: dark_brand_text_colors.textAccent,

packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss

@@ -55,7 +55,7 @@ $euiColorBackgroundLightAccentSecondary: $euiColorAccentSecondary130 !default;
 $euiColorBackgroundLightSuccess: $euiColorSuccess130 !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

@@ -104,7 +104,7 @@ export const dark_background_colors: _EuiThemeBackgroundColors = {
   backgroundLightSuccess: SEMANTIC_COLORS.success130,
   backgroundLightWarning: SEMANTIC_COLORS.warning130,
   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;
 
 $euiColorSuccess10: #E2F8F0 !default;
 $euiColorSuccess20: #C9F3E3 !default;
@@ -94,6 +97,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;
@@ -110,8 +114,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;
@@ -130,6 +135,7 @@ $euiColorDanger140: #351721 !default;
 
 $euiColorDanger70Alpha12: rgba($euiColorDanger70, 0.12) !default;
 $euiColorDanger70Alpha16: rgba($euiColorDanger70, 0.16) !default;
+$euiColorDanger70Alpha20: rgba($euiColorDanger70, 0.2) !default;
 
 $euiColorAssistance10: #F3ECFE !default;
 $euiColorAssistance20: #ECE2FE !default;

packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts

@@ -155,7 +155,7 @@ const _semantic_rgb_colors = {
   accent70RGB: chroma(_semantic_colors.accent70).rgb().join(),
   accentSecondary70RGB: chroma(_semantic_colors.accentSecondary70).rgb().join(),
   success70RGB: chroma(_semantic_colors.success70).rgb().join(),
-  warning40RGB: chroma(_semantic_colors.warning40).rgb().join(),
+  warning60RGB: chroma(_semantic_colors.warning60).rgb().join(),
   danger70RGB: chroma(_semantic_colors.danger70).rgb().join(),
   shade100RGB: chroma(_semantic_colors.shade100).rgb().join(),
   shade120RGB: chroma(_semantic_colors.shade120).rgb().join(),
@@ -170,25 +170,31 @@ 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)`,
 
   success70Alpha12: `rgba(${_semantic_rgb_colors.success70RGB}, 0.12)`,
   success70Alpha16: `rgba(${_semantic_rgb_colors.success70RGB}, 0.16)`,
+  success70Alpha20: `rgba(${_semantic_rgb_colors.success70RGB}, 0.2)`,
 
-  warning40Alpha12: `rgba(${_semantic_rgb_colors.warning40RGB}, 0.12)`,
-  warning40Alpha24: `rgba(${_semantic_rgb_colors.warning40RGB}, 0.24)`,
+  warning60Alpha12: `rgba(${_semantic_rgb_colors.warning60RGB}, 0.12)`,
+  warning60Alpha16: `rgba(${_semantic_rgb_colors.warning60RGB}, 0.16)`,
+  warning60Alpha20: `rgba(${_semantic_rgb_colors.warning60RGB}, 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
+