With the New UI Declutter/Refresh there's been a few changes to WaaS branding Sass variables.
The table below will help you better understand what's New, what has been updated (Renamed), and what has been removed (Note: removed variables will have been updated to use one of the other vars instead).
| Web portal | SCSS | Note |
| Main branding color Underpins various components | $brand-primary: #282828; | DO NOT set this to be white (#fff) |
| $brand-primary-text: #fff; | RENAMED from $btn-primary-color | |
| Background and text of Close/Cancel/Upload buttons | $brand-secondary: #6c757d; | RENAMED from $btn-secondary-bg |
| $brand-secondary-text: #fff; | RENAMED from $btn-secondary-color | |
| $btn-secondary-border: #ced4da; | REMOVED | |
| Background for left menu logo and login page | $brand-logo: $brand-primary; | Replace $brand-primary to match your logo's background if different. |
| $brand-logo-text: #241001; | Used for text displayed on top of logo background (e.g. login page). | |
| Card header text and background | $header-bg: darken($brand-primary, 10%); | NEW |
| $header-text: #fff; | NEW | |
| Secondary card header text and background | $header-secondary-bg: darken($brand-secondary, 5%); | NEW |
| $header-secondary-text: #fff; | NEW | |
| Default color of all field labels Lighter and darker shades are derived from this for associated info texts. | $label-text: #6c757d; | NEW |
| $label-weight: 300; | NEW | |
| Save/Go button background and text | $brand-success: #41a341; | DO NOT set this to be white (#fff) |
| $brand-success-text: #fff; | RENAMED from $btn-success-color | |
| Information notices and dialog box top background | $brand-info: #4141a3; | DO NOT set this to be white (#fff) |
| $brand-info-text: #fff; | RENAMED from $btn-info-color | |
| Warning text | $brand-warning: #e31837; | DO NOT set this to be white (#fff) |
| $brand-warning-text: #fff; | RENAMED from $btn-warning-color | |
| Error text and delete button background | $brand-danger: #f44336; | DO NOT set this to be white (#fff) |
| $brand-danger-text: #fff; | RENAMED from $btn-danger-color | |
| General-purpose colors used for buttons and backgrounds | $brand-purple: #4141a3; | RENAMED from $purple |
| $brand-purple-text: #fff; | RENAMED from $btn-purple-color | |
| $brand-maroon: #b40000; | RENAMED from $maroon | |
| $brand-maroon-text: #fff; | RENAMED from $btn-maroon-color | |
| $brand-navy: #f48120; | RENAMED from $navy | |
| $brand-navy-text: #fff; | RENAMED from $btn-navy-color | |
| Baseline color for all grays Lighter and darker shades are derived from this | $gray-base: #000; | |
| Main background for page body | $body-bg: #f5f5f5; | |
| Main link color | $link-color: #41a341; | DO NOT set this to white (#fff) |
| Site-wide font style | $font-family-sans-serif: Roboto, sans-serif; | |
$font-family-monospace: "Consolas", monospace; | ||
| Background and text color for top navigation area of page | $navbar-default-bg: #898989; | |
| $navbar-default-color: #fff; | ||
| Link and hover color for top navigation area of page | $navbar-default-link-color: #fff; | |
| $navbar-default-link-hover-color: #eb3a04; | ||
| Background and text colors on left-hand navigation bar | $navbar-inverse-bg: #282828; | |
| $navbar-inverse-color: #b8c7ce; | ||
| $navbar-inverse-link-hover-color: #fff; | ||
| Primary and secondary colors for left-hand navigation icons Normal and when highlighted | $navbar-icon-primary: #eee; | |
| $navbar-icon-secondary: #ababab; | ||
| $navbar-icon-highlight-primary: #eb3104; | ||
| $navbar-icon-highlight-secondary: $brand-primary-text; | ||
| Designers general-purpose background color | $designer-title-bg: #41a341; | |
$designer-title-color: #fff; |