Passing the fill prop to getTokenColor

elastic · Jul 28, 2022 · 0b3f9f6 · 0b3f9f6
1 parent c605348
commit 0b3f9f6
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 102 deletions.
diff --git a/src/components/token/index.ts b/src/components/token/index.ts
@@ -6,10 +6,10 @@
  * Side Public License, v 1.
  */
 
-export type { EuiTokenProps } from './token';
+export type { EuiTokenProps } from './token_types';
 export {
-  EuiToken,
   SIZES as TOKEN_SIZES,
   SHAPES as TOKEN_SHAPES,
   COLORS as TOKEN_COLORS,
-} from './token';
+} from './token_types';
+export { EuiToken } from './token';
diff --git a/src/components/token/token.styles.ts b/src/components/token/token.styles.ts
@@ -18,13 +18,15 @@ import {
   tint,
   shade,
 } from '../../services';
+import type { TokenFill } from './token_types';
 
 const visColors = euiPaletteColorBlind();
 const visColorsBehindText = euiPaletteColorBlindBehindText();
 
 const getTokenColor = (
   euiTheme: UseEuiTheme['euiTheme'],
   colorMode: UseEuiTheme['colorMode'],
+  fill: TokenFill,
   color: number | string
 ) => {
   const isVizColor = typeof color === 'number';
@@ -51,25 +53,30 @@ const getTokenColor = (
     ? euiTheme.colors.ghost
     : euiTheme.colors.ink;
 
-  return `
-    // Without a background, the fill color should be the graphic color
-    color: ${iconColor};
-  
-
-    &[class*='-light'] {
-      color: ${lightColor};
-      background-color: ${backgroundLightColor};
-      box-shadow: inset 0 0 0 1px ${boxShadowColor};
-    }
-
-    &[class*='-dark'] {
-      color: ${darkColor};
-      background-color: ${backgroundDarkColor};
-    }
-  `;
+  switch (fill) {
+    case 'none':
+      return `
+        // Without a background, the fill color should be the graphic color
+        color: ${iconColor};
+      `;
+    case 'light':
+      return `
+        color: ${lightColor};
+        background-color: ${backgroundLightColor};
+        box-shadow: inset 0 0 0 1px ${boxShadowColor};
+      `;
+    case 'dark':
+      return `
+        color: ${darkColor};
+        background-color: ${backgroundDarkColor};
+      `;
+  }
 };
 
-export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
+export const euiTokenStyles = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  fill: TokenFill
+) => ({
   // Base
   euiToken: css`
     display: inline-flex;
@@ -131,17 +138,17 @@ export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
     }
   `,
   // Colors
-  euiColorVis0: css(getTokenColor(euiTheme, colorMode, 0)),
-  euiColorVis1: css(getTokenColor(euiTheme, colorMode, 1)),
-  euiColorVis2: css(getTokenColor(euiTheme, colorMode, 2)),
-  euiColorVis3: css(getTokenColor(euiTheme, colorMode, 3)),
-  euiColorVis4: css(getTokenColor(euiTheme, colorMode, 4)),
-  euiColorVis5: css(getTokenColor(euiTheme, colorMode, 5)),
-  euiColorVis6: css(getTokenColor(euiTheme, colorMode, 6)),
-  euiColorVis7: css(getTokenColor(euiTheme, colorMode, 7)),
-  euiColorVis8: css(getTokenColor(euiTheme, colorMode, 8)),
-  euiColorVis9: css(getTokenColor(euiTheme, colorMode, 9)),
-  gray: css(getTokenColor(euiTheme, colorMode, 'gray')),
+  euiColorVis0: css(getTokenColor(euiTheme, colorMode, fill, 0)),
+  euiColorVis1: css(getTokenColor(euiTheme, colorMode, fill, 1)),
+  euiColorVis2: css(getTokenColor(euiTheme, colorMode, fill, 2)),
+  euiColorVis3: css(getTokenColor(euiTheme, colorMode, fill, 3)),
+  euiColorVis4: css(getTokenColor(euiTheme, colorMode, fill, 4)),
+  euiColorVis5: css(getTokenColor(euiTheme, colorMode, fill, 5)),
+  euiColorVis6: css(getTokenColor(euiTheme, colorMode, fill, 6)),
+  euiColorVis7: css(getTokenColor(euiTheme, colorMode, fill, 7)),
+  euiColorVis8: css(getTokenColor(euiTheme, colorMode, fill, 8)),
+  euiColorVis9: css(getTokenColor(euiTheme, colorMode, fill, 9)),
+  gray: css(getTokenColor(euiTheme, colorMode, fill, 'gray')),
   customColor: css``,
   // Fills
   light: css``,

diff --git a/src/components/token/token.test.tsx b/src/components/token/token.test.tsx
@@ -11,7 +11,8 @@ import { render } from 'enzyme';
 import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
-import { EuiToken, COLORS, SHAPES, SIZES, FILLS } from './token';
+import { EuiToken } from './token';
+import { COLORS, SHAPES, SIZES, FILLS } from './token_types';
 import { TOKEN_MAP } from './token_map';
 import { keysOf } from '../common';
 

diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx
@@ -6,77 +6,22 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
-import { CommonProps } from '../common';
 import { useEuiTheme, isColorDark, hexToRgb } from '../../services';
 
-import { IconType, EuiIcon, IconSize } from '../icon';
+import { EuiIcon, IconSize } from '../icon';
 import { EuiTokenMapType, TOKEN_MAP } from './token_map';
+import { COLORS } from './token_types';
+import type {
+  EuiTokenProps,
+  TokenColor,
+  TokenSize,
+  TokenShape,
+  TokenFill,
+} from './token_types';
 import { euiTokenStyles } from './token.styles';
 
-export const SIZES = ['xs', 's', 'm', 'l'] as const;
-export type TokenSize = typeof SIZES[number];
-
-export const SHAPES = ['circle', 'square'] as const;
-export type TokenShape = typeof SHAPES[number];
-
-export const FILLS = ['light', 'dark', 'none'] as const;
-export type TokenFill = typeof FILLS[number];
-
-export const COLORS = [
-  'euiColorVis0',
-  'euiColorVis1',
-  'euiColorVis2',
-  'euiColorVis3',
-  'euiColorVis4',
-  'euiColorVis5',
-  'euiColorVis6',
-  'euiColorVis7',
-  'euiColorVis8',
-  'euiColorVis9',
-  'gray',
-] as const;
-export type TokenColor = typeof COLORS[number];
-
-export interface TokenProps {
-  /**
-   * An EUI icon type
-   */
-  iconType: IconType;
-  /**
-   * For best results use one of the vis color names (or 'gray').
-   * Or supply your own HEX color. The `fill='light'` (lightened background) will always be overridden by `fill='dark'` (solid background).
-   * Default: `gray` for glyphs or one of the vis colors for prefab token types
-   */
-  color?: TokenColor | string;
-  /**
-   * Outer shape surrounding the icon
-   * Default: `circle`
-   */
-  shape?: TokenShape;
-  /**
-   * `light` for lightened color with border, `dark` for solid, or `none`
-   * Default: `light`
-   */
-  fill?: TokenFill;
-  /**
-   * Size of the token
-   */
-  size?: TokenSize;
-  /**
-   * The icon's title. Required for accessibility
-   */
-  title?: string;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  'aria-describedby'?: string;
-}
-
-export type EuiTokenProps = CommonProps &
-  TokenProps &
-  Omit<HTMLAttributes<HTMLSpanElement>, 'title'>;
-
 const isTokenColor = (color: string): color is TokenColor =>
   COLORS.includes(color as TokenColor);
 
@@ -120,13 +65,13 @@ export const EuiToken: FunctionComponent<EuiTokenProps> = ({
   let finalFill = fill || 'light';
 
   const euiTheme = useEuiTheme();
-  const styles = euiTokenStyles(euiTheme);
+  const styles = euiTokenStyles(euiTheme, finalFill);
 
   let cssStyles = [
     styles.euiToken,
-    styles[finalShape],
-    styles[finalFill],
-    styles[size],
+    styles[finalShape as TokenShape],
+    styles[finalFill as TokenFill],
+    styles[size as TokenSize],
   ];
 
   let finalStyle = style;

diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { TokenProps } from './token';
+import type { TokenProps } from './token_types';
 
 export type EuiTokenMapType =
   | 'tokenAlias'

diff --git a/src/components/token/token_types.ts b/src/components/token/token_types.ts
@@ -0,0 +1,72 @@
+/*
+ * 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 { HTMLAttributes } from 'react';
+import { CommonProps } from '../common';
+import { IconType } from '../icon';
+
+export const SIZES = ['xs', 's', 'm', 'l'] as const;
+export type TokenSize = typeof SIZES[number];
+
+export const SHAPES = ['circle', 'square'] as const;
+export type TokenShape = typeof SHAPES[number];
+
+export const FILLS = ['light', 'dark', 'none'] as const;
+export type TokenFill = typeof FILLS[number];
+
+export const COLORS = [
+  'euiColorVis0',
+  'euiColorVis1',
+  'euiColorVis2',
+  'euiColorVis3',
+  'euiColorVis4',
+  'euiColorVis5',
+  'euiColorVis6',
+  'euiColorVis7',
+  'euiColorVis8',
+  'euiColorVis9',
+  'gray',
+] as const;
+export type TokenColor = typeof COLORS[number];
+
+export interface TokenProps {
+  /**
+   * An EUI icon type
+   */
+  iconType: IconType;
+  /**
+   * For best results use one of the vis color names (or 'gray').
+   * Or supply your own HEX color. The `fill='light'` (lightened background) will always be overridden by `fill='dark'` (solid background).
+   * Default: `gray` for glyphs or one of the vis colors for prefab token types
+   */
+  color?: TokenColor | string;
+  /**
+   * Outer shape surrounding the icon
+   * Default: `circle`
+   */
+  shape?: TokenShape;
+  /**
+   * `light` for lightened color with border, `dark` for solid, or `none`
+   * Default: `light`
+   */
+  fill?: TokenFill;
+  /**
+   * Size of the token
+   */
+  size?: TokenSize;
+  /**
+   * The icon's title. Required for accessibility
+   */
+  title?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+}
+
+export type EuiTokenProps = CommonProps &
+  TokenProps &
+  Omit<HTMLAttributes<HTMLSpanElement>, 'title'>;