noctemyth 0.2.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 (80) hide show
  1. package/dist/css/noctemyth-skelton.css +3171 -8838
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3171 -8838
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +55988 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +55988 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +26697 -38194
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5866 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/animations/fade.scss +2 -2
  15. package/src/backgrounds/dot.scss +28 -20
  16. package/src/backgrounds/gingham.scss +22 -21
  17. package/src/backgrounds/rhombus.scss +45 -22
  18. package/src/backgrounds/stripe.scss +19 -14
  19. package/src/backgrounds/zigzag.scss +34 -25
  20. package/src/base/accessibility.scss +68 -0
  21. package/src/base/dub.scss +34 -4
  22. package/src/base/element.scss +1 -1
  23. package/src/base/index.scss +2 -0
  24. package/src/base/normalize.scss +0 -8
  25. package/src/base/root.scss +25 -0
  26. package/src/components/accordion.scss +183 -90
  27. package/src/components/aside.scss +7 -0
  28. package/src/components/badge.scss +170 -64
  29. package/src/components/blockquote.scss +52 -27
  30. package/src/components/breadcrumbs.scss +46 -16
  31. package/src/components/button.scss +177 -88
  32. package/src/components/card.scss +147 -48
  33. package/src/components/description-list.scss +46 -0
  34. package/src/components/dialogue.scss +194 -143
  35. package/src/components/div.scss +1 -1
  36. package/src/components/figure.scss +173 -0
  37. package/src/components/footer.scss +20 -6
  38. package/src/components/hamburger.scss +77 -51
  39. package/src/components/header.scss +42 -6
  40. package/src/components/heading.scss +6 -7
  41. package/src/components/image.scss +1 -1
  42. package/src/components/index.scss +3 -0
  43. package/src/components/input.scss +110 -69
  44. package/src/components/label.scss +34 -4
  45. package/src/components/link.scss +56 -12
  46. package/src/components/list.scss +39 -9
  47. package/src/components/loader.scss +10 -8
  48. package/src/components/main.scss +1 -1
  49. package/src/components/message.scss +100 -24
  50. package/src/components/modal.scss +18 -8
  51. package/src/components/nav.scss +600 -280
  52. package/src/components/paragraph.scss +1 -2
  53. package/src/components/progress.scss +42 -16
  54. package/src/components/section.scss +1 -1
  55. package/src/components/span.scss +1 -1
  56. package/src/css-variables/animation.scss +1 -1
  57. package/src/css-variables/border.scss +1 -1
  58. package/src/css-variables/color.scss +757 -468
  59. package/src/css-variables/components/dialogue.scss +2 -2
  60. package/src/css-variables/components/header.scss +1 -0
  61. package/src/css-variables/index.scss +1 -0
  62. package/src/css-variables/layout.scss +11 -0
  63. package/src/css-variables/miscellaneous.scss +4 -4
  64. package/src/css-variables/typography.scss +1 -1
  65. package/src/functions/color.scss +13 -0
  66. package/src/functions/index.scss +1 -0
  67. package/src/functions/string.scss +12 -0
  68. package/src/layouts/centering.scss +1 -1
  69. package/src/layouts/columns.scss +57 -51
  70. package/src/layouts/container.scss +33 -31
  71. package/src/mixins/color.scss +0 -32
  72. package/src/mixins/element.scss +2 -2
  73. package/src/mixins/responsive.scss +12 -11
  74. package/src/utilities/border.scss +4 -0
  75. package/src/utilities/color.scss +112 -6
  76. package/src/variables/color.scss +1169 -1084
  77. package/src/variables/components/dialogue.scss +2 -2
  78. package/src/variables/components/header.scss +1 -0
  79. package/src/variables/layout.scss +13 -11
  80. package/src/variables/miscellaneous.scss +1 -3
package/src/utilities/color.scss CHANGED
@@ -94,26 +94,41 @@
94
94
  }
95
95
  //#region forecolor
96
96
  .forecolor#{$derived}-#{$colorName}-#{$numStr} {
97
+ @if ($colorScheme != null) {
98
+ color-scheme: string.unquote($colorScheme);
99
+ }
97
100
  @include forecolor($colorName, $numStr);
