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/badge.scss CHANGED
@@ -5,60 +5,75 @@
5
5
  :where(.badge) {
6
6
  //#region local css variables
7
7
  --#{variables.$prefix}badge-color-fore: var(
8
- --#{variables.$prefix}color-default-badge-fore
8
+ --#{variables.$prefix}color-default-badge-fore,
9
+ var(--#{variables.$prefix}color-default-fore)
9
10
  );
10
11
  --#{variables.$prefix}badge-color-back: var(
11
- --#{variables.$prefix}color-default-badge-back
12
+ --#{variables.$prefix}color-default-badge-back,
13
+ var(--#{variables.$prefix}color-default-back)
12
14
  );
13
15
  --#{variables.$prefix}badge-color-border: var(
14
- --#{variables.$prefix}color-default-badge-border
16
+ --#{variables.$prefix}color-default-badge-border,
17
+ var(--#{variables.$prefix}color-default-border)
15
18
  );
16
19
 
17
20
  //#region focus
18
21
  --#{variables.$prefix}badge-color-focus-fore: var(
19
- --#{variables.$prefix}color-default-badge-focus-fore
22
+ --#{variables.$prefix}color-default-badge-focus-fore,
23
+ var(--#{variables.$prefix}color-default-focus-fore)
20
24
  );
21
25
  --#{variables.$prefix}badge-color-focus-back: var(
22
- --#{variables.$prefix}color-default-badge-focus-back
26
+ --#{variables.$prefix}color-default-badge-focus-back,
27
+ var(--#{variables.$prefix}color-default-focus-back)
23
28
  );
24
29
  --#{variables.$prefix}badge-color-focus-border: var(
25
- --#{variables.$prefix}color-default-badge-focus-border
30
+ --#{variables.$prefix}color-default-badge-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}badge-color-hover-fore: var(
31
- --#{variables.$prefix}color-default-badge-hover-fore
37
+ --#{variables.$prefix}color-default-badge-hover-fore,
38
+ var(--#{variables.$prefix}color-default-hover-fore)
32
39
  );
33
40
  --#{variables.$prefix}badge-color-hover-back: var(
34
- --#{variables.$prefix}color-default-badge-hover-back
41
+ --#{variables.$prefix}color-default-badge-hover-back,
42
+ var(--#{variables.$prefix}color-default-hover-back)
35
43
  );
36
44
  --#{variables.$prefix}badge-color-hover-border: var(
37
- --#{variables.$prefix}color-default-badge-hover-border
45
+ --#{variables.$prefix}color-default-badge-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}badge-color-active-fore: var(
43
- --#{variables.$prefix}color-default-badge-active-fore
52
+ --#{variables.$prefix}color-default-badge-active-fore,
53
+ var(--#{variables.$prefix}color-default-active-fore)
44
54
  );
45
55
  --#{variables.$prefix}badge-color-active-back: var(
46
- --#{variables.$prefix}color-default-badge-active-back
56
+ --#{variables.$prefix}color-default-badge-active-back,
57
+ var(--#{variables.$prefix}color-default-active-back)
47
58
  );
48
59
  --#{variables.$prefix}badge-color-active-border: var(
49
- --#{variables.$prefix}color-default-badge-active-border
60
+ --#{variables.$prefix}color-default-badge-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}badge-color-disabled-fore: var(
55
- --#{variables.$prefix}color-default-badge-disabled-fore
67
+ --#{variables.$prefix}color-default-badge-disabled-fore,
68
+ var(--#{variables.$prefix}color-default-disabled-fore)
56
69
  );
57
70
  --#{variables.$prefix}badge-color-disabled-back: var(
58
- --#{variables.$prefix}color-default-badge-disabled-back
71
+ --#{variables.$prefix}color-default-badge-disabled-back,
72
+ var(--#{variables.$prefix}color-default-disabled-back)
59
73
  );
60
74
  --#{variables.$prefix}badge-color-disabled-border: var(
61
- --#{variables.$prefix}color-default-badge-disabled-border
75
+ --#{variables.$prefix}color-default-badge-disabled-border,
76
+ var(--#{variables.$prefix}color-default-disabled-border)
62
77
  );
63
78
  //#endregion disabled
64
79
 
@@ -91,171 +106,110 @@
91
106
  &:focus,
92
107
  &.is-focus,
93
108
  &.is-focused {
94
- background-color: var(
95
- --#{variables.$prefix}badge-color-focus-back
96
- );
109
+ background-color: var(--#{variables.$prefix}badge-color-focus-back);
97
110
  border-color: var(--#{variables.$prefix}badge-color-focus-border);
98
111
  color: var(--#{variables.$prefix}badge-color-focus-fore);
99
112
  }
100
113
  &:hover,
101
- &.is-hovered,
114
+ &.is-hover,
102
115
  &.is-hovered {
103
- background-color: var(
104
- --#{variables.$prefix}badge-color-hover-back
105
- );
116
+ background-color: var(--#{variables.$prefix}badge-color-hover-back);
106
117
  border-color: var(--#{variables.$prefix}badge-color-hover-border);
107
118
  color: var(--#{variables.$prefix}badge-color-hover-fore);
108
119
  }
109
120
  &:active,
110
121
  &.is-active {
111
- background-color: var(
112
- --#{variables.$prefix}badge-color-active-back
113
- );
114
- border-color: var(
115
- --#{variables.$prefix}badge-color-active-border
116
- );
122
+ background-color: var(--#{variables.$prefix}badge-color-active-back);
123
+ border-color: var(--#{variables.$prefix}badge-color-active-border);
117
124
  color: var(--#{variables.$prefix}badge-color-active-fore);
118
125
  }
119
126
  &[disabled],
120
127
  fieldset[disabled],
121
128
  &.is-disabled {
122
- background-color: var(
123
- --#{variables.$prefix}badge-color-disabled-back
124
- );
125
- border-color: var(
126
- --#{variables.$prefix}badge-color-disabled-border
127
- );
129
+ background-color: var(--#{variables.$prefix}badge-color-disabled-back);
130
+ border-color: var(--#{variables.$prefix}badge-color-disabled-border);
128
131
  color: var(--#{variables.$prefix}badge-color-disabled-fore);
129
132
  }
130
133
  }
131
134
 
132
135
  @if (not variables.$is-skelton) {
133
- @each $color in variables.$colors {
136
+ @each $color in variables.$allColors {
134
137
  $colorName: map.get($color, "name");
135
138
  &.is-#{$colorName} {
136
139
  //#region local css variables
137
140
  --#{variables.$prefix}badge-color-fore: var(
138
- --#{variables.$prefix}color-#{$colorName}-badge-fore
141
+ --#{variables.$prefix}color-#{$colorName}-badge-fore,
142
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
139
143
  );
140
144
  --#{variables.$prefix}badge-color-back: var(
141
- --#{variables.$prefix}color-#{$colorName}-badge-back
145
+ --#{variables.$prefix}color-#{$colorName}-badge-back,
146
+ var(--#{variables.$prefix}color-#{$colorName}-back)
142
147
  );
143
148
  --#{variables.$prefix}badge-color-border: var(
144
- --#{variables.$prefix}color-#{$colorName}-badge-border
149
+ --#{variables.$prefix}color-#{$colorName}-badge-border,
150
+ var(--#{variables.$prefix}color-#{$colorName}-border)
145
151
  );
146
152
 
147
153
  //#region focus
148
154
  --#{variables.$prefix}badge-color-focus-fore: var(
149
- --#{variables.$prefix}color-#{$colorName}-badge-focus-fore
155
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-fore,
156
+ var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
150
157
  );
151
158
  --#{variables.$prefix}badge-color-focus-back: var(
152
- --#{variables.$prefix}color-#{$colorName}-badge-focus-back
159
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-back,
160
+ var(--#{variables.$prefix}color-#{$colorName}-focus-back)
153
161
  );
154
162
  --#{variables.$prefix}badge-color-focus-border: var(
155
- --#{variables.$prefix}color-#{$colorName}-badge-focus-border
163
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-border,
164
+ var(--#{variables.$prefix}color-#{$colorName}-focus-border)
156
165
  );
157
166
  //#endregion focus
158
167
 
159
168
  //#region hover
160
169
  --#{variables.$prefix}badge-color-hover-fore: var(
161
- --#{variables.$prefix}color-#{$colorName}-badge-hover-fore
170
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-fore,
171
+ var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
162
172
  );
163
173
  --#{variables.$prefix}badge-color-hover-back: var(
164
- --#{variables.$prefix}color-#{$colorName}-badge-hover-back
174
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-back,
175
+ var(--#{variables.$prefix}color-#{$colorName}-hover-back)
165
176
  );
166
177
  --#{variables.$prefix}badge-color-hover-border: var(
167
- --#{variables.$prefix}color-#{$colorName}-badge-hover-border
178
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-border,
179
+ var(--#{variables.$prefix}color-#{$colorName}-hover-border)
168
180
  );
169
181
  //#endregion hover
170
182
 
171
183
  //#region active
172
184
  --#{variables.$prefix}badge-color-active-fore: var(
173
- --#{variables.$prefix}color-#{$colorName}-badge-active-fore
185
+ --#{variables.$prefix}color-#{$colorName}-badge-active-fore,
186
+ var(--#{variables.$prefix}color-#{$colorName}-active-fore)
174
187
  );
175
188
  --#{variables.$prefix}badge-color-active-back: var(
176
- --#{variables.$prefix}color-#{$colorName}-badge-active-back
189
+ --#{variables.$prefix}color-#{$colorName}-badge-active-back,
190
+ var(--#{variables.$prefix}color-#{$colorName}-active-back)
177
191
  );
178
192
  --#{variables.$prefix}badge-color-active-border: var(
179
- --#{variables.$prefix}color-#{$colorName}-badge-active-border
193
+ --#{variables.$prefix}color-#{$colorName}-badge-active-border,
194
+ var(--#{variables.$prefix}color-#{$colorName}-active-border)
180
195
  );
181
196
  //#endregion active
182
197
 
183
198
  //#region disabled
184
199
  --#{variables.$prefix}badge-color-disabled-fore: var(
185
- --#{variables.$prefix}color-#{$colorName}-badge-disabled-fore
200
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-fore,
201
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
186
202
  );
187
203
  --#{variables.$prefix}badge-color-disabled-back: var(
188
- --#{variables.$prefix}color-#{$colorName}-badge-disabled-back
204
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-back,
205
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-back)
189
206
  );
190
207
  --#{variables.$prefix}badge-color-disabled-border: var(
191
- --#{variables.$prefix}color-#{$colorName}-badge-disabled-border
192
- );
193
- //#endregion disabled
194
- }
195
- }
196
- @each $semanticColor in variables.$semanticColors {
197
- $colorName: map.get($semanticColor, "name");
198
- &.is-#{$colorName} {
199
- //#region local css variables
200
- --#{variables.$prefix}badge-color-fore: var(
201
- --#{variables.$prefix}color-#{$colorName}-badge-fore
202
- );
203
- --#{variables.$prefix}badge-color-back: var(
204
- --#{variables.$prefix}color-#{$colorName}-badge-back
205
- );
206
- --#{variables.$prefix}badge-color-border: var(
207
- --#{variables.$prefix}color-#{$colorName}-badge-border
208
- );
209
-
210
- //#region focus
211
- --#{variables.$prefix}badge-color-focus-fore: var(
212
- --#{variables.$prefix}color-#{$colorName}-badge-focus-fore
213
- );
214
- --#{variables.$prefix}badge-color-focus-back: var(
215
- --#{variables.$prefix}color-#{$colorName}-badge-focus-back
216
- );
217
- --#{variables.$prefix}badge-color-focus-border: var(
218
- --#{variables.$prefix}color-#{$colorName}-badge-focus-border
219
- );
220
- //#endregion focus
221
-
222
- //#region hover
223
- --#{variables.$prefix}badge-color-hover-fore: var(
224
- --#{variables.$prefix}color-#{$colorName}-badge-hover-fore
225
- );
226
- --#{variables.$prefix}badge-color-hover-back: var(
227
- --#{variables.$prefix}color-#{$colorName}-badge-hover-back
228
- );
229
- --#{variables.$prefix}badge-color-hover-border: var(
230
- --#{variables.$prefix}color-#{$colorName}-badge-hover-border
231
- );
232
- //#endregion hover
233
-
234
- //#region active
235
- --#{variables.$prefix}badge-color-active-fore: var(
236
- --#{variables.$prefix}color-#{$colorName}-badge-active-fore
237
- );
238
- --#{variables.$prefix}badge-color-active-back: var(
239
- --#{variables.$prefix}color-#{$colorName}-badge-active-back
240
- );
241
- --#{variables.$prefix}badge-color-active-border: var(
242
- --#{variables.$prefix}color-#{$colorName}-badge-active-border
243
- );
244
- //#endregion active
245
-
246
- //#region disabled
247
- --#{variables.$prefix}badge-color-disabled-fore: var(
248
- --#{variables.$prefix}color-#{$colorName}-badge-disabled-fore
249
- );
250
- --#{variables.$prefix}badge-color-disabled-back: var(
251
- --#{variables.$prefix}color-#{$colorName}-badge-disabled-back
252
- );
253
- --#{variables.$prefix}badge-color-disabled-border: var(
254
- --#{variables.$prefix}color-#{$colorName}-badge-disabled-border
208
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-border,
209
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-border)
255
210
  );
