Improved card

6 files changed, 89 insertions, 68 deletions

diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index ac20cb9..c328355 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -124,6 +124,10 @@ $theme-light: (
         --bg-l2:   --base --50,
         --bg-l1:   --base --100,
         --bg-base: --base --200,
+
+        --box: (
+            --border: --base --200,
+        ),
     )),
 
     --constants: (
@@ -179,6 +183,10 @@ $theme-dark: (
         --bg-base: --base --50,
         --bg-l1:   --base --75,
         --bg-l2:   --base --100,
+
+        --box: (
+            --border: --base --75,
+        ),
     )),
 
     --constants: (
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index f77bfbf..b489596 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
+$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--50)) !default;
 $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
 
 $grid--row-gap:        props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index aaf46b6..d5d300d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -15,28 +15,18 @@
         display:          flex;
         flex-direction:   column;
         background-color: props.get(vars.$bg-color);
-        background-clip:  content-box;
         border:           props.get(vars.$border-width) solid transparent;
         border-color:     props.get(vars.$border-color);
         border-radius:    props.get(vars.$rounding);
-        transition:       transform .2s, border-color .2s;
+        transition:       transform .2s, background-color .2s, border-color .2s;
 
         @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
             &:active,
             &:focus-visible {
-                transform:    translateY(props.get(vars.$hover--offset-b));
-                border-color: props.get(vars.$hover--border-color);
-
-                @include bem.elem('body') {
-                    @include bem.modifier('hidden') {
-                        visibility: visible;
-                        opacity:    1;
-                        transition:
-                            opacity .2s ease,
-                            visibility .2s linear;
-                    }
-                }
+                transform:        translateY(props.get(vars.$hover--offset-b));
+                background-color: props.get(vars.$hover--bg-color);
+                border-color:     props.get(vars.$hover--border-color);
             }
 
             &:focus-visible {
@@ -60,20 +50,19 @@
             position:    relative;
             display:     block;
             flex:        0 0 auto;
-            inline-size: calc(100% + 2 * props.get(vars.$border-width));
-            margin:      calc(-1 * props.get(vars.$border-width));
+            inline-size: 100%;
             overflow:    hidden;
             object-fit:  cover;
             transition:  background-color .2s, transform .2s, opacity .2s;
 
             &:first-child {
-                border-start-start-radius: props.get(vars.$rounding);
-                border-start-end-radius:   props.get(vars.$rounding);
+                border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
             }
 
             &:last-child {
-                border-end-start-radius: props.get(vars.$rounding);
-                border-end-end-radius:   props.get(vars.$rounding);
+                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
             }
 
             @include bem.next-elem('avatar') {
@@ -106,26 +95,6 @@
                 margin-block:  -100em 100em;
                 content:       '';
             }
-
-            @include bem.modifier('hidden') {
-                position:                absolute;
-                inset-block-end:         calc(-1 * props.get(vars.$border-width));
-                inset-inline:            calc(-1 * props.get(vars.$border-width));
-                z-index:                 10;
-                visibility:              hidden;
-                background-color:        props.get(vars.$bg-color);
-                border-end-start-radius: props.get(vars.$rounding);
-                border-end-end-radius:   props.get(vars.$rounding);
-                opacity:                 0;
-                transition:
-                    opacity .2s ease,
-                    visibility 0s .2s linear;
-
-                @include bem.next-elem('image') {
-                    border-start-start-radius: props.get(vars.$rounding);
-                    border-start-end-radius:   props.get(vars.$rounding);
-                }
-            }
         }
 
         @include bem.elem('content') {
@@ -157,19 +126,14 @@
                 &:hover,
                 &:active,
                 &:focus-visible {
-                    transform: none;
+                    transform:        none;
+                    background-color: transparent;
 
                     @include bem.elem('image') {
                         background-color: props.get(vars.$quiet--hover--image-color);
                         opacity:          .75;
                         transform:        translateY(props.get(vars.$hover--offset-b));
                     }
-
-                    @include bem.elem('body') {
-                        @include bem.modifier('hidden') {
-                            transform: translateY(props.get(vars.$hover--offset-b));
-                        }
-                    }
                 }
 
                 &:focus-visible {
@@ -205,11 +169,6 @@
             @include bem.elem('body') {
                 padding:             0;
                 padding-block-start: props.get(vars.$spacing);
-
-                @include bem.modifier('hidden') {
-                    padding-block:  props.get(vars.$pad-b);
-                    padding-inline: props.get(vars.$pad-i);
-                }
             }
 
             @include bem.elem('footer') {
@@ -217,6 +176,49 @@
             }
         }
 
+        @include bem.modifier('thumbnail') {
+            @include bem.elem('image') {
+                inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+                margin:        calc(-1 * props.get(vars.$border-width));
+                border-radius: props.get(vars.$rounding);
+            }
+
+            @include bem.elem('body') {
+                position:                absolute;
+                inset-block-end:         calc(-1 * props.get(vars.$border-width));
+                inset-inline:            calc(-1 * props.get(vars.$border-width));
+                z-index:                 10;
+                visibility:              hidden;
+                background-color:        props.get(vars.$bg-color);
+                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
+                border-color:            transparent;
+                border-style:            solid;
+                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                opacity:                 0;
+                transition:
+                    border-color .2s ease,
+                    opacity .2s ease,
+                    visibility 0s .2s linear;
+            }
+
+            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    @include bem.elem('body') {
+                        border-color: props.get(vars.$hover--border-color);
+                        visibility:   visible;
+                        opacity:      1;
+                        transition:
+                            border-color .2s ease,
+                            opacity .2s ease,
+                            visibility .2s linear;
+                    }
+                }
+            }
+        }
+
         @include bem.modifier('horizontal') {
             flex-direction: row;
             align-items:    center;
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index ca603be..9810239 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -19,11 +19,11 @@ $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.g
 $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
 
 $bg-color:      props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
-$border-color:  props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'color') !default;
+$border-color:  props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
 $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
 
