1
|
(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{406:function(e,t,a){"use strict";a.r(t);var s=a(41),o=Object(s.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"theme-customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme-customization"}},[e._v("#")]),e._v(" Theme customization")]),e._v(" "),a("p",[e._v("Customization of the application requires knowledge of Sass and CSS. It also\nwill require becoming familiar with the Bootstrap and Bootstrap-Vue component\nlibraries. This section outlines the global options and variables that can be\nremoved or updated to meet organizational brand guidelines.")]),e._v(" "),a("h2",{attrs:{id:"environment-specific-builds"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#environment-specific-builds"}},[e._v("#")]),e._v(" Environment specific builds")]),e._v(" "),a("p",[e._v("Any organization can create a build that meets their branding and other\ncustomization needs. This includes customization of the state store, routing,\napplication navigation, and theming.")]),e._v(" "),a("p",[a("a",{attrs:{href:"/customization/build"}},[e._v("Read more in the Build Customization section")])]),e._v(" "),a("h3",{attrs:{id:"configuring-environment-specific-builds"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#configuring-environment-specific-builds"}},[e._v("#")]),e._v(" Configuring environment specific builds")]),e._v(" "),a("p",[e._v("The complete instructions can be found in the "),a("code",[e._v("env")]),e._v(" directory in a file called\nenv.md or by viewing the "),a("RouterLink",{attrs:{to:"/customization/env.html"}},[e._v("Configuring environment specific builds\npage")])],1),e._v(" "),a("h2",{attrs:{id:"bootstrap-sass-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bootstrap-sass-options"}},[e._v("#")]),e._v(" Bootstrap Sass Options")]),e._v(" "),a("p",[e._v("The Bootstrap Sass options are global styling toggles. The naming convention for\nthese built-in variables is "),a("code",[e._v("enabled-*")]),e._v(".")]),e._v(" "),a("h3",{attrs:{id:"enable-rounded"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enable-rounded"}},[e._v("#")]),e._v(" $enable-rounded")]),e._v(" "),a("p",[e._v("This option enables or disables the border-radius styles on various components.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("false")]),e._v(" to remove rounded corners on all container elements and buttons")])]),e._v(" "),a("h3",{attrs:{id:"enable-validation-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enable-validation-icons"}},[e._v("#")]),e._v(" $enable-validation-icons")]),e._v(" "),a("p",[e._v("This option enables or disables background-image icons within textual inputs and\nsome custom forms for validation states.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("false")]),e._v(" due to inability to style icons using CSS")])]),e._v(" "),a("h3",{attrs:{id:"more-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-information"}},[e._v("#")]),e._v(" More information")]),e._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options",target:"_blank",rel:"noopener noreferrer"}},[e._v("View all the Bootstrap Sass\nOptions"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"bootstrap-sass-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bootstrap-sass-variables"}},[e._v("#")]),e._v(" Bootstrap Sass Variables")]),e._v(" "),a("p",[e._v("These are global variables that Bootstrap defines in the\n"),a("code",[e._v("/node_modules/bootstrap/scss/variables.scss")]),e._v(" helper file. Adding a variable\nlisted in this file to the "),a("code",[e._v("/src/assets/styles/bmc/helpers/_variables.scss")]),e._v(" file\nwill override the Bootstrap defined value.")]),e._v(" "),a("h3",{attrs:{id:"transition-base"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transition-base"}},[e._v("#")]),e._v(" $transition-base")]),e._v(" "),a("p",[e._v("This variable sets the base CSS transition style throughout the application.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("all $duration--moderate-02 $standard-easing--productive")])])]),e._v(" "),a("h3",{attrs:{id:"transition-fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transition-fade"}},[e._v("#")]),e._v(" $transition-fade")]),e._v(" "),a("p",[e._v("This variable sets the transition when showing and hiding elements.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("opacity $duration--moderate-01 $standard-easing--productive")])])]),e._v(" "),a("h3",{attrs:{id:"transition-collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transition-collapse"}},[e._v("#")]),e._v(" $transition-collapse")]),e._v(" "),a("p",[e._v("This variable sets the CSS transitions throughout the application when expanding\nand collapsing elements.")]),e._v(" "),a("ul",[a("li",[e._v("Set to "),a("code",[e._v("height $duration--slow-01 $standard-easing--expressive")])])]),e._v(" "),a("h3",{attrs:{id:"more-information-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-information-2"}},[e._v("#")]),e._v(" More Information")]),e._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://www.carbondesignsystem.com/guidelines/motion/basics/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Carbon Design System Motion\nGuidelines"),a("OutboundLink")],1)]),e._v(" "),a("li",[a("a",{attrs:{href:"https://www.smashingmagazine.com/2019/02/animation-design-system/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Including Animation In Your Design\nSystem"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"openbmc-custom-sass-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#openbmc-custom-sass-options"}},[e._v("#")]),e._v(" OpenBMC Custom Sass Options")]),e._v(" "),a("h3",{attrs:{id:"responsive-layout-bp"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout-bp"}},[e._v("#")]),e._v(" $responsive-layout-bp")]),e._v(" "),a("p",[e._v("This variable determines when the primary navigation is hidden and when the\nhamburger menu is displayed. The breakpoint is defined using a Bootstrap\nfunction that only accepts a key from the Bootstrap "),a("code",[e._v("$grid-breakpoints")]),e._v(" map.")]),e._v(" "),a("ul",[a("li",[e._v("xs - Navigation is always displayed")]),e._v(" "),a("li",[e._v("sm - Navigation displayed when the viewport is greater than 576px")]),e._v(" "),a("li",[e._v("md - Navigation displayed when the viewport is greater than 768px")]),e._v(" "),a("li",[e._v("lg - Navigation displayed when the viewport is greater than 992px")]),e._v(" "),a("li",[e._v("xl - Navigation displayed when the viewport is less than 1200px")])]),e._v(" "),a("h4",{attrs:{id:"responsive-resources"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-resources"}},[e._v("#")]),e._v(" Responsive Resources")]),e._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints",target:"_blank",rel:"noopener noreferrer"}},[e._v("Bootstrap responsive\nbreakpoints"),a("OutboundLink")],1)]),e._v(" "),a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints",target:"_blank",rel:"noopener noreferrer"}},[e._v("Bootstrap Sass\nMixins"),a("OutboundLink")],1)]),e._v(" "),a("li",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints",target:"_blank",rel:"noopener noreferrer"}},[e._v("Customizing the Bootstrap\nGrid"),a("OutboundLink")],1)])]),e._v(" "),a("h3",{attrs:{id:"header-height"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#header-height"}},[e._v("#")]),e._v(" $header-height")]),e._v(" "),a("p",[e._v("This variable determines the height of the OpenBMC Web UI header element.")]),e._v(" "),a("ul",[a("li",[e._v("Default value: 56px")])]),e._v(" "),a("h3",{attrs:{id:"navigation-width"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navigation-width"}},[e._v("#")]),e._v(" $navigation-width")]),e._v(" "),a("p",[e._v("This variable determines the width of the primary navigation menu when expanded.")]),e._v(" "),a("ul",[a("li",[e._v("Default value: 300px")])]),e._v(" "),a("h3",{attrs:{id:"container-bgd"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#container-bgd"}},[e._v("#")]),e._v(" $container-bgd")]),e._v(" "),a("p",[e._v("This option sets the background of page containers. Changing the value of this\nvariable will change the background color for the following elements:")]),e._v(" "),a("ul",[a("li",[e._v("Login page")]),e._v(" "),a("li",[e._v("Primary navigation section")]),e._v(" "),a("li",[e._v("Quick links section on the overview page")])]),e._v(" "),a("h4",{attrs:{id:"value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#value"}},[e._v("#")]),e._v(" Value")]),e._v(" "),a("ul",[a("li",[e._v("Default value: $gray-200")])]),e._v(" "),a("h3",{attrs:{id:"primary-nav-hover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#primary-nav-hover"}},[e._v("#")]),e._v(" $primary-nav-hover")]),e._v(" "),a("p",[e._v("The semantic naming of this variable identifies its purpose. This color should\nalways be slightly darker than the "),a("code",[e._v("$container-bgd")]),e._v(" value.")]),e._v(" "),a("ul",[a("li",[e._v("Default value: $gray-300")])]),e._v(" "),a("h2",{attrs:{id:"updating-colors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#updating-colors"}},[e._v("#")]),e._v(" Updating Colors")]),e._v(" "),a("p",[e._v("Supporting a different color palette is a simple process. The default color\npalette is supported using the Sass variables outlined in the color guidelines\nand color maps outlined in the theme's overview. The following sections provide\ndirections to update the settings to meet your organization's needs.")]),e._v(" "),a("h3",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color"}},[e._v("#")]),e._v(" Color")]),e._v(" "),a("p",[e._v("The OpenBMC Web UI uses Sass variables and maps to build its layout and\ncomponents. Bootstrap variables and maps use the "),a("code",[e._v("!default")]),e._v(" flag to allow for\noverrides. There are three Sass maps created to establish the color palette.\nThese include the "),a("code",[e._v("color")]),e._v(" map, "),a("code",[e._v("theme-color")]),e._v(" map, and "),a("code",[e._v("gray")]),e._v(" map. These maps are\nused by Bootstrap to build the application's CSS stylesheets.")]),e._v(" "),a("h4",{attrs:{id:"all-colors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#all-colors"}},[e._v("#")]),e._v(" All Colors")]),e._v(" "),a("p",[e._v("The OpenBMC Web UI custom colors are available as Sass variables and a Sass map\nin "),a("code",[e._v("/src/assets/styles/bmc/helpers/_variables.scss")]),e._v(". The OpenBMC theme only\nrequires a subset of the colors to create the look and feel of the application.\nAdding, removing, or updating the color variables and map is how the application\ncolor palette can be customized. Using these variables outside of the helper\nfiles is discouraged to avoid tightly coupling the OpenBMC Web UI theme to\nspecific colors.")]),e._v(" "),a("p",[e._v("The "),a("code",[e._v("color")]),e._v(" map is not as important as the "),a("code",[e._v("theme-color")]),e._v(" map. A tight-coupling\nof the Sass variable name to the color name makes it hard to use the "),a("code",[e._v("color")]),e._v(" map\nkeys for customization. Using these keys in Sass stylesheets or single-file\ncomponents is discouraged.")]),e._v(" "),a("h4",{attrs:{id:"theme-colors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme-colors"}},[e._v("#")]),e._v(" Theme Colors")]),e._v(" "),a("p",[e._v("The theme color variables and the "),a("code",[e._v("theme-color")]),e._v(" map consist of a subset of the\ncolor variables. This smaller color palette creates a scheme that is not\ndependent on specific colors like blue or green. Several of the Bootstrap\n"),a("code",[e._v("theme-color")]),e._v(" map keys are required to generate the CSS styles. The OpenBMC Web\nUI "),a("code",[e._v("theme-color")]),e._v(" map has the same keys as the Bootstrap "),a("code",[e._v("theme-color")]),e._v(" map with\ncustom values.")]),e._v(" "),a("p",[e._v("The "),a("code",[e._v("theme-color")]),e._v(" map is used heavily throughout the application. The\nBootstrap-Vue components "),a("code",[e._v("variant")]),e._v(" prop also utilizes the "),a("code",[e._v("theme-color")]),e._v(" map.\nThis map is the key to customizing the application's color palette. Take a look\nat the "),a("a",{attrs:{href:"/guide/guidelines/colors"}},[e._v("color guidelines")]),e._v(" to better understand default\ntheme-colors map.")]),e._v(" "),a("h4",{attrs:{id:"gray-colors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gray-colors"}},[e._v("#")]),e._v(" Gray Colors")]),e._v(" "),a("p",[e._v("The gray color palette contains nine shades of gray that range from light to\ndark. Bootstrap sets a default gray color value for each color variable from\n100-900 in increments of one hundred, for example, "),a("code",[e._v("$gray-100")]),e._v(", "),a("code",[e._v("$gray-200")]),e._v(",\n"),a("code",[e._v("$gray-300")]),e._v(" through "),a("code",[e._v("gray-900")]),e._v(". Bootstrap does not create a color map for any of\nthe colors except gray. The Bootstrap documentation indicates that adding color\nmaps for all the default colors is scheduled to be delivered in a future patch.\nThe OpenBMC Web UI color theme overrides all shades of the Bootstrap default\ngray variable values.")]),e._v(" "),a("p",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#color",target:"_blank",rel:"noopener noreferrer"}},[e._v("Learn more about Bootstrap\ncolors"),a("OutboundLink")],1)]),e._v(" "),a("h3",{attrs:{id:"bootstrap-color-functions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bootstrap-color-functions"}},[e._v("#")]),e._v(" Bootstrap Color Functions")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("color('<color map key>)")])]),e._v(" "),a("li",[a("code",[e._v("theme-color('<theme color map key>)")])]),e._v(" "),a("li",[a("code",[e._v("gray('<gray color palette key'>)")])])]),e._v(" "),a("h4",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example"}},[e._v("#")]),e._v(" Example")]),e._v(" "),a("div",{staticClass:"language-SCSS extra-class"},[a("pre",{pre:!0,attrs:{class:"language-scss"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[e._v(".some-selector ")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[e._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v('"blue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[e._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("theme-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v('"light"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[e._v("border")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(":")]),e._v(" 1px solid "),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("gray")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v('"900"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),a("p",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/getting-started/theming/#functions",target:"_blank",rel:"noopener noreferrer"}},[e._v("Learn more about using Bootstrap\nfunctions"),a("OutboundLink")],1)]),e._v(" "),a("h2",{attrs:{id:"adding-a-logo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#adding-a-logo"}},[e._v("#")]),e._v(" Adding a logo")]),e._v(" "),a("p",[e._v("The updated page header can include a small logo. The guidelines for adding a\nlogo and the suggested logo dimensions are currently in progress. It may be\nchallenging to meet all organization brand guidelines due to the minimal height\nof the page header. The company logo might be able to be set in the primary\nnavigation, but a design supporting that option will be the focus of future\ndesign work.")])])}),[],!1,null,null,null);t.default=o.exports}}]);
|
