summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_config.defaults.scss12
-rw-r--r--src/_core.vars.scss15
-rw-r--r--src/layouts/_card-list.scss28
-rw-r--r--src/layouts/_card-list.vars.scss2
-rw-r--r--src/objects/_action-button.scss43
-rw-r--r--src/objects/_action-button.vars.scss178
-rw-r--r--src/objects/_alert.scss16
-rw-r--r--src/objects/_alert.vars.scss13
-rw-r--r--src/objects/_card.scss128
-rw-r--r--src/objects/_card.vars.scss6
-rw-r--r--src/objects/_figure.vars.scss10
-rw-r--r--src/objects/_popover.scss10
-rw-r--r--src/objects/_popover.vars.scss12
-rw-r--r--src/objects/_text-field.vars.scss2
14 files changed, 363 insertions, 112 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index cf23f29..3f02ecc 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -124,10 +124,14 @@ $theme-light: (
124 --bg-l2: --base --50, 124 --bg-l2: --base --50,
125 --bg-l1: --base --100, 125 --bg-l1: --base --100,
126 --bg-base: --base --200, 126 --bg-base: --base --200,
127
128 --box: (
129 --border: --base --200,
130 ),
127 )), 131 )),
128 132
129 --constants: ( 133 --constants: (
130 --shadow: rgba(#000, .15), 134 --shadow: rgba(#000, .1),
131 ), 135 ),
132); 136);
133 137
@@ -182,6 +186,10 @@ $theme-dark: (
182 )), 186 )),
183 187
184 --constants: ( 188 --constants: (
185 --shadow: rgba(#000, .5), 189 --shadow: rgba(#000, .1),
190
191 --box: (
192 --border: rgba(#000, .1),
193 ),
186 ), 194 ),
187); 195);
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 0a94534..7c546d7 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -89,11 +89,18 @@ $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;
103$rounding--sm: props.def(--rounding--sm, 4px) !default;
97 104
98$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default; 105$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; 106$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8ef40c5..a1655be 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -6,6 +6,7 @@
6 6
7@forward 'card-list.vars'; 7@forward 'card-list.vars';
8@use 'card-list.vars' as vars; 8@use 'card-list.vars' as vars;
9@use '../objects/card.vars' as card;
9 10
10@mixin styles { 11@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
@@ -15,6 +16,33 @@
15 flex-direction: column; 16 flex-direction: column;
16 gap: props.get(vars.$row-gap); 17 gap: props.get(vars.$row-gap);
17 18
19 @include bem.modifier('merge') {
20 position: relative;
21 gap: 0;
22
23 @include bem.elem('card') {
24 transition: none;
25
26 &:not(:last-child) {
27 margin-bottom: calc(-1 * props.get(card.$border-width));
28 border-end-start-radius: 0;
29 border-end-end-radius: 0;
30 }
31
32 &:hover,
33 &:active,
34 &:focus-visible {
35 z-index: 10;
36 transform: none;
37 }
38
39 @include bem.next-twin-elem {
40 border-start-start-radius: 0;
41 border-start-end-radius: 0;
42 }
43 }
44 }
45
18 @include bem.modifier('quiet') { 46 @include bem.modifier('quiet') {
19 row-gap: props.get(vars.$quiet--row-gap); 47 row-gap: props.get(vars.$quiet--row-gap);
20 } 48 }
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index f77bfbf..b489596 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,7 +1,7 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default; 4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--50)) !default;
5$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; 5$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
6 6
7$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default; 7$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 1dd4b84..f4a9a46 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,36 @@
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;
52 }
53 }
54
55 @include bem.modifier('static') {
56 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
57 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
58 border-color: transparent;
59 box-shadow: none;
60
61 &:link,
62 &:visited,
63 &:enabled {
64 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
65 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
66 border-color: transparent;
67 box-shadow: none;
68
69 &:hover,
70 &:focus-visible {
71 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
72 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
73 border-color: transparent;
74 }
75
76 &:active {
77 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
79 border-color: transparent;
80 }
45 } 81 }
46 } 82 }
47 83
@@ -56,6 +92,7 @@
56 color: props.get($theme, list.join($key, --quiet --label-color)...); 92 color: props.get($theme, list.join($key, --quiet --label-color)...);
57 background-color: transparent; 93 background-color: transparent;
58 border-color: transparent; 94 border-color: transparent;
95 box-shadow: none;
59 96
60 &:hover, 97 &:hover,
61 &:focus-visible { 98 &:focus-visible {
@@ -77,6 +114,12 @@
77 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 114 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)...); 115 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
79 116
117 @include bem.modifier('static') {
118 color: props.get($theme, list.join($key, --selected --label-color)...);
119 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
120 border-color: props.get($theme, list.join($key, --selected --border-color)...);
121 }
122
80 &:link, 123 &:link,
81 &:visited, 124 &:visited,
82 &:enabled { 125 &:enabled {
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 8c3d510..84bb415 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--sm)) !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--115)) !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--115)) !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--40)) !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--160)) !default;
23$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--65)) !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--200)) !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--85)) !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..6b80e2f 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,36 +14,29 @@
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);
19 background-clip: content-box; 17 background-clip: content-box;
20 border: props.get(vars.$key-focus--border-offset) solid transparent; 18 background-color: props.get(vars.$bg-color);
21 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 19 border: props.get(vars.$border-width) solid transparent;
22 transition: transform .2s; 20 border-color: props.get(vars.$border-color);
21 border-radius: props.get(vars.$rounding);
22 transition: transform .2s, background-color .2s, border-color .2s;
23 23
24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25 &:hover, 25 &:hover,
26 &:active, 26 &:active,
27 &:focus-visible { 27 &:focus-visible {
28 transform: translateY(props.get(vars.$hover--offset-b)); 28 transform: translateY(props.get(vars.$hover--offset-b));
29 29 background-color: props.get(vars.$hover--bg-color);
30 @include bem.elem('body') { 30 border-color: props.get(vars.$hover--border-color);
31 @include bem.modifier('hidden') {
32 visibility: visible;
33 opacity: 1;
34 transition:
35 opacity .2s ease,
36 visibility .2s linear;
37 }
38 }
39 } 31 }
40 32
41 &:focus-visible { 33 &:focus-visible {
42 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 34 margin: calc(-1 * props.get(vars.$key-focus--border-width));
35 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
36 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
37 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
43 box-shadow: 38 box-shadow:
44 0 39 0 0 0
45 0
46 0
47 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 40 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
48 props.get(vars.$key-focus--outline-color); 41 props.get(vars.$key-focus--outline-color);
49 } 42 }
@@ -64,13 +57,13 @@
64 transition: background-color .2s, transform .2s, opacity .2s; 57 transition: background-color .2s, transform .2s, opacity .2s;
65 58
66 &:first-child { 59 &:first-child {
67 border-start-start-radius: props.get(vars.$rounding); 60 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
68 border-start-end-radius: props.get(vars.$rounding); 61 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
69 } 62 }
70 63
71 &:last-child { 64 &:last-child {
72 border-end-start-radius: props.get(vars.$rounding); 65 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
73 border-end-end-radius: props.get(vars.$rounding); 66 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
74 } 67 }
75 68
76 @include bem.next-elem('avatar') { 69 @include bem.next-elem('avatar') {
@@ -103,26 +96,6 @@
103 margin-block: -100em 100em; 96 margin-block: -100em 100em;
104 content: ''; 97 content: '';
105 } 98 }
106
107 @include bem.modifier('hidden') {
108 position: absolute;
109 inset-block-end: 0;
110 inset-inline: 0;
111 z-index: 10;
112 visibility: hidden;
113 background-color: props.get(vars.$bg-color);
114 //border-end-start-radius: props.get(vars.$rounding);
115 //border-end-end-radius: props.get(vars.$rounding);
116 opacity: 0;
117 transition:
118 opacity .2s ease,
119 visibility 0s .2s linear;
120
121 @include bem.next-elem('image') {
122 border-start-start-radius: props.get(vars.$rounding);
123 border-start-end-radius: props.get(vars.$rounding);
124 }
125 }
126 } 99 }
127 100
128 @include bem.elem('content') { 101 @include bem.elem('content') {
@@ -148,31 +121,32 @@
148 margin-inline: 0; 121 margin-inline: 0;
149 background-color: transparent; 122 background-color: transparent;
150 border: 0; 123 border: 0;
124 box-shadow: none;
151 125
152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 126 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
153 &:hover, 127 &:hover,
154 &:active, 128 &:active,
155 &:focus-visible { 129 &:focus-visible {
156 transform: none; 130 transform: none;
131 background-color: transparent;
157 132
158 @include bem.elem('image') { 133 @include bem.elem('image') {
159 background-color: props.get(vars.$quiet--hover--image-color); 134 background-color: props.get(vars.$quiet--hover--image-color);
160 opacity: .75; 135 opacity: .75;
161 transform: translateY(props.get(vars.$hover--offset-b)); 136 transform: translateY(props.get(vars.$hover--offset-b));
162 } 137 }
163
164 @include bem.elem('body') {
165 @include bem.modifier('hidden') {
166 transform: translateY(props.get(vars.$hover--offset-b));
167 }
168 }
169 } 138 }
170 139
171 &:focus-visible { 140 &:focus-visible {
141 margin: 0;
172 outline: none; 142 outline: none;
143 border: 0;
173 box-shadow: none; 144 box-shadow: none;
174 145
175 @include bem.elem('image') { 146 @include bem.elem('image') {
147 margin: calc(-1 * props.get(vars.$key-focus--border-width));
148 border: props.get(vars.$key-focus--border-offset) solid transparent;
149 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
176 background-color: props.get(vars.$quiet--hover--image-color); 150 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); 151 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
178 box-shadow: 152 box-shadow:
@@ -188,21 +162,14 @@
188 162
189 @include bem.elem('image') { 163 @include bem.elem('image') {
190 position: relative; 164 position: relative;
191 margin: calc(-1 * props.get(vars.$key-focus--border-width));
192 background-color: props.get(vars.$quiet--image-color); 165 background-color: props.get(vars.$quiet--image-color);
193 background-clip: padding-box; 166 background-clip: padding-box;
194 border: props.get(vars.$key-focus--border-offset) solid transparent; 167 border-radius: props.get(vars.$rounding);
195 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
196 } 168 }
197 169
198 @include bem.elem('body') { 170 @include bem.elem('body') {
199 padding: 0; 171 padding: 0;
200 padding-block-start: props.get(vars.$spacing); 172 padding-block-start: props.get(vars.$spacing);
201
202 @include bem.modifier('hidden') {
203 padding-block: props.get(vars.$pad-b);
204 padding-inline: props.get(vars.$pad-i);
205 }
206 } 173 }
207 174
208 @include bem.elem('footer') { 175 @include bem.elem('footer') {
@@ -210,6 +177,49 @@
210 } 177 }
211 } 178 }
212 179
180 @include bem.modifier('thumbnail') {
181 @include bem.elem('image') {
182 inline-size: calc(100% + 2 * props.get(vars.$border-width));
183 margin: calc(-1 * props.get(vars.$border-width));
184 border-radius: props.get(vars.$rounding);
185 }
186
187 @include bem.elem('body') {
188 position: absolute;
189 inset-block-end: calc(-1 * props.get(vars.$border-width));
190 inset-inline: calc(-1 * props.get(vars.$border-width));
191 z-index: 10;
192 visibility: hidden;
193 background-color: props.get(vars.$hover--bg-color);
194 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
195 border-color: transparent;
196 border-style: solid;
197 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
198 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
199 opacity: 0;
200 transition:
201 border-color .2s ease,
202 opacity .2s ease,
203 visibility 0s .2s linear;
204 }
205
206 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
207 &:hover,
208 &:active,
209 &:focus-visible {
210 @include bem.elem('body') {
211 border-color: props.get(vars.$hover--border-color);
212 visibility: visible;
213 opacity: 1;
214 transition:
215 border-color .2s ease,
216 opacity .2s ease,
217 visibility .2s linear;
218 }
219 }
220 }
221 }
222
213 @include bem.modifier('horizontal') { 223 @include bem.modifier('horizontal') {
214 flex-direction: row; 224 flex-direction: row;
215 align-items: center; 225 align-items: center;
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8adbcde..c5bbc0d 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -3,6 +3,8 @@
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; 5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
6$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
7$sub-border-width: props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default;
6$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; 8$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
7$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; 9$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; 10$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
@@ -17,8 +19,12 @@ $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.g
17$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 19$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
18 20
19$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 21$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
22$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
20$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; 23$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
21 24
25$hover--bg-color: props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default;
26$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default;
27
22$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; 28$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
23$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 29$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
24$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 30$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
index f86938d..78f5d15 100644
--- a/src/objects/_figure.vars.scss
+++ b/src/objects/_figure.vars.scss
@@ -1,9 +1,9 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$pad-b: props.def(--s-figures--pad-b, props.get(core.$size--100)) !default; 4$pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default;
5$border-width: props.def(--s-figures--border-width, props.get(core.$border-width--thin)) !default; 5$border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default;
6$font-size: props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default; 6$font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default;
7 7
8$text-color: props.def(--s-figures--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; 8$text-color: props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
9$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border), 'color') !default; 9$border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !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;
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 833eacb..f64c42b 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -6,7 +6,7 @@ $line-height: props.def(--o-text-field--line-height, 1.4) !default;
6$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; 6$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
7$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; 7$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
8$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; 8$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
9$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default; 9$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
10 10
11$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; 11$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
12 12
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-22 04:56:34 +0000