summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_config.defaults.scss4
-rw-r--r--src/_core.vars.scss14
-rw-r--r--src/objects/_action-button.scss16
-rw-r--r--src/objects/_action-button.vars.scss176
-rw-r--r--src/objects/_alert.scss16
-rw-r--r--src/objects/_alert.vars.scss13
-rw-r--r--src/objects/_card.scss47
-rw-r--r--src/objects/_card.vars.scss9
-rw-r--r--src/objects/_popover.scss10
-rw-r--r--src/objects/_popover.vars.scss12
10 files changed, 256 insertions, 61 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index cf23f29..ac20cb9 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -127,7 +127,7 @@ $theme-light: (
127 )), 127 )),
128 128
129 --constants: ( 129 --constants: (
130 --shadow: rgba(#000, .15), 130 --shadow: rgba(#000, .1),
131 ), 131 ),
132); 132);
133 133
@@ -182,6 +182,6 @@ $theme-dark: (
182 )), 182 )),
183 183
184 --constants: ( 184 --constants: (
185 --shadow: rgba(#000, .5), 185 --shadow: rgba(#000, .1),
186 ), 186 ),
187); 187);
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 0a94534..04c0f63 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -89,11 +89,17 @@ $border-width--thick: props.def(--border-width--thick, 4px) !default;
89$border-width--medium: props.def(--border-width--medium, 2px) !default; 89$border-width--medium: props.def(--border-width--medium, 2px) !default;
90$border-width--thin: props.def(--border-width--thin, 1px) !default; 90$border-width--thin: props.def(--border-width--thin, 1px) !default;
91 91
92$shadow--x: props.def(--shadow--x, 0) !default; 92$shadow--l1--x: props.def(--shadow--l1--x, 0) !default;
93$shadow--y: props.def(--shadow--y, 1px) !default; 93$shadow--l1--y: props.def(--shadow--l1--y, 2px) !default;
94$shadow--blur: props.def(--shadow--blur, 4px) !default; 94$shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default;
95$shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default;
95 96
96$rounding: props.def(--rounding, 4px) !default; 97$shadow--l2--x: props.def(--shadow--l2--x, 0) !default;
98$shadow--l2--y: props.def(--shadow--l2--y, 4px) !default;
99$shadow--l2--blur: props.def(--shadow--l2--blur, 8px) !default;
100$shadow--l2--grow: props.def(--shadow--l2--grow, -3px) !default;
101
102$rounding: props.def(--rounding, 8px) !default;
97 103
98$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default; 104$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
99$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; 105$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 1dd4b84..7863f50 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -30,6 +30,12 @@
30 color: props.get($theme, list.join($key, --label-color)...); 30 color: props.get($theme, list.join($key, --label-color)...);
31 background-color: props.get($theme, list.join($key, --bg-color)...); 31 background-color: props.get($theme, list.join($key, --bg-color)...);
32 border-color: props.get($theme, list.join($key, --border-color)...); 32 border-color: props.get($theme, list.join($key, --border-color)...);
33 box-shadow:
34 props.get(vars.$shadow-x)
35 props.get(vars.$shadow-y)
36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...);
33 39
34 &:hover, 40 &:hover,
35 &:focus-visible { 41 &:focus-visible {
@@ -42,6 +48,7 @@
42 color: props.get($theme, list.join($key, --active --label-color)...); 48 color: props.get($theme, list.join($key, --active --label-color)...);
43 background-color: props.get($theme, list.join($key, --active --bg-color)...); 49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
44 border-color: props.get($theme, list.join($key, --active --border-color)...); 50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none;
45 } 52 }
46 } 53 }
47 54
@@ -56,6 +63,7 @@
56 color: props.get($theme, list.join($key, --quiet --label-color)...); 63 color: props.get($theme, list.join($key, --quiet --label-color)...);
57 background-color: transparent; 64 background-color: transparent;
58 border-color: transparent; 65 border-color: transparent;
66 box-shadow: none;
59 67
60 &:hover, 68 &:hover,
61 &:focus-visible { 69 &:focus-visible {
@@ -72,7 +80,7 @@
72 } 80 }
73 } 81 }
74 82
75 @include bem.is('selected') { 83 @include bem.is('selected', 'badge') {
76 color: props.get($theme, list.join($key, --selected --disabled --label-color)...); 84 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
77 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 85 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
78 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); 86 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
@@ -98,6 +106,12 @@
98 } 106 }
99 } 107 }
100 } 108 }
109
110 @include bem.is('badge') {
111 color: props.get($theme, list.join($key, --selected --label-color)...);
112 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
113 border-color: props.get($theme, list.join($key, --selected --border-color)...);
114 }
101} 115}
102 116
103@mixin styles { 117@mixin styles {
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 8c3d510..1a9be25 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -4,32 +4,38 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$line-height: props.def(--o-action-button--line-height, 1.4) !default; 6$line-height: props.def(--o-action-button--line-height, 1.4) !default;
7$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
8$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default;
9$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
10$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
11$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; 7$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
12$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; 8$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
13$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
14 9
15$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default; 10$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--75)) !default;
16$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default; 11$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
17$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default; 12$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--100)) !default;
18$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; 13$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
19$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; 14$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
20 15
21$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default; 16$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--100)) !default;
22$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--100)) !default; 17$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default;
23$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default; 18$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150)) !default;
19$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
20$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
21
22$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--150)) !default;
23$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--75)) !default;
24$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
24$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; 25$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
25$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; 26$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
26 27
27$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default; 28$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--175)) !default;
28$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--150)) !default; 29$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--100)) !default;
29$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default; 30$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
30$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; 31$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
31$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; 32$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
32 33
34$shadow-x: props.def(--o-action-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
35$shadow-y: props.def(--o-action-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
36$shadow-blur: props.def(--o-action-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
37$shadow-grow: props.def(--o-action-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
38
33$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 39$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
34$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 40$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
35$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 41$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
@@ -44,24 +50,25 @@ $themes: props.def(--o-action-button, (), 'color');
44 50
45$default-theme-override: () !default; 51$default-theme-override: () !default;
46$default-theme: map.deep-merge(( 52$default-theme: map.deep-merge((
47 --bg-color: props.get(core.$theme, --base, --75), 53 --bg-color: props.get(core.$theme, --bg-l2),
48 --label-color: props.get(core.$theme, --text), 54 --label-color: props.get(core.$theme, --text),
49 --border-color: props.get(core.$theme, --border-strong), 55 --border-color: props.get(core.$theme, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border),
56 --shadow-color: props.get(core.$theme, --shadow),
50 57
51 --hover: ( 58 --hover: (
52 --bg-color: props.get(core.$theme, --border-mute), 59 --bg-color: props.get(core.$theme, --border-mute),
53 --label-color: props.get(core.$theme, --heading), 60 --label-color: props.get(core.$theme, --heading),
54 --border-color: props.get(core.$theme, --text-mute-more), 61 --border-color: props.get(core.$theme, --border-strong),
55 ), 62 ),
56 63
57 --active: ( 64 --active: (
58 --bg-color: props.get(core.$theme, --border), 65 --bg-color: props.get(core.$theme, --border),
59 --label-color: props.get(core.$theme, --heading), 66 --label-color: props.get(core.$theme, --heading),
60 --border-color: props.get(core.$theme, --text-mute), 67 --border-color: props.get(core.$theme, --text-mute-more),
61 ), 68 ),
62 69
63 --disabled: ( 70 --disabled: (
64 --bg-color: props.get(core.$theme, --bg-l1), 71 --bg-color: transparent,
65 --label-color: props.get(core.$theme, --border-strong), 72 --label-color: props.get(core.$theme, --border-strong),
66 --border-color: props.get(core.$theme, --border), 73 --border-color: props.get(core.$theme, --border),
67 ), 74 ),
@@ -72,20 +79,20 @@ $default-theme: map.deep-merge((
72 ), 79 ),
73 80
74 --selected: ( 81 --selected: (
75 --bg-color: props.get(core.$theme, --heading), 82 --bg-color: props.get(core.$theme, --text),
76 --label-color: props.get(core.$theme, --base, --50), 83 --label-color: props.get(core.$theme, --base, --50),
77 --border-color: props.get(core.$theme, --heading), 84 --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
78 85
79 --hover: ( 86 --hover: (
80 --bg-color: props.get(core.$theme, --text), 87 --bg-color: props.get(core.$theme, --heading),
81 --label-color: props.get(core.$theme, --base, --50), 88 --label-color: props.get(core.$theme, --base, --50),
82 --border-color: props.get(core.$theme, --text), 89 --border-color: props.get(core.$theme, --heading),
83 ), 90 ),
84 91
85 --active: ( 92 --active: (
86 --bg-color: props.get(core.$theme, --text-mute), 93 --bg-color: props.get(core.$theme, --heading),
87 --label-color: props.get(core.$theme, --base, --50), 94 --label-color: props.get(core.$theme, --base, --50),
88 --border-color: props.get(core.$theme, --text-mute), 95 --border-color: props.get(core.$theme, --heading),
89 ), 96 ),
90 97
91 --disabled: ( 98 --disabled: (
@@ -115,25 +122,47 @@ $default-theme: map.deep-merge((
115), $default-theme-override) !default; 122), $default-theme-override) !default;
116$default-theme: props.def(--o-action-button, $default-theme, 'color'); 123$default-theme: props.def(--o-action-button, $default-theme, 'color');
117 124
125$default-theme-dark-override: () !default;
126$default-theme-dark: map.deep-merge((
127 --bg-color: props.get(core.$theme, --border-mute),
128 --border-color: props.get(core.$theme, --border-mute),
129
130 --hover: (
131 --bg-color: props.get(core.$theme, --border),
132 --border-color: props.get(core.$theme, --border),
133 ),
134
135 --active: (
136 --bg-color: props.get(core.$theme, --border-strong),
137 --border-color: props.get(core.$theme, --border-strong),
138 ),
139
140 --selected: (
141 --border-color: props.get(core.$theme, --text),
142 ),
143), $default-theme-override) !default;
144$default-theme-dark: props.def(--o-action-button, $default-theme-dark, 'dark');
145
118@each $theme in map.keys(props.get(core.$transparent-colors)) { 146@each $theme in map.keys(props.get(core.$transparent-colors)) {
119 $button-theme: --static-#{string.slice($theme, 3)}; 147 $button-theme: --static-#{string.slice($theme, 3)};
120 148
121 $themes: props.merge($themes, ( 149 $themes: props.merge($themes, (
122 $button-theme: ( 150 $button-theme: (
123 --bg-color: props.get(core.$transparent-colors, $theme, --100), 151 --bg-color: props.get(core.$transparent-colors, $theme, --200),
124 --label-color: props.get(core.$transparent-colors, $theme, --900), 152 --label-color: props.get(core.$transparent-colors, $theme, --900),
125 --border-color: props.get(core.$transparent-colors, $theme, --400), 153 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
154 --shadow-color: props.get(core.$transparent-colors, --black, --200),
126 155
127 --hover: ( 156 --hover: (
128 --bg-color: props.get(core.$transparent-colors, $theme, --300), 157 --bg-color: props.get(core.$transparent-colors, $theme, --300),
129 --label-color: props.get(core.$transparent-colors, $theme, --900), 158 --label-color: props.get(core.$transparent-colors, $theme, --900),
130 --border-color: props.get(core.$transparent-colors, $theme, --500), 159 --border-color: props.get(core.$transparent-colors, $theme, --400),
131 ), 160 ),
132 161
133 --active: ( 162 --active: (
134 --bg-color: props.get(core.$transparent-colors, $theme, --400), 163 --bg-color: props.get(core.$transparent-colors, $theme, --400),
135 --label-color: props.get(core.$transparent-colors, $theme, --900), 164 --label-color: props.get(core.$transparent-colors, $theme, --900),
136 --border-color: props.get(core.$transparent-colors, $theme, --600), 165 --border-color: props.get(core.$transparent-colors, $theme, --500),
137 ), 166 ),
138 167
139 --disabled: ( 168 --disabled: (
@@ -150,7 +179,7 @@ $default-theme: props.def(--o-action-button, $default-theme, 'color');
150 --selected: ( 179 --selected: (
151 --bg-color: props.get(core.$transparent-colors, $theme, --800), 180 --bg-color: props.get(core.$transparent-colors, $theme, --800),
152 --label-color: props.get(core.$transparent-colors, $theme, --text), 181 --label-color: props.get(core.$transparent-colors, $theme, --text),
153 --border-color: props.get(core.$transparent-colors, $theme, --100), 182 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
154 183
155 --hover: ( 184 --hover: (
156 --bg-color: props.get(core.$transparent-colors, $theme, --900), 185 --bg-color: props.get(core.$transparent-colors, $theme, --900),
@@ -175,12 +204,12 @@ $default-theme: props.def(--o-action-button, $default-theme, 'color');
175 --label-color: props.get(core.$transparent-colors, $theme, --900), 204 --label-color: props.get(core.$transparent-colors, $theme, --900),
176 205
177 --hover: ( 206 --hover: (
178 --bg-color: props.get(core.$transparent-colors, $theme, --300), 207 --bg-color: props.get(core.$transparent-colors, $theme, --200),
179 --label-color: props.get(core.$transparent-colors, $theme, --900), 208 --label-color: props.get(core.$transparent-colors, $theme, --900),
180 ), 209 ),
181 210
182 --active: ( 211 --active: (
183 --bg-color: props.get(core.$transparent-colors, $theme, --400), 212 --bg-color: props.get(core.$transparent-colors, $theme, --300),
184 --label-color: props.get(core.$transparent-colors, $theme, --900), 213 --label-color: props.get(core.$transparent-colors, $theme, --900),
185 ), 214 ),
186 215
@@ -191,3 +220,86 @@ $default-theme: props.def(--o-action-button, $default-theme, 'color');
191 ) 220 )
192 )); 221 ));
193} 222}
223
224$themes-config: (
225 accent: --accent,
226 positive: --positive,
227 negative: --negative,
228 warning: --warning,
229) !default;
230
231@each $theme, $key in $themes-config {
232 $themes: props.merge($themes, (
233 --#{$theme}: (
234 --bg-color: props.get(core.$theme, $key, --200),
235 --label-color: props.get(core.$theme, $key, --1100),
236 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
237 --shadow-color: props.get(core.$theme, $key, --200),
238
239 --hover: (
240 --bg-color: props.get(core.$theme, $key, --300),
241 --label-color: props.get(core.$theme, $key, --1200),
242 --border-color: props.get(core.$theme, $key, --600),
243 ),
244
245 --active: (
246 --bg-color: props.get(core.$theme, $key, --400),
247 --label-color: props.get(core.$theme, $key, --1300),
248 --border-color: props.get(core.$theme, $key, --800),
249 ),
250
251 --disabled: (
252 --bg-color: props.get(core.$theme, --bg-l1),
253 --label-color: props.get(core.$theme, --border-strong),
254 --border-color: props.get(core.$theme, --border),
255 ),
256
257 --key-focus: (
258 --border-color: props.get(core.$theme, --focus, --border),
259 --outline-color: props.get(core.$theme, --focus, --outline),
260 ),
261
262 --selected: (
263 --bg-color: props.get(core.$theme, #{$key}-static, --900),
264 --label-color: props.get(core.$theme, #{$key}-static, --900-text),
265 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
266
267 --hover: (
268 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
269 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
270 --border-color: props.get(core.$theme, #{$key}-static, --1000),
271 ),
272
273 --active: (
274 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
275 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
276 --border-color: props.get(core.$theme, #{$key}-static, --1100),
277 ),
278
279 --disabled: (
280 --bg-color: props.get(core.$theme, --border-mute),
281 --label-color: props.get(core.$theme, --border-strong),
282 --border-color: props.get(core.$theme, --border-mute),
283 ),
284 ),
285
286 --quiet: (
287 --label-color: props.get(core.$theme, $key, --1100),
288
289 --hover: (
290 --bg-color: props.get(core.$theme, $key, --200),
291 --label-color: props.get(core.$theme, $key, --1200),
292 ),
293
294 --active: (
295 --bg-color: props.get(core.$theme, $key, --300),
296 --label-color: props.get(core.$theme, $key, --1300),
297 ),
298
299 --disabled: (
300 --label-color: props.get(core.$theme, --border-strong),
301 ),
302 ),
303 )
304 ));
305}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 825f7ce..de0e913 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -14,12 +14,26 @@
14 padding-block: props.get(vars.$pad-b); 14 padding-block: props.get(vars.$pad-b);
15 padding-inline: props.get(vars.$pad-i); 15 padding-inline: props.get(vars.$pad-i);
16 background-color: props.get(vars.$bg-color); 16 background-color: props.get(vars.$bg-color);
17 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 17 border: props.get(vars.$border-width) solid transparent;
18 border-color: props.get(vars.$border-color);
18 border-radius: props.get(vars.$rounding); 19 border-radius: props.get(vars.$rounding);
20 box-shadow:
21 props.get(vars.$shadow-x)
22 props.get(vars.$shadow-y)
23 props.get(vars.$shadow-blur)
24 props.get(vars.$shadow-grow)
25 props.get(vars.$shadow-color);
19 26
20 @each $mod, $theme in vars.$themes-config { 27 @each $mod, $theme in vars.$themes-config {
21 @include bem.modifier($mod) { 28 @include bem.modifier($mod) {
29 background-color: props.get(vars.$themes, $theme, --bg-color);
22 border-color: props.get(vars.$themes, $theme, --border-color); 30 border-color: props.get(vars.$themes, $theme, --border-color);
31 box-shadow:
32 props.get(vars.$shadow-x)
33 props.get(vars.$shadow-y)
34 props.get(vars.$shadow-blur)
35 props.get(vars.$shadow-grow)
36 props.get(vars.$themes, $theme, --shadow-color);
23 } 37 }
24 } 38 }
25 } 39 }
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index 53c9e68..f23928d 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -6,8 +6,15 @@ $pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default;
6$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; 6$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default;
7$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; 7$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default;
8 8
9$shadow-x: props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default;
10$shadow-y: props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default;
11$shadow-blur: props.def(--o-alert--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
12$shadow-grow: props.def(--o-alert--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
13
9$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 14$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
10$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; 15$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute), 'color') !default;
16
17$shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default;
11 18
12$themes-config: ( 19$themes-config: (
13 accent: --accent, 20 accent: --accent,
@@ -21,7 +28,9 @@ $themes: props.def(--o-alert, (), 'color');
21@each $theme, $key in $themes-config { 28@each $theme, $key in $themes-config {
22 $themes: props.merge($themes, ( 29 $themes: props.merge($themes, (
23 $key: ( 30 $key: (
24 --border-color: props.get(core.$theme, $key, --700), 31 --bg-color: props.get(core.$theme, --bg-l2),
32 --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800),
33 --shadow-color: props.get(core.$theme, $key, --200),
25 ) 34 )
26 )); 35 ));
27} 36}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index c87e676..9f70420 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,12 +14,18 @@
14 position: relative; 14 position: relative;
15 display: flex; 15 display: flex;
16 flex-direction: column; 16 flex-direction: column;
17 margin: calc(-1 * props.get(vars.$key-focus--border-width));
18 background-color: props.get(vars.$bg-color); 17 background-color: props.get(vars.$bg-color);
19 background-clip: content-box; 18 background-clip: content-box;
20 border: props.get(vars.$key-focus--border-offset) solid transparent; 19 border: 1px solid transparent;
21 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 20 border-color: props.get(vars.$border-color);
21 border-radius: props.get(vars.$rounding);
22 transition: transform .2s; 22 transition: transform .2s;
23 box-shadow:
24 props.get(vars.$shadow-x)
25 props.get(vars.$shadow-y)
26 props.get(vars.$shadow-blur)
27 props.get(vars.$shadow-grow)
28 props.get(vars.$shadow-color);
23 29
24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 30 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25 &:hover, 31 &:hover,
@@ -39,7 +45,10 @@
39 } 45 }
40 46
41 &:focus-visible { 47 &:focus-visible {
42 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 48 margin: calc(-1 * props.get(vars.$key-focus--border-width));
49 border: props.get(vars.$key-focus--border-offset) solid transparent;
50 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
51 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
43 box-shadow: 52 box-shadow:
44 0 53 0
45 0 54 0
@@ -64,13 +73,13 @@
64 transition: background-color .2s, transform .2s, opacity .2s; 73 transition: background-color .2s, transform .2s, opacity .2s;
65 74
66 &:first-child { 75 &:first-child {
67 border-start-start-radius: props.get(vars.$rounding); 76 border-start-start-radius: calc(props.get(vars.$rounding) - 1px);
68 border-start-end-radius: props.get(vars.$rounding); 77 border-start-end-radius: calc(props.get(vars.$rounding) - 1px);
69 } 78 }
70 79
71 &:last-child { 80 &:last-child {
72 border-end-start-radius: props.get(vars.$rounding); 81 border-end-start-radius: calc(props.get(vars.$rounding) - 1px);
73 border-end-end-radius: props.get(vars.$rounding); 82 border-end-end-radius: calc(props.get(vars.$rounding) - 1px);
74 } 83 }
75 84
76 @include bem.next-elem('avatar') { 85 @include bem.next-elem('avatar') {
@@ -119,8 +128,8 @@
119 visibility 0s .2s linear; 128 visibility 0s .2s linear;
120 129
121 @include bem.next-elem('image') { 130 @include bem.next-elem('image') {
122 border-start-start-radius: props.get(vars.$rounding); 131 border-start-start-radius: calc(props.get(vars.$rounding) - 1px);
123 border-start-end-radius: props.get(vars.$rounding); 132 border-start-end-radius: calc(props.get(vars.$rounding) - 1px);
124 } 133 }
125 } 134 }
126 } 135 }
@@ -148,6 +157,7 @@
148 margin-inline: 0; 157 margin-inline: 0;
149 background-color: transparent; 158 background-color: transparent;
150 border: 0; 159 border: 0;
160 box-shadow: none;
151 161
152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 162 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
153 &:hover, 163 &:hover,
@@ -173,6 +183,9 @@
173 box-shadow: none; 183 box-shadow: none;
174 184
175 @include bem.elem('image') { 185 @include bem.elem('image') {
186 margin: calc(-1 * props.get(vars.$key-focus--border-width));
187 border: props.get(vars.$key-focus--border-offset) solid transparent;
188 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
176 background-color: props.get(vars.$quiet--hover--image-color); 189 background-color: props.get(vars.$quiet--hover--image-color);
177 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 190 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
178 box-shadow: 191 box-shadow:
@@ -188,11 +201,15 @@
188 201
189 @include bem.elem('image') { 202 @include bem.elem('image') {
190 position: relative; 203 position: relative;
191 margin: calc(-1 * props.get(vars.$key-focus--border-width));
192 background-color: props.get(vars.$quiet--image-color); 204 background-color: props.get(vars.$quiet--image-color);
193 background-clip: padding-box; 205 background-clip: padding-box;
194 border: props.get(vars.$key-focus--border-offset) solid transparent; 206 border-radius: props.get(vars.$rounding);
195 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 207 box-shadow:
208 props.get(vars.$shadow-x)
209 props.get(vars.$shadow-y)
210 props.get(vars.$shadow-blur)
211 props.get(vars.$shadow-grow)
212 props.get(vars.$shadow-color);
196 } 213 }
197 214
198 @include bem.elem('body') { 215 @include bem.elem('body') {
@@ -220,11 +237,11 @@
220 237
221 &:first-child { 238 &:first-child {
222 border-start-end-radius: 0; 239 border-start-end-radius: 0;
223 border-end-start-radius: props.get(vars.$rounding); 240 border-end-start-radius: calc(props.get(vars.$rounding) - 1px);
224 } 241 }
225 242
226 &:last-child { 243 &:last-child {
227 border-start-end-radius: props.get(vars.$rounding); 244 border-start-end-radius: calc(props.get(vars.$rounding) - 1px);
228 border-end-start-radius: 0; 245 border-end-start-radius: 0;
229 } 246 }
230 } 247 }
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8adbcde..3859b12 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -16,7 +16,14 @@ $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.ge
16$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 16$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
17$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 17$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
18 18
19$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l2--x)) !default;
20$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l2--y)) !default;
21$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
22$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
23
24$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
19$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 25$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
26$border-color: props.def(--o-card--border-color, props.get(core.$theme, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border), 'color') !default;
20$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; 27$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
21 28
22$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; 29$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
@@ -25,3 +32,5 @@ $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.g
25 32
26$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default; 33$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
27$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default; 34$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
35
36$border-color-dark: props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 3fe6310..4356dff 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -19,10 +19,16 @@
19 margin: 0; 19 margin: 0;
20 color: currentColor; 20 color: currentColor;
21 background-color: props.get(vars.$bg-color); 21 background-color: props.get(vars.$bg-color);
22 filter: props.get(vars.$filter); 22 border: props.get(vars.$border-width) solid transparent;
23 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 23 border-color: props.get(vars.$border-color);
24 border-radius: props.get(vars.$rounding); 24 border-radius: props.get(vars.$rounding);
25 transform: translate(var(--x), var(--y)); 25 transform: translate(var(--x), var(--y));
26 box-shadow:
27 props.get(vars.$shadow-x)
28 props.get(vars.$shadow-y)
29 props.get(vars.$shadow-blur)
30 props.get(vars.$shadow-grow)
31 props.get(vars.$shadow-color);
26 32
27 @include bem.modifier('up-left') { 33 @include bem.modifier('up-left') {
28 transform: translate(var(--x), calc(var(--y) - 100%)); 34 transform: translate(var(--x), calc(var(--y) - 100%));
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
index b76112e..451cc18 100644
--- a/src/objects/_popover.vars.scss
+++ b/src/objects/_popover.vars.scss
@@ -9,6 +9,14 @@ $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--
9$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; 9$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default;
10$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; 10$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default;
11 11
12$shadow-x: props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default;
13$shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default;
14$shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
15$shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
16
12$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 17$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
13$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border), 'color') !default; 18$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border), 'color') !default;
14$filter: props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow)), 'color') !default; 19
20$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default;
21
22$border-color-dark: props.def(--o-popover--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-22 22:16:27 +0000