Heading: Add static theme colors

5 files changed, 190 insertions, 7 deletions

diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 2d27658..1d6e2dc 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../props' as *;
@@ -60,5 +62,25 @@
                                 }
                         }
                 }
+
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                color: props.get(vars.$static-themes, $theme, --text-color);
+                                                
+                                @each $mod, $value in vars.$sizes {
+                                        @include bem.modifier($mod) {
+                                                color: props.get(vars.$static-themes, $theme, --#{$mod}, --text-color);
+                                        }
+                                }
+
+                                @include bem.modifier('display') {      
+                                        @each $mod, $value in vars.$sizes {
+                                                @include bem.modifier($mod) {
+                                                        color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color);
+                                                }
+                                        }
+                                }
+                        }
+                }
         }
 }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index ccef017..cf07488 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
@@ -151,3 +153,55 @@ $display--sizes: (
         '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 $display--text-color--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 $display--text-color--xxl,
 ) !default;
+
+$static-themes: props.def(--o-heading, (), 'color');
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+        $heading-theme: --static-#{string.slice($theme, 3)};
+
+        $static-themes: props.merge($static-themes, (
+                $heading-theme: (
+                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+
+                        --xxl: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+                        --xl: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+                        --lg: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+                        --md: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+                        --sm: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --500),
+                        ),
+                        --xs: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --500),
+                        ),
+
+                        --display: (
+                                --xxl: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --xl: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --lg: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --md: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --sm: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --xs: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --500),
+                                ),
+                        ),
+                )
+        ));
+}
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 0a56ef1..362b116 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../objects/heading.vars' as heading;
@@ -67,5 +68,25 @@
                                 }
                         }
                 }
+
+                @each $theme in map.keys(props.get(heading.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                color: props.get(heading.$static-themes, $theme, --text-color);
+                                                
+                                @each $mod, $value in heading.$sizes {
+                                        #{map.get($-size-map, $mod)} {
+                                                color: props.get(heading.$static-themes, $theme, --#{$mod}, --text-color);
+                                        }
+                                }
+
+                                @include bem.modifier('display') {      
+                                        @each $mod, $value in heading.$sizes {
+                                                #{map.get($-size-map, $mod)} {
+                                                        color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color);
+                                                }
+                                        }
+                                }
+                        }
+                }
         }
 }
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index 6cc05ad..cdc28f0 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -1,34 +1,76 @@
 mixin h1-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
     h1(class=classes)&attributes(attributes)
         block
 
 mixin h2-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
     h2(class=classes)&attributes(attributes)
         block
 
 mixin h3-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
     h3(class=classes)&attributes(attributes)
         block
 
 mixin h4-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
     h4(class=classes)&attributes(attributes)
         block
 
 mixin h5-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
     h5(class=classes)&attributes(attributes)
         block
 
 mixin h6-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
     h6(class=classes)&attributes(attributes)
         block
 
 mixin div-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
     div(class=classes)&attributes(attributes)
         block
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
index bc16cee..35c4de4 100644
--- a/tpl/views/heading.pug
+++ b/tpl/views/heading.pug
@@ -39,3 +39,47 @@ mixin view-heading
             +div-heading('md', true)= 'MD display Heading'
             +div-heading('sm', true)= 'SM display Heading'
             +div-heading('xs', true)= 'XS display Heading'
+
+        each theme in ['static-black', 'static-white']
+            -
+                const bg = theme.startsWith('static-black') ? 500 : 1000;
+
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                h1.u-mt-0= 'H1 default'
+                h2= 'H2 default'
+                h3= 'H3 default'
+                h4= 'H4 default'
+                h5= 'H5 default'
+                h6= 'H6 default'
+
+            .c-box.s-headings(class=`s-headings--${theme}` style=`background-color: var(--colors--blue-static--${bg});`)
+                h1.u-mt-0= 'H1 styled'
+                h2= 'H2 styled'
+                h3= 'H3 styled'
+                h4= 'H4 styled'
+                h5= 'H5 styled'
+                h6= 'H6 styled'
+
+            .c-box.s-headings.s-headings--display(class=`s-headings--${theme}` style=`background-color: var(--colors--blue-static--${bg});`)
+                h1.u-mt-0= 'H1 display styled'
+                h2= 'H2 display styled'
+                h3= 'H3 display styled'
+                h4= 'H4 display styled'
+                h5= 'H5 display styled'
+                h6= 'H6 display styled'
+
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +div-heading('xxl')(color=theme class='u-mt-0')= 'XXL Heading'
+                +div-heading('xl')(color=theme)= 'XL Heading'
+                +div-heading('lg')(color=theme)= 'LG Heading'
+                +div-heading('md')(color=theme)= 'MD Heading'
+                +div-heading('sm')(color=theme)= 'SM Heading'
+                +div-heading('xs')(color=theme)= 'XS Heading'
+
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +div-heading('xxl', true)(color=theme class='u-mt-0')= 'XXL display Heading'
+                +div-heading('xl', true)(color=theme)= 'XL display Heading'
+                +div-heading('lg', true)(color=theme)= 'LG display Heading'
+                +div-heading('md', true)(color=theme)= 'MD display Heading'
+                +div-heading('sm', true)(color=theme)= 'SM display Heading'
+                +div-heading('xs', true)(color=theme)= 'XS display Heading'