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
@@ -1,17 +1,14 @@
1
1
  @use "sass:color";
2
+ @use "sass:list";
2
3
  @use "../functions/index.scss" as functions;
3
4
 
4
5
  //#region define color settings
5
-
6
- $color-lightness-white: 95% !default;
7
- $color-lightness-black: 14% !default;
8
-
9
- $color-lightness-50: 53% !default;
10
- $color-lightness-offset-lighter: 5% !default;
11
- $color-lightness-offset-darker: -5% !default;
6
+ $color-lightness-05: 8%;
7
+ $color-lightness-95: 98%;
12
8
 
13
9
  $color-chroma-gray: 0.04 !default;
14
- $color-chroma-colorful: 0.09 !default;
10
+
11
+ $color-chroma-colorful-50: 0.09 !default;
15
12
  $color-chroma-colorful-offset-lighter: 0 !default;
16
13
  $color-chroma-colorful-offset-darker: 0 !default;
17
14
 
@@ -29,82 +26,127 @@ $color-hue-magenta: 327 !default;
29
26
 
30
27
  //#endregion define color settings
31
28
 
32
- //#region define color shades array
33
-
34
- //#region color-light-lightness
35
-
36
29
  $color-light-lightness-fore: 5 !default;
37
30
  $color-light-lightness-back: 95 !default;
38
31
  $color-light-lightness-border: 70 !default;
39
32
  $color-light-lightness-placeholder: 70 !default;
40
33
  $color-light-lightness-shadow: 70 !default;
34
+ $color-light-lightness-scrollbar-thumb: 30 !default;
35
+ $color-light-lightness-scrollbar-track: 70 !default;
41
36
 
42
- $color-light-lightness-selection-fore: 5 !default;
43
- $color-light-lightness-selection-back: 70 !default;
37
+ $color-dark-lightness-fore: 95 !default;
38
+ $color-dark-lightness-back: 5 !default;
39
+ $color-dark-lightness-border: 30 !default;
40
+ $color-dark-lightness-placeholder: 50 !default;
41
+ $color-dark-lightness-shadow: 50 !default;
42
+ $color-dark-lightness-scrollbar-thumb: 70 !default;
43
+ $color-dark-lightness-scrollbar-track: 30 !default;
44
44
 
45
- //#region color-light-lightness-dot
45
+ //#region color-lightness-dot
46
46
  $color-light-lightness-dot-fore: 85 !default;
47
47
  $color-light-lightness-dot-back: 95 !default;
48
- //#endregion color-light-lightness-dot
49
48
 
50
- //#region color-light-lightness-gingham
49
+ $color-dark-lightness-dot-fore: 15 !default;
50
+ $color-dark-lightness-dot-back: 5 !default;
51
+ //#endregion color-lightness-dot
52
+
53
+ //#region color-lightness-gingham
51
54
  $color-light-lightness-gingham-fore: 85 !default;
52
55
  $color-light-lightness-gingham-back: 95 !default;
53
- //#endregion color-light-lightness-gingham
54
56
 
55
- //#region color-light-lightness-rhombus
57
+ $color-dark-lightness-gingham-fore: 15 !default;
58
+ $color-dark-lightness-gingham-back: 5 !default;
59
+ //#endregion color-lightness-gingham
60
+
61
+ //#region color-lightness-rhombus
56
62
  $color-light-lightness-rhombus-fore: 85 !default;
57
63
  $color-light-lightness-rhombus-back: 95 !default;
58
- //#endregion color-light-lightness-rhombus
59
64
 
60
- //#region color-light-lightness-stripe
65
+ $color-dark-lightness-rhombus-fore: 15 !default;
66
+ $color-dark-lightness-rhombus-back: 5 !default;
67
+ //#endregion color-lightness-rhombus
68
+
69
+ //#region color-lightness-stripe
61
70
  $color-light-lightness-stripe-fore: 85 !default;
62
71
  $color-light-lightness-stripe-back: 95 !default;
63
- //#endregion color-light-lightness-stripe
64
72
 
65
- //#region color-light-lightness-zigzag
73
+ $color-dark-lightness-stripe-fore: 15 !default;
74
+ $color-dark-lightness-stripe-back: 5 !default;
75
+ //#endregion color-lightness-stripe
76
+
77
+ //#region color-lightness-zigzag
66
78
  $color-light-lightness-zigzag-fore: 85 !default;
