Contextual module marks added

Fully functional, pretty much the same as the old ones, except for some color changes.

dist/mini-default.css

@@ -1270,3 +1270,44 @@ footer.sticky {
     display: none;
   }
 }
+
+/*
+  Definitions for contextual background elements, toasts and tooltips.
+*/
+/* Contextual module CSS variable definitions */
+:root {
+  --mark-back-color: #0277bd;
+  --mark-fore-color: #fafafa;
+}
+
+mark {
+  background: var(--mark-back-color);
+  color: var(--mark-fore-color);
+  font-size: 0.95em;
+  line-height: 1em;
+  border-radius: var(--universal-border-radius);
+  padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
+}
+
+mark.inline-block {
+  display: inline-block;
+  font-size: 1em;
+  line-height: 1.5;
+  padding: calc(var(--universal-padding) / 2) var(--universal-padding);
+}
+
+/*
+  Custom elements for contextual background elements, toasts and tooltips.
+*/
+mark.secondary {
+  --mark-back-color: #d32f2f;
+}
+
+mark.tertiary {
+  --mark-back-color: #308732;
+}
+
+mark.tag {
+  padding: calc(var(--universal-padding)/2) var(--universal-padding);
+  border-radius: 1em;
+}

docs/v3/DEVLOG.md

@@ -200,3 +200,13 @@
 - Recompiled default flavor just in case.
 - Fixed the devlog showing wrong dates. **Hugging cat** was at it again, it seems!
 - Unleashed the first **Gluon** alpha unto the world!
+
+## 20171204
+
+- Started working on `contextual` module.
+- Removed the `margin` property from `mark` elements, it seemed particularly irrelevant, provided they are usually inlined inside text. This can be added manually now, but I don't think nobody will have a use for it.
+- Removed `border` styling from `mark` elements, it also seemed reasonably irrelevant. Easy to add, generic borders will help here, when I add them back in `utility`.
+- Slightly altered `inline-block` version of `mark` to match the styling of the rest of the elements.
+- Worked on `contextual_mixins` to get the `mark` variants ready. Slightly altered the mixins from the old version.
+- Used mixins to add `secondary`, `tertiary` and `tag` `mark` variants.
+- Fed **hugging cat**.

src/flavors/mini-default.scss

@@ -86,3 +86,20 @@ $button-large-margin:  var(#{$universal-margin-var});
 @include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
 
 @import '../mini/navigation';
+@import '../mini/contextual';
+
+/*
+  Custom elements for contextual background elements, toasts and tooltips.
+*/
+$mark-secondary-name:            'secondary'; // Class name for secondary <mark> color variant.
+$mark-secondary-back-color:      #d32f2f;     // Background color for secondary <mark> color variant.
+@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
+
+$mark-tertiary-name:            'tertiary';  // Class name for tertiary <mark> color variant.
+$mark-tertiary-back-color:      #308732;     // Background color for tertiary <mark> color variant.
+@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
+
+$mark-tag-name:                 'tag';       // Class name, padding and border radius for tag <mark> size variant.
+$mark-tag-padding:      calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
+$mark-tag-border-radius:        1em;
+@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);

src/flavors/mini-doc.scss

@@ -79,6 +79,25 @@ $button-large-margin:  var(#{$universal-margin-var});
 @include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
 
 @import '../mini/navigation';
+@import '../mini/contextual';
+
+/*
+  Custom elements for contextual background elements, toasts and tooltips.
+*/
+$mark-secondary-name:            'secondary'; // Class name for secondary <mark> color variant.
+$mark-secondary-back-color:      #d32f2f;     // Background color for secondary <mark> color variant.
+@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
+
+$mark-tertiary-name:            'tertiary';  // Class name for tertiary <mark> color variant.
+$mark-tertiary-back-color:      #308732;     // Background color for tertiary <mark> color variant.
+@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
+
+$mark-tag-name:                 'tag';       // Class name, padding and border radius for tag <mark> size variant.
+$mark-tag-padding:      calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
+$mark-tag-border-radius:        1em;
+@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
+
+// Custom elements for his flavor.
 
 :not(.doc) {
   font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;

src/mini/_contextual.scss

@@ -0,0 +1,59 @@
+/*
+  Definitions for contextual background elements, toasts and tooltips.
+*/
+$mark-back-color:        #0277bd !default;       // Background color for <mark>
+$mark-fore-color:        #fafafa !default;       // Text color for <mark>
+$mark-font-size:         0.95em;                 // Font size for <mark>
+$mark-line-height:       1em;                    // Line height for <mark>
+$mark-inline-block-name: 'inline-block';         // Class name for inline-block <mark>
+// CSS variable name definitions [exercise caution if modifying these]
+$mark-back-color-var:         '--mark-back-color' !default;
+$mark-fore-color-var:         '--mark-fore-color' !default;
+// == Uncomment below code if this module is used on its own ==
+//
+// $base-line-height:        1.5 !default;         // Line height for most elements
+// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
+// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
+// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
+// $universal-margin-var:          '--universal-margin' !default;
+// $universal-padding-var:         '--universal-padding' !default;
+// $universal-border-radius-var:   '--universal-border-radius' !default;
+// $universal-box-shadow-var:      '--universal-box-shadow' !default;
+// :root {
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
+// }
+//
+// ============================================================
+// Check the `_contextual_mixins.scss` file to find this module's mixins.
+@import '_contextual_mixins';
+/* Contextual module CSS variable definitions */
+:root {
+  #{$mark-back-color-var}: $mark-back-color;
+  #{$mark-fore-color-var}: $mark-fore-color;
+}
+// Default styling for mark. Use mixins for alternate styles.
+mark {
+  background: var(#{$mark-back-color-var});
+  color: var(#{$mark-fore-color-var});
+  font-size: $mark-font-size;
+  line-height: $mark-line-height;
+  border-radius: var(#{$universal-border-radius-var});
+  padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  &.#{$mark-inline-block-name} {
+    display: inline-block;
+    // This is hardcoded, as we want inline-block <mark> elements to be styled as normal pieces of text, instead of look small and weird.
+    font-size: 1em;
+    // Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons.
+    line-height: $base-line-height;
+    padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
+  }
+}

src/mini/_contextual_mixins.scss

@@ -0,0 +1,27 @@
+// Contextual module's mixin definitions are here. For the module itself
+// check `_contextual.scss`.
+// Mark color variant mixin:
+//  $mark-alt-name: The name of the class used for the <mark> variant.
+//  $mark-alt-back-color: Background color for <mark> variant.
+//  $mark-alt-fore-color: Text color for <mark> variant.
+@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color,
+  $mark-alt-fore-color : $mark-fore-color) {
+  mark.#{$mark-alt-name} {
+    @if $mark-alt-back-color != $mark-back-color {
+      #{$mark-back-color-var}: $mark-alt-back-color;
+    }
+    @if $mark-alt-fore-color != $mark-fore-color{
+      #{$mark-fore-color-var}: $mark-alt-fore-color;
+    }
+  }
+}
+// Mark size variant mixin:
+//  $mark-alt-name: The name of the class used for the <mark> variant.
+//  $mark-alt-padding: The padding of the <mark> variant.
+//  $mark-alt-border-radius: The border radius of the <mark> variant.
+@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) {
+  mark.#{$mark-alt-name} {
+    padding: $mark-alt-padding;
+    border-radius: $mark-alt-border-radius;
+  }
+}