From c09711e30aeed4b97376ad121716ee4ed0898503 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 21 Jul 2025 18:11:01 +0200
Subject: Flat card

---
 src/objects/_card.scss      | 22 +++++-----------------
 src/objects/_card.vars.scss | 10 +---------
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 9f70420..4f8c7fb 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -20,12 +20,6 @@
         border-color:     props.get(vars.$border-color);
         border-radius:    props.get(vars.$rounding);
         transition:       transform .2s;
-        box-shadow:
-            props.get(vars.$shadow-x)
-            props.get(vars.$shadow-y)
-            props.get(vars.$shadow-blur)
-            props.get(vars.$shadow-grow)
-            props.get(vars.$shadow-color);
 
         @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
@@ -45,14 +39,12 @@
             }
 
             &:focus-visible {
-                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+                margin:        calc(-1 * props.get(vars.$key-focus--border-width) + 1px);
                 border:        props.get(vars.$key-focus--border-offset) solid transparent;
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) - 1px);
                 outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                 box-shadow:
-                    0
-                    0
-                    0
+                    0 0 0
                     calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
                     props.get(vars.$key-focus--outline-color);
             }
@@ -179,7 +171,9 @@
                 }
 
                 &:focus-visible {
+                    margin:     0;
                     outline:    none;
+                    border:     0;
                     box-shadow: none;
 
                     @include bem.elem('image') {
@@ -204,12 +198,6 @@
                 background-color: props.get(vars.$quiet--image-color);
                 background-clip:  padding-box;
                 border-radius:    props.get(vars.$rounding);
-                box-shadow:
-                    props.get(vars.$shadow-x)
-                    props.get(vars.$shadow-y)
-                    props.get(vars.$shadow-blur)
-                    props.get(vars.$shadow-grow)
-                    props.get(vars.$shadow-color);
             }
 
             @include bem.elem('body') {
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 3859b12..4f5cf40 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -16,14 +16,8 @@ $key-focus--border-width:  props.def(--o-card--key-focus--border-width, props.ge
 $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
 $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
 
-$shadow-x:    props.def(--o-card--shadow-x, props.get(core.$shadow--l2--x)) !default;
-$shadow-y:    props.def(--o-card--shadow-y, props.get(core.$shadow--l2--y)) !default;
-$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
-$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
-
-$shadow-color:  props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !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) props.get(core.$theme, --border-mute) props.get(core.$theme, --border), 'color') !default;
+$border-color:  props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'color') !default;
 $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
 
 $key-focus--label-color:   props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
@@ -32,5 +26,3 @@ $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.g
 
 $quiet--image-color:        props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
 $quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
-
-$border-color-dark:  props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
-- 
cgit v1.2.3-70-g09d2