type-heading 0.0.14 → 0.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ba4a423c88bb3a9181e6f699b9ba8ee5be9a92bf
-  data.tar.gz: a203207d96590ba085502dba03a7c0c1fdb2bffa
+  metadata.gz: 33d892948aa82bbbbd404f813ee2ed00b32f692a
+  data.tar.gz: d2eaa745522f8bba1f82a7569363a3844dc75fbc
 SHA512:
-  metadata.gz: 3cafac27b260505b72a2f3e31497fdc1326687c819c1460b0e414bb2eaf67105be6f35125c75b9645f2ea825839b3bb574e47158b227167fa9d59d47051a3f2c
-  data.tar.gz: cbfff014a83078b8ea361b94f5f944e0c19de38b4adbffb3f294b763ffa672795e30a3f39569f0ad82dbd73ba1a37859828ba9ea406434026212f2c3d18269e6
+  metadata.gz: 9dc900247f490a30d084486d845eef0f304f72393f396b65b0386868e81568331acf3916045b1e613ba748ae304ef50b935c52cb836e3caceba8c4cf60b3375e
+  data.tar.gz: c4d382587e1a8ae5f2b01fef9356634bffbbd6f441d78ccce3f3b129b45f74479b16adebd7a52ef497e6bef3341fd12b415e55e97ad2bbaf158b8d7c1cbae21e

data/README.md

@@ -5,6 +5,77 @@
 Type Heading is a lightweight Compass Extension that lets you easily manage
 responsive typographic sizing.
 
+```sass
+// Define Headings
+$th-headings: (
+  h1: (32px 36px, 36px 42px default 768px),
+  h2: (28px 32px, 30px 34px default 768px),
+  h3: (24px 30px)
+);
+
+// Output Headings
+h1 { @include th-headings(h1); }
+
+// h1 {
+//   margin-top: 20px;
+//   margin-bottom: 20px;
+//   font-size: 32px;
+//   line-height: 36px;
+// }
+// 
+// @media (min-width: 768px) {
+//   h1 {
+//     margin-top: 20px;
+//     margin-bottom: 20px;
+//     font-size: 36px;
+//     line-height: 42px;
+//   }
+// }
+
+// Return properties
+$font-size-tablet: th-property(font-size, h1, 768px);
+// 36px
+
+// Output properties
+.my-component { @include th-property(font-size, h1); }
+
+// .my-component {
+//   font-size: 32px
+// }
+
+// Unit Conversion
+$th-property-units: (
+  font-size: percent,
+  line-height: rel,
+  margin-top: em,
+  margin-bottom: em
+);
+
+h3 { @include th-headings(h3); }
+
+// h3 {
+//   margin-top: 0.83333em;
+//   margin-bottom: 0.83333em;
+//   font-size: 150%;
+//   line-height: 1.25;
+// }
+
+// Advanced:
+// Using contextual properties:
+
+h1 {
+  @include th-heading-context(h1) {
+    $heading: th-core-context-get(heading);
+    font-size: th-property(font-size, $heading);
+  }
+}
+
+// h1 {
+//  font-size: 32px;
+//  font-size: 36px
+// }
+```
+
 ## Libsass Compatible
 
 Ruby is fucking slow as fuck and I hate it. Type heading is 100% (or will try to
@@ -15,9 +86,9 @@ be) compatible with Libsass.
 Reference or change any heading size throughout your stylesheets from a single
 variable. Now you don't have to try and remember what the font size of your h3 is!
 
-## Reponsive Typography Made Easy
+## Responsive Typography Made Easy
 
-Headings are stuctured by breakpoint, giving you the power to quickly find the
+Headings are structured by breakpoint, giving you the power to quickly find the
 right heading size for the right media query.
 
 ## Simple Unit Conversion

data/stylesheets/_type-heading.scss

@@ -4,11 +4,11 @@
 // ------------------------------
 
 @import "type-heading/settings";
-@import "type-heading/functions/helpers";
-@import "type-heading/functions/core";
-@import "type-heading/mixins/core";
+@import "type-heading/api/helpers";
+@import "type-heading/api/core";
 @import "type-heading/functions/heading";
 @import "type-heading/functions/property";
 @import "type-heading/mixins/breakpoint";
 @import "type-heading/mixins/property";
-@import "type-heading/mixins/heading";
+@import "type-heading/mixins/heading";
+@import "type-heading/api/deprecated";

data/stylesheets/type-heading/api/_core.scss

