noctemyth 0.3.0 → 1.0.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 (67) hide show
  1. package/dist/css/noctemyth-skelton.css +1398 -4855
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +1398 -4855
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +17534 -1
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +17534 -1
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +7221 -3898
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +1507 -967
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +1 -1
  14. package/src/animations/fade.scss +2 -2
  15. package/src/backgrounds/dot.scss +5 -21
  16. package/src/backgrounds/gingham.scss +7 -23
  17. package/src/backgrounds/rhombus.scss +7 -23
  18. package/src/backgrounds/stripe.scss +5 -21
  19. package/src/backgrounds/zigzag.scss +7 -23
  20. package/src/base/accessibility.scss +68 -0
  21. package/src/base/dub.scss +19 -2
  22. package/src/base/index.scss +2 -0
  23. package/src/base/normalize.scss +0 -8
  24. package/src/base/root.scss +25 -0
  25. package/src/components/accordion.scss +6 -79
  26. package/src/components/aside.scss +7 -0
  27. package/src/components/badge.scss +68 -114
  28. package/src/components/blockquote.scss +3 -27
  29. package/src/components/breadcrumbs.scss +1 -22
  30. package/src/components/button.scss +72 -111
  31. package/src/components/card.scss +2 -60
  32. package/src/components/description-list.scss +46 -0
  33. package/src/components/dialogue.scss +55 -73
  34. package/src/components/figure.scss +173 -0
  35. package/src/components/footer.scss +5 -14
  36. package/src/components/hamburger.scss +1 -14
  37. package/src/components/header.scss +2 -32
  38. package/src/components/heading.scss +0 -1
  39. package/src/components/image.scss +0 -1
  40. package/src/components/index.scss +3 -0
  41. package/src/components/input.scss +1 -32
  42. package/src/components/label.scss +1 -19
  43. package/src/components/link.scss +6 -25
  44. package/src/components/list.scss +39 -9
  45. package/src/components/loader.scss +1 -10
  46. package/src/components/message.scss +1 -44
  47. package/src/components/modal.scss +1 -10
  48. package/src/components/nav.scss +5 -61
  49. package/src/components/paragraph.scss +0 -1
  50. package/src/components/progress.scss +2 -1
  51. package/src/css-variables/animation.scss +1 -1
  52. package/src/css-variables/border.scss +1 -1
  53. package/src/css-variables/color.scss +201 -29
  54. package/src/css-variables/components/header.scss +1 -0
  55. package/src/css-variables/index.scss +1 -0
  56. package/src/css-variables/layout.scss +11 -0
  57. package/src/css-variables/miscellaneous.scss +4 -4
  58. package/src/css-variables/typography.scss +1 -1
  59. package/src/layouts/columns.scss +56 -51
  60. package/src/layouts/container.scss +32 -30
  61. package/src/mixins/responsive.scss +12 -12
  62. package/src/utilities/border.scss +4 -0
  63. package/src/utilities/color.scss +110 -0
  64. package/src/variables/color.scss +263 -218
  65. package/src/variables/components/header.scss +1 -0
  66. package/src/variables/layout.scss +13 -11
  67. package/src/variables/miscellaneous.scss +0 -2
