[CSS-in-JS] [Breaking] Better Getting Started page

README.md

@@ -2,25 +2,9 @@
 
 # Elastic UI Framework
 
-> The Elastic UI Framework is a collection of React UI components for quickly building user interfaces
-> at Elastic. Not using React? No problem! You can still use the CSS behind each component.
-
-You should check out our [living style guide][docs], which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. We also have a [FAQ][faq] that covers common usage questions.
-
-## Installation
-
-To install the Elastic UI Framework into an existing project, use the `yarn` CLI (`npm` is not supported).
-
-```
-yarn add @elastic/eui
-```
-
-Note that EUI has [several `peerDependencies` requirements](package.json) that will also need to be installed if starting with a blank project. You can read more about other ways to [consume EUI][consuming].
-
-```
-yarn add @elastic/eui @elastic/datemath moment prop-types
-```
+> The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic.
 
+You should check out our [living style guide][docs], which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. We also have a [FAQ][faq] that covers common usage questions. You can read more about the ways to [consume EUI][consuming].
 
 ## Running Locally
 
@@ -32,22 +16,22 @@ You will probably want to install a node version manager. [nvm](https://github.c
 
 To install and use the correct node version with `nvm`:
 
-```
+```bash
 nvm install
 ```
 
 ### Documentation
 
 You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following.
 
-```
+```bash
 yarn
 yarn start
 ```
 
 If another process is already listening on port 8030, the next free port will be used. Alternatively, you can specify a port:
 
-```
+```bash
 yarn start --port 9000
 ```
 
@@ -76,7 +60,6 @@ directly in the code. And unit test coverage for the UI components allows us to
   * [Creating components manually](wiki/creating-components-manually.md)
   * [Creating components with Yeoman](wiki/creating-components-yeoman.md)
 * [Creating icons](wiki/creating-icons.md)
-* [Theming](wiki/theming.md)
 * [Testing](wiki/testing.md)
   * [Accessibility Testing](wiki/automated-accessibility-testing.md)
 * [Documentation](wiki/documentation-guidelines.md)

src-docs/src/routes.js

@@ -10,7 +10,7 @@ import { EuiErrorBoundary } from '../../src/components';
 import { playgroundCreator } from './services/playground';
 
 // Guidelines
-const GettingStarted = require('!!raw-loader!./views/guidelines/getting_started.md');
+import { GettingStarted } from './views/guidelines/getting_started/getting_started';
 
 import AccessibilityGuidelines from './views/guidelines/accessibility';
 
@@ -305,8 +305,9 @@ const createExample = (example, customTitle) => {
   };
 };
 
-const createMarkdownExample = (example, title) => {
-  const headings = example.default.match(/^(##) (.*)/gm);
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const createMarkdownExample = ({ file, name, intro }) => {
+  const headings = file.default.match(/^(##) (.*)/gm);
 
   const sections = headings.map((heading) => {
     const title = heading.replace('## ', '');
@@ -315,12 +316,10 @@ const createMarkdownExample = (example, title) => {
   });
 
   return {
-    name: title,
+    name,
     component: () => (
-      <GuidePage title={title}>
-        <GuideMarkdownFormat grow={false}>
-          {example.default}
-        </GuideMarkdownFormat>
+      <GuidePage title={name}>
+        <GuideMarkdownFormat grow={false}>{file.default}</GuideMarkdownFormat>
       </GuidePage>
     ),
     sections: sections,
@@ -331,7 +330,7 @@ const navigation = [
   {
     name: 'Guidelines',
     items: [
-      createMarkdownExample(GettingStarted, 'Getting started'),
+      createExample(GettingStarted, 'Getting started'),
       createExample(AccessibilityGuidelines, 'Accessibility'),
       {
         name: 'Colors',

src-docs/src/views/guidelines/_get_sass_vars.js

@@ -1,7 +1,8 @@
-import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss';
+import lightColors from '!!sass-vars-to-js-loader!../../../../src/themes/legacy/_colors_light.scss';
 import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/legacy/_colors_dark.scss';
 import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/amsterdam/_colors_light.scss';
 import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/amsterdam/_colors_dark.scss';
+import visColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors_vis.scss';
 import { useContext } from 'react';
 import { ThemeContext } from '../../components';
 import { LEGACY_NAME_KEY } from '../../../../src/themes';
@@ -11,16 +12,16 @@ export const useSassVars = () => {
   let palette;
   switch (themeContext.theme) {
     case `${LEGACY_NAME_KEY}_light`:
-      palette = lightColors;
+      palette = { ...lightColors, ...visColors };
       break;
     case `${LEGACY_NAME_KEY}_dark`:
-      palette = { ...lightColors, ...darkColors };
+      palette = { ...darkColors, ...visColors };
       break;
     case 'dark':
-      palette = { ...lightColors, ...darkColors, ...darkAmsterdamColors };
+      palette = { ...darkAmsterdamColors, ...visColors };
       break;
     default:
-      palette = { ...lightColors, ...lightAmsterdamColors };
+      palette = { ...lightAmsterdamColors, ...visColors };
       break;
   }