15 files changed, 273 insertions, 175 deletions

diff --git a/src/.old/objects/_alert.scss b/src/.old/objects/_alert.scss
deleted file mode 100644
index 289ef10..0000000
--- a/src/.old/objects/_alert.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('alert') {
-    @include iro.props-store((
-        --dims: (
-            --border:   1px,
-            --pad-x:    fn.global-dim(--size --250),
-            --pad-y:    fn.global-dim(--size --200),
-            --rounding: 4px,
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --bg:             fn.global-color(--bg-hi2),
-            --border:         fn.global-color(--fg-hi2),
-            --border-primary: fn.global-color(--accent --primary --solid --bg-hi),
-            --border-error:   fn.global-color(--accent --error --solid --bg-hi),
-            --border-success: fn.global-color(--accent --success --solid --bg-hi),
-            --border-warning: fn.global-color(--accent --warning --solid --bg-hi),
-        ),
-    ), 'colors');
-
-    @include iro.props-store((
-        --dims: (
-            --pad-x: fn.global-dim(--size --200),
-            --pad-y: fn.global-dim(--size --150),
-        ),
-    ), 'sm');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-        border:           fn.dim(--border) solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-        color:            fn.global-color(--fg);
-
-        @include iro.bem-modifier('primary') {
-            border-color: fn.color(--border-primary);
-        }
-
-        @include iro.bem-modifier('error') {
-            border-color: fn.color(--border-error);
-        }
-
-        @include iro.bem-modifier('success') {
-            border-color: fn.color(--border-success);
-        }
-
-        @include iro.bem-modifier('warning') {
-            border-color: fn.color(--border-warning);
-        }
-    }
-}
diff --git a/src/.old/objects/_list-group.scss b/src/.old/objects/_list-group.scss
deleted file mode 100644
index d46722e..0000000
--- a/src/.old/objects/_list-group.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('list-group') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x:    fn.global-dim(--size --175),
-            --pad-y:    fn.global-dim(--size --125),
-            --rounding: 3px,
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --bg:     fn.global-color(--bg-hi2),
-            --border: fn.global-color(--obj),
-            --hover:  fn.global-color(--bg),
-            --press:  fn.global-color(--obj-hi),
-        )
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        border:           1px solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-
-        @include iro.bem-elem('item') {
-            padding: fn.dim(--pad-y) fn.dim(--pad-x);
-
-            @include iro.bem-next-twin-elem {
-                border-width: 1px 0 0;
-                border-style: solid;
-                border-color: fn.color(--border);
-            }
-
-            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover {
-                    background-color: fn.color(--hover);
-                }
-
-                &:active {
-                    background-color: fn.color(--press);
-                }
-            }
-        }
-
-        @include iro.bem-modifier('horizontal') {
-            display: flex;
-
-            @include iro.bem-elem('item') {
-                flex: 1 0 auto;
-
-                @include iro.bem-next-twin-elem {
-                    border-top-width:  0;
-                    border-left-width: 1px;
-                }
-            }
-        }
-    }
-}
diff --git a/src/_base.scss b/src/_base.scss
index ce1198d..4932235 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -49,12 +49,9 @@ h3,
 h4,
 h5,
 h6 {
-    margin-block:   fn.dim(--heading --margin-bs) 0;
-    color:          fn.color(--heading);
-    font-size:      fn.dim(--font-size --75);
-    font-weight:    bold;
-    letter-spacing: 1px;
-    text-transform: uppercase;
+    @include mx.heading-medium(--md);
+
+    margin-block: fn.dim(--heading --margin-bs) 0;
 
     & + & {
         margin-block-start: fn.dim(--heading --margin-bs-sibling);
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index a38fb8c..23ee4d4 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -117,9 +117,12 @@
             --margin-bs:         fn.dim(--size --700, null),
             --margin-bs-sibling: fn.dim(--size --325, null),
 
-            --lg: fn.dim(--font-size --400, null),
-            --md: fn.dim(--font-size --75, null),
-            --sm: fn.dim(--font-size --50, null),
+            --xxl: fn.dim(--font-size --300, null),
+            --xl:  fn.dim(--font-size --200, null),
+            --lg:  fn.dim(--font-size --150, null),
+            --md:  fn.dim(--font-size --100, null),
+            --sm:  fn.dim(--font-size --75, null),
+            --xs:  fn.dim(--font-size --50, null),
 
             --display: (
                 --xxl: fn.dim(--font-size --1100, null),
diff --git a/src/_mixins.scss b/src/_mixins.scss
index dc62870..29d792b 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -12,7 +12,7 @@
 }
 
 @mixin heading-strong($size) {
-    color:     fn.foreign-color(--heading, --strong);
+    color:     fn.global-color(--heading);
     font-size: fn.global-dim(list.join(--heading, $size));
 }
 
@@ -21,12 +21,10 @@
         --line-height: null,
         --size:        fn.global-dim(list.join(--heading, $size)),
         --weight:      bold,
-        --transform:   uppercase,
         --spacing:     1px
     ));
 
