diff options
-rw-r--r-- | src/_config.scss | 10 | ||||
-rw-r--r-- | src/_functions.scss | 2 | ||||
-rw-r--r-- | src/_themes.scss | 12 | ||||
-rw-r--r-- | src/objects/_card.scss | 41 |
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 | } |