-resolve button mixin calculation to use tokens instead

elastic · Aug 30, 2024 · 9e4acc4 · 9e4acc4
1 parent 517968d
commit 9e4acc4
Show file tree

Hide file tree

Showing 7 changed files with 559 additions and 411 deletions.
diff --git a/packages/eui/src/components/button/button.tsx b/packages/eui/src/components/button/button.tsx
@@ -21,7 +21,7 @@ import {
  useEuiButtonColorCSS,
  useEuiButtonFocusCSS,
  _EuiButtonColor,
-} from '../../themes/amsterdam/global_styling/mixins/button';
+} from '../../global_styling/mixins/_button';
 import {
  EuiButtonDisplay,
  EuiButtonDisplayCommonProps,

diff --git a/...new_theme/global_styling/mixins/button.ts → .../eui/src/global_styling/mixins/_button.ts b/...new_theme/global_styling/mixins/button.ts → .../eui/src/global_styling/mixins/_button.ts
@@ -7,17 +7,8 @@
  */
 
 import { css, keyframes, type SerializedStyles } from '@emotion/react';
-import {
- _EuiThemeSemanticMatrixColors,
- euiBackgroundColor,
- euiCanAnimate,
-} from '../../../../global_styling';
-import {
- hexToRgb,
- isColorDark,
- UseEuiTheme,
- useEuiMemoizedStyles,
-} from '../../../../services';
+import { _EuiThemeButtonColors, euiCanAnimate } from '../index';
+import { UseEuiTheme, useEuiMemoizedStyles } from '../../services';
 
 export const BUTTON_COLORS = [
  'text',
@@ -32,16 +23,6 @@ export type _EuiButtonColor = (typeof BUTTON_COLORS)[number];
 export const BUTTON_DISPLAYS = ['base', 'fill', 'empty'] as const;
 export type _EuiButtonDisplay = (typeof BUTTON_DISPLAYS)[number];
 
-const BUTTON_COLOR_TO_MATRIX_COLOR_MAP: Record<string, string> = {
- text: 'shade',
- accent: 'accent',
- primary: 'primary',
- success: 'success',
- warning: 'warning',
- danger: 'danger',
- disabled: 'shade',
-};
-
 export interface _EuiButtonOptions {
  display?: _EuiButtonDisplay;
 }
@@ -56,40 +37,17 @@ export const euiButtonColor = (
  euiThemeContext: UseEuiTheme,
  color: _EuiButtonColor | 'disabled'
 ) => {
- const { euiTheme, colorMode } = euiThemeContext;
-
- let foreground;
- let background;
-
- switch (color) {
- case 'disabled':
- return {
- color: euiTheme.colors.textDisabled,
- backgroundColor: euiTheme.colors.backgroundDisabled,
- };
- case 'text':
- foreground = euiTheme.colors[color];
- background =
- colorMode === 'DARK'
- ? euiTheme.colors.shade90
- : euiTheme.colors.shade20;
- break;
- default: {
- const shade = colorMode === 'DARK' ? 120 : 20;
- const mappedColor = BUTTON_COLOR_TO_MATRIX_COLOR_MAP[color];
- const semanticColorName =
- `${mappedColor}${shade}` as keyof _EuiThemeSemanticMatrixColors;
-
- foreground = euiTheme.colors[`${color}Text`];
- background = euiTheme.colors[semanticColorName];
+ const { euiTheme } = euiThemeContext;
 
- break;
- }
- }
+ const colorName = color.charAt(0).toUpperCase() + color.slice(1);
+ const backgroundToken =
+ `buttonSecondaryBackground${colorName}` as keyof _EuiThemeButtonColors;
+ const colorToken =
+ `buttonSecondaryColor${colorName}` as keyof _EuiThemeButtonColors;
 
  return {
- color: foreground,
- backgroundColor: background,
+ color: euiTheme.colors[colorToken],
+ backgroundColor: euiTheme.colors[backgroundToken],
  };
 };
 
@@ -105,29 +63,14 @@ export const euiButtonFillColor = (
 ) => {
  const { euiTheme } = euiThemeContext;
 
- const getForegroundColor = (background: string) => {
- return isColorDark(...hexToRgb(background))
- ? euiTheme.colors.ghost
- : euiTheme.colors.ink;
- };
-
- let background;
- let foreground;
-
- switch (color) {
- case 'disabled':
- background = euiButtonColor(euiThemeContext, color).backgroundColor;
- foreground = euiButtonColor(euiThemeContext, color).color;
- break;
- default:
- background = euiTheme.colors[color];
- foreground = getForegroundColor(background);
- break;
- }
+ const colorName = color.charAt(0).toUpperCase() + color.slice(1);
+ const backgroundToken =
+ `buttonBackground${colorName}` as keyof _EuiThemeButtonColors;
+ const colorToken = `buttonColor${colorName}` as keyof _EuiThemeButtonColors;
 
  return {
- color: foreground,
- backgroundColor: background,
+ color: euiTheme.colors[colorToken],
+ backgroundColor: euiTheme.colors[backgroundToken],
  };
 };
 
@@ -141,31 +84,17 @@ export const euiButtonEmptyColor = (
  euiThemeContext: UseEuiTheme,
  color: _EuiButtonColor | 'disabled'
 ) => {
- let foreground;
- let background;
+ const { euiTheme } = euiThemeContext;
 
- switch (color) {
- case 'disabled':
- foreground = euiButtonColor(euiThemeContext, color).color;
- background = 'transparent';
- break;
- case 'text':
- foreground = euiButtonColor(euiThemeContext, color).color;
- background = euiBackgroundColor(euiThemeContext, 'subdued', {
- method: 'transparent',
- });
- break;
- default:
- foreground = euiButtonColor(euiThemeContext, color).color;
- background = euiBackgroundColor(euiThemeContext, color, {
- method: 'transparent',
- });
- break;
- }
+ const colorName = color.charAt(0).toUpperCase() + color.slice(1);
+ const backgroundToken =
+ `buttonEmptyBackground${colorName}` as keyof _EuiThemeButtonColors;
+ const colorToken =
+ `buttonEmptyColor${colorName}` as keyof _EuiThemeButtonColors;
 
  return {
- color: foreground,
- backgroundColor: background,
+ color: euiTheme.colors[colorToken],
+ backgroundColor: euiTheme.colors[backgroundToken],
  };
 };
 

diff --git a/packages/eui/src/global_styling/variables/colors.ts b/packages/eui/src/global_styling/variables/colors.ts
@@ -332,6 +332,58 @@ export type _EuiThemeFormColors = {
  formAutofillBorderColor: ColorModeSwitch;
 };
 
+export type _EuiThemeButtonColors = {
+ buttonBackgroundPrimary: ColorModeSwitch;
+ buttonBackgroundAccent: ColorModeSwitch;
+ buttonBackgroundSuccess: ColorModeSwitch;
+ buttonBackgroundWarning: ColorModeSwitch;
+ buttonBackgroundDanger: ColorModeSwitch;
+ buttonBackgroundText: ColorModeSwitch;
+ buttonBackgroundDisabled: ColorModeSwitch;
+
+ buttonSecondaryBackgroundPrimary: ColorModeSwitch;
+ buttonSecondaryBackgroundAccent: ColorModeSwitch;
+ buttonSecondaryBackgroundSuccess: ColorModeSwitch;
+ buttonSecondaryBackgroundWarning: ColorModeSwitch;
+ buttonSecondaryBackgroundDanger: ColorModeSwitch;
+ buttonSecondaryBackgroundText: ColorModeSwitch;
+ buttonSecondaryBackgroundDisabled: ColorModeSwitch;
+
+ buttonEmptyBackgroundPrimary: ColorModeSwitch;
+ buttonEmptyBackgroundAccent: ColorModeSwitch;
+ buttonEmptyBackgroundSuccess: ColorModeSwitch;
+ buttonEmptyBackgroundWarning: ColorModeSwitch;
+ buttonEmptyBackgroundDanger: ColorModeSwitch;
+ buttonEmptyBackgroundText: ColorModeSwitch;
+ buttonEmptyBackgroundDisabled: ColorModeSwitch;
+
+ buttonColorPrimary: ColorModeSwitch;
+ buttonColorAccent: ColorModeSwitch;
+ buttonColorSuccess: ColorModeSwitch;
+ buttonColorWarning: ColorModeSwitch;
+ buttonColorDanger: ColorModeSwitch;
+ buttonColorText: ColorModeSwitch;
+ buttonColorDisabled: ColorModeSwitch;
+
+ buttonSecondaryColorPrimary: ColorModeSwitch;
+ buttonSecondaryColorAccent: ColorModeSwitch;
+ buttonSecondaryColorSuccess: ColorModeSwitch;
+ buttonSecondaryColorWarning: ColorModeSwitch;
+ buttonSecondaryColorDanger: ColorModeSwitch;
+ buttonSecondaryColorText: ColorModeSwitch;
+ buttonSecondaryColorDisabled: ColorModeSwitch;
+
+ buttonEmptyColorPrimary: ColorModeSwitch;
+ buttonEmptyColorAccent: ColorModeSwitch;
+ buttonEmptyColorSuccess: ColorModeSwitch;
+ buttonEmptyColorWarning: ColorModeSwitch;
+ buttonEmptyColorDanger: ColorModeSwitch;
+ buttonEmptyColorText: ColorModeSwitch;
+ buttonEmptyColorDisabled: ColorModeSwitch;
+
+ buttonBorderColorPrimary: ColorModeSwitch;
+};
+
 export type _EuiThemeColorsMode = _EuiThemeBrandColors &
  _EuiThemeSemanticColors &
  _EuiThemeBrandTextColors &
@@ -341,7 +393,8 @@ export type _EuiThemeColorsMode = _EuiThemeBrandColors &
  _EuiThemeBackgroundColors &
  _EuiThemeTransparentBackgroundColors &
  _EuiThemeBorderColors &
- _EuiThemeFormColors;
+ _EuiThemeFormColors &
+ _EuiThemeButtonColors;
 
 export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> &
  _EuiThemeConstantColors;