typey 1.0.0.alpha.5 → 1.0.0.beta.1

data/stylesheets/typey/_helpers.scss

@@ -6,15 +6,15 @@
 // @return number
 //   The number with the base unit
 @function output-unit($number) {
+  @if $base-unit == rem {
+    @return $number * 1rem;
+  }
   @if $base-unit == px {
     @return $number * 1px;
   }
   @if $base-unit == pt {
     @return $number * 1pt;
   }
-  @if $base-unit == rem {
-    @return $number * 1rem;
-  }
   @if $base-unit == em {
     @return $number * 1em;
   }
@@ -39,7 +39,7 @@
 // @param number $number
 //   The number (with unit) to convert. Allowed units: px, pt
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 //
@@ -49,22 +49,25 @@
   @if type-of($number) == 'number' and not unitless($number) {
     $unit: unit($number);
     @if $unit == px or $unit == pt {
-      @if $base-unit == px or $base-unit == pt {
-        @return output-unit(strip-unit($number));
-      }
       @if $base-unit == rem {
-        @if $unit == unit($base-font-size) { 
+        @if $unit == unit($base-font-size) {
           @return output-unit(($number / $base-font-size));
         }
+        @else {
+          @error "convert-unit() only accepts values with the same unit as $base-font-size.";
+        }
       }
-      @if $base-unit == em {        
+      @if $base-unit == px or $base-unit == pt {
+        @return output-unit(strip-unit($number));
+      }
+      @if $base-unit == em {
         @if type-of($context) == 'string' {
           @if map-has-key($font-size, $context) {
             $context-map-size: map-get($font-size, $context);
             @return output-unit(($number / $context-map-size));
           }
           @else {
-            @warn "'#{$context}' not found in $font-size map.";
+            @error "'#{$context}' not found in $font-size map.";
           }
         }
         @if type-of($context) == 'number' {
@@ -72,10 +75,105 @@
             @return output-unit(($number / $context));
           }
           @else {
-            @warn "The unit used for $context does not match the $base-font-size unit.";
+            @error "The unit used for $context does not match the $base-font-size unit.";
           }
         }
       }
     }
+    @else {
+      @error "convert-unit() only accepts values in px or pt.";
+    }
+  }
+}
+
+// Take a line-height multipler and output converted value.
+//
+// @param number $number
+//   Multiple of line height to be used
+// @param number|string $context
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
+//   font-size if it differs from $base-font-size. Specified as a t-shirt size or
+//   value in the same unit as the $font-size map.
+//
+// @return number
+//   The value of the line-height multiple converted to the base unit.
+@function output-from-multiplier($x, $context: $base-font-size) {
+  @if $base-unit == rem {
+    @return output-unit(($x * $base-line-height) / $base-font-size);
+  }
+  @if $base-unit == px or $base-unit == pt {
+    @return output-unit(strip-unit($x * $base-line-height));
+  }
+  @if $base-unit == em {
+    @if type-of($context) == 'number' {
+      @if unit($context) == unit($base-font-size) {
+        @return output-unit(($x * $base-line-height) / $context);
+      }
+      @else {
+        @error "The unit used for $context does not match the $base-font-size unit.";
+      }
+    }
+    @if type-of($context) == 'string' {
+      @if map-has-key($font-size, $context) {
+        $context-map-size: map-get($font-size, $context);
+        @return output-unit(($x * $base-line-height) / $context-map-size);
+      }
+      @else {
+        @error "'#{$context}' not found in $font-size map.";
+      }
+    }
+    @else {
+      @error "$context must be a px/pt value or a key from the $font-size map.";
+    }
+  }
+}
+
+
+// Takes a sizing from the $font-size map (m, xl, xxl, etc) and convert it to
+// the base unit.
+//
+// @param string $size
+//   A size from the $font-size map.
+// @param number|string $context
+//   (optional) Only used if em is the $base-unit. The value of the parent
+//   font-size if it differs from $base-font-size. Specified as a t-shirt size or
+//   value in the same unit as the $font-size map.
+//
+// @return number
+//   The selected font-size in $base-unit.
+@function output-from-font-size-map($size, $context: $base-font-size) {
+  @if map-has-key($font-size, $size) {
+    $map-size: map-get($font-size, $size);
+    @if $base-unit == rem {
+      @return output-unit(($map-size / $base-font-size));
+    }
+    @if $base-unit == px or $base-unit == pt {
+      @return output-unit(strip-unit($map-size));
+    }
+    @if $base-unit == em {
+      @if type-of($context) == 'string' {
+        @if map-has-key($font-size, $context) {
+          $context-map-size: map-get($font-size, $context);
+          @return output-unit(($map-size / $context-map-size));
+        }
+        @else {
+          @error "'#{$context}' not found in $font-size map.";
+        }
+      }
+      @if type-of($context) == 'number' {
+        @if unit($context) == unit($base-font-size) {
+          @return output-unit(($map-size / $context));
+        }
+        @else {
+          @error "The unit used for $context does not match the $base-font-size unit.";
+        }
+      }
+      @else {
+        @error "$context must be a px/pt value or a key from the $font-size map.";
+      }
+    }
+  }
+  @else {
+    @error "'#{$size}' not found in $font-size map.";
   }
 }

data/stylesheets/typey/_line-height.scss

@@ -1,4 +1,4 @@
-// Generate a value to be used as line-height from either: 
+// Generate a value to be used as line-height from either:
 //   a) a multiple of $base-line-height
 //   b) a static px or pt value
 //
@@ -10,66 +10,49 @@
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 //
 // @return number
-//   The caculated height in $base-unit.
+//   The calculated height in $base-unit.
 @function line-height($x, $context: $base-font-size) {
   @if type-of($x) == 'number' and unitless($x) {
-    @if $base-unit == px or $base-unit == pt {
-      @return output-unit(strip-unit($x * $base-line-height));
-    }
-    @if $base-unit == rem {
-      @return output-unit(($x * $base-line-height) / $base-font-size);
-    }
-    @if $base-unit == em {
-      @if map-has-key($font-size, $context) {
-        $context-map-size: map-get($font-size, $context);
-        @return output-unit(($x * $base-line-height) / $context-map-size);
-      }
-      @else {
-        @warn "'#{$context}' not found in $font-size map.";
-      }
-      @if type-of($context) == 'number' {
-        @if unit($context) == unit($base-font-size) {
-        @return output-unit(($x * $base-line-height) / $context);
-        }
-        @else {
-          @warn "The unit used for $context does not match the $base-font-size unit.";
-        }
-      }
-    }
+    @return output-from-multiplier($x, $context);
   }
   @if type-of($x) == 'number' and not unitless($x) {
     @if unit($x) == unit($base-font-size) {
       @return convert-unit($x, $context);
     }
     @else {
-      @warn "line-height() accepts only numbers or values with the same unit as $base-font-size.";
+      @error "line-height() only accepts values with the same unit as $base-font-size.";
     }
   }
+  @else {
+    @error "line-height() only accepts unitless numbers or values in px or pt.";
+  }
 }
 
-// Define line-height (with fallback). 
+// Define line-height (with fallback).
 // This is only necessary to use if you want to provide fallbacks when you are
 // using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin line-height($x, $context: $base-font-size) {
   @if $base-unit == rem {
-    @if type-of($x) == 'number' and unitless($x) {
-      line-height: $x * $base-line-height;
-    }
-    @if type-of($x) == 'number' and not unitless($x) {  
-      line-height: $x;
+    @if $rem-fallback == true {
+      @if type-of($x) == 'number' and unitless($x) {
+        line-height: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        line-height: $x;
+      }
     }
   }
   line-height: line-height($x, $context);
-}
+}

