[FEATURE] CSS-in-JS via emotion, initial release

.babelrc.js

@@ -12,7 +12,7 @@ module.exports = {
       "modules": process.env.BABEL_MODULES ? process.env.BABEL_MODULES === 'false' ? false : process.env.BABEL_MODULES : "commonjs" // babel's default is commonjs
     }],
     ["@babel/typescript", { isTSX: true, allExtensions: true }],
-    "@babel/react"
+    "@babel/react",
   ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import",

.eslintrc.js

@@ -37,7 +37,7 @@ module.exports = {
     'prettier/standard',
     'plugin:prettier/recommended',
   ],
-  plugins: ['jsx-a11y', 'prettier', 'local', 'react-hooks'],
+  plugins: ['jsx-a11y', 'prettier', 'local', 'react-hooks', '@emotion'],
   rules: {
     'prefer-template': 'error',
     'local/i18n': 'error',

CHANGELOG.md

@@ -1,6 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `37.4.0`.
+## Feature: Emotion ([#4511](https://github.com/elastic/eui/pull/4511))
+
+- Added `EuiThemeProvider`, a React context provider for theme values and color mode selection
+- Added `useEuiTheme` React hook, and `withEuiTheme` React HOC for consuming the EuiTheme
+- Added global `EuiTheme` tokens for `colors`, `size`, `font`, `border`, `animation`, and `breakpoint`
+- Added color services for `makeHighContrastColor`, `makeDisabledContrastColor`, `shade`, `tint`, `transparentize`, `saturate`, `desaturate`, `lightness`
 
 ## [`37.4.0`](https://github.com/elastic/eui/tree/v37.4.0)
 

package.json

@@ -104,6 +104,9 @@
     "@elastic/charts": "^34.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
+    "@emotion/babel-preset-css-prop": "^11.0.0",
+    "@emotion/eslint-plugin": "^11.0.0",
+    "@emotion/react": "^11.1.1",
     "@svgr/core": "5.4.0",
     "@svgr/plugin-svgo": "^4.0.3",
     "@types/classnames": "^2.2.10",

scripts/babel/proptypes-from-ts-props/index.js

@@ -770,7 +770,7 @@ function getPropTypesForNode(node, optional, state) {
           types.arrayExpression(
             node.properties.map(property =>
               types.stringLiteral(
-                property.key.name || property.key.name || property.key.value
+                property.key ? property.key.name || property.key.value : property.argument.name
               )
             )
           ),

src-docs/.babelrc.js

@@ -2,6 +2,12 @@ const baseConfig = require('../.babelrc.js');
 const index = baseConfig.plugins.indexOf(
   './scripts/babel/proptypes-from-ts-props'
 );
+baseConfig.presets.push([
+  '@emotion/babel-preset-css-prop',
+  {
+    labelFormat: '[local]',
+  },
+]);
 baseConfig.plugins.splice(
   index + 1,
   0,

src-docs/src/components/with_theme/theme_context.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { EUI_THEMES, EUI_THEME } from '../../../../src/themes';
 // @ts-ignore importing from a JS file
 import { applyTheme } from '../../services';
+import { EuiThemeProvider } from '../../../../src/services';
+import { EuiThemeAmsterdam } from '../../../../src/themes/eui-amsterdam/theme';
+import { EuiThemeDefault } from '../../../../src/themes/eui/theme';
 
 const THEME_NAMES = EUI_THEMES.map(({ value }) => value);
 
@@ -48,7 +51,14 @@ export class ThemeProvider extends React.Component<object, State> {
           changeTheme: this.changeTheme,
         }}
       >
-        {children}
+        <EuiThemeProvider
+          theme={
+            theme.includes('amsterdam') ? EuiThemeAmsterdam : EuiThemeDefault
+          }
+          colorMode={theme.includes('light') ? 'light' : 'dark'}
+        >
+          {children}
+        </EuiThemeProvider>
       </ThemeContext.Provider>
     );
   }

src-docs/src/index.d.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+// TODO: Delete this file when the @emotion reference is added to `src/index.d.ts`
+
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference types="@emotion/react/types/css-prop" />

src-docs/src/routes.js

@@ -24,7 +24,7 @@ import WritingGuidelines from './views/guidelines/writing';
 
 import { ColorPaletteExample } from './views/color_palette/color_palette_example';
 
-import { IsColorDarkExample } from './views/is_color_dark/is_color_dark_example';
+import { ColorExample } from './views/color/color_example';
 
 import { PrettyDurationExample } from './views/pretty_duration/pretty_duration_example';
 
@@ -222,6 +222,9 @@ import { I18nTokens } from './views/package/i18n_tokens';
 
 import { SuperSelectExample } from './views/super_select/super_select_example';
 
+import { ThemeExample } from './views/theme/theme_example';
+import ThemeValues from './views/theme/values';
+
 /** Elastic Charts */
 
 import { ElasticChartsThemingExample } from './views/elastic_charts/theming_example';