98
101
  }
99
102
  .forecolor#{$derived}-hover-#{$colorName}-#{$numStr} {
100
103
  &:hover {
104
+ @if ($colorScheme != null) {
105
+ color-scheme: string.unquote($colorScheme);
106
+ }
101
107
  @include forecolor($colorName, $numStr);
102
108
  }
103
109
  }
104
110
  .forecolor#{$derived}-#{$colorName}-focus-#{$numStr} {
105
111
  &:focus {
112
+ @if ($colorScheme != null) {
113
+ color-scheme: string.unquote($colorScheme);
114
+ }
106
115
  @include forecolor($colorName, $numStr);
107
116
  }
108
117
  }
109
118
  .forecolor#{$derived}-#{$colorName}-active-#{$numStr} {
110
119
  &:active {
120
+ @if ($colorScheme != null) {
121
+ color-scheme: string.unquote($colorScheme);
122
+ }
111
123
  @include forecolor($colorName, $numStr);
112
124
  }
113
125
  }
114
126
  .forecolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
115
127
  &[disabled],
116
128
  fieldset[disabled] {
129
+ @if ($colorScheme != null) {
130
+ color-scheme: string.unquote($colorScheme);
131
+ }
117
132
  @include forecolor($colorName, $numStr);
118
133
  }
119
134
  }
@@ -121,26 +136,41 @@
121
136
 
122
137
  //#region backcolor
123
138
  .backcolor#{$derived}-#{$colorName}-#{$numStr} {
139
+ @if ($colorScheme != null) {
140
+ color-scheme: string.unquote($colorScheme);
141
+ }
124
142
  @include backcolor($colorName, $numStr);
125
143
  }
126
144
  .backcolor#{$derived}-hover-#{$colorName}-#{$numStr} {
127
145
  &:hover {
146
+ @if ($colorScheme != null) {
147
+ color-scheme: string.unquote($colorScheme);
148
+ }
128
149
  @include backcolor($colorName, $numStr);
129
150
  }
130
151
  }
131
152
  .backcolor#{$derived}-#{$colorName}-focus-#{$numStr} {
132
153
  &:focus {
154
+ @if ($colorScheme != null) {
155
+ color-scheme: string.unquote($colorScheme);
156
+ }
133
157
  @include backcolor($colorName, $numStr);
134
158
  }
135
159
  }
136
160
  .backcolor#{$derived}-#{$colorName}-active-#{$numStr} {
137
161
  &:active {
162
+ @if ($colorScheme != null) {
163
+ color-scheme: string.unquote($colorScheme);
164
+ }
138
165
  @include backcolor($colorName, $numStr);
139
166
  }
140
167
  }
141
168
  .backcolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
142
169
  &[disabled],
143
170
  fieldset[disabled] {
171
+ @if ($colorScheme != null) {
172
+ color-scheme: string.unquote($colorScheme);
173
+ }
144
174
  @include backcolor($colorName, $numStr);
145
175
  }
146
176
  }
@@ -148,55 +178,88 @@
148
178
 
149
179
  //#region bordercolor
150
180
  .bordercolor#{$derived}-#{$colorName}-#{$numStr} {
181
+ @if ($colorScheme != null) {
182
+ color-scheme: string.unquote($colorScheme);
183
+ }
151
184
  @include bordercolor($colorName, $numStr);
152
185
  }
153
186
  .bordercolor#{$derived}-#{$colorName}-#{$numStr} {
187
+ @if ($colorScheme != null) {
188
+ color-scheme: string.unquote($colorScheme);
189
+ }
154
190
  @include bordercolor($colorName, $numStr);
155
191
  }
156
192
  .bordercolor#{$derived}-hover-#{$colorName}-#{$numStr} {
157
193
  &:hover {
194
+ @if ($colorScheme != null) {
195
+ color-scheme: string.unquote($colorScheme);
196
+ }
158
197
  @include bordercolor($colorName, $numStr);
159
198
  }
160
199
  }
161
200
  .bordercolor#{$derived}-#{$colorName}-focus-#{$numStr} {
