Update fluid-type and svg-background to use default variables

docs/_includes/documentation/mixins/fluid-type.html

@@ -8,10 +8,10 @@
 
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
-| `min-value` | `string` | - | The minimum font-size |
-| `max-value` | `string` | - | The maximum font-size |
-| `min-screen` | `string` | `$beta` | Breakpoint for fluid-type to kick in |
-| `max-screen` | `string` | `$delta` | Breakpoint for fluid-type to stop |
+| `min-value` | `string` | `$fluid-type-min-value` | The minimum font-size |
+| `max-value` | `string` | `$fluid-type-max-value` | The maximum font-size |
+| `min-screen` | `string` | `$fluid-type-min-screen` | Breakpoint for fluid-type to kick in |
+| `max-screen` | `string` | `$fluid-type-max-screen` | Breakpoint for fluid-type to stop |
 
 #### SCSS
 

docs/_includes/documentation/mixins/svg-background.html

@@ -9,13 +9,13 @@
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | `svg` | `string` | - | Accepts anything that nomally goes inside the `<svg></svg>` element. Although try to only use small single element SVG files for performance. Only use if you can't use a real SVG instead |
-| `color` | `string` | `black` | Color of the SVG. SVGs can only be one color |
-| `width` | `number` | `24` | The width the SVG background should be displayed as |
-| `height` | `number` | `false` | The height the SVG background should be displayed as. Set to false if it's the same as width |
-| `viewboxWidth` | `number` | `24` | The actual viewboxWidth number. See original SVG file for this number |
-| `viewboxHeight` | `number` | `false` | The actual viewboxHeight number. See original SVG file for this number. Set to false if it's the same as width |
-| `background-position` | `string` | `center` | The position of the SVG background |
-| `background-repeat` | `string` | `no-repeat` | Repeat or don't repeat the background |
+| `color` | `string` | `$svg-background-color` | Color of the SVG. SVGs can only be one color |
+| `width` | `number` | `$svg-background-width` | The width the SVG background should be displayed as |
+| `height` | `number` | `$svg-background-height` | The height the SVG background should be displayed as. Set to false if it's the same as width |
+| `viewboxWidth` | `number` | `$svg-background-viewboxWidth` | The actual viewboxWidth number. See original SVG file for this number |
+| `viewboxHeight` | `number` | `$svg-background-viewboxHeight` | The actual viewboxHeight number. See original SVG file for this number. Set to false if it's the same as width |
+| `background-position` | `string` | `$svg-background-position` | SVG background-position |
+| `background-repeat` | `string` | `$svg-background-repeat` | SVG background-repeat |
 
 #### SCSS
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "illusion",
   "description": "Illusion simplifies the creation of things for the web.",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "homepage": "https://illusion.timble.net",
   "author": "The Illusion Authors (https://github.com/timble/illusion/graphs/contributors)",
   "repository": {

scss/tools/_tools.scss

@@ -7,6 +7,7 @@
 @import "variables/form";
 @import "variables/grid";
 @import "variables/spacing";
+@import "variables/svg";
 @import "variables/transition";
 @import "variables/type";
 

scss/tools/mixins/_fluid-type.scss

@@ -1,6 +1,6 @@
 // Fluid type
 
-@mixin fluid-type($min-value, $max-value, $min-screen: $beta, $max-screen: $delta) {
+@mixin fluid-type($min-value: $fluid-type-min-value, $max-value: $fluid-type-max-value, $min-screen: $fluid-type-min-screen, $max-screen: $fluid-type-max-screen) {
   font-size: $min-value;
 
   @media screen and (min-width: $min-screen) {

scss/tools/mixins/_svg-background.scss

@@ -2,7 +2,7 @@
 //
 // @include svg-background('<g transform="matrix(2.18679,0,0,2.18679,5.43964,-0.0421697)"><path d="M5.9 5.3L0.5 0.1C0.4 0 0.2 0 0.1 0.1 0 0.2 0 0.4 0.1 0.5L5.2 5.5 0.1 10.5C0 10.6 0 10.8 0.1 10.9 0.2 11 0.2 11 0.3 11 0.4 11 0.5 11 0.5 10.9L5.9 5.7C6 5.6 6 5.4 5.9 5.3Z"/></g>', black, 16);
 
-@mixin svg-background($svg, $color: black, $width: 24, $height: false, $viewboxWidth: 24, $viewboxHeight: false, $background-position: center, $background-repeat: no-repeat) {
+@mixin svg-background($svg, $color: $svg-background-color, $width: $svg-background-width, $height: $svg-background-height, $viewboxWidth: $svg-background-viewboxWidth, $viewboxHeight: $svg-background-viewboxHeight, $background-position: $svg-background-position, $background-repeat: $svg-background-repeat) {
   @if $height == false {
     $height: $width;
   }

scss/tools/variables/_svg.scss

@@ -0,0 +1,9 @@
+// SVG background
+
+$svg-background-color:          black !default;
+$svg-background-width:          24 !default;
+$svg-background-height:         false !default;
+$svg-background-viewboxWidth:   24 !default;
+$svg-background-viewboxHeight:  false !default;
+$svg-background-position:       center !default;
+$svg-background-repeat:         no-repeat !default;

scss/tools/variables/_type.scss

@@ -1,12 +1,20 @@
 // Font-family settings
 
-$font-family:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
-$font-size:             16px !default;
-$line-height:           24px !default;
+$font-family:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
+$font-size:               16px !default;
+$line-height:             24px !default;
 
 
 // Font-weight settings
 
-$weight-light:          300 !default;
-$weight-normal:         400 !default;
-$weight-bold:           700 !default;
+$weight-light:            300 !default;
+$weight-normal:           400 !default;
+$weight-bold:             700 !default;
+
+
+// Fluid type settings
+
+$fluid-type-min-value:    $font-size !default;
+$fluid-type-max-value:    20px !default;
+$fluid-type-min-screen:   $beta !default;
+$fluid-type-max-screen:   $delta !default;