summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r--src/objects/_button.scss301
1 files changed, 301 insertions, 0 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
new file mode 100644
index 0000000..097bc21
--- /dev/null
+++ b/src/objects/_button.scss
@@ -0,0 +1,301 @@
1@use 'sass:list';
2@use 'iro-sass/src/iro-sass' as iro;
3@use '../functions' as fn;
4
5$sizes: 'sm' 'lg' 'xl' !default;
6$themes: 'accent' 'negative' !default;
7$static-themes: 'black' 'white' !default;
8
9@mixin theme($theme: ()) {
10 &:link,
11 &:visited,
12 &:enabled {
13 color: fn.color(list.join($theme, --label));
14 background-color: fn.color(list.join($theme, --bg));
15 border-color: transparent;
16 }
17
18 @include iro.bem-modifier('outline') {
19 &:link,
20 &:visited,
21 &:enabled {
22 color: fn.color(list.join($theme, --outline-label));
23 background-color: transparent;
24 border-color: fn.color(list.join($theme, --outline-border));
25 }
26 }
27
28 &:link,
29 &:visited,
30 &:enabled {
31 &:hover,
32 &:focus-visible {
33 color: fn.color(list.join($theme, --hover --label));
34 background-color: fn.color(list.join($theme, --hover --bg));
35 border-color: transparent;
36 }
37
38 &:active {
39 color: fn.color(list.join($theme, --active --label));
40 background-color: fn.color(list.join($theme, --active --bg));
41 border-color: transparent;
42 }
43 }
44}
45
46@mixin static-theme($theme: ()) {
47 color: fn.color(list.join($theme, --disabled --label));
48 background-color: fn.color(list.join($theme, --disabled --bg));
49 border-color: transparent;
50
51 &::after {
52 outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border);
53 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
54 }
55
56 @include iro.bem-modifier('outline') {
57 background-color: transparent;
58 border-color: fn.color(list.join($theme, --disabled --outline-border));
59 }
60
61 @include theme($theme);
62
63 @include iro.bem-modifier('primary') {
64 @include theme(list.join($theme, --primary));
65 }
66}
67
68@include iro.props-namespace('button') {
69 @include iro.props-store((
70 --dims: (
71 --line-height: 1.4,
72 --pad-i: fn.global-dim(--size --200),
73 --pad-i-label: fn.global-dim(--size --75),
74 --pad-b: fn.global-dim(--size --65),
75 --border: fn.global-dim(--border --medium),
76 --rounding: 10em,
77 --font-size: fn.global-dim(--font-size --100),
78
79 --sm: (
80 --pad-i: fn.global-dim(--size --150),
81 --pad-i-label: fn.global-dim(--size --50),
82 --pad-b: fn.global-dim(--size --25),
83 --font-size: fn.global-dim(--font-size --75),
84 ),
85 --lg: (
86 --pad-i: fn.global-dim(--size --250),
87 --pad-i-label: fn.global-dim(--size --100),
88 --pad-b: fn.global-dim(--size --100),
89 --font-size: fn.global-dim(--font-size --150),
90 ),
91 --xl: (
92 --pad-i: fn.global-dim(--size --300),
93 --pad-i-label: fn.global-dim(--size --150),
94 --pad-b: fn.global-dim(--size --150),
95 --font-size: fn.global-dim(--font-size --200),
96 ),
97
98 --key-focus: (
99 --border: fn.global-dim(--key-focus --border),
100 --border-offset: fn.global-dim(--key-focus --border-offset),
101 --outline: fn.global-dim(--key-focus --outline),
102 ),
103 ),
104 --colors: (
105 --bg: fn.global-color(--border-mute),
106 --label: fn.global-color(--text),
107 --outline-border: fn.global-color(--border),
108 --outline-label: fn.global-color(--text),
109
110 --hover: (
111 --bg: fn.global-color(--border),
112 --label: fn.global-color(--heading),
113 ),
114 --active: (
115 --bg: fn.global-color(--border-strong),
116 --label: fn.global-color(--heading),
117 ),
118 --disabled: (
119 --bg: fn.global-color(--border-mute),
120 --outline-border: fn.global-color(--border),
121 --label: fn.global-color(--text-disabled),
122 ),
123 --key-focus: (
124 --label: fn.global-color(--focus --text),
125 --border: fn.global-color(--focus --border),
126 --outline: fn.global-color(--focus --outline),
127 ),
128
129 --primary: (
130 --bg: fn.global-color(--base --800),
131 --label: fn.global-color(--base --800-text),
132 --outline-border: fn.global-color(--base --800),
133 --outline-label: fn.global-color(--text),
134
135 --hover: (
136 --bg: fn.global-color(--base --900),
137 --label: fn.global-color(--base --900-text),
138 ),
139 --active: (
140 --bg: fn.global-color(--base --900),
141 --label: fn.global-color(--base --900-text),
142 ),
143 ),
144 ),
145 ));
146
147 @each $theme in $themes {
148 @include iro.props-store((
149 --colors: (
150 --#{$theme}: (
151 --bg: fn.global-color(--#{$theme}-static --900),
152 --label: fn.global-color(--#{$theme}-static --900-text),
153 --outline-border: fn.global-color(--#{$theme} --900),
154 --outline-label: fn.global-color(--#{$theme} --1000),
155
156 --hover: (
157 --bg: fn.global-color(--#{$theme}-static --1000),
158 --label: fn.global-color(--#{$theme}-static --1000-text),
159 ),
160 --active: (
161 --bg: fn.global-color(--#{$theme}-static --1100),
162 --label: fn.global-color(--#{$theme}-static --1100-text),
163 ),
164 ),
165 ),
166 ));
167 }
168
169 @each $theme in $static-themes {
170 @include iro.props-store((
171 --colors: (
172 --static-#{$theme}: (
173 --bg: fn.global-color(--#{$theme}-transparent --200),
174 --label: fn.global-color(--#{$theme}-transparent --900),
175 --outline-border: fn.global-color(--#{$theme}-transparent --300),
176 --outline-label: fn.global-color(--#{$theme}-transparent --900),
177
178 --hover: (
179 --bg: fn.global-color(--#{$theme}-transparent --300),
180 --label: fn.global-color(--#{$theme}-transparent --900),
181 ),
182 --active: (
183 --bg: fn.global-color(--#{$theme}-transparent --400),
184 --label: fn.global-color(--#{$theme}-transparent --900),
185 ),
186 --disabled: (
187 --bg: fn.global-color(--#{$theme}-transparent --200),
188 --outline-border: fn.global-color(--#{$theme}-transparent --300),
189 --label: fn.global-color(--#{$theme}-transparent --500),
190 ),
191 --key-focus: (
192 --bg: fn.global-color(--#{$theme}-transparent --100),
193 --label: fn.global-color(--#{$theme}-transparent --900),
194 --border: fn.global-color(--#{$theme}-transparent --900),
195 --outline: fn.global-color(--#{$theme}-transparent --300),
196 ),
197
198 --primary: (
199 --bg: fn.global-color(--#{$theme}-transparent --800),
200 --label: fn.global-color(--#{$theme}-transparent --text),
201 --outline-border: fn.global-color(--#{$theme}-transparent --800),
202 --outline-label: fn.global-color(--#{$theme}-transparent --900),
203
204 --hover: (
205 --bg: fn.global-color(--#{$theme}-transparent --900),
206 --label: fn.global-color(--#{$theme}-transparent --text),
207 ),
208 --active: (
209 --bg: fn.global-color(--#{$theme}-transparent --900),
210 --label: fn.global-color(--#{$theme}-transparent --text),
211 ),
212 ),
213 ),
214 ),
215 ));
216 }
217
218 @include iro.bem-object(iro.props-namespace()) {
219 position: relative;
220 display: inline-block;
221 padding-block: fn.dim(--pad-b);
222 padding-inline: fn.dim(--pad-i);
223 font-size: fn.dim(--font-size);
224 font-weight: 500;
225 line-height: fn.dim(--line-height);
226 color: fn.color(--disabled --label);
227 text-align: center;
228 text-decoration: none;
229 background-color: fn.color(--disabled --bg);
230 border: fn.dim(--border) solid transparent;
231 border-color: fn.color(--disabled --bg);
232 border-radius: fn.dim(--rounding);
233
234 &::after {
235 position: absolute;
236 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
237 z-index: 1;
238 display: none;
239 pointer-events: none;
240 content: '';
241 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
242 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
243 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
244 }
245
246 &:link,
247 &:visited,
248 &:enabled {
249 &:focus-visible {
250 &::after {
251 display: block;
252 }
253 }
254 }
255
256 @include iro.bem-elem('label') {
257 margin-inline: fn.dim(--pad-i-label);
258 }
259
260 @include iro.bem-modifier('block') {
261 display: block;
262 }
263
264 @include iro.bem-modifier('outline') {
265 background-color: transparent;
266 border-color: fn.color(--disabled --outline-border);
267 }
268
269 @each $size in $sizes {
270 @include iro.bem-modifier($size) {
271 padding-block: fn.dim(--#{$size} --pad-b);
272 padding-inline: fn.dim(--#{$size} --pad-i);
273 font-size: fn.dim(--#{$size} --font-size);
274
275 @include iro.bem-elem('label') {
276 margin-inline: fn.dim(--#{$size} --pad-i-label);
277 }
278 }
279 }
280
281 @include static-theme;
282
283 @each $theme in $themes {
284 @include iro.bem-modifier($theme) {
285 @include theme(--#{$theme});
286 }
287 }
288
289 @each $theme in $static-themes {
290 @include iro.bem-modifier(static-#{$theme}) {
291 @include static-theme(--static-#{$theme});
292 }
293 }
294
295 @include iro.bem-modifier('round') {
296 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
297 padding-inline: 0;
298 border-radius: 100em;
299 }
300 }
301}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 05:39:53 +0000