67
79
  $color-light-lightness-zigzag-back: 95 !default;
68
- //#endregion color-light-lightness-zigzag
69
80
 
70
- //#region color-light-lightness-accordion
81
+ $color-dark-lightness-zigzag-fore: 15 !default;
82
+ $color-dark-lightness-zigzag-back: 5 !default;
83
+ //#endregion color-lightness-zigzag
84
+
85
+ //#region color-lightness-accordion
71
86
  $color-light-lightness-accordion-fore: 5 !default;
72
87
  $color-light-lightness-accordion-back: 95 !default;
73
- $color-light-lightness-accordion-border: 70 !default;
88
+ $color-light-lightness-accordion-border: 80 !default;
74
89
  $color-light-lightness-accordion-summary-fore: 5 !default;
75
- $color-light-lightness-accordion-summary-back: 70 !default;
76
- $color-light-lightness-accordion-summary-border: 70 !default;
90
+ $color-light-lightness-accordion-summary-back: 80 !default;
91
+ $color-light-lightness-accordion-summary-border: 80 !default;
77
92
  $color-light-lightness-accordion-details-fore: 5 !default;
78
93
  $color-light-lightness-accordion-details-back: 95 !default;
79
- $color-light-lightness-accordion-details-border: 70 !default;
80
- //#endregion color-light-lightness-accordion
94
+ $color-light-lightness-accordion-details-border: 80 !default;
81
95
 
82
- //#region color-light-lightness-button
96
+ $color-dark-lightness-accordion-fore: 95 !default;
97
+ $color-dark-lightness-accordion-back: 5 !default;
98
+ $color-dark-lightness-accordion-border: 20 !default;
99
+ $color-dark-lightness-accordion-summary-fore: 95 !default;
100
+ $color-dark-lightness-accordion-summary-back: 20 !default;
101
+ $color-dark-lightness-accordion-summary-border: 20 !default;
102
+ $color-dark-lightness-accordion-details-fore: 95 !default;
103
+ $color-dark-lightness-accordion-details-back: 5 !default;
104
+ $color-dark-lightness-accordion-details-border: 20 !default;
105
+ //#endregion color-lightness-accordion
106
+
107
+ //#region color-lightness-button
83
108
  $color-light-lightness-button-fore: 5 !default;
84
109
  $color-light-lightness-button-back: 70 !default;
85
110
  $color-light-lightness-button-border: 70 !default;
86
111
  $color-light-lightness-button-shadow: 70 !default;
87
- //#endregion color-light-lightness-button
88
112
 
89
- //#region color-light-lightness-badge
113
+ $color-dark-lightness-button-fore: 95 !default;
114
+ $color-dark-lightness-button-back: 30 !default;
115
+ $color-dark-lightness-button-border: 30 !default;
116
+ $color-dark-lightness-button-shadow: 30 !default;
117
+ //#endregion color-lightness-button
118
+
119
+ //#region color-lightness-badge
90
120
  $color-light-lightness-badge-fore: 5 !default;
91
- $color-light-lightness-badge-back: 85 !default;
121
+ $color-light-lightness-badge-back: 80 !default;
92
122
  $color-light-lightness-badge-border: 70 !default;
93
- //#endregion color-light-lightness-badge
94
123
 
95
- //#region color-light-lightness-blockquote
96
- $color-light-lightness-blockquote-fore: 50 !default;
97
- $color-light-lightness-blockquote-back: 90 !default;
98
- $color-light-lightness-blockquote-border: 50 !default;
99
- //#endregion color-light-lightness-blockquote
124
+ $color-dark-lightness-badge-fore: 95 !default;
125
+ $color-dark-lightness-badge-back: 20 !default;
126
+ $color-dark-lightness-badge-border: 30 !default;
127
+ //#endregion color-lightness-badge
100
128
 
101
- //#region color-light-lightness-breadcrumbs
102
- $color-light-lightness-breadcrumbs-fore: 30 !default;
103
- $color-light-lightness-breadcrumb-fore: 30 !default;
104
- $color-light-lightness-breadcrumb-divider-fore: 60 !default;
105
- //#endregion color-light-lightness-breadcrumbs
129
+ //#region color-lightness-blockquote
130
+ $color-light-lightness-blockquote-fore: 30 !default;
131
+ $color-light-lightness-blockquote-back: 80 !default;
132
+ $color-light-lightness-blockquote-border: 60 !default;
106
133
 
