Add .primary class to callouts and update exmaples in docs to show them full-width

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index cf5c33b6e65f5649323bbd5e7896a03125cf60e1..90ca748ea49b255a66479d1f1ccde41a70fa8da9 100644 (file)
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -15,7 +15,7 @@ When using [Inky](inky.html) HTML, the `<callout>` tag will create this structur
 
 ```inky
 <callout>
-  <p>Beware of the Kraken!</p>
+  <p>Beware of the Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
 </callout>
 ```
 
@@ -26,15 +26,19 @@ When using [Inky](inky.html) HTML, the `<callout>` tag will create this structur
 The color of a callout can be changed by adding the class `.success`, `.warning`, or `.alert` to the element.
 
 ```inky
+<callout class="primary">
+  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+</callout>
+
 <callout class="success">
-  <p>Successfully avoided Kraken.</p>
+  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 </callout>
 
 <callout class="warning">
-  <p>There may be Krakens around.</p>
+  <p>There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 </callout>
 
 <callout class="alert">
-  <p>Incoming Kraken!</p>
+  <p>Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 </callout>
 ```

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index 3b4b063d60a6ed5a48900a14be415b4e4adade03..cb7292f01e752e7a97f1d8783b91b23fdc8f16f4 100644 (file)
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -10,6 +10,10 @@
 /// @type Color
 $callout-background: $white !default;
 
+/// Fade value for callout backgrounds.
+/// @type Number
+$callout-background-fade: 85% !default;
+
 /// Padding inside a callout.
 /// @type Length
 $callout-padding: 10px !default;
@@ -32,7 +36,7 @@ $callout-border-warning: 1px solid darken($warning-color, 20%) !default;
 
 /// Border around a callout with the `.alert` class.
 /// @type Border
-$callout-border-alert: 1px solid darken darken($alert-color, 20%) !default;
+$callout-border-alert: 1px solid darken($alert-color, 20%) !default;
 
 td.callout {
   width: 100%;
@@ -40,26 +44,32 @@ td.callout {
   padding: $callout-padding !important;
   background: $callout-background;
 
+  &.primary {
+    background: scale-color($primary-color, $lightness: $callout-background-fade) !important;
+    border: $callout-border-secondary !important;
+    color: $black !important;
+  }
+
   &.secondary {
-    background: $secondary-color !important;
+    background: scale-color($secondary-color, $lightness: $callout-background-fade) !important;
     border: $callout-border-secondary !important;
     color: $black !important;
   }
 
   &.success {
-    background: $success-color !important;
+    background: scale-color($success-color, $lightness: $callout-background-fade) !important;
     border: $callout-border-success !important;
     color: $white !important;
   }
 
   &.warning {
-    background: $warning-color !important;
+    background: scale-color($warning-color, $lightness: $callout-background-fade) !important;
     border: $callout-border-warning !important;
     color: $white !important;
   }
 
   &.alert {
-    background: $alert-color !important;
+    background: scale-color($alert-color, $lightness: $callout-background-fade) !important;
     border: $callout-border-alert !important;
     color: $white !important;
   }

diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss
index 466e67b9fb95c692cb79a30956992356c50ac816..c5acc4efac3e73189d3e14e9c95349263a012b70 100644 (file)
--- a/testing/src/assets/scss/_settings.scss
+++ b/testing/src/assets/scss/_settings.scss
@@ -109,12 +109,13 @@ $button-border: 2px solid $button-background;
 // ----------
 
 $callout-background: $white;
+$callout-background-fade: 85%;
 $callout-padding: 10px;
 $callout-border: 1px solid darken($callout-background, 20%);
 $callout-border-secondary: 1px solid darken($secondary-color, 20%);
 $callout-border-success: 1px solid darken($success-color, 20%);
 $callout-border-warning: 1px solid darken($warning-color, 20%);
-$callout-border-alert: 1px solid darken darken($alert-color, 20%);
+$callout-border-alert: 1px solid darken($alert-color, 20%);
 
 // 8. Inline List
 // --------------