minolith 1.0.4 → 1.1.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 (37) hide show
  1. package/dist/css/minolith-skelton.css +565 -419
  2. package/dist/css/minolith-skelton.css.map +1 -1
  3. package/dist/css/minolith-skelton.min.css +565 -419
  4. package/dist/css/minolith-skelton.min.css.map +1 -1
  5. package/dist/css/minolith.css +14866 -4909
  6. package/dist/css/minolith.css.map +1 -1
  7. package/dist/css/minolith.min.css +3976 -1222
  8. package/dist/css/minolith.min.css.map +1 -1
  9. package/package.json +1 -1
  10. package/src/backgrounds/dot.scss +16 -0
  11. package/src/backgrounds/gingham.scss +16 -0
  12. package/src/backgrounds/rhombus.scss +17 -2
  13. package/src/backgrounds/stripe.scss +16 -0
  14. package/src/backgrounds/zigzag.scss +16 -0
  15. package/src/base/tabula.scss +19 -2
  16. package/src/components/accordion.scss +150 -52
  17. package/src/components/badge.scss +108 -45
  18. package/src/components/blockquote.scss +56 -11
  19. package/src/components/breadcrumbs.scss +52 -8
  20. package/src/components/button.scss +110 -45
  21. package/src/components/card.scss +138 -48
  22. package/src/components/dialogue.scss +122 -55
  23. package/src/components/footer.scss +17 -6
  24. package/src/components/hamburger.scss +89 -50
  25. package/src/components/header.scss +61 -4
  26. package/src/components/input.scss +115 -48
  27. package/src/components/label.scss +50 -2
  28. package/src/components/link.scss +65 -6
  29. package/src/components/list.scss +1 -1
  30. package/src/components/loader.scss +17 -6
  31. package/src/components/message.scss +94 -27
  32. package/src/components/modal.scss +12 -3
  33. package/src/components/nav.scss +207 -148
  34. package/src/css-variables/color.scss +533 -467
  35. package/src/functions/color.scss +13 -0
  36. package/src/functions/index.scss +1 -0
  37. package/src/variables/color.scss +527 -1045
package/src/components/nav.scss CHANGED
@@ -13,61 +13,61 @@
13
13
  padding: 0.5rem;
14
14
  position: relative;
15
15
  text-decoration: none;