package/src/components/button.scss CHANGED
@@ -5,60 +5,75 @@
5
5
  :where(.button) {
6
6
  //#region local css variables
7
7
  --#{variables.$prefix}button-color-fore: var(
8
- --#{variables.$prefix}color-default-button-fore
8
+ --#{variables.$prefix}color-default-button-fore,
9
+ var(--#{variables.$prefix}color-default-fore)
9
10
  );
10
11
  --#{variables.$prefix}button-color-back: var(
11
- --#{variables.$prefix}color-default-button-back
12
+ --#{variables.$prefix}color-default-button-back,
13
+ var(--#{variables.$prefix}color-default-back)
12
14
  );
13
15
  --#{variables.$prefix}button-color-border: var(
14
- --#{variables.$prefix}color-default-button-border
16
+ --#{variables.$prefix}color-default-button-border,
17
+ var(--#{variables.$prefix}color-default-border)
15
18
  );
16
19
 
17
20
  //#region focus
18
21
  --#{variables.$prefix}button-focus-color-fore: var(
19
- --#{variables.$prefix}color-default-button-focus-fore
22
+ --#{variables.$prefix}color-default-button-focus-fore,
23
+ var(--#{variables.$prefix}color-default-focus-fore)
20
24
  );
21
25
  --#{variables.$prefix}button-focus-color-back: var(
22
- --#{variables.$prefix}color-default-button-focus-back
26
+ --#{variables.$prefix}color-default-button-focus-back,
27
+ var(--#{variables.$prefix}color-default-focus-back)
23
28
  );
24
29
  --#{variables.$prefix}button-focus-color-border: var(
25
- --#{variables.$prefix}color-default-button-focus-border
30
+ --#{variables.$prefix}color-default-button-focus-border,
31
+ var(--#{variables.$prefix}color-default-focus-border)
26
32
  );
27
33
  //#endregion focus
28
34
 
29
35
  //#region hover
30
36
  --#{variables.$prefix}button-hover-color-fore: var(
31
- --#{variables.$prefix}color-default-button-hover-fore
37
+ --#{variables.$prefix}color-default-button-hover-fore,
38
+ var(--#{variables.$prefix}color-default-hover-fore)
32
39
  );
33
40
  --#{variables.$prefix}button-hover-color-back: var(
34
- --#{variables.$prefix}color-default-button-hover-back
41
+ --#{variables.$prefix}color-default-button-hover-back,
42
+ var(--#{variables.$prefix}color-default-hover-back)
35
43
  );
36
44
  --#{variables.$prefix}button-hover-color-border: var(
37
- --#{variables.$prefix}color-default-button-hover-border
45
+ --#{variables.$prefix}color-default-button-hover-border,
46
+ var(--#{variables.$prefix}color-default-hover-border)
38
47
  );
39
48
  //#endregion hover
40
49
 
41
50
  //#region active
42
51
  --#{variables.$prefix}button-active-color-fore: var(
43
- --#{variables.$prefix}color-default-button-active-fore
52
+ --#{variables.$prefix}color-default-button-active-fore,
53
+ var(--#{variables.$prefix}color-default-active-fore)
44
54
  );
45
55
  --#{variables.$prefix}button-active-color-back: var(
46
- --#{variables.$prefix}color-default-button-active-back
56
+ --#{variables.$prefix}color-default-button-active-back,
57
+ var(--#{variables.$prefix}color-default-active-back)
47
58
  );
48
59
  --#{variables.$prefix}button-active-color-border: var(
49
- --#{variables.$prefix}color-default-button-active-border
60
+ --#{variables.$prefix}color-default-button-active-border,
61
+ var(--#{variables.$prefix}color-default-active-border)
50
62
  );
51
63
  //#endregion active
52
64
 
53
65
  //#region disabled
54
66
  --#{variables.$prefix}button-disabled-color-fore: var(
55
- --#{variables.$prefix}color-default-button-disabled-fore
67
+ --#{variables.$prefix}color-default-button-disabled-fore,
68
+ var(--#{variables.$prefix}color-default-disabled-fore)
56
69
  );
57
70
  --#{variables.$prefix}button-disabled-color-back: var(
58
- --#{variables.$prefix}color-default-button-disabled-back
71
+ --#{variables.$prefix}color-default-button-disabled-back,
72
+ var(--#{variables.$prefix}color-default-disabled-back)
59
73
  );
60
74
  --#{variables.$prefix}button-disabled-color-border: var(
61
- --#{variables.$prefix}color-default-button-disabled-border
75
+ --#{variables.$prefix}color-default-button-disabled-border,
76
+ var(--#{variables.$prefix}color-default-disabled-border)
62
77
  );
63
78
  //#endregion disabled
64
79
 
@@ -81,6 +96,7 @@
81
96
  user-select: none;
82
97
  vertical-align: top;
83
98
  word-spacing: 0px;
99
+
84
100
  &.is-circle {
85
101
  border-radius: 50%;
86
102
  text-align: center;
@@ -110,171 +126,116 @@
110
126
  width: 5rem;
111
127
  }
112
128
  }
