From b115aea1eab526971983369986e2d2a56e17ff15 Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Fri, 17 Apr 2020 16:49:15 -0500 Subject: Add themes documentation - Renamed all index.md to readme.md to make consuming the documentation from the Github repo easier. VuePress treats index.md and readme.md the same way when building the static pages. - Added theme section overview documentation - Added how to customize documentation - Added custom style imports to support OpenBMC Web UI component documentation to remove Bootstrap framework base styles that conflict with the Vuepress theme - Found occurrences of the word Sass in upper-case and changed to use sentence case. Signed-off-by: Derick Montague Change-Id: If5588f88a3d75761cc47e85a3fb0a582b31d373c --- docs/.vuepress/components/BmcAlerts.vue | 14 -- docs/.vuepress/config.js | 2 +- docs/.vuepress/enhanceApp.js | 2 +- docs/.vuepress/styles/_bmc-overrides.scss | 0 docs/.vuepress/styles/_bmc.scss | 2 + docs/.vuepress/styles/_bootstrap-vue.scss | 1 + docs/.vuepress/styles/_bootstrap.scss | 34 ++++ docs/.vuepress/styles/_index.scss | 5 + docs/guide/coding-standards/index.md | 1 - docs/guide/coding-standards/readme.md | 1 + docs/guide/coding-standards/sass.md | 2 +- docs/guide/components/alert.md | 4 +- docs/guide/components/index.md | 4 - docs/guide/components/readme.md | 4 + docs/guide/guidelines/colors.md | 2 +- docs/guide/guidelines/index.md | 1 - docs/guide/guidelines/readme.md | 1 + docs/guide/index.md | 33 ---- docs/guide/readme.md | 33 ++++ docs/index.md | 7 - docs/readme.md | 7 + docs/themes/customize.md | 119 +++++++++++++ docs/themes/index.md | 1 - docs/themes/readme.md | 271 ++++++++++++++++++++++++++++++ 24 files changed, 485 insertions(+), 66 deletions(-) delete mode 100644 docs/.vuepress/components/BmcAlerts.vue create mode 100644 docs/.vuepress/styles/_bmc-overrides.scss create mode 100644 docs/.vuepress/styles/_bmc.scss create mode 100644 docs/.vuepress/styles/_bootstrap-vue.scss create mode 100644 docs/.vuepress/styles/_bootstrap.scss create mode 100644 docs/.vuepress/styles/_index.scss delete mode 100644 docs/guide/coding-standards/index.md create mode 100644 docs/guide/coding-standards/readme.md delete mode 100644 docs/guide/components/index.md create mode 100644 docs/guide/components/readme.md delete mode 100644 docs/guide/guidelines/index.md create mode 100644 docs/guide/guidelines/readme.md delete mode 100644 docs/guide/index.md create mode 100644 docs/guide/readme.md delete mode 100644 docs/index.md create mode 100644 docs/readme.md create mode 100644 docs/themes/customize.md delete mode 100644 docs/themes/index.md create mode 100644 docs/themes/readme.md (limited to 'docs') diff --git a/docs/.vuepress/components/BmcAlerts.vue b/docs/.vuepress/components/BmcAlerts.vue deleted file mode 100644 index 60440644..00000000 --- a/docs/.vuepress/components/BmcAlerts.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 8f94ff5b..dd112e61 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -51,7 +51,7 @@ module.exports = { ] } ], - "/themes/": [""] + "/themes/": ["", "customize"] }, } }; \ No newline at end of file diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 72fd24d7..9a3b2b64 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/docs/.vuepress/enhanceApp.js @@ -1,5 +1,5 @@ -import "../../src/assets/styles/_obmc-custom.scss"; +import "./styles/_index.scss"; import Alert from "../../src/components/Global/Alert"; import BVToastMixin from "../../src/components/Mixins/BVToastMixin"; diff --git a/docs/.vuepress/styles/_bmc-overrides.scss b/docs/.vuepress/styles/_bmc-overrides.scss new file mode 100644 index 00000000..e69de29b diff --git a/docs/.vuepress/styles/_bmc.scss b/docs/.vuepress/styles/_bmc.scss new file mode 100644 index 00000000..09d1f01d --- /dev/null +++ b/docs/.vuepress/styles/_bmc.scss @@ -0,0 +1,2 @@ +@import "src/assets/styles/bmc/helpers"; +@import "src/assets/styles/bmc/base"; \ No newline at end of file diff --git a/docs/.vuepress/styles/_bootstrap-vue.scss b/docs/.vuepress/styles/_bootstrap-vue.scss new file mode 100644 index 00000000..51410394 --- /dev/null +++ b/docs/.vuepress/styles/_bootstrap-vue.scss @@ -0,0 +1 @@ +@import "src/assets/styles/vendor/bootstrap-vue/index"; \ No newline at end of file diff --git a/docs/.vuepress/styles/_bootstrap.scss b/docs/.vuepress/styles/_bootstrap.scss new file mode 100644 index 00000000..31a5f34d --- /dev/null +++ b/docs/.vuepress/styles/_bootstrap.scss @@ -0,0 +1,34 @@ +// Removing reboot and type imports to resolve +// conflicts with vuepress styles +@import "~bootstrap/scss/functions"; +@import "~bootstrap/scss/variables"; +@import "~bootstrap/scss/mixins"; +@import "~bootstrap/scss/root"; +@import "~bootstrap/scss/alert"; +@import "~bootstrap/scss/badge"; +@import "~bootstrap/scss/breadcrumb"; +@import "~bootstrap/scss/button-group"; +@import "~bootstrap/scss/buttons"; +@import "~bootstrap/scss/card"; +@import "~bootstrap/scss/close"; +@import "~bootstrap/scss/code"; +@import "~bootstrap/scss/custom-forms"; +@import "~bootstrap/scss/dropdown"; +@import "~bootstrap/scss/forms"; +@import "~bootstrap/scss/grid"; +@import "~bootstrap/scss/images"; +@import "~bootstrap/scss/input-group"; +@import "~bootstrap/scss/list-group"; +@import "~bootstrap/scss/media"; +@import "~bootstrap/scss/modal"; +@import "~bootstrap/scss/nav"; +@import "~bootstrap/scss/navbar"; +@import "~bootstrap/scss/pagination"; +@import "~bootstrap/scss/popover"; +@import "~bootstrap/scss/progress"; +@import "~bootstrap/scss/spinners"; +@import "~bootstrap/scss/tables"; +@import "~bootstrap/scss/toasts"; +@import "~bootstrap/scss/tooltip"; +@import "~bootstrap/scss/transitions"; +@import "~bootstrap/scss/utilities"; \ No newline at end of file diff --git a/docs/.vuepress/styles/_index.scss b/docs/.vuepress/styles/_index.scss new file mode 100644 index 00000000..8587715a --- /dev/null +++ b/docs/.vuepress/styles/_index.scss @@ -0,0 +1,5 @@ + +@import "./bmc"; +@import "./bootstrap"; +@import "./bootstrap-vue"; +@import "./bmc-overrides"; diff --git a/docs/guide/coding-standards/index.md b/docs/guide/coding-standards/index.md deleted file mode 100644 index 4bba659e..00000000 --- a/docs/guide/coding-standards/index.md +++ /dev/null @@ -1 +0,0 @@ -# Overview \ No newline at end of file diff --git a/docs/guide/coding-standards/readme.md b/docs/guide/coding-standards/readme.md new file mode 100644 index 00000000..4bba659e --- /dev/null +++ b/docs/guide/coding-standards/readme.md @@ -0,0 +1 @@ +# Overview \ No newline at end of file diff --git a/docs/guide/coding-standards/sass.md b/docs/guide/coding-standards/sass.md index b990f50c..0467ffa0 100644 --- a/docs/guide/coding-standards/sass.md +++ b/docs/guide/coding-standards/sass.md @@ -1 +1 @@ -# SASS Conventions and Standards \ No newline at end of file +# Sass Conventions and Standards \ No newline at end of file diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md index 768aa873..1ad965bd 100644 --- a/docs/guide/components/alert.md +++ b/docs/guide/components/alert.md @@ -3,7 +3,9 @@ An alert is an inline message that contains a short description that a user cann [Learn more about Bootstrap-vue alert options](https://bootstrap-vue.js.org/docs/components/alert) - +This is a warning message +This is an error message +This is an info message ```vue This is a warning message diff --git a/docs/guide/components/index.md b/docs/guide/components/index.md deleted file mode 100644 index f10a1317..00000000 --- a/docs/guide/components/index.md +++ /dev/null @@ -1,4 +0,0 @@ -# Overview -Vue components are the building blocks of the OpenBMC Web UI. It uses both Boostrap-Vue components, as well as custom components. Using these components assures consistency throughout the application. They also improve the developer experience and increase efficiency. Review the existing components before using HTML markup. If the feature you're working on includes a new layout pattern, rather than adding raw markup to the page, consider creating a component that other sections of the application can use as well. - -[Learn more about Vue components](https://vuejs.org/v2/guide/components.html) \ No newline at end of file diff --git a/docs/guide/components/readme.md b/docs/guide/components/readme.md new file mode 100644 index 00000000..f10a1317 --- /dev/null +++ b/docs/guide/components/readme.md @@ -0,0 +1,4 @@ +# Overview +Vue components are the building blocks of the OpenBMC Web UI. It uses both Boostrap-Vue components, as well as custom components. Using these components assures consistency throughout the application. They also improve the developer experience and increase efficiency. Review the existing components before using HTML markup. If the feature you're working on includes a new layout pattern, rather than adding raw markup to the page, consider creating a component that other sections of the application can use as well. + +[Learn more about Vue components](https://vuejs.org/v2/guide/components.html) \ No newline at end of file diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md index b4e6d6cc..dd6e82ad 100644 --- a/docs/guide/guidelines/colors.md +++ b/docs/guide/guidelines/colors.md @@ -2,7 +2,7 @@ This color palette has been agreed upon by the OpenBMC community and differs from the Bootstrap color patterns. The OpenBMC palette includes custom hex values, along with additional blue, green, red, and yellow color variables used as accent colors for components. The `.scss` component files use these accent colors to override default styles set by the Bootstrap library. - [Learn more about downstream customization](/themes/) -- [Open an issue in the OpenBMC webui-vue repo](https://github.com/openbmc/webui-vue/issues/new) to request a change +- [Open an issue in the OpenBMC webui-vue repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a change - [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors) ## Grays diff --git a/docs/guide/guidelines/index.md b/docs/guide/guidelines/index.md deleted file mode 100644 index 4bba659e..00000000 --- a/docs/guide/guidelines/index.md +++ /dev/null @@ -1 +0,0 @@ -# Overview \ No newline at end of file diff --git a/docs/guide/guidelines/readme.md b/docs/guide/guidelines/readme.md new file mode 100644 index 00000000..4bba659e --- /dev/null +++ b/docs/guide/guidelines/readme.md @@ -0,0 +1 @@ +# Overview \ No newline at end of file diff --git a/docs/guide/index.md b/docs/guide/index.md deleted file mode 100644 index 6cf2197c..00000000 --- a/docs/guide/index.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -sidebarDepth: 0 ---- - -# Getting Started - -This guide outlines the architecture and technologies used to build the OpenBMC Web UI. This guide exists to serve the following goals: - -1. Improve contributor efficiency while maintaining the quality and consistency of the user interface -1. Act as a collection of community agreed-upon standards - -## Coding Standards -Having an understanding of semantic HTML, CSS, and JavaScript is the critical knowledge required to contribute to this project. The frameworks and libraries used to build this UI include: -- [Vue](https://vuejs.org/) -- [Vuex](https://vuex.vuejs.org/) -- [Vue Router](https://router.vuejs.org/) -- [Axios](https://github.com/axios/axios) -- [Bootstrap-vue](https://bootstrap-vue.js.org/) -- [Vuelidate](https://vuelidate.js.org/) -- [Vue I18n](https://kazupon.github.io/vue-i18n/) - -::: tip -Acquiring an understanding of these technologies will also be necessary. -::: - -You will find more information about the standards and best practices in the [Coding Standards section of this guide](/coding-standards/). - -## Guidelines -The [guidelines section](/guide/guidelines) contains the OpenBMC community agreed-upon decisions on color and typography within the application. How to theme the application to meet company brand guidelines is documented in [Themes](/themes). - -## Components -The [components section](/guide/components/) is a guide to using both custom Vue components and components from the Bootstrap-Vue library. - diff --git a/docs/guide/readme.md b/docs/guide/readme.md new file mode 100644 index 00000000..3a21e6f7 --- /dev/null +++ b/docs/guide/readme.md @@ -0,0 +1,33 @@ +--- +sidebarDepth: 0 +--- + +# Getting Started + +This guide outlines the architecture and technologies used to build the OpenBMC Web UI. This guide exists to serve the following goals: + +1. Improve contributor efficiency while maintaining the quality and consistency of the user interface +1. Act as a collection of community agreed-upon standards + +## Coding Standards +Having an understanding of semantic HTML, CSS, and JavaScript is the critical knowledge required to contribute to this project. The frameworks and libraries used to build this UI include: +- [Vue](https://vuejs.org/) +- [Vuex](https://vuex.vuejs.org/) +- [Vue Router](https://router.vuejs.org/) +- [Axios](https://github.com/axios/axios) +- [Bootstrap-vue](https://bootstrap-vue.js.org/) +- [Vuelidate](https://vuelidate.js.org/) +- [Vue I18n](https://kazupon.github.io/vue-i18n/) + +::: tip +Acquiring an understanding of these technologies will also be necessary. +::: + +You will find more information about the standards and best practices in the [Coding Standards section of this guide](/coding-standards/). + +## Guidelines +The [guidelines section](/guide/guidelines) contains the OpenBMC community agreed-upon decisions on color, motion, and typography within the application. How to theme the application to meet company brand guidelines is documented in [Themes](/themes). + +## Components +The [components section](/guide/components/) is a guide to using both custom Vue components and components from the Bootstrap-Vue library. + diff --git a/docs/index.md b/docs/index.md deleted file mode 100644 index 0630f0d0..00000000 --- a/docs/index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -home: true -heroImage: openbmc-logo.svg -heroText: Style Guide and Coding Conventions -actionText: Getting Started -actionLink: /guide/ ---- \ No newline at end of file diff --git a/docs/readme.md b/docs/readme.md new file mode 100644 index 00000000..0630f0d0 --- /dev/null +++ b/docs/readme.md @@ -0,0 +1,7 @@ +--- +home: true +heroImage: openbmc-logo.svg +heroText: Style Guide and Coding Conventions +actionText: Getting Started +actionLink: /guide/ +--- \ No newline at end of file diff --git a/docs/themes/customize.md b/docs/themes/customize.md new file mode 100644 index 00000000..6eb233ca --- /dev/null +++ b/docs/themes/customize.md @@ -0,0 +1,119 @@ +# How to customize +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. + +## Bootstrap Sass Options +The Bootstrap Sass options are global styling toggles. The naming convention for these built-in variables is `enabled-*`. + +### $enable-rounded +This option enables or disables the border-radius styles on various components. + +- Set to `false` to remove rounded corners on all container elements and buttons + +### $enable-validation-icons +This option enables or disables background-image icons within textual inputs and some custom forms for validation states. + +- Set to `false` due to inability to style icons using CSS + +### More information +- [View all the Bootstrap Sass Options](https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options) + +## Bootstrap Sass Variables +These are global variables that Bootsrap defines in the `/node_modules/bootstrap/scss/variables.scss` helper file. Adding a variable listed in this file to the `/src/assets/styles/bmc/helpers/_variables.scss` file will override the Bootstrap defined value. + +### $transition-base +This variable sets the base CSS transition style throughout the application. +- Set to `all $duration--moderate-02 $standard-easing--productive` + +### $transition-fade +This variable sets the transition when showing and hiding elements. + +- Set to `opacity $duration--moderate-01 $standard-easing--productive` + +### $transition-collapse +This variable sets the CSS transitions throughout the application when expanding and collapsing elements. + +- Set to `height $duration--slow-01 $standard-easing--expressive` + +### More Information +- [Carbon Design System Motion Guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/) +- [Including Animation In Your Design System](https://www.smashingmagazine.com/2019/02/animation-design-system/) + +## OpenBMC Custom Sass Options + +### $responsive-layout-bp +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 `$grid-breakpoints` map. + +- xs - Navigation is always displayed +- sm - Navigation displayed when the viewport is greater than 576px +- md - Navigation displayed when the viewport is greater than 768px +- lg - Navigation displayed when the viewport is greater than 992px +- xl - Navigation displayed when the viewport is less than 1200px + +#### Responsive Resources +- [Bootstrap responsive breakpoints](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) +- [Bootstrap Sass Mixins](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) +- [Customizing the Bootstrap Grid](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) + +### $header-height +This variable determines the height of the OpenBMC Web UI header element. + +- Default value: 56px + +### $navigation-width +This variable determines the width of the primary navigation menu when expanded. + +- Default value: 300px + +### $container-bgd +This option sets the background of page containers. Changing the value of this variable will change the background color for the following elements: +- Login page +- Primary navigation section +- Quick links section on the overview page + +#### Value +- Default value: $gray-200 + +### $primary-nav-hover +The semantic naming of this variable identifies its purpose. This color should always be slightly darker than the `$container-bgd` value. + +- Default value: $gray-300 + +## Updating Colors +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. + +### Color +The OpenBMC Web UI uses Sass variables and maps to build its layout and components. Bootstrap variables and maps use the `!default` flag to allow for overrides. There are three Sass maps created to establish the color palette. These include the `color` map, `theme-color` map, and `gray` map. These maps are used by Bootstrap to build the application's CSS stylesheets. + +#### All Colors +The OpenBMC Web UI custom colors are available as Sass variables and a Sass map in `/src/assets/styles/bmc/helpers/_variables.scss`. 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. + +The `color` map is not as important as the `theme-color` map. A tight-coupling of the Sass variable name to the color name makes it hard to use the `color` map keys for customization. Using these keys in Sass stylesheets or single-file components is discouraged. + +#### Theme Colors +The theme color variables and the `theme-color` 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 `theme-color` map keys are required to generate the CSS styles. The OpenBMC Web UI `theme-color` map has the same keys as the Bootstrap `theme-color` map with custom values. + +The `theme-color` map is used heavily throughout the application. The Bootstrap-Vue components `variant` prop also utilizes the `theme-color` map. This map is the key to customizing the application's color palette. Take a look at the [color guidelines](/guide/guidelines/colors) to better understand default theme-colors map. + +#### Gray Colors +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, `$gray-100`, `$gray-200`, `$gray-300` through `gray-900`. 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. + +[Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color) + +### Bootstrap Color Functions +- `color(')` +- `theme-color(')` +- `gray(')` + + +#### Example +```SCSS +.some-selector { + color: color("blue"); + background: theme-color("light"); + border: 1px solid gray("900") +} +``` + +[Learn more about using Bootstrap functions](https://getbootstrap.com/docs/4.0/getting-started/theming/#functions) +## Adding a logo +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. diff --git a/docs/themes/index.md b/docs/themes/index.md deleted file mode 100644 index e86c6e5c..00000000 --- a/docs/themes/index.md +++ /dev/null @@ -1 +0,0 @@ -# Themes \ No newline at end of file diff --git a/docs/themes/readme.md b/docs/themes/readme.md new file mode 100644 index 00000000..34f422c4 --- /dev/null +++ b/docs/themes/readme.md @@ -0,0 +1,271 @@ + +# Overview + +The best way to change the overall look and feel of the OpenBMC Web UI is to update the following files in a downstream repository. This section discusses the structure and purpose of the theme files and how to customize the application using Boostrap theming. + +[Read more about Boostrap Theming](https://getbootstrap.com/docs/4.0/getting-started/theming) + + +## SCSS File Structure +``` +. +├─ src + ├─ assets + ├─ styles + ├─ bmc + └─ helpers + ├─ vendor + ├─ bootstrap + └─ bootstrap-vue + ├─ vendor-overrides + └─ bootstrap + ├─ _helpers.scss + └─ _obmc-custom.scss +``` + +## bmc +This folder contains Sass helpers and default styles for customizing the OpenBMC Web UI. + +``` +. +├─ src + ├─ assets + ├─ styles + ├─ bmc + ├─ helpers + ├─ _colors.scss + ├─ _motion.scss + └─ _variables.scss + ├─ _helpers.scss + └─ _base.scss +``` + +### helpers +The helper's folder contains a set of Sass helper files containing Sass variables that establish the custom theme of the application. + +#### _colors.scss +The colors.scss file sets all the SASS variables and color maps for the OpenBMC Web UI. Any color settings needed to meet company brand guidelines will happen in this file. + +##### Sass Color Variables +```scss +$black: #000; +$white: #fff; + +$blue-100: #eff2fb; +$blue-500: #2d60e5; + +$green-100: #ecfdf1; +$green-500: #0a7d06; + +$red-100: #feeeed; +$red-500: #da1416; + +$yellow-100: #fff8e4; +$yellow-500: #efc100; + +$gray-100: #fafafa; +$gray-200: #f4f4f4; +$gray-300: #dcdee0; +$gray-400: #ccc; +$gray-500: #b3b3b3; +$gray-600: #999999; +$gray-700: #666666; +$gray-800: #333333; +$gray-900: #161616; +``` + +##### Custom Color Variables +```scss +// Sass Base Color Variables +$blue: $blue-500; +$green: $green-500; +$red: $red-500; +$yellow: $yellow-500; +``` + +##### Custom Colors Map +```scss +$colors: ( + "blue": $blue, + "green": $green, + "red": $red, + "yellow": $yellow, +); +``` + +##### Custom Theme Color Variables +```scss +// Sass Theme Color Variables +// Can be used as variants +$danger: $red; +$dark: $gray-900; +$info: $blue; +$light: $gray-100; +$primary: $blue; +$secondary: $gray-800; +$success: $green; +$warning: $yellow; + +// Sass Color Variable Accents +// Used for component styles and are +// not available as variants +$danger-light: $red-100; +$info-light: $blue-100; +$warning-light: $yellow-100; +$success-light: $green-100; +``` + +##### Custom Theme Colors Map +```scss +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "dark": $dark, + "light": $light, + "danger": $danger, + "info": $info + "success": $success + "warning": $warning, +); +``` + +##### Color Resources +- [Learn more about Boostrap colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color) +- [Leran more about Bootstrap variables](https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables) +- [View the color palette and hex values in the color guidelines](/guide/guidelines/colors) + +#### _motion.scss +This bezier curves and durations in this file determine the motion styles throughout the application. These guidelines from the Cabon Design System avoid easing curves that are unnatural, distracting, or purely decorative. + +##### Motion Styles +```scss +$duration--fast-01: 70ms; //Micro-interactions such as button and toggle +$duration--fast-02: 110ms; //Micro-interactions such as fade +$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements +$duration--moderate-02: 240ms; //Expansion, system communication, toast +$duration--slow-01: 400ms; //Large expansion, important system notifications +$duration--slow-02: 700ms; //Background dimming + +$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9); +$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1); +$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9); +$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1); +$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9); +$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1); +``` + +##### Example +```scss +.link-skip-nav { + position: absolute; + top: -60px; + left: 0.5rem; + z-index: $zindex-popover; + transition: $duration--moderate-01 $exit-easing--expressive; + &:focus { + top: 0.5rem; + transition-timing-function: $entrance-easing--expressive; + } +} +``` +##### Motion Resources +- [Including Animation In Your Design System](https://www.smashingmagazine.com/2019/02/animation-design-system/) +- [Carbon Design System motion guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/) + +#### _variables.scss +This file contains all the global Sass options. There are Bootstrap option overrides, Bootstrap global variable overrides, and custom BMC global variables. Read more about these in the [theme customization section](/themes/customize). + +## vendor +The `vendor` directory imports all third-party styles needed to support the OpenBMC Web UI. These imports are split into separate directories to import the files based on their dependency order. + +``` +. +├─ src + ├─ assets + ├─ styles + ├─ vendor + ├─ bootstrap + ├─ _base.scss + ├─ _components.scss + ├─ _helpers.scss + └─ _index.scss + └─ bootstrap-vue + └─ _index.scss +``` + +## vendor-override +The `vendor-override` directory imports all third-party style overrides. These are small changes used to reach parity with the OpenBMC Design Workgroup's agreed-upon design. Each of these files uses the same file naming as the Bootstrap Sass files the override. One exception to this rule is the `index` Sass file used to simplify the file import structure of the `obmc-custom` Sass file. +``` +. +├─ src + ├─ assets + ├─ styles + ├─ vendor-overrides + ├─ bootstrap + ├─ _alert.scss + ├─ _badge.scss + ├─ _buttons.scss + ├─ _forms.scss + ├─ _index.scss + ├─ _modal.scss + ├─ _tables.scss + └─ _toasts.scss +``` + +### _helpers.scss +The `_helpers.scss` file is an import file needed when building single-file components that require the use of BMC or Bootstrap Sass variables and functions. This file needs to be imported as part of the ` +``` + +### Scoped style block using CSS +```html + +``` + +### Example - PageSection.vue +```html + +``` + +:::tip +You might notice that there is an HTML element, `

`, used in the example. This is an anti-pattern in global `.scss` files. However, in a single file component that generates the markup it is acceptable. +::: + +[Learn more about single file components](https://vuejs.org/v2/guide/single-file-components.html) + + + -- cgit v1.2.3