type-heading 0.0.14 → 0.0.16

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

@@ -3,20 +3,6 @@
 /// @group Property
 ////
 
-//  $th-properties
-/// An ordered list of available properties.
-///
-/// @since 0.0.10
-/// @type list
-/// @access private
-
-$th-properties: (
-  font-size,
-  line-height,
-  (margin-top margin-bottom),
-  breakpoint
-);
-
 //  th-property()
 /// Return heading list property value.
 ///
@@ -60,20 +46,19 @@ $th-properties: (
 ///   )
 
 @function th-property(
-  $heading,
   $property-name,
+  $heading,
   $breakpoint: false,
   $convert: true,
   $base-font-size: $th-base-font-size
 ){
   $heading: th-heading($heading, $breakpoint);
-  $breakpoint: _th-core-breakpoint-context($breakpoint);
   $property: _th-property-get($heading, $property-name);
   @if $property-name != font-size {
     $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size);
   }
   @if $property == default or $property == false {
-    $property: th-property-default($property-name, $base-font-size, false);
+    $property: _th-property-default($property-name, $base-font-size, false);
   }
   @if string == type-of($convert) {
     $property: th-unit-convert($convert, $property, $base-font-size);
@@ -100,210 +85,15 @@ $th-properties: (
   $heading,
   $property-name
 ){
-  $property-indexes: th-list-get-index-deep($th-properties, $property-name);
+  $property-indexes: th-list-get-index-deep($_th-core-heading-structure, $property-name);
   @return th-list-get-nth-deep($heading, $property-indexes);
 }
 
-//  th-property-font-size()
-/// Return heading font size value.
-///
-/// @since 0.0.10
-/// @return {number} The heading font size value.
-///
-/// @param {list | string} $heading - A heading map key or list.
-/// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
-/// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
-/// @param {number} $base-font-size [$th-base-font-size] Font size used for relative calculations.
-///
-/// @example scss - Return font size from a h1 heading map.
-///   th-property-font-size(h1)
-/// @example scss - Return font size from a h1 heading map with a breakpoint of 768px.
-///   th-property-font-size(
-///     $heading: h1,
-///     $breakpoint: 768px
-///   )
-/// @example scss - Return font size from a h1 heading map without unit conversion.
-///   th-property-font-size(
-///     $heading: h1,
-///     $convert: false
-///   )
-/// @example scss - Return font size from a h1 heading map and unit override to percent.
-///   th-property-font-size(
-///     $heading: h1,
-///     $convert: percent
-///   )
-/// @example scss - Return font size from a h1 with a base font size of 24px.
-///   th-property-font-size(
-///     $heading: h1,
-///     $base-font-size: 24px
-///   )
-
-@function th-property-font-size(
-  $heading,
-  $breakpoint: false,
-  $convert: true,
-  $base-font-size: $th-base-font-size
-){
-  @return th-property(
-    $heading: $heading,
-    $property-name: font-size,
-    $breakpoint: $breakpoint,
-    $convert: $convert,
-    $base-font-size: $base-font-size
-  );
-}
-
-//  th-property-line-height()
-/// Return heading line height value.
-///
-/// @since 0.0.10
-/// @return {number} The heading line height value.
-///
-/// @param {list | string} $heading - A heading map key or list.
-/// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
-/// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
-/// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
-///
-/// @example scss - Return line height from a h1 heading map.
-///   th-property-line-height(h1)
-/// @example scss - Return line height from a h1 heading map with a breakpoint of 768px.
-///   th-property-line-height(
-///     $heading: h1,
-///     $breakpoint: 768px
-///   )
-/// @example scss - Return line height from a h1 heading map without unit conversion.
-///   th-property-line-height(
-///     $heading: h1,
-///     $convert: false
-///   )
-/// @example scss - Return line height from a h1 heading map and unit override to percent.
-///   th-property-line-height(
-///     $heading: h1,
-///     $convert: percent
-///   )
-/// @example scss - Return line height from a h1 with a base font size of 24px.
-///   th-property-line-height(
-///     $heading: h1,
-///     $base-font-size: 24px
-///   )
-
-@function th-property-line-height(
-  $heading,
-  $breakpoint: false,
-  $base-font-size: th-property-font-size($heading, $breakpoint, false),
-  $convert: true
-){
-  @return th-property(
-    $heading: $heading,
-    $property-name: line-height,
-    $breakpoint: $breakpoint,
-    $convert: $convert,
-    $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size)
-  );
-}
-
-//  th-property-margin-top()
-/// Return heading margin top value.
-///
-/// @since 0.0.10
-/// @return {number} The heading margin top value.
-///
-/// @param {list | string} $heading - A heading map key or list.
-/// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
-/// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
-/// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
-///
-/// @example scss - Return margin top from a h1 heading map.
-///   th-property-margin-top(h1)
-/// @example scss - Return margin top from a h1 heading map with a breakpoint of 768px.
-///   th-property-margin-top(
-///     $heading: h1,
-///     $breakpoint: 768px
-///   )
-/// @example scss - Return margin top from a h1 heading map without unit conversion.
-///   th-property-margin-top(
-///     $heading: h1,
-///     $convert: false
-///   )
-/// @example scss - Return margin top from a h1 heading map and unit override to percent.
-///   th-property-margin-top(
-///     $heading: h1,
-///     $convert: percent
-///   )
-/// @example scss - Return margin top from a h1 with a base font size of 24px.
-///   th-property-margin-top(
-///     $heading: h1,
-///     $base-font-size: 24px
-///   )
-
-@function th-property-margin-top(
-  $heading,
-  $breakpoint: false,
-  $base-font-size: th-property-font-size($heading, $breakpoint, false),
-  $convert: true
-){
-  @return th-property(
-    $heading: $heading,
-    $property-name: margin-top,
-    $breakpoint: $breakpoint,
-    $convert: $convert,
-    $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size)
-  );
-}
-
-//  th-property-margin-bottom()
-/// Return heading margin bottom value.
-///
-/// @since 0.0.10
-/// @return {number} The heading margin bottom value.
-///
-/// @param {list | string} $heading - A heading map key or list.
-/// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
-/// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
-/// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
-///
-/// @example scss - Return margin bottom from a h1 heading map.
-///   th-property-margin-bottom(h1)
-/// @example scss - Return margin bottom from a h1 heading map with a breakpoint of 768px.
-///   th-property-margin-bottom(
-///     $heading: h1,
-///     $breakpoint: 768px
-///   )
-/// @example scss - Return margin bottom from a h1 heading map without unit conversion.
-///   th-property-margin-bottom(
-///     $heading: h1,
-///     $convert: false
-///   )
-/// @example scss - Return margin bottom from a h1 heading map and unit override to percent.
-///   th-property-margin-bottom(
-///     $heading: h1,
-///     $convert: percent
-///   )
-/// @example scss - Return margin bottom from a h1 with a base font size of 24px.
-///   th-property-margin-bottom(
-///     $heading: h1,
-///     $base-font-size: 24px
-///   )
-
-@function th-property-margin-bottom(
-  $heading,
-  $breakpoint: false,
-  $base-font-size: th-property-font-size($heading, $breakpoint, false),
-  $convert: true
-){
-  @return th-property(
-    $heading: $heading,
-    $property-name: margin-bottom,
-    $breakpoint: $breakpoint,
-    $convert: $convert,
-    $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size)
-  );
-}
-
-//  th-property-default()
+//  _th-property-default()
 /// Return default property value.
 ///
 /// @since 0.0.10