129
+
113
130
  &:focus,
114
131
  &.is-focus,
115
132
  &.is-focused {
116
133
  outline: none;
117
- background-color: var(
118
- --#{variables.$prefix}button-focus-color-back
119
- );
134
+ background-color: var(--#{variables.$prefix}button-focus-color-back);
120
135
  border-color: var(--#{variables.$prefix}button-focus-color-border);
121
136
  color: var(--#{variables.$prefix}button-focus-color-fore);
122
137
  }
138
+
123
139
  &:hover,
124
- &.is-hovered,
140
+ &.is-hover,
125
141
  &.is-hovered {
126
142
  outline: none;
127
- background-color: var(
128
- --#{variables.$prefix}button-hover-color-back
129
- );
143
+ background-color: var(--#{variables.$prefix}button-hover-color-back);
130
144
  border-color: var(--#{variables.$prefix}button-hover-color-border);
131
145
  color: var(--#{variables.$prefix}button-hover-color-fore);
132
146
  }
147
+
133
148
  &:active,
134
149
  &.is-active {
135
- background-color: var(
136
- --#{variables.$prefix}button-active-color-back
137
- );
150
+ background-color: var(--#{variables.$prefix}button-active-color-back);
138
151
  border-color: var(--#{variables.$prefix}button-active-color-border);
139
152
  color: var(--#{variables.$prefix}button-active-color-fore);
140
153
  }
154
+
141
155
  &[disabled],
142
156
  fieldset[disabled],
143
157
  &.is-disabled {
144
- background-color: var(
145
- --#{variables.$prefix}button-disabled-color-back
146
- );
147
- border-color: var(
148
- --#{variables.$prefix}button-disabled-color-border
149
- );
158
+ background-color: var(--#{variables.$prefix}button-disabled-color-back);
159
+ border-color: var(--#{variables.$prefix}button-disabled-color-border);
150
160
  color: var(--#{variables.$prefix}button-disabled-color-fore);
151
161
  }
152
162
 
153
163
  @if (not variables.$is-skelton) {
154
- @each $color in variables.$colors {
164
+ @each $color in variables.$allColors {
155
165
  $colorName: map.get($color, "name");
156
166
  &.is-#{$colorName} {
157
167
  //#region local css variables
158
- --#{variables.$prefix}button-color-fore: var(
159
- --#{variables.$prefix}color-#{$colorName}-button-fore
160
- );
161
- --#{variables.$prefix}button-color-back: var(
162
- --#{variables.$prefix}color-#{$colorName}-button-back
163
- );
164
- --#{variables.$prefix}button-color-border: var(
165
- --#{variables.$prefix}color-#{$colorName}-button-border
166
- );
167
-
168
- //#region focus
169
- --#{variables.$prefix}button-focus-color-fore: var(
170
- --#{variables.$prefix}color-#{$colorName}-button-focus-fore
171
- );
172
- --#{variables.$prefix}button-focus-color-back: var(
173
- --#{variables.$prefix}color-#{$colorName}-button-focus-back
174
- );
175
- --#{variables.$prefix}button-focus-color-border: var(
176
- --#{variables.$prefix}color-#{$colorName}-button-focus-border
177
- );
178
- //#endregion focus
179
-
180
- //#region hover
181
- --#{variables.$prefix}button-hover-color-fore: var(
182
- --#{variables.$prefix}color-#{$colorName}-button-hover-fore
183
- );
184
- --#{variables.$prefix}button-hover-color-back: var(
185
- --#{variables.$prefix}color-#{$colorName}-button-hover-back
186
- );
187
- --#{variables.$prefix}button-hover-color-border: var(
188
- --#{variables.$prefix}color-#{$colorName}-button-hover-border
189
- );
190
- //#endregion hover
191
-
192
- //#region active
193
- --#{variables.$prefix}button-active-color-fore: var(
194
- --#{variables.$prefix}color-#{$colorName}-button-active-fore
195
- );
196
- --#{variables.$prefix}button-active-color-back: var(
197
- --#{variables.$prefix}color-#{$colorName}-button-active-back
198
- );
199
- --#{variables.$prefix}button-active-color-border: var(
200
- --#{variables.$prefix}color-#{$colorName}-button-active-border
201
- );
202
- //#endregion active
203
-
204
- //#region disabled
205
- --#{variables.$prefix}button-disabled-color-fore: var(
206
- --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
207
- );
208
- --#{variables.$prefix}button-disabled-color-back: var(
209
- --#{variables.$prefix}color-#{$colorName}-button-disabled-back
210
- );
211
- --#{variables.$prefix}button-disabled-color-border: var(
212
- --#{variables.$prefix}color-#{$colorName}-button-disabled-border
213
- );
214
- //#endregion disabled
215
-
216
- //#endregion local css variables
217
- }
218
- }
219
- @each $semanticColor in variables.$semanticColors {
220
- $colorName: map.get($semanticColor, "name");
221
- &.is-#{$colorName} {
222
168
  //#region local css variables
223
169
  --#{variables.$prefix}button-color-fore: var(
224
- --#{variables.$prefix}color-#{$colorName}-button-fore
170
+ --#{variables.$prefix}color-#{$colorName}-button-fore,
171
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
225
172
  );