107
- //#region color-light-lightness-card
134
+ $color-dark-lightness-blockquote-fore: 70 !default;
135
+ $color-dark-lightness-blockquote-back: 20 !default;
136
+ $color-dark-lightness-blockquote-border: 40 !default;
137
+ //#endregion color-lightness-blockquote
138
+
139
+ //#region color-lightness-breadcrumbs
140
+ $color-light-lightness-breadcrumbs-fore: 65 !default;
141
+ $color-light-lightness-breadcrumb-fore: 65 !default;
142
+ $color-light-lightness-breadcrumb-divider-fore: 65 !default;
143
+
144
+ $color-dark-lightness-breadcrumbs-fore: 65 !default;
145
+ $color-dark-lightness-breadcrumb-fore: 65 !default;
146
+ $color-dark-lightness-breadcrumb-divider-fore: 65 !default;
147
+ //#endregion color-lightness-breadcrumbs
148
+
149
+ //#region color-lightness-card
108
150
  $color-light-lightness-card-fore: 5 !default;
109
151
  $color-light-lightness-card-back: 70 !default;
110
152
  $color-light-lightness-card-border: 70 !default;
@@ -115,9 +157,20 @@ $color-light-lightness-card-body-fore: 5 !default;
115
157
  $color-light-lightness-card-body-back: 90 !default;
116
158
  $color-light-lightness-card-footer-fore: 5 !default;
117
159
  $color-light-lightness-card-footer-back: 80 !default;
118
- //#endregion color-light-lightness-card
119
160
 
120
- //#region color-light-lightness-dialogue
161
+ $color-dark-lightness-card-fore: 95 !default;
162
+ $color-dark-lightness-card-back: 5 !default;
163
+ $color-dark-lightness-card-border: 30 !default;
164
+ $color-dark-lightness-card-shadow: 30 !default;
165
+ $color-dark-lightness-card-header-fore: 95 !default;
166
+ $color-dark-lightness-card-header-back: 50 !default;
167
+ $color-dark-lightness-card-body-fore: 95 !default;
168
+ $color-dark-lightness-card-body-back: 10 !default;
169
+ $color-dark-lightness-card-footer-fore: 95 !default;
170
+ $color-dark-lightness-card-footer-back: 20 !default;
171
+ //#endregion color-lightness-card
172
+
173
+ //#region color-lightness-dialogue
121
174
  $color-light-lightness-dialogue-fore: 5 !default;
122
175
  $color-light-lightness-dialogue-back: 95 !default;
123
176
  $color-light-lightness-dialogue-border: 70 !default;
@@ -132,145 +185,7 @@ $color-light-lightness-dialogue-name-shadow: 70 !default;
132
185
  $color-light-lightness-dialogue-message-fore: 5 !default;
133
186
  $color-light-lightness-dialogue-message-back: 95 !default;
134
187
  $color-light-lightness-dialogue-message-border: 70 !default;
135
- //#endregion color-light-lightness-dialogue
136
188
 
