Move calculated button and callout colors to variables

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 79a1a3be52409320a7f9c16cc7d56b589212c686..267dddfd3cbb0974831f8ff7fdf281c64652fcad 100755 (executable)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -45,6 +45,11 @@ $button-margin: 0 0 $global-margin 0 !default;
 /// Background color of buttons.
 /// @type Color
 $button-background: $primary-color !default;
+$button-background-hover: color.adjust($button-background, $lightness: -10%, $space: hsl) !default;
+$button-secondary-background-hover: color.adjust($secondary-color, $lightness: +10%, $space: hsl) !default;
+$button-success-background-hover: color.adjust($success-color, $lightness: -10%, $space: hsl) !default;
+$button-alert-background-hover: color.adjust($alert-color, $lightness: -10%, $space: hsl) !default;
+$button-warning-background-hover: color.adjust($warning-color, $lightness: -10%, $space: hsl) !default;
 
 /// Border around buttons.
 /// @type Border
@@ -174,7 +179,7 @@ table.button:visited,
 table.button:active {
   table {
     td {
-      background: color.adjust($button-background, $lightness: -10%, $space: hsl);
+      background: $button-background-hover;
       color: $button-color;
     }
   }
@@ -185,7 +190,7 @@ table.button:visited,
 table.button:active {
   table {
     a {
-      border: 0 solid color.adjust($button-background, $lightness: -10%, $space: hsl);
+      border: 0 solid $button-background-hover;
     }
   }
 }
@@ -208,12 +213,12 @@ table.button.secondary {
 table.button.secondary:hover {
   table {
     td {
-      background: color.adjust($secondary-color, $lightness: +10%, $space: hsl);
+      background: $button-secondary-background-hover;
       color: $button-color;
     }
 
     a {
-      border: 0 solid color.adjust($secondary-color, $lightness: +10%, $space: hsl);
+      border: 0 solid $button-secondary-background-hover;
     }
   }
 }
@@ -258,11 +263,11 @@ table.button.success {
 table.button.success:hover {
   table {
     td {
-      background: color.adjust($success-color, $lightness: -10%, $space: hsl);
+      background: $button-success-background-hover;
     }
 
     a {
-      border: 0 solid color.adjust($success-color, $lightness: -10%, $space: hsl);
+      border: 0 solid $button-success-background-hover;
     }
   }
 }
@@ -283,11 +288,11 @@ table.button.alert {
 table.button.alert:hover {
   table {
     td {
-      background: color.adjust($alert-color, $lightness: -10%, $space: hsl);
+      background: $button-alert-background-hover;
     }
 
     a {
-      border: 0 solid color.adjust($alert-color, $lightness: -10%, $space: hsl);
+      border: 0 solid $button-alert-background-hover;
     }
   }
 }
@@ -308,11 +313,11 @@ table.button.warning {
 table.button.warning:hover {
   table {
     td {
-      background: color.adjust($warning-color, $lightness: -10%, $space: hsl);
+      background: $button-warning-background-hover;
     }
 
     a {
-      border: 0 solid color.adjust($warning-color, $lightness: -10%, $space: hsl);
+      border: 0 solid $button-warning-background-hover;
     }
   }
 }

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index 243622f71ed0aff4c4a7c526ce3b82e97528c46b..69cc0d51f446ab1fd072e2922718332181a73bd1 100644 (file)
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -34,22 +34,27 @@ $callout-border: 1px solid color.adjust($callout-background, $lightness: -20%, $
 /// Border around a callout with the `.primary` class.
 /// @type Border
 $callout-border-primary: 1px solid color.adjust($primary-color, $lightness: -20%, $space: hsl) !default;
+$callout-background-primary: color.scale($primary-color, $lightness: $callout-background-fade) !default;
 
 /// Border around a callout with the `.secondary` class.
 /// @type Border
 $callout-border-secondary: 1px solid color.adjust($secondary-color, $lightness: -20%, $space: hsl) !default;
+$callout-background-secondary: color.scale($secondary-color, $lightness: $callout-background-fade) !default;
 
 /// Border around a callout with the `.success` class.
 /// @type Border
 $callout-border-success: 1px solid color.adjust($success-color, $lightness: -20%, $space: hsl) !default;
+$callout-background-success: color.scale($success-color, $lightness: $callout-background-fade) !default;
 
 /// Border around a callout with the `.warning` class.
 /// @type Border
 $callout-border-warning: 1px solid color.adjust($warning-color, $lightness: -20%, $space: hsl) !default;
+$callout-background-warning: color.scale($warning-color, $lightness: $callout-background-fade) !default;
 
 /// Border around a callout with the `.alert` class.
 /// @type Border
 $callout-border-alert: 1px solid color.adjust($alert-color, $lightness: -20%, $space: hsl) !default;
+$callout-background-alert: color.scale($alert-color, $lightness: $callout-background-fade) !default;
 
 table.callout {
   margin-bottom: $callout-margin-bottom;
@@ -63,31 +68,31 @@ th.callout-inner {
   background: $callout-background;
 
   &.primary {
-    background: color.scale($primary-color, $lightness: $callout-background-fade);
+    background: $callout-background-primary;
     border: $callout-border-primary;
     color: $black;
   }
 
   &.secondary {
-    background: color.scale($secondary-color, $lightness: $callout-background-fade);
+    background: $callout-background-secondary;
     border: $callout-border-secondary;
     color: $black;
   }
 
   &.success {
-    background: color.scale($success-color, $lightness: $callout-background-fade);
+    background: $callout-background-success;
     border: $callout-border-success;
     color: $black;
   }
 
   &.warning {
-    background: color.scale($warning-color, $lightness: $callout-background-fade);
+    background: $callout-background-warning;
     border: $callout-border-warning;
     color: $black;
   }
 
   &.alert {
-    background: color.scale($alert-color, $lightness: $callout-background-fade);
+    background: $callout-background-alert;
     border: $callout-border-alert;
     color: $black;
   }