16
- color: var(--#{variables.$prefix}color-nav-menu-item-fore);
16
+ color: var(--#{variables.$prefix}nav-menu-item-color-fore);
17
17
  text-shadow:
18
18
  2px 2px 1px
19
19
  oklch(
20
- from var(--#{variables.$prefix}color-nav-menu-item-shadow) l c h /
21
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
20
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
21
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
22
22
  ),
23
23
  -2px 2px 1px
24
24
  oklch(
25
- from var(--#{variables.$prefix}color-nav-menu-item-shadow) l c h /
26
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
25
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
26
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
27
27
  ),
28
28
  2px -2px 1px
29
29
  oklch(
30
- from var(--#{variables.$prefix}color-nav-menu-item-shadow) l c h /
31
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
30
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
31
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
32
32
  ),
33
33
  -2px -2px 1px
34
34
  oklch(
35
- from var(--#{variables.$prefix}color-nav-menu-item-shadow) l c h /
36
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
35
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
36
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
37
37
  ),
38
38
  2px 0px 1px
39
39
  oklch(
40
- from var(--#{variables.$prefix}color-nav-menu-item-shadow) l c h /
41
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
40
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
41
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
42
42
  ),
43
43
  0px 2px 1px
44
44
  oklch(
45
- from var(--#{variables.$prefix}color-nav-menu-item-shadow) l c h /
46
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
45
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
46
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
47
47
  ),
48
48
  -2px 0px 1px
49
49
  oklch(
50
- from var(--#{variables.$prefix}color-nav-menu-item-shadow) l c h /
51
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
50
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
51
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
52
52
  ),
53
53
  0px -2px 1px
54
54
  oklch(
55
- from var(--#{variables.$prefix}color-nav-menu-item-shadow) l c h /
56
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
55
+ from var(--#{variables.$prefix}nav-menu-item-color-shadow) l c h /
56
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
57
57
  );
58
58
  > .nav-menu-item-icon {
59
59
  @include mixins.element();
60
60
  filter: drop-shadow(
61
- 2px 2px 1px var(--#{variables.$prefix}color-nav-menu-item-shadow)
61
+ 2px 2px 1px var(--#{variables.$prefix}nav-menu-item-color-shadow)
62
62
  )
63
63
  drop-shadow(
64
- -2px 2px 1px var(--#{variables.$prefix}color-nav-menu-item-shadow)
64
+ -2px 2px 1px var(--#{variables.$prefix}nav-menu-item-color-shadow)
65
65
  )
66
66
  drop-shadow(
67
- 2px -2px 1px var(--#{variables.$prefix}color-nav-menu-item-shadow)
67
+ 2px -2px 1px var(--#{variables.$prefix}nav-menu-item-color-shadow)
68
68
  )
69
69
  drop-shadow(
70
- -2px -2px 1px var(--#{variables.$prefix}color-nav-menu-item-shadow)
70
+ -2px -2px 1px var(--#{variables.$prefix}nav-menu-item-color-shadow)
71
71
  );
72
72
  }
73
73
  &[onclick],
@@ -77,94 +77,94 @@
77
77
  &:focus,
78
78
  &.is-focus,
79
79
  &.is-focused {
80
- color: var(--#{variables.$prefix}color-nav-menu-item-focus-fore);
80
+ color: var(--#{variables.$prefix}nav-menu-item-color-focus-fore);
81
81
  text-shadow:
82
82
  2px 2px 1px
83
83
  oklch(
84
- from var(--#{variables.$prefix}color-nav-menu-item-focus-shadow) l c
84
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
85
85
  h /
86
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
86
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
87
87
  ),
88
88
  -2px 2px 1px
89
89
  oklch(
90
- from var(--#{variables.$prefix}color-nav-menu-item-focus-shadow) l c
90
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
91
91
  h /
92
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
92
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
93
93
  ),
94
94
  2px -2px 1px
95
95
  oklch(
96
- from var(--#{variables.$prefix}color-nav-menu-item-focus-shadow) l c
96
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
97
97
  h /
98
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
98
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
99
99
  ),
100
100
  -2px -2px 1px
101
101
  oklch(
102
- from var(--#{variables.$prefix}color-nav-menu-item-focus-shadow) l c
102
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
103
103
  h /
104
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
104
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
105
105
  ),
106
106
  2px 0px 1px
107
107
  oklch(
108
- from var(--#{variables.$prefix}color-nav-menu-item-focus-shadow) l c
108
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
109
109
  h /
110
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
110
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
111
111
  ),
112
112
  0px 2px 1px
113
113
  oklch(
114
- from var(--#{variables.$prefix}color-nav-menu-item-focus-shadow) l c
114
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
115
115
  h /
116
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
116
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
117
117
  ),
118
118
  -2px 0px 1px
119
119
  oklch(
120
- from var(--#{variables.$prefix}color-nav-menu-item-focus-shadow) l c
120
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
121
121
  h /
122
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
122
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
123
123
  ),
124
124
  0px -2px 1px
125
125
  oklch(
126
- from var(--#{variables.$prefix}color-nav-menu-item-focus-shadow) l c
126
+ from var(--#{variables.$prefix}nav-menu-item-color-focus-shadow) l c
127
127
  h /
128
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
128
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
129
129
  );
130
130
  > .nav-menu-item-icon {
131
131
  filter: drop-shadow(
132
132
  2px 2px 1px
133
133
  oklch(
134
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow)
134
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
135
135
  l c h /
136
136
  var(
137
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
137
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
138
138
  )
139
139
  )
140
140
  )
141
141
  drop-shadow(
142
142
  -2px 2px 1px
143
143
  oklch(
144
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow)
144
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
145
145
  l c h /
146
146
  var(
147
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
147
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
148
148
  )
149
149
  )
150
150
  )
151
151
  drop-shadow(
152
152
  2px -2px 1px
153
153
  oklch(
154
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow)
154
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
155
155
  l c h /
156
156
  var(
157
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
157
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
158
158
  )
159
159
  )
160
160
  )
161
161
  drop-shadow(
162
162
  -2px -2px 1px
163
163
  oklch(
164
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow)
164
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
165
165
  l c h /
166
166
  var(
167
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
167
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
168
168
  )
169
169
  )
170
170
  );
@@ -173,94 +173,94 @@
173
173
  &:hover,
174
174
  &.is-hovered,
175
175
  &.is-hovered {
176
- color: var(--#{variables.$prefix}color-nav-menu-item-hover-fore);
176
+ color: var(--#{variables.$prefix}nav-menu-item-color-hover-fore);
177
177
  text-shadow:
178
178
  2px 2px 1px
179
179
  oklch(
180
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow) l c
180
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
181
181
  h /
182
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
182
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
183
183
  ),
184
184
  -2px 2px 1px
185
185
  oklch(
186
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow) l c
186
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
187
187
  h /
188
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
188
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
189
189
  ),
190
190
  2px -2px 1px
191
191
  oklch(
192
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow) l c
192
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
193
193
  h /
194
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
194
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
195
195
  ),
196
196
  -2px -2px 1px
197
197
  oklch(
198
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow) l c
198
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
199
199
  h /
200
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
200
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
201
201
  ),
202
202
  2px 0px 1px
203
203
  oklch(
204
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow) l c
204
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
205
205
  h /
206
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
206
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
207
207
  ),
208
208
  0px 2px 1px
209
209
  oklch(
210
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow) l c
210
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
211
211
  h /
212
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
212
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
213
213
  ),
214
214
  -2px 0px 1px
215
215
  oklch(
216
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow) l c
216
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
217
217
  h /
218
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
218
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
219
219
  ),
220
220
  0px -2px 1px
221
221
  oklch(
222
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow) l c
222
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow) l c
223
223
  h /
224
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
224
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
225
225
  );
226
226
  > .nav-menu-item-icon {
227
227
  filter: drop-shadow(
228
228
  2px 2px 1px
229
229
  oklch(
230
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow)
230
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
231
231
  l c h /
232
232
  var(
233
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
233
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
234
234
  )
235
235
  )
236
236
  )
237
237
  drop-shadow(
238
238
  -2px 2px 1px
239
239
  oklch(
240
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow)
240
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
241
241
  l c h /
242
242
  var(
243
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
243
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
244
244
  )
245
245
  )
246
246
  )
247
247
  drop-shadow(
248
248
  2px -2px 1px
249
249
  oklch(
250
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow)
250
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
251
251
  l c h /
252
252
  var(
253
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
253
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
254
254
  )
255
255
  )
256
256
  )
257
257
  drop-shadow(
258
258
  -2px -2px 1px
259
259
  oklch(
260
- from var(--#{variables.$prefix}color-nav-menu-item-hover-shadow)
260
+ from var(--#{variables.$prefix}nav-menu-item-color-hover-shadow)
261
261
  l c h /
262
262
  var(
263
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
263
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
264
264
  )
265
265
  )
266
266
  );
@@ -268,65 +268,65 @@
268
268
  }
269
269
  &:active,
270
270
  &.is-active {
271
- color: var(--#{variables.$prefix}color-nav-menu-item-active-fore);
271
+ color: var(--#{variables.$prefix}nav-menu-item-color-active-fore);
272
272
  text-shadow:
273
273
  2px 2px 1px
274
274
  oklch(
275
- from var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
275
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
276
276
  c h /
277
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
277
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
278
278
  ),
279
279
  -2px 2px 1px
280
280
  oklch(
281
- from var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
281
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
282
282
  c h /
283
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
283
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
284
284
  ),
285
285
  2px -2px 1px
286
286
  oklch(
287
- from var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
287
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
288
288
  c h /
289
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
289
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
290
290
  ),
291
291
  -2px -2px 1px
292
292
  oklch(
293
- from var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
293
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
294
294
  c h /
295
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
295
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
296
296
  ),
297
297
  2px 0px 1px
298
298
  oklch(
299
- from var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
299
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
300
300
  c h /
301
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
301
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
302
302
  ),
303
303
  0px 2px 1px
304
304
  oklch(
305
- from var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
305
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
306
306
  c h /
307
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
307
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
308
308
  ),
309
309
  -2px 0px 1px
310
310
  oklch(
311
- from var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
311
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
312
312
  c h /
313
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
313
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
314
314
  ),
315
315
  0px -2px 1px
316
316
  oklch(
317
- from var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
317
+ from var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
318
318
  c h /
319
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
319
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
320
320
  );
321
321
  > .nav-menu-item-icon {
322
322
  filter: drop-shadow(
323
323
  2px 2px 1px
324
324
  oklch(
325
325
  from
326
- var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
326
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
327
327
  c h /
328
328
  var(
329
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
329
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
330
330
  )
331
331
  )
332
332
  )
@@ -334,10 +334,10 @@
334
334
  -2px 2px 1px
335
335
  oklch(
336
336
  from
337
- var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
337
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
338
338
  c h /
339
339
  var(
340
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
340
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
341
341
  )
342
342
  )
343
343
  )
@@ -345,10 +345,10 @@
345
345
  2px -2px 1px
346
346
  oklch(
347
347
  from
348
- var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
348
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
349
349
  c h /
350
350
  var(
351
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
351
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
352
352
  )
353
353
  )
354
354
  )
@@ -356,10 +356,10 @@
356
356
  -2px -2px 1px
357
357
  oklch(
358
358
  from
359
- var(--#{variables.$prefix}color-nav-menu-item-active-shadow) l
359
+ var(--#{variables.$prefix}nav-menu-item-color-active-shadow) l
360
360
  c h /
361
361
  var(
362
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
362
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
363
363
  )
364
364
  )
365
365
  );
@@ -368,65 +368,65 @@
368
368
  &[disabled],
369
369
  fieldset[disabled],
370
370
  &.is-disabled {
371
- color: var(--#{variables.$prefix}color-nav-menu-item-disabled-fore);
371
+ color: var(--#{variables.$prefix}nav-menu-item-color-disabled-fore);
372
372
  text-shadow:
373
373
  2px 2px 1px
374
374
  oklch(
375
- from var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
375
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
376
376
  l c h /
377
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
377
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
378
378
  ),
379
379
  -2px 2px 1px
380
380
  oklch(
381
- from var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
381
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
382
382
  l c h /
383
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
383
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
384
384
  ),
385
385
  2px -2px 1px
386
386
  oklch(
387
- from var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
387
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
388
388
  l c h /
389
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
389
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
390
390
  ),
391
391
  -2px -2px 1px
392
392
  oklch(
393
- from var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
393
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
394
394
  l c h /
395
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
395
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
396
396
  ),
397
397
  2px 0px 1px
398
398
  oklch(
399
- from var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
399
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
400
400
  l c h /
401
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
401
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
402
402
  ),
403
403
  0px 2px 1px
404
404
  oklch(
405
- from var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
405
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
406
406
  l c h /
407
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
407
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
408
408
  ),
409
409
  -2px 0px 1px
410
410
  oklch(
411
- from var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
411
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
412
412
  l c h /
413
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
413
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
414
414
  ),
415
415
  0px -2px 1px
416
416
  oklch(
417
- from var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
417
+ from var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
418
418
  l c h /
419
- var(--#{variables.$prefix}color-nav-menu-item-text-shadow-alpha)
419
+ var(--#{variables.$prefix}nav-menu-item-color-text-shadow-alpha)
420
420
  );
421
421
  > .nav-menu-item-icon {
422
422
  filter: drop-shadow(
423
423
  2px 2px 1px
424
424
  oklch(
425
425
  from
426
- var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
426
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
427
427
  l c h /
428
428
  var(
429
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
429
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
430
430
  )
431
431
  )
432
432
  )
@@ -434,10 +434,10 @@
434
434
  -2px 2px 1px
435
435
  oklch(
436
436
  from
437
- var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
437
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
438
438
  l c h /
439
439
  var(
440
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
440
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
441
441
  )
442
442
  )
443
443
  )
@@ -445,10 +445,10 @@
445
445
  2px -2px 1px
446
446
  oklch(
447
447
  from
448
- var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
448
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
449
449
  l c h /
450
450
  var(
451
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
451
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
452
452
  )
453
453
  )
454
454
  )
@@ -456,10 +456,10 @@
456
456
  -2px -2px 1px
457
457
  oklch(
458
458
  from
459
- var(--#{variables.$prefix}color-nav-menu-item-disabled-shadow)
459
+ var(--#{variables.$prefix}nav-menu-item-color-disabled-shadow)
460
460
  l c h /
461
461
  var(
462
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha
462
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha
463
463
  )
464
464
  )
465
465
  );
@@ -469,61 +469,61 @@
469
469
  }
470
470
 
471
471
  :where(.nav) {
472
- --#{variables.$prefix}color-nav-fore: var(
472
+ --#{variables.$prefix}nav-color-fore: var(
473
473
  --#{variables.$prefix}color-default-nav-fore,
474
474
  var(--#{variables.$prefix}color-default-fore)
475
475
  );
476
- --#{variables.$prefix}color-nav-back: var(
476
+ --#{variables.$prefix}nav-color-back: var(
477
477
  --#{variables.$prefix}color-default-nav-back,
478
478
  var(--#{variables.$prefix}color-default-back)
479
479
  );
480
- --#{variables.$prefix}color-nav-border: var(
480
+ --#{variables.$prefix}nav-color-border: var(
481
481
  --#{variables.$prefix}color-default-nav-border,
482
482
  var(--#{variables.$prefix}color-default-border)
483
483
  );
484
484
 
485
- --#{variables.$prefix}color-nav-menu-item-fore: var(
485
+ --#{variables.$prefix}nav-menu-item-color-fore: var(
486
486
  --#{variables.$prefix}color-default-nav-menu-item-fore,
487
487
  var(--#{variables.$prefix}color-default-fore)
488
488
  );
489
- --#{variables.$prefix}color-nav-menu-item-shadow: var(
489
+ --#{variables.$prefix}nav-menu-item-color-shadow: var(
490
490
  --#{variables.$prefix}color-default-nav-menu-item-shadow,
491
491
  var(--#{variables.$prefix}color-default-shadow)
492
492
  );
493
- --#{variables.$prefix}color-nav-menu-item-text-shadow-alpha: 0.5;
493
+ --#{variables.$prefix}nav-menu-item-color-text-shadow-alpha: 0.5;
494
494
 
495
- --#{variables.$prefix}color-nav-menu-item-focus-fore: var(
495
+ --#{variables.$prefix}nav-menu-item-color-focus-fore: var(
496
496
  --#{variables.$prefix}color-default-nav-menu-item-focus-fore,
497
497
  var(--#{variables.$prefix}color-default-focus-fore)
498
498
  );
499
- --#{variables.$prefix}color-nav-menu-item-focus-shadow: var(
499
+ --#{variables.$prefix}nav-menu-item-color-focus-shadow: var(
500
500
  --#{variables.$prefix}color-default-nav-menu-item-focus-shadow,
501
501
  var(--#{variables.$prefix}color-default-focus-shadow)
502
502
  );
503
503
 
504
- --#{variables.$prefix}color-nav-menu-item-hover-fore: var(
504
+ --#{variables.$prefix}nav-menu-item-color-hover-fore: var(
505
505
  --#{variables.$prefix}color-default-nav-menu-item-hover-fore,
506
506
  var(--#{variables.$prefix}color-default-hover-fore)
507
507
  );
508
- --#{variables.$prefix}color-nav-menu-item-hover-shadow: var(
508
+ --#{variables.$prefix}nav-menu-item-color-hover-shadow: var(
509
509
  --#{variables.$prefix}color-default-nav-menu-item-hover-shadow,
510
510
  var(--#{variables.$prefix}color-default-hover-shadow)
511
511
  );
512
512
 
513
- --#{variables.$prefix}color-nav-menu-item-active-fore: var(
513
+ --#{variables.$prefix}nav-menu-item-color-active-fore: var(
514
514
  --#{variables.$prefix}color-default-nav-menu-item-active-fore,
515
515
  var(--#{variables.$prefix}color-default-active-fore)
516
516
  );
517
- --#{variables.$prefix}color-nav-menu-item-active-shadow: var(
517
+ --#{variables.$prefix}nav-menu-item-color-active-shadow: var(
518
518
  --#{variables.$prefix}color-default-nav-menu-item-active-shadow,
519
519
  var(--#{variables.$prefix}color-default-active-shadow)
520
520
  );
521
521
 
522
- --#{variables.$prefix}color-nav-menu-item-disabled-fore: var(
522
+ --#{variables.$prefix}nav-menu-item-color-disabled-fore: var(
523
523
  --#{variables.$prefix}color-default-nav-menu-item-disabled-fore,
524
524
  var(--#{variables.$prefix}color-default-disabled-fore)
525
525
  );
526
- --#{variables.$prefix}color-nav-menu-item-disabled-shadow: var(
526
+ --#{variables.$prefix}nav-menu-item-color-disabled-shadow: var(
527
527
  --#{variables.$prefix}color-default-nav-menu-item-disabled-shadow,
528
528
  var(--#{variables.$prefix}color-default-disabled-shadow)
529
529
  );
@@ -645,56 +645,115 @@
645
645
  @each $color in variables.$colors {
646
646
  $colorName: map.get($color, "name");
647
647
  &.is-#{$colorName} {
648
- --#{variables.$prefix}color-nav-fore: var(
648
+ --#{variables.$prefix}nav-color-fore: var(
649
649
  --#{variables.$prefix}color-#{$colorName}-nav-fore,
650
650
  var(--#{variables.$prefix}color-#{$colorName}-fore)
651
651
  );
652
- --#{variables.$prefix}color-nav-back: var(
652
+ --#{variables.$prefix}nav-color-back: var(
653
653
  --#{variables.$prefix}color-#{$colorName}-nav-back,
654
654
  var(--#{variables.$prefix}color-#{$colorName}-back)
655
655
  );
656
- --#{variables.$prefix}color-nav-border: var(
656
+ --#{variables.$prefix}nav-color-border: var(
657
657
  --#{variables.$prefix}color-#{$colorName}-nav-border,
658
658
  var(--#{variables.$prefix}color-#{$colorName}-border)
659
659
  );
660
660
 
661
- --#{variables.$prefix}color-nav-menu-item-fore: var(
661
+ --#{variables.$prefix}nav-menu-item-color-fore: var(
662
662
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-fore,
663
663
  var(--#{variables.$prefix}color-#{$colorName}-fore)
664
664
  );
665
- --#{variables.$prefix}color-nav-menu-item-focus-fore: var(
665
+ --#{variables.$prefix}nav-menu-item-color-focus-fore: var(
666
666
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-fore,
667
667
  var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
668
668
  );
669
- --#{variables.$prefix}color-nav-menu-item-hover-fore: var(
669
+ --#{variables.$prefix}nav-menu-item-color-hover-fore: var(
670
670
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-fore,
671
671
  var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
672
672
  );
673
- --#{variables.$prefix}color-nav-menu-item-active-fore: var(
673
+ --#{variables.$prefix}nav-menu-item-color-active-fore: var(
674
674
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-fore,
675
675
  var(--#{variables.$prefix}color-#{$colorName}-active-fore)
676
676
  );
677
- --#{variables.$prefix}color-nav-menu-item-disabled-fore: var(
677
+ --#{variables.$prefix}nav-menu-item-color-disabled-fore: var(
678
678
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-fore,
679
679
  var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
680
680
  );
681
- --#{variables.$prefix}color-nav-menu-item-shadow: var(
681
+ --#{variables.$prefix}nav-menu-item-color-shadow: var(
682
682
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-shadow,
683
683
  var(--#{variables.$prefix}color-#{$colorName}-shadow)
684
684
  );
685
- --#{variables.$prefix}color-nav-menu-item-focus-shadow: var(
685
+ --#{variables.$prefix}nav-menu-item-color-focus-shadow: var(
686
686
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-shadow,
687
687
  var(--#{variables.$prefix}color-#{$colorName}-focus-shadow)
688
688
  );
689
- --#{variables.$prefix}color-nav-menu-item-hover-shadow: var(
689
+ --#{variables.$prefix}nav-menu-item-color-hover-shadow: var(
690
690
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-shadow,
691
691
  var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
692
692
  );
693
- --#{variables.$prefix}color-nav-menu-item-active-shadow: var(
693
+ --#{variables.$prefix}nav-menu-item-color-active-shadow: var(
694
694
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-shadow,
695
695
  var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
696
696
  );
697
- --#{variables.$prefix}color-nav-menu-item-disabled-shadow: var(
697
+ --#{variables.$prefix}nav-menu-item-color-disabled-shadow: var(
698
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-shadow,
699
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-shadow)
700
+ );
701
+ }
702
+ }
703
+
704
+ @each $semanticColor in variables.$semanticColors {
705
+ $colorName: map.get($semanticColor, "name");
706
+ &.is-#{$colorName} {
707
+ --#{variables.$prefix}nav-color-fore: var(
708
+ --#{variables.$prefix}color-#{$colorName}-nav-fore,
709
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
710
+ );
711
+ --#{variables.$prefix}nav-color-back: var(
712
+ --#{variables.$prefix}color-#{$colorName}-nav-back,
713
+ var(--#{variables.$prefix}color-#{$colorName}-back)
714
+ );
715
+ --#{variables.$prefix}nav-color-border: var(
716
+ --#{variables.$prefix}color-#{$colorName}-nav-border,
717
+ var(--#{variables.$prefix}color-#{$colorName}-border)
718
+ );
719
+
720
+ --#{variables.$prefix}nav-menu-item-color-fore: var(
721
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-fore,
722
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
723
+ );
724
+ --#{variables.$prefix}nav-menu-item-color-focus-fore: var(
725
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-fore,
726
+ var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
727
+ );
728
+ --#{variables.$prefix}nav-menu-item-color-hover-fore: var(
729
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-fore,
730
+ var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
731
+ );
732
+ --#{variables.$prefix}nav-menu-item-color-active-fore: var(
733
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-fore,
734
+ var(--#{variables.$prefix}color-#{$colorName}-active-fore)
735
+ );
736
+ --#{variables.$prefix}nav-menu-item-color-disabled-fore: var(
737
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-fore,
738
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
739
+ );
740
+ --#{variables.$prefix}nav-menu-item-color-shadow: var(
741
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-shadow,
742
+ var(--#{variables.$prefix}color-#{$colorName}-shadow)
743
+ );
744
+ --#{variables.$prefix}nav-menu-item-color-focus-shadow: var(
745
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-focus-shadow,
746
+ var(--#{variables.$prefix}color-#{$colorName}-focus-shadow)
747
+ );
748
+ --#{variables.$prefix}nav-menu-item-color-hover-shadow: var(
749
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-hover-shadow,
750
+ var(--#{variables.$prefix}color-#{$colorName}-hover-shadow)
751
+ );
752
+ --#{variables.$prefix}nav-menu-item-color-active-shadow: var(
753
+ --#{variables.$prefix}color-#{$colorName}-nav-menu-item-active-shadow,
754
+ var(--#{variables.$prefix}color-#{$colorName}-active-shadow)
755
+ );
756
+ --#{variables.$prefix}nav-menu-item-color-disabled-shadow: var(
698
757
  --#{variables.$prefix}color-#{$colorName}-nav-menu-item-disabled-shadow,
699
758
  var(--#{variables.$prefix}color-#{$colorName}-disabled-shadow)
700
759
  );