Color adjustments, borderless cards

4 files changed, 41 insertions, 24 deletions

diff --git a/src/_config.scss b/src/_config.scss
index 3ec6607..002c817 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -116,7 +116,7 @@ $theme-light: (
             --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 100,
             --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 100,
             --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 100,
-            --900: 108,
+            --900: 107,
         ),
 
         --colors: (
@@ -140,9 +140,9 @@ $theme-light: (
         --full:  1,
         --muted: .1,
     ),
-
+    
     --palettes: (
-        --base:  hsl(0, 0%, 98%)       --grays --full,
+        --base:  hsl(260, 20%, 98%)       --grays --full,
         --blue:   oklch(56% .16 265.25) --colors --muted,
         --purple: oklch(56% .16 305.58) --colors --muted,
         --red:    oklch(56% .16 18.69)  --colors --muted,
@@ -200,9 +200,9 @@ $theme-dark: (
         --full:  1,
         --muted: .3,
     ),
-
+    
     --palettes: (
-        --base:  hsl(0, 0%, 20%)       --grays --full,
+        --base:  hsl(257, 6%, 18%)       --grays --full,
         --blue:   oklch(56% .16 265.25) --colors --muted,
         --purple: oklch(56% .16 305.58) --colors --muted,
         --red:    oklch(56% .16 18.69)  --colors --muted,
diff --git a/src/_functions.scss b/src/_functions.scss
index cbdb951..07d997b 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -93,7 +93,7 @@
         }
 
         @if $chroma-range != 1 {
-            $c: if($ref-l > .5, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0));
+            $c: if($ref-l > 50%, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0));
             $c: meta.call($chroma-easing, $c);
             $c: $chroma-range + (1 - $chroma-range) * $c;
         }
diff --git a/src/_themes.scss b/src/_themes.scss
index 7b9554e..2ca89cb 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -70,5 +70,17 @@ $static-themes: 'black' 'white' !default;
 @each $theme in $static-themes {
     @include iro.bem-theme(static-#{$theme}) {
         color: fn.global-color(--#{$theme}-transparent --800);
+
+        @include iro.bem-suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: fn.global-color(--base --50);
+            }
+        }
+    
+        @include iro.bem-suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: fn.global-color(--base --50);
+            }
+        }
     }
 }
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index f56a96c..650ec3f 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -4,13 +4,16 @@
 @include iro.props-namespace('card') {
     @include iro.props-store((
         --dims: (
-            --border:   fn.global-dim(--border --thin),
             --divider:  fn.global-dim(--border --thin),
             --pad-i:    fn.global-dim(--size --300),
             --pad-b:    fn.global-dim(--size --250),
             --spacing:  fn.global-dim(--size --200),
             --rounding: fn.global-dim(--rounding),
 
+            --hover: (
+                --offset-b: calc(-1 * fn.global-dim(--size --65)),
+            ),
+
             --key-focus: (
                 --border:        fn.global-dim(--key-focus --border),
                 --border-offset: fn.global-dim(--key-focus --border-offset),
@@ -19,13 +22,8 @@
         ),
         --colors: (
             --bg:       fn.global-color(--bg-l2),
-            --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),
@@ -44,20 +42,22 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          block;
-        border:           fn.dim(--border) solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
+        margin:           calc(-1 * fn.dim(--key-focus --border));
+        transition:       transform .2s;
+        border:           fn.dim(--key-focus --border-offset) solid transparent;
+        border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
         background-color: fn.color(--bg);
+        background-clip:  content-box;
 
         @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
-            &:focus-visible,
-            &:active {
-                border-color: fn.color(--hover --border);
+            &:active,
+            &:focus-visible {
+                transform: translateY(fn.dim(--hover --offset-b));
             }
 
             &:focus-visible {
-                border-color: fn.color(--key-focus --border);
-                outline:      fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border));
+                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);
             }
         }
@@ -71,15 +71,16 @@
             display:          block;
             inline-size:      100%;
             object-fit:       cover;
+            transition:       transform .2s, opacity .2s;
 
             &:first-child {
-                border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
-                border-start-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+                border-start-start-radius: fn.dim(--rounding);
+                border-start-end-radius:   fn.dim(--rounding);
             }
 
             &:last-child {
-                border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
-                border-end-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+                border-end-start-radius: fn.dim(--rounding);
+                border-end-end-radius:   fn.dim(--rounding);
             }
 
             @include iro.bem-next-elem('avatar') {
@@ -123,8 +124,12 @@
 
             @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                 &:hover,
-                &:active {
+                &:active,
+                &:focus-visible {
+                    transform: none;
+
                     @include iro.bem-elem('image') {
+                        transform:        translateY(fn.dim(--hover --offset-b));
                         opacity:          .75;
                         background-color: fn.color(--quiet --hover --image);
                     }