theme: colorVis and borders, sizes update

elastic · Feb 3, 2021 · 875c86d · 875c86d
1 parent 28909a4
commit 875c86d
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 11 deletions.
diff --git a/src-docs/src/views/emotion/canopy.tsx b/src-docs/src/views/emotion/canopy.tsx
@@ -18,7 +18,7 @@
  */
 
 import * as React from 'react';
-// import { css } from '@emotion/react';
+import { css } from '@emotion/react';
 import chroma from 'chroma-js';
 import { EuiSpacer } from '../../../../src/components/spacer';
 import { EuiIcon } from '../../../../src/components/icon';
@@ -118,13 +118,18 @@ const View2 = () => {
 class Block extends React.Component<any> {
   render() {
     const { theme, ...props } = this.props;
+    const blockStyle = css`
+      color: ${theme.theme.colors.euiColorPrimary};
+      border-radius: ${theme.theme.borders.euiBorderRadiusSmall};
+      border: ${theme.theme.borders.euiBorderEditable};
+    `;
     return (
       <div {...props}>
         <EuiIcon
           aria-hidden="true"
           type="stopFilled"
           size="xxl"
-          css={{ color: theme.theme.colors.euiColorPrimary }}
+          css={blockStyle}
         />
       </div>
     );

diff --git a/src/services/theme/theme.ts b/src/services/theme/theme.ts
@@ -204,21 +204,142 @@ export const dark = {
   ),
 };
 
+// Visualization colors
+
+// Maps allow for easier JSON usage
+// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file
+// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
+const euiPaletteColorBlind = {
+  euiColorVis0: {
+    graphic: '#54B399',
+    behindText: '#6DCCB1',
+  },
+  euiColorVis1: {
+    graphic: '#6092C0',
+    behindText: '#79AAD9',
+  },
+  euiColorVis2: {
+    graphic: '#D36086',
+    behindText: '#EE789D',
+  },
+  euiColorVis3: {
+    graphic: '#9170B8',
+    behindText: '#A987D1',
+  },
+  euiColorVis4: {
+    graphic: '#CA8EAE',
+    behindText: '#E4A6C7',
+  },
+  euiColorVis5: {
+    graphic: '#D6BF57',
+    behindText: '#F1D86F',
+  },
+  euiColorVis6: {
+    graphic: '#B9A888',
+    behindText: '#D2C0A0',
+  },
+  euiColorVis7: {
+    graphic: '#DA8B45',
+    behindText: '#F5A35C',
+  },
+  euiColorVis8: {
+    graphic: '#AA6556',
+    behindText: '#C47C6C',
+  },
+  euiColorVis9: {
+    graphic: '#E7664C',
+    behindText: '#FF7E62',
+  },
+};
+
+const colorVis = {
+  euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic,
+  euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic,
+  euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic,
+  euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic,
+  euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic,
+  euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic,
+  euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic,
+  euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic,
+  euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic,
+  euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic,
+
+  euiColorVis0_behindText: euiPaletteColorBlind.euiColorVis0.behindText,
+  euiColorVis1_behindText: euiPaletteColorBlind.euiColorVis1.behindText,
+  euiColorVis2_behindText: euiPaletteColorBlind.euiColorVis2.behindText,
+  euiColorVis3_behindText: euiPaletteColorBlind.euiColorVis3.behindText,
+  euiColorVis4_behindText: euiPaletteColorBlind.euiColorVis4.behindText,
+  euiColorVis5_behindText: euiPaletteColorBlind.euiColorVis5.behindText,
+  euiColorVis6_behindText: euiPaletteColorBlind.euiColorVis6.behindText,
+  euiColorVis7_behindText: euiPaletteColorBlind.euiColorVis7.behindText,
+  euiColorVis8_behindText: euiPaletteColorBlind.euiColorVis8.behindText,
+  euiColorVis9_behindText: euiPaletteColorBlind.euiColorVis9.behindText,
+};
+
+// TODO: `calc()` probably not the right solution
 const sizes = {
-  euiSize: 16,
-  euiSizeXS: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 0.25),
-  euiSizeS: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 0.5),
-  euiSizeM: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 0.75),
-  euiSizeL: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 1.5),
-  euiSizeXL: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 2),
-  euiSizeXXL: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 2.5),
+  euiSize: '16px',
+  euiSizeXS: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 0.25)`
+  ),
+  euiSizeS: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 0.5)`
+  ),
+  euiSizeM: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 0.75)`
+  ),
+  euiSizeL: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 1.5)`
+  ),
+  euiSizeXL: computed(['sizes.euiSize'], ([euiSize]) => `calc(${euiSize} * 2)`),
+  euiSizeXXL: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 2.5)`
+  ),
 
-  euiButtonMinWidth: computed(['sizes.euiSize'], ([euiSize]) => euiSize * 7),
+  euiButtonMinWidth: computed(
+    ['sizes.euiSize'],
+    ([euiSize]) => `calc(${euiSize} * 7)`
+  ),
 
   euiScrollBar: computed(['sizes.euiSize'], ([euiSize]) => euiSize),
   euiScrollBarCorner: computed(
     ['sizes.euiSizeS'],
-    ([euiSizeS]) => euiSizeS * 0.75
+    ([euiSizeS]) => `calc(${euiSizeS} * 0.75)`
+  ),
+};
+
+const borders = {
+  euiBorderWidthThin: '1px',
+  euiBorderWidthThick: '2px',
+
+  euiBorderColor: computed(
+    ['colors.euiColorLightShade'],
+    ([euiColorLightShade]) => euiColorLightShade
+  ),
+  euiBorderRadius: '4px',
+  euiBorderRadiusSmall: computed(
+    ['borders.euiBorderRadius'],
+    ([euiBorderRadius]) => `calc(${euiBorderRadius} / 2)`
+  ),
+  euiBorderThick: computed(
+    ['borders.euiBorderWidthThick', 'borders.euiBorderColor'],
+    ([euiBorderWidthThick, euiBorderColor]) =>
+      `${euiBorderWidthThick} solid ${euiBorderColor}`
+  ),
+  euiBorderThin: computed(
+    ['borders.euiBorderWidthThin', 'borders.euiBorderColor'],
+    ([euiBorderWidthThin, euiBorderColor]) =>
+      `${euiBorderWidthThin} solid ${euiBorderColor}`
+  ),
+  euiBorderEditable: computed(
+    ['borders.euiBorderWidthThick', 'borders.euiBorderColor'],
+    ([euiBorderWidthThick, euiBorderColor]) =>
+      `${euiBorderWidthThick} dotted ${euiBorderColor}`
   ),
 };
 
@@ -227,7 +348,9 @@ export const unbuiltDefaultEuiTheme = {
     light,
     dark,
   },
+  colorVis,
   sizes,
+  borders,
   buttons: {
     [COLOR_MODE_KEY]: {
       light: {

diff --git a/src/services/theme/types.ts b/src/services/theme/types.ts
@@ -105,4 +105,9 @@ export type EuiThemeColorMode =
 // The actual shape of a theme is still in flux
 export interface EuiTheme {
   [key: string]: any;
+  // colors: { [key: string]: any };
+  // colorVis: { [key: string]: any };
+  // sizes: { [key: string]: any };
+  // borders: { [key: string]: any };
+  // buttons: { [key: string]: any };
 }