minolith 1.0.4 → 1.1.1

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 (37) hide show
  1. package/dist/css/minolith-skelton.css +568 -419
  2. package/dist/css/minolith-skelton.css.map +1 -1
  3. package/dist/css/minolith-skelton.min.css +568 -419
  4. package/dist/css/minolith-skelton.min.css.map +1 -1
  5. package/dist/css/minolith.css +14869 -4909
  6. package/dist/css/minolith.css.map +1 -1
  7. package/dist/css/minolith.min.css +3976 -1222
  8. package/dist/css/minolith.min.css.map +1 -1
  9. package/package.json +1 -1
  10. package/src/backgrounds/dot.scss +16 -0
  11. package/src/backgrounds/gingham.scss +16 -0
  12. package/src/backgrounds/rhombus.scss +17 -2
  13. package/src/backgrounds/stripe.scss +16 -0
  14. package/src/backgrounds/zigzag.scss +16 -0
  15. package/src/base/tabula.scss +19 -2
  16. package/src/components/accordion.scss +151 -52
  17. package/src/components/badge.scss +108 -45
  18. package/src/components/blockquote.scss +56 -11
  19. package/src/components/breadcrumbs.scss +52 -8
  20. package/src/components/button.scss +110 -45
  21. package/src/components/card.scss +138 -48
  22. package/src/components/dialogue.scss +122 -55
  23. package/src/components/footer.scss +17 -6
  24. package/src/components/hamburger.scss +89 -50
  25. package/src/components/header.scss +61 -4
  26. package/src/components/input.scss +115 -48
  27. package/src/components/label.scss +50 -2
  28. package/src/components/link.scss +65 -6
  29. package/src/components/list.scss +1 -1
  30. package/src/components/loader.scss +17 -6
  31. package/src/components/message.scss +94 -27
  32. package/src/components/modal.scss +12 -3
  33. package/src/components/nav.scss +207 -148
  34. package/src/css-variables/color.scss +533 -467
  35. package/src/functions/color.scss +13 -0
  36. package/src/functions/index.scss +1 -0
  37. package/src/variables/color.scss +527 -1045
package/src/components/input.scss CHANGED
@@ -224,71 +224,138 @@
224
224
  }
225
225
 
226
226
  :where(.input) {
227
+ --#{variables.$prefix}input-color-fore: var(
228
+ --#{variables.$prefix}color-default-input-fore
229
+ );
230
+ --#{variables.$prefix}input-color-back: var(
231
+ --#{variables.$prefix}color-default-input-back
232
+ );
233
+ --#{variables.$prefix}input-color-border: var(
234
+ --#{variables.$prefix}color-default-input-border
235
+ );
236
+ --#{variables.$prefix}input-color-placeholder: var(
237
+ --#{variables.$prefix}color-default-input-placeholder
238
+ );
239
+
240
+ --#{variables.$prefix}input-focus-color-back: var(
241
+ --#{variables.$prefix}color-default-input-focus-back
242
+ );
243
+ --#{variables.$prefix}input-focus-color-border: var(
244
+ --#{variables.$prefix}color-default-input-focus-border
245
+ );
246
+ --#{variables.$prefix}input-disabled-color-back: var(
247
+ --#{variables.$prefix}color-default-input-disabled-back
248
+ );
249
+ --#{variables.$prefix}input-disabled-color-border: var(
250
+ --#{variables.$prefix}color-default-input-disabled-border
251
+ );
252
+
253
+ --#{variables.$prefix}input-border-style: solid;
254
+ --#{variables.$prefix}input-border-width: var(
255
+ --#{variables.$prefix}border-width-medium
256
+ );
257
+ --#{variables.$prefix}input-border-radius: var(
258
+ --#{variables.$prefix}border-radius-medium
259
+ );
260
+
227
261
  @include mixins.element();
