8 files changed, 130 insertions, 3 deletions

diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 0ae68c1..05d99a8 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -24,5 +24,17 @@
                 @include bem.modifier('pad-b') {
                         padding-block: props.get(vars.$pad-b);
                 }
+
+                @each $mod, $pad-i, $pad-b in vars.$sizes {
+                        @include bem.modifier($mod) {
+                                @include bem.modifier('pad-i') {
+                                        padding-inline: props.get($pad-i);
+                                }
+
+                                @include bem.modifier('pad-b') {
+                                        padding-block: props.get($pad-b);
+                                }
+                        }
+                }
         }
 }
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 8f0cef6..784203f 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -12,7 +12,7 @@ $fixed-sizes: (
         'fixed':     $fixed
 ) !default;
 
-$pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default;
+$pad-i: props.def(--l-container--pad-i, props.get(core.$size--600)) !default;
 $pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default;
 
 $pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default;
@@ -20,3 +20,17 @@ $pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !d
 
 $pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default;
 $pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default;
+
+$sm--pad-i: props.def(--l-container--sm--pad-i, props.get(core.$size--300)) !default;
+$sm--pad-b: props.def(--l-container--sm--pad-b, props.get(core.$size--800)) !default;
+
+$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), 'sm') !default;
+$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), 'sm') !default;
+
+$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), 'xs') !default;
+$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), 'xs') !default;
+
+$sizes: (
+        'sm' $sm--pad-i $sm--pad-b,
+        'md' $sm--pad-i $sm--pad-b,
+) !default;
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index ebfba10..1e6448a 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -37,3 +37,6 @@ $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.g
 
 $quiet--image-color:        props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
 $quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
+
+$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), 'sm') !default;
+$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), 'sm') !default;
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/objects/_tabbar.scss b/src/objects/_tabbar.scss
index a9daaae..eee38e9 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -18,8 +18,8 @@
 
                 &::after {
                         display:            block;
-                        block-size:         props.get(vars.$indicator--width);
-                        margin-block-start: calc(-1 * props.get(vars.$indicator--width));
+                        block-size:         props.get(vars.$border--width);
+                        margin-block-start: calc(-1 * props.get(vars.$border--width));
                         content:            '';
                         background-color:   props.get(vars.$railing--bg-color);
                 }
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
index 4095629..3cf01fd 100644
--- a/src/objects/_tabbar.vars.scss
+++ b/src/objects/_tabbar.vars.scss
@@ -8,6 +8,7 @@ $rounding:   props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !def
 $spacing:    props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
 $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
 
+$border--width:    props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default;
 $indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; 
 
 $key-focus--border-width:  props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
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);
+                                                }
+                                        }
+                                }
+                        }
+                }
         }
 }