+/// @access private
 /// @return {number} The default property value.
 ///
 /// @param {string} $property-name - (font-size | line-height | margin-top | margin-bottom | breakpoint) A property name.
@@ -311,9 +101,9 @@ $th-properties: (
 /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
 ///
 /// @example scss - Get default font size.
-///   th-property-default(font-size)
+///   _th-property-default(font-size)
 
-@function th-property-default(
+@function _th-property-default(
   $property-name,
   $convert: true,
   $base-font-size: $th-base-font-size
@@ -381,10 +171,36 @@ $th-properties: (
   $heading,
   $breakpoint,
   $base-font-size
-) {
+){
   $_return: $base-font-size;
   @if $base-font-size == $th-base-font-size {
-    $_return: th-property-font-size($heading, $breakpoint, false);
+    $_return: th-property(
+      $property-name: font-size,
+      $heading: $heading,
+      $breakpoint: $breakpoint,
+      $convert: false
+    );
   }
   @return $_return;
+}
+
+//  th-p()
+/// Alias to th-property() function.
+///
+/// @since 0.0.15
+
+@function th-p(
+  $property-name,
+  $heading,
+  $breakpoint: false,
+  $convert: true,
+  $base-font-size: $th-base-font-size
+){
+  @return th-property(
+    $property-name: $property-name,
+    $heading: $heading,
+    $breakpoint: $breakpoint,
+    $convert: $convert,
+    $base-font-size: $base-font-size
+  );
 }

data/stylesheets/type-heading/mixins/_breakpoint.scss

@@ -4,7 +4,7 @@
 ////
 
 //  th-breakpoint()
-/// Output styles with a breakpoint within a media query. Requires the
+/// Output styles with a breakpoint context and a media query. Requires the
 /// Breakpoint gem (https://github.com/at-import/breakpoint).
 ///
 /// @since 0.0.10
@@ -12,11 +12,12 @@
 /// @throw th-breakpoint() requires the Breakpoint gem - https://github.com/at-import/breakpoint
 ///
 /// @param {list} $query - Media query to parse (https://github.com/at-import/breakpoint/wiki/Basic-Media-Queries).
-/// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
+/// @param {number} $breakpoint - A heading list breakpoint.
 ///
-/// @example scss - Output a heading with a 768px within a 768px min-width media query.
+/// @example scss - Output a heading with a 768px breakpoint within a 768px min-width media query.
 ///   @include th-breakpoint(min-width 768px, 768px) {
-///     @include th-heading(h1);
+///     $heading: th-core-context-get(heading);
+///     @include th-heading($heading);
 ///   }
 
 @mixin th-breakpoint(
@@ -25,11 +26,33 @@
 ){
   @if variable-exists('breakpoint') and mixin-exists('breakpoint') {
     @include breakpoint($query) {
-      @include th-with-breakpoint($breakpoint) {
+      @include th-breakpoint-context($breakpoint) {
         @content;
       }
     }
   } @else {
     @warn 'th-breakpoint requires the Breakpoint gem - https://github.com/at-import/breakpoint';
   }
+}
+
+//  th-breakpoint-context
+/// Output content with breakpoint context.
+///
+/// @since 0.0.15
+/// @content [Output with breakpoint context]
+///
+/// @param {number} $breakpoint - A heading list breakpoint.
+///
+/// @example scss - Output a heading with a 768px breakpoint context.
+///   @include th-breakpoint(768px) {
+///     $heading: th-core-context-get(heading);
+///     @include th-heading($heading);
+///   }
+
+@mixin th-breakpoint-context(
+  $breakpoint
+){
+  @include th-core-context-set(breakpoint, $breakpoint) {
+    @content;
+  }
 }

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

@@ -35,23 +35,23 @@
   $heading,
   $breakpoint: false,
   $base-font-size: $th-base-font-size,
-  $include: false
+  $include: (font-size line-height margin-top margin-bottom)
 ){
-  $breakpoint: _th-core-breakpoint-context($breakpoint);
-  @include th-with-breakpoint($breakpoint) {
-    $font-size: th-property-font-size(
-      $heading: $heading,
-      $base-font-size: $base-font-size,
-      $convert: false
-    );
-    @each $property in $_th-core-properties {
-      @if not $include or th-list-has($include, $property) {
-        @include th-property(
-          $property-name: $property,
-          $heading: $heading,
-          $base-font-size: th-if(font-size == $property, $base-font-size, $font-size)
-        );
-      }
+  $heading: th-heading($heading, $breakpoint);
+  $font-size: th-property(
+    $property-name: font-size,
+    $heading: $heading,
+    $base-font-size: $base-font-size,
+    $convert: false
+  );
+  $properties: th-list-flatten($_th-core-heading-structure);
+  @each $property in $properties {
+    @if not $include or th-list-has($include, $property) {
+      @include th-property(
+        $property-name: $property,
+        $heading: $heading,
+        $base-font-size: th-if(font-size == $property, $base-font-size, $font-size)
+      );
     }
   }
 }
@@ -76,13 +76,123 @@
 @mixin th-headings(
   $heading,
   $base-font-size: $th-base-font-size,
-  $include: false
+  $include: (font-size line-height margin-top margin-bottom)
 ){
-  @include _th-heading-loop($heading) {
+  @include th-heading-context($heading, true) {
+    $heading: th-core-context-get(heading);
     @include th-heading(
       $heading: $heading,
       $base-font-size: $base-font-size,
       $include: $include
     );
   }
+}
+
+//  th-heading-context
+/// Output content with heading context.
+///
+/// @since 0.0.15
+/// @content [Output with heading context]
+///
+/// @param {list | string} $heading - A heading map key or list.
+///
+/// @example scss - Output a heading with a 768px breakpoint.
+///   @include th-heading-context(h1) {
+///     $heading: th-core-context-get(heading);
+///     @include th-heading($heading);
+///   }
+
+@mixin th-heading-context(
+  $heading,
+  $breakpoint-output: false
+){
+
+  $heading: th-heading-get-map($heading);
+  @if _th-heading-has-next($heading) {
+    @include _th-heading-context-loop($heading, $breakpoint-output) {
+      @include th-core-context-set(
+        heading, th-heading(
+          $heading: $heading,
+          $breakpoint: th-core-context-get(breakpoint)
+        )
+      ){
+        @content;
+      }
+    }
+  } @else {
+    @include th-core-context-set(heading, $heading) {
+      @content;
+    }
+  }
+}
+
+// _th-heading-context-loop
+/// Loops through a heading map and outputs @content with breakpoint context.
+///
+/// @since 0.0.14
+/// @access private
+/// @content
+///
+/// @param {type} $name
+/// @param {list | string} $heading - A heading map key or list.
+
+@mixin _th-heading-context-loop(
+  $heading,
+  $breakpoint-output: false
+){
+  $heading-map: th-heading-get-map($heading);
+  @if _th-heading-has-next($heading) {
+    @each $heading-list in $heading-map {
+      $breakpoint: _th-property-get($heading-list, breakpoint);
+      @if $breakpoint {
+        @if $breakpoint-output {
+          @include th-breakpoint($breakpoint, $breakpoint) {
+            @content;
+          }
+        } @else {
+          @include th-breakpoint-context($breakpoint) {
+            @content;
+          }
+        }
+      } @else {
+        @content;
+      }
+    }
+  }
+}
+
+//  th-h()
+/// Alias to th-heading() mixin.
+///
+/// @since 0.0.15
+
+@mixin th-h(
+  $heading,
+  $breakpoint: false,
+  $base-font-size: $th-base-font-size,
+  $include: (font-size line-height margin-top margin-bottom)
+){
+  @include th-heading(
+    $heading: $heading,
+    $breakpoint: $breakpoint,
+    $base-font-size: $base-font-size,
+    $include: $include
+  );
+}
+
+//  th-h()
+/// Alias to th-headings() mixin.
+///
+/// @since 0.0.15
+
+@mixin th-hs(
+  $heading,
+  $base-font-size: $th-base-font-size,
+  $include: (font-size line-height margin-top margin-bottom)
+){
+  @include th-headings(
+    $heading: $heading,
+    $base-font-size: $base-font-size,
+    $include: $include
+  );
 }