-$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border-strong), 'color') !default;
-$hover--sub-border-color: props.def(--o-card--hover--sub-border-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$hover--bg-color:         props.def(--o-card--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$hover--border-color:     props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default;
 
 $key-focus--label-color:   props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
 $key-focus--border-color:  props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index acb86eb..1db2fe5 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,8 +1,9 @@
 mixin card
     -
         let classes = {
-            'o-card':        true,
-            'o-card--quiet': !!attributes.quiet,
+            'o-card':            true,
+            'o-card--quiet':     !!attributes.quiet,
+            'o-card--thumbnail': !!attributes.thumbnail,
         }
 
         if (attributes.class) {
@@ -38,13 +39,7 @@ mixin card-image
                 block
 
 mixin card-body
-    -
-        let classes = {
-            'o-card__body': true,
-            'o-card__body--hidden': attributes.hidden,
-        }
-
-    div(class=classes)(style=attributes.style)
+    .o-card__body(style=attributes.style)
         block
 
 mixin card-title 
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 3fd0113..8dde279 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,5 +1,21 @@
 mixin view-card 
     +view('card', 'Card')(wide=true)
+        .l-card-list
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+
+        +divider('faint')(class='u-mb-700')
+
         .l-card-list.l-card-list--merge
             +card(href='#' class='l-card-list__card')
                 +card-body
@@ -17,10 +33,10 @@ mixin view-card
         +divider('faint')(class='u-mb-700')
 
         .l-card-list.l-card-list--masonry
-            +card(href='#' class='l-card-list__card')
-                +card-body(hidden=true)
-                    +card-title= 'XS Heading'
+            +card(thumbnail=true href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+                +card-body
+                    +card-title= 'XS Heading'
 
             +card(href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })