EUI Theme System POC

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary",
     "@elastic/ems-client": "7.11.0",
-    "@elastic/eui": "31.4.0",
+    "@elastic/eui": "/Users/thompsongl/src/eui/elastic-eui-31.5.0.tgz",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/node-crypto": "1.2.1",
@@ -107,6 +107,7 @@
     "@elastic/request-crypto": "1.1.4",
     "@elastic/safer-lodash-set": "link:packages/elastic-safer-lodash-set",
     "@elastic/search-ui-app-search-connector": "^1.5.0",
+    "@emotion/react": "^11.1.4",
     "@hapi/boom": "^9.1.1",
     "@hapi/cookie": "^11.0.2",
     "@hapi/good-squeeze": "6.0.0",
@@ -358,6 +359,7 @@
     "@elastic/makelogs": "^6.0.0",
     "@elastic/maki": "6.3.0",
     "@elastic/ui-ace": "0.2.3",
+    "@emotion/babel-preset-css-prop": "^11.0.0",
     "@istanbuljs/schema": "^0.1.2",
     "@jest/reporters": "^26.5.2",
     "@kbn/babel-code-parser": "link:packages/kbn-babel-code-parser",

packages/kbn-babel-preset/webpack_preset.js

@@ -20,12 +20,17 @@ module.exports = () => {
         },
       ],
       require('./common_preset'),
-    ],
-    plugins: [
       [
-        require.resolve('babel-plugin-styled-components'),
+        require.resolve('@emotion/babel-preset-css-prop'),
         {
-          fileName: false,
+          labelFormat: '[local]',
+          // importMap: {
+          //   '@elastic/eui': {
+          //     css: {
+          //       canonicalImport: ['@emotion/react', 'css'],
+          //     },
+          //   },
+          // },
         },
       ],
     ],
@@ -42,5 +47,11 @@ module.exports = () => {
         ],
       },
     },
+    overrides: [
+      {
+        exclude: [/x-pack[\/\\]plugins[\/\\]canvas[\/\\]/],
+        plugins: [[require.resolve('babel-plugin-styled-components')]],
+      },
+    ],
   };
 };

packages/kbn-ui-shared-deps/entry.js

@@ -28,6 +28,7 @@ export const ReactDomServer = require('react-dom/server');
 export const ReactRouter = require('react-router'); // eslint-disable-line
 export const ReactRouterDom = require('react-router-dom');
 export const StyledComponents = require('styled-components');
+export const EmotionReact = require('@emotion/react');
 
 Moment.tz.load(require('moment-timezone/data/packed/latest.json'));
 

packages/kbn-ui-shared-deps/index.js

@@ -31,6 +31,7 @@ exports.externals = {
   'react-router': '__kbnSharedDeps__.ReactRouter',
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   'styled-components': '__kbnSharedDeps__.StyledComponents',
+  '@emotion/react': '__kbnSharedDeps__.EmotionReact',
   '@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
   '@kbn/ui-shared-deps/theme': '__kbnSharedDeps__.Theme',
   // this is how plugins/consumers from npm load monaco

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx

@@ -8,6 +8,7 @@
 import { EuiIcon } from '@elastic/eui';
 import PropTypes from 'prop-types';
 import React, { ChangeEvent, FocusEvent, FunctionComponent } from 'react';
+import { css } from '@emotion/react';
 import { ComponentStrings } from '../../../../../i18n';
 
 const { DropdownFilter: strings } = ComponentStrings;
@@ -60,10 +61,15 @@ export const DropdownFilter: FunctionComponent<Props> = ({
     );
   });
 