137
- //#region color-light-lightness-header
138
- $color-light-lightness-header-fore: 5 !default;
139
- $color-light-lightness-header-back: 70 !default;
140
- $color-light-lightness-header-shadow: 70 !default;
141
- //#endregion color-light-lightness-header
142
-
143
- //#region color-light-lightness-label
144
- $color-light-lightness-label-fore: 60 !default;
145
- //#endregion color-light-lightness-label
146
-
147
- //#region color-light-lightness-input
148
- $color-light-lightness-input-fore: 5 !default;
149
- $color-light-lightness-input-back: 95 !default;
150
- $color-light-lightness-input-border: 60 !default;
151
- $color-light-lightness-input-placeholder: 60 !default;
152
- //#endregion color-light-lightness-input
153
-
154
- //#region color-light-lightness-link
155
- $color-light-lightness-link-fore: 60 !default;
156
- //#endregion color-light-lightness-link
157
-
158
- //#region color-light-lightness-loader
159
- $color-light-lightness-loader-fore: 60 !default;
160
- //#endregion color-light-lightness-loader
161
-
162
- //#region color-light-lightness-message
163
- $color-light-lightness-message-fore: 5 !default;
164
- $color-light-lightness-message-back: 70 !default;
165
- $color-light-lightness-message-border: 70 !default;
166
- $color-light-lightness-message-header-fore: 5 !default;
167
- $color-light-lightness-message-header-back: 70 !default;
168
- $color-light-lightness-message-body-fore: 5 !default;
169
- $color-light-lightness-message-body-back: 90 !default;
170
- //#endregion color-light-lightness-card
171
-
172
- //#region color-light-lightness-nav
173
- $color-light-lightness-nav-fore: 5 !default;
174
- $color-light-lightness-nav-back: 95 !default;
175
- $color-light-lightness-nav-border: 70 !default;
176
- $color-light-lightness-nav-menu-item-fore: 05 !default;
177
- $color-light-lightness-nav-menu-item-shadow: 80 !default;
178
- //#endregion color-light-lightness-nav
179
-
180
- //#region color-light-lightness-progress
181
- $color-light-lightness-progress-fore: 70 !default;
182
- $color-light-lightness-progress-back: 95 !default;
183
- //#endregion color-light-lightness-progress
184
-
185
- //#endregion color-light-lightness
186
-
187
- //#region color-dark-lightness
188
-
189
- $color-dark-lightness-fore: 95 !default;
190
- $color-dark-lightness-back: 5 !default;
191
- $color-dark-lightness-border: 50 !default;
192
- $color-dark-lightness-placeholder: 50 !default;
193
- $color-dark-lightness-shadow: 50 !default;
194
-
195
- $color-dark-lightness-selection-fore: 95 !default;
196
- $color-dark-lightness-selection-back: 30 !default;
197
-
198
- //#region color-dark-lightness-dot
199
- $color-dark-lightness-dot-fore: 5 !default;
200
- $color-dark-lightness-dot-back: 15 !default;
201
- //#endregion color-dark-lightness-dot
202
-
203
- //#region color-dark-lightness-gingham
204
- $color-dark-lightness-gingham-fore: 5 !default;
205
- $color-dark-lightness-gingham-back: 15 !default;
206
- //#endregion color-dark-lightness-gingham
207
-
208
- //#region color-dark-lightness-rhombus
209
- $color-dark-lightness-rhombus-fore: 5 !default;
210
- $color-dark-lightness-rhombus-back: 15 !default;
211
- //#endregion color-dark-lightness-rhombus
212
-
213
- //#region color-dark-lightness-stripe
214
- $color-dark-lightness-stripe-fore: 5 !default;
215
- $color-dark-lightness-stripe-back: 15 !default;
216
- //#endregion color-dark-lightness-stripe
217
-
218
- //#region color-dark-lightness-zigzag
219
- $color-dark-lightness-zigzag-fore: 5 !default;
220
- $color-dark-lightness-zigzag-back: 15 !default;
221
- //#endregion color-dark-lightness-zigzag
222
-
223
- //#region color-dark-lightness-accordion
224
- $color-dark-lightness-accordion-fore: 95 !default;
225
- $color-dark-lightness-accordion-back: 5 !default;
226
- $color-dark-lightness-accordion-border: 30 !default;
227
- $color-dark-lightness-accordion-summary-fore: 95 !default;
228
- $color-dark-lightness-accordion-summary-back: 30 !default;
229
- $color-dark-lightness-accordion-summary-border: 30 !default;
230
- $color-dark-lightness-accordion-details-fore: 95 !default;
231
- $color-dark-lightness-accordion-details-back: 5 !default;
232
- $color-dark-lightness-accordion-details-border: 30 !default;
233
- //#endregion color-dark-lightness-accordion
234
-
235
- //#region color-dark-lightness-badge
236
- $color-dark-lightness-badge-fore: 95 !default;
237
- $color-dark-lightness-badge-back: 15 !default;
238
- $color-dark-lightness-badge-border: 30 !default;
239
- //#endregion color-dark-lightness-badge
240
-
241
- //#region color-dark-lightness-blockquote
242
- $color-dark-lightness-blockquote-fore: 70 !default;
243
- $color-dark-lightness-blockquote-back: 20 !default;
244
- $color-dark-lightness-blockquote-border: 70 !default;
245
- //#endregion color-dark-lightness-blockquote
246
-
247
- //#region color-dark-lightness-blockquote
248
- $color-dark-lightness-breadcrumbs-fore: 70 !default;
249
- $color-dark-lightness-breadcrumb-fore: 70 !default;
250
- $color-dark-lightness-breadcrumb-divider-fore: 40 !default;
251
- //#endregion color-dark-lightness-blockquote
252
-
253
- //#region color-dark-lightness-button
254
- $color-dark-lightness-button-fore: 95 !default;
255
- $color-dark-lightness-button-back: 30 !default;
256
- $color-dark-lightness-button-border: 30 !default;
257
- $color-dark-lightness-button-shadow: 30 !default;
258
- //#endregion color-dark-lightness-button
259
-
260
- //#region color-dark-lightness-card
261
- $color-dark-lightness-card-fore: 95 !default;
262
- $color-dark-lightness-card-back: 5 !default;
263
- $color-dark-lightness-card-border: 30 !default;
264
- $color-dark-lightness-card-shadow: 30 !default;
265
- $color-dark-lightness-card-header-fore: 95 !default;
266
- $color-dark-lightness-card-header-back: 50 !default;
267
- $color-dark-lightness-card-body-fore: 95 !default;
268
- $color-dark-lightness-card-body-back: 10 !default;
269
- $color-dark-lightness-card-footer-fore: 95 !default;
270
- $color-dark-lightness-card-footer-back: 20 !default;
271
- //#endregion color-dark-lightness-card
272
-
273
- //#region color-dark-lightness-dialogue
274
189
  $color-dark-lightness-dialogue-fore: 95 !default;
