Button module mixin for color variants

docs/v2/DEVLOG.md

@@ -191,4 +191,5 @@
 - Due to implicit labeling (e.g. `<label>Name:<input></label>`) not being correctly handled by some assistive technologies, explicit labels will be used for the `file` `<input>` elements. 
 - Added `$hide-file-inputs` flag to decide the styling of `file` `<input>` elements.
 - Softcoded changes and optimized some things in the `button` module.
-- Updated demo page.
+- Updated demo page.
+- Added and optimized `make-button-alt-color` mixin, created primary color variant.

docs/v2/index.html

@@ -262,7 +262,14 @@
             <input type="reset" value="Reset button">
             <button disabled>Disabled button</button><br>
             <p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code>&lt;input type=&quot;file&quot;&gt;</code> element of your choice and you're good to go. For example:</p>
-            <span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button">Upload file</label>
+            <span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button">Upload file</label><br>
+            <p>There are also different kinds of buttons, specifically <code>primary</code>, <code>secondary</code> and <code>tertiary</code>, as well as <code>small</code> and <code>large</code> buttons. All of these types can be specified as classes. For example:</p>
+            <span style="margin:3px;"></span>
+            <button class="primary">Primary normal button</button>
+            <input type="button" value="Secondary input button" class="secondary">
+            <input type="reset" value="Tertiary reset button" class="tertiary">
+            <input type="submit" value="Large submit button" class="large">
+            <button disabled class="small primary">Small primary disabled button</button><br>
           </div>
         </div>
       </div>

flavors/v2/mini-default.css

@@ -682,6 +682,16 @@ menu {
 summary {
   display: list-item; }
 
+button.primary, [type="button"].primary, [type="submit"].primary,
+[type="reset"].primary, .button.primary {
+  background: #1565c0;
+  color: #fafafa; }
+  button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
+  [type="reset"].primary:hover,
+  [type="reset"].primary:active,
+  [type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
+    background: rgba(21, 101, 192, 0.85); }
+
 mark.secondary {
   background: #f44336; }
 

flavors/v2/mini-default.scss

@@ -145,7 +145,7 @@ $table-mobile-label-font-weight:$bold-font-weight;								// Font weight for mob
 $button-back-color:				#cfd8dc;										// Back color for button elements
 $button-back-opacity:			0.75;											// Background opacity for button elements
 $button-hover-back-opacity:		1;												// Background opacity for button elements
-																				// while hovering over them
+																				// on hover or focus
 $button-fore-color:				#212121;										// Text color for button elements
 $button-border-style:			0;												// Border style for button elements
 $button-border-radius:			2px;											// Border radius for button elements
@@ -156,7 +156,12 @@ $button-class-name:				'button';										// Class for custom button elements
 $hide-file-inputs:				true;											// Should a style be added that makes all
 																				// <input>s of type `file` hidden?
 																				// (`true`/`false`) [1]
-
+$button-variant1-name:			'primary';										// Class name for button variant 1
+$button-variant1-back-color:	#1565c0;										// Background color for button variant 1
+$button-variant1-back-opacity:	1;												// Background opacity for button variant 1
+$button-variant1-hover-back-opacity:											// Background opacity for button variant 1
+								0.85;											// on hover or focus
+$button-variant1-fore-color:	$back-color;									// Text color for button variant 1
 // 	Notes:
 // [1] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
 // 	to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
@@ -201,6 +206,9 @@ $progress-style1-border-style:	0;												// Border style for <progress> styl
 $progress-style1-border-radius:	0;												// Border radius for <progress> style 1
 //	Enable base
 @import '../../scss/v2/core';
+//	Use mixins for button elements
+@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color, 
+	$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
 //	Use mixins for contextual background elements
 @include make-mark-alt-color($mark-variant1-name, $mark-variant1-back-color);
 @include make-mark-alt-color($mark-variant2-name, $mark-variant2-back-color);

scss/v2/mini-core/_button.scss

@@ -15,7 +15,6 @@ button {
 	text-transform: none;	// Remove inheritance of text-transform in Edge, Firefox, and IE.
 }
 // Default styling
-// TODO: Add '.button' class for other elements and 'a.button' rule on its own to make some custom link styles.
 button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name}{
 	display: inline-block;
 	background: rgba($button-back-color, $button-back-opacity);
@@ -51,4 +50,28 @@ input[type="file"] {
   -webkit-appearance: button; 	// Correct inability to style in iOS and Safari.
   font: inherit; 				// Change font propery to `inherit` in Safari.
 }
+}
+// Mixin for alternate buttons (button color variants).
+// Variables:
+// - $button-alt-name : The name of the class used for the alternate button.
+// - $button-alt-back-color : The background color of the alternate button.
+// - $button-alt-back-opacity : Opacity of the background color of the alternate button.
+// - $button-alt-hover-back-opacity : Opacity of the background color of the alternate button on hover.
+// - $button-alt-fore-color : (Optional) The text color of the alternate button. Defaults to the text color of the button.
+// Notes:
+// Due to something like `.button.secondary` being a higher specificity than `a.button` or `a`, no extra rules are
+// required for such elements. However rules for the normal button elements are applied in order to not require the
+// base class for the button styles.
+@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
+	$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
+button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, 
+[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
+	background: rgba($button-alt-back-color, $button-alt-back-opacity);
+@if $button-alt-fore-color != $button-fore-color {
+	color: $button-alt-fore-color;
+}
+	&:hover, &:active, &:focus{
+		background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
+	}
+}
 }