[core] Remove usage of LESS

packages/demo-app/package.json

@@ -26,13 +26,9 @@
     "@types/styled-components": "^5.0.1",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^4.2.1",
     "html-webpack-plugin": "^4.5.0",
-    "less": "^3.10.3",
-    "less-loader": "^7.0.1",
     "node-fetch": "^2.6.0",
     "source-map-loader": "^1.0.2",
-    "style-loader": "^2.0.0",
     "ts-loader": "^8.0.2",
     "typescript": "^3.9.6",
     "webpack": "^4.41.5",

packages/demo-app/src/app/app.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import './app.less';
 import { DemoAppBar } from './app-bar';
 import { AppDrawer } from './app-drawer';
@@ -9,6 +9,106 @@ import { ThemeProvider, useTheme } from './demos/theme';
 import { RealDataGridDemo } from './demos/grid/real-data-grid.demo';
 import { AppIntro } from './app-intro';
 
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: 'source-code-pro', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
+  }
+
+  #root {
+    min-width: 100%;
+    min-height: 100%;
+    display: flex;
+    position: absolute;
+  }
+
+  .app {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .main-container {
+    position: relative;
+    flex-grow: 1;
+    box-sizing: border-box;
+  }
+
+  .fill-space,
+  .fill-abs,
+  .fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .flex-col {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .flex-row {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .grow {
+    flex-grow: 1;
+  }
+
+  .center {
+    justify-content: center;
+  }
+
+  .action-bar {
+    display: flex;
+    justify-content: center;
+
+    button {
+      margin-right: 20px;
+    }
+  }
+
+  .storybook-img {
+    width: 30px;
+  }
+
+  @media screen and (max-width: 768px) {
+    .big-device {
+      display: none !important;
+    }
+  }
+
+  .negative {
+    color: #d20704;
+  }
+
+  .positive {
+    color: #008508;
+  }
+
+  .info-icon {
+    color: #2196f3;
+    align-self: center;
+  }
+
+  .bad {
+    background: rgba(255, 128, 171, 0.4);
+  }
+
+  .good {
+    background: rgba(185, 246, 202, 0.4);
+  }
+`;
+
 const StyledApp = styled.div`
   background: ${(p) => p.theme.colors.background};
 `;
@@ -23,6 +123,7 @@ export function App() {
   const { theme, themeId, toggleTheme, isDark } = useTheme();
   return (
     <ThemeProvider theme={theme}>
+      <GlobalStyle />
       <HashRouter>
         <StyledApp className="app">
           <DemoAppBar

packages/demo-app/webpack.common.js

@@ -21,10 +21,6 @@ module.exports = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
-      {
-        test: /\.less|\.css$/,
-        use: ['style-loader', 'css-loader', 'less-loader'],
-      },
       {
         test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
         exclude: /node_modules/,

webpackBaseConfig.js

@@ -38,10 +38,6 @@ module.exports = {
         test: /\.md$/,
         loader: 'raw-loader',
       },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader',
-      },
     ],
   },
 };