Add text-transform variable for headings

3 files changed, 35 insertions, 18 deletions

diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index d27b595..f5b8de6 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -17,7 +17,7 @@
                 font-feature-settings: props.get(vars.$feature-settings);
                 line-height:           props.get(vars.$line-height);
                 color:                 props.get(vars.$text-color);
-                text-transform:        none;
+                text-transform:        props.get(vars.$text-transform);
                 letter-spacing:        normal;
 
                 & + & {
@@ -32,25 +32,27 @@
                         transparent               .5em);
                 }
 
-                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
+                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in vars.$sizes {
                         @include bem.modifier($mod) {
                                 font-family:           props.get($font-family);
                                 font-size:             props.get($font-size);
                                 font-weight:           props.get($font-weight);
                                 font-feature-settings: props.get($feature-settings);
                                 line-height:           props.get($line-height);
+                                text-transform:        props.get($text-transform);
                                 letter-spacing:        props.get($letter-spacing);
                         }
                 }
 
                 @include bem.modifier('display') {
-                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
+                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in vars.$display--sizes {
                                 @include bem.modifier($mod) {
                                         font-family:           props.get($font-family);
                                         font-size:             props.get($font-size);
                                         font-weight:           props.get($font-weight);
                                         font-feature-settings: props.get($feature-settings);
                                         line-height:           props.get($line-height);
+                                        text-transform:        props.get($text-transform);
                                         letter-spacing:        props.get($letter-spacing);
                                         transform:             translateX(props.get(vars.$offset));
                                 }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 1d6df26..371cab0 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -12,6 +12,7 @@ $font-family:      props.def(--o-heading--font-family, props.get(core.$font--sta
 $line-height:      props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-weight:      props.def(--o-heading--font-weight, bold) !default;
 $feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform:   props.def(--o-heading--text-transform, none) !default;
 
 $font-family--xxl:      props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
 $line-height--xxl:      props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -19,6 +20,7 @@ $font-size--xxl:        props.def(--o-heading--xxl--font-size, props.get(core.$f
 $font-weight--xxl:      props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
 $letter-spacing--xxl:   props.def(--o-heading--xxl--letter-spacing, 0) !default;
 $feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$text-transform--xxl:   props.def(--o-heading--xxl--text-transform, none) !default;
 
 $font-family--xl:      props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default;
 $line-height--xl:      props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -26,6 +28,7 @@ $font-size--xl:        props.def(--o-heading--xl--font-size, props.get(core.$fon
 $font-weight--xl:      props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default;
 $letter-spacing--xl:   props.def(--o-heading--xl--letter-spacing, 0) !default;
 $feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$text-transform--xl:   props.def(--o-heading--xl--text-transform, none) !default;
 
 $font-family--lg:      props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
 $line-height--lg:      props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -33,6 +36,7 @@ $font-size--lg:        props.def(--o-heading--lg--font-size, props.get(core.$fon
 $font-weight--lg:      props.def(--o-heading--lg--font-weight, bold) !default;
 $letter-spacing--lg:   props.def(--o-heading--lg--letter-spacing, 0) !default;
 $feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--lg:   props.def(--o-heading--lg--text-transform, none) !default;
 
 $font-family--md:      props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
 $line-height--md:      props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -40,6 +44,7 @@ $font-size--md:        props.def(--o-heading--md--font-size, props.get(core.$fon
 $font-weight--md:      props.def(--o-heading--md--font-weight, bold) !default;
 $letter-spacing--md:   props.def(--o-heading--md--letter-spacing, 0) !default;
 $feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--md:   props.def(--o-heading--md--text-transform, none) !default;
 
 $font-family--sm:      props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
 $line-height--sm:      props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -47,6 +52,7 @@ $font-size--sm:        props.def(--o-heading--sm--font-size, props.get(core.$fon
 $font-weight--sm:      props.def(--o-heading--sm--font-weight, 500) !default;
 $letter-spacing--sm:   props.def(--o-heading--sm--letter-spacing, 1px) !default;
 $feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--sm:   props.def(--o-heading--sm--text-transform, none) !default;
 
 $font-family--xs:      props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
 $line-height--xs:      props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -54,14 +60,15 @@ $font-size--xs:        props.def(--o-heading--xs--font-size, props.get(core.$fon
 $font-weight--xs:      props.def(--o-heading--xs--font-weight, 500) !default;
 $letter-spacing--xs:   props.def(--o-heading--xs--letter-spacing, 1px) !default;
 $feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--xs:   props.def(--o-heading--xs--text-transform, none) !default;
 
 $sizes: (
-        'xs'  $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
-        'sm'  $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
-        'md'  $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
-        'lg'  $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
-        'xl'  $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
-        'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
+        'xs'  $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs,
+        'sm'  $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm,
+        'md'  $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md,
+        'lg'  $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg,
+        'xl'  $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl,
+        'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl,
 ) !default;
 
 $display--font-family--xxl:      props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
@@ -70,6 +77,7 @@ $display--font-size--xxl:        props.def(--o-heading--display--xxl--font-size,
 $display--font-weight--xxl:      props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
 $display--letter-spacing--xxl:   props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
 $display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$display--text-transform--xxl:   props.def(--o-heading--display--xxl--text-transform, none) !default;
 
 $display--font-family--xl:      props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default;
 $display--line-height--xl:      props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -77,6 +85,7 @@ $display--font-size--xl:        props.def(--o-heading--display--xl--font-size, p
 $display--font-weight--xl:      props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default;
 $display--letter-spacing--xl:   props.def(--o-heading--display--xl--letter-spacing, 0) !default;
 $display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$display--text-transform--xl:   props.def(--o-heading--display--xl--text-transform, none) !default;
 
 $display--font-family--lg:      props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default;
 $display--line-height--lg:      props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -84,6 +93,7 @@ $display--font-size--lg:        props.def(--o-heading--display--lg--font-size, p
 $display--font-weight--lg:      props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default;
 $display--letter-spacing--lg:   props.def(--o-heading--display--lg--letter-spacing, 0) !default;
 $display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$display--text-transform--lg:   props.def(--o-heading--display--lg--text-transform, none) !default;
 
 $display--font-family--md:      props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default;
 $display--line-height--md:      props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -91,6 +101,7 @@ $display--font-size--md:        props.def(--o-heading--display--md--font-size, p
 $display--font-weight--md:      props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default;
 $display--letter-spacing--md:   props.def(--o-heading--display--md--letter-spacing, 0) !default;
 $display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$display--text-transform--md:   props.def(--o-heading--display--md--text-transform, none) !default;
 
 $display--font-family--sm:      props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
 $display--line-height--sm:      props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -98,6 +109,7 @@ $display--font-size--sm:        props.def(--o-heading--display--sm--font-size, p
 $display--font-weight--sm:      props.def(--o-heading--display--sm--font-weight, bold) !default;
 $display--letter-spacing--sm:   props.def(--o-heading--display--sm--letter-spacing, 0) !default;
 $display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$display--text-transform--sm:   props.def(--o-heading--display--sm--text-transform, none) !default;
 
 $display--font-family--xs:      props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
 $display--line-height--xs:      props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -105,6 +117,7 @@ $display--font-size--xs:        props.def(--o-heading--display--xs--font-size, p
 $display--font-weight--xs:      props.def(--o-heading--display--xs--font-weight, 500) !default;
 $display--letter-spacing--xs:   props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
 $display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$display--text-transform--xs:   props.def(--o-heading--display--xs--text-transform, none) !default;
 
 $display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default;
 $display--font-size--xl--md:  props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default;
@@ -114,10 +127,10 @@ $display--font-size--sm--md:  props.def(--o-heading--display--sm--font-size, pro
 $display--font-size--xs--md:  props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
 
 $display--sizes: (
-        'xs'  $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs,
-        'sm'  $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm,
-        'md'  $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md,
-        'lg'  $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg,
-        'xl'  $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl,
-        'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl,
+        'xs'  $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs $display--text-transform--xs,
+        'sm'  $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm $display--text-transform--sm,
+        'md'  $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md $display--text-transform--md,
+        'lg'  $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg $display--text-transform--lg,
+        'xl'  $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl $display--text-transform--xl,
+        'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl $display--text-transform--xxl,
 ) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index f8a7854..7a9f088 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -27,7 +27,7 @@
                         font-weight:           props.get(heading.$font-weight);
                         font-feature-settings: props.get(heading.$feature-settings);
                         line-height:           props.get(heading.$line-height);
-                        text-transform:        none;
+                        text-transform:        props.get(heading.$text-transform);
                         letter-spacing:        normal;
                         transform:             translateX(props.get(heading.$offset));
                 }
@@ -40,25 +40,27 @@
                         transparent .6em);
                 }
 
-                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes {
+                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in heading.$sizes {
                         #{map.get($-size-map, $mod)} {
                                 font-family:           props.get($font-family);
                                 font-size:             props.get($font-size);
                                 font-weight:           props.get($font-weight);
                                 font-feature-settings: props.get($feature-settings);
                                 line-height:           props.get($line-height);
+                                text-transform:        props.get($text-transform);
                                 letter-spacing:        props.get($letter-spacing);
                         }
                 }
 
                 @include bem.modifier('display') {
-                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
+                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in heading.$display--sizes {
                                 #{map.get($-size-map, $mod)} {
                                         font-family:           props.get($font-family);
                                         font-size:             props.get($font-size);
                                         font-weight:           props.get($font-weight);
                                         font-feature-settings: props.get($feature-settings);
                                         line-height:           props.get($line-height);
+                                        text-transform:        props.get($text-transform);
                                         letter-spacing:        props.get($letter-spacing);
                                 }
                         }