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.0.0",
+ "@elastic/eui": "/Users/thompsongl/src/eui/elastic-eui-31.3.0-h.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",
@@ -357,6 +358,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

@@ -7,6 +7,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;
@@ -59,10 +60,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

@@ -11,6 +11,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';
 
@@ -55,9 +59,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

@@ -20,6 +20,7 @@ import {
  EuiTextArea,
  EuiAccordion,
  EuiButton,
+ useEuiTheme,
 } from '@elastic/eui';
 
 import { VarConfig } from '../var_config';
@@ -45,6 +46,7 @@ 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 });
@@ -71,7 +73,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

@@ -6,6 +6,7 @@
 
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
 import {
  EuiTabbedContent,
  EuiModalHeader,
@@ -14,6 +15,7 @@ import {
  EuiSpacer,
  EuiFlexGroup,
  EuiFlexItem,
+ useEuiTheme,
 } from '@elastic/eui';
 import { WorkpadLoader } from '../workpad_loader';
 import { WorkpadTemplates } from '../workpad_templates';
@@ -22,6 +24,7 @@ import { ComponentStrings } from '../../../i18n';
 const { WorkpadManager: strings } = ComponentStrings;
 
 export const WorkpadManager = ({ onClose }) => {
+ const [theme] = useEuiTheme();
  const tabs = [
  {
  id: 'workpadLoader',
@@ -44,12 +47,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>