minolith 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/css/minolith-skelton.css +1139 -842
  2. package/dist/css/minolith-skelton.css.map +1 -1
  3. package/dist/css/minolith-skelton.min.css +1139 -842
  4. package/dist/css/minolith-skelton.min.css.map +1 -1
  5. package/dist/css/minolith-utilities.css +55973 -77487
  6. package/dist/css/minolith-utilities.css.map +1 -1
  7. package/dist/css/minolith-utilities.min.css +55973 -77487
  8. package/dist/css/minolith-utilities.min.css.map +1 -1
  9. package/dist/css/minolith.css +5689 -3055
  10. package/dist/css/minolith.css.map +1 -1
  11. package/dist/css/minolith.min.css +2564 -68
  12. package/dist/css/minolith.min.css.map +1 -1
  13. package/package.json +1 -1
  14. package/src/backgrounds/dot.scss +12 -12
  15. package/src/backgrounds/gingham.scss +18 -19
  16. package/src/backgrounds/rhombus.scss +9 -9
  17. package/src/backgrounds/stripe.scss +8 -8
  18. package/src/backgrounds/zigzag.scss +14 -14
  19. package/src/base/normalize.scss +2 -1
  20. package/src/components/accordion.scss +154 -87
  21. package/src/components/badge.scss +151 -62
  22. package/src/components/blockquote.scss +27 -23
  23. package/src/components/breadcrumbs.scss +19 -12
  24. package/src/components/button.scss +132 -69
  25. package/src/components/card.scss +96 -30
  26. package/src/components/dialogue.scss +103 -102
  27. package/src/components/footer.scss +16 -4
  28. package/src/components/header.scss +1 -1
  29. package/src/components/link.scss +1 -0
  30. package/src/components/message.scss +74 -22
  31. package/src/components/modal.scss +10 -10
  32. package/src/components/nav.scss +595 -278
  33. package/src/components/progress.scss +32 -9
  34. package/src/css-variables/animation.scss +1 -1
  35. package/src/css-variables/border.scss +1 -1
  36. package/src/css-variables/color.scss +32 -2
  37. package/src/css-variables/miscellaneous.scss +1 -1
  38. package/src/css-variables/typography.scss +1 -1
  39. package/src/functions/string.scss +12 -0
  40. package/src/mixins/color.scss +0 -32
  41. package/src/mixins/element.scss +2 -2
  42. package/src/utilities/color.scss +112 -6
  43. package/src/variables/color.scss +1082 -798
package/src/components/dialogue.scss CHANGED
@@ -27,7 +27,41 @@
27
27
  }
28
28
 
29
29
  .dialogue {
30
- @include mixins.element();
30
+ //#region local css variables
31
+ --#{variables.$prefix}color-dialogue-fore: var(
32
+ --#{variables.$prefix}color-default-dialogue-fore
33
+ );
34
+ --#{variables.$prefix}color-dialogue-back: var(
35
+ --#{variables.$prefix}color-default-dialogue-back
36
+ );
37
+ --#{variables.$prefix}color-dialogue-border: var(
38
+ --#{variables.$prefix}color-default-dialogue-border
39
+ );
40
+ --#{variables.$prefix}color-dialogue-avatar-back: var(
41
+ --#{variables.$prefix}color-default-dialogue-back
42
+ );
43
+ --#{variables.$prefix}color-dialogue-avatar-border: var(
44
+ --#{variables.$prefix}color-default-dialogue-border
45
+ );
46
+ --#{variables.$prefix}color-dialogue-name-fore: var(
47
+ --#{variables.$prefix}color-default-dialogue-name-fore
48
+ );
49
+ --#{variables.$prefix}color-dialogue-name-back: var(
50
+ --#{variables.$prefix}color-default-dialogue-name-back
51
+ );
52
+ --#{variables.$prefix}color-dialogue-name-border: var(
53
+ --#{variables.$prefix}color-default-dialogue-name-border
54
+ );
55
+ --#{variables.$prefix}color-dialogue-message-fore: var(
56
+ --#{variables.$prefix}color-default-dialogue-message-fore
57
+ );
58
+ --#{variables.$prefix}color-dialogue-message-back: var(
59
+ --#{variables.$prefix}color-default-dialogue-message-back
60
+ );
61
+ --#{variables.$prefix}color-dialogue-message-border: var(
62
+ --#{variables.$prefix}color-default-dialogue-message-border
63
+ );
64
+
31
65
  --#{variables.$prefix}dialogue-avatar-size: var(
