minolith 1.0.4 → 1.1.1

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 +568 -419
  2. package/dist/css/minolith-skelton.css.map +1 -1
  3. package/dist/css/minolith-skelton.min.css +568 -419
  4. package/dist/css/minolith-skelton.min.css.map +1 -1
  5. package/dist/css/minolith.css +14869 -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 +151 -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/dialogue.scss CHANGED
@@ -28,37 +28,44 @@
28
28
 
29
29
  :where(.dialogue) {
30
30
  //#region local css variables
31
- --#{variables.$prefix}color-dialogue-fore: var(
31
+ --#{variables.$prefix}dialogue-color-fore: var(
32
32
  --#{variables.$prefix}color-default-dialogue-fore
33
33
  );
34
- --#{variables.$prefix}color-dialogue-back: var(
34
+ --#{variables.$prefix}dialogue-color-back: var(
35
35
  --#{variables.$prefix}color-default-dialogue-back
36
36
  );
37
- --#{variables.$prefix}color-dialogue-border: var(
37
+ --#{variables.$prefix}dialogue-color-border: var(
38
38
  --#{variables.$prefix}color-default-dialogue-border
39
39
  );
40
- --#{variables.$prefix}color-dialogue-avatar-back: var(
40
+ --#{variables.$prefix}dialogue-color-selection-fore: var(
41
+ --#{variables.$prefix}color-default-selection-fore
42
+ );
43
+ --#{variables.$prefix}dialogue-color-selection-back: var(
44
+ --#{variables.$prefix}color-default-selection-back
45
+ );
46
+
47
+ --#{variables.$prefix}dialogue-avatar-color-back: var(
41
48
  --#{variables.$prefix}color-default-dialogue-back
42
49
  );
43
- --#{variables.$prefix}color-dialogue-avatar-border: var(
50
+ --#{variables.$prefix}dialogue-avatar-color-border: var(
44
51
  --#{variables.$prefix}color-default-dialogue-border
45
52
  );
46
- --#{variables.$prefix}color-dialogue-name-fore: var(
53
+ --#{variables.$prefix}dialogue-name-color-fore: var(
47
54
  --#{variables.$prefix}color-default-dialogue-name-fore
48
55
  );
49
- --#{variables.$prefix}color-dialogue-name-back: var(
56
+ --#{variables.$prefix}dialogue-name-color-back: var(
50
57
  --#{variables.$prefix}color-default-dialogue-name-back
51
58
  );
52
- --#{variables.$prefix}color-dialogue-name-border: var(
59
+ --#{variables.$prefix}dialogue-name-color-border: var(
53
60
  --#{variables.$prefix}color-default-dialogue-name-border
54
61
  );
55
- --#{variables.$prefix}color-dialogue-message-fore: var(
62
+ --#{variables.$prefix}dialogue-message-color-fore: var(
56
63
  --#{variables.$prefix}color-default-dialogue-message-fore
57
64
  );
58
- --#{variables.$prefix}color-dialogue-message-back: var(
65
+ --#{variables.$prefix}dialogue-message-color-back: var(
59
66
  --#{variables.$prefix}color-default-dialogue-message-back
60
67
  );
61
- --#{variables.$prefix}color-dialogue-message-border: var(
68
+ --#{variables.$prefix}dialogue-message-color-border: var(
62
69
  --#{variables.$prefix}color-default-dialogue-message-border
63
70
  );
64
71
 
