Update docs theme section to customization

The themes section of the webui style guide contained a section named
theme. This section also included information about the environmental
builds. The name was misleading and confusing, so we determined in the
GUI Design Work Group to update the section name.

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

5 files changed, 153 insertions, 106 deletions

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e48e1662..257b6fe1 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -13,8 +13,8 @@ module.exports = {
           link: "/guide/"
         },
         {
-          text: "Themes",
-          link: "/themes/"
+          text: "Customization",
+          link: "/customization/"
         },
         {
           text: "Github",
@@ -66,7 +66,7 @@ module.exports = {
           ]
           }
         ],
-        "/themes/": ["", "customize", "env"]
+        "/customization/": ["", "theme", "build"]
       },
     }
   };
\ No newline at end of file
diff --git a/docs/themes/env.md b/docs/customization/build.md
index fb1a7562..b10fd9db 100644
--- a/docs/themes/env.md
+++ b/docs/customization/build.md
@@ -1,4 +1,4 @@
-# Configuring environment specific builds
+# Build Customization
 
 This document provides instructions for how to add environment specific
 modifications to the Web UI.
@@ -26,15 +26,19 @@ VUE_APP_ENV_NAME=ibm
 
 ## Store
 
-> [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the
-> application's API calls.
+:::tip
+[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.
+   :::danger
+   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`
@@ -54,18 +58,24 @@ export default store;
 
 ## Router
 
-> [Vue Router](https://router.vuejs.org/guide/) determines which pages are
-> accessible in the UI.
+:::tip
+[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.
+   :::danger
+   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.
+   :::tip
+   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
@@ -79,10 +89,12 @@ 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.
+   :::danger
+   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
@@ -92,17 +104,20 @@ in src/components/AppNavigation/AppNavigation.vue.
 
 ## Theming
 
->[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/)
->allows for easy visual customizations.
+:::tip
+[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/)
+   :::danger
+   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
@@ -124,9 +139,9 @@ $success: lime;
 1. Add the same `VUE_APP_ENV_NAME` key value pair to your
    `env.development.local` file.
 2. Use serve script
-    ```
-    npm run serve
-    ```
+   ```
+   npm run serve
+   ```
 
 ## Production build
 
@@ -134,16 +149,14 @@ 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/customization/readme.md
index bc4d7648..64118060 100644
--- a/docs/themes/readme.md
+++ b/docs/customization/readme.md
@@ -1,15 +1,19 @@
+# Presentation Layer Architecture
 
-# Overview
-
- 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 SCSS files and how to
+customize the application using Bootstrap theming.
 
 [Read more about Bootstrap
 Theming](https://getbootstrap.com/docs/4.0/getting-started/theming)
 
+## SCSS Directory Structure
 
-## SCSS File Structure
-```
+### `bmc` Directory
+
+The `bmc` directory contains Sass helpers and default styles for customizing the OpenBMC
+Web UI.
+
+```{5}
 .
 ├─ src
    ├─ assets
@@ -18,15 +22,18 @@ Theming](https://getbootstrap.com/docs/4.0/getting-started/theming)
             ├─ custom
             └─ helpers
          ├─ bootstrap
-         ├─ _helpers.scss
          └─ _obmc-custom.scss
 ```
 
-## bmc
-This folder contains Sass helpers and default styles for customizing the OpenBMC
-Web UI.
+### `custom` Directory
 
-```
+The `custom` Directory imports all the styles needed to customize the UI. These
+are small changes used to reach parity with the OpenBMC Design Workgroup's
+agreed-upon design. The file naming convention closely follows the Bootstrap or
+Boostrap-vue library file naming since most of the ruleset selectors in these
+files are based on these two libraries.
+
+```{6}
 .
 ├─ src
    ├─ assets
@@ -49,30 +56,40 @@ Web UI.
                ├─ _sol.scss
                ├─ _tables.scss
                └─ _toasts.scss
-            └─  helpers
-               ├─ _colors.scss
-               ├─ _functions.scss
-               ├─ _index.scss
-               ├─ _motion.scss
-               └─ _variables.scss
+         ├─ helpers
+         ├─ bootstrap
+         └─ _obmc-custom.scss
 ```
-### custom
-The `custom` directory imports all the styles needed to customize the UI. These
-are small changes used to reach parity with the OpenBMC Design Workgroup's
-agreed-upon design. The file naming convention closely follows the Bootstrap or
-Boostrap-vue library file naming since most of the ruleset selectors in these
-files are based on these two libraries.
 
-### helpers
-The helper's folder contains a set of Sass helper files containing Sass
+### `helpers` Directory
+
+The `helpers` directory contains a set of Sass helper files containing Sass
 variables that establish the custom theme of the application.
 
-#### _colors.scss
-The colors.scss file sets all the SASS variables and color maps for the OpenBMC
+```{6}
+.
+├─ src
+   ├─ assets
+      ├─ styles
+         ├─ bmc
+         ├─ helpers
+                ├─ _colors.scss
+                ├─ _functions.scss
+                ├─ _index.scss
+                ├─ _motion.scss
+                └─ _variables.scss
+         ├─ bootstrap
+         └─ _obmc-custom.scss
+```
+
+#### `_colors.scss`
+
+The `_colors.scss` file sets all the SASS variables and color maps for the OpenBMC
 Web UI. Any color settings needed to meet company brand guidelines will happen
 in this file.
 
 ##### Sass Color Variables
+
 ```scss
 $black: #000;
 $white: #fff;
@@ -94,6 +111,7 @@ $gray-900: #161616;
 ```
 
 ##### Custom Color Variables
+
 ```scss
 // Sass Base Color Variables
 $blue: $blue-500;
@@ -103,6 +121,7 @@ $yellow: $yellow-500;
 ```
 
 ##### Custom Colors Map
+
 ```scss
 $colors: (
   "blue": $blue,
@@ -113,6 +132,7 @@ $colors: (
 ```
 
 ##### Custom Theme Color Variables
+
 ```scss
 // Sass Theme Color Variables
 // Can be used as variants
@@ -127,6 +147,7 @@ $warning: $yellow;
 ```
 
 ##### Custom Theme Colors Map
+
 ```scss
 $theme-colors: (
   "primary": $primary,
@@ -134,12 +155,12 @@ $theme-colors: (
   "dark": $dark,
   "light": $light,
   "danger": $danger,
-  "info": $info
-  "success": $success
-  "warning": $warning,
+  "info": $info "success": $success "warning": $warning,
 );
 ```
+
 ##### Color Resources
+
 - [Learn more about Bootstrap
   colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
 - [Learn more about Bootstrap
@@ -147,13 +168,15 @@ $theme-colors: (
 - [View the color palette and hex values in the color
   guidelines](/guide/guidelines/colors)
 
-#### _functions.scss
+#### `_functions.scss`
+
 Two functions provide a customized way to set color highlights. The
 `theme-color-light` and `theme-color-dark` are custom functions used to create
 colors for the `alert`, `badge`, `card`, and `toast` components. They have also
 set color highlights for some pseudo-elements like `: hover`.
 
 ##### Functions
+
 ```scss
 // This function is usually used to get a lighter
 // theme variant color to use as a background color
@@ -167,6 +190,7 @@ set color highlights for some pseudo-elements like `: hover`.
 ```
 
 ##### Examples
+
 ```scss{8-10,16}
 .b-table-sort-icon-left {
     background-position: left calc(1.5rem / 2) center !important;
@@ -188,12 +212,14 @@ fill: theme-color("info");
 }
 ```
 
-#### _motion.scss
+#### `_motion.scss`
+
 This bezier curves and durations in this file determine the motion styles
 throughout the application. These guidelines from the Cabon Design System avoid
 easing curves that are unnatural, distracting, or purely decorative.
 
 ##### Motion Styles
+
 ```scss
 $duration--fast-01: 70ms; //Micro-interactions such as button and toggle
 $duration--fast-02: 110ms; //Micro-interactions such as fade
@@ -211,6 +237,7 @@ $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
 ```
 
 ##### Example
+
 ```scss{6,9}
 .link-skip-nav {
   position: absolute;
@@ -224,61 +251,59 @@ $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
   }
 }
 ```
+
 ##### Motion Resources
+
 - [Including Animation In Your Design
   System](https://www.smashingmagazine.com/2019/02/animation-design-system/)
 - [Carbon Design System motion
   guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/)
 
-#### _variables.scss
+#### `_variables.scss`
+
 This file contains all the global Sass options. There are Bootstrap option
 overrides, Bootstrap global variable overrides, and custom BMC global variables.
-Read more about these in the [theme customization section](/themes/customize).
+Read more about these in the [Customization section](/customize/theme).
+
+### `bootstrap` Directory
 
-### bootstrap
 The `bootstrap` directory contains all the import references. The references are
 split into multiple files to support import order based on dependency. Helper
 styles need to be imported before all other styles.
 
-```
+```{6}
 .
 ├─ src
    ├─ assets
       ├─ styles
+         ├─ bmc
          ├─ bootstrap
             ├─ _helpers.scss
             └─ _index.scss
+         └─ _obmc-custom.scss
 ```
-#### _helpers.scss
+
+#### `_helpers.scss`
+
 This file contains all the helper import references for Bootstrap.
 
-#### _index.scss
+#### `_index.scss`
+
 This file contains all the import references needed to support the base,
 components, and utility styles.
 
-### _helpers.scss
-```
-.
-├─ src
-   ├─ assets
-      ├─ styles
-         ├─ _helpers.scss
-```
-The `_helpers.scss` file is an import file needed when building single-file
-components that require the use of BMC or Bootstrap Sass variables and
-functions. This file needs to be imported as part of the `<style>` block to
-support Sass compilation. Although it is possible to prepend these helpers in
-webpack, it will break any use of imported single-file components used in the
-Vuepress documentation.
-
-### _obmc-custom.scss```
-```
+### `_obmc-custom.scss`
+
+```{9}
 .
 ├─ src
    ├─ assets
       ├─ styles
+         ├─ bmc
+         ├─ bootstrap
          └─ _obmc-custom.scss
 ```
+
 The `obmc-custom.scss` file defines all of the presentational layer
 dependencies.
 
@@ -293,11 +318,11 @@ Some stylistic changes only apply to a single-file component or view instance.
 In this case, rather than adding a Sass file, the scoped styles include the
 styles in the component's `<style>` block. It is required to import the
 `_helpers` Sass file when using a BMC or Bootstrap variable in the component's
-`<style>` block. Without this import, webpack cannot  compile the OpenBMC Web UI
+`<style>` block. Without this import, webpack cannot compile the OpenBMC Web UI
 CSS styles correctly.
 
-
 ### Scoped style block using SASS
+
 ```html
 <style scoped lang="scss">
   ...
@@ -305,30 +330,32 @@ CSS styles correctly.
 ```
 
 ### Scoped style block using CSS
+
 ```html
 <style scoped>
-  ...
+  ...;
 </style>
 ```
 
 ### Example - PageSection.vue
+
 ```html
 <style lang="scss" scoped>
-.page-section {
-  margin-bottom: $spacer * 2;
-}
+  .page-section {
+    margin-bottom: $spacer * 2;
+  }
 
-h2 {
-  @include font-size($h3-font-size);
-  margin-bottom: $spacer;
-  &::after {
-    content: '';
-    display: block;
-    width: 100px;
-    border: 1px solid $gray-300;
-    margin-top: 10px;
+  h2 {
+    @include font-size($h3-font-size);
+    margin-bottom: $spacer;
+    &::after {
+      content: "";
+      display: block;
+      width: 100px;
+      border: 1px solid $gray-300;
+      margin-top: 10px;
+    }
   }
-}
 </style>
 ```
 
@@ -337,3 +364,8 @@ You might notice that there is an HTML element, `<h2>`, used in the example. Thi
 :::
 
 [Learn more about single file components](https://vuejs.org/v2/guide/single-file-components.html)
+
+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.
diff --git a/docs/themes/customize.md b/docs/customization/theme.md
index 763333d9..6dbce1a9 100644
--- a/docs/themes/customize.md
+++ b/docs/customization/theme.md
@@ -1,4 +1,4 @@
-# How to customize
+# Theme customization
 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
@@ -9,6 +9,8 @@ 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.
 
+[Read more in the Build Customization section](/customization/build)
+
 ### 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
diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md
index d73a0373..3ba91b6a 100644
--- a/docs/guide/guidelines/colors.md
+++ b/docs/guide/guidelines/colors.md
@@ -5,7 +5,7 @@ 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 theme customization](/themes/)
+- [Learn more about theme customization](/customization/theme/)
 - [Open an issue in the OpenBMC webui-vue
   repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a
   change