[CSS-in-JS] Context and foundation

.babelrc.js

@@ -12,7 +12,13 @@ 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",
+    [
+      "@emotion/babel-preset-css-prop",
+      {
+        "labelFormat": "[local]"
+      },
+    ],
   ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import",

.eslintrc.js

@@ -1,3 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 const APACHE_2_0_LICENSE_HEADER = `
 /*
  * Licensed to Elasticsearch B.V. under one or more contributor
@@ -48,7 +67,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',

package.json

@@ -97,6 +97,10 @@
     "@elastic/charts": "^24.5.1",
     "@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/jest": "^11.1.0",
+    "@emotion/react": "^11.1.1",
     "@svgr/core": "5.4.0",
     "@svgr/plugin-svgo": "^4.0.3",
     "@types/classnames": "^2.2.10",
@@ -213,6 +217,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
+    "@emotion/react": "11.x",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "moment": "^2.13.0",

scripts/a11y-testing.js

@@ -47,6 +47,7 @@ const docsPages = async (root, page) => {
     `${root}#/tabular-content/data-grid-virtualization`,
     `${root}#/elastic-charts/creating-charts`,
     `${root}#/elastic-charts/part-to-whole-comparisons`,
+    `${root}#/temporary/canopy`,
   ];
 
   return [

scripts/jest/config.json

@@ -45,6 +45,7 @@
     "^.+\\.(js|tsx?)$": "babel-jest"
   },
   "snapshotSerializers": [
-    "<rootDir>/node_modules/enzyme-to-json/serializer"
+    "<rootDir>/node_modules/enzyme-to-json/serializer",
+    "@emotion/jest/enzyme-serializer"
   ]
 }

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

@@ -2,6 +2,11 @@ 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,
+  EuiThemeDefault,
+  EuiThemeAmsterdam,
+} from '../../../../src/services';
 
 const THEME_NAMES = EUI_THEMES.map(({ value }) => value);
 
@@ -47,7 +52,13 @@ export class ThemeProvider extends React.Component<object, State> {
           theme,
           changeTheme: this.changeTheme,
         }}>
-        {children}
+        <EuiThemeProvider
+          theme={
+            theme.includes('amsterdam') ? EuiThemeAmsterdam : EuiThemeDefault
+          }
+          colorMode={theme.includes('light') ? 'light' : 'dark'}>
+          {children}
+        </EuiThemeProvider>
       </ThemeContext.Provider>
     );
   }

src-docs/src/routes.js

@@ -224,6 +224,11 @@ import { ElasticChartsCategoryExample } from './views/elastic_charts/category_ex
 import { ElasticChartsSparklinesExample } from './views/elastic_charts/sparklines_example';
 
 import { ElasticChartsPieExample } from './views/elastic_charts/pie_example';