275
190
  $color-dark-lightness-dialogue-back: 5 !default;
276
191
  $color-dark-lightness-dialogue-border: 50 !default;
@@ -285,38 +200,75 @@ $color-dark-lightness-dialogue-name-shadow: 50 !default;
285
200
  $color-dark-lightness-dialogue-message-fore: 95 !default;
286
201
  $color-dark-lightness-dialogue-message-back: 5 !default;
287
202
  $color-dark-lightness-dialogue-message-border: 50 !default;
288
- //#endregion color-dark-lightness-dialogue
203
+ //#endregion color-lightness-dialogue
204
+
205
+ //#region color-lightness-figure
206
+ $color-light-lightness-figure-fore: 5 !default;
207
+ $color-light-lightness-figure-back: 70 !default;
208
+ $color-light-lightness-figure-border: 70 !default;
209
+ $color-light-lightness-figure-content-fore: 5 !default;
210
+ $color-light-lightness-figure-content-back: 95 !default;
211
+ $color-light-lightness-figure-caption-fore: 20 !default;
212
+ $color-light-lightness-figure-caption-back: 70 !default;
213
+
214
+ $color-dark-lightness-figure-fore: 95 !default;
215
+ $color-dark-lightness-figure-back: 30 !default;
216
+ $color-dark-lightness-figure-border: 30 !default;
217
+ $color-dark-lightness-figure-content-fore: 95 !default;
218
+ $color-dark-lightness-figure-content-back: 5 !default;
219
+ $color-dark-lightness-figure-caption-fore: 80 !default;
220
+ $color-dark-lightness-figure-caption-back: 30 !default;
221
+ //#endregion color-lightness-figure
222
+
223
+ //#region color-lightness-header
224
+ $color-light-lightness-header-fore: 5 !default;
225
+ $color-light-lightness-header-back: 70 !default;
226
+ $color-light-lightness-header-shadow: 70 !default;
289
227
 
290
- //#region color-dark-lightness-header
291
228
  $color-dark-lightness-header-fore: 95 !default;
292
229
  $color-dark-lightness-header-back: 30 !default;
293
230
  $color-dark-lightness-header-shadow: 30 !default;
294
- //#endregion color-dark-lightness-header
231
+ //#endregion color-lightness-header
232
+
233
+ //#region color-lightness-input
234
+ $color-light-lightness-input-fore: 5 !default;
235
+ $color-light-lightness-input-back: 95 !default;
236
+ $color-light-lightness-input-border: 60 !default;
237
+ $color-light-lightness-input-placeholder: 60 !default;
295
238
 
296
- //#region color-dark-lightness-input
297
239
  $color-dark-lightness-input-fore: 95 !default;
298
240
  $color-dark-lightness-input-back: 5 !default;
299
241
  $color-dark-lightness-input-border: 40 !default;
300
242
  $color-dark-lightness-input-placeholder: 40 !default;