-    transform: none;
-    color:     fn.foreign-color(--heading, --strong);
+    color: fn.global-color(--heading);
 }
 
 @mixin heading-faint($size) {
@@ -34,10 +32,8 @@
         --line-height: null,
         --size:        fn.global-dim(list.join(--heading, $size)),
         --weight:      500,
-        --transform:   uppercase,
         --spacing:     1px
     ));
 
-    transform: none;
-    color:     fn.foreign-color(--heading, --light);
+    color: fn.global-color(--text-mute);
 }
diff --git a/src/_objects.scss b/src/_objects.scss
index 0497fe0..fc6e556 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -17,11 +17,12 @@
 @use 'objects/side-nav';
 @use 'objects/popover';
 @use 'objects/menu';
+@use 'objects/card';
 // @use 'objects/icon-nav';
-// @use 'objects/backdrop';
+@use 'objects/backdrop';
 // @use 'objects/dialog';
 // @use 'objects/lightbox';
-// @use 'objects/list-group';
+@use 'objects/list-group';
 @use 'objects/table';
-// @use 'objects/alert';
+@use 'objects/alert';
 @use 'objects/palette';
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
new file mode 100644
index 0000000..067c00c
--- /dev/null
+++ b/src/objects/_alert.scss
@@ -0,0 +1,43 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+$themes: 'accent' 'positive' 'negative' 'warning' !default;
+
+@include iro.props-namespace('alert') {
+    @include iro.props-store((
+        --dims: (
+            --border:   fn.global-dim(--border --medium),
+            --pad-i:    fn.global-dim(--size --250),
+            --pad-b:    fn.global-dim(--size --200),
+            --rounding: fn.global-dim(--rounding),
+        ),
+        --colors: (
+            --bg:     fn.global-color(--bg-l2),
+            --border: fn.global-color(--text-mute-more),
+        ),
+    ));
+
+    @each $theme in $themes {
+        @include iro.props-store((
+            --colors: (
+                --#{$theme}: (
+                    --border: fn.global-color(--#{$theme} --700),
+                ),
+            ),
+        ));
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
+        border:           fn.dim(--border) solid fn.color(--border);
+        border-radius:    fn.dim(--rounding);
+        background-color: fn.color(--bg);
+
+        @each $theme in $themes {
+            @include iro.bem-modifier($theme) {
+                border-color: fn.color(--#{$theme} --border);
+            }
+        }
+    }
+}
diff --git a/src/.old/objects/_backdrop.scss b/src/objects/_backdrop.scss
index ac23d63..d0eaf52 100644
--- a/src/.old/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -7,27 +7,20 @@
             --z-index: 10000,
             --blur:    2em,
         ),
-    ), 'dims');
-
-    @include iro.props-store((
         --colors: (
             --bg: rgba(#000, .75),
         ),
-    ), 'colors');
+    ));
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          flex;
         position:         fixed;
         z-index:          fn.dim(--z-index);
-        top:              0;
-        right:            0;
-        bottom:           0;
-        left:             0;
+        inset:            0;
         box-sizing:       border-box;
         flex-direction:   column;
         overflow:         auto;
         background-color: fn.color(--bg);