226
173
  --#{variables.$prefix}button-color-back: var(
227
- --#{variables.$prefix}color-#{$colorName}-button-back
174
+ --#{variables.$prefix}color-#{$colorName}-button-back,
175
+ var(--#{variables.$prefix}color-#{$colorName}-back)
228
176
  );
229
177
  --#{variables.$prefix}button-color-border: var(
230
- --#{variables.$prefix}color-#{$colorName}-button-border
178
+ --#{variables.$prefix}color-#{$colorName}-button-border,
179
+ var(--#{variables.$prefix}color-#{$colorName}-border)
231
180
  );
232
181
 
233
182
  //#region focus
234
183
  --#{variables.$prefix}button-focus-color-fore: var(
235
- --#{variables.$prefix}color-#{$colorName}-button-focus-fore
184
+ --#{variables.$prefix}color-#{$colorName}-button-focus-fore,
185
+ var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
236
186
  );
237
187
  --#{variables.$prefix}button-focus-color-back: var(
238
- --#{variables.$prefix}color-#{$colorName}-button-focus-back
188
+ --#{variables.$prefix}color-#{$colorName}-button-focus-back,
189
+ var(--#{variables.$prefix}color-#{$colorName}-focus-back)
239
190
  );
240
191
  --#{variables.$prefix}button-focus-color-border: var(
241
- --#{variables.$prefix}color-#{$colorName}-button-focus-border
192
+ --#{variables.$prefix}color-#{$colorName}-button-focus-border,
193
+ var(--#{variables.$prefix}color-#{$colorName}-focus-border)
242
194
  );
243
195
  //#endregion focus
244
196
 
245
197
  //#region hover
246
198
  --#{variables.$prefix}button-hover-color-fore: var(
247
- --#{variables.$prefix}color-#{$colorName}-button-hover-fore
199
+ --#{variables.$prefix}color-#{$colorName}-button-hover-fore,
200
+ var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
248
201
  );
249
202
  --#{variables.$prefix}button-hover-color-back: var(