32
66
  --#{variables.$prefix}dialogue-avatar-size-default
33
67
  );
@@ -39,7 +73,8 @@
39
73
  var(--#{variables.$prefix}dialogue-name-padding-y) * 2 +
40
74
  var(--#{variables.$prefix}dialogue-border-width) * 2 +
41
75
  var(--#{variables.$prefix}dialogue-name-font-size)
42
- ) / 2
76
+ ) /
77
+ 2
43
78
  );
44
79
  --#{variables.$prefix}dialogue-messege-arrow-top-offset: calc(
45
80
  (-1 * var(--#{variables.$prefix}dialogue-messege-top-offset)) +
@@ -48,7 +83,10 @@
48
83
  var(--#{variables.$prefix}dialogue-avatar-top-offset) +
49
84
  (var(--#{variables.$prefix}dialogue-avatar-size) / 2)
50
85
  );
86
+ --#{variables.$prefix}dialogue-border-style: solid;
87
+ //#endregion local css variables
51
88
 
89
+ @include mixins.element();
52
90
  display: flex;
53
91
  max-width: 100%;
54
92
  margin: 0;
@@ -74,33 +112,17 @@
74
112
  (
75
113
  var(--#{variables.$prefix}dialogue-avatar-size) +
76
114
  var(--#{variables.$prefix}dialogue-border-width) * 2
77
- ) / 2
115
+ ) /
116
+ 2
78
117
  );
79
118
  > .dialogue-avatar-container {
80
119
  > .dialogue-avatar {
81
- background-color: var(
82
- --#{variables.$prefix}color-default-dialogue-avatar-back
83
- );
84
- border-color: var(
85
- --#{variables.$prefix}color-default-dialogue-avatar-border
86
- );
87
- border-style: solid;
88
- border-width: var(--#{variables.$prefix}dialogue-border-width);
89
120
  border-radius: var(--#{variables.$prefix}border-radius-circle);
90
121
  user-select: none;
91
122
  }
92
123
  }
93
124
  }
94
125
 
95
- @each $borderWidth in variables.$borderWidths {
96
- $name: map.get($borderWidth, "name");
97
- &.is-border-width-#{$name} {
98
- --#{variables.$prefix}dialogue-border-width: var(
99
- --#{variables.$prefix}border-width-#{$name}
100
- );
101
- }
102
- }
103
-
104
126
  > .dialogue-avatar-container,
105
127
  > .dialogue-content-container {
106
128
  @include mixins.element();
@@ -116,6 +138,7 @@
116
138
  > .dialogue-avatar {
117
139
  @include mixins.element();
118
140
  aspect-ratio: 1;
141
+ background-color: var(--#{variables.$prefix}color-dialogue-avatar-back);
119
142
  display: block;
120
143
  align-items: center;
121
144
  justify-content: center;
@@ -123,6 +146,11 @@
123
146
  width: var(--#{variables.$prefix}dialogue-avatar-size);
124
147
  margin: 0 auto;
125
148
  overflow: hidden;
149
+ &.has-border {
150
+ border-color: var(--#{variables.$prefix}color-dialogue-avatar-border);
151
+ border-style: var(--#{variables.$prefix}dialogue-border-style);
152
+ border-width: var(--#{variables.$prefix}dialogue-border-width);
153
+ }
126
154
  }
127
155
  }
128
156
  > .dialogue-content-container {
@@ -132,18 +160,14 @@
132
160
  > .dialogue-message {
133
161
  min-height: 1rem;
134
162
  border-radius: var(--#{variables.$prefix}border-radius-medium);
135
- border-style: solid;
136
163
  border-width: var(--#{variables.$prefix}dialogue-border-width);
164
+ border-style: var(--#{variables.$prefix}dialogue-border-style);
137
165
  }
138
166
  > .dialogue-name {
139
167
  @include mixins.element();
140
- background-color: var(
141
- --#{variables.$prefix}color-default-dialogue-name-back
142
- );
143
- border-color: var(
144
- --#{variables.$prefix}color-default-dialogue-name-border
145
- );
146
- color: var(--#{variables.$prefix}color-default-dialogue-name-fore);
168
+ background-color: var(--#{variables.$prefix}color-dialogue-name-back);
169
+ border-color: var(--#{variables.$prefix}color-dialogue-name-border);
170
+ color: var(--#{variables.$prefix}color-dialogue-name-fore);
147
171
  font-size: var(--#{variables.$prefix}dialogue-name-font-size);
148
172
  position: absolute;
149
173
  top: 0;
@@ -154,13 +178,9 @@
154
178
  }
155
179
  > .dialogue-message {
156
180
  @include mixins.element();
157
- background-color: var(
158
- --#{variables.$prefix}color-default-dialogue-message-back
159
- );
160
- border-color: var(
161
- --#{variables.$prefix}color-default-dialogue-message-border
162
- );
163
- color: var(--#{variables.$prefix}color-default-dialogue-message-fore);
181
+ background-color: var(--#{variables.$prefix}color-dialogue-message-back);
182
+ border-color: var(--#{variables.$prefix}color-dialogue-message-border);
183
+ color: var(--#{variables.$prefix}color-dialogue-message-fore);
164
184
  position: relative;
165
185
  top: var(--#{variables.$prefix}dialogue-messege-top-offset);
166
186
  padding-top: calc(
@@ -192,7 +212,7 @@
192
212
  }
193
213
  &::before {
194
214
  border-right-color: var(
195
- --#{variables.$prefix}color-default-dialogue-message-border
215
+ --#{variables.$prefix}color-dialogue-message-border
196
216
  );
197
217
  border-right-width: var(
198
218
  --#{variables.$prefix}dialogue-messege-arrow-width
@@ -204,7 +224,7 @@
204
224
  }
205
225
  &::after {
206
226
  border-right-color: var(
207
- --#{variables.$prefix}color-default-dialogue-message-back
227
+ --#{variables.$prefix}color-dialogue-message-back
208
228
  );
209
229
  border-right-width: var(
210
230
  --#{variables.$prefix}dialogue-messege-arrow-width
@@ -235,7 +255,7 @@
235
255
  }
236
256
  &::before {
237
257
  border-left-color: var(
238
- --#{variables.$prefix}color-default-dialogue-message-border
258
+ --#{variables.$prefix}color-dialogue-message-border
239
259
  );
240
260
  border-left-width: var(
241
261
  --#{variables.$prefix}dialogue-messege-arrow-width
@@ -247,7 +267,7 @@
247
267
  }
248
268
  &::after {
249
269
  border-left-color: var(
250
- --#{variables.$prefix}color-default-dialogue-message-back
270
+ --#{variables.$prefix}color-dialogue-message-back
251
271
  );
252
272
  border-left-width: var(
253
273
  --#{variables.$prefix}dialogue-messege-arrow-width
@@ -261,21 +281,19 @@
261
281
  }
262
282
  }
263
283
  }
284
+
285
+ @each $borderWidth in variables.$borderWidths {
286
+ $name: map.get($borderWidth, "name");
287
+ &.is-border-width-#{$name} {
288
+ --#{variables.$prefix}dialogue-border-width: var(
289
+ --#{variables.$prefix}border-width-#{$name}
290
+ );
291
+ }
292
+ }
293
+
264
294
  @each $border-style in variables.$borderStyles {
265
295
  &.is-border-style-#{$border-style} {
266
- &.is-avatar-circle {
267
- > .dialogue-avatar-container {
268
- > .dialogue-avatar {
269
- border-style: #{$border-style};
270
- }
271
- }
272
- }
273
- > .dialogue-content-container {
274
- > .dialogue-name,
275
- > .dialogue-message {
276
- border-style: #{$border-style};
277
- }
278
- }
296
+ --#{variables.$prefix}dialogue-border-style: #{$border-style};
279
297
  }
280
298
  }
281
299
 
@@ -283,56 +301,39 @@
283
301
  @each $color in variables.$colors {
284
302
  $colorName: map.get($color, "name");
285
303
  &.is-#{$colorName} {
286
- > .dialogue-avatar-container {
287
- > .dialogue-avatar {
288
- background-color: var(
289
- --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-back
290
- );
291
- border-color: var(
292
- --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-border
293
- );
294
- }
295
- }
296
- > .dialogue-content-container {
297
- > .dialogue-name {
298
- background-color: var(
299
- --#{variables.$prefix}color-#{$colorName}-dialogue-name-back
300
- );
301
- border-color: var(
302
- --#{variables.$prefix}color-#{$colorName}-dialogue-name-border
303
- );
304
- color: var(
305
- --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore
306
- );
307
- }
308
- > .dialogue-message {
309
- background-color: var(
310
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
311
- );
312
- border-color: var(
313
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
314
- );
315
- color: var(
316
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore
317
- );
318
- &::after {
319
- border-right-color: var(
320
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
321
- );
322
- border-left-color: var(
323
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
324
- );
325
- }
326
- &::before {
327
- border-right-color: var(
328
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
329
- );
330
- border-left-color: var(
331
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
332
- );
333
- }
334
- }
335
- }
304
+ --#{variables.$prefix}color-dialogue-fore: var(
305
+ --#{variables.$prefix}color-#{$colorName}-dialogue-fore
306
+ );
307
+ --#{variables.$prefix}color-dialogue-back: var(
308
+ --#{variables.$prefix}color-#{$colorName}-dialogue-back
309
+ );
310
+ --#{variables.$prefix}color-dialogue-border: var(
311
+ --#{variables.$prefix}color-#{$colorName}-dialogue-border
312
+ );
313
+ --#{variables.$prefix}color-dialogue-avatar-back: var(
314
+ --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-back
315
+ );
316
+ --#{variables.$prefix}color-dialogue-avatar-border: var(
317
+ --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-border
318
+ );
319
+ --#{variables.$prefix}color-dialogue-name-fore: var(
320
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore
321
+ );
322
+ --#{variables.$prefix}color-dialogue-name-back: var(
323
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-back
324
+ );
325
+ --#{variables.$prefix}color-dialogue-name-border: var(
326
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-border
327
+ );
328
+ --#{variables.$prefix}color-dialogue-message-fore: var(
329
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore
330
+ );
331
+ --#{variables.$prefix}color-dialogue-message-back: var(
332
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
333
+ );
334
+ --#{variables.$prefix}color-dialogue-message-border: var(
335
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
336
+ );
336
337
  }
337
338
  }
338
339
  }
package/src/components/footer.scss CHANGED
@@ -3,9 +3,17 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  .footer {
6
+ --#{variables.$prefix}color-footer-fore: var(
7
+ --#{variables.$prefix}color-default-footer-fore
8
+ );
9
+ --#{variables.$prefix}color-footer-back: var(
10
+ --#{variables.$prefix}color-default-footer-back
11
+ );
12
+
6
13
  @include mixins.element();
7
- background-color: var(--#{variables.$prefix}color-default-footer-back);
8
- color: var(--#{variables.$prefix}color-default-footer-fore);
14
+
15
+ background-color: var(--#{variables.$prefix}color-footer-back);
16
+ color: var(--#{variables.$prefix}color-footer-fore);
9
17
  padding: 2rem 0;
10
18
  bottom: 0;
11
19
 
@@ -13,8 +21,12 @@
13
21
  @each $color in variables.$colors {
14
22
  $colorName: map.get($color, "name");
15
23
  &.is-#{$colorName} {
16
- background-color: var(--#{variables.$prefix}color-#{$colorName}-footer-back);
17
- color: var(--#{variables.$prefix}color-#{$colorName}-footer-fore);
24
+ --#{variables.$prefix}color-footer-fore: var(
25
+ --#{variables.$prefix}color-#{$colorName}-footer-fore
26
+ );
27
+ --#{variables.$prefix}color-footer-back: var(
28
+ --#{variables.$prefix}color-#{$colorName}-footer-back
29
+ );
18
30
  }
19
31
  }
20
32
  }
package/src/components/header.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  l
35
35
  c
36
36
  h /
37
- calc(alpha - 0.5)
37
+ 0.5
38
38
  );
39
39
  box-shadow: 0
40
40
  0
package/src/components/link.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  @include mixins.element();
7
7
  color: var(--#{variables.$prefix}color-default-link-fore);
8
8
  text-decoration: underline;
9
+ touch-action: manipulation;
9
10
  cursor: pointer;
10
11
  &:hover {
11
12
  text-decoration: none;
package/src/components/message.scss CHANGED
@@ -3,29 +3,63 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  .message {
6
+ //#region local css variables
7
+ --#{variables.$prefix}color-message-fore: var(
8
+ --#{variables.$prefix}color-default-message-fore
9
+ );
10
+ --#{variables.$prefix}color-message-back: var(
11
+ --#{variables.$prefix}color-default-message-back
12
+ );
13
+ --#{variables.$prefix}color-message-border: var(
14
+ --#{variables.$prefix}color-default-message-border
15
+ );
16
+
17
+ --#{variables.$prefix}color-message-header-fore: var(
18
+ --#{variables.$prefix}color-default-message-header-fore
19
+ );
20
+ --#{variables.$prefix}color-message-header-back: var(
21
+ --#{variables.$prefix}color-default-message-header-back
22
+ );
23
+ --#{variables.$prefix}color-message-header-border: var(
24
+ --#{variables.$prefix}color-default-message-header-border
25
+ );
26
+
27
+ --#{variables.$prefix}color-message-body-fore: var(
28
+ --#{variables.$prefix}color-default-message-body-fore
29
+ );
30
+ --#{variables.$prefix}color-message-body-back: var(
31
+ --#{variables.$prefix}color-default-message-body-back
32
+ );
33
+ --#{variables.$prefix}color-message-body-border: var(
34
+ --#{variables.$prefix}color-default-message-body-border
35
+ );
36
+ //#endregion local css variables
37
+
6
38
  @include mixins.element();
7
39
  display: block;
8
- background-color: var(--#{variables.$prefix}color-default-message-back);
9
- border-color: var(--#{variables.$prefix}color-default-message-border);
40
+ background-color: var(--#{variables.$prefix}color-message-back);
41
+ border-color: var(--#{variables.$prefix}color-message-border);
10
42
  border-radius: var(--#{variables.$prefix}border-radius-medium);
11
43
  border-style: solid;
12
44
  border-width: var(--#{variables.$prefix}border-width-thin);
13
- color: var(--#{variables.$prefix}color-default-messaage-fore);
14
- >.message-header {
45
+ color: var(--#{variables.$prefix}color-messaage-fore);
46
+ > .message-header {
15
47
  @include mixins.element();
16
- background-color: var(--#{variables.$prefix}color-default-message-header-back);
17
- border-radius: var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium) 0 0;
18
- color: var(--#{variables.$prefix}color-default-message-header-fore);
48
+ background-color: var(--#{variables.$prefix}color-message-header-back);
49
+ border-radius: var(--#{variables.$prefix}border-radius-medium)
50
+ var(--#{variables.$prefix}border-radius-medium) 0 0;
51
+ color: var(--#{variables.$prefix}color-message-header-fore);
19
52
  display: block;
20
53
  font-size: var(--#{variables.$prefix}font-size-medium);
21
54
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
22
55
  padding: 0.5rem;
23
56
  }
24
- >.message-body {
57
+ > .message-body {
25
58
  @include mixins.element();
26
- background-color: var(--#{variables.$prefix}color-default-message-body-back);
27
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium);
28
- color: var(--#{variables.$prefix}color-default-message-body-fore);
59
+ background-color: var(--#{variables.$prefix}color-message-body-back);
60
+ border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
61
+ var(--#{variables.$prefix}border-radius-medium);
62
+ color: var(--#{variables.$prefix}color-message-body-fore);
29
63
  display: block;
30
64
  padding: 0.5rem;
31
65
  &:first-child {
@@ -36,17 +70,35 @@
36
70
  @each $color in variables.$colors {
37
71
  $colorName: map.get($color, "name");
38
72
  &.is-#{$colorName} {
39
- background-color: var(--#{variables.$prefix}color-#{$colorName}-message-back);
40
- border-color: var(--#{variables.$prefix}color-#{$colorName}-message-border);
41
- color: var(--#{variables.$prefix}color-#{$colorName}-message-fore);
42
- >.message-header {
43
- background-color: var(--#{variables.$prefix}color-#{$colorName}-message-header-back);
44
- color: var(--#{variables.$prefix}color-#{$colorName}-message-header-fore);
45
- }
46
- >.message-body {
47
- background-color: var(--#{variables.$prefix}color-#{$colorName}-message-body-back);
48
- color: var(--#{variables.$prefix}color-#{$colorName}-message-body-fore);
49
- }
73
+ --#{variables.$prefix}color-message-fore: var(
74
+ --#{variables.$prefix}color-#{$colorName}-message-fore
75
+ );
76
+ --#{variables.$prefix}color-message-back: var(
77
+ --#{variables.$prefix}color-#{$colorName}-message-back
78
+ );
79
+ --#{variables.$prefix}color-message-border: var(
80
+ --#{variables.$prefix}color-#{$colorName}-message-border
81
+ );
82
+
83
+ --#{variables.$prefix}color-message-header-fore: var(
84
+ --#{variables.$prefix}color-#{$colorName}-message-header-fore
85
+ );
86
+ --#{variables.$prefix}color-message-header-back: var(
87
+ --#{variables.$prefix}color-#{$colorName}-message-header-back
88
+ );
89
+ --#{variables.$prefix}color-message-header-border: var(
90
+ --#{variables.$prefix}color-#{$colorName}-message-header-border
91
+ );
92
+
93
+ --#{variables.$prefix}color-message-body-fore: var(
94
+ --#{variables.$prefix}color-#{$colorName}-message-body-fore
95
+ );
96
+ --#{variables.$prefix}color-message-body-back: var(
97
+ --#{variables.$prefix}color-#{$colorName}-message-body-back
98
+ );
99
+ --#{variables.$prefix}color-message-body-border: var(
100
+ --#{variables.$prefix}color-#{$colorName}-message-body-border
101
+ );
50
102
  }
51
103
  }
52
104
  }
package/src/components/modal.scss CHANGED
@@ -3,23 +3,27 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  .modal {
6
+ --#{variables.$prefix}color-modal-back: var(
7
+ --#{variables.$prefix}color-default-back
8
+ );
9
+
6
10
  @include mixins.element();
7
11
  align-items: center;
8
12
  background-color: oklch(
9
- from var(--#{variables.$prefix}color-default-back) l c h /
10
- calc(alpha - 0.25)
13
+ from var(--#{variables.$prefix}color-modal-back) l c h / 0.75
11
14
  );
12
15
  border: none;
13
16
  display: none;
14
17
  flex-direction: column;
15
- height: 100vh;
18
+ height: 100%;
16
19
  justify-content: center;
17
20
  left: 0;
18
21
  overflow: hidden;
19
22
  position: fixed;
20
23
  top: 0;
21
- width: 100vw;
24
+ width: 100%;
22
25
  z-index: var(--#{variables.$prefix}z-index-modal);
26
+ overscroll-behavior-block: contain;
23
27
  &.is-active {
24
28
  display: flex;
25
29
  }
@@ -38,12 +42,8 @@
38
42
  @each $color in variables.$colors {
39
43
  $colorName: map.get($color, "name");
40
44
  &.is-#{$colorName} {
41
- background-color: oklch(
42
- from var(--#{variables.$prefix}color-#{$colorName}-back)
43
- l
44
- c
45
- h /
46
- calc(alpha - 0.25)
45
+ --#{variables.$prefix}color-modal-back: var(
46
+ --#{variables.$prefix}color-#{$colorName}-back
47
47
  );
48
48
  }
49
49
  }