data/stylesheets/typey/_margin.scss

@@ -1,4 +1,4 @@
-// Generate a value to be used as margin from either: 
+// Generate a value to be used as margin from either:
 //   a) a multiple of $base-line-height
 //   b) a static px or pt value
 //
@@ -10,12 +10,12 @@
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 //
 // @return number
-//   The caculated height in $base-unit.
+//   The calculated height in $base-unit.
 @function margin($x, $context: $base-font-size) {
   @return line-height($x, $context);
 }
@@ -26,10 +26,10 @@
 //
 // @param number|list $x
 //   Multiple of line height to be used or px/pt value to be converted.
-//   Uses the same parameters as the CSS margin property: 
+//   Uses the same parameters as the CSS margin property:
 //   i.e. top right bottom left, 1 0 2 0.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin margin($list, $context: $base-font-size) {
@@ -41,102 +41,112 @@
         $margin: $x * $base-line-height;
         $px-list: join($px-list, $margin, $separator: space);
       }
-      @if type-of($x) == 'number' and not unitless($x) {  
+      @if type-of($x) == 'number' and not unitless($x) {
         $px-list: join($px-list, $x, $separator: space);
-      }    
+      }
     }
     $margin: line-height($x, $context);
     $converted-list: join($converted-list, $margin, $separator: space);
   }
   @if $base-unit == rem {
-    margin: $px-list;
+    @if $rem-fallback == true {
+      margin: $px-list;
+    }
   }
   margin: $converted-list;
 }
 
