Create variable for callout panel background

diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index 5bd39da7b869becab8980d84df7bce46db2f1e97..a6bde597632ed22b0556278850044e5bf33b46a9 100644 (file)
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -807,6 +807,7 @@
 // $panel-bg: scale-color(#fff, $lightness: -5%);
 // $panel-border-style: solid;
 // $panel-border-size: 1px;
+// $callout-panel-bg: scale-color($primary-color, $lightness: 94%);
 
 // We use this % to control how much we darken things on hover
 // $panel-function-factor: -11%;

diff --git a/scss/foundation/components/_panels.scss b/scss/foundation/components/_panels.scss
index 3ec426b92beecd82facd7143a9d59abd1dd1dc9d..6003cd5c52fcd372b0a66ea4de1afa98457ce133 100644 (file)
--- a/scss/foundation/components/_panels.scss
+++ b/scss/foundation/components/_panels.scss
@@ -13,6 +13,7 @@ $include-html-panel-classes: $include-html-classes !default;
 $panel-bg: scale-color(#fff, $lightness: -5%) !default;
 $panel-border-style: solid !default;
 $panel-border-size: 1px !default;
+$callout-panel-bg: scale-color($primary-color, $lightness: 94%) !default;
 
 // We use this % to control how much we darken things on hover
 $panel-function-factor: -11% !default;
@@ -74,7 +75,7 @@ $callout-panel-link-color: $primary-color !default;
     .panel { @include panel;
 
       &.callout {
-        @include panel(scale-color($primary-color, $lightness: 94%));
+        @include panel($callout-panel-bg);
         a:not(.button) {
           color: $callout-panel-link-color;
         }