summaryrefslogtreecommitdiff
path: root/customization
diff options
context:
space:
mode:
authorGitHub Action <action@github.com>2022-03-25 21:22:29 +0300
committerGitHub Action <action@github.com>2022-03-25 21:22:29 +0300
commit6d8f40c4ac31386460f33d0b4522ea8357e03894 (patch)
treedead2423a6c240256a28d4eb9c55cac2b45d71d0 /customization
downloadwebui-vue-gh-pages.tar.xz
deploygh-pages
Diffstat (limited to 'customization')
-rw-r--r--customization/build.html83
-rw-r--r--customization/index.html253
-rw-r--r--customization/theme.html105
3 files changed, 441 insertions, 0 deletions
diff --git a/customization/build.html b/customization/build.html
new file mode 100644
index 000000000..b3c714cf2
--- /dev/null
+++ b/customization/build.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Build Customization | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/21.f51dd518.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/customization/" aria-current="page" class="sidebar-link">Presentation Layer Architecture</a></li><li><a href="/webui-vue/customization/theme.html" class="sidebar-link">Theme customization</a></li><li><a href="/webui-vue/customization/build.html" aria-current="page" class="active sidebar-link">Build Customization</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#setup" class="sidebar-link">Setup</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#store" class="sidebar-link">Store</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#router" class="sidebar-link">Router</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#app-navigation" class="sidebar-link">App navigation</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#theming" class="sidebar-link">Theming</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#local-development" class="sidebar-link">Local development</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/build.html#production-build" class="sidebar-link">Production build</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="build-customization"><a href="#build-customization" class="header-anchor">#</a> Build Customization</h1> <p>This document provides instructions for how to add environment specific
+modifications to the Web UI.</p> <ul><li><a href="#setup">Setup</a></li> <li><a href="#store">Store</a></li> <li><a href="#router">Router</a></li> <li><a href="#app-navigation">App Navigation</a></li> <li><a href="#theming">Theming</a></li> <li><a href="#local-development">Local development</a></li> <li><a href="#production-build">Production build</a></li></ul> <h2 id="setup"><a href="#setup" class="header-anchor">#</a> Setup</h2> <ol><li>Create a <code>.env.&lt;ENV_NAME&gt;</code> file in the project root</li> <li>Add <code>NODE_ENV=production</code> key value pair in the file</li> <li>Add <code>VUE_APP_ENV_NAME</code> key with the value set to the new environment name</li></ol> <p>Example <code>.env.ibm</code>:</p> <div class="language- extra-class"><pre class="language-text"><code>NODE_ENV=production
+VUE_APP_ENV_NAME=ibm
+</code></pre></div><h2 id="store"><a href="#store" class="header-anchor">#</a> Store</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><a href="https://vuex.vuejs.org/guide/modules.html" target="_blank" rel="noopener noreferrer">Vuex store modules<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> contain the
+application's API calls.</p></div> <ol><li>If making customizations to the default store, add <code>CUSTOM_STORE=true</code> key
+value pair to the new .env file.</li> <li>Create a <code>&lt;ENV_NAME&gt;.js</code> file in <code>src/env/store</code><div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>The filename needs to match the <code>VUE_APP_ENV_NAME</code> value defined in the
+.env file. The store import in <code>src/main.js</code> will resolve to this new
+file.</p></div></li> <li>Import the base store</li> <li>Import environment specific store modules</li> <li>Use the <a href="https://vuex.vuejs.org/api/#registermodule" target="_blank" rel="noopener noreferrer">Vuex<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <code>registerModule</code>
+and <code>unregisterModule</code> instance methods to add/remove store modules</li> <li>Add default export</li></ol> <p>Example <code>src/env/store/ibm.js</code>:</p> <div class="language- extra-class"><pre class="language-text"><code>import store from '@/store; //@ aliases to src directory
+import HmcStore from './Hmc/HmcStore';
+
+store.registerModule('hmc', HmcStore);
+
+export default store;
+</code></pre></div><h2 id="router"><a href="#router" class="header-anchor">#</a> Router</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><a href="https://router.vuejs.org/guide/" target="_blank" rel="noopener noreferrer">Vue Router<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> determines which pages are
+accessible in the UI.</p></div> <ol><li>If making customizations to the default router, add <code>CUSTOM_ROUTER=true</code> key
+value pair to the new .env file.</li> <li>Create a <code>&lt;ENV_NAME&gt;.js</code> file in <code>src/env/router</code><div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>The filename needs to match the <code>VUE_APP_ENV_NAME</code> value defined in the
+.env file. The routes import in <code>src/router/index.js</code> will resolve to this
+new file.</p></div></li> <li>Define new <a href="https://router.vuejs.org/api/#routes" target="_blank" rel="noopener noreferrer">routes<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.<div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Use static imports (over lazy-loading routes) to avoid creating separate
+JS chunks. Static imports also helps to keep the total build size down.</p></div></li> <li>Add default export</li></ol> <h2 id="app-navigation"><a href="#app-navigation" class="header-anchor">#</a> App navigation</h2> <p>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.</p> <ol><li>If making customizations to the app navigation, add <code>CUSTOM_APP_NAV=true</code> key
+value pair to the new .env file.</li> <li>Create a <code>&lt;ENV_NAME&gt;.js</code> file in <code>src/env/components/AppNavigation</code><div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>The filename needs to match the <code>VUE_APP_ENV_NAME</code> value defined in the
+.env file. The AppNavigationMixin import in
+<code>src/components/AppNavigation/AppNavigation.vue</code> will resolve to this new
+file.</p></div></li> <li>Your custom mixin should follow a very similar structure to the default
+AppNavigationMixin.js file. It should include a data property named
+<code>navigationItems</code> that should be an array of of navigation objects. Each
+navigation object should have an <code>id</code> and <code>label</code> property defined.
+Optionally it can include <code>icon</code>, <code>route</code>, or <code>children</code> properties.</li> <li>Add default export</li></ol> <h2 id="theming"><a href="#theming" class="header-anchor">#</a> Theming</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><a href="https://getbootstrap.com/docs/4.5/getting-started/theming/" target="_blank" rel="noopener noreferrer">Bootstrap theming<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+allows for easy visual customizations.</p></div> <ol><li>If making customizations to the default styles, add <code>CUSTOM_STYLES=true</code> key
+value pair to the new .env file.</li> <li>Create a <code>_&lt;ENV_NAME&gt;.scss</code> partial in <code>src/env/assets/styles</code><div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>The filename needs to match the <code>VUE_APP_ENV_NAME</code> value defined in the
+.env file. The webpack sass loader will attempt to import a file with this
+name.</p></div></li> <li>Add style customizations. Refer to <a href="https://getbootstrap.com/docs/4.5/getting-started/theming/" target="_blank" rel="noopener noreferrer">bootstrap documentation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+for details about <a href="https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults" target="_blank" rel="noopener noreferrer">color
+overrides<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
+and <a href="https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options" target="_blank" rel="noopener noreferrer">other customizable
+options<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</li></ol> <p>Example for adding custom colors</p> <p><code>src/env/assets/styles/_ibm.scss</code></p> <div class="language- extra-class"><pre class="language-text"><code>// Custom theme colors
+
+$primary: rebeccapurple;
+$success: lime;
+</code></pre></div><h2 id="local-development"><a href="#local-development" class="header-anchor">#</a> Local development</h2> <ol><li>Add the same <code>VUE_APP_ENV_NAME</code> key value pair to your
+<code>env.development.local</code> file.</li> <li>Use serve script<div class="language- extra-class"><pre class="language-text"><code>npm run serve
+</code></pre></div></li></ol> <h2 id="production-build"><a href="#production-build" class="header-anchor">#</a> Production build</h2> <p>Run npm build script with vue-cli <code>--mode</code> <a href="https://cli.vuejs.org/guide/mode-and-env.html#modes" target="_blank" rel="noopener noreferrer">option
+flag<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. This requires
+<a href="#setup">corresponding .env file to exist</a>.</p> <div class="language- extra-class"><pre class="language-text"><code>npm run build -- --mode ibm
+</code></pre></div><p><strong>OR</strong></p> <p>pass env variable directly to script</p> <div class="language- extra-class"><pre class="language-text"><code>VUE_APP_ENV_NAME=ibm npm run build
+</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/customization/theme.html" class="prev">
+ Theme customization
+ </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/21.f51dd518.js" defer></script>
+ </body>
+</html>
diff --git a/customization/index.html b/customization/index.html
new file mode 100644
index 000000000..cde373c3b
--- /dev/null
+++ b/customization/index.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Presentation Layer Architecture | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/22.22ba3b96.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/customization/" aria-current="page" class="active sidebar-link">Presentation Layer Architecture</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/customization/#scss-directory-structure" class="sidebar-link">SCSS Directory Structure</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/#component-view-styles" class="sidebar-link">Component / View Styles</a></li></ul></li><li><a href="/webui-vue/customization/theme.html" class="sidebar-link">Theme customization</a></li><li><a href="/webui-vue/customization/build.html" class="sidebar-link">Build Customization</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="presentation-layer-architecture"><a href="#presentation-layer-architecture" class="header-anchor">#</a> Presentation Layer Architecture</h1> <p>This section discusses the structure and purpose of the SCSS files and how to
+customize the application using Bootstrap theming.</p> <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming" target="_blank" rel="noopener noreferrer">Read more about Bootstrap
+Theming<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="scss-directory-structure"><a href="#scss-directory-structure" class="header-anchor">#</a> SCSS Directory Structure</h2> <h3 id="bmc-directory"><a href="#bmc-directory" class="header-anchor">#</a> <code>bmc</code> Directory</h3> <p>The <code>bmc</code> directory contains Sass helpers and default styles for customizing the OpenBMC
+Web UI.</p> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+ ├─ assets
+ ├─ styles
+ ├─ bmc
+ ├─ custom
+ └─ helpers
+ ├─ bootstrap
+ └─ _obmc-custom.scss
+</code></pre></div><h3 id="custom-directory"><a href="#custom-directory" class="header-anchor">#</a> <code>custom</code> Directory</h3> <p>The <code>custom</code> 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.</p> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+ ├─ assets
+ ├─ styles
+ ├─ bmc
+ ├─ custom
+ ├─ alert.scss
+ ├─ _badge.scss
+ ├─ _base.scss
+ ├─ _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
+ ├─ bootstrap
+ └─ _obmc-custom.scss
+</code></pre></div><h3 id="helpers-directory"><a href="#helpers-directory" class="header-anchor">#</a> <code>helpers</code> Directory</h3> <p>The <code>helpers</code> directory contains a set of Sass helper files containing Sass
+variables that establish the custom theme of the application.</p> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+ ├─ assets
+ ├─ styles
+ ├─ bmc
+ ├─ helpers
+ ├─ _colors.scss
+ ├─ _functions.scss
+ ├─ _index.scss
+ ├─ _motion.scss
+ └─ _variables.scss
+ ├─ bootstrap
+ └─ _obmc-custom.scss
+</code></pre></div><h4 id="colors-scss"><a href="#colors-scss" class="header-anchor">#</a> <code>_colors.scss</code></h4> <p>The <code>_colors.scss</code> 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.</p> <h5 id="sass-color-variables"><a href="#sass-color-variables" class="header-anchor">#</a> Sass Color Variables</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token property"><span class="token variable">$black</span></span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$white</span></span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
+
+<span class="token property"><span class="token variable">$blue-500</span></span><span class="token punctuation">:</span> #2d60e5<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$green-500</span></span><span class="token punctuation">:</span> #0a7d06<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$red-500</span></span><span class="token punctuation">:</span> #da1416<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$yellow-500</span></span><span class="token punctuation">:</span> #efc100<span class="token punctuation">;</span>
+
+<span class="token property"><span class="token variable">$gray-100</span></span><span class="token punctuation">:</span> #f4f4f4<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-200</span></span><span class="token punctuation">:</span> #e6e6e6<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-300</span></span><span class="token punctuation">:</span> #d8d8d8<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-400</span></span><span class="token punctuation">:</span> #cccccc<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-500</span></span><span class="token punctuation">:</span> #b3b3b3<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-600</span></span><span class="token punctuation">:</span> #999999<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-700</span></span><span class="token punctuation">:</span> #666666<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-800</span></span><span class="token punctuation">:</span> #3f3f3f<span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$gray-900</span></span><span class="token punctuation">:</span> #161616<span class="token punctuation">;</span>
+</code></pre></div><h5 id="custom-color-variables"><a href="#custom-color-variables" class="header-anchor">#</a> Custom Color Variables</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// Sass Base Color Variables</span>
+<span class="token property"><span class="token variable">$blue</span></span><span class="token punctuation">:</span> <span class="token variable">$blue-500</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$green</span></span><span class="token punctuation">:</span> <span class="token variable">$green-500</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$red</span></span><span class="token punctuation">:</span> <span class="token variable">$red-500</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$yellow</span></span><span class="token punctuation">:</span> <span class="token variable">$yellow-500</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="custom-colors-map"><a href="#custom-colors-map" class="header-anchor">#</a> Custom Colors Map</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token property"><span class="token variable">$colors</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
+ <span class="token string">&quot;blue&quot;</span><span class="token punctuation">:</span> <span class="token variable">$blue</span><span class="token punctuation">,</span>
+ <span class="token string">&quot;green&quot;</span><span class="token punctuation">:</span> <span class="token variable">$green</span><span class="token punctuation">,</span>
+ <span class="token string">&quot;red&quot;</span><span class="token punctuation">:</span> <span class="token variable">$red</span><span class="token punctuation">,</span>
+ <span class="token string">&quot;yellow&quot;</span><span class="token punctuation">:</span> <span class="token variable">$yellow</span><span class="token punctuation">,</span>
+<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="custom-theme-color-variables"><a href="#custom-theme-color-variables" class="header-anchor">#</a> Custom Theme Color Variables</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// Sass Theme Color Variables</span>
+<span class="token comment">// Can be used as variants</span>
+<span class="token property"><span class="token variable">$danger</span></span><span class="token punctuation">:</span> <span class="token variable">$red</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$dark</span></span><span class="token punctuation">:</span> <span class="token variable">$gray-900</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$info</span></span><span class="token punctuation">:</span> <span class="token variable">$blue</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$light</span></span><span class="token punctuation">:</span> <span class="token variable">$gray-100</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$primary</span></span><span class="token punctuation">:</span> <span class="token variable">$blue</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$secondary</span></span><span class="token punctuation">:</span> <span class="token variable">$gray-800</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$success</span></span><span class="token punctuation">:</span> <span class="token variable">$green</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$warning</span></span><span class="token punctuation">:</span> <span class="token variable">$yellow</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="custom-theme-colors-map"><a href="#custom-theme-colors-map" class="header-anchor">#</a> Custom Theme Colors Map</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token property"><span class="token variable">$theme-colors</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span>
+ <span class="token string">&quot;primary&quot;</span><span class="token punctuation">:</span> <span class="token variable">$primary</span><span class="token punctuation">,</span>
+ <span class="token string">&quot;secondary&quot;</span><span class="token punctuation">:</span> <span class="token variable">$secondary</span><span class="token punctuation">,</span>
+ <span class="token string">&quot;dark&quot;</span><span class="token punctuation">:</span> <span class="token variable">$dark</span><span class="token punctuation">,</span>
+ <span class="token string">&quot;light&quot;</span><span class="token punctuation">:</span> <span class="token variable">$light</span><span class="token punctuation">,</span>
+ <span class="token string">&quot;danger&quot;</span><span class="token punctuation">:</span> <span class="token variable">$danger</span><span class="token punctuation">,</span>
+ <span class="token string">&quot;info&quot;</span><span class="token punctuation">:</span> <span class="token variable">$info</span> <span class="token string">&quot;success&quot;</span><span class="token punctuation">:</span> <span class="token variable">$success</span> <span class="token string">&quot;warning&quot;</span><span class="token punctuation">:</span> <span class="token variable">$warning</span><span class="token punctuation">,</span>
+<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="color-resources"><a href="#color-resources" class="header-anchor">#</a> Color Resources</h5> <ul><li><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#color" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap
+colors<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap
+variables<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="/guide/guidelines/colors">View the color palette and hex values in the color
+guidelines</a></li></ul> <h4 id="functions-scss"><a href="#functions-scss" class="header-anchor">#</a> <code>_functions.scss</code></h4> <p>Two functions provide a customized way to set color highlights. The
+<code>theme-color-light</code> and <code>theme-color-dark</code> are custom functions used to create
+colors for the <code>alert</code>, <code>badge</code>, <code>card</code>, and <code>toast</code> components. They have also
+set color highlights for some pseudo-elements like <code>: hover</code>.</p> <h5 id="functions"><a href="#functions" class="header-anchor">#</a> Functions</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// This function is usually used to get a lighter</span>
+<span class="token comment">// theme variant color to use as a background color</span>
+<span class="token keyword">@function</span> <span class="token function">theme-color-light</span><span class="token punctuation">(</span><span class="token variable">$variant</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">@return</span> <span class="token function">theme-color-level</span><span class="token punctuation">(</span><span class="token variable">$variant</span><span class="token punctuation">,</span> -11.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">@function</span> <span class="token function">theme-color-dark</span><span class="token punctuation">(</span><span class="token variable">$variant</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">@return</span> <span class="token function">theme-color-level</span><span class="token punctuation">(</span><span class="token variable">$variant</span><span class="token punctuation">,</span> 2<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h5 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h5> <div class="language-scss extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-scss"><code><span class="token selector">.b-table-sort-icon-left </span><span class="token punctuation">{</span>
+ <span class="token property">background-position</span><span class="token punctuation">:</span> left <span class="token function">calc</span><span class="token punctuation">(</span>1.5rem <span class="token operator">/</span> 2<span class="token punctuation">)</span> center <span class="token important">!important</span><span class="token punctuation">;</span>
+ <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>1.2rem <span class="token operator">+</span> 0.65em<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
+ <span class="token selector"><span class="token parent important">&amp;</span>:focus </span><span class="token punctuation">{</span>
+ <span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
+ <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 0 0 2px <span class="token function">theme-color</span><span class="token punctuation">(</span><span class="token string">'primary'</span><span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token selector"><span class="token parent important">&amp;</span>:hover </span><span class="token punctuation">{</span>
+ <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">theme-color-dark</span><span class="token punctuation">(</span><span class="token string">'light'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+<span class="token selector"><span class="token parent important">&amp;</span>.alert-info </span><span class="token punctuation">{</span>
+<span class="token property">border-left-color</span><span class="token punctuation">:</span> <span class="token function">theme-color</span><span class="token punctuation">(</span><span class="token string">&quot;info&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">theme-color-light</span><span class="token punctuation">(</span><span class="token string">&quot;info&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property">fill</span><span class="token punctuation">:</span> <span class="token function">theme-color</span><span class="token punctuation">(</span><span class="token string">&quot;info&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h4 id="motion-scss"><a href="#motion-scss" class="header-anchor">#</a> <code>_motion.scss</code></h4> <p>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.</p> <h5 id="motion-styles"><a href="#motion-styles" class="header-anchor">#</a> Motion Styles</h5> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token property"><span class="token variable">$duration--fast-01</span></span><span class="token punctuation">:</span> 70ms<span class="token punctuation">;</span> <span class="token comment">//Micro-interactions such as button and toggle</span>
+<span class="token property"><span class="token variable">$duration--fast-02</span></span><span class="token punctuation">:</span> 110ms<span class="token punctuation">;</span> <span class="token comment">//Micro-interactions such as fade</span>
+<span class="token property"><span class="token variable">$duration--moderate-01</span></span><span class="token punctuation">:</span> 150ms<span class="token punctuation">;</span> <span class="token comment">//Micro-interactions, small expansion, short distance movements</span>
+<span class="token property"><span class="token variable">$duration--moderate-02</span></span><span class="token punctuation">:</span> 240ms<span class="token punctuation">;</span> <span class="token comment">//Expansion, system communication, toast</span>
+<span class="token property"><span class="token variable">$duration--slow-01</span></span><span class="token punctuation">:</span> 400ms<span class="token punctuation">;</span> <span class="token comment">//Large expansion, important system notifications</span>
+<span class="token property"><span class="token variable">$duration--slow-02</span></span><span class="token punctuation">:</span> 700ms<span class="token punctuation">;</span> <span class="token comment">//Background dimming</span>
+
+<span class="token property"><span class="token variable">$standard-easing--productive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.2<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.38<span class="token punctuation">,</span> 0.9<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$standard-easing--expressive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.4<span class="token punctuation">,</span> 0.14<span class="token punctuation">,</span> 0.3<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$entrance-easing--productive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.38<span class="token punctuation">,</span> 0.9<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$entrance-easing--expressive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$exit-easing--productive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.2<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 1<span class="token punctuation">,</span> 0.9<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token property"><span class="token variable">$exit-easing--expressive</span></span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>0.4<span class="token punctuation">,</span> 0.14<span class="token punctuation">,</span> 1<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre></div><h5 id="example"><a href="#example" class="header-anchor">#</a> Example</h5> <div class="language-scss extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-scss"><code><span class="token selector">.link-skip-nav </span><span class="token punctuation">{</span>
+ <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
+ <span class="token property">top</span><span class="token punctuation">:</span> -60px<span class="token punctuation">;</span>
+ <span class="token property">left</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
+ <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token variable">$zindex-popover</span><span class="token punctuation">;</span>
+ <span class="token property">transition</span><span class="token punctuation">:</span> <span class="token variable">$duration--moderate-01</span> <span class="token variable">$exit-easing--expressive</span><span class="token punctuation">;</span>
+ <span class="token selector"><span class="token parent important">&amp;</span>:focus </span><span class="token punctuation">{</span>
+ <span class="token property">top</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
+ <span class="token property">transition-timing-function</span><span class="token punctuation">:</span> <span class="token variable">$entrance-easing--expressive</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre></div><h5 id="motion-resources"><a href="#motion-resources" class="header-anchor">#</a> Motion Resources</h5> <ul><li><a href="https://www.smashingmagazine.com/2019/02/animation-design-system/" target="_blank" rel="noopener noreferrer">Including Animation In Your Design
+System<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.carbondesignsystem.com/guidelines/motion/basics/" target="_blank" rel="noopener noreferrer">Carbon Design System motion
+guidelines<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h4 id="variables-scss"><a href="#variables-scss" class="header-anchor">#</a> <code>_variables.scss</code></h4> <p>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 <a href="/customize/theme">Customization section</a>.</p> <h3 id="bootstrap-directory"><a href="#bootstrap-directory" class="header-anchor">#</a> <code>bootstrap</code> Directory</h3> <p>The <code>bootstrap</code> 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.</p> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+ ├─ assets
+ ├─ styles
+ ├─ bmc
+ ├─ bootstrap
+ ├─ _helpers.scss
+ └─ _index.scss
+ └─ _obmc-custom.scss
+</code></pre></div><h4 id="helpers-scss"><a href="#helpers-scss" class="header-anchor">#</a> <code>_helpers.scss</code></h4> <p>This file contains all the helper import references for Bootstrap.</p> <h4 id="index-scss"><a href="#index-scss" class="header-anchor">#</a> <code>_index.scss</code></h4> <p>This file contains all the import references needed to support the base,
+components, and utility styles.</p> <h3 id="obmc-custom-scss"><a href="#obmc-custom-scss" class="header-anchor">#</a> <code>_obmc-custom.scss</code></h3> <div class="language- extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br></div><pre class="language-text"><code>.
+├─ src
+ ├─ assets
+ ├─ styles
+ ├─ bmc
+ ├─ bootstrap
+ └─ _obmc-custom.scss
+</code></pre></div><p>The <code>obmc-custom.scss</code> file defines all of the presentational layer
+dependencies.</p> <ul><li><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options" target="_blank" rel="noopener noreferrer">Read more about Bootstrap
+options<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#importing" target="_blank" rel="noopener noreferrer">Read more about
+Importing<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="component-view-styles"><a href="#component-view-styles" class="header-anchor">#</a> Component / View Styles</h2> <p>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 <code>&lt;style&gt;</code> block. It is required to import the
+<code>_helpers</code> Sass file when using a BMC or Bootstrap variable in the component's
+<code>&lt;style&gt;</code> block. Without this import, webpack cannot compile the OpenBMC Web UI
+CSS styles correctly.</p> <h3 id="scoped-style-block-using-sass"><a href="#scoped-style-block-using-sass" class="header-anchor">#</a> Scoped style block using SASS</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+ ...
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="scoped-style-block-using-css"><a href="#scoped-style-block-using-css" class="header-anchor">#</a> Scoped style block using CSS</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+ ...<span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><h3 id="example-pagesection-vue"><a href="#example-pagesection-vue" class="header-anchor">#</a> Example - PageSection.vue</h3> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
+ <span class="token selector">.page-section</span> <span class="token punctuation">{</span>
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> $spacer * 2<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+
+ <span class="token selector">h2</span> <span class="token punctuation">{</span>
+ <span class="token atrule"><span class="token rule">@include</span> <span class="token function">font-size</span><span class="token punctuation">(</span>$h3-font-size<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
+ <span class="token property">margin-bottom</span><span class="token punctuation">:</span> $spacer<span class="token selector">;
+ &amp;::after</span> <span class="token punctuation">{</span>
+ <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
+ <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
+ <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+ <span class="token property">border</span><span class="token punctuation">:</span> 1px solid $gray-300<span class="token punctuation">;</span>
+ <span class="token property">margin-top</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
+</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>You might notice that there is an HTML element, <code>&lt;h2&gt;</code>, used in the example. This is an anti-pattern in global <code>.scss</code> files. However, in a single file component that generates the markup it is acceptable.</p></div> <p><a href="https://vuejs.org/v2/guide/single-file-components.html" target="_blank" rel="noopener noreferrer">Learn more about single file components<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>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.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/webui-vue/customization/theme.html">
+ Theme customization
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/22.22ba3b96.js" defer></script>
+ </body>
+</html>
diff --git a/customization/theme.html b/customization/theme.html
new file mode 100644
index 000000000..ddd7e928b
--- /dev/null
+++ b/customization/theme.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Theme customization | OpenBMC Web UI Style Guide</title>
+ <meta name="generator" content="VuePress 1.8.2">
+
+ <meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
+
+ <link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/23.42b49486.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/4.e088be67.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
+ <link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.css">
+ </head>
+ <body>
+ <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link">
+ Guide
+</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link router-link-active">
+ Customization
+</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
+ Github
+ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/customization/" aria-current="page" class="sidebar-link">Presentation Layer Architecture</a></li><li><a href="/webui-vue/customization/theme.html" aria-current="page" class="active sidebar-link">Theme customization</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#environment-specific-builds" class="sidebar-link">Environment specific builds</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#bootstrap-sass-options" class="sidebar-link">Bootstrap Sass Options</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#bootstrap-sass-variables" class="sidebar-link">Bootstrap Sass Variables</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#openbmc-custom-sass-options" class="sidebar-link">OpenBMC Custom Sass Options</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#updating-colors" class="sidebar-link">Updating Colors</a></li><li class="sidebar-sub-header"><a href="/webui-vue/customization/theme.html#adding-a-logo" class="sidebar-link">Adding a logo</a></li></ul></li><li><a href="/webui-vue/customization/build.html" class="sidebar-link">Build Customization</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="theme-customization"><a href="#theme-customization" class="header-anchor">#</a> Theme customization</h1> <p>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.</p> <h2 id="environment-specific-builds"><a href="#environment-specific-builds" class="header-anchor">#</a> Environment specific builds</h2> <p>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.</p> <p><a href="/customization/build">Read more in the Build Customization section</a></p> <h3 id="configuring-environment-specific-builds"><a href="#configuring-environment-specific-builds" class="header-anchor">#</a> Configuring environment specific builds</h3> <p>The complete instructions can be found in the <code>env</code> directory in a file called
+env.md or by viewing the <a href="/webui-vue/customization/env.html">Configuring environment specific builds
+page</a></p> <h2 id="bootstrap-sass-options"><a href="#bootstrap-sass-options" class="header-anchor">#</a> Bootstrap Sass Options</h2> <p>The Bootstrap Sass options are global styling toggles. The naming convention for
+these built-in variables is <code>enabled-*</code>.</p> <h3 id="enable-rounded"><a href="#enable-rounded" class="header-anchor">#</a> $enable-rounded</h3> <p>This option enables or disables the border-radius styles on various components.</p> <ul><li>Set to <code>false</code> to remove rounded corners on all container elements and buttons</li></ul> <h3 id="enable-validation-icons"><a href="#enable-validation-icons" class="header-anchor">#</a> $enable-validation-icons</h3> <p>This option enables or disables background-image icons within textual inputs and
+some custom forms for validation states.</p> <ul><li>Set to <code>false</code> due to inability to style icons using CSS</li></ul> <h3 id="more-information"><a href="#more-information" class="header-anchor">#</a> More information</h3> <ul><li><a href="https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options" target="_blank" rel="noopener noreferrer">View all the Bootstrap Sass
+Options<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="bootstrap-sass-variables"><a href="#bootstrap-sass-variables" class="header-anchor">#</a> Bootstrap Sass Variables</h2> <p>These are global variables that Bootstrap defines in the
+<code>/node_modules/bootstrap/scss/variables.scss</code> helper file. Adding a variable
+listed in this file to the <code>/src/assets/styles/bmc/helpers/_variables.scss</code> file
+will override the Bootstrap defined value.</p> <h3 id="transition-base"><a href="#transition-base" class="header-anchor">#</a> $transition-base</h3> <p>This variable sets the base CSS transition style throughout the application.</p> <ul><li>Set to <code>all $duration--moderate-02 $standard-easing--productive</code></li></ul> <h3 id="transition-fade"><a href="#transition-fade" class="header-anchor">#</a> $transition-fade</h3> <p>This variable sets the transition when showing and hiding elements.</p> <ul><li>Set to <code>opacity $duration--moderate-01 $standard-easing--productive</code></li></ul> <h3 id="transition-collapse"><a href="#transition-collapse" class="header-anchor">#</a> $transition-collapse</h3> <p>This variable sets the CSS transitions throughout the application when expanding
+and collapsing elements.</p> <ul><li>Set to <code>height $duration--slow-01 $standard-easing--expressive</code></li></ul> <h3 id="more-information-2"><a href="#more-information-2" class="header-anchor">#</a> More Information</h3> <ul><li><a href="https://www.carbondesignsystem.com/guidelines/motion/basics/" target="_blank" rel="noopener noreferrer">Carbon Design System Motion
+Guidelines<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.smashingmagazine.com/2019/02/animation-design-system/" target="_blank" rel="noopener noreferrer">Including Animation In Your Design
+System<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="openbmc-custom-sass-options"><a href="#openbmc-custom-sass-options" class="header-anchor">#</a> OpenBMC Custom Sass Options</h2> <h3 id="responsive-layout-bp"><a href="#responsive-layout-bp" class="header-anchor">#</a> $responsive-layout-bp</h3> <p>This variable determines when the primary navigation is hidden and when the
+hamburger menu is displayed. The breakpoint is defined using a Bootstrap
+function that only accepts a key from the Bootstrap <code>$grid-breakpoints</code> map.</p> <ul><li>xs - Navigation is always displayed</li> <li>sm - Navigation displayed when the viewport is greater than 576px</li> <li>md - Navigation displayed when the viewport is greater than 768px</li> <li>lg - Navigation displayed when the viewport is greater than 992px</li> <li>xl - Navigation displayed when the viewport is less than 1200px</li></ul> <h4 id="responsive-resources"><a href="#responsive-resources" class="header-anchor">#</a> Responsive Resources</h4> <ul><li><a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">Bootstrap responsive
+breakpoints<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">Bootstrap Sass
+Mixins<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">Customizing the Bootstrap
+Grid<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="header-height"><a href="#header-height" class="header-anchor">#</a> $header-height</h3> <p>This variable determines the height of the OpenBMC Web UI header element.</p> <ul><li>Default value: 56px</li></ul> <h3 id="navigation-width"><a href="#navigation-width" class="header-anchor">#</a> $navigation-width</h3> <p>This variable determines the width of the primary navigation menu when expanded.</p> <ul><li>Default value: 300px</li></ul> <h3 id="container-bgd"><a href="#container-bgd" class="header-anchor">#</a> $container-bgd</h3> <p>This option sets the background of page containers. Changing the value of this
+variable will change the background color for the following elements:</p> <ul><li>Login page</li> <li>Primary navigation section</li> <li>Quick links section on the overview page</li></ul> <h4 id="value"><a href="#value" class="header-anchor">#</a> Value</h4> <ul><li>Default value: $gray-200</li></ul> <h3 id="primary-nav-hover"><a href="#primary-nav-hover" class="header-anchor">#</a> $primary-nav-hover</h3> <p>The semantic naming of this variable identifies its purpose. This color should
+always be slightly darker than the <code>$container-bgd</code> value.</p> <ul><li>Default value: $gray-300</li></ul> <h2 id="updating-colors"><a href="#updating-colors" class="header-anchor">#</a> Updating Colors</h2> <p>Supporting a different color palette is a simple process. The default color
+palette is supported using the Sass variables outlined in the color guidelines
+and color maps outlined in the theme's overview. The following sections provide
+directions to update the settings to meet your organization's needs.</p> <h3 id="color"><a href="#color" class="header-anchor">#</a> Color</h3> <p>The OpenBMC Web UI uses Sass variables and maps to build its layout and
+components. Bootstrap variables and maps use the <code>!default</code> flag to allow for
+overrides. There are three Sass maps created to establish the color palette.
+These include the <code>color</code> map, <code>theme-color</code> map, and <code>gray</code> map. These maps are
+used by Bootstrap to build the application's CSS stylesheets.</p> <h4 id="all-colors"><a href="#all-colors" class="header-anchor">#</a> All Colors</h4> <p>The OpenBMC Web UI custom colors are available as Sass variables and a Sass map
+in <code>/src/assets/styles/bmc/helpers/_variables.scss</code>. The OpenBMC theme only
+requires a subset of the colors to create the look and feel of the application.
+Adding, removing, or updating the color variables and map is how the application
+color palette can be customized. Using these variables outside of the helper
+files is discouraged to avoid tightly coupling the OpenBMC Web UI theme to
+specific colors.</p> <p>The <code>color</code> map is not as important as the <code>theme-color</code> map. A tight-coupling
+of the Sass variable name to the color name makes it hard to use the <code>color</code> map
+keys for customization. Using these keys in Sass stylesheets or single-file
+components is discouraged.</p> <h4 id="theme-colors"><a href="#theme-colors" class="header-anchor">#</a> Theme Colors</h4> <p>The theme color variables and the <code>theme-color</code> map consist of a subset of the
+color variables. This smaller color palette creates a scheme that is not
+dependent on specific colors like blue or green. Several of the Bootstrap
+<code>theme-color</code> map keys are required to generate the CSS styles. The OpenBMC Web
+UI <code>theme-color</code> map has the same keys as the Bootstrap <code>theme-color</code> map with
+custom values.</p> <p>The <code>theme-color</code> map is used heavily throughout the application. The
+Bootstrap-Vue components <code>variant</code> prop also utilizes the <code>theme-color</code> map.
+This map is the key to customizing the application's color palette. Take a look
+at the <a href="/guide/guidelines/colors">color guidelines</a> to better understand default
+theme-colors map.</p> <h4 id="gray-colors"><a href="#gray-colors" class="header-anchor">#</a> Gray Colors</h4> <p>The gray color palette contains nine shades of gray that range from light to
+dark. Bootstrap sets a default gray color value for each color variable from
+100-900 in increments of one hundred, for example, <code>$gray-100</code>, <code>$gray-200</code>,
+<code>$gray-300</code> through <code>gray-900</code>. Bootstrap does not create a color map for any of
+the colors except gray. The Bootstrap documentation indicates that adding color
+maps for all the default colors is scheduled to be delivered in a future patch.
+The OpenBMC Web UI color theme overrides all shades of the Bootstrap default
+gray variable values.</p> <p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#color" target="_blank" rel="noopener noreferrer">Learn more about Bootstrap
+colors<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="bootstrap-color-functions"><a href="#bootstrap-color-functions" class="header-anchor">#</a> Bootstrap Color Functions</h3> <ul><li><code>color('&lt;color map key&gt;)</code></li> <li><code>theme-color('&lt;theme color map key&gt;)</code></li> <li><code>gray('&lt;gray color palette key'&gt;)</code></li></ul> <h4 id="example"><a href="#example" class="header-anchor">#</a> Example</h4> <div class="language-SCSS extra-class"><pre class="language-scss"><code><span class="token selector">.some-selector </span><span class="token punctuation">{</span>
+ <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">color</span><span class="token punctuation">(</span><span class="token string">&quot;blue&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">theme-color</span><span class="token punctuation">(</span><span class="token string">&quot;light&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">gray</span><span class="token punctuation">(</span><span class="token string">&quot;900&quot;</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span>
+</code></pre></div><p><a href="https://getbootstrap.com/docs/4.0/getting-started/theming/#functions" target="_blank" rel="noopener noreferrer">Learn more about using Bootstrap
+functions<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="adding-a-logo"><a href="#adding-a-logo" class="header-anchor">#</a> Adding a logo</h2> <p>The updated page header can include a small logo. The guidelines for adding a
+logo and the suggested logo dimensions are currently in progress. It may be
+challenging to meet all organization brand guidelines due to the minimal height
+of the page header. The company logo might be able to be set in the primary
+navigation, but a design supporting that option will be the focus of future
+design work.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
+ ←
+ <a href="/webui-vue/customization/" class="prev router-link-active">
+ Presentation Layer Architecture
+ </a></span> <span class="next"><a href="/webui-vue/customization/build.html">
+ Build Customization
+ </a>
+ →
+ </span></p></div> </main></div><div class="global-ui"></div></div>
+ <script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/23.42b49486.js" defer></script>
+ </body>
+</html>