summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_config.scss10
-rw-r--r--src/_functions.scss2
-rw-r--r--src/_themes.scss12
-rw-r--r--src/objects/_card.scss41
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: (
116 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 100, 116 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 100,
117 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 100, 117 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 100,
118 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 100, 118 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 100,
119 --900: 108, 119 --900: 107,
120 ), 120 ),
121 121
122 --colors: ( 122 --colors: (
@@ -140,9 +140,9 @@ $theme-light: (
140 --full: 1, 140 --full: 1,
141 --muted: .1, 141 --muted: .1,
142 ), 142 ),
143 143
144 --palettes: ( 144 --palettes: (
145 --base: hsl(0, 0%, 98%) --grays --full, 145 --base: hsl(260, 20%, 98%) --grays --full,
146 --blue: oklch(56% .16 265.25) --colors --muted, 146 --blue: oklch(56% .16 265.25) --colors --muted,
147 --purple: oklch(56% .16 305.58) --colors --muted, 147 --purple: oklch(56% .16 305.58) --colors --muted,
148 --red: oklch(56% .16 18.69) --colors --muted, 148 --red: oklch(56% .16 18.69) --colors --muted,
@@ -200,9 +200,9 @@ $theme-dark: (
200 --full: 1, 200 --full: 1,
201 --muted: .3, 201 --muted: .3,
202 ), 202 ),
203 203
204 --palettes: ( 204 --palettes: (
205 --base: hsl(0, 0%, 20%) --grays --full, 205 --base: hsl(257, 6%, 18%) --grays --full,
206 --blue: oklch(56% .16 265.25) --colors --muted, 206 --blue: oklch(56% .16 265.25) --colors --muted,
207 --purple: oklch(56% .16 305.58) --colors --muted, 207 --purple: oklch(56% .16 305.58) --colors --muted,
208 --red: oklch(56% .16 18.69) --colors --muted, 208 --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 @@
93 } 93 }
94 94
95 @if $chroma-range != 1 { 95 @if $chroma-range != 1 {
96 $c: if($ref-l > .5, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0)); 96 $c: if($ref-l > 50%, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0));
97 $c: meta.call($chroma-easing, $c); 97 $c: meta.call($chroma-easing, $c);
98 $c: $chroma-range + (1 - $chroma-range) * $c; 98 $c: $chroma-range + (1 - $chroma-range) * $c;
99 } 99 }
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;
70@each $theme in $static-themes { 70@each $theme in $static-themes {
71 @include iro.bem-theme(static-#{$theme}) { 71 @include iro.bem-theme(static-#{$theme}) {
72 color: fn.global-color(--#{$theme}-transparent --800); 72 color: fn.global-color(--#{$theme}-transparent --800);
73
74 @include iro.bem-suffix('light') {
75 @media (prefers-color-scheme: light) {
76 background-color: fn.global-color(--base --50);
77 }
78 }
79
80 @include iro.bem-suffix('dark') {
81 @media (prefers-color-scheme: dark) {
82 background-color: fn.global-color(--base --50);
83 }
84 }
73 } 85 }
74} 86}
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 @@
4@include iro.props-namespace('card') { 4@include iro.props-namespace('card') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --border: fn.global-dim(--border --thin),
8 --divider: fn.global-dim(--border --thin), 7 --divider: fn.global-dim(--border --thin),
9 --pad-i: fn.global-dim(--size --300), 8 --pad-i: fn.global-dim(--size --300),
10 --pad-b: fn.global-dim(--size --250), 9 --pad-b: fn.global-dim(--size --250),
11 --spacing: fn.global-dim(--size --200), 10 --spacing: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding), 11 --rounding: fn.global-dim(--rounding),
13 12
13 --hover: (
14 --offset-b: calc(-1 * fn.global-dim(--size --65)),
15 ),
16
14 --key-focus: ( 17 --key-focus: (
15 --border: fn.global-dim(--key-focus --border), 18 --border: fn.global-dim(--key-focus --border),
16 --border-offset: fn.global-dim(--key-focus --border-offset), 19 --border-offset: fn.global-dim(--key-focus --border-offset),
@@ -19,13 +22,8 @@
19 ), 22 ),
20 --colors: ( 23 --colors: (
21 --bg: fn.global-color(--bg-l2), 24 --bg: fn.global-color(--bg-l2),
22 --border: fn.global-color(--border-mute),
23 --divider: fn.global-color(--border-mute), 25 --divider: fn.global-color(--border-mute),
24 26
25 --hover: (
26 --border: fn.global-color(--border),
27 ),
28
29 --key-focus: ( 27 --key-focus: (
30 --label: fn.global-color(--focus --text), 28 --label: fn.global-color(--focus --text),
31 --border: fn.global-color(--focus --border), 29 --border: fn.global-color(--focus --border),
@@ -44,20 +42,22 @@
44 42
45 @include iro.bem-object(iro.props-namespace()) { 43 @include iro.bem-object(iro.props-namespace()) {
46 display: block; 44 display: block;
47 border: fn.dim(--border) solid fn.color(--border); 45 margin: calc(-1 * fn.dim(--key-focus --border));
48 border-radius: fn.dim(--rounding); 46 transition: transform .2s;
47 border: fn.dim(--key-focus --border-offset) solid transparent;
48 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
49 background-color: fn.color(--bg); 49 background-color: fn.color(--bg);
50 background-clip: content-box;
50 51
51 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 52 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
52 &:hover, 53 &:hover,
53 &:focus-visible, 54 &:active,
54 &:active { 55 &:focus-visible {
55 border-color: fn.color(--hover --border); 56 transform: translateY(fn.dim(--hover --offset-b));
56 } 57 }
57 58
58 &:focus-visible { 59 &:focus-visible {
59 border-color: fn.color(--key-focus --border); 60 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
60 outline: fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border));
61 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 61 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
62 } 62 }
63 } 63 }
@@ -71,15 +71,16 @@
71 display: block; 71 display: block;
72 inline-size: 100%; 72 inline-size: 100%;
73 object-fit: cover; 73 object-fit: cover;
74 transition: transform .2s, opacity .2s;
74 75
75 &:first-child { 76 &:first-child {
76 border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 77 border-start-start-radius: fn.dim(--rounding);
77 border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 78 border-start-end-radius: fn.dim(--rounding);
78 } 79 }
79 80
80 &:last-child { 81 &:last-child {
81 border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 82 border-end-start-radius: fn.dim(--rounding);
82 border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 83 border-end-end-radius: fn.dim(--rounding);
83 } 84 }
84 85
85 @include iro.bem-next-elem('avatar') { 86 @include iro.bem-next-elem('avatar') {
@@ -123,8 +124,12 @@
123 124
124 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 125 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
125 &:hover, 126 &:hover,
126 &:active { 127 &:active,
128 &:focus-visible {
129 transform: none;
130
127 @include iro.bem-elem('image') { 131 @include iro.bem-elem('image') {
132 transform: translateY(fn.dim(--hover --offset-b));
128 opacity: .75; 133 opacity: .75;
129 background-color: fn.color(--quiet --hover --image); 134 background-color: fn.color(--quiet --hover --image);
130 } 135 }