noctemyth 0.2.0 → 0.3.0

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 (62) hide show
  1. package/dist/css/noctemyth-skelton.css +3126 -5336
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3126 -5336
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +38455 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +38455 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +22250 -37070
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5326 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/backgrounds/dot.scss +39 -15
  15. package/src/backgrounds/gingham.scss +35 -18
  16. package/src/backgrounds/rhombus.scss +58 -19
  17. package/src/backgrounds/stripe.scss +30 -9
  18. package/src/backgrounds/zigzag.scss +43 -18
  19. package/src/base/dub.scss +15 -2
  20. package/src/base/element.scss +1 -1
  21. package/src/components/accordion.scss +254 -88
  22. package/src/components/badge.scss +215 -63
  23. package/src/components/blockquote.scss +74 -25
  24. package/src/components/breadcrumbs.scss +66 -15
  25. package/src/components/button.scss +204 -76
  26. package/src/components/card.scss +204 -47
  27. package/src/components/dialogue.scss +209 -140
  28. package/src/components/div.scss +1 -1
  29. package/src/components/footer.scss +28 -5
  30. package/src/components/hamburger.scss +89 -50
  31. package/src/components/header.scss +71 -5
  32. package/src/components/heading.scss +6 -6
  33. package/src/components/image.scss +1 -0
  34. package/src/components/input.scss +141 -69
  35. package/src/components/label.scss +51 -3
  36. package/src/components/link.scss +72 -9
  37. package/src/components/list.scss +2 -2
  38. package/src/components/loader.scss +18 -7
  39. package/src/components/main.scss +1 -1
  40. package/src/components/message.scss +142 -23
  41. package/src/components/modal.scss +26 -7
  42. package/src/components/nav.scss +655 -279
  43. package/src/components/paragraph.scss +1 -1
  44. package/src/components/progress.scss +40 -15
  45. package/src/components/section.scss +1 -1
  46. package/src/components/span.scss +1 -1
  47. package/src/css-variables/color.scss +582 -465
  48. package/src/css-variables/components/dialogue.scss +2 -2
  49. package/src/css-variables/miscellaneous.scss +1 -1
  50. package/src/functions/color.scss +13 -0
  51. package/src/functions/index.scss +1 -0
  52. package/src/functions/string.scss +12 -0
  53. package/src/layouts/centering.scss +1 -1
  54. package/src/layouts/columns.scss +3 -2
  55. package/src/layouts/container.scss +1 -1
  56. package/src/mixins/color.scss +0 -32
  57. package/src/mixins/element.scss +2 -2
  58. package/src/mixins/responsive.scss +2 -1
  59. package/src/utilities/color.scss +2 -6
  60. package/src/variables/color.scss +949 -909
  61. package/src/variables/components/dialogue.scss +2 -2
  62. package/src/variables/miscellaneous.scss +1 -1
package/src/components/dialogue.scss CHANGED
@@ -8,98 +8,127 @@
8
8
  border-top-color: transparent;
9
9
  border-top-style: solid;
