From f98a5c58c830a283d07d8efad4502281a5e0369e Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 28 Jun 2024 14:22:27 +0200
Subject: Update

---
 src/_base.scss                  |  2 --
 src/_config.scss                |  8 +++++
 src/_declare-vars.scss          | 18 ++++++++--
 src/_layouts.scss               |  1 +
 src/_mixins.scss                |  3 +-
 src/_utils.scss                 |  4 +++
 src/layouts/_card-list.scss     | 78 +++++++++++++++++++++++++++++++++++++++++
 src/objects/_action-button.scss |  4 +--
 src/objects/_avatar.scss        | 33 ++++++++++++-----
 src/objects/_badge.scss         | 36 ++++++++++++-------
 src/objects/_card.scss          | 72 ++++++++++++++++++++++++++++++++++---
 src/objects/_divider.scss       |  1 +
 src/objects/_popover.scss       |  9 +++--
 13 files changed, 234 insertions(+), 35 deletions(-)
 create mode 100644 src/layouts/_card-list.scss

(limited to 'src')

diff --git a/src/_base.scss b/src/_base.scss
index 4932235..aecf6af 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -67,12 +67,10 @@ p {
 }
 
 strong {
-    color:       fn.color(--heading);
     font-weight: bold;
 }
 
 small {
-    color:     fn.color(--text-mute);
     font-size: fn.dim(--font-size --75);
 }
 
diff --git a/src/_config.scss b/src/_config.scss
index 56a74e1..ffba8c9 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -156,6 +156,10 @@ $theme-light: (
         --bg-l1:   --base --100,
         --bg-base: --base --200,
     )),
+
+    --constants: (
+        --shadow: rgba(#000, 0.15),
+    ),
 ) !default;
 
 $theme-dark: (
@@ -212,6 +216,10 @@ $theme-dark: (
         --bg-l1:   --base --75,
         --bg-l2:   --base --100,
     )),
+
+    --constants: (
+        --shadow: rgba(#000, 0.5),
+    ),
 ) !default;
 
 $themes: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 23ee4d4..797001c 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -101,6 +101,12 @@
             --thin:   1px,
         ),
 
+        --shadow: (
+            --x:    0,
+            --y:    1px,
+            --blur: 4px,
+        ),
+
         --rounding:   4px,
 
         --key-focus: (
@@ -110,7 +116,7 @@
         ),
 
         --paragraph: (
-            --margin-bs: fn.dim(--size --300, null),
+            --margin-bs: fn.dim(--size --200, null),
         ),
 
         --heading: (
@@ -230,6 +236,14 @@
         ), $tree);
     }
 
+    @each $color, $value in map.get($theme, --constants) {
+        @include iro.props-store((
+            --colors: (
+                $color: $value,
+            ),
+        ), $tree);
+    }
+
     @each $color, $ref in map.get($theme, --semantic) {
         $res: ();
 
@@ -246,7 +260,7 @@
                 $color: $res,
             ),
         ), $tree);
-    }    
+    }
 }
 
 @each $theme-name, $theme in config.$themes {
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 26cfe3f..779fd64 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -4,4 +4,5 @@
 @use 'layouts/form';
 @use 'layouts/flex';
 @use 'layouts/overflow';
+@use 'layouts/card-list';
 @use 'layouts/message-group';
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 29d792b..dca6831 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -20,8 +20,7 @@
     @include set-font(--standard, (
         --line-height: null,
         --size:        fn.global-dim(list.join(--heading, $size)),
-        --weight:      bold,
-        --spacing:     1px
+        --weight:      bold
     ));
 
     color: fn.global-color(--heading);
diff --git a/src/_utils.scss b/src/_utils.scss
index a99d7ec..06afa62 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -119,6 +119,10 @@ $sizes: 0 10 50 75 100 125 200 400 700 800 !default;
     color: fn.color(--text-mute);
 }
 
