From f75839fbd1b103bf849b4b6636fa03cc50bb9402 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 2 Mar 2026 19:48:29 +0100
Subject: Add highlight mod to o-card

---
 src/layouts/_card-list.vars.scss |  6 +++---
 src/objects/_card.scss           | 34 ++++++++++++++++++++++++++++++----
 src/objects/_card.vars.scss      |  9 +++++++++
 3 files changed, 42 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index ffbbb03..e5fa731 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -9,9 +9,9 @@ $rounding:       props.def(--l-card-list--rounding, props.get(card.$rounding)) !
 $row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !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;
-$grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$size--400)) !default;
-$grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
+$grid--row-gap:        props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default;
+$grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default;
+$grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3600)) !default;
 $grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
 
 $grid-sm--row-gap:        props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 1dd394f..c4d8c85 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -67,6 +67,27 @@
 			}
 		}
 
+		@include bem.modifier('highlight') {
+			border-color:  props.get(vars.$highlight--border-color);
+			outline-width: calc(props.get(vars.$highlight--border-width) - props.get(vars.$border-width));
+			outline-style: solid;
+			outline-color: props.get(vars.$highlight--border-color);
+			box-shadow:
+				props.get(vars.$highlight--shadow-x)
+				props.get(vars.$highlight--shadow-y)
+				props.get(vars.$highlight--shadow-blur)
+				props.get(vars.$highlight--shadow-grow)
+				props.get(vars.$highlight--shadow-color);
+
+			@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+				&:hover,
+				&:active,
+				&:focus-visible {
+					border-color: props.get(vars.$highlight--border-color);
+				}
+			}
+		}
+
 		@include bem.elem('avatar') {
 			margin-block-start:  props.get(vars.$pad-b);
 			margin-inline-start: props.get(vars.$pad-i);
@@ -113,7 +134,7 @@
 		}
 
 		@include bem.elem('body') {
-			flex:            1 0 auto;
+			flex:            0 0 auto;
 			padding-block:   props.get(vars.$pad-b);
 			padding-inline:  props.get(vars.$pad-i);
 
@@ -128,6 +149,12 @@
 					display: none;
 				}
 			}
+
+			@include bem.modifier('main') {
+				flex-shrink:    1;
+				block-size:     100%;
+				min-block-size: 0;
+			}
 		}
 
 		@include bem.elem('content') {
@@ -270,10 +297,9 @@
 			}
 
 			@include bem.elem('body') {
-				flex: 0 0 auto;
-
 				@include bem.modifier('main') {
-					flex-shrink:     1;
+					block-size:      auto;
+					min-block-size:  none;
 					inline-size:     100%;
 					min-inline-size: 0;
 				}
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 1e6448a..c828e93 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -28,6 +28,15 @@ $bg-color:      props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), '
 $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;
 
+$highlight--shadow-x:    props.def(--o-card--highlight--shadow-x, props.get(core.$shadow--l2--x)) !default;
+$highlight--shadow-y:    props.def(--o-card--highlight--shadow-y, props.get(core.$shadow--l2--y)) !default;
+$highlight--shadow-blur: props.def(--o-card--highlight--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
+$highlight--shadow-grow: props.def(--o-card--highlight--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
+
+$highlight--border-width: props.def(--o-card--highlight--border-width, props.get(core.$border-width--medium)) !default;
+$highlight--border-color: props.def(--o-card--highlight--border-color, props.get(core.$theme, --accent, --700), 'color') !default;
+$highlight--shadow-color: props.def(--o-card--highlight--shadow-color, props.get(core.$theme, --accent, --200), 'color') !default;
+
 $hover--bg-color:         props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($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;
 
-- 
cgit v1.2.3-70-g09d2