10
10
  border-top-width: calc(
11
- var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2
11
+ var(--#{variables.$prefix}dialogue-message-arrow-height) / 2
12
12
  );
13
13
  border-bottom-color: transparent;
14
14
  border-bottom-style: solid;
15
15
  border-bottom-width: calc(
16
- var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2
16
+ var(--#{variables.$prefix}dialogue-message-arrow-height) / 2
17
17
  );
18
18
  content: "";
19
19
  display: block;
20
20
  height: 0;
21
21
  position: absolute;
22
- top: var(--#{variables.$prefix}dialogue-messege-arrow-top-offset);
22
+ top: var(--#{variables.$prefix}dialogue-message-arrow-top-offset);
23
23
  right: auto;
24
24
  width: 0;
25
25
  z-index: -1;
26
26
  }
27
27
  }
28
28
 
29
- .dialogue {
30
- @include mixins.element();
29
+ :where(.dialogue) {
30
+ //#region local css variables
31
+ --#{variables.$prefix}dialogue-color-fore: var(
32
+ --#{variables.$prefix}color-default-dialogue-fore
33
+ );
34
+ --#{variables.$prefix}dialogue-color-back: var(
35
+ --#{variables.$prefix}color-default-dialogue-back
36
+ );
37
+ --#{variables.$prefix}dialogue-color-border: var(
38
+ --#{variables.$prefix}color-default-dialogue-border
39
+ );
40
+ --#{variables.$prefix}dialogue-color-selection-fore: var(
41
+ --#{variables.$prefix}color-default-selection-fore
42
+ );
43
+ --#{variables.$prefix}dialogue-color-selection-back: var(
44
+ --#{variables.$prefix}color-default-selection-back
45
+ );
46
+
47
+ --#{variables.$prefix}dialogue-avatar-color-back: var(
48
+ --#{variables.$prefix}color-default-dialogue-back
49
+ );
50
+ --#{variables.$prefix}dialogue-avatar-color-border: var(
51
+ --#{variables.$prefix}color-default-dialogue-border
52
+ );
53
+ --#{variables.$prefix}dialogue-name-color-fore: var(
54
+ --#{variables.$prefix}color-default-dialogue-name-fore
55
+ );
56
+ --#{variables.$prefix}dialogue-name-color-back: var(
57
+ --#{variables.$prefix}color-default-dialogue-name-back
58
+ );
59
+ --#{variables.$prefix}dialogue-name-color-border: var(
60
+ --#{variables.$prefix}color-default-dialogue-name-border
61
+ );
62
+ --#{variables.$prefix}dialogue-message-color-fore: var(
63
+ --#{variables.$prefix}color-default-dialogue-message-fore
64
+ );
65
+ --#{variables.$prefix}dialogue-message-color-back: var(
66
+ --#{variables.$prefix}color-default-dialogue-message-back
67
+ );
68
+ --#{variables.$prefix}dialogue-message-color-border: var(
69
+ --#{variables.$prefix}color-default-dialogue-message-border
70
+ );
71
+
31
72
  --#{variables.$prefix}dialogue-avatar-size: var(
32
73
  --#{variables.$prefix}dialogue-avatar-size-default
33
74
  );
34
75
  --#{variables.$prefix}dialogue-border-width: var(
35
76
  --#{variables.$prefix}border-width-medium
36
77
  );