162
201
  &:focus {
202
+ @if ($colorScheme != null) {
203
+ color-scheme: string.unquote($colorScheme);
204
+ }
163
205
  @include bordercolor($colorName, $numStr);
164
206
  }
165
207
  }
166
208
  .bordercolor#{$derived}-#{$colorName}-active-#{$numStr} {
167
209
  &:active {
210
+ @if ($colorScheme != null) {
211
+ color-scheme: string.unquote($colorScheme);
212
+ }
168
213
  @include bordercolor($colorName, $numStr);
169
214
  }
170
215
  }
171
216
  .bordercolor#{$derived}-#{$colorName}-disabled-#{$numStr} {
172
217
  &[disabled],
173
218
  fieldset[disabled] {
219
+ @if ($colorScheme != null) {
220
+ color-scheme: string.unquote($colorScheme);
221
+ }
174
222
  @include bordercolor($colorName, $numStr);
175
223
  }
176
224
  }
177
225
 
178
226
  @each $borderSide in variables.$borderSides {
179
227
  .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-#{$numStr} {
228
+ @if ($colorScheme != null) {
229
+ color-scheme: string.unquote($colorScheme);
230
+ }
180
231
  @include bordercolor($colorName, $numStr, $borderSide);
181
232
  }
182
233
  .bordercolor#{$derived}-#{$borderSide}-hover-#{$colorName}-#{$numStr} {
183
234
  &:hover {
235
+ @if ($colorScheme != null) {
236
+ color-scheme: string.unquote($colorScheme);
237
+ }
184
238
  @include bordercolor($colorName, $numStr, $borderSide);
185
239
  }
186
240
  }
187
241
  .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-focus-#{$numStr} {
188
242
  &:focus {
243
+ @if ($colorScheme != null) {
244
+ color-scheme: string.unquote($colorScheme);
245
+ }
189
246
  @include bordercolor($colorName, $numStr, $borderSide);
190
247
  }
191
248
  }
192
249
  .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-active-#{$numStr} {
193
250
  &:active {
251
+ @if ($colorScheme != null) {
252
+ color-scheme: string.unquote($colorScheme);
253
+ }
194
254
  @include bordercolor($colorName, $numStr, $borderSide);
195
255
  }
196
256
  }
197
257
  .bordercolor#{$derived}-#{$borderSide}-#{$colorName}-disabled-#{$numStr} {
198
258
  &[disabled],
199
259
  fieldset[disabled] {
260
+ @if ($colorScheme != null) {
261
+ color-scheme: string.unquote($colorScheme);
262
+ }
200
263
  @include bordercolor($colorName, $numStr, $borderSide);
201
264
  }
202
265
  }
@@ -205,26 +268,41 @@
205
268
 
206
269
  //#region highlighter
207
270
  .highlighter#{$derived}-#{$colorName}-#{$numStr} {
271
+ @if ($colorScheme != null) {
272
+ color-scheme: string.unquote($colorScheme);
273
+ }
208
274
  @include highlighter($colorName, $numStr);
209
275
  }
210
276
  .highlighter#{$derived}-hover-#{$colorName}-#{$numStr} {
211
277
  &:hover {
278
+ @if ($colorScheme != null) {
279
+ color-scheme: string.unquote($colorScheme);
280
+ }
212
281
  @include highlighter($colorName, $numStr);
213
282
  }
214
283
  }
215
284
  .highlighter#{$derived}-#{$colorName}-focus-#{$numStr} {
216
285
  &:focus {
286
+ @if ($colorScheme != null) {
287
+ color-scheme: string.unquote($colorScheme);
288
+ }
217
289
  @include highlighter($colorName, $numStr);
218
290
  }
219
291
  }
220
292
  .highlighter#{$derived}-#{$colorName}-active-#{$numStr} {
221
293
  &:active {
294
+ @if ($colorScheme != null) {
295
+ color-scheme: string.unquote($colorScheme);
296
+ }
222
297
  @include highlighter($colorName, $numStr);
223
298
  }
224
299
  }
225
300
  .highlighter#{$derived}-#{$colorName}-disabled-#{$numStr} {
226
301
  &[disabled],
