From ef117e73dec37973b366722a56b2b5a17b9f0a2b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 14 Oct 2024 16:15:34 +0200 Subject: Color adjustments, borderless cards --- src/_config.scss | 10 +++++----- src/_functions.scss | 2 +- src/_themes.scss | 12 ++++++++++++ src/objects/_card.scss | 41 +++++++++++++++++++++++------------------ 4 files changed, 41 insertions(+), 24 deletions(-) (limited to 'src') 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); } -- cgit v1.2.3-70-g09d2