+  const styles = css`
+    color: #ff0000;
+  `;
+
   /* eslint-disable jsx-a11y/no-onchange */
   return (
     <div className="canvasDropdownFilter">
       <select
+        css={styles}
         className="canvasDropdownFilter__select"
         value={value}
         onChange={changeHandler}

x-pack/plugins/canvas/public/application.tsx

@@ -12,6 +12,10 @@ import { I18nProvider } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { Provider } from 'react-redux';
 import { BehaviorSubject } from 'rxjs';
+import {
+  EuiThemeProvider,
+  // DefaultEuiTheme
+} from '@elastic/eui';
 
 import { AppMountParameters, CoreStart, CoreSetup, AppUpdater } from 'kibana/public';
 
@@ -56,9 +60,22 @@ export const renderApp = (
     <KibanaContextProvider services={{ ...plugins, ...coreStart }}>
       <ServicesProvider providers={services}>
         <I18nProvider>
-          <Provider store={canvasStore}>
-            <App />
-          </Provider>
+          <EuiThemeProvider
+          // theme={DefaultEuiTheme}
+          // colorMode="light"
+          // overrides={{
+          //   light: {
+          //     colors: { euiColorPrimary: '#8A07BD' },
+          //   },
+          //   dark: {
+          //     colors: { euiColorPrimary: '#BD07A5' },
+          //   },
+          // }}
+          >
+            <Provider store={canvasStore}>
+              <App />
+            </Provider>
+          </EuiThemeProvider>
         </I18nProvider>
       </ServicesProvider>
     </KibanaContextProvider>,

x-pack/plugins/canvas/public/components/workpad_config/workpad_config.component.tsx

@@ -21,6 +21,7 @@ import {
   EuiTextArea,
   EuiAccordion,
   EuiButton,
+  useEuiTheme,
 } from '@elastic/eui';
 
 import { VarConfig } from '../var_config';
@@ -46,6 +47,7 @@ export interface Props {
 }
 
 export const WorkpadConfig: FunctionComponent<Props> = (props) => {
+  const [theme] = useEuiTheme();
   const [css, setCSS] = useState(props.css);
   const { size, name, setSize, setName, setWorkpadCSS, variables, setWorkpadVariables } = props;
   const rotate = () => setSize({ width: size.height, height: size.width });
@@ -72,7 +74,7 @@ export const WorkpadConfig: FunctionComponent<Props> = (props) => {
   return (
     <div>
       <div className="canvasLayout__sidebarHeaderWorkpad">
-        <EuiTitle size="xs">
+        <EuiTitle size="xs" css={{ color: theme.colors.euiColorPrimary }}>
           <h4>{strings.getTitle()}</h4>
         </EuiTitle>
       </div>

x-pack/plugins/canvas/public/components/workpad_manager/workpad_manager.js

@@ -7,6 +7,7 @@
 
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
 import {
   EuiTabbedContent,
   EuiModalHeader,
@@ -15,6 +16,7 @@ import {
   EuiSpacer,
   EuiFlexGroup,
   EuiFlexItem,
+  useEuiTheme,
 } from '@elastic/eui';
 import { WorkpadLoader } from '../workpad_loader';
 import { WorkpadTemplates } from '../workpad_templates';
@@ -23,6 +25,7 @@ import { ComponentStrings } from '../../../i18n';
 const { WorkpadManager: strings } = ComponentStrings;
 
 export const WorkpadManager = ({ onClose }) => {
+  const [theme] = useEuiTheme();
   const tabs = [
     {
       id: 'workpadLoader',
@@ -45,12 +48,18 @@ export const WorkpadManager = ({ onClose }) => {
       ),
     },
   ];
+
+  const styles = css`
+    color: ${theme.colors.euiColorPrimary};
+    text-decoration: underline;
+  `;
+
   return (
     <Fragment>
       <EuiModalHeader className="canvasHomeApp__modalHeader">
         <EuiFlexGroup alignItems="center" gutterSize="s">
           <EuiFlexItem grow={false}>
-            <EuiModalHeaderTitle>{strings.getModalTitle()}</EuiModalHeaderTitle>
+            <EuiModalHeaderTitle css={styles}>{strings.getModalTitle()}</EuiModalHeaderTitle>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiModalHeader>