Update theme customization

- Move the env.md from /env directory to be displayed in the theming
section
- Update copy to remove references to downstream changes since changes
are made upstream

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I5ed3c62a9534c071b6dbd7f69ed35d457353a628

5 files changed, 128 insertions, 3 deletions

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 8b7be97c..90436067 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -53,7 +53,7 @@ module.exports = {
           ]
           }
         ],
-        "/themes/": ["", "customize"]
+        "/themes/": ["", "customize", "env"]
       },
     },
     configureWebpack: {
diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md
index dd6e82ad..7ef6c153 100644
--- a/docs/guide/guidelines/colors.md
+++ b/docs/guide/guidelines/colors.md
@@ -1,7 +1,7 @@
 # Colors
 This color palette has been agreed upon by the OpenBMC community and differs from the Bootstrap color patterns. The OpenBMC palette includes custom hex values, along with additional blue, green, red, and yellow color variables used as accent colors for components. The `.scss` component files use these accent colors to override default styles set by the Bootstrap library.
 
-- [Learn more about downstream customization](/themes/)
+- [Learn more about theme customization](/themes/)
 - [Open an issue in the OpenBMC webui-vue repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a change
 - [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)
 
diff --git a/docs/themes/customize.md b/docs/themes/customize.md
index 1af21220..bee769a5 100644
--- a/docs/themes/customize.md
+++ b/docs/themes/customize.md
@@ -1,6 +1,12 @@
 # How to customize
 Customization of the application requires knowledge of Sass and CSS. It also will require becoming familiar with the Bootstrap and Bootstrap-Vue component libraries. This section outlines the global options and variables that can be removed or updated to meet organizational brand guidelines.
 
+## Environment specific builds
+Any organization can create a build that meets their branding and other customization needs. This includes customization of the state store, routing, application navigation, and theming.
+
+### Configuring environment specific builds
+The complete instructions can be found in the `env` directory in a file called env.md or by viewing the [Configuring environment specific builds page](./env.md)
+
 ## Bootstrap Sass Options
 The Bootstrap Sass options are global styling toggles. The naming convention for these built-in variables is `enabled-*`.
 
diff --git a/docs/themes/env.md b/docs/themes/env.md
new file mode 100644
index 00000000..e315109d
--- /dev/null
+++ b/docs/themes/env.md
@@ -0,0 +1,116 @@
+# Configuring environment specific builds
+
+This document provides instructions for how to add environment specific modifications to the Web UI.
+
+- [Setup](#setup)
+- [Store](#store)
+- [Router](#router)
+- [App Navigation](#app-navigation)
+- [Theming](#theming)
+- [Local development](#local-development)
+- [Production build](#production-build)
+
+## Setup
+
+1. Create a `.env.<ENV_NAME>` file in the project root
+2. Add `NODE_ENV=production` key value pair in the file
+3. Add `VUE_APP_ENV_NAME` key with the value set to the new environment name
+
+Example `.env.ibm`:
+
+```
+NODE_ENV=production
+VUE_APP_ENV_NAME=ibm
+```
+
+## Store
+
+> [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the application's API calls.
+
+1. If making customizations to the default store, add `CUSTOM_STORE=true` key value pair to the new .env file.
+2. Create a `<ENV_NAME>.js` file in `src/env/store`
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store import in `src/main.js` will resolve to this new file.
+3. Import the base store
+4. Import environment specific store modules
+5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` and `unregisterModule` instance methods to add/remove store modules
+6. Add default export
+
+Example `src/env/store/ibm.js`:
+
+```
+import store from '@/store; //@ aliases to src directory
+import HmcStore from './Hmc/HmcStore';
+
+store.registerModule('hmc', HmcStore);
+
+export default store;
+```
+
+## Router
+
+> [Vue Router](https://router.vuejs.org/guide/) determines which pages are accessible in the UI.
+
+1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key value pair to the new .env file.
+2. Create a `<ENV_NAME>.js` file in `src/env/router`
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The routes import in `src/router/index.js` will resolve to this new file.
+3. Define new [routes](https://router.vuejs.org/api/#routes).
+    > Use static imports (over lazy-loading routes) to avoid creating separate JS chunks. Static imports also helps to keep the total build size down.
+4. Add default export
+
+## App navigation
+
+The Vue Router definition is closely tied to the app navigation but should be configured separately.
+The Vue Router is responsible for defining the application routes which is not always the same as what is visible in the app navigation.
+This configuration will make customizations to the rendered markup in src/components/AppNavigation/AppNavigation.vue.
+
+1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key value pair to the new .env file.
+2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation`
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The AppNavigationMixin import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new file.
+3. Your custom mixin should follow a very similar structure to the default AppNavigationMixin.js file. It should include a data property named `navigationItems` that should be an array of of navigation objects. Each navigation object should have an `id` and `label` property defined. Optionally it can include `icon`, `route`, or `children` properties.
+4. Add default export
+
+## Theming
+
+>[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/) allows for easy visual customizations.
+
+1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key value pair to the new .env file.
+2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles`
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The webpack sass loader will attempt to import a file with this name.
+3. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/) for details about [color overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults) and [other customizable options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options).
+
+Example for adding custom colors
+
+`src/env/assets/styles/_ibm.scss`
+
+```
+// Custom theme colors
+
+$primary: rebeccapurple;
+$success: lime;
+```
+
+## Local development
+
+1. Add the same `VUE_APP_ENV_NAME` key value pair to your `env.development.local` file.
+2. Use serve script
+    ```
+    npm run serve
+    ```
+
+## Production build
+
+Run npm build script with vue-cli `--mode` [option flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This requires [corresponding .env file to exist](#setup).
+
+
+```
+npm run build -- --mode ibm
+```
+
+
+**OR**
+
+pass env variable directly to script
+
+```
+VUE_APP_ENV_NAME=ibm npm run build
+```
\ No newline at end of file
diff --git a/docs/themes/readme.md b/docs/themes/readme.md
index 0b391f69..a37baca9 100644
--- a/docs/themes/readme.md
+++ b/docs/themes/readme.md
@@ -1,7 +1,7 @@
 
 # Overview
 
-The best way to change the overall look and feel of the OpenBMC Web UI is to update the following files in a downstream repository. This section discusses the structure and purpose of the theme files and how to customize the application using Bootstrap theming.
+ This section discusses the structure and purpose of the theme files and how to customize the application using Bootstrap theming.
 
 [Read more about Bootstrap Theming](https://getbootstrap.com/docs/4.0/getting-started/theming)
 
@@ -36,11 +36,14 @@ This folder contains Sass helpers and default styles for customizing the OpenBMC
                ├─ _bootstrap-grid.scss
                ├─ _buttons.scss
                ├─ _calendar.scss
+               ├─ _card.scss
                ├─ _dropdown.scss
                ├─ _forms.scss
                ├─ _index.scss
+               ├─ _kvm.scss
                ├─ _modal.scss
                ├─ _pagination.scss
+               ├─ _sol.scss
                ├─ _tables.scss
                └─ _toasts.scss
             └─  helpers