docs/customization/theme.md

3 Customization of the application requires knowledge of Sass and CSS. It also
4 will require becoming familiar with the Bootstrap and Bootstrap-Vue component
8 ## Environment specific builds
12 application navigation, and theming.
16 ### Configuring environment specific builds
20 [Configuring environment specific builds page](./env.md)
25 these built-in variables is `enabled-*`.
27 ### $enable-rounded
29 This option enables or disables the border-radius styles on various components.
31 - Set to `false` to remove rounded corners on all container elements and buttons
33 ### $enable-validation-icons
35 This option enables or disables background-image icons within textual inputs and
38 - Set to `false` due to inability to style icons using CSS
42 - [View all the Bootstrap Sass Options](https://getbootstrap.com/docs/4.2/getting-started/theming/#…
51 ### $transition-base
53 This variable sets the base CSS transition style throughout the application.
55 - Set to `all $duration--moderate-02 $standard-easing--productive`
57 ### $transition-fade
61 - Set to `opacity $duration--moderate-01 $standard-easing--productive`
63 ### $transition-collapse
65 This variable sets the CSS transitions throughout the application when expanding
68 - Set to `height $duration--slow-01 $standard-easing--expressive`
72 - [Carbon Design System Motion Guidelines](https://www.carbondesignsystem.com/guidelines/motion/bas…
73 - [Including Animation In Your Design System](https://www.smashingmagazine.com/2019/02/animation-de…
77 ### $responsive-layout-bp
81 function that only accepts a key from the Bootstrap `$grid-breakpoints` map.
83 - xs - Navigation is always displayed
84 - sm - Navigation displayed when the viewport is greater than 576px
85 - md - Navigation displayed when the viewport is greater than 768px
86 - lg - Navigation displayed when the viewport is greater than 992px
87 - xl - Navigation displayed when the viewport is less than 1200px
91 - [Bootstrap responsive breakpoints](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-…
92 - [Bootstrap Sass Mixins](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
93 - [Customizing the Bootstrap Grid](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-br…
95 ### $header-height
99 - Default value: 56px
101 ### $navigation-width
105 - Default value: 300px
107 ### $container-bgd
112 - Login page
113 - Primary navigation section
114 - Quick links section on the overview page
118 - Default value: $gray-200
120 ### $primary-nav-hover
123 always be slightly darker than the `$container-bgd` value.
125 - Default value: $gray-300
139 These include the `color` map, `theme-color` map, and `gray` map. These maps are
140 used by Bootstrap to build the application's CSS stylesheets.
146 requires a subset of the colors to create the look and feel of the application.
147 Adding, removing, or updating the color variables and map is how the application
150 specific colors.
152 The `color` map is not as important as the `theme-color` map. A tight-coupling
154 keys for customization. Using these keys in Sass stylesheets or single-file
159 The theme color variables and the `theme-color` map consist of a subset of the
161 dependent on specific colors like blue or green. Several of the Bootstrap
162 `theme-color` map keys are required to generate the CSS styles. The OpenBMC Web
163 UI `theme-color` map has the same keys as the Bootstrap `theme-color` map with
166 The `theme-color` map is used heavily throughout the application. The
167 Bootstrap-Vue components `variant` prop also utilizes the `theme-color` map.
168 This map is the key to customizing the application's color palette. Take a look
170 theme-colors map.
176 100-900 in increments of one hundred, for example, `$gray-100`, `$gray-200`,
177 `$gray-300` through `gray-900`. Bootstrap does not create a color map for any of
183 [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#colo…
187 - `color('<color map key>)`
188 - `theme-color('<theme color map key>)`
189 - `gray('<gray color palette key'>)`
194 .some-selector {
196   background: theme-color("light");
201 [Learn more about using Bootstrap functions](https://getbootstrap.com/docs/4.0/getting-started/them…