301
- //#endregion color-dark-lightness-input
243
+ //#endregion color-lightness-input
302
244
 
303
- //#region color-dark-lightness-label
304
- $color-dark-lightness-label-fore: 70 !default;
305
- //#endregion color-dark-lightness-label
245
+ //#region color-lightness-label
246
+ $color-light-lightness-label-fore: 65 !default;
306
247
 
307
- //#region color-dark-lightness-link
308
- $color-dark-lightness-link-fore: 70 !default;
309
- //#endregion color-dark-lightness-link
248
+ $color-dark-lightness-label-fore: 65 !default;
249
+ //#endregion color-lightness-label
310
250
 
311
- //#region color-dark-lightness-loader
312
- $color-dark-lightness-loader-fore: 70 !default;
313
- //#endregion color-dark-lightness-loader
251
+ //#region color-lightness-link
252
+ $color-light-lightness-link-fore: 65 !default;
314
253
 
315
- //#region color-dark-lightness-progress
316
- $color-dark-lightness-progress-fore: 80 !default;
317
- //#endregion color-dark-lightness-progress
254
+ $color-dark-lightness-link-fore: 65 !default;
255
+ //#endregion color-lightness-link
256
+
257
+ //#region color-lightness-loader
258
+ $color-light-lightness-loader-fore: 65 !default;
259
+
260
+ $color-dark-lightness-loader-fore: 65 !default;
261
+ //#endregion color-lightness-loader
262
+
263
+ //#region color-lightness-message
264
+ $color-light-lightness-message-fore: 5 !default;
265
+ $color-light-lightness-message-back: 70 !default;
266
+ $color-light-lightness-message-border: 70 !default;
267
+ $color-light-lightness-message-header-fore: 5 !default;
268
+ $color-light-lightness-message-header-back: 70 !default;
269
+ $color-light-lightness-message-body-fore: 5 !default;
270
+ $color-light-lightness-message-body-back: 90 !default;
318
271
 
319
- //#region color-dark-lightness-message
320
272
  $color-dark-lightness-message-fore: 95 !default;
321
273
  $color-dark-lightness-message-back: 5 !default;
322
274
  $color-dark-lightness-message-border: 30 !default;
@@ -324,27 +276,40 @@ $color-dark-lightness-message-header-fore: 95 !default;
324
276
  $color-dark-lightness-message-header-back: 50 !default;
325
277
  $color-dark-lightness-message-body-fore: 95 !default;
326
278
  $color-dark-lightness-message-body-back: 5 !default;
327
- //#endregion color-dark-lightness-card
279
+ //#endregion color-lightness-message
280
+
281
+ //#region color-lightness-nav
282
+ $color-light-lightness-nav-fore: 5 !default;
283
+ $color-light-lightness-nav-back: 95 !default;
284
+ $color-light-lightness-nav-border: 70 !default;
285
+ $color-light-lightness-nav-menu-item-fore: 05 !default;
286
+ $color-light-lightness-nav-menu-item-shadow: 80 !default;
328
287
 
329
- //#region color-dark-lightness-nav
330
288
  $color-dark-lightness-nav-fore: 95 !default;
331
289
  $color-dark-lightness-nav-back: 5 !default;
332
290
  $color-dark-lightness-nav-border: 30 !default;
333
291
  $color-dark-lightness-nav-menu-item-fore: 95 !default;
334
292
  $color-dark-lightness-nav-menu-item-shadow: 40 !default;
335
- //#endregion color-dark-lightness-nav
293
+ //#endregion color-lightness-nav
336
294
 
337
- //#region color-light-lightness-progress
338
- $color-dark-lightness-progress-fore: 80 !default;
339
- $color-dark-lightness-progress-back: 5 !default;
340
- //#endregion color-light-lightness-progress
295
+ //#region color-lightness-progress
296
+ $color-light-lightness-progress-fore: 65 !default;
297
+ $color-light-lightness-progress-back: 90 !default;
298
+ $color-light-lightness-progress-border: 65 !default;
341
299
 
342
- //#endregion color-dark-lightness
300
+ $color-dark-lightness-progress-fore: 65 !default;
301
+ $color-dark-lightness-progress-back: 10 !default;
302
+ $color-dark-lightness-progress-border: 65 !default;
303
+ //#endregion color-lightness-progress
343
304
 
