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/accordion.scss CHANGED
@@ -3,11 +3,89 @@
3
3
  @use "../icons/index.scss" as icons;
4
4
  @use "../mixins/index.scss" as mixins;
5
5
 
6
- .accordion {
6
+ :where(.accordion) {
7
+ //#region local css variables
8
+ --#{variables.$prefix}accordion-color-fore: var(
9
+ --#{variables.$prefix}color-default-accordion-fore,
10
+ var(--#{variables.$prefix}color-default-fore)
11
+ );
12
+ --#{variables.$prefix}accordion-color-back: var(
13
+ --#{variables.$prefix}color-default-accordion-back,
14
+ var(--#{variables.$prefix}color-default-back)
15
+ );
16
+ --#{variables.$prefix}accordion-color-border: var(
17
+ --#{variables.$prefix}color-default-accordion-border,
18
+ var(--#{variables.$prefix}color-default-border)
19
+ );
20
+ --#{variables.$prefix}accordion-color-selection-fore: var(
21
+ --#{variables.$prefix}color-default-selection-fore
22
+ );
23
+ --#{variables.$prefix}accordion-color-selection-back: var(
24
+ --#{variables.$prefix}color-default-selection-back
25
+ );
26
+
27
+ --#{variables.$prefix}accordion-summary-color-fore: var(
28
+ --#{variables.$prefix}color-default-accordion-summary-fore
29
+ );
30
+ --#{variables.$prefix}accordion-summary-color-back: var(
31
+ --#{variables.$prefix}color-default-accordion-summary-back
32
+ );
33
+ --#{variables.$prefix}accordion-summary-color-border: var(
34
+ --#{variables.$prefix}color-default-accordion-summary-border
35
+ );
36
+
37
+ --#{variables.$prefix}accordion-details-color-fore: var(
38
+ --#{variables.$prefix}color-default-accordion-details-fore
39
+ );
40
+ --#{variables.$prefix}accordion-details-color-back: var(
41
+ --#{variables.$prefix}color-default-accordion-details-back
42
+ );
43
+ --#{variables.$prefix}accordion-details-color-border: var(
44
+ --#{variables.$prefix}color-default-accordion-details-border
45
+ );
46
+
47
+ //#region focus
48
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
49
+ --#{variables.$prefix}color-default-accordion-summary-focus-back
50
+ );
51
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
52
+ --#{variables.$prefix}color-default-accordion-summary-focus-border
53
+ );
54
+ //#endregion focus
55
+
56
+ //#region hover
57
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
58
+ --#{variables.$prefix}color-default-accordion-summary-hover-back
59
+ );
60
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
61
+ --#{variables.$prefix}color-default-accordion-summary-hover-border
62
+ );
63
+ //#endregion hover
64
+
65
+ //#region active
66
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
67
+ --#{variables.$prefix}color-default-accordion-summary-active-back
68
+ );
69
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
70
+ --#{variables.$prefix}color-default-accordion-summary-active-border
71
+ );
72
+ //#endregion active
73
+
74
+ //#region disabled
75
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
76
+ --#{variables.$prefix}color-default-accordion-summary-disabled-back
77
+ );
78
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
79
+ --#{variables.$prefix}color-default-accordion-summary-disabled-border
80
+ );
81
+ //#endregion disabled
82
+
83
+ //#endregion local css variables
84
+
7
85
  @include mixins.element();