-// Define margin-top (with fallback). 
+// Define margin-top (with fallback).
 // This is only necessary to use if you want to provide fallbacks when you are
 // using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin margin-top($x, $context: $base-font-size) {
   @if $base-unit == rem {
-    @if type-of($x) == 'number' and unitless($x) {
-      margin-top: $x * $base-line-height;
-    }
-    @if type-of($x) == 'number' and not unitless($x) {  
-      margin-top: $x;
+    @if $rem-fallback == true {
+      @if type-of($x) == 'number' and unitless($x) {
+        margin-top: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        margin-top: $x;
+      }
     }
   }
   margin-top: line-height($x, $context);
 }
 
-// Define margin-bottom (with fallback). 
+// Define margin-bottom (with fallback).
 // This is only necessary to use if you want to provide fallbacks when you are
 // using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin margin-bottom($x, $context: $base-font-size) {
   @if $base-unit == rem {
-    @if type-of($x) == 'number' and unitless($x) {
-      margin-bottom: $x * $base-line-height;
-    }
-    @if type-of($x) == 'number' and not unitless($x) {  
-      margin-bottom: $x;
+    @if $rem-fallback == true {
+      @if type-of($x) == 'number' and unitless($x) {
+        margin-bottom: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        margin-bottom: $x;
+      }
     }
   }
   margin-bottom: line-height($x, $context);
 }
 
-// Define margin-left (with fallback). 
+// Define margin-left (with fallback).
 // This is only necessary to use if you want to provide fallbacks when you are
 // using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin margin-left($x, $context: $base-font-size) {
   @if $base-unit == rem {
-    @if type-of($x) == 'number' and unitless($x) {
-      margin-left: $x * $base-line-height;
-    }
-    @if type-of($x) == 'number' and not unitless($x) {  
-      margin-left: $x;
+    @if $rem-fallback == true {
+      @if type-of($x) == 'number' and unitless($x) {
+        margin-left: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        margin-left: $x;
+      }
     }
   }
   margin-left: line-height($x, $context);
 }
 
-// Define margin-right (with fallback). 
+// Define margin-right (with fallback).
 // This is only necessary to use if you want to provide fallbacks when you are
 // using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin margin-right($x, $context: $base-font-size) {
   @if $base-unit == rem {
-    @if type-of($x) == 'number' and unitless($x) {
-      margin-right: $x * $base-line-height;
-    }
-    @if type-of($x) == 'number' and not unitless($x) {  
-      margin-right: $x;
+    @if $rem-fallback == true {
+      @if type-of($x) == 'number' and unitless($x) {
+        margin-right: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        margin-right: $x;
+      }
     }
   }
   margin-right: line-height($x, $context);

data/stylesheets/typey/_padding.scss

@@ -1,4 +1,4 @@
-// Generate a value to be used as padding from either: 
+// Generate a value to be used as padding from either:
 //   a) a multiple of $base-line-height
 //   b) a static px or pt value
 //
@@ -10,12 +10,12 @@
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 //
 // @return number
-//   The calcuated height in $base-unit.
+//   The calculated height in $base-unit.
 @function padding($x, $context: $base-font-size) {
   @return line-height($x, $context);
 }
@@ -26,10 +26,10 @@
 //
 // @param number|list $x
 //   Multiple of line height to be used or px/pt value to be converted.
-//   Uses the same parameters as the CSS padding property: 
+//   Uses the same parameters as the CSS padding property:
 //   i.e. top right bottom left, 1 0 2 0.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin padding($list, $context: $base-font-size) {
@@ -41,102 +41,112 @@
         $padding: $x * $base-line-height;
         $px-list: join($px-list, $padding, $separator: space);
       }
-      @if type-of($x) == 'number' and not unitless($x) {  
+      @if type-of($x) == 'number' and not unitless($x) {
         $px-list: join($px-list, $x, $separator: space);
-      }    
+      }
     }
     $padding: line-height($x, $context);
     $converted-list: join($converted-list, $padding, $separator: space);
   }
   @if $base-unit == rem {
-    padding: $px-list;
+    @if $rem-fallback == true {
+      padding: $px-list;
+    }
   }
   padding: $converted-list;
 }
 