250
- --#{variables.$prefix}color-#{$colorName}-button-hover-back
203
+ --#{variables.$prefix}color-#{$colorName}-button-hover-back,
204
+ var(--#{variables.$prefix}color-#{$colorName}-hover-back)
251
205
  );
252
206
  --#{variables.$prefix}button-hover-color-border: var(
253
- --#{variables.$prefix}color-#{$colorName}-button-hover-border
207
+ --#{variables.$prefix}color-#{$colorName}-button-hover-border,
208
+ var(--#{variables.$prefix}color-#{$colorName}-hover-border)
254
209
  );
255
210
  //#endregion hover
256
211
 
257
212
  //#region active
258
213
  --#{variables.$prefix}button-active-color-fore: var(
259
- --#{variables.$prefix}color-#{$colorName}-button-active-fore
214
+ --#{variables.$prefix}color-#{$colorName}-button-active-fore,
215
+ var(--#{variables.$prefix}color-#{$colorName}-active-fore)
260
216
  );
261
217
  --#{variables.$prefix}button-active-color-back: var(
262
- --#{variables.$prefix}color-#{$colorName}-button-active-back
218
+ --#{variables.$prefix}color-#{$colorName}-button-active-back,
219
+ var(--#{variables.$prefix}color-#{$colorName}-active-back)
263
220
  );
264
221
  --#{variables.$prefix}button-active-color-border: var(
265
- --#{variables.$prefix}color-#{$colorName}-button-active-border
222
+ --#{variables.$prefix}color-#{$colorName}-button-active-border,
223
+ var(--#{variables.$prefix}color-#{$colorName}-active-border)
266
224
  );
267
225
  //#endregion active
268
226
 
269
227
  //#region disabled
270
228
  --#{variables.$prefix}button-disabled-color-fore: var(
271
- --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
229
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-fore,
230
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
272
231
  );
273
232
  --#{variables.$prefix}button-disabled-color-back: var(
274
- --#{variables.$prefix}color-#{$colorName}-button-disabled-back
233
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-back,
234
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-back)
275
235
  );
276
236
  --#{variables.$prefix}button-disabled-color-border: var(
277
- --#{variables.$prefix}color-#{$colorName}-button-disabled-border
237
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-border,
238
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-border)
278
239
  );
279
240
  //#endregion disabled
280
241
 
package/src/components/card.scss CHANGED
@@ -67,6 +67,7 @@
67
67
  @include mixins.element();
68
68
  display: block;
