Improved heading structure

1 files changed, 33 insertions, 2 deletions

diff --git a/src/_mixins.scss b/src/_mixins.scss
index e8595f1..506b8ee 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -1,7 +1,7 @@
-@use 'functions';
+@use 'functions' as fn;
 
 @mixin set-font($basis, $values: ()) {
-    $values: functions.set-font($basis, $values);
+    $values: fn.set-font($basis, $values);
 
     @each $prop, $value in $values {
         @if $value != null {
@@ -9,3 +9,34 @@
         }
     }
 }
+
+@mixin heading-strong($size) {
+    color:     fn.foreign-color(--heading, --strong);
+    font-size: $size;
+}
+
+@mixin heading-medium($size) {
+    @include set-font(--standard, (
+        --line-height: null,
+        --size:        $size,
+        --weight:      bold,
+        --transform:   uppercase,
+        --spacing:     1px
+    ));
+
+    transform: none;
+    color:     fn.foreign-color(--heading, --strong);
+}
+
+@mixin heading-faint($size) {
+    @include set-font(--standard, (
+        --line-height: null,
+        --size:        $size,
+        --weight:      500,
+        --transform:   uppercase,
+        --spacing:     1px
+    ));
+
+    transform: none;
+    color:     fn.foreign-color(--heading, --light);
+}