-        color:            fn.global-color(--fg);
         backdrop-filter:  blur(fn.dim(--blur));
     }
 }
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
new file mode 100644
index 0000000..07256cb
--- /dev/null
+++ b/src/objects/_card.scss
@@ -0,0 +1,88 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('card') {
+    @include iro.props-store((
+        --dims: (
+            --border:   fn.global-dim(--border --thin),
+            --divider:  fn.global-dim(--border --thin),
+            --pad-i:    fn.global-dim(--size --300),
+            --pad-b:    fn.global-dim(--size --250),
+            --spacing:  fn.global-dim(--size --200),
+            --rounding: fn.global-dim(--rounding),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --bg:      fn.global-color(--bg-l2),
+            --border:  fn.global-color(--border-mute),
+            --divider: fn.global-color(--border-mute),
+
+            --hover: (
+                --border: fn.global-color(--border),
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          block;
+        border:           fn.dim(--border) solid fn.color(--border);
+        border-radius:    fn.dim(--rounding);
+        background-color: fn.color(--bg);
+
+        @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+            &:hover,
+            &:focus-visible,
+            &:active {
+                border-color: fn.color(--hover --border);
+            }
+
+            &:focus-visible {
+                border-color: fn.color(--key-focus --border);
+                outline:      fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border));
+                box-shadow:   0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            }
+        }
+
+        @include iro.bem-elem('thumbnail') {
+            position: relative;
+            width:    100%;
+            height:   100%;
+        }
+
+        @include iro.bem-elem('thumbnail-img') {
+            display:    block;
+            object-fit: cover;
+            width:      100%;
+            height:     100%;
+        }
+
+        @include iro.bem-elem('body') {
+            padding-block:  fn.dim(--pad-b);
+            padding-inline: fn.dim(--pad-i);
+        }
+
+        @include iro.bem-elem('footer') {
+            padding-block:      0 fn.dim(--pad-b);
+            padding-inline:     fn.dim(--pad-i);
+            margin-block-start: calc(-1 * fn.dim(--pad-b));
+
+            &::before {
+                content:          '';
+                display:          block;
+                height:           fn.dim(--divider);
+                margin-block:     fn.dim(--spacing);
+                background-color: fn.color(--divider);
+            }
+        }
+    }
+}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 6dcf7e9..41b33e6 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -4,15 +4,15 @@
 @use '../config';
 @use 'include-media/dist/include-media' as media;
 
+$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs';
+
 @include iro.props-namespace('heading') {
     @include iro.props-store((
         --dims: (
             --offset: -.02em,
         ),
         --colors: (
-            --light:  fn.global-color(--text-mute),
-            --strong: fn.global-color(--heading),
-            --bg:     fn.global-color(--bg-l2),
+            --bg: fn.global-color(--bg-l2),
         ),
     ));
 
@@ -44,10 +44,22 @@
         }
 
         @include iro.bem-modifier('xl') {
+            @include mx.heading-strong(--md);
+        }
+
+        @include iro.bem-modifier('lg') {
             @include mx.heading-medium(--md);
         }
 
