From ef117e73dec37973b366722a56b2b5a17b9f0a2b Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
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