256
211
  //#endregion disabled
257
212
  }
258
213
  }
259
214
  }
260
-
261
215
  }
package/src/components/blockquote.scss CHANGED
@@ -38,7 +38,6 @@
38
38
  border-left-color: var(--#{variables.$prefix}blockquote-color-border);
39
39
  border-left-style: solid;
40
40
  border-left-width: var(--#{variables.$prefix}blockquote-border-left-width);
41
- margin: 0;
42
41
  margin-block: unset;
43
42
  margin-inline: unset;
44
43
  padding: 0.5rem;
@@ -65,6 +64,7 @@
65
64
  max-width: 100%;
66
65
  color: var(--#{variables.$prefix}blockquote-color-fore);
67
66
  font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
67
+ line-height: 1;
68
68
  }
69
69
  }
70
70
  &.has-quote,
@@ -83,11 +83,12 @@
83
83
  max-width: 100%;
84
84
  color: var(--#{variables.$prefix}blockquote-color-fore);
85
85
  font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
86
+ line-height: 1;
86
87
  }
87
88
  }
88
89
 
89
90
  @if (not variables.$is-skelton) {
90
- @each $color in variables.$colors {
91
+ @each $color in variables.$allColors {
91
92
  $colorName: map.get($color, "name");
92
93
  &.is-#{$colorName} {
93
94
 
@@ -112,30 +113,5 @@
112
113
  //#endregion local css variables
113
114
  }
114
115
  }
115
- @each $semanticColor in variables.$semanticColors {
116
- $colorName: map.get($semanticColor, "name");
117
- &.is-#{$colorName} {
118
-
119
- //#region local css variables
120
- --#{variables.$prefix}blockquote-color-fore: var(
121
- --#{variables.$prefix}color-#{$colorName}-blockquote-fore
122
- );
123
- --#{variables.$prefix}blockquote-color-back: var(
124
- --#{variables.$prefix}color-#{$colorName}-blockquote-back
125
- );
126
- --#{variables.$prefix}blockquote-color-border: var(
127
- --#{variables.$prefix}color-#{$colorName}-blockquote-border
128
- );
129
- --#{variables.$prefix}blockquote-color-selection-fore: var(
130
- --#{variables.$prefix}color-#{$colorName}-blockquote-selection-fore,
131
- var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
132
- );
133
- --#{variables.$prefix}blockquote-color-selection-back: var(
134
- --#{variables.$prefix}color-#{$colorName}-blockquote-selection-back,
135
- var(--#{variables.$prefix}color-#{$colorName}-selection-back)
136
- );
137
- //#endregion local css variables
138
- }
139
- }
140
116
  }