69
69
  background-color: var(--#{variables.$prefix}card-color-back);
70
+ // backdrop-filter: blur(1rem);
70
71
  border-radius: calc(
71
72
  var(--#{variables.$prefix}card-border-radius) +
72
73
  var(--#{variables.$prefix}card-border-width)
@@ -125,7 +126,7 @@
125
126
  }
126
127
 
127
128
  @if (not variables.$is-skelton) {
128
- @each $color in variables.$colors {
129
+ @each $color in variables.$allColors {
129
130
  $colorName: map.get($color, "name");
130
131
  &.is-#{$colorName} {
131
132
  //#region local css variables
@@ -183,64 +184,5 @@
183
184
  //#endregion local css variables
184
185
  }
185
186
  }
186
-
187
- @each $semanticColor in variables.$semanticColors {
188
- $colorName: map.get($semanticColor, "name");
189
- &.is-#{$colorName} {
190
- //#region local css variables
191
- --#{variables.$prefix}card-color-fore: var(
192
- --#{variables.$prefix}color-#{$colorName}-card-fore
193
- );
194
- --#{variables.$prefix}card-color-back: var(
195
- --#{variables.$prefix}color-#{$colorName}-card-back
196
- );
197
- --#{variables.$prefix}card-color-border: var(
198
- --#{variables.$prefix}color-#{$colorName}-card-border
199
- );
200
- --#{variables.$prefix}card-color-shadow: var(
201
- --#{variables.$prefix}color-#{$colorName}-card-shadow
202
- );
203
-
204
- --#{variables.$prefix}card-color-selection-fore: var(
205
- --#{variables.$prefix}color-#{$colorName}-card-selection-fore,
206
- var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
207
- );
208
- --#{variables.$prefix}card-color-selection-back: var(
209
- --#{variables.$prefix}color-#{$colorName}-card-selection-back,
210
- var(--#{variables.$prefix}color-#{$colorName}-selection-back)
211
- );
212
-
213
- --#{variables.$prefix}card-header-color-fore: var(
214
- --#{variables.$prefix}color-#{$colorName}-card-header-fore
215
- );
216
- --#{variables.$prefix}card-header-color-back: var(
217
- --#{variables.$prefix}color-#{$colorName}-card-header-back
218
- );
219
- --#{variables.$prefix}card-header-color-border: var(
220
- --#{variables.$prefix}color-#{$colorName}-card-header-border
221
- );
222
-
223
- --#{variables.$prefix}card-body-color-fore: var(
224
- --#{variables.$prefix}color-#{$colorName}-card-body-fore
225
- );
226
- --#{variables.$prefix}card-body-color-back: var(
227
- --#{variables.$prefix}color-#{$colorName}-card-body-back
228
- );
229
- --#{variables.$prefix}card-body-color-border: var(
230
- --#{variables.$prefix}color-#{$colorName}-card-body-border
231
- );
232
-
233
- --#{variables.$prefix}card-footer-color-fore: var(
234
- --#{variables.$prefix}color-#{$colorName}-card-body-fore
235
- );
236
- --#{variables.$prefix}card-footer-color-back: var(
237
- --#{variables.$prefix}color-#{$colorName}-card-body-back
238
- );
239
- --#{variables.$prefix}card-footer-color-border: var(
240
- --#{variables.$prefix}color-#{$colorName}-card-body-border
241
- );
242
- //#endregion local css variables
243
- }
244
- }
245
187
  }
246
188
  }