+
+/** ! Temporary ! */
+
+import Canopy from './views/emotion/canopy';
+
 /**
  * Lowercases input and replaces spaces with hyphens:
  * e.g. 'GridView Example' -> 'gridview-example'
@@ -306,6 +311,18 @@ const createExample = (example, customTitle) => {
 };
 
 const navigation = [
+  {
+    name: 'Temporary',
+    items: [
+      createExample(
+        {
+          intro: <Canopy />,
+          sections: [],
+        },
+        'Canopy'
+      ),
+    ],
+  },
   {
     name: 'Guidelines',
     items: [

src-docs/src/views/emotion/canopy.tsx

@@ -0,0 +1,214 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from 'react';
+import { css } from '@emotion/react';
+import chroma from 'chroma-js';
+import { EuiSpacer } from '../../../../src/components/spacer';
+import { EuiIcon } from '../../../../src/components/icon';
+import {
+  mergeDeep,
+  useEuiTheme,
+  withEuiTheme,
+  EuiThemeProvider,
+  computed,
+  euiThemeDefault,
+  buildTheme,
+} from '../../../../src/services';
+
+const View = () => {
+  const [theme, colorMode] = useEuiTheme();
+  return (
+    <div css={{ display: 'flex' }}>
+      <div>
+        {colorMode}
+        <pre>
+          <code>{JSON.stringify(theme, null, 2)}</code>
+        </pre>
+      </div>
+      <div>
+        <h3>
+          <EuiIcon
+            aria-hidden="true"
+            type="stopFilled"
+            size="xxl"
+            css={{ color: theme.colors.euiColorPrimary }}
+          />
+        </h3>
+        <h3>
+          <EuiIcon
+            aria-hidden="true"
+            type="stopFilled"
+            size="xxl"
+            css={{ color: theme.colors.euiColorSecondary }}
+          />
+        </h3>
+        <h3>
+          <EuiIcon
+            aria-hidden="true"
+            type="stopFilled"
+            size="xxl"
+            css={{ color: theme.colors.euiTextColor }}
+          />
+        </h3>
+      </div>
+    </div>
+  );
+};
+
+const View3 = () => {
+  const overrides = {
+    colors: {
+      light: { euiColorPrimary: '#8A07BD' },
+      dark: { euiColorPrimary: '#bd07a5' },
+    },
+  };
+  return (
+    <>
+      <View />
+
+      <EuiSpacer />
+      <EuiThemeProvider overrides={overrides}>
+        <em>Overriding primary</em>
+        <View />
+      </EuiThemeProvider>
+    </>
+  );
+};
+
+const View2 = () => {
+  const overrides = {
+    colors: {
+      light: {
+        euiColorSecondary: computed(
+          ['colors.euiColorPrimary'],
+          () => '#85e89d'
+        ),
+      },
+      dark: { euiColorSecondary: '#f0fff4' },
+    },
+  };
+  return (
+    <>
+      <EuiSpacer />
+      <EuiThemeProvider overrides={overrides}>
+        <em>Overriding secondary</em>
+        <View />
+      </EuiThemeProvider>
+    </>
+  );
+};
+
+// eslint-disable-next-line react/prefer-stateless-function
+class Block extends React.Component<any> {
+  render() {
+    const { theme, ...props } = this.props;
+    // TODO: TS autocomplete not working
+    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={blockStyle}
+        />
+      </div>
+    );
+  }
+}
+const BlockWithTheme = withEuiTheme(Block);
+
+export default () => {
+  // const [colorMode, setColorMode] = React.useState('light');
+  const toggleTheme = () => {
+    // setColorMode((mode) => (mode === 'light' ? 'dark' : 'light'));
+  };
+  const [overrides, setOverrides] = React.useState({});
+  const lightColors = () => {
+    setOverrides(
+      mergeDeep(overrides, {
+        colors: {
+          light: {
+            euiColorPrimary: chroma.random().hex(),
+          },
+        },
+      })
+    );
+  };
+  const darkColors = () => {
+    setOverrides(
+      mergeDeep(overrides, {
+        colors: {
+          dark: {
+            euiColorPrimary: chroma.random().hex(),
+          },
+        },
+      })
+    );
+  };
+
+  const newTheme = buildTheme(
+    {
+      ...euiThemeDefault,
+      custom: '#000',
+    },
+    'CUSTOM'
+  );
+
+  return (
+    <>
+      <EuiThemeProvider
+        // theme={DefaultEuiTheme}
+        // colorMode={colorMode}
+        overrides={overrides}>
+        <button type="button" onClick={toggleTheme}>
+          {/* @ts-ignore strike */}
+          <strike>Toggle Color Mode!</strike> Use global config
+        </button>
+        <EuiSpacer />
+        <button type="button" onClick={lightColors}>
+          Randomize Light Primary!
+        </button>
+        {'    '}
+        <button type="button" onClick={darkColors}>
+          Randomize Dark Primary!
+        </button>
+        <EuiSpacer />
+        <em>Default view</em>
+        <View />
+        <View2 />
+        <EuiSpacer />
+        <EuiThemeProvider<{ custom: string }>
+          theme={newTheme}
+          colorMode="inverse">
+          <em>Inverse colorMode</em>
+          <View3 />
+          <em>withEuiTheme</em>
+          <BlockWithTheme />
+        </EuiThemeProvider>
+      </EuiThemeProvider>
+      <EuiSpacer />
+    </>
+  );
+};

src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -54,9 +54,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
         onResize={[Function]}
       >
         <div>
-          <div
-            className=""
-          />
+          <div />
         </div>
       </EuiResizeObserver>
     </div>
@@ -118,9 +116,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
         onResize={[Function]}
       >
         <div>
-          <div
-            className=""
-          />
+          <div />
         </div>
       </EuiResizeObserver>
     </div>

src/components/basic_table/__snapshots__/expanded_item_actions.test.tsx.snap

@@ -10,7 +10,6 @@ exports[`ExpandedItemActions render 1`] = `
         "onClick": [Function],
       }
     }
-    className=""
     enabled={true}
     item={
       Object {
@@ -27,7 +26,6 @@ exports[`ExpandedItemActions render 1`] = `
         "render": [Function],
       }
     }
-    className=""
     enabled={true}
     index={1}
     item={