+@include iro.bem-utility('c-mute-more') {
+    color: fn.color(--text-mute-more);
+}
+
 @include iro.bem-utility('mt-neutralize') {
     &::before {
         content:       '';
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
new file mode 100644
index 0000000..c27b297
--- /dev/null
+++ b/src/layouts/_card-list.scss
@@ -0,0 +1,78 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+@use 'include-media/dist/include-media' as media;
+
+@include iro.props-namespace('card-list') {
+    @include iro.props-store((
+        --dims: (
+            --row-gap: fn.global-dim(--size --800),
+            --col-gap: fn.global-dim(--size --400),
+
+            --grid: (
+                --row-gap:   fn.global-dim(--size --800),
+                --col-gap:   fn.global-dim(--size --400),
+                --col-width: fn.global-dim(--size --3200),
+            ),
+            --masonry: (
+                --row-gap:   fn.global-dim(--size --800),
+                --col-gap:   fn.global-dim(--size --400),
+                --col-width: fn.global-dim(--size --3200),
+            ),
+            --masonry-h: (
+                --row-gap:    fn.global-dim(--size --800),
+                --col-gap:    fn.global-dim(--size --400),
+                --row-height: fn.global-dim(--size --3200),
+            )
+        ),
+        --colors: (
+            --border: fn.global-color(--border),
+        ),
+    ));
+
+    @include iro.bem-layout(iro.props-namespace()) {
+        display:        flex;
+        flex-direction: column;
+        gap:            fn.dim(--row-gap) fn.dim(--col-gap);
+
+        @include iro.bem-modifier('grid') {
+            display:               grid;
+            grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
+            gap:                   fn.dim(--grid --row-gap) fn.dim(--grid --col-gap);
+        }
+
+        @include iro.bem-modifier('masonry') {
+            display:    block;
+            columns:    auto fn.dim(--masonry --col-width);
+            column-gap: fn.dim(--masonry --col-gap);
+
+            @include iro.bem-elem('card') {
+                margin-bottom: fn.dim(--masonry --row-gap);
+            }
+        }
+
+        @include iro.bem-modifier('masonry-h') {
+            flex-flow: row wrap;
+            gap:       fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap);
+
+            @include iro.bem-elem('card') {
+                flex:      1 0 auto;
+                max-width: 100%;
+            }
+
+            @include iro.bem-elem('card-content') {
+                height: fn.dim(--masonry-h --row-height);
+            }
+
+            @include iro.bem-elem('dummy') {
+                flex:   1 0 auto;
+                width:  fn.dim(--masonry-h --row-height);
+            }
+        }
+
+        @include iro.bem-modifier('aspect-5\\/4') {
+            @include iro.bem-elem('card') {
+                aspect-ratio: 5 / 4;
+            }
+        }
+    }
+}
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 7a7ff46..7fe9d44 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -11,8 +11,8 @@ $static-themes: 'black' 'white' !default;
     color:            fn.color(list.join($theme, --disabled --label));
 
     &::after {
-        outline:    fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border);
-        box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
+        outline-color: fn.color(list.join($theme, --key-focus --border));
+        box-shadow:    0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
     }
 
     &:link,
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index e6fa74e..5a34d19 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -24,9 +24,11 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
 @include iro.props-namespace('avatar') {
     @include iro.props-store((
         --dims: (
-            --size:           fn.global-dim(--size --500),
-            --font-size:      fn.global-dim(--font-size --100),
-            --indicator-size: fn.global-dim(--size --150),
+            --size:              fn.global-dim(--size --500),
+            --font-size:         fn.global-dim(--font-size --100),
+            --indicator-size:    fn.global-dim(--size --150),
+            --indicator-spacing: fn.global-dim(--size --40),
+            --rounding:          25%,
 
             --xxxl: (
                 --size:           fn.global-dim(--size --1600),
@@ -58,8 +60,6 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
                 --font-size:      fn.global-dim(--font-size --50),
                 --indicator-size: fn.global-dim(--size --100),
             ),
-            --indicator-spacing: fn.global-dim(--size --40),
-            --rounding:          25%,
             
             --key-focus: (
                 --border:        fn.global-dim(--key-focus --border),
@@ -82,12 +82,24 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
     @include iro.bem-object(iro.props-namespace()) {
         display:        inline-block;
         position:       relative;
-        border:         fn.dim(--key-focus --border) solid transparent;
         border-radius:  fn.dim(--rounding);
         font-size:      fn.dim(--font-size);
         font-style:     normal;
         vertical-align: .05em;
 
+        &::after {
+            content:        '';
+            display:        none;
+            position:       absolute;
+            z-index:        1;
+            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
+            border:         fn.dim(--key-focus --border-offset) solid transparent;
+            border-radius:  fn.dim(--rounding);
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            pointer-events: none;
+        }
+
         @include iro.bem-elem('status') {
             position:         absolute;
             inset-inline-end: 0;
@@ -110,6 +122,10 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
         @include iro.bem-modifier('circle') {
             border-radius: 100%;
 
+            &::after {
+                border-radius: 100%;
+            }
+
             @include iro.bem-elem('content') {
                 border-radius: 100%;
             }
@@ -143,8 +159,9 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
         }
     
         &:focus-visible {
-            outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-            box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            &::after {
+                display: block;
+            }
         }
     }
 }
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index cc7e500..06261b8 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -45,13 +45,9 @@ $static-themes: 'black' 'white' !default;
     }
 
     @if string.slice($theme, 1, 7) == 'static-' {
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
-                box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
-            }
+        &::after {
+            outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
         }
     }
 }
@@ -190,11 +186,10 @@ $static-themes: 'black' 'white' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
-        margin:           calc(-1 * fn.dim(--key-focus --border));
+        position:         relative;
         padding-block:    fn.dim(--pad-b);
         padding-inline:   fn.dim(--pad-i);
-        border:           fn.dim(--key-focus --border) solid transparent;
-        border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
+        border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
         background-clip:  padding-box;
         color:            fn.color(--label);
@@ -203,6 +198,18 @@ $static-themes: 'black' 'white' !default;
         text-align:       center;
         text-decoration:  none;
 
+        &::after {
+            content:        '';
+            display:        none;
+            position:       absolute;
+            z-index:        1;
+            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
+            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            pointer-events: none;
+        }
+
         &:link,
         &:visited,
         &:enabled {
@@ -244,8 +251,9 @@ $static-themes: 'black' 'white' !default;
         &:visited,
         &:enabled {
             &:focus-visible {
-                outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-                box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                &::after {
+                    display: block;
+                }
             }
         }
     
@@ -258,6 +266,10 @@ $static-themes: 'black' 'white' !default;
         @include iro.bem-modifier('pill') {
             padding-inline: fn.dim(--pad-i-pill);
             border-radius:  10em;
+
+            &::after {
+                border-radius: 10em;
+            }
         }
     
         @each $size in sm lg xl {
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 5783ac1..9f84d7a 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -18,18 +18,26 @@
             ),
         ),
         --colors: (
-            --bg:      fn.global-color(--bg-l2),
-            --border:  fn.global-color(--border-mute),
-            --divider: fn.global-color(--border-mute),
+            --bg:       fn.global-color(--bg-l2),
+            --image-bg: fn.global-color(--border-mute),
+            --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),
             ),
+
+            --quiet: (
+                --hover: (
+                    --border: fn.global-color(--text-disabled),
+                ),
+            ),
         ),
     ));
 
