From d23a2cf25ccc33f49d73ee3da2f775c0d4fa0784 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 27 Jun 2024 09:56:02 +0200
Subject: Update

---
 src/.old/objects/_alert.scss       | 55 ------------------------
 src/.old/objects/_backdrop.scss    | 33 --------------
 src/.old/objects/_list-group.scss  | 60 --------------------------
 src/_base.scss                     |  9 ++--
 src/_declare-vars.scss             |  9 ++--
 src/_mixins.scss                   | 10 ++---
 src/_objects.scss                  |  7 +--
 src/objects/_alert.scss            | 43 +++++++++++++++++++
 src/objects/_backdrop.scss         | 26 +++++++++++
 src/objects/_card.scss             | 88 ++++++++++++++++++++++++++++++++++++++
 src/objects/_heading.scss          | 20 +++++++--
 src/objects/_list-group.scss       | 61 ++++++++++++++++++++++++++
 src/objects/_menu.scss             | 29 ++++++++-----
 src/objects/_status-indicator.scss |  2 +-
 src/objects/_table.scss            | 25 +++++------
 src/scopes/_headings.scss          | 19 +++++---
 tpl/index.pug                      |  3 ++
 tpl/objects/card.pug               | 29 +++++++++++++
 tpl/objects/table.pug              |  2 +-
 tpl/views/alert.pug                |  6 +--
 tpl/views/card.pug                 |  9 ++++
 tpl/views/table.pug                |  2 +-
 22 files changed, 343 insertions(+), 204 deletions(-)
 delete mode 100644 src/.old/objects/_alert.scss
 delete mode 100644 src/.old/objects/_backdrop.scss
 delete mode 100644 src/.old/objects/_list-group.scss
 create mode 100644 src/objects/_alert.scss
 create mode 100644 src/objects/_backdrop.scss
 create mode 100644 src/objects/_card.scss
 create mode 100644 src/objects/_list-group.scss
 create mode 100644 tpl/objects/card.pug
 create mode 100644 tpl/views/card.pug

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/_backdrop.scss b/src/.old/objects/_backdrop.scss
deleted file mode 100644
index ac23d63..0000000
--- a/src/.old/objects/_backdrop.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('backdrop') {
-    @include iro.props-store((
-        --dims: (
-            --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;
-        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/.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/objects/_backdrop.scss b/src/objects/_backdrop.scss
new file mode 100644
index 0000000..d0eaf52
--- /dev/null
+++ b/src/objects/_backdrop.scss
@@ -0,0 +1,26 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('backdrop') {
+    @include iro.props-store((
+        --dims: (
+            --z-index: 10000,
+            --blur:    2em,
+        ),
+        --colors: (
+            --bg: rgba(#000, .75),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          flex;
+        position:         fixed;
+        z-index:          fn.dim(--z-index);
+        inset:            0;
+        box-sizing:       border-box;
+        flex-direction:   column;
+        overflow:         auto;
+        background-color: fn.color(--bg);
+        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,
diff --git a/tpl/index.pug b/tpl/index.pug
index d3e9daf..b6af02b 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -21,6 +21,7 @@ include objects/action-button.pug
 include objects/overflow-button.pug
 include objects/status-indicator.pug
 include objects/avatar.pug
+include objects/card.pug
 include objects/popover.pug
 include objects/menu.pug
 include objects/side-nav.pug
@@ -72,6 +73,7 @@ include views/action-button.pug
 include views/overflow-button.pug
 include views/status-indicator.pug
 include views/avatar.pug
+include views/card.pug
 include views/popover.pug
 include views/menu.pug
 include views/side-nav.pug
@@ -118,6 +120,7 @@ html
             +view-overflow-button
             +view-status-indicator
             +view-avatar
+            +view-card
             +view-side-nav
             +view-popover
             +view-menu
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
new file mode 100644
index 0000000..d6516be
--- /dev/null
+++ b/tpl/objects/card.pug
@@ -0,0 +1,29 @@
+mixin card
+    - const slots = {}
+
+    mixin slot(key)
+        - slots[key] = block
+
+    -
+        block ? block() : undefined 
+
+        let classes = {
+            'o-card': true,
+        }
+
+    if attributes.href
+        a(href=attributes.href class=classes)
+            if slots.body
+                .o-card__body
+                    - slots.body()
+            if slots.footer
+                .o-card__footer
+                    - slots.footer()
+    else
+        div(class=classes)
+            if slots.body
+                .o-card__body
+                    - slots.body()
+            if slots.footer
+                .o-card__footer
+                    - slots.footer()
diff --git a/tpl/objects/table.pug b/tpl/objects/table.pug
index e635589..c8ff17e 100644
--- a/tpl/objects/table.pug
+++ b/tpl/objects/table.pug
@@ -5,7 +5,7 @@ mixin table
             'o-table--flush':       attributes.flush,
             'o-table--box':         attributes.box,
             'o-table--interactive': attributes.interactive,
-            'o-table--50':          attributes.size50,
+            'o-table--sm':          attributes.sm,
         }
 
     table(class=classes)
diff --git a/tpl/views/alert.pug b/tpl/views/alert.pug
index c176279..02cf508 100644
--- a/tpl/views/alert.pug
+++ b/tpl/views/alert.pug
@@ -3,10 +3,10 @@ mixin view-alert
         .c-box
             +alert= loremIpsum
             br
-            +alert('primary')= loremIpsum
+            +alert('accent')= loremIpsum
             br
-            +alert('error')= loremIpsum
+            +alert('negative')= loremIpsum
             br
-            +alert('success')= loremIpsum
+            +alert('positive')= loremIpsum
             br
             +alert('warning')= loremIpsum
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
new file mode 100644
index 0000000..0b88b0e
--- /dev/null
+++ b/tpl/views/card.pug
@@ -0,0 +1,9 @@
+mixin view-card 
+    +view('card', 'Card')
+        .c-box
+            +card(href='#')
+                +slot('body')
+                    h1= 'XS Heading'
+                    p= loremIpsum
+                +slot('footer')
+                    = 'Footer'
diff --git a/tpl/views/table.pug b/tpl/views/table.pug
index f74a4cd..6ed7263 100644
--- a/tpl/views/table.pug
+++ b/tpl/views/table.pug
@@ -76,7 +76,7 @@ mixin view-table
                         +table-cell= 'Row 4,3'
 
         .c-box
-            +table(box=true, size50=true)
+            +table(box=true sm=true)
                 +table-head
                     +table-row 
                         +table-head-cell= 'Title'
-- 
cgit v1.2.3-54-g00ecf