docs/customization/theme.md

4 will require becoming familiar with the Bootstrap and Bootstrap-Vue component
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
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
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
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
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.
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…