@@ -0,0 +1,72 @@
+////
+/// Core
+/// @group Core
+////
+
+$_th-core-heading-structure: (
+  font-size,
+  line-height,
+  (margin-top margin-bottom),
+  breakpoint
+);
+
+//  $_th-core-contexts
+/// Global values to keep track of contexts.
+///
+/// @since 0.0.15
+/// @type map
+/// @access private
+///
+/// @prop {boolean | list} base.heading [false] - Contextual heading list
+/// @prop {boolean \ number} base.heading [false] - Contextual breakpoint
+
+$_th-core-contexts: (
+  heading: false,
+  breakpoint: false
+);
+
+//  th-core-context-get()
+/// Check and get contextual value from globals.
+///
+/// @since 0.0.15
+/// @return {mixed} Contextual value from globals or passed value.
+///
+/// @param {string} $context - [heading | breakpoint] Context property.
+/// @param {mixed} $value - The original value of the context property.
+///
+/// @example scss - Return contextual breakpoint value.
+///   _th-core-context-get(breakpoint, 768px)
+///   // 1024px
+
+@function th-core-context-get(
+  $context,
+  $value: false
+){
+  @if global_variable_exists('_th-core-contexts') and map-get($_th-core-contexts, $context) {
+    @return map-get($_th-core-contexts, $context);
+  } @else {
+    @return $value;
+  }
+}
+
+//  th-core-context-set()
+/// Set contextual value to globals.
+///
+/// @since 0.0.15
+/// @content [Output with context]
+///
+/// @param {string} $context - [heading | breakpoint] Context property.
+/// @param {mixed} $value - The new value of the context property.
+///
+/// @example scss - Set contextual breakpoint value.
+///   _th-core-context-set(breakpoint, 768px)
+
+@mixin th-core-context-set(
+  $context,
+  $value
+){
+  $cache: $_th-core-contexts;
+  $_th-core-contexts: th-map-set($_th-core-contexts, $context, $value) !global;
+  @content;
+  $_th-core-contexts: $cache !global;
+}

data/stylesheets/type-heading/api/_deprecated.scss

@@ -0,0 +1,136 @@
+////
+/// Deprecated API.
+/// @group Deprecated
+/// @access private
+////
+
+@function th-property-font-size(
+  $heading,
+  $breakpoint: false,
+  $convert: true,
+  $base-font-size: $th-base-font-size
+){
+  @warn "th-property-font-size() will be removed in next major release. Use th-property() instead.";
+  @return th-property(
+    $heading: $heading,
+    $property-name: font-size,
+    $breakpoint: $breakpoint,
+    $convert: $convert,
+    $base-font-size: $base-font-size
+  );
+}
+
+@function th-property-line-height(
+  $heading,
+  $breakpoint: false,
+  $base-font-size: th-property-font-size($heading, $breakpoint, false),
+  $convert: true
+){
+  @warn "th-property-line-height() will be removed in next major release. Use th-property() instead.";
+  @return th-property(
+    $heading: $heading,
+    $property-name: line-height,
+    $breakpoint: $breakpoint,
+    $convert: $convert,
+    $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size)
+  );
+}
+
+@function th-property-margin-top(
+  $heading,
+  $breakpoint: false,
+  $base-font-size: th-property-font-size($heading, $breakpoint, false),
+  $convert: true
+){
+  @warn "th-property-margin-top() will be removed in next major release. Use th-property() instead.";
+  @return th-property(
+    $heading: $heading,
+    $property-name: margin-top,
+    $breakpoint: $breakpoint,
+    $convert: $convert,
+    $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size)
+  );
+}
+
+@function th-property-margin-bottom(
+  $heading,
+  $breakpoint: false,
+  $base-font-size: th-property-font-size($heading, $breakpoint, false),
+  $convert: true
+){
+  @warn "th-property-margin-bottom() will be removed in next major release. Use th-property() instead.";
+  @return th-property(
+    $heading: $heading,
+    $property-name: margin-bottom,
+    $breakpoint: $breakpoint,
+    $convert: $convert,
+    $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size)
+  );
+}
+
+@mixin th-property-font-size(
+  $heading,
+  $breakpoint: false,
+  $convert: true,
+  $base-font-size: $th-base-font-size
+){
+  @warn "th-property-font-size() will be removed in next major release. Use th-property() instead.";
+  @include th-property(
+    $property-name: font-size,
+    $heading: $heading,
+    $breakpoint: $breakpoint,
+    $convert: $convert,
+    $base-font-size: $base-font-size
+  );
+}
+
+@mixin th-property-line-height(
+  $heading,
+  $breakpoint: false,
+  $convert: true,
+  $base-font-size: $th-base-font-size
+){
+  @warn "th-property-line-height() will be removed in next major release. Use th-property() instead.";
+  $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size);
+  @include th-property(
+    $property-name: line-height,
+    $heading: $heading,
+    $breakpoint: $breakpoint,
+    $convert: $convert,
+    $base-font-size: $base-font-size
+  );
+}
+
+@mixin th-property-margin-top(
+  $heading,
+  $breakpoint: false,
+  $convert: true,
+  $base-font-size: $th-base-font-size
+){
+  @warn "th-property-margin-top() will be removed in next major release. Use th-property() instead.";
+  $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size);
+  @include th-property(
+    $property-name: margin-top,
+    $heading: $heading,
+    $breakpoint: $breakpoint,
+    $convert: $convert,
+    $base-font-size: $base-font-size
+  );
+}
+
+@mixin th-property-margin-bottom(
+  $heading,
+  $breakpoint: false,
+  $convert: true,
+  $base-font-size: $th-base-font-size
+){
+  @warn "th-property-margin-bottom() will be removed in next major release. Use th-property() instead.";
+  $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size);
+  @include th-property(
+    $property-name: margin-bottom,
+    $heading: $heading,
+    $breakpoint: $breakpoint,
+    $convert: $convert,
+    $base-font-size: $base-font-size
+  );
+}