-        @include iro.bem-modifier('lg', 'md', 'sm', 'xs') {
+        @include iro.bem-modifier('md') {
+            @include mx.heading-medium(--md);
+        }
+
+        @include iro.bem-modifier('sm') {
+            @include mx.heading-faint(--sm);
+        }
+
+        @include iro.bem-modifier('xs') {
             @include mx.heading-faint(--sm);
         }
 
diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss
new file mode 100644
index 0000000..a346828
--- /dev/null
+++ b/src/objects/_list-group.scss
@@ -0,0 +1,61 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('list-group') {
+    @include iro.props-store((
+        --dims: (
+            --pad-i:    fn.global-dim(--size --175),
+            --pad-b:    fn.global-dim(--size --125),
+            --rounding: fn.global-dim(--rounding),
+            --border:   fn.global-dim(--border --thin),
+        ),
+        --colors: (
+            --bg:     fn.global-color(--base --75),
+            --border: fn.global-color(--border),
+            --hover:  fn.global-color(--border-mute),
+            --active: fn.global-color(--border),
+        )
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        border:           fn.dim(--border) solid fn.color(--border);
+        border-radius:    fn.dim(--rounding);
+        background-color: fn.color(--bg);
+
+        @include iro.bem-elem('item') {
+            padding-block:  fn.dim(--pad-b);
+            padding-inline: fn.dim(--pad-i);
+
+            @include iro.bem-next-twin-elem {
+                border-width:             0;
+                border-block-start-width: fn.dim(--border);
+                border-style:             solid;
+                border-color:             fn.color(--border);
+            }
+
+            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:focus-visible {
+                    background-color: fn.color(--hover);
+                }
+
+                &:active {
+                    background-color: fn.color(--active);
+                }
+            }
+        }
+
+        @include iro.bem-modifier('horizontal') {
+            display: flex;
+
+            @include iro.bem-elem('item') {
+                flex: 1 0 auto;
+
+                @include iro.bem-next-twin-elem {
+                    border-block-start-width:  0;
+                    border-inline-start-width: fn.dim(--border);
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index b1350ba..0f691a2 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable length-zero-no-unit */
+
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
@@ -15,12 +17,12 @@
                 --pad-i:    fn.global-dim(--size --150),
                 --pad-b:    fn.global-dim(--size --100),
                 --rounding: 0em,
-            ),
             
-            --key-focus: (
-                --border:        fn.global-dim(--key-focus --border),
-                --border-offset: fn.global-dim(--key-focus --border-offset),
-                --outline:       fn.global-dim(--key-focus --outline),
+                --key-focus: (
+                    --border:        fn.global-dim(--key-focus --border),
+                    --border-offset: fn.global-dim(--key-focus --border-offset),
+                    --outline:       fn.global-dim(--key-focus --outline),
+                ),
             ),
         ),
         --colors: (
@@ -68,11 +70,13 @@
         }
 
         @include iro.bem-elem('item') {
-            padding-block:  calc(fn.dim(--item --pad-b) - 2px);
-            padding-inline: calc(fn.dim(--item --pad-i) - 2px);
-            border:         2px solid transparent;
-            border-radius:  fn.dim(--item --rounding);
-            color:          fn.color(--item --disabled --label);
+            padding-block:   fn.dim(--item --pad-b);
+            padding-inline:  fn.dim(--item --pad-i);
+            margin:          calc(-1 * fn.dim(--item --key-focus --outline));
+            border:          fn.dim(--item --key-focus --outline) solid transparent;
+            border-radius:   calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline));
+            color:           fn.color(--item --disabled --label);
+            background-clip: padding-box;
 
             &:link,
             &:visited,
@@ -88,6 +92,11 @@
                     background-color: fn.color(--item --active --bg);
                     color:            fn.color(--item --active --label);
                 }
+
+                &:focus-visible {
+                    outline:    fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline);
+                }
             }
 
             @include iro.bem-next-elem('header') {
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 4c5305e..cadd395 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -17,7 +17,7 @@ $themes: 'accent' 'positive' 'negative' 'warning' !default;
     @each $theme in $themes {
         @include iro.props-store((
             --colors: (
-                --#{$theme}: fn.global-color(--#{$theme}-static --800),
+                --#{$theme}: fn.global-color(--#{$theme} --700),
             ),
         ));
     }
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index cccf956..ea243a2 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -9,19 +9,20 @@
             --pad-b:    fn.global-dim(--size --125),
             --rounding: fn.global-dim(--rounding),
             --border:   fn.global-dim(--border --thin),
-            --50: (
+
+            --sm: (
                 --pad-b: fn.global-dim(--size --75),
             )
         ),
         --colors: (
-            --border:  fn.global-color(--border),
-            --heading: fn.global-color(--heading),
-            --hover:   fn.global-color(--border-mute),
-            --press:   fn.global-color(--border),
+            --border:   fn.global-color(--border),
+            --heading:  fn.global-color(--heading),
+            --hover:    fn.global-color(--border-mute),
+            --active:   fn.global-color(--border),
             --box: (
-                --bg:    fn.global-color(--base --50),
-                --hover: fn.global-color(--bg-base),
-                --press: fn.global-color(--border-mute),
+                --bg:     fn.global-color(--base --50),
+                --hover:  fn.global-color(--bg-base),
+                --active: fn.global-color(--border-mute),
             )
         )
     ));
@@ -136,7 +137,7 @@
     
                 &:active {
                     @include iro.bem-elem('cell') {
-                        background-color: fn.color(--press);
+                        background-color: fn.color(--active);
                     }
                 }
             }
@@ -151,16 +152,16 @@
         
                     &:active {
                         @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --press);
+                            background-color: fn.color(--box --active);
                         }
                     }
                 }
             }
         }
 
-        @include iro.bem-modifier('50') {
+        @include iro.bem-modifier('sm') {
             @include iro.bem-elem('head-cell', 'cell') {
-                padding-block: fn.dim(--50 --pad-b);
+                padding-block: fn.dim(--sm --pad-b);
             }
         }
     }
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index c5033e8..9593792 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -21,20 +21,29 @@
 
 
         h1 {
-            @include mx.heading-strong(--lg);
+            @include mx.heading-strong(--xxl);
         }
 
         h2 {
+            @include mx.heading-strong(--xl);
+        }
+
+        h3 {
+            @include mx.heading-medium(--lg);
+        }
+
+        h4 {
             @include mx.heading-medium(--md);
         }
 
-        h3,
-        h4,
-        h5,
-        h6 {
+        h5 {
             @include mx.heading-faint(--sm);
         }
 
+        h6 {
+            @include mx.heading-faint(--xs);
+        }
+
         @include iro.bem-elem('highlight') {
             background-image: linear-gradient(
                 to top,