141
117
  }
package/src/components/breadcrumbs.scss CHANGED
@@ -48,7 +48,7 @@
48
48
  }
49
49
 
50
50
  @if (not variables.$is-skelton) {
51
- @each $color in variables.$colors {
51
+ @each $color in variables.$allColors {
52
52
  $colorName: map.get($color, "name");
53
53
  &.is-#{$colorName} {
54
54
  //#region local css variables
@@ -69,27 +69,6 @@
69
69
  //#endregion local css variables
70
70
  }
71
71
  }
72
- @each $semanticColor in variables.$semanticColors {
73
- $colorName: map.get($semanticColor, "name");
74
- &.is-#{$colorName} {
75
- //#region local css variables
76
- --#{variables.$prefix}breadcrumb-color-fore: var(
77
- --#{variables.$prefix}color-#{$colorName}-breadcrumb-fore
78
- );
79
- --#{variables.$prefix}breadcrumb-divider-color-fore: var(
80
- --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
81
- );
82
- --#{variables.$prefix}breadcrumb-color-selection-fore: var(
83
- --#{variables.$prefix}color-#{$colorName}-breadcrumb-selection-fore,
84
- var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
85
- );
86
- --#{variables.$prefix}breadcrumb-color-selection-back: var(
87
- --#{variables.$prefix}color-#{$colorName}-breadcrumb-selection-back,
88
- var(--#{variables.$prefix}color-#{$colorName}-selection-back)
89
- );
90
- //#endregion local css variables
91
- }
92
- }
93
72
  }
94
73
  }
95
74