8
- color: var(--#{variables.$prefix}color-default-accordion-fore);
9
- background-color: var(--#{variables.$prefix}color-default-accordion-back);
10
- border-color: var(--#{variables.$prefix}color-default-accordion-border);
86
+ color: var(--#{variables.$prefix}accordion-color-fore);
87
+ background-color: var(--#{variables.$prefix}accordion-color-back);
88
+ border-color: var(--#{variables.$prefix}accordion-color-border);
11
89
  border-radius: calc(
12
90
  var(--#{variables.$prefix}border-radius-medium) +
13
91
  var(--#{variables.$prefix}border-width-thin)
@@ -15,22 +93,23 @@
15
93
  border-style: solid;
16
94
  border-width: var(--#{variables.$prefix}border-width-thin);
17
95
  border-collapse: collapse;
18
- >.accordion-summary {
96
+
97
+ &::selection {
98
+ color: var(--#{variables.$prefix}accordion-color-selection-fore);
99
+ background-color: var(--#{variables.$prefix}accordion-color-selection-back);
100
+ }
101
+
102
+ > .accordion-summary {
19
103
  @include mixins.element();
20
- background-color: var(
21
- --#{variables.$prefix}color-default-accordion-summary-back
22
- );
23
- border-color: var(
24
- --#{variables.$prefix}color-default-accordion-summary-border
25
- );
26
- border-radius: calc(
27
- var(--#{variables.$prefix}border-radius-medium)
28
- );
104
+ background-color: var(--#{variables.$prefix}accordion-summary-color-back);
105
+ border-color: var(--#{variables.$prefix}accordion-summary-color-border);
106
+ border-radius: calc(var(--#{variables.$prefix}border-radius-medium));
29
107
  cursor: pointer;
30
108
  display: block;
31
109
  padding: 1rem;
32
110
  position: relative;
33
111
  touch-action: manipulation;
112
+ user-select: none;
34
113
  list-style: none;
35
114
  &::marker,
36
115
  &::-webkit-details-marker {
@@ -42,65 +121,68 @@
42
121
  right: 1rem;
43
122
  position: absolute;
44
123
  top: calc(50% - 0.25rem);
124
+ background: var(--#{variables.$prefix}accordion-color-fore);
45
125
  }
46
126
  }
47
127
  &:focus,
48
128
  &.is-focus,
49
129
  &.is-focused {
50
130
  background-color: var(
51
- --#{variables.$prefix}color-default-accordion-summary-focus-back
131
+ --#{variables.$prefix}accordion-summary-color-focus-back
52
132
  );
53
133
  border-color: var(
54
- --#{variables.$prefix}color-default-accordion-summary-focus-border
134
+ --#{variables.$prefix}accordion-summary-color-focus-border
55
135
  );
56
136
  }
57
137
  &:hover,
58
138
  &.is-hovered,
59
139
  &.is-hovered {
60
140
  background-color: var(
61
- --#{variables.$prefix}color-default-accordion-summary-hover-back
141
+ --#{variables.$prefix}accordion-summary-color-hover-back
62
142
  );
63
143
  border-color: var(
64
- --#{variables.$prefix}color-default-accordion-summary-hover-border
144
+ --#{variables.$prefix}accordion-summary-color-hover-border
65
145
  );
66
146
  }
67
147
  &:active,
68
148
  &.is-active {
69
149
  background-color: var(
70
- --#{variables.$prefix}color-default-accordion-summary-active-back
150
+ --#{variables.$prefix}accordion-summary-color-active-back
71
151
  );
72
152
  border-color: var(
73
- --#{variables.$prefix}color-default-accordion-summary-active-border
153
+ --#{variables.$prefix}accordion-summary-color-active-border
74
154
  );
75
155
  }
76
156
  &[disabled],
77
157
  fieldset[disabled],
78
158
  &.is-disabled {
79
159
  background-color: var(
80
- --#{variables.$prefix}color-default-accordion-summary-disabled-back
160
+ --#{variables.$prefix}accordion-summary-color-disabled-back
81
161
  );
82
162
  border-color: var(
83
- --#{variables.$prefix}color-default-accordion-summary-disabled-border
163
+ --#{variables.$prefix}accordion-summary-color-disabled-border
84
164
  );
85
165
  }
86
166
  }
87
- >.accordion-details {
167
+ > .accordion-details {
88
168
  @include mixins.element();
89
- border-color: var(--#{variables.$prefix}color-gray-border);
169
+ border-color: var(--#{variables.$prefix}accordion-details-color-border);
90
170
  height: 0;
91
171
  display: none;
92
172
  padding: 1rem;
93
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium);
173
+ border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
174
+ var(--#{variables.$prefix}border-radius-medium);
94
175
  }
95
176
  &[open],
96
177
  is-open {
97
- >.accordion-summary {
98
- border-radius: var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium) 0 0;
178
+ > .accordion-summary {
179
+ border-radius: var(--#{variables.$prefix}border-radius-medium)
180
+ var(--#{variables.$prefix}border-radius-medium) 0 0;
99
181
  &::after {
100
182
  transform: rotate(180deg);
101
183
  }
102
184
  }
103
- >.accordion-details {
185
+ > .accordion-details {
104
186
  display: block;
105
187
  height: auto;
106
188
  }
@@ -109,70 +191,154 @@
109
191
  @each $color in variables.$colors {
110
192
  $colorName: map.get($color, "name");
111
193
  &.is-#{$colorName} {
112
- color: var(--#{variables.$prefix}color-#{$colorName}-accordion-fore);
113
- background-color: var(
194
+ --#{variables.$prefix}accordion-color-fore: var(
195
+ --#{variables.$prefix}color-#{$colorName}-accordion-fore
196
+ );
197
+ --#{variables.$prefix}accordion-color-back: var(
198
+ --#{variables.$prefix}color-#{$colorName}-accordion-back
199
+ );
200
+ --#{variables.$prefix}accordion-color-border: var(
201
+ --#{variables.$prefix}color-#{$colorName}-accordion-border
202
+ );
203
+ --#{variables.$prefix}accordion-color-selection-fore: var(
204
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
205
+ );
206
+ --#{variables.$prefix}accordion-color-selection-back: var(
207
+ --#{variables.$prefix}color-#{$colorName}-selection-back
208
+ );
209
+
210
+ --#{variables.$prefix}accordion-summary-color-fore: var(
211
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-fore
212
+ );
213
+ --#{variables.$prefix}accordion-summary-color-back: var(
214
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
215
+ );
216
+ --#{variables.$prefix}accordion-summary-color-border: var(
217
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
218
+ );
219
+
220
+ --#{variables.$prefix}accordion-details-color-fore: var(
221
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-fore
222
+ );
223
+ --#{variables.$prefix}accordion-details-color-back: var(
224
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-back
225
+ );
226
+ --#{variables.$prefix}accordion-details-color-border: var(
227
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-border
228
+ );
229
+
230
+ //#region focus
231
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
232
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
233
+ );
234
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
235
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
236
+ );
237
+ //#endregion focus
238
+
239
+ //#region hover
240
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
241
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
242
+ );
243
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
244
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
245
+ );
246
+ //#endregion hover
247
+
248
+ //#region active
249
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
250
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
251
+ );
252
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
253
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
254
+ );
255
+ //#endregion active
256
+
257
+ //#region disabled
258
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
259
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
260
+ );
261
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
262
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
263
+ );
264
+ //#endregion disabled
265
+ }
266
+ }
267
+
268
+ @each $semanticColor in variables.$semanticColors {
269
+ $colorName: map.get($semanticColor, "name");
270
+ &.is-#{$colorName} {
271
+ --#{variables.$prefix}accordion-color-fore: var(
272
+ --#{variables.$prefix}color-#{$colorName}-accordion-fore
273
+ );
274
+ --#{variables.$prefix}accordion-color-back: var(
114
275
  --#{variables.$prefix}color-#{$colorName}-accordion-back
115
276
  );
116
- border-color: var(
277
+ --#{variables.$prefix}accordion-color-border: var(
117
278
  --#{variables.$prefix}color-#{$colorName}-accordion-border
118
279
  );
119
- >.accordion-summary {
120
- background-color: var(
121
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
122
- );
123
- border-color: var(
124
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
125
- );
126
- &::after {
127
- background: var(
128
- --#{variables.$prefix}color-#{$colorName}-accordion-fore
129
- );
130
- }
131
- &:focus,
132
- &.is-focus,
133
- &.is-focused {
134
- background-color: var(
135
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
136
- );
137
- border-color: var(
138
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
139
- );
140
- }
141
- &:hover,
142
- &.is-hovered,
143
- &.is-hovered {
144
- background-color: var(
145
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
146
- );
147
- border-color: var(
148
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
149
- );
150
- }
151
- &:active,
152
- &.is-active {
153
- background-color: var(
154
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
155
- );
156
- border-color: var(
157
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
158
- );
159
- }
160
- &[disabled],
161
- fieldset[disabled],
162
- &.is-disabled {
163
- background-color: var(
164
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
165
- );
166
- border-color: var(
167
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
168
- );
169
- }
170
- }
171
- >.accordion-details {
172
- border-color: var(
173
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
174
- );
175
- }
280
+ --#{variables.$prefix}accordion-color-selection-fore: var(
281
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
282
+ );
283
+ --#{variables.$prefix}accordion-color-selection-back: var(
284
+ --#{variables.$prefix}color-#{$colorName}-selection-back
285
+ );
286
+
287
+ --#{variables.$prefix}accordion-summary-color-fore: var(
288
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-fore
289
+ );
290
+ --#{variables.$prefix}accordion-summary-color-back: var(
291
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
292
+ );
293
+ --#{variables.$prefix}accordion-summary-color-border: var(
294
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
295
+ );
296
+
297
+ --#{variables.$prefix}accordion-details-color-fore: var(
298
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-fore
299
+ );
300
+ --#{variables.$prefix}accordion-details-color-back: var(
301
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-back
302
+ );
303
+ --#{variables.$prefix}accordion-details-color-border: var(
304
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-border
305
+ );
306
+
307
+ //#region focus
308
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
309
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
310
+ );
311
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
312
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
313
+ );
314
+ //#endregion focus
315
+
316
+ //#region hover
317
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
318
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
319
+ );
320
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
321
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
322
+ );
323
+ //#endregion hover
324
+
325
+ //#region active
326
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
327
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
328
+ );
329
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
330
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
331
+ );
332
+ //#endregion active
333
+
334
+ //#region disabled
335
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
336
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
337
+ );
338
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
339
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
340
+ );
341
+ //#endregion disabled
176
342
  }
177
343
  }
178
344
  }