@@ -59,8 +67,20 @@
         }
 
         @include iro.bem-elem('image') {
-            position: relative;
-            width:    100%;
+            position:         relative;
+            width:            100%;
+            overflow:         hidden;
+            background-color: fn.color(--image-bg);
+
+            &:first-child {
+                border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
+                border-start-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+            }
+
+            &:last-child {
+                border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
+                border-end-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+            }
 
             @include iro.bem-next-elem('avatar') {
                 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
@@ -102,5 +122,47 @@
                 background-color: fn.color(--divider);
             }
         }
+
+        @include iro.bem-modifier('quiet') {
+            position:         relative;
+            border:           0;
+            background-color: transparent;
+
+            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:active {
+                    @include iro.bem-elem('image') {
+                        outline:        fn.dim(--border) solid fn.color(--quiet --hover --border);
+                        outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border));
+                    }
+                }
+                
+                &:focus-visible {
+                    outline:    none;
+                    box-shadow: none;
+
+                    @include iro.bem-elem('image') {
+                        outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --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('image') {
+                margin:          calc(-1 * fn.dim(--key-focus --border));
+                border:          fn.dim(--key-focus --border) solid transparent;
+                border-radius:   calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
+                background-clip: padding-box;
+            }
+
+            @include iro.bem-elem('body') {
+                padding:             0;
+                padding-block-start: fn.dim(--spacing);
+            }
+
+            @include iro.bem-elem('footer') {
+                padding-inline: 0;
+            }
+        }
     }
 }
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 84ddf12..d1e2897 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -75,6 +75,7 @@ $static-themes: 'black' 'white' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:        flex;
+        flex:           0 0 auto;
         flex-direction: row;
         align-items:    center;
         block-size:     1em;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 9d4b1c7..5ad58ec 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -14,7 +14,12 @@
         --colors: (
             --bg:        fn.global-color(--bg-l2),
             --border:    fn.global-color(--border),
-            --shadow:    0 .2em .5em rgba(#000, .1),
+            --filter:    drop-shadow(
+                fn.global-dim(--shadow --x)
+                fn.global-dim(--shadow --y)
+                fn.global-dim(--shadow --blur)
+                fn.global-color(--shadow)
+            ),
         ),
     ));
 
@@ -29,7 +34,7 @@
         border:             fn.dim(--border) solid fn.color(--border);
         border-radius:      fn.dim(--rounding);
         background-color:   fn.color(--bg);
-        box-shadow:         fn.color(--shadow);
+        filter:             fn.color(--filter);
 
         @include iro.bem-modifier('up-left') {
             transform: translate(var(--x), calc(var(--y) - 100%));
-- 
cgit v1.2.3-70-g09d2