228
- background-color: var(--#{variables.$prefix}color-default-back);
229
- border-color: var(--#{variables.$prefix}color-default-border);
230
- border-radius: var(--#{variables.$prefix}border-radius-medium);
231
- border-style: solid;
232
- border-width: var(--#{variables.$prefix}border-width-medium);
262
+ background-color: var(--#{variables.$prefix}input-color-back);
263
+ border-color: var(--#{variables.$prefix}input-color-border);
264
+ border-radius: var(--#{variables.$prefix}input-border-radius);
265
+ border-style: var(--#{variables.$prefix}input-border-style);
266
+ border-width: var(--#{variables.$prefix}input-border-width);
267
+ color: var(--#{variables.$prefix}input-color-fore);
233
268
  padding: 0.5rem;
234
- @each $borderRadius in variables.$borderRadiuses {
235
- $name: map.get($borderRadius, "name");
236
- &.is-border-radius-#{$name} {
237
- border-radius: var(--#{variables.$prefix}border-radius-#{$name});
238
- }
239
- }
240
- @each $borderWidth in variables.$borderWidths {
241
- $name: map.get($borderWidth, "name");
242
- &.is-border-width-#{$name} {
243
- border-width: var(--#{variables.$prefix}border-radius-#{$name});
244
- }
245
- }
246
269
  &::placeholder {
247
- color: var(--#{variables.$prefix}color-default-placeholder);
270
+ color: var(--#{variables.$prefix}input-color-placeholder);
248
271
  }
249
272
  &:focus,
250
273
  &.is-focus,
251
274
  &.is-focused {
252
275
  outline: none;
253
- background-color: var(--#{variables.$prefix}color-default-focus-back);
254
- border-color: var(--#{variables.$prefix}color-default-focus-border);
276
+ background-color: var(--#{variables.$prefix}input-focus-color-back);
277
+ border-color: var(--#{variables.$prefix}input-focus-color-border);
255
278
  }
256
279
  &[disabled],
257
280
  fieldset[disabled],
258
281
  &.is-disabled {
259
- background-color: var(--#{variables.$prefix}color-default-disabled-back);
260
- border-color: var(--#{variables.$prefix}color-default-disabled-border);
282
+ background-color: var(--#{variables.$prefix}input-disabled-color-back);
283
+ border-color: var(--#{variables.$prefix}input-disabled-color-border);
261
284
  }
262
285
  @if (not variables.$is-skelton) {
286
+ @each $borderRadius in variables.$borderRadiuses {
287
+ $name: map.get($borderRadius, "name");
288
+ &.is-border-radius-#{$name} {
289
+ border-radius: var(--#{variables.$prefix}border-radius-#{$name});
290
+ }
291
+ }
292
+
293
+ @each $borderWidth in variables.$borderWidths {
294
+ $name: map.get($borderWidth, "name");
295
+ &.is-border-width-#{$name} {
296
+ border-width: var(--#{variables.$prefix}border-radius-#{$name});
297
+ }
298
+ }
299
+
263
300
  @each $color in variables.$colors {
264
301
  $colorName: map.get($color, "name");
265
302
  &.is-#{$colorName} {
266
- background-color: var(--#{variables.$prefix}color-#{$colorName}-back);
267
- border-color: var(--#{variables.$prefix}color-#{$colorName}-border);
268
- color: var(--#{variables.$prefix}color-#{$colorName}-fore);
269
- &::placeholder {
270
- color: var(--#{variables.$prefix}color-#{$colorName}-placeholder);
271
- }
272
- &:focus,
273
- &.is-focus,
274
- &.is-focused {
275
- background-color: var(
276
- --#{variables.$prefix}color-#{$colorName}-focus-back
277
- );
278
- border-color: var(
279
- --#{variables.$prefix}color-#{$colorName}-focus-border
280
- );
281
- }
282
- &[disabled],
283
- fieldset[disabled],
284
- &.is-disabled {
285
- background-color: var(
286
- --#{variables.$prefix}color-#{$colorName}-disabled-back
287
- );
288
- border-color: var(
289
- --#{variables.$prefix}color-#{$colorName}-disabled-border
290
- );
291
- }
303
+ --#{variables.$prefix}input-color-fore: var(
304
+ --#{variables.$prefix}color-#{$colorName}-input-fore
305
+ );
306
+ --#{variables.$prefix}input-color-back: var(
307
+ --#{variables.$prefix}color-#{$colorName}-input-back
308
+ );
309
+ --#{variables.$prefix}input-color-border: var(
310
+ --#{variables.$prefix}color-#{$colorName}-input-border
311
+ );
312
+ --#{variables.$prefix}input-color-placeholder: var(
313
+ --#{variables.$prefix}color-#{$colorName}-input-placeholder
314
+ );
315
+
316
+ --#{variables.$prefix}input-focus-color-back: var(
317
+ --#{variables.$prefix}color-#{$colorName}-input-focus-back
318
+ );
319
+ --#{variables.$prefix}input-focus-color-border: var(
320
+ --#{variables.$prefix}color-#{$colorName}-input-focus-border
321
+ );
322
+ --#{variables.$prefix}input-disabled-color-back: var(
323
+ --#{variables.$prefix}color-#{$colorName}-input-disabled-back
324
+ );
325
+ --#{variables.$prefix}input-disabled-color-border: var(
326
+ --#{variables.$prefix}color-#{$colorName}-input-disabled-border
327
+ );
328
+ }
329
+ }
330
+
331
+ @each $semanticColor in variables.$semanticColors {
332
+ $colorName: map.get($semanticColor, "name");
333
+ &.is-#{$colorName} {
334
+ --#{variables.$prefix}input-color-fore: var(
335
+ --#{variables.$prefix}color-#{$colorName}-input-fore
336
+ );
337
+ --#{variables.$prefix}input-color-back: var(
338
+ --#{variables.$prefix}color-#{$colorName}-input-back
339
+ );
340
+ --#{variables.$prefix}input-color-border: var(
341
+ --#{variables.$prefix}color-#{$colorName}-input-border
342
+ );
343
+ --#{variables.$prefix}input-color-placeholder: var(
344
+ --#{variables.$prefix}color-#{$colorName}-input-placeholder
345
+ );
346
+
347
+ --#{variables.$prefix}input-focus-color-back: var(
348
+ --#{variables.$prefix}color-#{$colorName}-input-focus-back
349
+ );
350
+ --#{variables.$prefix}input-focus-color-border: var(
351
+ --#{variables.$prefix}color-#{$colorName}-input-focus-border
352
+ );
353
+ --#{variables.$prefix}input-disabled-color-back: var(
354
+ --#{variables.$prefix}color-#{$colorName}-input-disabled-back
355
+ );
356
+ --#{variables.$prefix}input-disabled-color-border: var(
357
+ --#{variables.$prefix}color-#{$colorName}-input-disabled-border
358
+ );
292
359
  }
293
360
  }
294
361
  }
package/src/components/label.scss CHANGED
@@ -3,14 +3,62 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  :where(.label) {
6
+ --#{variables.$prefix}label-color-fore: var(
7
+ --#{variables.$prefix}color-default-label-fore,
8
+ var(--#{variables.$prefix}color-default-fore)
9
+ );
10
+ --#{variables.$prefix}label-color-selection-fore: var(
11
+ --#{variables.$prefix}color-default-label-selection-fore,
12
+ var(--#{variables.$prefix}color-default-selection-fore)
13
+ );
14
+ --#{variables.$prefix}label-color-selection-back: var(
15
+ --#{variables.$prefix}color-default-label-selection-back,
16
+ var(--#{variables.$prefix}color-default-selection-back)
17
+ );
18
+
6
19
  @include mixins.element();
7
20
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
8
- color: var(--#{variables.$prefix}color-default-label-fore);
21
+ color: var(--#{variables.$prefix}label-color-fore);
22
+
23
+ &::selection {
24
+ color: var(--#{variables.$prefix}label-color-selection-fore);
25
+ background-color: var(--#{variables.$prefix}label-color-selection-back);
26
+ }
27
+
9
28
  @if (not variables.$is-skelton) {
10
29
  @each $color in variables.$colors {
11
30
  $colorName: map.get($color, "name");
12
31
  &.is-#{$colorName} {
13
- color: var(--#{variables.$prefix}color-#{$colorName}-label-fore);
32
+ --#{variables.$prefix}label-color-fore: var(
33
+ --#{variables.$prefix}color-#{$colorName}-label-fore,
34
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
35
+ );
36
+ --#{variables.$prefix}label-color-selection-fore: var(
37
+ --#{variables.$prefix}color-#{$colorName}-label-selection-fore,
38
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
39
+ );
40
+ --#{variables.$prefix}label-color-selection-back: var(
41
+ --#{variables.$prefix}color-#{$colorName}-label-selection-back,
42
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
43
+ );
44
+ }
45
+ }
46
+
47
+ @each $semanticColor in variables.$semanticColors {
48
+ $colorName: map.get($semanticColor, "name");
49
+ &.is-#{$colorName} {
50
+ --#{variables.$prefix}label-color-fore: var(
51
+ --#{variables.$prefix}color-#{$colorName}-label-fore,
52
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
53
+ );
54
+ --#{variables.$prefix}label-color-selection-fore: var(
55
+ --#{variables.$prefix}color-#{$colorName}-label-selection-fore,
56
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
57
+ );
58
+ --#{variables.$prefix}label-color-selection-back: var(
59
+ --#{variables.$prefix}color-#{$colorName}-label-selection-back,
60
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
61
+ );
14
62
  }
15
63
  }
16
64
  }
package/src/components/link.scss CHANGED
@@ -3,11 +3,35 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  :where(.link) {
6
+ --#{variables.$prefix}link-color-fore: var(
7
+ --#{variables.$prefix}color-default-link-fore,
8
+ var(--#{variables.$prefix}color-default-fore)
9
+ );
10
+ --#{variables.$prefix}link-color-visited-fore: var(
11
+ --#{variables.$prefix}color-default-link-visited-fore,
12
+ var(--#{variables.$prefix}color-default-visited-fore)
13
+ );
14
+
15
+ --#{variables.$prefix}link-color-selection-fore: var(
16
+ --#{variables.$prefix}color-default-link-selection-fore,
17
+ var(--#{variables.$prefix}color-default-selection-fore)
18
+ );
19
+ --#{variables.$prefix}link-color-selection-back: var(
20
+ --#{variables.$prefix}color-default-link-selection-back,
21
+ var(--#{variables.$prefix}color-default-selection-back)
22
+ );
23
+
6
24
  @include mixins.element();
7
- color: var(--#{variables.$prefix}color-default-link-fore);
25
+ color: var(--#{variables.$prefix}link-color-fore);
8
26
  text-decoration: underline;
9
27
  touch-action: manipulation;
10
28
  cursor: pointer;
29
+
30
+ &::selection {
31
+ color: var(--#{variables.$prefix}link-color-selection-fore);
32
+ background-color: var(--#{variables.$prefix}link-color-selection-back);
33
+ }
34
+
11
35
  &:hover {
12
36
  text-decoration: none;
13
37
  }
@@ -15,16 +39,51 @@
15
39
  outline: none;
16
40
  }
17
41
  &:visited {
18
- color: var(--#{variables.$prefix}color-default-link-visited-fore);
42
+ color: var(---#{variables.$prefix}link-color-visited-fore);
19
43
  }
44
+
20
45
  @if (not variables.$is-skelton) {
21
46
  @each $color in variables.$colors {
22
47
  $colorName: map.get($color, "name");
23
48
  &.is-#{$colorName} {
24
- color: var(--#{variables.$prefix}color-#{$colorName}-link-fore);
25
- &:visited {
26
- color: var(--#{variables.$prefix}color-#{$colorName}-link-visited-fore);
27
- }
49
+ --#{variables.$prefix}link-color-fore: var(
50
+ --#{variables.$prefix}color-#{$colorName}-link-fore,
51
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
52
+ );
53
+ --#{variables.$prefix}link-color-visited-fore: var(
54
+ --#{variables.$prefix}color-#{$colorName}-link-visited-fore,
55
+ var(--#{variables.$prefix}color-#{$colorName}-visited-fore)
56
+ );
57
+ --#{variables.$prefix}link-color-selection-fore: var(
58
+ --#{variables.$prefix}color-#{$colorName}-link-selection-fore,
59
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
60
+ );
61
+ --#{variables.$prefix}link-color-selection-back: var(
62
+ --#{variables.$prefix}color-#{$colorName}-link-selection-back,
63
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
64
+ );
65
+ }
66
+ }
67
+
68
+ @each $semanticColor in variables.$semanticColors {
69
+ $colorName: map.get($semanticColor, "name");
70
+ &.is-#{$colorName} {
71
+ --#{variables.$prefix}link-color-fore: var(
72
+ --#{variables.$prefix}color-#{$colorName}-link-fore,
73
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
74
+ );
75
+ --#{variables.$prefix}link-color-visited-fore: var(
76
+ --#{variables.$prefix}color-#{$colorName}-link-visited-fore,
77
+ var(--#{variables.$prefix}color-#{$colorName}-visited-fore)
78
+ );
79
+ --#{variables.$prefix}link-color-selection-fore: var(
80
+ --#{variables.$prefix}color-#{$colorName}-link-selection-fore,
81
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
82
+ );
83
+ --#{variables.$prefix}link-color-selection-back: var(
84
+ --#{variables.$prefix}color-#{$colorName}-link-selection-back,
85
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
86
+ );
28
87
  }
29
88
  }
30
89
  }
package/src/components/list.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  &.is-style-disc {
11
11
  list-style: disc;
12
12
  }
13
- > .list-item {
13
+ > :where(.list-item) {
14
14
  display: list-item;
15
15
  }
16
16
  }
package/src/components/loader.scss CHANGED
@@ -3,6 +3,10 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  :where(.loader) {
6
+ --#{variables.$prefix}loader-color-fore: var(
7
+ --#{variables.$prefix}color-default-loader-fore
8
+ );
9
+
6
10
  @include mixins.element();
7
11
  @include mixins.animation() {
8
12
  animation-iteration-count: infinite;
@@ -10,11 +14,9 @@
10
14
  animation-timing-function: linear;
11
15
  aspect-ratio: 1;
12
16
  border-radius: 50%;
13
- background: var(--#{variables.$prefix}color-default-loader-fore);
14
- mask: conic-gradient(
15
- #0000 10%,
16
- var(--#{variables.$prefix}color-default-back)
17
- ),
17
+ background: var(--#{variables.$prefix}loader-color-fore);
18
+ mask:
19
+ conic-gradient(#0000 10%, var(--#{variables.$prefix}color-default-back)),
18
20
  linear-gradient(var(--#{variables.$prefix}color-default-back) 0 0)
19
21
  content-box;
20
22
  mask-composite: subtract;
@@ -56,7 +58,16 @@
56
58
  @each $color in variables.$colors {
57
59
  $colorName: map.get($color, "name");
58
60
  &.is-#{$colorName} {
59
- background: var(
61
+ --#{variables.$prefix}loader-color-fore: var(
62
+ --#{variables.$prefix}color-#{$colorName}-loader-fore
63
+ );
64
+ }
65
+ }
66
+
67
+ @each $semanticColor in variables.$semanticColors {
68
+ $colorName: map.get($semanticColor, "name");
69
+ &.is-#{$colorName} {
70
+ --#{variables.$prefix}loader-color-fore: var(
60
71
  --#{variables.$prefix}color-#{$colorName}-loader-fore
61
72
  );
62
73
  }
package/src/components/message.scss CHANGED
@@ -4,99 +4,166 @@
4
4
 
5
5
  :where(.message) {
6
6
  //#region local css variables
7
- --#{variables.$prefix}color-message-fore: var(
7
+ --#{variables.$prefix}message-color-fore: var(
8
8
  --#{variables.$prefix}color-default-message-fore
9
9
  );
10
- --#{variables.$prefix}color-message-back: var(
10
+ --#{variables.$prefix}message-color-back: var(
11
11
  --#{variables.$prefix}color-default-message-back
12
12
  );
13
- --#{variables.$prefix}color-message-border: var(
13
+ --#{variables.$prefix}message-color-border: var(
14
14
  --#{variables.$prefix}color-default-message-border
15
15
  );
16
+ --#{variables.$prefix}message-color-selection-fore: var(
17
+ --#{variables.$prefix}color-default-message-selection-fore,
18
+ var(--#{variables.$prefix}color-default-selection-fore)
19
+ );
20
+ --#{variables.$prefix}message-color-selection-back: var(
21
+ --#{variables.$prefix}color-default-message-selection-back,
22
+ var(--#{variables.$prefix}color-default-selection-back)
23
+ );
16
24
 
17
- --#{variables.$prefix}color-message-header-fore: var(
25
+ --#{variables.$prefix}message-header-color-fore: var(
18
26
  --#{variables.$prefix}color-default-message-header-fore
19
27
  );
20
- --#{variables.$prefix}color-message-header-back: var(
28
+ --#{variables.$prefix}message-header-color-back: var(
21
29
  --#{variables.$prefix}color-default-message-header-back
22
30
  );
23
- --#{variables.$prefix}color-message-header-border: var(
31
+ --#{variables.$prefix}message-header-color-border: var(
24
32
  --#{variables.$prefix}color-default-message-header-border
25
33
  );
26
34
 
27
- --#{variables.$prefix}color-message-body-fore: var(
35
+ --#{variables.$prefix}message-body-color-fore: var(
28
36
  --#{variables.$prefix}color-default-message-body-fore
29
37
  );
30
- --#{variables.$prefix}color-message-body-back: var(
38
+ --#{variables.$prefix}message-body-color-back: var(
31
39
  --#{variables.$prefix}color-default-message-body-back
32
40
  );
33
- --#{variables.$prefix}color-message-body-border: var(
41
+ --#{variables.$prefix}message-body-color-border: var(
34
42
  --#{variables.$prefix}color-default-message-body-border
35
43
  );
36
44
  //#endregion local css variables
37
45
 
38
46
  @include mixins.element();
39
47
  display: block;
40
- background-color: var(--#{variables.$prefix}color-message-back);
41
- border-color: var(--#{variables.$prefix}color-message-border);
48
+ background-color: var(--#{variables.$prefix}message-color-back);
49
+ border-color: var(--#{variables.$prefix}message-color-border);
42
50
  border-radius: var(--#{variables.$prefix}border-radius-medium);
43
51
  border-style: solid;
44
52
  border-width: var(--#{variables.$prefix}border-width-thin);
45
- color: var(--#{variables.$prefix}color-messaage-fore);
46
- > .message-header {
53
+ color: var(--#{variables.$prefix}color-message-fore);
54
+
55
+ &::selection {
56
+ color: var(--#{variables.$prefix}message-color-selection-fore);
57
+ background-color: var(--#{variables.$prefix}message-color-selection-back);
58
+ }
59
+
60
+ > :where(.message-header) {
47
61
  @include mixins.element();
48
- background-color: var(--#{variables.$prefix}color-message-header-back);
62
+ background-color: var(--#{variables.$prefix}message-header-color-back);
49
63
  border-radius: var(--#{variables.$prefix}border-radius-medium)
50
64
  var(--#{variables.$prefix}border-radius-medium) 0 0;
51
- color: var(--#{variables.$prefix}color-message-header-fore);
65
+ color: var(--#{variables.$prefix}message-header-color-fore);
52
66
  display: block;
53
67
  font-size: var(--#{variables.$prefix}font-size-medium);
54
68
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
55
69
  padding: 0.5rem;
56
70
  }
57
- > .message-body {
71
+ > :where(.message-body) {
58
72
  @include mixins.element();
59
- background-color: var(--#{variables.$prefix}color-message-body-back);
73
+ background-color: var(--#{variables.$prefix}message-body-color-back);
60
74
  border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
61
75
  var(--#{variables.$prefix}border-radius-medium);
62
- color: var(--#{variables.$prefix}color-message-body-fore);
76
+ color: var(--#{variables.$prefix}message-body-color-fore);
63
77
  display: block;
64
78
  padding: 0.5rem;
79
+
65
80
  &:first-child {
66
81
  border-radius: var(--#{variables.$prefix}border-radius-medium);
67
82
  }
68
83
  }
84
+
69
85
  @if (not variables.$is-skelton) {
70
86
  @each $color in variables.$colors {
71
87
  $colorName: map.get($color, "name");
72
88
  &.is-#{$colorName} {
73
- --#{variables.$prefix}color-message-fore: var(
89
+ --#{variables.$prefix}message-color-fore: var(
74
90
  --#{variables.$prefix}color-#{$colorName}-message-fore
75
91
  );
76
- --#{variables.$prefix}color-message-back: var(
92
+ --#{variables.$prefix}message-color-back: var(
77
93
  --#{variables.$prefix}color-#{$colorName}-message-back
78
94
  );
79
- --#{variables.$prefix}color-message-border: var(
95
+ --#{variables.$prefix}message-color-border: var(
80
96
  --#{variables.$prefix}color-#{$colorName}-message-border
81
97
  );
98
+ --#{variables.$prefix}message-color-selection-fore: var(
99
+ --#{variables.$prefix}color-#{$colorName}-message-selection-fore,
100
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
101
+ );
102
+ --#{variables.$prefix}message-color-selection-back: var(
103
+ --#{variables.$prefix}color-#{$colorName}-message-selection-back,
104
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
105
+ );
106
+
107
+ --#{variables.$prefix}message-header-color-fore: var(
108
+ --#{variables.$prefix}color-#{$colorName}-message-header-fore
109
+ );
110
+ --#{variables.$prefix}message-header-color-back: var(
111
+ --#{variables.$prefix}color-#{$colorName}-message-header-back
112
+ );
113
+ --#{variables.$prefix}message-header-color-border: var(
114
+ --#{variables.$prefix}color-#{$colorName}-message-header-border
115
+ );
116
+
117
+ --#{variables.$prefix}message-body-color-fore: var(
118
+ --#{variables.$prefix}color-#{$colorName}-message-body-fore
119
+ );
120
+ --#{variables.$prefix}message-body-color-back: var(
121
+ --#{variables.$prefix}color-#{$colorName}-message-body-back
122
+ );
123
+ --#{variables.$prefix}message-body-color-border: var(
124
+ --#{variables.$prefix}color-#{$colorName}-message-body-border
125
+ );
126
+ }
127
+ }
128
+
129
+ @each $semanticColor in variables.$semanticColors {
130
+ $colorName: map.get($semanticColor, "name");
131
+ &.is-#{$colorName} {
132
+ --#{variables.$prefix}message-color-fore: var(
133
+ --#{variables.$prefix}color-#{$colorName}-message-fore
134
+ );
135
+ --#{variables.$prefix}message-color-back: var(
136
+ --#{variables.$prefix}color-#{$colorName}-message-back
137
+ );
138
+ --#{variables.$prefix}message-color-border: var(
139
+ --#{variables.$prefix}color-#{$colorName}-message-border
140
+ );
141
+ --#{variables.$prefix}message-color-selection-fore: var(
142
+ --#{variables.$prefix}color-#{$colorName}-message-selection-fore,
143
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
144
+ );
145
+ --#{variables.$prefix}message-color-selection-back: var(
146
+ --#{variables.$prefix}color-#{$colorName}-message-selection-back,
147
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
148
+ );
82
149
 
83
- --#{variables.$prefix}color-message-header-fore: var(
150
+ --#{variables.$prefix}message-header-color-fore: var(
84
151
  --#{variables.$prefix}color-#{$colorName}-message-header-fore
85
152
  );
86
- --#{variables.$prefix}color-message-header-back: var(
153
+ --#{variables.$prefix}message-header-color-back: var(
87
154
  --#{variables.$prefix}color-#{$colorName}-message-header-back
88
155
  );
89
- --#{variables.$prefix}color-message-header-border: var(
156
+ --#{variables.$prefix}message-header-color-border: var(
90
157
  --#{variables.$prefix}color-#{$colorName}-message-header-border
91
158
  );
92
159
 
93
- --#{variables.$prefix}color-message-body-fore: var(
160
+ --#{variables.$prefix}message-body-color-fore: var(
94
161
  --#{variables.$prefix}color-#{$colorName}-message-body-fore
95
162
  );
96
- --#{variables.$prefix}color-message-body-back: var(
163
+ --#{variables.$prefix}message-body-color-back: var(
97
164
  --#{variables.$prefix}color-#{$colorName}-message-body-back
98
165
  );
99
- --#{variables.$prefix}color-message-body-border: var(
166
+ --#{variables.$prefix}message-body-color-border: var(
100
167
  --#{variables.$prefix}color-#{$colorName}-message-body-border
101
168
  );
102
169
  }
package/src/components/modal.scss CHANGED
@@ -3,14 +3,14 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  :where(.modal) {
6
- --#{variables.$prefix}color-modal-back: var(
6
+ --#{variables.$prefix}modal-color-back: var(
7
7
  --#{variables.$prefix}color-default-back
8
8
  );
9
9
 
10
10
  @include mixins.element();
11
11
  align-items: center;
12
12
  background-color: oklch(
13
- from var(--#{variables.$prefix}color-modal-back) l c h / 0.75
13
+ from var(--#{variables.$prefix}modal-color-back) l c h / 0.75
14
14
  );
15
15
  border: none;
16
16
  display: none;
@@ -42,7 +42,16 @@
42
42
  @each $color in variables.$colors {
43
43
  $colorName: map.get($color, "name");
44
44
  &.is-#{$colorName} {
45
- --#{variables.$prefix}color-modal-back: var(
45
+ --#{variables.$prefix}modal-color-back: var(
46
+ --#{variables.$prefix}color-#{$colorName}-back
47
+ );
48
+ }
49
+ }
50
+
51
+ @each $semanticColor in variables.$semanticColors {
52
+ $colorName: map.get($semanticColor, "name");
53
+ &.is-#{$colorName} {
54
+ --#{variables.$prefix}modal-color-back: var(
46
55
  --#{variables.$prefix}color-#{$colorName}-back
47
56
  );
48
57
  }