package/src/components/description-list.scss ADDED
@@ -0,0 +1,46 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+ @use "../mixins/index.scss" as mixins;
4
+
5
+ :where(.description-list) {
6
+ --#{variables.$prefix}description-list-gutter-y: 1rem;
7
+ --#{variables.$prefix}description-details-indent: 2rem;
8
+ @include mixins.element();
9
+ display: grid;
10
+ gap: var(--#{variables.$prefix}description-list-gutter-y) 0;
11
+
12
+ &.has-marker {
13
+ > :where(.description-list-item) {
14
+ display: list-item;
15
+ list-style-type: disc;
16
+ margin-left: var(--#{variables.$prefix}description-details-indent);
17
+ > :where(.description-details) {
18
+ @include mixins.element();
19
+ margin-left: 0;
20
+ }
21
+ }
22
+ }
23
+
24
+ > :where(.description-list-item) {
25
+ @include mixins.element();
26
+ display: block;
27
+
28
+ &.has-separater {
29
+ > :where(.description-term) {
30
+ &::after {
31
+ content: ":";
32
+ }
33
+ }
34
+ }
35
+
36
+ > :where(.description-term) {
37
+ @include mixins.element();
38
+ font-weight: var(--#{variables.$prefix}font-weight-semibold);
39
+ }
40
+
41
+ > :where(.description-details) {
42
+ @include mixins.element();
43
+ margin-left: var(--#{variables.$prefix}description-details-indent);
44
+ }
45
+ }
46
+ }
package/src/components/dialogue.scss CHANGED
@@ -29,44 +29,57 @@
29
29
  :where(.dialogue) {
30
30
  //#region local css variables
31
31
  --#{variables.$prefix}dialogue-color-fore: var(
32
- --#{variables.$prefix}color-default-dialogue-fore
32
+ --#{variables.$prefix}color-default-dialogue-fore,
33
+ var(--#{variables.$prefix}color-default-fore)
33
34
  );
34
35
  --#{variables.$prefix}dialogue-color-back: var(
35
- --#{variables.$prefix}color-default-dialogue-back
36
+ --#{variables.$prefix}color-default-dialogue-back,
37
+ var(--#{variables.$prefix}color-default-back)
36
38
  );
37
39
  --#{variables.$prefix}dialogue-color-border: var(
38
- --#{variables.$prefix}color-default-dialogue-border
40
+ --#{variables.$prefix}color-default-dialogue-border,
41
+ var(--#{variables.$prefix}color-default-border)
39
42
  );
40
43
  --#{variables.$prefix}dialogue-color-selection-fore: var(
41
- --#{variables.$prefix}color-default-selection-fore
44
+ --#{variables.$prefix}color-default-dialogue-selection-fore,
45
+ var(--#{variables.$prefix}color-default-selection-fore)
42
46
  );
43
47
  --#{variables.$prefix}dialogue-color-selection-back: var(
44
- --#{variables.$prefix}color-default-selection-back
48
+ --#{variables.$prefix}color-default-dialogue-selection-back,
49
+ var(--#{variables.$prefix}color-default-selection-back)
45
50
  );
46
51
 
47
52
  --#{variables.$prefix}dialogue-avatar-color-back: var(
48
- --#{variables.$prefix}color-default-dialogue-back
53
+ --#{variables.$prefix}color-default-dialogue-back,
54
+ var(--#{variables.$prefix}color-default-back)
49
55
  );
50
56
  --#{variables.$prefix}dialogue-avatar-color-border: var(
51
- --#{variables.$prefix}color-default-dialogue-border
57
+ --#{variables.$prefix}color-default-dialogue-border,
58
+ var(--#{variables.$prefix}color-default-border)
52
59
  );
53
60
  --#{variables.$prefix}dialogue-name-color-fore: var(
54
- --#{variables.$prefix}color-default-dialogue-name-fore
61
+ --#{variables.$prefix}color-default-dialogue-name-fore,
62
+ var(--#{variables.$prefix}color-default-fore)
55
63
  );
56
64
  --#{variables.$prefix}dialogue-name-color-back: var(
57
- --#{variables.$prefix}color-default-dialogue-name-back
65
+ --#{variables.$prefix}color-default-dialogue-name-back,
66
+ var(--#{variables.$prefix}color-default-back)
58
67
  );
59
68
  --#{variables.$prefix}dialogue-name-color-border: var(
60
- --#{variables.$prefix}color-default-dialogue-name-border
69
+ --#{variables.$prefix}color-default-dialogue-name-border,
70
+ var(--#{variables.$prefix}color-default-border)
61
71
  );
62
72
  --#{variables.$prefix}dialogue-message-color-fore: var(
63
- --#{variables.$prefix}color-default-dialogue-message-fore
73
+ --#{variables.$prefix}color-default-dialogue-message-fore,
74
+ var(--#{variables.$prefix}color-default-fore)
64
75
  );
65
76
  --#{variables.$prefix}dialogue-message-color-back: var(
66
- --#{variables.$prefix}color-default-dialogue-message-back
77
+ --#{variables.$prefix}color-default-dialogue-message-back,
78
+ var(--#{variables.$prefix}color-default-back)
67
79
  );
68
80
  --#{variables.$prefix}dialogue-message-color-border: var(
69
- --#{variables.$prefix}color-default-dialogue-message-border
81
+ --#{variables.$prefix}color-default-dialogue-message-border,
82
+ var(--#{variables.$prefix}color-default-border)
70
83
  );
71
84
 
72
85
  --#{variables.$prefix}dialogue-avatar-size: var(
@@ -99,7 +112,6 @@
99
112
  @include mixins.element();
100
113
  display: flex;
101
114
  max-width: 100%;
102
- margin: 0;
103
115
  padding-bottom: var(--#{variables.$prefix}dialogue-message-top-offset);
104
116
  position: relative;
105
117
  width: 100%;
@@ -134,7 +146,6 @@
134
146
  @include mixins.element();
135
147
  display: block;
136
148
  max-width: 100%;
137
- margin: 0;
138
149
  position: relative;
139
150
  }
140
151
  > .dialogue-avatar-container {
@@ -315,91 +326,62 @@
315
326
  }
316
327
  }
317
328
 
318
- @each $color in variables.$colors {
329
+
330
+ @each $color in variables.$allColors {
319
331
  $colorName: map.get($color, "name");
320
332
  &.is-#{$colorName} {
321
333
  --#{variables.$prefix}dialogue-color-fore: var(
322
- --#{variables.$prefix}color-#{$colorName}-dialogue-fore
334
+ --#{variables.$prefix}color-#{$colorName}-dialogue-fore,
335
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
323
336
  );
324
337
  --#{variables.$prefix}dialogue-color-back: var(
325
- --#{variables.$prefix}color-#{$colorName}-dialogue-back
338
+ --#{variables.$prefix}color-#{$colorName}-dialogue-back,
339
+ var(--#{variables.$prefix}color-#{$colorName}-back)
326
340
  );
327
341
  --#{variables.$prefix}dialogue-color-border: var(
328
- --#{variables.$prefix}color-#{$colorName}-dialogue-border
342
+ --#{variables.$prefix}color-#{$colorName}-dialogue-border,
343
+ var(--#{variables.$prefix}color-#{$colorName}-border)
329
344
  );
330
345
  --#{variables.$prefix}dialogue-color-selection-fore: var(
331
- --#{variables.$prefix}color-#{$colorName}-selection-fore
346
+ --#{variables.$prefix}color-#{$colorName}-dialogue-selection-fore,
347
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
332
348
  );
333
349
  --#{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
350
+ --#{variables.$prefix}color-#{$colorName}-dialogue-selection-back,
351
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
379
352
  );
353
+
380
354
  --#{variables.$prefix}dialogue-avatar-color-back: var(
381
- --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-back
355
+ --#{variables.$prefix}color-#{$colorName}-dialogue-back,
356
+ var(--#{variables.$prefix}color-#{$colorName}-back)
382
357
  );
383
358
  --#{variables.$prefix}dialogue-avatar-color-border: var(
384
- --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-border
359
+ --#{variables.$prefix}color-#{$colorName}-dialogue-border,
360
+ var(--#{variables.$prefix}color-#{$colorName}-border)
385
361
  );
386
362
  --#{variables.$prefix}dialogue-name-color-fore: var(
387
- --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore
363
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore,
364
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
388
365
  );
389
366
  --#{variables.$prefix}dialogue-name-color-back: var(
390
- --#{variables.$prefix}color-#{$colorName}-dialogue-name-back
367
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-back,
368
+ var(--#{variables.$prefix}color-#{$colorName}-back)
391
369
  );
392
370
  --#{variables.$prefix}dialogue-name-color-border: var(
393
- --#{variables.$prefix}color-#{$colorName}-dialogue-name-border
371
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-border,
372
+ var(--#{variables.$prefix}color-#{$colorName}-border)
394
373
  );
395
374
  --#{variables.$prefix}dialogue-message-color-fore: var(
396
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore
375
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore,
376
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
397
377
  );
398
378
  --#{variables.$prefix}dialogue-message-color-back: var(
399
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
379
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-back,
380
+ var(--#{variables.$prefix}color-#{$colorName}-back)
400
381
  );
401
382
  --#{variables.$prefix}dialogue-message-color-border: var(
402
- --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
383
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-border,
384
+ var(--#{variables.$prefix}color-#{$colorName}-border)
403
385
  );
404
386
  }
405
387
  }