344
305
  //#region color-lightness-offset
345
306
 
346
307
  $color-light-lightness-offset-disabled-fore: 30 !default;
347
308
  $color-dark-lightness-offset-disabled-fore: -30 !default;
309
+ $color-light-lightness-offset-selection-fore: 0 !default;
310
+ $color-dark-lightness-offset-selection-fore: 0 !default;
311
+ $color-light-lightness-offset-selection-back: -25 !default;
312
+ $color-dark-lightness-offset-selection-back: 25 !default;
348
313
  $color-lightness-offset-disabled: 0 !default;
349
314
  $color-lightness-offset-focus: 20 !default;
350
315
  $color-lightness-offset-hover: 5 !default;
@@ -379,14 +344,24 @@ $colorShades: (
379
344
  light: $color-light-lightness-shadow,
380
345
  dark: $color-dark-lightness-shadow,
381
346
  ),
347
+ scrollbar: (
348
+ thumb: (
349
+ light: $color-light-lightness-scrollbar-track,
350
+ dark: $color-dark-lightness-scrollbar-track,
351
+ ),
352
+ track: (
353
+ light: $color-light-lightness-scrollbar-track,
354
+ dark: $color-dark-lightness-scrollbar-track,
355
+ ),
356
+ ),
382
357
  selection: (
383
358
  fore: (
384
- light: $color-light-lightness-selection-fore,
385
- dark: $color-dark-lightness-selection-fore,
359
+ light: $color-light-lightness-fore + $color-light-lightness-offset-selection-fore,
360
+ dark: $color-dark-lightness-fore + $color-dark-lightness-offset-selection-fore,
386
361
  ),
387
362
  back: (
388
- light: $color-light-lightness-selection-back,
389
- dark: $color-dark-lightness-selection-back,
363
+ light: $color-light-lightness-back + $color-light-lightness-offset-selection-back,
364
+ dark: $color-dark-lightness-back + $color-dark-lightness-offset-selection-back,
390
365
  ),
391
366
  ),
392
367
  //#region backgrounds
@@ -680,6 +655,72 @@ $colorShades: (
680
655
  ),
681
656
  ),
682
657
  //#endregion dialogue
658
+ //#region figure
659
+ figure: (
660
+ fore: (
661
+ light: $color-light-lightness-figure-fore,
662
+ dark: $color-dark-lightness-figure-fore,
663
+ ),
664
+ back: (
665
+ light: $color-light-lightness-figure-back,
666
+ dark: $color-dark-lightness-figure-back,
667
+ ),
668
+ border: (
669
+ light: $color-light-lightness-figure-border,
670
+ dark: $color-dark-lightness-figure-border,
671
+ ),
672
+ selection: (
673
+ fore: (
674
+ light: $color-light-lightness-figure-fore + $color-light-lightness-offset-selection-fore,
675
+ dark: $color-dark-lightness-figure-fore + $color-dark-lightness-offset-selection-fore,
676
+ ),
677
+ back: (
678
+ light: $color-light-lightness-figure-back + $color-light-lightness-offset-selection-back,
679
+ dark: $color-dark-lightness-figure-back + $color-dark-lightness-offset-selection-back,
680
+ ),
681
+ ),
682
+ figureContent: (
683
+ fore: (
684
+ light: $color-light-lightness-figure-content-fore,
685
+ dark: $color-dark-lightness-figure-content-fore,
686
+ ),
687
+ back: (
688
+ light: $color-light-lightness-figure-content-back,
689
+ dark: $color-dark-lightness-figure-content-back,
690
+ ),
691
+ selection: (
692
+ fore: (
693
+ light: $color-light-lightness-figure-content-fore + $color-light-lightness-offset-selection-fore,
694
+ dark: $color-dark-lightness-figure-content-fore + $color-dark-lightness-offset-selection-fore,
695
+ ),
696
+ back: (
697
+ light: $color-light-lightness-figure-content-back + $color-light-lightness-offset-selection-back,
698
+ dark: $color-dark-lightness-figure-content-back + $color-dark-lightness-offset-selection-back,
699
+ ),
700
+ ),
701
+ ),
702
+ figureCaption: (
703
+ fore: (
704
+ light: $color-light-lightness-figure-caption-fore,
705
+ dark: $color-dark-lightness-figure-caption-fore,
706
+ ),
707
+ back: (
708
+ light: $color-light-lightness-figure-caption-back,
709
+ dark: $color-dark-lightness-figure-caption-back,
710
+ ),
711
+ selection: (
712
+ fore: (
713
+ light: $color-light-lightness-figure-caption-fore + $color-light-lightness-offset-selection-fore,
714
+ dark: $color-dark-lightness-figure-caption-fore + $color-dark-lightness-offset-selection-fore,
715
+ ),
716
+ back: (
717
+ light: $color-light-lightness-figure-caption-back + $color-light-lightness-offset-selection-back,
718
+ dark: $color-dark-lightness-figure-caption-back + $color-dark-lightness-offset-selection-back,
719
+ ),
720
+ ),
721
+ ),
722
+ ),
723
+ //#endregion figure
683
724
  //#region header