data/stylesheets/type-heading/{functions → api}/_helpers.scss

@@ -90,6 +90,48 @@
   @return $_return;
 }
 
+// Maps
+// ------------------------------
+
+//  th-map-set()
+/// Set a map key with a new value.
+///
+/// @since 0.0.15
+/// @return {map} Map with new property
+///
+/// @param {map} $map - The map/haystack of values.
+/// @param {string} $key - The key/needle used to find value.
+/// @param {$value} $value - The new value of the map key.
+///
+/// @example scss - Set map key 'foo' to 'Hello World'
+///   th-map-set(
+///     (
+///       foo: 'First',
+///       bar: 'Second'
+///     ),
+///     $key: foo,
+///     $value: 'Hello Word'
+///   )
+///   // (
+///   //   foo: 'Hello World',
+///   //   bar: 'Second'
+///   // )
+
+@function th-map-set(
+  $map,
+  $key,
+  $value
+){
+  $_return: ();
+  @each $item in $map {
+    @if nth($item, 1) != $key {
+      $_return: map-merge($_return, (nth($item, 1): nth($item, 2)));
+    }
+  }
+  $_return: map-merge($_return, ($key: $value));
+  @return $_return;
+}
+
 // Lists
 // ------------------------------
 
@@ -243,6 +285,35 @@
   @return $_return;
 }
 
+//  th-list-flatten()
+/// Turns multidimensional `$list` into a one-level list.
+///
+/// @since 0.0.15
+/// @link https://github.com/at-import/SassyLists/blob/master/stylesheets/SassyLists/_flatten.scss
+/// @return {list} Flattened one-level list.
+///
+/// @param {list} $list - Multidimensional list to flatten
+///
+/// @example scss - Flatten multidimensional list.
+///   th-list-flatten(a, b, (c, d))
+///   // (a, b, c, d)
+
+@function th-list-flatten($list) {
+  $result: ();
+  @each $item in $list {
+    @if length($item) > 1 {
+      $flatten: th-list-flatten($item);
+      @each $i in $flatten {
+        $result: append($result, $i, list-separator($list));
+      }
+    }
+    @else {
+      $result: append($result, $item, list-separator($list));
+    }
+  }
+  @return $result;
+}
+
 // Units
 // ------------------------------
 

data/stylesheets/type-heading/functions/_heading.scss

@@ -24,9 +24,11 @@
   $heading,
   $breakpoint: false
 ){
-  $breakpoint: _th-core-breakpoint-context($breakpoint);
+  $breakpoint: th-core-context-get(breakpoint, $breakpoint);
   $heading: th-heading-get-map($heading);
-  $heading: _th-heading-maybe-next($heading, $breakpoint);
+  @if _th-heading-has-next($heading) {
+    $heading: _th-heading-get-next($heading, $breakpoint);
+  }
   @return $heading;
 }
 
@@ -107,8 +109,8 @@
   @if $breakpoint {
     @each $heading-list in $heading {
       @if th-property(
-        $heading: $heading-list,
         $property-name: breakpoint,
+        $heading: $heading-list,
         $convert: false) == $breakpoint {
         $heading: $heading-list;
       }
@@ -119,22 +121,17 @@
   @return $heading;
 }
 
-//  _th-heading-maybe-next()
-/// Check and get a heading list from a heading map key.
-///
-/// @since 0.0.14
-/// @access private
-/// @return {mixed} Returns heading list if available.
+//  th-h()
+/// Alias to th-heading() function.
 ///
-/// @param {list | string} $heading - A heading map key or list.
-/// @param {number} $breakpoint [false] - A heading list breakpoint.
+/// @since 0.0.15
 
-@function _th-heading-maybe-next(
+@function th-h(
   $heading,
   $breakpoint: false
 ){
-  @if _th-heading-has-next($heading) {
-    $heading: _th-heading-get-next($heading, $breakpoint);
-  }
-  @return $heading;
+  @return th-heading(
+    $heading: $heading,
+    $breakpoint: $breakpoint
+  )
 }