37
- --#{variables.$prefix}dialogue-messege-top-offset: calc(
78
+ --#{variables.$prefix}dialogue-message-top-offset: calc(
38
79
  (
39
80
  var(--#{variables.$prefix}dialogue-name-padding-y) * 2 +
40
81
  var(--#{variables.$prefix}dialogue-border-width) * 2 +
41
82
  var(--#{variables.$prefix}dialogue-name-font-size)
42
- ) / 2
83
+ ) /
84
+ 2
43
85
  );
44
- --#{variables.$prefix}dialogue-messege-arrow-top-offset: calc(
45
- (-1 * var(--#{variables.$prefix}dialogue-messege-top-offset)) +
86
+ --#{variables.$prefix}dialogue-message-arrow-top-offset: calc(
87
+ (-1 * var(--#{variables.$prefix}dialogue-message-top-offset)) +
46
88
  (-1 * var(--#{variables.$prefix}dialogue-border-width)) +
47
- (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2) +
89
+ (-1 * var(--#{variables.$prefix}dialogue-message-arrow-height) / 2) +
48
90
  var(--#{variables.$prefix}dialogue-avatar-top-offset) +
49
91
  (var(--#{variables.$prefix}dialogue-avatar-size) / 2)
50
92
  );
93
+ --#{variables.$prefix}dialogue-border-radius: var(
94
+ --#{variables.$prefix}border-radius-medium
95
+ );
96
+ --#{variables.$prefix}dialogue-border-style: solid;
97
+ //#endregion local css variables
51
98
 
99
+ @include mixins.element();
52
100
  display: flex;
53
101
  max-width: 100%;
54
102
  margin: 0;
55
- padding-bottom: var(--#{variables.$prefix}dialogue-messege-top-offset);
103
+ padding-bottom: var(--#{variables.$prefix}dialogue-message-top-offset);
56
104
  position: relative;
57
105
  width: 100%;
58
- &.is-avatar-small {
59
- --#{variables.$prefix}dialogue-avatar-size: var(
60
- --#{variables.$prefix}dialogue-avatar-size-small
61
- );
62
- }
63
- &.is-avatar-large {
64
- --#{variables.$prefix}dialogue-avatar-size: var(
65
- --#{variables.$prefix}dialogue-avatar-size-large
66
- );
106
+
107
+ &::selection {
108
+ color: var(--#{variables.$prefix}dialogue-color-selection-fore);
109
+ background-color: var(--#{variables.$prefix}dialogue-color-selection-back);
67
110
  }
111
+
68
112
  &.is-avatar-circle {
69
- --#{variables.$prefix}dialogue-messege-arrow-top-offset: calc(
70
- (-1 * var(--#{variables.$prefix}dialogue-messege-top-offset)) +
113
+ --#{variables.$prefix}dialogue-message-arrow-top-offset: calc(
114
+ (-1 * var(--#{variables.$prefix}dialogue-message-top-offset)) +
71
115
  (-1 * var(--#{variables.$prefix}dialogue-border-width)) +
72
- (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-height) / 2) +
116
+ (-1 * var(--#{variables.$prefix}dialogue-message-arrow-height) / 2) +
73
117
  var(--#{variables.$prefix}dialogue-avatar-top-offset) +
74
118
  (
75
119
  var(--#{variables.$prefix}dialogue-avatar-size) +
76
120
  var(--#{variables.$prefix}dialogue-border-width) * 2
77
- ) / 2
121
+ ) /
122
+ 2
78
123
  );
79
124
  > .dialogue-avatar-container {
80
125
  > .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
126
  border-radius: var(--#{variables.$prefix}border-radius-circle);
127
+ user-select: none;
90
128
  }
91
129
  }
92
130
  }
93
131
 
94
- @each $borderWidth in variables.$borderWidths {
95
- $name: map.get($borderWidth, "name");
96
- &.is-border-width-#{$name} {
97
- --#{variables.$prefix}dialogue-border-width: var(
98
- --#{variables.$prefix}border-width-#{$name}
99
- );
100
- }
101
- }
102
-
103
132
  > .dialogue-avatar-container,
104
133
  > .dialogue-content-container {
105
134
  @include mixins.element();
@@ -115,6 +144,7 @@
115
144
  > .dialogue-avatar {
116
145
  @include mixins.element();
117
146
  aspect-ratio: 1;
147
+ background-color: var(--#{variables.$prefix}dialogue-avatar-color-back);
118
148
  display: block;
119
149
  align-items: center;
120
150
  justify-content: center;
@@ -122,6 +152,11 @@
122
152
  width: var(--#{variables.$prefix}dialogue-avatar-size);
123
153
  margin: 0 auto;
124
154
  overflow: hidden;
155
+ &.has-border {
156
+ border-color: var(--#{variables.$prefix}dialogue-avatar-color-border);
157
+ border-style: var(--#{variables.$prefix}dialogue-border-style);
158
+ border-width: var(--#{variables.$prefix}dialogue-border-width);
159
+ }
125
160
  }
126
161
  }
127
162
  > .dialogue-content-container {
@@ -130,19 +165,15 @@
130
165
  > .dialogue-name,
131
166
  > .dialogue-message {
132
167
  min-height: 1rem;
133
- border-radius: var(--#{variables.$prefix}border-radius-medium);
134
- border-style: solid;
168
+ border-radius: var(--#{variables.$prefix}dialogue-border-radius);
135
169
  border-width: var(--#{variables.$prefix}dialogue-border-width);
170
+ border-style: var(--#{variables.$prefix}dialogue-border-style);
136
171
  }
137
172
  > .dialogue-name {
138
173
  @include mixins.element();
139
- background-color: var(
140
- --#{variables.$prefix}color-default-dialogue-name-back
141
- );
142
- border-color: var(
143
- --#{variables.$prefix}color-default-dialogue-name-border
144
- );
145
- color: var(--#{variables.$prefix}color-default-dialogue-name-fore);
174
+ background-color: var(--#{variables.$prefix}dialogue-name-color-back);
175
+ border-color: var(--#{variables.$prefix}dialogue-name-color-border);
176
+ color: var(--#{variables.$prefix}dialogue-name-color-fore);
146
177
  font-size: var(--#{variables.$prefix}dialogue-name-font-size);
147
178
  position: absolute;
148
179
  top: 0;
@@ -153,17 +184,13 @@
153
184
  }
154
185
  > .dialogue-message {
155
186
  @include mixins.element();
156
- background-color: var(
157
- --#{variables.$prefix}color-default-dialogue-message-back
158
- );
159
- border-color: var(
160
- --#{variables.$prefix}color-default-dialogue-message-border
161
- );
162
- color: var(--#{variables.$prefix}color-default-dialogue-message-fore);
187
+ background-color: var(--#{variables.$prefix}dialogue-message-color-back);
188
+ border-color: var(--#{variables.$prefix}dialogue-message-color-border);
189
+ color: var(--#{variables.$prefix}dialogue-message-color-fore);
163
190
  position: relative;
164
- top: var(--#{variables.$prefix}dialogue-messege-top-offset);
191
+ top: var(--#{variables.$prefix}dialogue-message-top-offset);
165
192
  padding-top: calc(
166
- var(--#{variables.$prefix}dialogue-messege-top-offset) / 2
193
+ var(--#{variables.$prefix}dialogue-message-top-offset) / 2
167
194
  );
168
195
  width: auto;
169
196
  z-index: 0;
@@ -178,9 +205,9 @@
178
205
  > .dialogue-content-container {
179
206
  > .dialogue-name {
180
207
  right: auto;
181
- left: var(--#{variables.$prefix}dialogue-messege-arrow-width);
208
+ left: var(--#{variables.$prefix}dialogue-message-arrow-width);
182
209
  }
183
- padding-left: var(--#{variables.$prefix}dialogue-messege-arrow-width);
210
+ padding-left: var(--#{variables.$prefix}dialogue-message-arrow-width);
184
211
  > .dialogue-message {
185
212
  right: auto;
186
213
  @include dialogue-message-arrow-base();
@@ -191,26 +218,26 @@
191
218
  }
192
219
  &::before {
193
220
  border-right-color: var(
194
- --#{variables.$prefix}color-default-dialogue-message-border
221
+ --#{variables.$prefix}dialogue-message-color-border
195
222
  );
196
223
  border-right-width: var(
197
- --#{variables.$prefix}dialogue-messege-arrow-width
224
+ --#{variables.$prefix}dialogue-message-arrow-width
198
225
  );
199
226
  border-right-style: solid;
200
227
  left: calc(
201
- (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width))
228
+ (-1 * var(--#{variables.$prefix}dialogue-message-arrow-width))
202
229
  );
203
230
  }
204
231
  &::after {
205
232
  border-right-color: var(
206
- --#{variables.$prefix}color-default-dialogue-message-back
233
+ --#{variables.$prefix}dialogue-message-color-back
207
234
  );
208
235
  border-right-width: var(
209
- --#{variables.$prefix}dialogue-messege-arrow-width
236
+ --#{variables.$prefix}dialogue-message-arrow-width
210
237
  );
211
238
  border-right-style: solid;
212
239
  left: calc(
213
- (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width)) +
240
+ (-1 * var(--#{variables.$prefix}dialogue-message-arrow-width)) +
214
241
  var(--#{variables.$prefix}dialogue-border-width) * 2
215
242
  );
216
243
  }
@@ -219,10 +246,10 @@
219
246
  }
220
247
  &.is-right {
221
248
  > .dialogue-content-container {
222
- padding-right: var(--#{variables.$prefix}dialogue-messege-arrow-width);
249
+ padding-right: var(--#{variables.$prefix}dialogue-message-arrow-width);
223
250
  > .dialogue-name {
224
251
  left: auto;
225
- right: var(--#{variables.$prefix}dialogue-messege-arrow-width);
252
+ right: var(--#{variables.$prefix}dialogue-message-arrow-width);
226
253
  }
227
254
  > .dialogue-message {
228
255
  left: auto;
@@ -234,104 +261,146 @@
234
261
  }
235
262
  &::before {
236
263
  border-left-color: var(
237
- --#{variables.$prefix}color-default-dialogue-message-border
264
+ --#{variables.$prefix}dialogue-message-color-border
238
265
  );
239
266
  border-left-width: var(
240
- --#{variables.$prefix}dialogue-messege-arrow-width
267
+ --#{variables.$prefix}dialogue-message-arrow-width
241
268
  );
242
269
  border-left-style: solid;
243
270
  right: calc(
244
- (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width))
271
+ (-1 * var(--#{variables.$prefix}dialogue-message-arrow-width))
245
272
  );
246
273
  }
247
274
  &::after {
248
275
  border-left-color: var(
249
- --#{variables.$prefix}color-default-dialogue-message-back
276
+ --#{variables.$prefix}dialogue-message-color-back
250
277
  );
251
278
  border-left-width: var(
252
- --#{variables.$prefix}dialogue-messege-arrow-width
279
+ --#{variables.$prefix}dialogue-message-arrow-width
253
280
  );
254
281
  border-left-style: solid;
255
282
  right: calc(
256
- (-1 * var(--#{variables.$prefix}dialogue-messege-arrow-width)) +
283
+ (-1 * var(--#{variables.$prefix}dialogue-message-arrow-width)) +
257
284
  var(--#{variables.$prefix}dialogue-border-width) * 2
258
285
  );
259
286
  }
260
287
  }
261
288
  }
262
289
  }
263
- @each $border-style in variables.$borderStyles {
264
- &.is-border-style-#{$border-style} {
265
- &.is-avatar-circle {
266
- > .dialogue-avatar-container {
267
- > .dialogue-avatar {
268
- border-style: #{$border-style};
269
- }
270
- }
290
+
291
+ @if (not variables.$is-skelton) {
292
+ &.is-avatar-small {
293
+ --#{variables.$prefix}dialogue-avatar-size: var(
294
+ --#{variables.$prefix}dialogue-avatar-size-small
295
+ );
296
+ }
297
+ &.is-avatar-large {
298
+ --#{variables.$prefix}dialogue-avatar-size: var(
299
+ --#{variables.$prefix}dialogue-avatar-size-large
300
+ );
301
+ }
302
+
303
+ @each $borderWidth in variables.$borderWidths {
304
+ $name: map.get($borderWidth, "name");
305
+ &.is-border-width-#{$name} {
306
+ --#{variables.$prefix}dialogue-border-width: var(
307
+ --#{variables.$prefix}border-width-#{$name}
308
+ );
271
309
  }
272
- > .dialogue-content-container {
273
- > .dialogue-name,
274
- > .dialogue-message {
275
- border-style: #{$border-style};
276
- }
310
+ }
311
+
312
+ @each $border-style in variables.$borderStyles {
313
+ &.is-border-style-#{$border-style} {
314
+ --#{variables.$prefix}dialogue-border-style: #{$border-style};
277
315
  }
278
316
  }
279
- }
280
317
 
281
- @if (not variables.$is-skelton) {
282
318
  @each $color in variables.$colors {
283
319
  $colorName: map.get($color, "name");
284
320
  &.is-#{$colorName} {
285
- > .dialogue-avatar-container {
286
- > .dialogue-avatar {
287
- background-color: var(
288
- --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-back
289
- );
290
- border-color: var(
291
- --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-border
292
- );
293
- }
294
- }
295
- > .dialogue-content-container {
296
- > .dialogue-name {
297
- background-color: var(
298
- --#{variables.$prefix}color-#{$colorName}-dialogue-name-back
299
- );
300
- border-color: var(
301
- --#{variables.$prefix}color-#{$colorName}-dialogue-name-border
302
- );
303
- color: var(
304
- --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore
305
- );
306
- }
307
- > .dialogue-message {
308
- background-color: var(
309
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
310
- );
311
- border-color: var(
312
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
313
- );
314
- color: var(
315
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore
316
- );
317
- &::after {
318
- border-right-color: var(
319
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
320
- );
321
- border-left-color: var(
322
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
323
- );
324
- }
325
- &::before {
326
- border-right-color: var(
327
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
328
- );
329
- border-left-color: var(
330
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
331
- );
332
- }
333
- }
334
- }
321
+ --#{variables.$prefix}dialogue-color-fore: var(
322
+ --#{variables.$prefix}color-#{$colorName}-dialogue-fore
323
+ );
324
+ --#{variables.$prefix}dialogue-color-back: var(
325
+ --#{variables.$prefix}color-#{$colorName}-dialogue-back
326
+ );
327
+ --#{variables.$prefix}dialogue-color-border: var(
328
+ --#{variables.$prefix}color-#{$colorName}-dialogue-border
329
+ );
330
+ --#{variables.$prefix}dialogue-color-selection-fore: var(
331
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
332
+ );
333
+ --#{variables.$prefix}dialogue-color-selection-back: var(
334
+ --#{variables.$prefix}color-#{$colorName}-selection-back
335
+ );
336
+ --#{variables.$prefix}dialogue-avatar-color-back: var(
337
+ --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-back
338
+ );
339
+ --#{variables.$prefix}dialogue-avatar-color-border: var(
340
+ --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-border
341
+ );
342
+ --#{variables.$prefix}dialogue-name-color-fore: var(
343
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore
344
+ );
345
+ --#{variables.$prefix}dialogue-name-color-back: var(
346
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-back
347
+ );
348
+ --#{variables.$prefix}dialogue-name-color-border: var(
349
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-border
350
+ );
351
+ --#{variables.$prefix}dialogue-message-color-fore: var(
352
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore
353
+ );
354
+ --#{variables.$prefix}dialogue-message-color-back: var(
355
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
356
+ );
357
+ --#{variables.$prefix}dialogue-message-color-border: var(
358
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
359
+ );
360
+ }
361
+ }
362
+ @each $semanticColor in variables.$semanticColors {
363
+ $colorName: map.get($semanticColor, "name");
364
+ &.is-#{$colorName} {
365
+ --#{variables.$prefix}dialogue-color-fore: var(
366
+ --#{variables.$prefix}color-#{$colorName}-dialogue-fore
367
+ );
368
+ --#{variables.$prefix}dialogue-color-back: var(
369
+ --#{variables.$prefix}color-#{$colorName}-dialogue-back
370
+ );
371
+ --#{variables.$prefix}dialogue-color-border: var(
372
+ --#{variables.$prefix}color-#{$colorName}-dialogue-border
373
+ );
374
+ --#{variables.$prefix}dialogue-color-selection-fore: var(
375
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
376
+ );
377
+ --#{variables.$prefix}dialogue-color-selection-back: var(
378
+ --#{variables.$prefix}color-#{$colorName}-selection-back
379
+ );
380
+ --#{variables.$prefix}dialogue-avatar-color-back: var(
381
+ --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-back
382
+ );
383
+ --#{variables.$prefix}dialogue-avatar-color-border: var(
384
+ --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-border
385
+ );
386
+ --#{variables.$prefix}dialogue-name-color-fore: var(
387
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore
388
+ );
389
+ --#{variables.$prefix}dialogue-name-color-back: var(
390
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-back
391
+ );
392
+ --#{variables.$prefix}dialogue-name-color-border: var(
393
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-border
394
+ );
395
+ --#{variables.$prefix}dialogue-message-color-fore: var(
396
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore
397
+ );
398
+ --#{variables.$prefix}dialogue-message-color-back: var(
399
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
400
+ );
401
+ --#{variables.$prefix}dialogue-message-color-border: var(
402
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
403
+ );
335
404
  }
336
405
  }
337
406
  }
package/src/components/div.scss CHANGED
@@ -2,6 +2,6 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .div {
5
+ :where(.div) {
6
6
  @include mixins.element();
7
7
  }
package/src/components/footer.scss CHANGED
@@ -2,10 +2,18 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .footer {
5
+ :where(.footer) {
6
+ --#{variables.$prefix}footer-color-fore: var(
7
+ --#{variables.$prefix}color-default-footer-fore
8
+ );
9
+ --#{variables.$prefix}footer-color-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}footer-color-back);
16
+ color: var(--#{variables.$prefix}footer-color-fore);
9
17
  padding: 2rem 0;
10
18
  bottom: 0;
11
19
 
@@ -13,8 +21,23 @@
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}footer-color-fore: var(
25
+ --#{variables.$prefix}color-#{$colorName}-footer-fore
26
+ );
27
+ --#{variables.$prefix}footer-color-back: var(
28
+ --#{variables.$prefix}color-#{$colorName}-footer-back
29
+ );
30
+ }
31
+ }
32
+ @each $semanticColor in variables.$semanticColors {
33
+ $colorName: map.get($semanticColor, "name");
34
+ &.is-#{$colorName} {
35
+ --#{variables.$prefix}footer-color-fore: var(
36
+ --#{variables.$prefix}color-#{$colorName}-footer-fore
37
+ );
38
+ --#{variables.$prefix}footer-color-back: var(
39
+ --#{variables.$prefix}color-#{$colorName}-footer-back
40
+ );
18
41
  }
19
42
  }
20
43
  }