[Code]: remove manually created theme file to avoid type errors using…

… new EUI

x-pack/plugins/code/public/components/admin_page/admin.tsx

@@ -12,7 +12,7 @@ import { EuiTab, EuiTabs } from '@elastic/eui';
 
 import styled from 'styled-components';
 
-import { euiSizeXl } from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { parse as parseQuery } from 'querystring';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { Repository } from '../../../model';
@@ -22,7 +22,7 @@ import { LanguageSeverTab } from './language_server_tab';
 import { ProjectTab } from './project_tab';
 
 const Container = styled.div`
-  margin: 0 ${euiSizeXl};
+  margin: 0 ${theme.euiSizeXl};
   flex-grow: 1;
 `;
 

x-pack/plugins/code/public/components/admin_page/project_settings.tsx

@@ -17,7 +17,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import { euiSizeS } from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React, { ChangeEvent } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -32,7 +32,7 @@ import { JavaIcon, TypeScriptIcon } from '../shared/icons';
 const IconContainer = styled.div`
   display: inline-block;
   position: relative;
-  top: ${euiSizeS};
+  top: ${theme.euiSizeS};
 `;
 
 const defaultConfig = {

x-pack/plugins/code/public/components/admin_page/setup_guide.tsx

@@ -13,16 +13,16 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import { euiSizeL, euiSizeXxl } from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 const Root = styled.div`
-  padding: ${euiSizeXxl} 0;
+  padding: ${theme.euiSizeXxl} 0;
   margin: 0 auto;
   & > div {
-    margin-top: ${euiSizeL};
+    margin-top: ${theme.euiSizeL};
     width: 56rem;
   }
 `;

x-pack/plugins/code/public/components/codeblock/codeblock.tsx

@@ -6,7 +6,7 @@
 
 import { EuiPanel, EuiText } from '@elastic/eui';
 import { EuiSpacer } from '@elastic/eui';
-import { euiCodeBlockTagColor } from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { editor, IPosition, IRange } from 'monaco-editor';
 import React from 'react';
 import styled from 'styled-components';
@@ -15,7 +15,7 @@ import { monaco } from '../../monaco/monaco';
 import { registerEditor } from '../../monaco/single_selection_helper';
 
 const U = styled.u`
-  color: ${euiCodeBlockTagColor};
+  color: ${theme.euiCodeBlockTagColor};
 `;
 
 interface Props {

x-pack/plugins/code/public/components/diff_page/diff.tsx

@@ -5,17 +5,7 @@
  */
 
 import { EuiAccordion, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTitle } from '@elastic/eui';
-import {
-  euiBorderThick,
-  euiBorderThin,
-  euiColorDanger,
-  euiColorPrimary,
-  euiColorVis0,
-  euiSize,
-  euiSizeS,
-  euiSizeXs,
-  paddingSizes,
-} from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React, { MouseEvent } from 'react';
 import { connect } from 'react-redux';
 import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
@@ -35,56 +25,56 @@ const B = styled.b`
 `;
 
 const PrimaryB = styled(B)`
-  color: ${euiColorPrimary};
+  color: ${theme.euiColorPrimary};
 `;
 
 const CommitId = styled.span`
   display: inline-block;
-  padding: 0 ${paddingSizes.xs};
-  border: ${euiBorderThin};
+  padding: 0 ${theme.paddingSizes.xs};
+  border: ${theme.euiBorderThin};
 `;
 
 const Addition = styled.div`
-  padding: ${paddingSizes.xs} ${paddingSizes.s};
-  border-radius: ${euiSizeXs};
+  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.s};
+  border-radius: ${theme.euiSizeXs};
   color: white;
-  margin-right: ${euiSizeS};
-  background-color: ${euiColorDanger};
+  margin-right: ${theme.euiSizeS};
+  background-color: ${theme.euiColorDanger};
 `;
 
 const Deletion = styled(Addition)`
-  background-color: ${euiColorVis0};
+  background-color: ${theme.euiColorVis0};
 `;
 
 const Container = styled.div`
-  padding: ${paddingSizes.xs} ${paddingSizes.m};
+  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.m};
 `;
 
 const TopBarContainer = styled.div`
   height: calc(48rem / 14);
-  border-bottom: ${euiBorderThin};
-  padding: 0 ${paddingSizes.m};
+  border-bottom: ${theme.euiBorderThin};
+  padding: 0 ${theme.paddingSizes.m};
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 `;
 
 const Accordion = styled(EuiAccordion)`
-  border: ${euiBorderThick};
-  border-radius: ${euiSizeS};
-  margin-bottom: ${euiSize};
+  border: ${theme.euiBorderThick};
+  border-radius: ${theme.euiSizeS};
+  margin-bottom: ${theme.euiSize};
 `;
 
 const Icon = styled(EuiIcon)`
-  margin-right: ${euiSizeS};
+  margin-right: ${theme.euiSizeS};
 `;
 
 const Parents = styled.div`
-  border-left: ${euiBorderThin};
+  border-left: ${theme.euiBorderThin};
   height: calc(32rem / 14);
   line-height: calc(32rem / 14);
-  padding-left: ${paddingSizes.s};
-  margin: ${euiSizeS} 0;
+  padding-left: ${theme.paddingSizes.s};
+  margin: ${theme.euiSizeS} 0;
 `;
 
 const H4 = styled.h4`

x-pack/plugins/code/public/components/file_tree/file_tree.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { EuiIcon, EuiSideNav } from '@elastic/eui';
 import classes from 'classnames';
 
-import { euiSizeXs } from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import styled from 'styled-components';
@@ -19,7 +19,7 @@ import { RootState } from '../../reducers';
 import { FolderClosedTriangle, FolderOpenTriangle } from '../shared';
 
 const DirectoryNode = styled.span`
-  margin-left: ${euiSizeXs};
+  margin-left: ${theme.euiSizeXs};
   vertical-align: middle;
 `;
 

x-pack/plugins/code/public/components/hover/hover_widget.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiText } from '@elastic/eui';
-import { euiFontSizeXs } from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 // @ts-ignore
 import { renderMarkdown } from 'monaco-editor/esm/vs/base/browser/htmlContentRenderer';
 // @ts-ignore
@@ -17,7 +17,7 @@ import { MarkedString } from 'vscode-languageserver-types';
 const Text = styled(EuiText)`
   p {
     color: #8c8c8c;
-    font-size: ${euiFontSizeXs};
+    font-size: ${theme.euiFontSizeXs};
   }
 `;
 

x-pack/plugins/code/public/components/main/blame.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiAvatar, EuiFlexGroup, EuiFlexItem, EuiText, EuiTextColor } from '@elastic/eui';
-import { euiBorderThick, euiSizeS, paddingSizes } from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
@@ -20,12 +20,12 @@ const BlameMessage = styled(EuiText)`
 `;
 
 const Avatar = styled(EuiAvatar)`
-  margin: auto ${euiSizeS} auto 0;
+  margin: auto ${theme.euiSizeS} auto 0;
 `;
 
 const Root = styled(EuiFlexGroup)<{ isFirstLine: boolean }>`
-  padding: ${paddingSizes.xs} ${paddingSizes.s};
-  border-top: ${props => (props.isFirstLine ? 'none' : euiBorderThick)};
+  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.s};
+  border-top: ${props => (props.isFirstLine ? 'none' : theme.euiBorderThick)};
 `;
 
 export class Blame extends React.PureComponent<{ blame: GitBlame; isFirstLine: boolean }> {

x-pack/plugins/code/public/components/main/clone_status.tsx

@@ -5,25 +5,20 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui';
-import {
-  euiBorderThin,
-  euiSizeM,
-  euiSizeXxl,
-  paddingSizes,
-} from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import styled from 'styled-components';
 import { CloneProgress } from '../../../model';
 
 export const TextProgress = styled.div`
-  font-size: ${euiSizeM};
+  font-size: ${theme.euiSizeM};
   color: #98a2b3;
 `;
 
 export const ProgressContainer = styled.div`
   width: 40rem;
-  padding: ${paddingSizes.xs};
-  border: ${euiBorderThin};
+  padding: ${theme.paddingSizes.xs};
+  border: ${theme.euiBorderThin};
 `;
 
 interface Props {
@@ -55,11 +50,13 @@ export const CloneStatus = (props: Props) => {
       <EuiSpacer size="xxl" />
       <EuiSpacer size="xxl" />
       <EuiFlexItem grow={false}>
-        <EuiText style={{ fontSize: euiSizeXxl, color: '#1A1A1A' }}>{repoName} is cloning</EuiText>
+        <EuiText style={{ fontSize: theme.euiSizeXxl, color: '#1A1A1A' }}>
+          {repoName} is cloning
+        </EuiText>
       </EuiFlexItem>
       <EuiSpacer size="s" />
       <EuiFlexItem grow={false}>
-        <EuiText style={{ fontSize: euiSizeM, color: '#69707D' }}>
+        <EuiText style={{ fontSize: theme.euiSizeM, color: '#69707D' }}>
           Your project will be available when this process is complete
         </EuiText>
       </EuiFlexItem>

x-pack/plugins/code/public/components/main/commit_history.tsx

@@ -12,15 +12,7 @@ import {
   EuiText,
   EuiTextColor,
 } from '@elastic/eui';
-import {
-  euiBorderColor,
-  euiBorderThick,
-  euiBorderThin,
-  euiSizeM,
-  euiSizeS,
-  euiSizeXs,
-  paddingSizes,
-} from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
@@ -31,18 +23,18 @@ import { CommitLink } from '../diff_page/commit_link';
 const COMMIT_ID_LENGTH = 8;
 
 const Dot = styled.div`
-  --dotRadius: ${euiSizeS};
+  --dotRadius: ${theme.euiSizeS};
   width: var(--dotRadius);
   height: var(--dotRadius);
   border-radius: calc(var(--dotRadius) / 2);
-  background-color: ${euiBorderColor};
+  background-color: ${theme.euiBorderColor};
   margin: auto;
 `;
 
 const CommitMessages = styled.div`
   overflow: auto;
   flex: 1;
-  padding: ${paddingSizes.m};
+  padding: ${theme.paddingSizes.m};
 `;
 
 const Header = styled.div`
@@ -52,9 +44,9 @@ const Header = styled.div`
 `;
 
 const TimeLine = styled.div`
-  border-left: ${euiBorderThick};
-  margin-left: ${euiSizeXs};
-  padding: ${paddingSizes.s} 0 ${paddingSizes.s} ${paddingSizes.m};
+  border-left: ${theme.euiBorderThick};
+  margin-left: ${theme.euiSizeXs};
+  padding: ${theme.paddingSizes.s} 0 ${theme.paddingSizes.s} ${theme.paddingSizes.m};
 `;
 
 const CommitRoot = styled(EuiPanel)`
@@ -67,7 +59,7 @@ const CommitRoot = styled(EuiPanel)`
 `;
 
 const CommitGroupContainer = styled.div`
-  margin: 0 0 ${euiSizeXs} ${euiSizeM};
+  margin: 0 0 ${theme.euiSizeXs} ${theme.euiSizeM};
 `;
 
 const CommitId = styled.div`
@@ -77,7 +69,7 @@ const CommitId = styled.div`
   margin: auto 0;
   line-height: var(--height);
   color: black;
-  border: ${euiBorderThin};
+  border: ${theme.euiBorderThin};
   text-align: center;
   flex-shrink: 0;
 `;

x-pack/plugins/code/public/components/main/content.tsx

@@ -6,7 +6,7 @@
 
 // @ts-ignore
 import { EuiButton, EuiButtonGroup, EuiTitle } from '@elastic/eui';
-import { euiSize, euiSizeS, euiSizeXs } from '@elastic/eui/dist/eui_theme_light.json';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 import 'github-markdown-css/github-markdown.css';
 import React from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
@@ -41,7 +41,7 @@ const ButtonsContainer = styled.div`
   display: flex;
   flex-direction: row;
   & > *:first-child {
-    margin-right: ${euiSizeS};
+    margin-right: ${theme.euiSizeS};
   }
 `;
 
@@ -88,7 +88,7 @@ enum ButtonOption {
 }
 
 const Title = styled(EuiTitle)`
-  margin: ${euiSizeXs} 0 ${euiSize};
+  margin: ${theme.euiSizeXs} 0 ${theme.euiSize};
 `;
 
 class CodeContent extends React.PureComponent<Props> {