From 6b0fcac695aa7a5517f6f53cec50da493acc4582 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 22 Jun 2024 19:30:00 +0200
Subject: Update

---
 .stylelintrc.json                 |   2 +-
 src/.old/objects/_badge.scss      | 173 ---------------------------------
 src/.old/objects/_button.scss     | 179 -----------------------------------
 src/.old/objects/_emoji.scss      |  74 ---------------
 src/.old/objects/_icon.scss       |  26 -----
 src/.old/scopes/_blockquotes.scss |  35 -------
 src/.old/scopes/_lists.scss       |  67 -------------
 src/_base.scss                    |   9 +-
 src/_config.scss                  | 110 ++++++++++++++-------
 src/_declare-vars.scss            |  29 +++---
 src/_functions.scss               |  16 +++-
 src/_objects.scss                 |   8 +-
 src/_scopes.scss                  |   4 +-
 src/_utils.scss                   |  24 ++---
 src/layouts/_container.scss       |   6 +-
 src/layouts/_media.scss           |   6 +-
 src/layouts/_message-group.scss   |  14 +--
 src/objects/_badge.scss           | 194 ++++++++++++++++++++++++++++++++++++++
 src/objects/_button.scss          | 173 +++++++++++++++++++++++++++++++++
 src/objects/_divider.scss         |  16 ++--
 src/objects/_emoji.scss           |  73 ++++++++++++++
 src/objects/_icon.scss            |  26 +++++
 src/objects/_palette.scss         |  22 ++++-
 src/scopes/_blockquotes.scss      |  34 +++++++
 src/scopes/_code.scss             |   2 +-
 src/scopes/_links.scss            |  27 +++---
 src/scopes/_lists.scss            |  66 +++++++++++++
 src_demo/components/_sidebar.scss |   6 +-
 static/drgn.png                   | Bin 22312 -> 17913 bytes
 static/script.js                  |  31 ++----
 tpl/objects/badge.pug             |   1 +
 tpl/objects/palette.pug           |   3 +-
 tpl/views/badge.pug               |  88 ++++++++++-------
 tpl/views/button.pug              |  55 +++++------
 tpl/views/palette.pug             |   3 +
 35 files changed, 846 insertions(+), 756 deletions(-)
 delete mode 100644 src/.old/objects/_badge.scss
 delete mode 100644 src/.old/objects/_button.scss
 delete mode 100644 src/.old/objects/_emoji.scss
 delete mode 100644 src/.old/objects/_icon.scss
 delete mode 100644 src/.old/scopes/_blockquotes.scss
 delete mode 100644 src/.old/scopes/_lists.scss
 create mode 100644 src/objects/_badge.scss
 create mode 100644 src/objects/_button.scss
 create mode 100644 src/objects/_emoji.scss
 create mode 100644 src/objects/_icon.scss
 create mode 100644 src/scopes/_blockquotes.scss
 create mode 100644 src/scopes/_lists.scss

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 0ed9389..622a3c3 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -4,7 +4,7 @@
         "stylelint-order"
     ],
     "rules": {
-        "max-nesting-depth": 4,
+        "max-nesting-depth": 7,
         "selector-class-pattern": [
             "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$",
             {
diff --git a/src/.old/objects/_badge.scss b/src/.old/objects/_badge.scss
deleted file mode 100644
index 0f73382..0000000
--- a/src/.old/objects/_badge.scss
+++ /dev/null
@@ -1,173 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('badge') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x:     fn.px-to-em(4px),
-            --pad-y:     0,
-            --rounding:  3px,
-            --fixed-100: 1em,
-            --fixed-200: 1.5em,
-
-            --200: (
-                --pad-x: fn.px-to-em(6px),
-                --pad-y: fn.px-to-em(2px),
-            ),
-            --300: (
-                --pad-x: fn.px-to-em(10px),
-                --pad-y: fn.px-to-em(6px),
-            ),
-
-            --pill: (
-                --pad-x: fn.px-to-em(9px),
-
-                --200: (
-                    --pad-x: fn.px-to-em(10px),
-                ),
-                --300: (
-                    --pad-x: fn.px-to-em(16px),
-                ),
-            ),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --bg:    fn.global-color(--obj-hi),
-            --label: fn.global-color(--fg-lo),
-            --hover: (
-                --bg: fn.global-color(--obj),
-            ),
-            --active: (
-                --bg: fn.global-color(--obj-lo),
-            ),
-            --key-focus: (
-                --border: fn.global-color(--focus --fill),
-                --shadow: fn.global-color(--focus --shadow),
-            ),
-
-            --primary: (
-                --bg:    fn.global-color(--fg-lo),
-                --label: fn.global-color(--bg),
-                --hover: (
-                    --bg: fn.global-color(--fg),
-                ),
-                --active: (
-                    --bg: fn.global-color(--fg),
-                ),
-            ),
-
-            --accent: (
-                --bg:    fn.global-color(--accent --primary --solid --bg),
-                --label: fn.global-color(--accent --primary --solid --fg),
-                --hover: (
-                    --bg: fn.global-color(--accent --primary --solid --obj),
-                ),
-                --active: (
-                    --bg: fn.global-color(--accent --primary --solid --obj-lo),
-                ),
-            ),
-
-            --accent-quiet: (
-                --bg:    fn.global-color(--accent --primary --quiet --bg),
-                --label: fn.global-color(--accent --primary --quiet --fg),
-                --hover: (
-                    --bg: fn.global-color(--accent --primary --quiet --obj),
-                ),
-                --active: (
-                    --bg: fn.global-color(--accent --primary --quiet --obj-lo),
-                ),
-            )
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          inline-block;
-        margin-top:       -.5em;
-        margin-bottom:    -.5em;
-        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-        color:            fn.color(--label);
-        line-height:      fn.global-dim(--font --standard --line-height);
-        text-align:       center;
-        text-decoration:  none;
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:hover {
-                background-color: fn.color(--hover --bg);
-            }
-
-            &:active {
-                background-color: fn.color(--active --bg);
-            }
-        }
-    
-        @each $variant in 'primary' 'accent' 'accent-quiet' {
-            @include iro.bem-modifier($variant) {
-                background-color: fn.color(--#{$variant} --bg);
-                color:            fn.color(--#{$variant} --label);
-    
-                &:link,
-                &:visited,
-                &:enabled {
-                    &:hover {
-                        background-color: fn.color(--#{$variant} --hover --bg);
-                    }
-    
-                    &:active {
-                        background-color: fn.color(--#{$variant} --active --bg);
-                    }
-                }
-            }
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    background-color: transparent;
-                    box-shadow:       inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
-                    color:            currentColor;
-                }
-            }
-        }
-    
-        @include iro.bem-modifier('pill') {
-            padding-right: fn.dim(--pill --pad-x);
-            padding-left:  fn.dim(--pill --pad-x);
-            border-radius: 10em;
-        }
-    
-        @each $size in '200' '300' {
-            @include iro.bem-modifier($size) {
-                padding: fn.dim(--#{$size} --pad-y) fn.dim(--#{$size} --pad-x);
-        
-                @include iro.bem-modifier('pill') {
-                    padding-right: fn.dim(--pill --#{$size} --pad-x);
-                    padding-left:  fn.dim(--pill --#{$size} --pad-x);
-                }
-            }
-        }
-    
-        @include iro.bem-modifier('fixed-100') {
-            width: fn.dim(--fixed-100);
-        }
-    
-        @include iro.bem-modifier('fixed-200') {
-            width: fn.dim(--fixed-200);
-        }
-    
-        @include iro.bem-modifier('sm') {
-            font-size: fn.global-dim(--font-size --75);
-        }
-    
-        @include iro.bem-modifier('xs') {
-            font-size: fn.global-dim(--font-size --50);
-        }
-    }
-}
diff --git a/src/.old/objects/_button.scss b/src/.old/objects/_button.scss
deleted file mode 100644
index 7cc24fa..0000000
--- a/src/.old/objects/_button.scss
+++ /dev/null
@@ -1,179 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@mixin button-variant($variant) {
-    &:link,
-    &:visited,
-    &:enabled {
-        border-color:     fn.color(--#{$variant} --bg);
-        background-color: fn.color(--#{$variant} --bg);
-        box-shadow:       fn.color(--#{$variant} --shadow);
-        color:            fn.color(--#{$variant} --label);
-    }
-    
-    @include iro.bem-modifier('outline') {
-        &:link,
-        &:visited,
-        &:enabled {
-            background-color: transparent;
-            box-shadow:       none;
-            color:            fn.color(--#{$variant} --outline-label);
-        }
-    }
-
-    &:link,
-    &:visited,
-    &:enabled {
-        &:hover {
-            border-color:     fn.color(--#{$variant} --hover --bg);
-            background-color: fn.color(--#{$variant} --hover --bg);
-            box-shadow:       fn.color(--#{$variant} --hover --shadow);
-            color:            fn.color(--#{$variant} --hover --label);
-        }
-
-        &:active {
-            border-color:     fn.color(--#{$variant} --active --bg);
-            background-color: fn.color(--#{$variant} --active --bg);
-            box-shadow:       fn.color(--#{$variant} --active --shadow);
-            color:            fn.color(--#{$variant} --active --label);
-        }
-    }
-}
-
-@include iro.props-namespace('button') {
-    @include iro.props-store((
-        --dims: (
-            --line-height: 1.4,
-            --pad-x:       fn.global-dim(--size --225),
-            --pad-y:       fn.global-dim(--size --65),
-            --rounding:    10em,
-
-            --lg: (
-                --pad-x: fn.global-dim(--size --300),
-                --pad-y: fn.global-dim(--size --100),
-            ),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --any: (
-                --disabled: (
-                    --bg:     fn.global-color(--obj-hi),
-                    --label:  fn.global-color(--fg-hi3),
-                    --shadow: 0 0 0 0 transparent,
-                ),
-                --key-focus: (
-                    --bg:     transparent,
-                    --label:  fn.global-color(--focus --text),
-                    --border: fn.global-color(--focus --fill),
-                    --shadow: fn.global-color(--focus --shadow),
-                ),
-            ),
-            --accent: (
-                --bg:            fn.global-color(--accent --primary --solid --bg),
-                --label:         fn.global-color(--accent --primary --solid --fg),
-                --outline-label: fn.global-color(--accent --primary --solid --obj),
-                --shadow:        0 0 0 0 transparent,
-
-                --hover: (
-                    --bg:     fn.global-color(--accent --primary --solid --obj),
-                    --label:  fn.global-color(--accent --primary --solid --fg),
-                    --shadow: 0 0 0 0 transparent,
-                ),
-                --active: (
-                    --bg:     fn.global-color(--accent --primary --solid --obj-lo),
-                    --label:  fn.global-color(--accent --primary --solid --fg),
-                    --shadow: 0 0 0 0 transparent,
-                ),
-            ),
-            --primary: (
-                --bg:            fn.global-color(--fg),
-                --label:         fn.global-color(--bg-hi2),
-                --outline-label: fn.global-color(--fg),
-                --shadow:        0 0 0 0 transparent,
-
-                --hover: (
-                    --bg:     fn.global-color(--fg-lo),
-                    --label:  fn.global-color(--bg-hi2),
-                    --shadow: 0 0 0 0 transparent,
-                ),
-                --active: (
-                    --bg:     fn.global-color(--fg-lo),
-                    --label:  fn.global-color(--bg-hi2),
-                    --shadow: 0 0 0 0 transparent,
-                ),
-            ),
-            --secondary: (
-                --bg:            fn.global-color(--obj-hi),
-                --label:         fn.global-color(--fg),
-                --outline-label: fn.global-color(--fg),
-                --shadow:        0 0 0 0 transparent,
-
-                --hover: (
-                    --bg:     fn.global-color(--obj),
-                    --label:  fn.global-color(--fg-lo),
-                    --shadow: 0 0 0 0 transparent,
-                ),
-                --active: (
-                    --bg:     fn.global-color(--obj-lo),
-                    --label:  fn.global-color(--fg-lo),
-                    --shadow: 0 0 0 0 transparent,
-                ),
-            ),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          inline-block;
-        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-        border:           2px solid transparent;
-        border-radius:    fn.dim(--rounding);
-        border-color:     fn.color(--any --disabled --bg);
-        background-color: fn.color(--any --disabled --bg);
-        box-shadow:       fn.color(--any --disabled --shadow);
-        color:            fn.color(--any --disabled --label);
-        font-weight:      500;
-        line-height:      fn.dim(--line-height);
-        text-align:       center;
-        text-decoration:  none;
-        vertical-align:   top;
-    
-        @include iro.bem-modifier('block') {
-            display: block;
-        }
-    
-        @include iro.bem-modifier('outline') {
-            background-color: transparent;
-            box-shadow:       none;
-        }
-
-        @include iro.bem-modifier('lg') {
-            padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x);
-        }
-    
-        @include button-variant('secondary');
-    
-        @each $mod in 'accent' 'primary' {
-            @include iro.bem-modifier($mod) {
-                @include button-variant($mod);
-            }
-        }
-
-        @include iro.bem-at-theme('keyboard') {
-            &:focus {
-                border-color:     fn.color(--any --key-focus --border);
-                background-color: fn.color(--any --key-focus --bg);
-                box-shadow:       fn.color(--any --key-focus --shadow);
-                color:            fn.color(--any --key-focus --label);
-            }
-        }
-    
-        @include iro.bem-modifier('round') {
-            width:         calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
-            padding-right: 0;
-            padding-left:  0;
-            border-radius: 100em;
-        }
-    }
-}
diff --git a/src/.old/objects/_emoji.scss b/src/.old/objects/_emoji.scss
deleted file mode 100644
index 8d17212..0000000
--- a/src/.old/objects/_emoji.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use 'sass:math';
-
-@include iro.props-namespace('emoji') {
-    @include iro.props-store((
-        --dims: (
-            --size:     calc(1 / 14 * 18em),
-            --pad:      .3em,
-            --rounding: 3px,
-            --zoom:     3,
-            --valign:   -.25em,
-
-            --125: (
-                --size:   calc(1 / 14 * 23em),
-                --valign: -.45em,
-            ),
-
-            --150: (
-                --size:   calc(1 / 14 * 28em),
-                --valign: -.65em,
-            ),
-
-            --200: (
-                --size:   calc(1 / 14 * 38em),
-                --valign: -1em,
-            )
-        )
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --bg: fn.global-color(--obj-hi),
-        )
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-block;
-        position:       relative;
-        width:          calc(fn.dim(--size));
-        height:         calc(fn.dim(--size));
-        margin:         calc(-1 * fn.dim(--pad));
-        padding:        calc(fn.dim(--pad));
-        vertical-align: fn.dim(--valign);
-        object-fit:     contain;
-
-        @include iro.bem-modifier('icon') {
-            margin:         calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
-            vertical-align: fn.foreign-dim(--icon, --valign);
-        }
-
-        @each $size in '125' '150' '200' {
-            @include iro.bem-modifier($size) {
-                width:          fn.dim(--#{$size} --size);
-                height:         fn.dim(--#{$size} --size);
-                vertical-align: fn.dim(--#{$size} --valign);
-
-                @include iro.bem-modifier('icon') {
-                    margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
-                }
-            }
-        }
-
-        @include iro.bem-modifier('zoomable') {
-            transition:    transform .2s ease, background-color .2s ease;
-            border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
-
-            &:hover {
-                transform:        scale(fn.dim(--zoom));
-                background-color: fn.color(--bg);
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_icon.scss b/src/.old/objects/_icon.scss
deleted file mode 100644
index 5c4bfab..0000000
--- a/src/.old/objects/_icon.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('icon') {
-    @include iro.props-store((
-        --dims: (
-            --stroke:  1.5px,
-            --size:    calc(1 / 14 * 16em),
-            --valign:  -.2em,
-        )
-    ), 'dims');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:         inline;
-        width:           fn.dim(--size);
-        height:          fn.dim(--size);
-        stroke-width:    fn.dim(--stroke);
-        stroke-linecap:  round;
-        stroke-linejoin: round;
-        vertical-align:  fn.dim(--valign);
-
-        @include iro.bem-modifier('block') {
-            display: block;
-        }
-    }
-}
diff --git a/src/.old/scopes/_blockquotes.scss b/src/.old/scopes/_blockquotes.scss
deleted file mode 100644
index 5383bd7..0000000
--- a/src/.old/scopes/_blockquotes.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('blockquotes') {
-    @include iro.props-store((
-        --dims: (
-            --indent:     fn.global-dim(--list --indent),
-            --margin-top: fn.global-dim(--paragraph --margin-top),
-
-            --compact: (
-                --indent: fn.global-dim(--list --compact-indent),
-            ),
-        )
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--obj),
-        )
-    ), 'colors');
-
-    @include iro.bem-scope(iro.props-namespace()) {
-        blockquote {
-            margin:       fn.dim(--margin-top) 0 0 1px;
-            padding-left: calc(fn.dim(--indent) - 3px);
-            border-left:  3px solid fn.color(--border);
-        }
-
-        @include iro.bem-modifier('compact') {
-            blockquote {
-                padding-left: calc(fn.dim(--compact --indent) - 3px);
-            }
-        }
-    }
-}
diff --git a/src/.old/scopes/_lists.scss b/src/.old/scopes/_lists.scss
deleted file mode 100644
index 1322f2d..0000000
--- a/src/.old/scopes/_lists.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('lists') {
-    @include iro.props-store((
-        --dims: (
-            --indent:     calc(fn.global-dim(--list --indent) + 1em),
-            --margin-top: fn.global-dim(--paragraph --margin-top),
-
-            --compact: (
-                --indent: fn.global-dim(--list --compact-indent),
-            ),
-        )
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--obj-hi),
-        )
-    ), 'colors');
-
-    @include iro.bem-scope(iro.props-namespace()) {
-        ul,
-        ol {
-            margin-top:   fn.dim(--margin-top);
-            padding-left: fn.dim(--indent);
-
-            ul,
-            ol {
-                margin-top: 0;
-            }
-        }
-
-        ul {
-            list-style: disc;
-        }
-
-        ol {
-            list-style: decimal;
-        }
-
-        dl {
-            margin:  fn.dim(--margin-top) 0 0;
-            padding: 0;
-        }
-
-        dt {
-            color:       fn.global-color(--fg-lo);
-            font-weight: bold;
-        }
-
-        dd {
-            margin: 0 0 0 fn.dim(--indent);
-        }
-
-        @include iro.bem-modifier('compact') {
-            ul,
-            ol {
-                padding-left: calc(fn.dim(--compact --indent) - 3px);
-            }
-
-            dd {
-                margin-left: calc(fn.dim(--compact --indent) - 3px);
-            }
-        }
-    }
-}
diff --git a/src/_base.scss b/src/_base.scss
index b4ce1ae..f55e94b 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -10,7 +10,7 @@ html {
 
 html,
 body {
-    height: 100%;
+    block-size: 100%;
 }
 
 body {
@@ -90,7 +90,8 @@ li {
     padding: 0;
 }
 
-:focus {
+:focus,
+:focus-visible {
     outline: 0;
 }
 
@@ -137,11 +138,11 @@ textarea {
 }
 
 textarea {
-    height: calc(1em * fn.dim(--font --standard --line-height));
+    block-size: calc(1em * fn.dim(--font --standard --line-height));
 }
 
 hr {
-    height:           fn.dim(--border --thin);
+    block-size:       fn.dim(--border --thin);
     margin-block:     calc(.5 * (fn.dim(--heading --margin-bs) + fn.dim(--paragraph --margin-bs))) 0;
     border:           0;
     background-color: fn.color(--border);
diff --git a/src/_config.scss b/src/_config.scss
index be01a69..3cffbfd 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -25,6 +25,34 @@ res.$named-viewports: media.$breakpoints;
 
 $palette-precision: 5 !default;
 
+$static-colors: (
+    --base: hsl(0, 0%, 97%),
+
+    --contrasts: (
+        --100:  -1.08,
+        --200:  -1.20,
+        --300:  -1.33,
+        --400:  -1.58,
+        --500:  -1.92,
+        --600:  -2.39,
+        --700:  -3.01,
+        --800:  -3.87,
+        --900:  -5.07,
+        --1000: -6.72,
+        --1100: -8.84,
+        --1200: -11.31,
+        --1300: -13.94,
+    ),
+
+    --palettes: (
+        --blue:   blend.lch(48% 50 279),
+        --purple: blend.lch(48% 50 308),
+        --red:    blend.lch(48% 50 23),
+        --green:  blend.lch(63% 50 147),
+        --yellow: blend.lch(68% 50 80),
+    ),
+) !default;
+
 $theme-light: (
     --contrasts: (
         --grays: (
@@ -74,23 +102,30 @@ $theme-light: (
         --yellow: blend.lch(68% 50 80)  --colors --muted,
     ),
 
-    --semantic-colors: (
-        --accent:         --blue,
-        --focus:          --yellow-static,
-
-        --bg-l2:          --base --50,
-        --bg-l1:          --base --100,
-        --bg-base:        --base --200,
-
-        --border-mute:    --base --200,
-        --border:         --base --300,
-        --border-strong:  --base --400,
-
-        --text-disabled:  --base --500,
-        --text-mute-more: --base --600,
-        --text-mute:      --base --700,
-        --text:           --base --800,
-        --heading:        --base --900,
+    --semantic: (
+        --accent:          --blue,
+        --positive:        --green,
+        --negative:        --red,
+        --warning:         --yellow,
+
+        --accent-static:   --blue-static,
+        --positive-static: --green-static,
+        --negative-static: --red-static,
+        --warning-static:  --yellow-static,
+
+        --bg-l2:           --base --50,
+        --bg-l1:           --base --100,
+        --bg-base:         --base --200,
+ 
+        --border-mute:     --base --200,
+        --border:          --base --300,
+        --border-strong:   --base --400,
+ 
+        --text-disabled:   --base --500,
+        --text-mute-more:  --base --600,
+        --text-mute:       --base --700,
+        --text:            --base --800,
+        --heading:         --base --900,
     ),
 ) !default;
 
@@ -143,23 +178,30 @@ $theme-dark: (
         --yellow: blend.lch(68% 50 80)  --colors --muted,
     ),
 
-    --semantic-colors: (
-        --accent:         --blue,
-        --focus:          --yellow-static,
-
-        --bg-base:        --base --50,
-        --bg-l1:          --base --75,
-        --bg-l2:          --base --100,
-
-        --border-mute:    --base --200,
-        --border:         --base --300,
-        --border-strong:  --base --400,
-
-        --text-disabled:  --base --500,
-        --text-mute-more: --base --600,
-        --text-mute:      --base --700,
-        --text:           --base --800,
-        --heading:        --base --900,
+    --semantic: (
+        --accent:          --blue,
+        --positive:        --green,
+        --negative:        --red,
+        --warning:         --yellow,
+
+        --accent-static:   --blue-static,
+        --positive-static: --green-static,
+        --negative-static: --red-static,
+        --warning-static:  --yellow-static,
+
+        --bg-base:         --base --50,
+        --bg-l1:           --base --75,
+        --bg-l2:           --base --100,
+ 
+        --border-mute:     --base --200,
+        --border:          --base --300,
+        --border-strong:   --base --400,
+ 
+        --text-disabled:   --base --500,
+        --text-mute-more:  --base --600,
+        --text-mute:       --base --700,
+        --text:            --base --800,
+        --heading:         --base --900,
     ),
 ) !default;
 
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 2084905..4574333 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -100,7 +100,7 @@
             --thin:   1px,
         ),
 
-        --rounding:   3px,
+        --rounding:   4px,
 
         --focus: (
             --outline-width: 3px,
@@ -176,6 +176,20 @@
 
 //
 
+@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
+    @include iro.props-store((
+        --colors: (
+            #{$palette-name}-static: fn.palette(
+                $palette,
+                map.get(config.$static-colors, --contrasts),
+                1,
+                false,
+                map.get(config.$static-colors, --base),
+            ),
+        ),
+    ));
+}
+
 @each $theme-name, $theme in config.$themes {
     $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
 
@@ -190,21 +204,14 @@
                     $base-color,
                     map.get($theme, --contrasts, $contrasts),
                     map.get($theme, --ranges, $ranges),
-                    nth(map.get($theme, --palettes, --base), 1),
+                    true,
+                    list.nth(map.get($theme, --palettes, --base), 1),
                 ),
             ),
         ), $tree);
-
-        @if $theme-name == config.$theme-default {
-            @include iro.props-store((
-                --colors: (
-                    #{$palette-name}-static: iro.props-get-static(--colors $palette-name, $tree),
-                ),
-            ), $tree);
-        }
     }
 
-    @each $color, $ref in map.get($theme, --semantic-colors) {
+    @each $color, $ref in map.get($theme, --semantic) {
         @include iro.props-store((
             --colors: (
                 $color: fn.color($ref),
diff --git a/src/_functions.scss b/src/_functions.scss
index 7c0ded3..8553833 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -107,21 +107,29 @@
     @return $result;
 }
 
-@function palette($base-color, $contrasts, $range: 1, $reference-color: $base-color) {
+@function palette($base-color, $contrasts, $range: 1, $desaturate: true, $reference-color: $base-color) {
     $palette: ();
 
     @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) {
         $contrasts: iro.fn-list-reverse($contrasts);
     }
 
+    $reference-lightness: blend.lightness($reference-color);
     $i: -100%;
 
     @while $i <= 100% {
-        $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: -.8 * math.abs($i)));
-        $i: $i + config.$palette-precision;
+        $c:       if($desaturate, .8 * if($reference-lightness >= 50%, -1 * math.clamp(0%, $i, 100%), math.clamp(-100%, $i, 0%)), 0%);
+        $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: $c));
+        $i:       $i + config.$palette-precision;
     }
 
-    @return multi-contrast($base-color, $palette, $contrasts, $reference-color);
+    $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color);
+
+    @each $key, $color in $palette {
+        $palette: map.set($palette, #{$key}-text, blend.contrast($color))
+    }
+
+    @return $palette;
 }
 
 @function px-to-em($size, $base: iro.$vars-root-size) {
diff --git a/src/_objects.scss b/src/_objects.scss
index aaace92..68bf3a7 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -1,9 +1,9 @@
-// @use 'objects/icon';
-// @use 'objects/emoji';
+@use 'objects/icon';
+@use 'objects/emoji';
 @use 'objects/heading';
 @use 'objects/divider';
-// @use 'objects/badge';
-// @use 'objects/button';
+@use 'objects/badge';
+@use 'objects/button';
 // @use 'objects/text-field';
 // @use 'objects/field-label';
 // @use 'objects/radio';
diff --git a/src/_scopes.scss b/src/_scopes.scss
index fc1f89d..6df12e1 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -1,6 +1,6 @@
 @use 'scopes/links';
 @use 'scopes/code';
-// @use 'scopes/blockquotes';
-// @use 'scopes/lists';
+@use 'scopes/blockquotes';
+@use 'scopes/lists';
 @use 'scopes/headings';
 // @use 'scopes/tables';
diff --git a/src/_utils.scss b/src/_utils.scss
index e551136..8ba2581 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -125,28 +125,28 @@ $dirs: (
     }
 }
 
-@include iro.bem-utility('w-100') {
-    width: 100%;
+@include iro.bem-utility('is-100') {
+    inline-size: 100%;
 }
 
-@include iro.bem-utility('w-75') {
-    width: 75%;
+@include iro.bem-utility('is-75') {
+    inline-size: 75%;
 }
 
-@include iro.bem-utility('w-50') {
-    width: 50%;
+@include iro.bem-utility('is-50') {
+    inline-size: 50%;
 }
 
-@include iro.bem-utility('w-25') {
-    width: 25%;
+@include iro.bem-utility('is-25') {
+    inline-size: 25%;
 }
 
-@include iro.bem-utility('w-1px') {
-    width: 1px;
+@include iro.bem-utility('is-1px') {
+    inline-size: 1px;
 }
 
-@include iro.bem-utility('w-0') {
-    width: 0;
+@include iro.bem-utility('is-0') {
+    inline-size: 0;
 }
 
 @include iro.bem-utility('elp') {
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index b28eea2..fcc4837 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -29,9 +29,9 @@
     @include iro.bem-layout(iro.props-namespace()) {
         @each $size in 'narrow-125' 'narrow' 'narrow-75' {
             @include iro.bem-modifier($size) {
-                max-width:    fn.dim(--#{$size});
-                margin-right: auto;
-                margin-left:  auto;
+                max-inline-size: fn.dim(--#{$size});
+                margin-right:    auto;
+                margin-left:     auto;
             }
         }
 
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index fa90975..953c8c0 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -62,9 +62,9 @@
             flex: 0 0 auto;
 
             @include iro.bem-modifier('main') {
-                flex-shrink: 1;
-                width:       100%;
-                min-width:   0;
+                flex-shrink:     1;
+                inline-size:     100%;
+                min-inline-size: 0;
             }
         }
     }
diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss
index f977b61..235e242 100644
--- a/src/layouts/_message-group.scss
+++ b/src/layouts/_message-group.scss
@@ -26,16 +26,16 @@
         gap:                   0 fn.dim(--spacing-x);
         
         @include iro.bem-elem('avatar') {
-            grid-area: avatar;
-            height:    0;
+            grid-area:  avatar;
+            block-size: 0;
         }
         
         @include iro.bem-elem('message') {
-            grid-column: message;
-            position:    relative;
-            box-sizing:  border-box;
-            min-width:   0;
-            max-width:   100%;
+            grid-column:     message;
+            position:        relative;
+            box-sizing:      border-box;
+            min-inline-size: 0;
+            max-inline-size: 100%;
 
             &::before {
                 content:             '';
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
new file mode 100644
index 0000000..0d95751
--- /dev/null
+++ b/src/objects/_badge.scss
@@ -0,0 +1,194 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+$themes: accent positive negative warning;
+
+@include iro.props-namespace('badge') {
+    @include iro.props-store((
+        --dims: (
+            --pad-b:      fn.global-dim(--size --100),
+            --pad-i:      fn.global-dim(--size --150),
+            --pad-i-pill: fn.global-dim(--size --200),
+            --rounding:   fn.global-dim(--rounding),
+            --font-size:  fn.global-dim(--font-size --100),
+
+            --50: (
+                --pad-b:      fn.global-dim(--size --50),
+                --pad-i:      fn.global-dim(--size --115),
+                --pad-i-pill: fn.global-dim(--size --150),
+                --font-size:  fn.global-dim(--font-size --75),
+            ),
+            --200: (
+                --pad-b:      fn.global-dim(--size --125),
+                --pad-i:      fn.global-dim(--size --175),
+                --pad-i-pill: fn.global-dim(--size --225),
+                --font-size:  fn.global-dim(--font-size --150),
+            ),
+            --300: (
+                --pad-b:      fn.global-dim(--size --160),
+                --pad-i:      fn.global-dim(--size --225),
+                --pad-i-pill: fn.global-dim(--size --300),
+                --font-size:  fn.global-dim(--font-size --200),
+            ),
+        ),
+        --colors: (
+            --bg:    fn.global-color(--heading),
+            --label: fn.global-color(--bg-l2),
+            --hover: (
+                --bg: fn.global-color(--text),
+            ),
+            --active: (
+                --bg: fn.global-color(--text),
+            ),
+            --key-focus: (
+                --bg:     fn.global-color(--base --50),
+                --label:  fn.global-color(--heading),
+                --border: fn.global-color(--yellow-static --400),
+            ),
+
+            --quiet: (
+                --bg:    fn.global-color(--border-mute),
+                --label: fn.global-color(--heading),
+                --hover: (
+                    --bg: fn.global-color(--border),
+                ),
+                --active: (
+                    --bg: fn.global-color(--border-strong),
+                ),
+            ),
+        ),
+    ));
+
+    @each $theme in $themes {
+        @include iro.props-store((
+            --colors: (
+                --#{$theme}: (
+                    --bg:    fn.global-color(--#{$theme} --800),
+                    --label: fn.global-color(--#{$theme} --800-text),
+                    --hover: (
+                        --bg: fn.global-color(--#{$theme} --900),
+                    ),
+                    --active: (
+                        --bg: fn.global-color(--#{$theme} --900),
+                    ),
+                ),
+
+                --#{$theme}-quiet: (
+                    --bg:    fn.global-color(--#{$theme} --200),
+                    --label: fn.global-color(--#{$theme} --1100),
+                    --hover: (
+                        --bg: fn.global-color(--#{$theme} --300),
+                    ),
+                    --active: (
+                        --bg: fn.global-color(--#{$theme} --300),
+                    ),
+                )
+            ),
+        ));
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          inline-block;
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
+        border-radius:    fn.dim(--rounding);
+        background-color: fn.color(--bg);
+        color:            fn.color(--label);
+        font-size:        fn.dim(--font-size);
+        line-height:      fn.global-dim(--font --standard --line-height);
+        text-align:       center;
+        text-decoration:  none;
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:hover {
+                background-color: fn.color(--hover --bg);
+            }
+
+            &:active {
+                background-color: fn.color(--active --bg);
+            }
+        }
+
+        @include iro.bem-modifier('quiet') {
+            background-color: fn.color(--quiet --bg);
+            color:            fn.color(--quiet --label);
+
+            &:link,
+            &:visited,
+            &:enabled {
+                &:hover {
+                    background-color: fn.color(--quiet --hover --bg);
+                }
+
+                &:active {
+                    background-color: fn.color(--quiet --active --bg);
+                }
+            }
+        }
+    
+        @each $theme in $themes {
+            @include iro.bem-modifier($theme) {
+                background-color: fn.color(--#{$theme} --bg);
+                color:            fn.color(--#{$theme} --label);
+    
+                &:link,
+                &:visited,
+                &:enabled {
+                    &:hover {
+                        background-color: fn.color(--#{$theme} --hover --bg);
+                    }
+    
+                    &:active {
+                        background-color: fn.color(--#{$theme} --active --bg);
+                    }
+                }
+
+                @include iro.bem-modifier('quiet') {
+                    background-color: fn.color(--#{$theme}-quiet --bg);
+                    color:            fn.color(--#{$theme}-quiet --label);
+        
+                    &:link,
+                    &:visited,
+                    &:enabled {
+                        &:hover {
+                            background-color: fn.color(--#{$theme}-quiet --hover --bg);
+                        }
+        
+                        &:active {
+                            background-color: fn.color(--#{$theme}-quiet --active --bg);
+                        }
+                    }
+                }
+            }
+        }
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:focus-visible {
+                background-color: fn.color(--key-focus --bg);
+                box-shadow:       0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --border);
+                color:            fn.color(--key-focus --label);
+            }
+        }
+    
+        @include iro.bem-modifier('pill') {
+            padding-inline: fn.dim(--pad-i-pill);
+            border-radius:  10em;
+        }
+    
+        @each $size in '50' '200' '300' {
+            @include iro.bem-modifier($size) {
+                padding-block:  fn.dim(--#{$size} --pad-b);
+                padding-inline: fn.dim(--#{$size} --pad-i);
+                font-size:      fn.dim(--#{$size} --font-size);
+        
+                @include iro.bem-modifier('pill') {
+                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
new file mode 100644
index 0000000..d3588f6
--- /dev/null
+++ b/src/objects/_button.scss
@@ -0,0 +1,173 @@
+@use 'sass:list';
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+$themes: primary accent positive negative warning;
+
+@mixin button-variant($theme: null) {
+    $key: if($theme == null, (), --#{$theme});
+
+    &:link,
+    &:visited,
+    &:enabled {
+        border-color:     fn.color(list.join($key, --bg));
+        background-color: fn.color(list.join($key, --bg));
+        color:            fn.color(list.join($key, --label));
+    }
+    
+    @include iro.bem-modifier('outline') {
+        &:link,
+        &:visited,
+        &:enabled {
+            background-color: transparent;
+            color:            fn.color(list.join($key, --outline-label));
+        }
+    }
+
+    &:link,
+    &:visited,
+    &:enabled {
+        &:hover {
+            border-color:     fn.color(list.join($key, --hover --bg));
+            background-color: fn.color(list.join($key, --hover --bg));
+            color:            fn.color(list.join($key, --hover --label));
+        }
+
+        &:active {
+            border-color:     fn.color(list.join($key, --active --bg));
+            background-color: fn.color(list.join($key, --active --bg));
+            color:            fn.color(list.join($key, --active --label));
+        }
+    }
+}
+
+@include iro.props-namespace('button') {
+    @include iro.props-store((
+        --dims: (
+            --line-height: 1.4,
+            --pad-i:       fn.global-dim(--size --225),
+            --pad-b:       fn.global-dim(--size --65),
+            --rounding:    10em,
+
+            --lg: (
+                --pad-i: fn.global-dim(--size --300),
+                --pad-b: fn.global-dim(--size --100),
+            ),
+        ),
+        --colors: (
+            --bg:            fn.global-color(--border-mute),
+            --label:         fn.global-color(--text),
+            --outline-label: fn.global-color(--text),
+
+            --hover: (
+                --bg:     fn.global-color(--border),
+                --label:  fn.global-color(--heading),
+            ),
+            --active: (
+                --bg:     fn.global-color(--border-strong),
+                --label:  fn.global-color(--heading),
+            ),
+            --disabled: (
+                --bg:     fn.global-color(--border-mute),
+                --label:  fn.global-color(--text-disabled),
+            ),
+            --key-focus: (
+                --bg:     fn.global-color(--base --50),
+                --label:  fn.global-color(--heading),
+                --border: fn.global-color(--yellow-static --400),
+            ),
+            
+            --primary: (
+                --bg:            fn.global-color(--base --800),
+                --label:         fn.global-color(--base --800-text),
+                --outline-label: fn.global-color(--text),
+
+                --hover: (
+                    --bg:     fn.global-color(--base --900),
+                    --label:  fn.global-color(--base --900-text),
+                ),
+                --active: (
+                    --bg:     fn.global-color(--base --900),
+                    --label:  fn.global-color(--base --900-text),
+                ),
+            ),
+        ),
+    ));
+
+    @each $theme in $themes {
+        @if $theme != primary {
+            @include iro.props-store((
+                --colors: (
+                    --#{$theme}: (
+                        --bg:            fn.global-color(--#{$theme} --900),
+                        --label:         fn.global-color(--#{$theme} --900-text),
+                        --outline-label: fn.global-color(--#{$theme} --1000),
+
+                        --hover: (
+                            --bg:     fn.global-color(--#{$theme} --1000),
+                            --label:  fn.global-color(--#{$theme} --1000-text),
+                        ),
+                        --active: (
+                            --bg:     fn.global-color(--#{$theme} --1100),
+                            --label:  fn.global-color(--#{$theme} --1100-text),
+                        ),
+                    ),
+                ),
+            ));
+        }
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          inline-block;
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
+        border:           2px solid transparent;
+        border-radius:    fn.dim(--rounding);
+        border-color:     fn.color(--disabled --bg);
+        background-color: fn.color(--disabled --bg);
+        color:            fn.color(--disabled --label);
+        font-weight:      500;
+        line-height:      fn.dim(--line-height);
+        text-align:       center;
+        text-decoration:  none;
+        vertical-align:   top;
+    
+        @include iro.bem-modifier('block') {
+            display: block;
+        }
+    
+        @include iro.bem-modifier('outline') {
+            background-color: transparent;
+            box-shadow:       none;
+        }
+
+        @include iro.bem-modifier('lg') {
+            padding-block:  fn.dim(--lg --pad-b);
+            padding-inline: fn.dim(--lg --pad-i);
+        }
+
+        @include button-variant();
+    
+        @each $theme in $themes {
+            @include iro.bem-modifier($theme) {
+                @include button-variant($theme);
+            }
+        }
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:focus-visible {
+                border-color:     fn.color(--key-focus --border);
+                background-color: fn.color(--key-focus --bg);
+                color:            fn.color(--key-focus --label);
+            }
+        }
+    
+        @include iro.bem-modifier('round') {
+            inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
+            padding-inline: 0;
+            border-radius:  100em;
+        }
+    }
+}
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 3332331..5e80de4 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -42,7 +42,7 @@
             @include iro.props-store((
                 --colors: (
                     $color: (
-                        --bg:    fn.global-color($color --700),
+                        --bg:    fn.global-color($color --800),
                         --label: fn.global-color($color --1000),
                     )
                 ),
@@ -54,7 +54,7 @@
         display:        flex;
         flex-direction: row;
         align-items:    center;
-        height:         1em;
+        block-size:     1em;
         margin-block:   fn.dim(--margin-b);
         color:          fn.color(--strong --label);
         font-size:      fn.dim(--strong --label-font-size);
@@ -67,8 +67,8 @@
         &::after {
             content:          '';
             flex:             1 1 auto;
-            width:            100%;
-            height:           fn.dim(--strong --border);
+            inline-size:      100%;
+            block-size:       fn.dim(--strong --border);
             background-color: fn.color(--strong --bg);
         }
 
@@ -82,8 +82,8 @@
 
         @include iro.bem-modifier('vertical') {
             align-self:       stretch;
-            width:            1px;
-            height:           auto;
+            inline-size:      1px;
+            block-size:       auto;
             margin-block:     0;
             background-color: fn.color(--faint --bg);
 
@@ -100,7 +100,7 @@
 
             &::before,
             &::after {
-                height:           fn.dim(--medium --border);
+                block-size:       fn.dim(--medium --border);
                 background-color: fn.color(--medium --bg);
             }
         }
@@ -112,7 +112,7 @@
 
             &::before,
             &::after {
-                height:           fn.dim(--faint --border);
+                block-size:       fn.dim(--faint --border);
                 background-color: fn.color(--faint --bg);
             }
         }
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
new file mode 100644
index 0000000..d8d1289
--- /dev/null
+++ b/src/objects/_emoji.scss
@@ -0,0 +1,73 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+@use 'sass:math';
+
+@use 'icon';
+
+@include iro.props-namespace('emoji') {
+    @include iro.props-store((
+        --dims: (
+            --size:     calc(1 / 14 * 18em),
+            --pad:      .3em,
+            --rounding: fn.global-dim(--rounding),
+            --zoom:     3,
+            --valign:   -.25em,
+
+            --125: (
+                --size:   calc(1 / 14 * 23em),
+                --valign: -.45em,
+            ),
+
+            --150: (
+                --size:   calc(1 / 14 * 28em),
+                --valign: -.65em,
+            ),
+
+            --200: (
+                --size:   calc(1 / 14 * 38em),
+                --valign: -1em,
+            )
+        ),
+        --colors: (
+            --bg: fn.global-color(--border-mute),
+        )
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        inline-block;
+        position:       relative;
+        inline-size:    calc(fn.dim(--size));
+        block-size:     calc(fn.dim(--size));
+        margin:         calc(-1 * fn.dim(--pad));
+        padding:        calc(fn.dim(--pad));
+        vertical-align: fn.dim(--valign);
+        object-fit:     contain;
+
+        @include iro.bem-modifier('icon') {
+            margin:         calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
+            vertical-align: fn.foreign-dim(--icon, --valign);
+        }
+
+        @each $size in '125' '150' '200' {
+            @include iro.bem-modifier($size) {
+                inline-size:    fn.dim(--#{$size} --size);
+                block-size:     fn.dim(--#{$size} --size);
+                vertical-align: fn.dim(--#{$size} --valign);
+
+                @include iro.bem-modifier('icon') {
+                    margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
+                }
+            }
+        }
+
+        @include iro.bem-modifier('zoomable') {
+            transition:    transform .2s ease, background-color .2s ease;
+            border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
+
+            &:hover {
+                transform:        scale(fn.dim(--zoom));
+                background-color: fn.color(--bg);
+            }
+        }
+    }
+}
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
new file mode 100644
index 0000000..1491dd9
--- /dev/null
+++ b/src/objects/_icon.scss
@@ -0,0 +1,26 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('icon') {
+    @include iro.props-store((
+        --dims: (
+            --stroke:  1.5px,
+            --size:    calc(1 / 14 * 16em),
+            --valign:  -.2em,
+        )
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:         inline;
+        inline-size:     fn.dim(--size);
+        block-size:      fn.dim(--size);
+        stroke-width:    fn.dim(--stroke);
+        stroke-linecap:  round;
+        stroke-linejoin: round;
+        vertical-align:  fn.dim(--valign);
+
+        @include iro.bem-modifier('block') {
+            display: block;
+        }
+    }
+}
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 9ecdfac..19f282f 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -7,8 +7,8 @@
 
 @include iro.props-namespace('palette') {
     @include iro.bem-object(iro.props-namespace()) {
-        display: flex;
-        height:  3em;
+        display:    flex;
+        block-size: 3em;
 
         @include iro.bem-elem('item') {
             flex: 1 1 auto;
@@ -40,5 +40,23 @@
                 }
             }
         }
+
+        @include iro.bem-modifier('static') {
+            @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
+                $contrasts: map.get(config.$static-colors, --contrasts);
+
+                @include iro.bem-modifier(string.slice($palette-name, 3)) {
+                    @include iro.bem-elem('item') {
+                        @for $i from 1 through list.length($contrasts) {
+                            $key: list.nth(map.keys($contrasts), $i);
+            
+                            &:nth-child(#{$i}) {
+                                background-color: fn.global-color(#{$palette-name}-static $key);
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
new file mode 100644
index 0000000..f6a13fe
--- /dev/null
+++ b/src/scopes/_blockquotes.scss
@@ -0,0 +1,34 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('blockquotes') {
+    @include iro.props-store((
+        --dims: (
+            --indent:    fn.global-dim(--list --indent),
+            --margin-bs: fn.global-dim(--paragraph --margin-bs),
+            --border:    fn.global-dim(--border --thick),
+
+            --compact: (
+                --indent: fn.global-dim(--list --compact-indent),
+            ),
+        ),
+        --colors: (
+            --border: fn.global-color(--border),
+        )
+    ));
+
+    @include iro.bem-scope(iro.props-namespace()) {
+        blockquote {
+            margin-block:         fn.dim(--margin-bs);
+            margin-inline:        1px 0;
+            padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border));
+            border-inline-start:  fn.dim(--border) solid fn.color(--border);
+        }
+
+        @include iro.bem-modifier('compact') {
+            blockquote {
+                padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border));
+            }
+        }
+    }
+}
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index a6905a3..0ff3a2c 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -23,7 +23,7 @@
             ),
             --block: (
                 --fg: fn.global-color(--text),
-                --bg: fn.global-color(--bg-l2),
+                --bg: fn.global-color(--base --50),
             )
         )
     ));
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index d0c47ef..a9de8b5 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -4,10 +4,11 @@
 @include iro.props-namespace('links') {
     @include iro.props-store((
         --dims: (
+            --rounding:          fn.global-dim(--rounding),
             --underline:         fn.global-dim(--border --thin),
 
             --hover: (
-                --underline:    fn.global-dim(--border --medium),
+                --underline:     fn.global-dim(--border --medium),
             )
         ),
         --colors: (
@@ -15,7 +16,7 @@
 
             --idle: (
                 --text:          fn.global-color(--accent --1000),
-                --underline:     fn.global-color(--accent --1000),
+                --underline:     fn.global-color(--accent --600),
 
                 --hover: (
                     --text:      fn.global-color(--accent --1200),
@@ -24,16 +25,16 @@
 
             --visited: (
                 --text:          fn.global-color(--purple --1000),
-                --underline:     fn.global-color(--purple --1000),
+                --underline:     fn.global-color(--purple --600),
 
                 --hover: (
                     --text:      fn.global-color(--purple --1200),
                 ),
             ),
 
-            --focus: (
+            --key-focus: (
                 --bg:            fn.global-color(--yellow-static --400),
-                --text:          #000,
+                --text:          fn.global-color(--yellow-static --400-text),
             )
         )
     ));
@@ -41,7 +42,7 @@
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
-            border-radius:             .5px;
+            border-radius:             fn.dim(--rounding);
             color:                     currentColor;
             text-decoration:           underline;
             text-decoration-color:     fn.color(--underline);
@@ -53,13 +54,13 @@
                 text-decoration-skip-ink:  none;
             }
 
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    background-color:          fn.color(--focus --bg);
-                    color:                     fn.color(--focus --text);
-                    text-decoration:           none;
-                    border-block-end:          fn.dim(--hover --underline) solid currentColor;
-                }
+            &:focus-visible {
+                background-color:          fn.color(--key-focus --bg);
+                box-shadow:                0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --bg);
+                color:                     fn.color(--key-focus --text);
+                text-decoration:           underline;
+                text-decoration-thickness: fn.dim(--hover --underline);
+                text-decoration-skip-ink:  none;
             }
         }
 
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
new file mode 100644
index 0000000..bad9731
--- /dev/null
+++ b/src/scopes/_lists.scss
@@ -0,0 +1,66 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('lists') {
+    @include iro.props-store((
+        --dims: (
+            --indent:    calc(fn.global-dim(--list --indent) + 1em),
+            --margin-bs: fn.global-dim(--paragraph --margin-bs),
+
+            --compact: (
+                --indent: fn.global-dim(--list --compact-indent),
+            ),
+        ),
+        --colors: (
+            --border: fn.global-color(--border-mute),
+        )
+    ));
+
+    @include iro.bem-scope(iro.props-namespace()) {
+        ul,
+        ol {
+            margin-block-start:   fn.dim(--margin-bs);
+            padding-inline-start: fn.dim(--indent);
+
+            ul,
+            ol {
+                margin-block-start: 0;
+            }
+        }
+
+        ul {
+            list-style: disc;
+        }
+
+        ol {
+            list-style: decimal;
+        }
+
+        dl {
+            margin-block:  fn.dim(--margin-bs) 0;
+            margin-inline: 0;
+            padding:       0;
+        }
+
+        dt {
+            color:       fn.global-color(--heading);
+            font-weight: bold;
+        }
+
+        dd {
+            margin-block:  0;
+            margin-inline: fn.dim(--indent) 0;
+        }
+
+        @include iro.bem-modifier('compact') {
+            ul,
+            ol {
+                padding-inline-start: calc(fn.dim(--compact --indent) - 3px);
+            }
+
+            dd {
+                margin-inline-start: calc(fn.dim(--compact --indent) - 3px);
+            }
+        }
+    }
+}
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
index 6b7eaf0..7dca65a 100644
--- a/src_demo/components/_sidebar.scss
+++ b/src_demo/components/_sidebar.scss
@@ -3,8 +3,8 @@
 
 @include iro.props-namespace('sidebar') {
     @include iro.bem-component(iro.props-namespace()) {
-        grid-area:  sidebar;
-        min-width:  15em;
-        min-height: 0;
+        grid-area:        sidebar;
+        min-inline-size:  15em;
+        min-block-size:   0;
     }
 }
diff --git a/static/drgn.png b/static/drgn.png
index b8cde00..6836383 100755
Binary files a/static/drgn.png and b/static/drgn.png differ
diff --git a/static/script.js b/static/script.js
index 00962e5..846c842 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,28 +1,9 @@
-'use strict';
+"use strict";
 
 //
 
-document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll('.is-indeterminate').forEach(el => el.indeterminate = true);
-})
-
-//
-
-const enableFocusIndicator = e => {
-    if (e.key !== 'Tab') {
-        return;
-    }
-
-    document.body.classList.add('t-keyboard');
-    document.removeEventListener('keydown', enableFocusIndicator);
-    document.addEventListener('mousedown', disableFocusIndicator);
-}
-
-const disableFocusIndicator = () => {
-    document.body.classList.remove('t-keyboard');
-
-    document.removeEventListener('mousedown', disableFocusIndicator);
-    document.addEventListener('keydown', enableFocusIndicator);
-}
-
-document.addEventListener('keydown', enableFocusIndicator);
+document.addEventListener("DOMContentLoaded", () => {
+    document
+        .querySelectorAll(".is-indeterminate")
+        .forEach((el) => (el.indeterminate = true));
+});
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
index 04fd8eb..500f062 100644
--- a/tpl/objects/badge.pug
+++ b/tpl/objects/badge.pug
@@ -3,6 +3,7 @@ mixin badge(variant)
         let classes = {
             'o-badge':       true,
             'o-badge--pill': !!attributes.pill,
+            'o-badge--quiet': !!attributes.quiet,
             'o-menu__badge': !!attributes.menu,
         }
         if (attributes.size) {
diff --git a/tpl/objects/palette.pug b/tpl/objects/palette.pug
index 77e6e9e..303265d 100644
--- a/tpl/objects/palette.pug
+++ b/tpl/objects/palette.pug
@@ -1,7 +1,8 @@
 mixin palette(palette)
     -
         let classes = {
-            'o-palette': true,
+            'o-palette':         true,
+            'o-palette--static': !!attributes.static,
         }
         classes['o-palette--' + palette] = true
 
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index a3c4eed..1e1b88f 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -1,51 +1,75 @@
 mixin view-badge 
     +view('badge', 'Badge')
         .c-box
-            +badge= '100'
-            = ' '
-            +badge('primary')= 'new'
-            = ' '
-            +badge('accent')= 'new'
+            +badge(size=50 href='#')= '50'
             = ' '
-            +badge('accent-quiet')= 'new'
+            +badge= '100'
             = ' '
             +badge(size=200 href='#')= '200'
             = ' '
-            +badge('primary')(size=200 href='#')= 'new'
-            = ' '
-            +badge('accent')(size=200 href='#')= 'new'
-            = ' '
-            +badge('accent-quiet')(size=200 href='#')= 'new'
-            = ' '
             +badge(size=300 href='#')= '300'
-            = ' '
-            +badge('primary')(size=300 href='#')= 'new'
-            = ' '
-            +badge('accent')(size=300 href='#')= 'new'
-            = ' '
-            +badge('accent-quiet')(size=300 href='#')= 'new'
 
         .c-box
-            +badge(pill=true)= '100'
+            +badge(size=50 href='#' quiet=true)= '50'
             = ' '
-            +badge('primary')(pill=true)= 'new'
+            +badge(quiet=true)= '100'
             = ' '
-            +badge('accent')(pill=true)= 'new'
+            +badge(size=200 href='#' quiet=true)= '200'
             = ' '
-            +badge('accent-quiet')(pill=true)= 'new'
-            = ' '
-            +badge(size=200, pill=true)= '200'
-            = ' '
-            +badge('primary')(size=200, pill=true)= 'new'
+            +badge(size=300 href='#' quiet=true)= '300'
+
+        each theme in ['accent', 'positive', 'negative', 'warning']
+            .c-box
+                +badge(theme)(size=50 href='#')= 'new'
+                = ' '
+                +badge(theme)= 'new'
+                = ' '
+                +badge(theme)(size=200 href='#')= 'new'
+                = ' '
+                +badge(theme)(size=300 href='#')= 'new'
+
+            .c-box
+                +badge(theme)(size=50 href='#' quiet=true)= 'new'
+                = ' '
+                +badge(theme)(quiet=true)= 'new'
+                = ' '
+                +badge(theme)(size=200 href='#' quiet=true)= 'new'
+                = ' '
+                +badge(theme)(size=300 href='#' quiet=true)= 'new'
+
+        .c-box
+            +badge(size=50, pill=true)= '50'
             = ' '
-            +badge('accent')(size=200, pill=true)= 'new'
+            +badge(pill=true)= '100'
             = ' '
-            +badge('accent-quiet')(size=200, pill=true)= 'new'
+            +badge(size=200 pill=true)= '200'
             = ' '
-            +badge(size=300, pill=true)= '300'
+            +badge(size=300 pill=true)= '300'
+
+        .c-box
+            +badge(size=50 pill=true quiet=true)= 'new'
             = ' '
-            +badge('primary')(size=300, pill=true)= 'new'
+            +badge(pill=true quiet=true)= 'new'
             = ' '
-            +badge('accent')(size=300, pill=true)= 'new'
+            +badge(size=200 pill=true quiet=true)= 'new'
             = ' '
-            +badge('accent-quiet')(size=300, pill=true)= 'new'
+            +badge(size=300 pill=true quiet=true)= 'new'
+
+        each theme in ['accent', 'positive', 'negative', 'warning']
+            .c-box
+                +badge(theme)(size=50 pill=true href='#')= 'new'
+                = ' '
+                +badge(theme)(pill=true)= 'new'
+                = ' '
+                +badge(theme)(size=200 pill=true href='#')= 'new'
+                = ' '
+                +badge(theme)(size=300 pill=true href='#')= 'new'
+
+            .c-box
+                +badge(theme)(size=50 pill=true href='#' quiet=true)= 'new'
+                = ' '
+                +badge(theme)(pill=true quiet=true)= 'new'
+                = ' '
+                +badge(theme)(size=200 pill=true href='#' quiet=true)= 'new'
+                = ' '
+                +badge(theme)(size=300 pill=true href='#' quiet=true)= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 2a1bd57..7c96419 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -2,37 +2,28 @@ mixin view-button
     +view('button', 'Button')
         .c-box
             .l-button-group
-                +a-button(variant='accent')= 'Button'
-                +a-button(variant='accent' disabled=true)= 'Button'
-                +a-button(variant='accent' outline=true)= 'Button'
-                +a-button(variant='accent' outline=true disabled=true)= 'Button'
+                +a-button= 'Button'
+                +a-button(disabled=true)= 'Button'
+                +a-button(outline=true)= 'Button'
+                +a-button(outline=true disabled=true)= 'Button'
             br
             .l-button-group
-                +a-button(variant='accent' icon='trash')
-                +a-button(variant='accent' disabled=true icon='trash')
-                +a-button(variant='accent' outline=true icon='trash')
-                +a-button(variant='accent' outline=true disabled=true icon='trash')
-            br
-            .l-button-group
-                +a-button(variant='primary')= 'Button'
-                +a-button(variant='primary' disabled=true)= 'Button'
-                +a-button(variant='primary' outline=true)= 'Button'
-                +a-button(variant='primary' outline=true disabled=true)= 'Button'
-            br
-            .l-button-group
-                +a-button(variant='primary' icon='trash')
-                +a-button(variant='primary' disabled=true icon='trash')
-                +a-button(variant='primary' outline=true icon='trash')
-                +a-button(variant='primary' outline=true disabled=true icon='trash')
-            br
-            .l-button-group
-                +a-button(variant='secondary')= 'Button'
-                +a-button(variant='secondary' disabled=true)= 'Button'
-                +a-button(variant='secondary' outline=true)= 'Button'
-                +a-button(variant='secondary' outline=true disabled=true)= 'Button'
-            br
-            .l-button-group
-                +a-button(variant='secondary' icon='trash')
-                +a-button(variant='secondary' disabled=true icon='trash')
-                +a-button(variant='secondary' outline=true icon='trash')
-                +a-button(variant='secondary' outline=true disabled=true icon='trash')
+                +a-button(icon='trash')
+                +a-button(disabled=true icon='trash')
+                +a-button(outline=true icon='trash')
+                +a-button(outline=true disabled=true icon='trash')
+
+        each theme in ['primary', 'accent', 'positive', 'negative', 'warning']
+            .c-box
+                .l-button-group
+                    +a-button(variant=theme)= 'Button'
+                    +a-button(variant=theme disabled=true)= 'Button'
+                    +a-button(variant=theme outline=true)= 'Button'
+                    +a-button(variant=theme outline=true disabled=true)= 'Button'
+                br
+                .l-button-group
+                    +a-button(variant=theme icon='trash')
+                    +a-button(variant=theme disabled=true icon='trash')
+                    +a-button(variant=theme outline=true icon='trash')
+                    +a-button(variant=theme outline=true disabled=true icon='trash')
+
diff --git a/tpl/views/palette.pug b/tpl/views/palette.pug
index 384fe03..c63dea8 100644
--- a/tpl/views/palette.pug
+++ b/tpl/views/palette.pug
@@ -3,3 +3,6 @@ mixin view-palette
         each palette in ['base', 'blue', 'purple', 'red', 'green', 'yellow']
             .c-box
                 +palette(palette)
+        each palette in ['blue', 'purple', 'red', 'green', 'yellow']
+            .c-box
+                +palette(palette)(static=true)
-- 
cgit v1.2.3-54-g00ecf