684
725
  header: (
685
726
  fore: (
@@ -813,6 +854,10 @@ $colorShades: (
813
854
  light: $color-light-lightness-progress-back,
814
855
  dark: $color-dark-lightness-progress-back,
815
856
  ),
857
+ border: (
858
+ light: $color-light-lightness-progress-border,
859
+ dark: $color-dark-lightness-progress-border,
860
+ ),
816
861
  ),
817
862
  //#endregion components
818
863
  ),
@@ -1132,6 +1177,7 @@ $colorShades: (
1132
1177
  $color-lightness-offset-focus,
1133
1178
  ),
1134
1179
  ),
1180
+ //#endregion input
1135
1181
  //#region nav
1136
1182
  nav: (
1137
1183
  navMenu: (
@@ -1324,8 +1370,6 @@ $colorShades: (
1324
1370
 
1325
1371
  //#endregion colorShades
1326
1372
 
1327
- //#endregion define color shades array
1328
-
1329
1373
  //#region define colorNames array
1330
1374
 
1331
1375
  $colors: (
@@ -1413,4 +1457,5 @@ $semanticColors: (
1413
1457
  )
1414
1458
  ) !default;
1415
1459
 
1460
+ $allColors: list.join($colors, $semanticColors);
1416
1461
  //#endregion define colorNames array
@@ -1,3 +1,4 @@
1
+ $header-min-height: 4rem !default;
1
2
  $header-backdrop-filter: blur(0.25rem) !default;
2
3
  $header-z-index-is-sticky: 100 !default;
3
4
  $header-z-index-is-fixed: 100 !default;
@@ -1,28 +1,30 @@
1
- $breakpoint-xsmall: 0 !default;
2
- $breakpoint-small: 544px !default;
3
- $breakpoint-medium: 768px !default;
4
- $breakpoint-large: 1024px !default;
5
- $breakpoint-xlarge: 1200px !default;
1
+ $responsive-breakpoint-xsmall: 0 !default;
2
+ $responsive-breakpoint-small: 544px !default;
3
+ $responsive-breakpoint-medium: 768px !default;
4
+ $responsive-breakpoint-large: 1024px !default;
5
+ $responsive-breakpoint-xlarge: 1200px !default;
6
6
 
7
7
  $breakpoints: (
8
8
  (
9
9
  "name": "xsmall",
10
- "value": $breakpoint-xsmall,
10
+ "value": $responsive-breakpoint-xsmall,
11
11
  ),
12
12
  (
13
13
  "name": "small",
14
- "value": $breakpoint-small,
14
+ "value": $responsive-breakpoint-small,
15
15
  ),
16
16
  (
17
17
  "name": "medium",
18
- "value": $breakpoint-medium,
18
+ "value": $responsive-breakpoint-medium,
19
19
  ),
20
20
  (
21
21
  "name": "large",
22
- "value": $breakpoint-large,
22
+ "value": $responsive-breakpoint-large,
23
23
  ),
24
24
  (
25
25
  "name": "xlarge",
26
- "value": $breakpoint-xlarge,
26
+ "value": $responsive-breakpoint-xlarge,
27
27
  )
28
- );
28
+ ) !default;
29
+
30
+ $responsive-breakpoint-max-width-offset: -0.02px !default;
@@ -10,5 +10,3 @@ $z-index-modal: 100 !default;
10
10
  $z-index-modal-content: auto !default;
11
11
 
12
12
  $columns-count: 12 !default;
13
-
14
- $responsive-breakpoint-max-width-offset: 0.02px !default;