@@ -83,6 +90,9 @@
83
90
  var(--#{variables.$prefix}dialogue-avatar-top-offset) +
84
91
  (var(--#{variables.$prefix}dialogue-avatar-size) / 2)
85
92
  );
93
+ --#{variables.$prefix}dialogue-border-radius: var(
94
+ --#{variables.$prefix}border-radius-medium
95
+ );
86
96
  --#{variables.$prefix}dialogue-border-style: solid;
87
97
  //#endregion local css variables
88
98
 
@@ -93,16 +103,12 @@
93
103
  padding-bottom: var(--#{variables.$prefix}dialogue-messege-top-offset);
94
104
  position: relative;
95
105
  width: 100%;
96
- &.is-avatar-small {
97
- --#{variables.$prefix}dialogue-avatar-size: var(
98
- --#{variables.$prefix}dialogue-avatar-size-small
99
- );
100
- }
101
- &.is-avatar-large {
102
- --#{variables.$prefix}dialogue-avatar-size: var(
103
- --#{variables.$prefix}dialogue-avatar-size-large
104
- );
106
+
107
+ &::selection {
108
+ color: var(--#{variables.$prefix}dialogue-color-selection-fore);
109
+ background-color: var(--#{variables.$prefix}dialogue-color-selection-back);
105
110
  }
111
+
106
112
  &.is-avatar-circle {
107
113
  --#{variables.$prefix}dialogue-messege-arrow-top-offset: calc(
108
114
  (-1 * var(--#{variables.$prefix}dialogue-messege-top-offset)) +
@@ -138,7 +144,7 @@
138
144
  > .dialogue-avatar {
139
145
  @include mixins.element();
140
146
  aspect-ratio: 1;
141
- background-color: var(--#{variables.$prefix}color-dialogue-avatar-back);
147
+ background-color: var(--#{variables.$prefix}dialogue-avatar-color-back);
142
148
  display: block;
143
149
  align-items: center;
144
150
  justify-content: center;
@@ -147,7 +153,7 @@
147
153
  margin: 0 auto;
148
154
  overflow: hidden;
149
155
  &.has-border {
150
- border-color: var(--#{variables.$prefix}color-dialogue-avatar-border);
156
+ border-color: var(--#{variables.$prefix}dialogue-avatar-color-border);
151
157
  border-style: var(--#{variables.$prefix}dialogue-border-style);
152
158
  border-width: var(--#{variables.$prefix}dialogue-border-width);
153
159
  }
@@ -159,15 +165,15 @@
159
165
  > .dialogue-name,
160
166
  > .dialogue-message {
161
167
  min-height: 1rem;
162
- border-radius: var(--#{variables.$prefix}border-radius-medium);
168
+ border-radius: var(--#{variables.$prefix}dialogue-border-radius);
163
169
  border-width: var(--#{variables.$prefix}dialogue-border-width);
164
170
  border-style: var(--#{variables.$prefix}dialogue-border-style);
165
171
  }
166
172
  > .dialogue-name {
167
173
  @include mixins.element();
168
- background-color: var(--#{variables.$prefix}color-dialogue-name-back);
169
- border-color: var(--#{variables.$prefix}color-dialogue-name-border);
170
- color: var(--#{variables.$prefix}color-dialogue-name-fore);
174
+ background-color: var(--#{variables.$prefix}dialogue-name-color-back);
175
+ border-color: var(--#{variables.$prefix}dialogue-name-color-border);
176
+ color: var(--#{variables.$prefix}dialogue-name-color-fore);
171
177
  font-size: var(--#{variables.$prefix}dialogue-name-font-size);
172
178
  position: absolute;
173
179
  top: 0;
@@ -178,9 +184,9 @@
178
184
  }
179
185
  > .dialogue-message {
180
186
  @include mixins.element();
181
- background-color: var(--#{variables.$prefix}color-dialogue-message-back);
182
- border-color: var(--#{variables.$prefix}color-dialogue-message-border);
183
- color: var(--#{variables.$prefix}color-dialogue-message-fore);
187
+ background-color: var(--#{variables.$prefix}dialogue-message-color-back);
188
+ border-color: var(--#{variables.$prefix}dialogue-message-color-border);
189
+ color: var(--#{variables.$prefix}dialogue-message-color-fore);
184
190
  position: relative;
185
191
  top: var(--#{variables.$prefix}dialogue-messege-top-offset);
186
192
  padding-top: calc(
@@ -212,7 +218,7 @@
212
218
  }
213
219
  &::before {
214
220
  border-right-color: var(
215
- --#{variables.$prefix}color-dialogue-message-border
221
+ --#{variables.$prefix}dialogue-message-color-border
216
222
  );
217
223
  border-right-width: var(
218
224
  --#{variables.$prefix}dialogue-messege-arrow-width
@@ -224,7 +230,7 @@
224
230
  }
225
231
  &::after {
226
232
  border-right-color: var(
227
- --#{variables.$prefix}color-dialogue-message-back
233
+ --#{variables.$prefix}dialogue-message-color-back
228
234
  );
229
235
  border-right-width: var(
230
236
  --#{variables.$prefix}dialogue-messege-arrow-width
@@ -255,7 +261,7 @@
255
261
  }
256
262
  &::before {
257
263
  border-left-color: var(
258
- --#{variables.$prefix}color-dialogue-message-border
264
+ --#{variables.$prefix}dialogue-message-color-border
259
265
  );
260
266
  border-left-width: var(
261
267
  --#{variables.$prefix}dialogue-messege-arrow-width
@@ -267,7 +273,7 @@
267
273
  }
268
274
  &::after {
269
275
  border-left-color: var(
270
- --#{variables.$prefix}color-dialogue-message-back
276
+ --#{variables.$prefix}dialogue-message-color-back
271
277
  );
272
278
  border-left-width: var(
273
279
  --#{variables.$prefix}dialogue-messege-arrow-width
@@ -282,56 +288,117 @@
282
288
  }
283
289
  }
284
290
 
285
- @each $borderWidth in variables.$borderWidths {
286
- $name: map.get($borderWidth, "name");
287
- &.is-border-width-#{$name} {
288
- --#{variables.$prefix}dialogue-border-width: var(
289
- --#{variables.$prefix}border-width-#{$name}
291
+ @if (not variables.$is-skelton) {
292
+ &.is-avatar-small {
293
+ --#{variables.$prefix}dialogue-avatar-size: var(
294
+ --#{variables.$prefix}dialogue-avatar-size-small
295
+ );
296
+ }
297
+ &.is-avatar-large {
298
+ --#{variables.$prefix}dialogue-avatar-size: var(
299
+ --#{variables.$prefix}dialogue-avatar-size-large
290
300
  );
291
301
  }
292
- }
293
302
 
294
- @each $border-style in variables.$borderStyles {
295
- &.is-border-style-#{$border-style} {
296
- --#{variables.$prefix}dialogue-border-style: #{$border-style};
303
+ @each $borderWidth in variables.$borderWidths {
304
+ $name: map.get($borderWidth, "name");
305
+ &.is-border-width-#{$name} {
306
+ --#{variables.$prefix}dialogue-border-width: var(
307
+ --#{variables.$prefix}border-width-#{$name}
308
+ );
309
+ }
310
+ }
311
+
312
+ @each $border-style in variables.$borderStyles {
313
+ &.is-border-style-#{$border-style} {
314
+ --#{variables.$prefix}dialogue-border-style: #{$border-style};
315
+ }
297
316
  }
298
- }
299
317
 
300
- @if (not variables.$is-skelton) {
301
318
  @each $color in variables.$colors {
302
319
  $colorName: map.get($color, "name");
303
320
  &.is-#{$colorName} {
304
- --#{variables.$prefix}color-dialogue-fore: var(
321
+ --#{variables.$prefix}dialogue-color-fore: var(
305
322
  --#{variables.$prefix}color-#{$colorName}-dialogue-fore
306
323
  );
307
- --#{variables.$prefix}color-dialogue-back: var(
324
+ --#{variables.$prefix}dialogue-color-back: var(
308
325
  --#{variables.$prefix}color-#{$colorName}-dialogue-back
309
326
  );
310
- --#{variables.$prefix}color-dialogue-border: var(
327
+ --#{variables.$prefix}dialogue-color-border: var(
311
328
  --#{variables.$prefix}color-#{$colorName}-dialogue-border
312
329
  );
313
- --#{variables.$prefix}color-dialogue-avatar-back: var(
330
+ --#{variables.$prefix}dialogue-color-selection-fore: var(
331
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
332
+ );
333
+ --#{variables.$prefix}dialogue-color-selection-back: var(
334
+ --#{variables.$prefix}color-#{$colorName}-selection-back
335
+ );
336
+ --#{variables.$prefix}dialogue-avatar-color-back: var(
337
+ --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-back
338
+ );
339
+ --#{variables.$prefix}dialogue-avatar-color-border: var(
340
+ --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-border
341
+ );
342
+ --#{variables.$prefix}dialogue-name-color-fore: var(
343
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore
344
+ );
345
+ --#{variables.$prefix}dialogue-name-color-back: var(
346
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-back
347
+ );
348
+ --#{variables.$prefix}dialogue-name-color-border: var(
349
+ --#{variables.$prefix}color-#{$colorName}-dialogue-name-border
350
+ );
351
+ --#{variables.$prefix}dialogue-message-color-fore: var(
352
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore
353
+ );
354
+ --#{variables.$prefix}dialogue-message-color-back: var(
355
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
356
+ );
357
+ --#{variables.$prefix}dialogue-message-color-border: var(
358
+ --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
359
+ );
360
+ }
361
+ }
362
+ @each $semanticColor in variables.$semanticColors {
363
+ $colorName: map.get($semanticColor, "name");
364
+ &.is-#{$colorName} {
365
+ --#{variables.$prefix}dialogue-color-fore: var(
366
+ --#{variables.$prefix}color-#{$colorName}-dialogue-fore
367
+ );
368
+ --#{variables.$prefix}dialogue-color-back: var(
369
+ --#{variables.$prefix}color-#{$colorName}-dialogue-back
370
+ );
371
+ --#{variables.$prefix}dialogue-color-border: var(
372
+ --#{variables.$prefix}color-#{$colorName}-dialogue-border
373
+ );
374
+ --#{variables.$prefix}dialogue-color-selection-fore: var(
375
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
376
+ );
377
+ --#{variables.$prefix}dialogue-color-selection-back: var(
378
+ --#{variables.$prefix}color-#{$colorName}-selection-back
379
+ );
380
+ --#{variables.$prefix}dialogue-avatar-color-back: var(
314
381
  --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-back
315
382
  );
316
- --#{variables.$prefix}color-dialogue-avatar-border: var(
383
+ --#{variables.$prefix}dialogue-avatar-color-border: var(
317
384
  --#{variables.$prefix}color-#{$colorName}-dialogue-avatar-border
318
385
  );
319
- --#{variables.$prefix}color-dialogue-name-fore: var(
386
+ --#{variables.$prefix}dialogue-name-color-fore: var(
320
387
  --#{variables.$prefix}color-#{$colorName}-dialogue-name-fore
321
388
  );
322
- --#{variables.$prefix}color-dialogue-name-back: var(
389
+ --#{variables.$prefix}dialogue-name-color-back: var(
323
390
  --#{variables.$prefix}color-#{$colorName}-dialogue-name-back
324
391
  );
325
- --#{variables.$prefix}color-dialogue-name-border: var(
392
+ --#{variables.$prefix}dialogue-name-color-border: var(
326
393
  --#{variables.$prefix}color-#{$colorName}-dialogue-name-border
327
394
  );
328
- --#{variables.$prefix}color-dialogue-message-fore: var(
395
+ --#{variables.$prefix}dialogue-message-color-fore: var(
329
396
  --#{variables.$prefix}color-#{$colorName}-dialogue-message-fore
330
397
  );
331
- --#{variables.$prefix}color-dialogue-message-back: var(
398
+ --#{variables.$prefix}dialogue-message-color-back: var(
332
399
  --#{variables.$prefix}color-#{$colorName}-dialogue-message-back
333
400
  );
334
- --#{variables.$prefix}color-dialogue-message-border: var(
401
+ --#{variables.$prefix}dialogue-message-color-border: var(
335
402
  --#{variables.$prefix}color-#{$colorName}-dialogue-message-border
336
403
  );
337
404
  }
package/src/components/footer.scss CHANGED
@@ -3,17 +3,17 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  :where(.footer) {
6
- --#{variables.$prefix}color-footer-fore: var(
6
+ --#{variables.$prefix}footer-color-fore: var(
7
7
  --#{variables.$prefix}color-default-footer-fore
8
8
  );
9
- --#{variables.$prefix}color-footer-back: var(
9
+ --#{variables.$prefix}footer-color-back: var(
10
10
  --#{variables.$prefix}color-default-footer-back
11
11
  );
12
12
 
13
13
  @include mixins.element();
14
14
 
15
- background-color: var(--#{variables.$prefix}color-footer-back);
16
- color: var(--#{variables.$prefix}color-footer-fore);
15
+ background-color: var(--#{variables.$prefix}footer-color-back);
16
+ color: var(--#{variables.$prefix}footer-color-fore);
17
17
  padding: 2rem 0;
18
18
  bottom: 0;
19
19
 
@@ -21,10 +21,21 @@
21
21
  @each $color in variables.$colors {
22
22
  $colorName: map.get($color, "name");
23
23
  &.is-#{$colorName} {
24
- --#{variables.$prefix}color-footer-fore: var(
24
+ --#{variables.$prefix}footer-color-fore: var(
25
25
  --#{variables.$prefix}color-#{$colorName}-footer-fore
26
26
  );
27
- --#{variables.$prefix}color-footer-back: var(
27
+ --#{variables.$prefix}footer-color-back: var(
28
+ --#{variables.$prefix}color-#{$colorName}-footer-back
29
+ );
30
+ }
31
+ }
32
+ @each $semanticColor in variables.$semanticColors {
33
+ $colorName: map.get($semanticColor, "name");
34
+ &.is-#{$colorName} {
35
+ --#{variables.$prefix}footer-color-fore: var(
36
+ --#{variables.$prefix}color-#{$colorName}-footer-fore
37
+ );
38
+ --#{variables.$prefix}footer-color-back: var(
28
39
  --#{variables.$prefix}color-#{$colorName}-footer-back
29
40
  );
30
41
  }
package/src/components/hamburger.scss CHANGED
@@ -1,20 +1,30 @@
1
1
  @use "sass:map";
2
2
  @use "../variables/index.scss" as variables;
3
-
4
- $hamburger-size: 3.5rem;
5
- $hamburger-line-height: 0.2rem;
6
- $hamburger-line-color: var(--#{variables.$prefix}color-default-border);
3
+ @use "../mixins/index.scss" as mixins;
7
4
 
8
5
  :where(.hamburger) {
9
- color: var(--#{variables.$prefix}color-default-fore);
6
+ --#{variables.$prefix}hamburger-color-fore: var(
7
+ --#{variables.$prefix}color-default-hamburger-fore,
8
+ var(--#{variables.$prefix}color-default-fore)
9
+ );
10
+ --#{variables.$prefix}hamburger-line-color-back: var(
11
+ --#{variables.$prefix}color-default-hamburger-line-back,
12
+ var(--#{variables.$prefix}color-default-border)
13
+ );
14
+
15
+ --#{variables.$prefix}hamburger-size: 3.5rem;
16
+ --#{variables.$prefix}hamburger-line-height: 0.2rem;
17
+
18
+ @include mixins.element();
19
+ color: var(--#{variables.$prefix}hamburger-color-fore);
10
20
  border-radius: 0.25rem;
11
21
  cursor: pointer;
12
22
  display: inline-block;
13
- height: $hamburger-size;
23
+ height: var(--#{variables.$prefix}hamburger-size);
14
24
  position: relative;
15
25
  touch-action: manipulation;
16
26
  user-select: none;
17
- width: $hamburger-size;
27
+ width: var(--#{variables.$prefix}hamburger-size);
18
28
  .crown,
19
29
  .upperpatty,
20
30
  .club,
@@ -33,46 +43,52 @@ $hamburger-line-color: var(--#{variables.$prefix}color-default-border);
33
43
  line-height: 1;
34
44
  text-align: center;
35
45
  top: 0.25em;
36
- width: $hamburger-size;
46
+ width: var(--#{variables.$prefix}hamburger-size);
37
47
  }
38
48
  .upperpatty {
39
- animation: hamburger-upperpatty .75s forwards;
40
- background-color: $hamburger-line-color;
41
- height: $hamburger-line-height;
42
- top: calc((-1 * #{$hamburger-line-height}) - (#{$hamburger-size} / 5) + 50%);
43
- width: calc(#{$hamburger-size} / 5 * 3);
49
+ animation: hamburger-upperpatty 0.75s forwards;
50
+ background-color: var(--#{variables.$prefix}hamburger-line-color-back);
51
+ height: var(--#{variables.$prefix}hamburger-line-height);
52
+ top: calc(
53
+ (-1 * var(--#{variables.$prefix}hamburger-line-height)) -
54
+ (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
55
+ );
56
+ width: calc(var(--#{variables.$prefix}hamburger-size) / 5 * 3);
44
57
  }
45
58
  .club {
46
- background-color: $hamburger-line-color;
47
- height: $hamburger-line-height;
48
- top: calc((-1 * #{$hamburger-line-height}) + 50%);
49
- transition: all .25s .25s;
50
- width: calc(#{$hamburger-size} / 5 * 3);
59
+ background-color: var(--#{variables.$prefix}hamburger-line-color-back);
60
+ height: var(--#{variables.$prefix}hamburger-line-height);
61
+ top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
62
+ transition: all 0.25s 0.25s;
63
+ width: calc(var(--#{variables.$prefix}hamburger-size) / 5 * 3);
51
64
  }
52
65
  .lowerpatty {
53
- animation: hamburger-lowerpatty .75s forwards;
54
- background-color: $hamburger-line-color;
55
- height: $hamburger-line-height;
56
- top: calc((-1 * #{$hamburger-line-height}) + (#{$hamburger-size}/ 5) + 50%);
57
- width: calc(#{$hamburger-size} / 5 * 3);
66
+ animation: hamburger-lowerpatty 0.75s forwards;
67
+ background-color: var(--#{variables.$prefix}hamburger-line-color-back);
68
+ height: var(--#{variables.$prefix}hamburger-line-height);
69
+ top: calc(
70
+ (-1 * var(--#{variables.$prefix}hamburger-line-height)) +
71
+ (var(--#{variables.$prefix}hamburger-size)/ 5) + 50%
72
+ );
73
+ width: calc(var(--#{variables.$prefix}hamburger-size) / 5 * 3);
58
74
  }
59
75
  .heel {
60
76
  bottom: 0.5em;
61
77
  font-size: 0.5em;
62
78
  line-height: 1;
63
79
  text-align: center;
64
- width: $hamburger-size;
80
+ width: var(--#{variables.$prefix}hamburger-size);
65
81
  }
66
82
  &.is-active {
67
83
  .upperpatty {
68
- animation: hamburger-upperpatty-is-active .75s forwards;
84
+ animation: hamburger-upperpatty-is-active 0.75s forwards;
69
85
  top: 50%;
70
86
  }
71
87
  .club {
72
88
  opacity: 0;
73
89
  }
74
90
  .lowerpatty {
75
- animation: hamburger-lowerpatty-is-active .75s forwards;
91
+ animation: hamburger-lowerpatty-is-active 0.75s forwards;
76
92
  top: 50%;
77
93
  }
78
94
  }
@@ -81,16 +97,27 @@ $hamburger-line-color: var(--#{variables.$prefix}color-default-border);
81
97
  @each $color in variables.$colors {
82
98
  $colorName: map.get($color, "name");
83
99
  &.is-#{$colorName} {
84
- color: var(--#{variables.$prefix}color-#{$colorName}-fore);
85
- .upperpatty {
86
- background-color: var(--#{variables.$prefix}color-#{$colorName}-border);
87
- }
88
- .club {
89
- background-color: var(--#{variables.$prefix}color-#{$colorName}-border);
90
- }
91
- .lowerpatty {
92
- background-color: var(--#{variables.$prefix}color-#{$colorName}-border);
93
- }
100
+ --#{variables.$prefix}hamburger-color-fore: var(
101
+ --#{variables.$prefix}color-#{$colorName}-hamburger-fore,
102
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
103
+ );
104
+ --#{variables.$prefix}hamburger-line-color-back: var(
105
+ --#{variables.$prefix}color-#{$colorName}-hamburger-line-back,
106
+ var(--#{variables.$prefix}color-#{$colorName}-border)
107
+ );
108
+ }
109
+ }
110
+ @each $semanticColor in variables.$semanticColors {
111
+ $colorName: map.get($semanticColor, "name");
112
+ &.is-#{$colorName} {
113
+ --#{variables.$prefix}hamburger-color-fore: var(
114
+ --#{variables.$prefix}color-#{$colorName}-hamburger-fore,
115
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
116
+ );
117
+ --#{variables.$prefix}hamburger-line-color-back: var(
118
+ --#{variables.$prefix}color-#{$colorName}-hamburger-line-back,
119
+ var(--#{variables.$prefix}color-#{$colorName}-border)
120
+ );
94
121
  }
95
122
  }
96
123
  }
@@ -100,58 +127,70 @@ $hamburger-line-color: var(--#{variables.$prefix}color-default-border);
100
127
  @keyframes hamburger-upperpatty {
101
128
  0% {
102
129
  transform: rotate(45deg);
103
- top: calc((-1 * #{$hamburger-line-height}) + 50%);
130
+ top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
104
131
  }
105
132
  50% {
106
133
  transform: rotate(0deg);
107
- top: calc((-1 * #{$hamburger-line-height}) + 50%);
134
+ top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
108
135
  }
109
136
  100% {
110
137
  transform: rotate(0deg);
111
- top: calc((-1 * #{$hamburger-line-height}) - (#{$hamburger-size} / 5) + 50%);
138
+ top: calc(
139
+ (-1 * var(--#{variables.$prefix}hamburger-line-height)) -
140
+ (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
141
+ );
112
142
  }
113
143
  }
114
144
 
115
- @keyframes hamburger-upperpatty-is-active{
145
+ @keyframes hamburger-upperpatty-is-active {
116
146
  0% {
117
147
  transform: rotate(0deg);
118
- top: calc((-1 * #{$hamburger-line-height}) - (#{$hamburger-size} / 5) + 50%);
148
+ top: calc(
149
+ (-1 * var(--#{variables.$prefix}hamburger-line-height)) -
150
+ (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
151
+ );
119
152
  }
120
153
  50% {
121
154
  transform: rotate(0deg);
122
- top: calc((-1 * #{$hamburger-line-height}) + 50%);
155
+ top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
123
156
  }
124
- 100%{
157
+ 100% {
125
158
  transform: rotate(45deg);
126
- top: calc((-1 * #{$hamburger-line-height}) + 50%);
159
+ top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
127
160
  }
128
161
  }
129
162
  @keyframes hamburger-lowerpatty {
130
163
  0% {
131
164
  transform: rotate(-45deg);
132
- top: calc((-1 * #{$hamburger-line-height}) + 50%);
165
+ top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
133
166
  }
134
167
  50% {
135
168
  transform: rotate(0deg);
136
- top: calc((-1 * #{$hamburger-line-height}) + 50%);
169
+ top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
137
170
  }
138
171
  100% {
139
172
  transform: rotate(0deg);
140
- top: calc((-1 * #{$hamburger-line-height}) + (#{$hamburger-size} / 5) + 50%);
173
+ top: calc(
174
+ (-1 * var(--#{variables.$prefix}hamburger-line-height)) +
175
+ (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
176
+ );
141
177
  }
142
178
  }
143
179
  @keyframes hamburger-lowerpatty-is-active {
144
180
  0% {
145
181
  transform: rotate(0deg);
146
- top: calc((-1 * #{$hamburger-line-height}) + (#{$hamburger-size} / 5) + 50%);
182
+ top: calc(
183
+ (-1 * var(--#{variables.$prefix}hamburger-line-height)) +
184
+ (var(--#{variables.$prefix}hamburger-size) / 5) + 50%
185
+ );
147
186
  }
148
187
  50% {
149
188
  transform: rotate(0deg);
150
- top: calc((-1 * #{$hamburger-line-height}) + 50%);
189
+ top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
151
190
  }
152
191
  100% {
153
192
  transform: rotate(-45deg);
154
- top: calc((-1 * #{$hamburger-line-height}) + 50%);
193
+ top: calc((-1 * var(--#{variables.$prefix}hamburger-line-height)) + 50%);
155
194
  }
156
195
  }
157
196
  //#endregion keyframes
package/src/components/header.scss CHANGED
@@ -3,10 +3,23 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  :where(.header) {
6
+ --#{variables.$prefix}header-color-fore: var(
7
+ --#{variables.$prefix}color-default-header-fore,
8
+ --#{variables.$prefix}color-default-fore,
9
+ );
10
+ --#{variables.$prefix}header-color-back: var(
11
+ --#{variables.$prefix}color-default-header-back,
12
+ --#{variables.$prefix}color-default-back,
13
+ );
14
+ --#{variables.$prefix}header-color-shadow: var(
15
+ --#{variables.$prefix}color-default-header-shadow,
16
+ --#{variables.$prefix}color-default-shadow,
17
+ );
18
+
6
19
  @include mixins.element();
7
20
  display: block;
8
21
  width: 100%;
9
- box-shadow: 0 0 0.5rem var(--#{variables.$prefix}color-default-header-shadow);
22
+ box-shadow: 0 0 0.5rem var(--#{variables.$prefix}header-color-shadow);
10
23
  backdrop-filter: var(--#{variables.$prefix}header-backdrop-filter);
11
24
 
12
25
  &.is-sticky {
@@ -29,8 +42,52 @@
29
42
  @each $color in variables.$colors {
30
43
  $colorName: map.get($color, "name");
31
44
  &.is-#{$colorName} {
45
+ --#{variables.$prefix}header-color-fore: var(
46
+ --#{variables.$prefix}color-#{$colorName}-header-fore,
47
+ --#{variables.$prefix}color-#{$colorName}-fore,
48
+ );
49
+ --#{variables.$prefix}header-color-back: var(
50
+ --#{variables.$prefix}color-#{$colorName}-header-back,
51
+ --#{variables.$prefix}color-#{$colorName}-back,
52
+ );
53
+ --#{variables.$prefix}header-color-shadow: var(
54
+ --#{variables.$prefix}color-#{$colorName}-header-shadow,
55
+ --#{variables.$prefix}color-#{$colorName}-shadow,
56
+ );
57
+
58
+ background-color: oklch(
59
+ from var(--#{variables.$prefix}header-color-back)
60
+ l
61
+ c
62
+ h /
63
+ 0.5
64
+ );
65
+ box-shadow: 0
66
+ 0
67
+ 0.5rem
68
+ var(--#{variables.$prefix}header-color-shadow);
69
+ color: var(--#{variables.$prefix}header-color-fore);
70
+ }
71
+ }
72
+
73
+ @each $semanticColor in variables.$semanticColors {
74
+ $colorName: map.get($semanticColor, "name");
75
+ &.is-#{$colorName} {
76
+ --#{variables.$prefix}header-color-fore: var(
77
+ --#{variables.$prefix}color-#{$colorName}-header-fore,
78
+ --#{variables.$prefix}color-#{$colorName}-fore,
79
+ );
80
+ --#{variables.$prefix}header-color-back: var(
81
+ --#{variables.$prefix}color-#{$colorName}-header-back,
82
+ --#{variables.$prefix}color-#{$colorName}-back,
83
+ );
84
+ --#{variables.$prefix}header-color-shadow: var(
85
+ --#{variables.$prefix}color-#{$colorName}-header-shadow,
86
+ --#{variables.$prefix}color-#{$colorName}-shadow,
87
+ );
88
+
32
89
  background-color: oklch(
33
- from var(--#{variables.$prefix}color-#{$colorName}-header-back)
90
+ from var(--#{variables.$prefix}header-color-back)
34
91
  l
35
92
  c
36
93
  h /
@@ -39,8 +96,8 @@
39
96
  box-shadow: 0
40
97
  0
41
98
  0.5rem
42
- var(--#{variables.$prefix}color-#{$colorName}-header-shadow);
43
- color: var(--#{variables.$prefix}color-#{$colorName}-header-fore);
99
+ var(--#{variables.$prefix}header-color-shadow);
100
+ color: var(--#{variables.$prefix}header-color-fore);
44
101
  }
45
102
  }
46
103
  }