227
302
  fieldset[disabled] {
303
+ @if ($colorScheme != null) {
304
+ color-scheme: string.unquote($colorScheme);
305
+ }
228
306
  @include highlighter($colorName, $numStr);
229
307
  }
230
308
  }
@@ -242,26 +320,43 @@
242
320
  }
243
321
  //#region forecolor
244
322
  .forecolor#{$derived}-rainbow-#{$numStr} {
323
+ @if ($colorScheme != null) {
324
+ @if ($colorScheme != null) {
325
+ color-scheme: string.unquote($colorScheme);
326
+ }
327
+ }
245
328
  @include forecolor("rainbow", $numStr);
246
329
  }
247
330
  .forecolor#{$derived}-hover-rainbow-#{$numStr} {
248
331
  &:hover {
332
+ @if ($colorScheme != null) {
333
+ color-scheme: string.unquote($colorScheme);
334
+ }
249
335
  @include forecolor("rainbow", $numStr);
250
336
  }
251
337
  }
252
338
  .forecolor#{$derived}-rainbow-focus-#{$numStr} {
253
339
  &:focus {
340
+ @if ($colorScheme != null) {
341
+ color-scheme: string.unquote($colorScheme);
342
+ }
254
343
  @include forecolor("rainbow", $numStr);
255
344
  }
256
345
  }
257
346
  .forecolor#{$derived}-rainbow-active-#{$numStr} {
258
347
  &:active {
348
+ @if ($colorScheme != null) {
349
+ color-scheme: string.unquote($colorScheme);
350
+ }
259
351
  @include forecolor("rainbow", $numStr);
260
352
  }
261
353
  }
262
354
  .forecolor#{$derived}-rainbow-disabled-#{$numStr} {
263
355
  &[disabled],
264
356
  fieldset[disabled] {
357
+ @if ($colorScheme != null) {
358
+ color-scheme: string.unquote($colorScheme);
359
+ }
265
360
  @include forecolor("rainbow", $numStr);
266
361
  }
267
362
  }
@@ -269,26 +364,41 @@
269
364
 
270
365
  //#region backcolor
271
366
  .backcolor#{$derived}-rainbow-#{$numStr} {
367
+ @if ($colorScheme != null) {
368
+ color-scheme: string.unquote($colorScheme);
369
+ }
272
370
  @include backcolor("rainbow", $numStr);
273
371
  }
274
372
  .backcolor#{$derived}-hover-rainbow-#{$numStr} {
275
373
  &:hover {
374
+ @if ($colorScheme != null) {
375
+ color-scheme: string.unquote($colorScheme);
376
+ }
276
377
  @include backcolor("rainbow", $numStr);
277
378
  }
278
379
  }
279
380
  .backcolor#{$derived}-rainbow-focus-#{$numStr} {
280
381
  &:focus {
382
+ @if ($colorScheme != null) {
383
+ color-scheme: string.unquote($colorScheme);
384
+ }
281
385
  @include backcolor("rainbow", $numStr);
282
386
  }
283
387
  }
284
388
  .backcolor#{$derived}-rainbow-active-#{$numStr} {
285
389
  &:active {
390
+ @if ($colorScheme != null) {
391
+ color-scheme: string.unquote($colorScheme);
392
+ }
286
393
  @include backcolor("rainbow", $numStr);
287
394
  }
288
395
  }
289
396
  .backcolor#{$derived}-rainbow-disabled-#{$numStr} {
290
397
  &[disabled],
291
398
  fieldset[disabled] {
399
+ @if ($colorScheme != null) {
400
+ color-scheme: string.unquote($colorScheme);
401
+ }
292
402
  @include backcolor("rainbow", $numStr);
293
403
  }
294
404
  }
@@ -302,9 +412,5 @@
302
412
  }
303
413
 
304
414
  @include colorUtilities();
305
- @include mixins.setColorScheme("light") {
306
- @include colorUtilities("light");
307
- }
308
- @include mixins.setColorScheme("dark") {
309
- @include colorUtilities("dark");
310
- }
415
+ @include colorUtilities("light");
416
+ @include colorUtilities("dark");