-// Define padding-top (with fallback). 
+// Define padding-top (with fallback).
 // This is only necessary to use if you want to provide fallbacks when you are
 // using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin padding-top($x, $context: $base-font-size) {
   @if $base-unit == rem {
-    @if type-of($x) == 'number' and unitless($x) {
-      padding-top: $x * $base-line-height;
-    }
-    @if type-of($x) == 'number' and not unitless($x) {  
-      padding-top: $x;
+    @if $rem-fallback == true {
+      @if type-of($x) == 'number' and unitless($x) {
+        padding-top: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        padding-top: $x;
+      }
     }
   }
   padding-top: line-height($x, $context);
 }
 
-// Define padding-bottom (with fallback). 
+// Define padding-bottom (with fallback).
 // This is only necessary to use if you want to provide fallbacks when you are
 // using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin padding-bottom($x, $context: $base-font-size) {
   @if $base-unit == rem {
-    @if type-of($x) == 'number' and unitless($x) {
-      padding-bottom: $x * $base-line-height;
-    }
-    @if type-of($x) == 'number' and not unitless($x) {  
-      padding-bottom: $x;
+    @if $rem-fallback == true {
+      @if type-of($x) == 'number' and unitless($x) {
+        padding-bottom: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        padding-bottom: $x;
+      }
     }
   }
   padding-bottom: line-height($x, $context);
 }
 
-// Define padding-left (with fallback). 
+// Define padding-left (with fallback).
 // This is only necessary to use if you want to provide fallbacks when you are
 // using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin padding-left($x, $context: $base-font-size) {
   @if $base-unit == rem {
-    @if type-of($x) == 'number' and unitless($x) {
-      padding-left: $x * $base-line-height;
-    }
-    @if type-of($x) == 'number' and not unitless($x) {  
-      padding-left: $x;
+    @if $rem-fallback == true {
+      @if type-of($x) == 'number' and unitless($x) {
+        padding-left: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        padding-left: $x;
+      }
     }
   }
   padding-left: line-height($x, $context);
 }
 
-// Define padding-right (with fallback). 
+// Define padding-right (with fallback).
 // This is only necessary to use if you want to provide fallbacks when you are
 // using rem as $base-unit.
 //
 // @param number $x
 //   Multiple of line height to be used or px/pt value to be converted.
 // @param number|string $context
-//   (optional) Only used if em is the $base-unit. The value of the elements/parents 
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
 //   font-size if it differs from $base-font-size. Specified as a t-shirt size or
 //   value in the same unit as the $font-size map.
 @mixin padding-right($x, $context: $base-font-size) {
   @if $base-unit == rem {
-    @if type-of($x) == 'number' and unitless($x) {
-      padding-right: $x * $base-line-height;
-    }
-    @if type-of($x) == 'number' and not unitless($x) {  
-      padding-right: $x;
+    @if $rem-fallback == true {
+      @if type-of($x) == 'number' and unitless($x) {
+        padding-right: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        padding-right: $x;
+      }
     }
   }
   padding-right: line-height($x, $context);

data/stylesheets/typey/_type-layout.scss

@@ -0,0 +1,49 @@
+// Define a type layout (font-size and line-height).
+//
+// @param number|string $size
+//   A size from the $font-size map or a px/pt value.
+// @param number $x
+//   Multiple of line height to be used or px/pt value to be converted.
+// @param number|string $context
+//   (optional) Only used if em is the $base-unit. The value of the elements/parents
+//   font-size if it differs from $base-font-size. Specified as a t-shirt size or
+//   value in the same unit as the $font-size map.
+@mixin type-layout($size, $x, $context: $size) {
+  @if $base-unit == rem {
+    @if $rem-fallback == true {
+      @if type-of($size) == 'string' {
+        $map-size: map-get($font-size, $size);
+        font-size: $map-size;
+      }
+      @if type-of($size) == 'number' and not unitless($size) {
+        $unit: unit($size);
+        @if $unit == px or $unit == pt {
+          font-size: $size;
+        }
+        @else {
+          @warn "font-size() only accepts values in px or pt.";
+        }
+      }
+      @if type-of($x) == 'number' and unitless($x) {
+        line-height: $x * $base-line-height;
+      }
+      @if type-of($x) == 'number' and not unitless($x) {
+        line-height: $x;
+      }
+    }
+  }
+  @if $base-unit == rem or $base-unit == px or $base-unit == pt {
+    font-size: font-size($size);
+    line-height: line-height($x);
+  }
+  @if $base-unit == em {
+    @if $size == $context {
+      font-size: font-size($size, $base-font-size);
+      line-height: line-height($x, $size);
+    }
+    @else {
+      font-size: font-size($size, $context);
+      line-height: line-height($x, $size);
+    }
+  }
+}