Consolidating button, action-button and badge; change design to have some 3D components

1 files changed, 32 insertions, 15 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index c87e676..9f70420 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,12 +14,18 @@
         position:         relative;
         display:          flex;
         flex-direction:   column;
-        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
         background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
-        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:           1px solid transparent;
+        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,
@@ -39,7 +45,10 @@
             }
 
             &:focus-visible {
-                outline:      props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+                border:        props.get(vars.$key-focus--border-offset) solid transparent;
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                 box-shadow:
                     0
                     0
@@ -64,13 +73,13 @@
             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) - 1px);
+                border-start-end-radius:   calc(props.get(vars.$rounding) - 1px);
             }
 
             &: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) - 1px);
+                border-end-end-radius:   calc(props.get(vars.$rounding) - 1px);
             }
 
             @include bem.next-elem('avatar') {
@@ -119,8 +128,8 @@
                     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);
+                    border-start-start-radius: calc(props.get(vars.$rounding) - 1px);
+                    border-start-end-radius:   calc(props.get(vars.$rounding) - 1px);
                 }
             }
         }
@@ -148,6 +157,7 @@
             margin-inline:    0;
             background-color: transparent;
             border:           0;
+            box-shadow:       none;
 
             @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                 &:hover,
@@ -173,6 +183,9 @@
                     box-shadow: none;
 
                     @include bem.elem('image') {
+                        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+                        border:           props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
                         background-color: props.get(vars.$quiet--hover--image-color);
                         outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                         box-shadow:
@@ -188,11 +201,15 @@
 
             @include bem.elem('image') {
                 position:         relative;
-                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
                 background-color: props.get(vars.$quiet--image-color);
                 background-clip:  padding-box;
-                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:    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') {
@@ -220,11 +237,11 @@
 
                 &:first-child {
                     border-start-end-radius:   0;
-                    border-end-start-radius:   props.get(vars.$rounding);
+                    border-end-start-radius:   calc(props.get(vars.$rounding) - 1px);
                 }
     
                 &:last-child {
-                    border-start-end-radius: props.get(vars.$rounding);
+                    border-start-end-radius: calc(props.get(vars.$rounding) - 1px);
                     border-end-start-radius: 0;
                 }
             }