feat(tooltip): add in SCSS support for specifying tooltip variant background color level (bootstrap-vue#3653)

* chore: add in support for specifying tooltip variant background color level

* Update _tooltip.scss

* Update _variables.scss

* Update README.md

* Update README.md

* Update README.md

* Update _popover.scss

* Update README.md

Author: tmorehouse

docs/markdown/reference/color-variants/README.md

@@ -80,6 +80,24 @@ These variants translate to class names `table-<variant>`.
 
 When the table has the `dark` prop set, the variants translate to the `bg-<variant>` classes.
 
+### Popover variants
+
+All the **base variants**
+
+These translate to BootstrapVue custom class names `b-popover-<variant>`.
+
+### Tooltip variants
+
+All the **base variants**
+
+These translate to BootstrapVue custom class names `b-tooltip-<variant>`.
+
+### Toast variants
+
+All the **base variants**
+
+These translate to BootstrapVue custom class names `b-toast-<variant>`.
+
 ## Using variant classes
 
 You may also use the underlying class names directly on elements (and some components) via the
@@ -90,3 +108,62 @@ standard HTML `class="..."` attribute.
 When creating custom variants, follow the Bootstrap v4 variant CSS class naming scheme and they will
 become available to the various components that use that scheme (i.e. create a custom CSS class
 `btn-purple` and `purple` becomes a valid variant to use on `<b-button>`).
+
+Alternatively, you can create new variant theme colors by supplying custom Bootstrap SCSS them color
+maps. The default theme color map is (from `bootstrap/scss/_variables.scss`):
+
+```scss
+// Base grayscale colors definitions
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+// Base colors definitions
+$blue: #007bff !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #28a745 !default;
+$teal: #20c997 !default;
+$cyan: #17a2b8 !default;
+
+// Theme color default definitions
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-800 !default;
+
+// This table defines the theme colors (variant names)
+$theme-colors: () !default;
+$theme-colors: map-merge(
+  (
+    'primary': $primary,
+    'secondary': $secondary,
+    'success': $success,
+    'info': $info,
+    'warning': $warning,
+    'danger': $danger,
+    'light': $light,
+    'dark': $dark
+  ),
+  $theme-colors
+);
+```
+
+Refer to the [Theming section](/docs/reference/theming) for details on customizing Bootstrap and
+BootstrapVue styles.

src/_variables.scss

@@ -22,11 +22,16 @@ $b-toast-bg-level: $alert-bg-level !default;
 $b-toast-border-level: $alert-border-level !default;
 $b-toast-color-level: $alert-color-level !default;
 
-// --- Tooltip variants ---
+// --- Enable tooltip variants ---
 $bv-enable-tooltip-variants: true !default;
 
-// --- Popover variant levels wrt theme color value ---
+// --- Tooltip background variant level wrt theme color value ---
+$bv-tooltip-bg-level: 0 !default;
+
+// --- Enable popover variants ---
 $bv-enable-popover-variants: true !default;
+
+// --- Popover variant levels wrt theme color value ---
 $bv-popover-bg-level: $alert-bg-level !default;
 $bv-popover-border-level: $alert-border-level !default;
 $bv-popover-color-level: $alert-color-level !default;

src/components/popover/_popover.scss

@@ -8,7 +8,7 @@
       $po-header-color: color-yiq($po-header-bg);
       $po-arrow-color: $po-bg-color;
       $po-arrow-color-bottom: $po-header-bg;
-      $po-arrow-outer-color: fade-in($po-border-color, .05);
+      $po-arrow-outer-color: fade-in($po-border-color, 0.05);
 
       &.popover {
         background-color: $po-bg-color;

src/components/tooltip/_tooltip.scss

@@ -2,29 +2,30 @@
 @if $bv-enable-tooltip-variants {
   @each $color, $value in $theme-colors {
     .tooltip.b-tooltip-#{$color} {
-      $tip-text-color: color-yiq($value);
+      $tip-bg-color: theme-color-level($color, $bv-tooltip-bg-level);
+      $tip-text-color: color-yiq($tip-bg-color);
 
       &.bs-tooltip-top {
         .arrow::before {
-          border-top-color: $value;
+          border-top-color: $tip-bg-color;
         }
       }
 
       &.bs-tooltip-right {
         .arrow::before {
-          border-right-color: $value;
+          border-right-color: $tip-bg-color;
         }
       }
 
       &.bs-tooltip-bottom {
         .arrow::before {
-          border-bottom-color: $value;
+          border-bottom-color: $tip-bg-color;
         }
       }
 
       &.bs-tooltip-left {
         .arrow::before {
-          border-left-color: $value;
+          border-left-color: $tip-bg-color;
         }
       }
 
@@ -44,8 +45,8 @@
       }
 
       .tooltip-inner {
-        color: color-yiq($value);
-        background-color: $value;
+        color: $tip-text-color;
+        background-color: $tip-bg-color;
       }
     }
   }