@@ -460,7 +463,7 @@ const navigation = [
     items: [
       AccessibilityExample,
       BeaconExample,
-      IsColorDarkExample,
+      ColorExample,
       ColorPaletteExample,
       CopyExample,
       UtilityClassesExample,
@@ -482,6 +485,17 @@ const navigation = [
       WindowEventExample,
     ].map((example) => createExample(example)),
   },
+  {
+    name: 'Theming',
+    items: [
+      createExample(ThemeExample, 'Theme provider'),
+      {
+        name: 'Global values',
+        component: ThemeValues,
+        isNew: true,
+      },
+    ],
+  },
   {
     name: 'Package',
     items: [Changelog, I18nTokens],

src-docs/src/services/playground/knobs.js

@@ -96,7 +96,38 @@ export const humanizeType = (type) => {
       humanizedType = type.name;
   }
 
-  return humanizedType;
+  let typeMarkup;
+
+  if (humanizedType) {
+    typeMarkup = humanizedType;
+
+    const functionMatches = [
+      ...humanizedType.matchAll(/\([^=]*\) =>\s\w*\)*/g),
+    ];
+
+    const types = humanizedType.split(/\([^=]*\) =>\s\w*\)*/);
+
+    if (functionMatches.length > 0) {
+      let elements = '';
+      let j = 0;
+      for (let i = 0; i < types.length; i++) {
+        if (functionMatches[j]) {
+          elements =
+            `${elements}` +
+            `${types[i]}` +
+            '\n' +
+            `${functionMatches[j][0]}` +
+            '\n';
+          j++;
+        } else {
+          elements = `${elements}` + `${types[i]}` + '\n';
+        }
+      }
+      typeMarkup = elements;
+    }
+  }
+
+  return typeMarkup || humanizedType;
 };
 
 const getTooltip = (description, type, name) => (
@@ -364,87 +395,46 @@ const Knob = ({
 };
 
 const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
-  return knobNames.map((name, idx) => {
-    const codeBlockProps = {
-      className: 'guideSection__tableCodeBlock',
-      paddingSize: 'none',
-      language: 'ts',
-    };
-
-    /**
-     * TS Type
-     */
-    let humanizedType;
-
-    if (
-      state[name].custom &&
-      state[name].custom.origin &&
-      state[name].custom.origin.type
-    )
-      humanizedType = humanizeType(state[name].custom.origin.type);
-
-    let typeMarkup;
-
-    if (humanizedType) {
-      typeMarkup = humanizedType && (
-        <EuiCodeBlock {...codeBlockProps}>{humanizedType}</EuiCodeBlock>
-      );
-
-      const functionMatches = [
-        ...humanizedType.matchAll(/\([^=]*\) =>\s\w*\)*/g),
-      ];
-
-      const types = humanizedType.split(/\([^=]*\) =>\s\w*\)*/);
-
-      if (functionMatches.length > 0) {
-        let elements = '';
-        let j = 0;
-        for (let i = 0; i < types.length; i++) {
-          if (functionMatches[j]) {
-            elements =
-              `${elements}` +
-              `${types[i]}` +
-              '\n' +
-              `${functionMatches[j][0]}` +
-              '\n';
-            j++;
-          } else {
-            elements = `${elements}` + `${types[i]}` + '\n';
-          }
-        }
-        typeMarkup = (
-          <EuiCodeBlock {...codeBlockProps}>{elements}</EuiCodeBlock>
-        );
-      }
-    }
+  const codeBlockProps = {
+    className: 'guideSection__tableCodeBlock',
+    paddingSize: 'none',
+    language: 'ts',
+  };
 
+  return knobNames.map((name, idx) => {
     /**
      * Prop name
      */
     let humanizedName = <strong className="eui-textBreakNormal">{name}</strong>;
 
-    if (
-      state[name].custom &&
-      state[name].custom.origin &&
-      state[name].custom.origin.required
-    ) {
+    if (state[name].custom?.origin?.required) {
       humanizedName = (
         <>
           {humanizedName} <EuiTextColor color="danger">(required)</EuiTextColor>
         </>
       );
     }
 
+    /**
+     * TS Type
+     */
+    let typeMarkup;
+
+    if (state[name].custom?.origin?.type) {
+      const humanizedType = humanizeType(state[name].custom.origin.type);
+
+      if (humanizedType) {
+        typeMarkup = (
+          <EuiCodeBlock {...codeBlockProps}>{humanizedType}</EuiCodeBlock>
+        );
+      }
+    }
+
     /**
      * Default value
      */
     let defaultValueMarkup;
-    if (
-      // !isPlayground &&
-      state[name].custom &&
-      state[name].custom.origin &&
-      state[name].custom.origin.defaultValue
-    ) {
+    if (state[name].custom?.origin?.defaultValue) {
       const defaultValue = state[name].custom.origin.defaultValue;
       defaultValueMarkup = (
         <EuiText size="xs">

src-docs/src/views/button/button_example.js

@@ -151,7 +151,7 @@ const buttonGroupSnippet = [
   options={[
     {
       id,
-      label'
+      label
     }
   ]}
 />`,
@@ -163,7 +163,7 @@ const buttonGroupSnippet = [
   options={[
     {
       id,
-      label'
+      label
     }
   ]}
 />`,

src-docs/src/views/code/code_example.js

@@ -68,9 +68,7 @@ export const CodeExample = {
           <EuiLink external href="https://prismjs.com/">
             library
           </EuiLink>
-          .
-          <br />
-          The <EuiCode>language</EuiCode> prop can also be omitted to simply
+          . The <EuiCode>language</EuiCode> prop can also be omitted to simply
           render formatted but unhighlighted code.
         </p>
         <p>