noctemyth 0.2.0 → 0.3.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 (62) hide show
  1. package/dist/css/noctemyth-skelton.css +3126 -5336
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3126 -5336
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +38455 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +38455 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +22250 -37070
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5326 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/backgrounds/dot.scss +39 -15
  15. package/src/backgrounds/gingham.scss +35 -18
  16. package/src/backgrounds/rhombus.scss +58 -19
  17. package/src/backgrounds/stripe.scss +30 -9
  18. package/src/backgrounds/zigzag.scss +43 -18
  19. package/src/base/dub.scss +15 -2
  20. package/src/base/element.scss +1 -1
  21. package/src/components/accordion.scss +254 -88
  22. package/src/components/badge.scss +215 -63
  23. package/src/components/blockquote.scss +74 -25
  24. package/src/components/breadcrumbs.scss +66 -15
  25. package/src/components/button.scss +204 -76
  26. package/src/components/card.scss +204 -47
  27. package/src/components/dialogue.scss +209 -140
  28. package/src/components/div.scss +1 -1
  29. package/src/components/footer.scss +28 -5
  30. package/src/components/hamburger.scss +89 -50
  31. package/src/components/header.scss +71 -5
  32. package/src/components/heading.scss +6 -6
  33. package/src/components/image.scss +1 -0
  34. package/src/components/input.scss +141 -69
  35. package/src/components/label.scss +51 -3
  36. package/src/components/link.scss +72 -9
  37. package/src/components/list.scss +2 -2
  38. package/src/components/loader.scss +18 -7
  39. package/src/components/main.scss +1 -1
  40. package/src/components/message.scss +142 -23
  41. package/src/components/modal.scss +26 -7
  42. package/src/components/nav.scss +655 -279
  43. package/src/components/paragraph.scss +1 -1
  44. package/src/components/progress.scss +40 -15
  45. package/src/components/section.scss +1 -1
  46. package/src/components/span.scss +1 -1
  47. package/src/css-variables/color.scss +582 -465
  48. package/src/css-variables/components/dialogue.scss +2 -2
  49. package/src/css-variables/miscellaneous.scss +1 -1
  50. package/src/functions/color.scss +13 -0
  51. package/src/functions/index.scss +1 -0
  52. package/src/functions/string.scss +12 -0
  53. package/src/layouts/centering.scss +1 -1
  54. package/src/layouts/columns.scss +3 -2
  55. package/src/layouts/container.scss +1 -1
  56. package/src/mixins/color.scss +0 -32
  57. package/src/mixins/element.scss +2 -2
  58. package/src/mixins/responsive.scss +2 -1
  59. package/src/utilities/color.scss +2 -6
  60. package/src/variables/color.scss +949 -909
  61. package/src/variables/components/dialogue.scss +2 -2
  62. package/src/variables/miscellaneous.scss +1 -1
package/src/components/badge.scss CHANGED
@@ -2,15 +2,76 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .badge {
5
+ :where(.badge) {
6
+ //#region local css variables
7
+ --#{variables.$prefix}badge-color-fore: var(
8
+ --#{variables.$prefix}color-default-badge-fore
9
+ );
10
+ --#{variables.$prefix}badge-color-back: var(
11
+ --#{variables.$prefix}color-default-badge-back
12
+ );
13
+ --#{variables.$prefix}badge-color-border: var(
14
+ --#{variables.$prefix}color-default-badge-border
15
+ );
16
+
17
+ //#region focus
18
+ --#{variables.$prefix}badge-color-focus-fore: var(
19
+ --#{variables.$prefix}color-default-badge-focus-fore
20
+ );
21
+ --#{variables.$prefix}badge-color-focus-back: var(
22
+ --#{variables.$prefix}color-default-badge-focus-back
23
+ );
24
+ --#{variables.$prefix}badge-color-focus-border: var(
25
+ --#{variables.$prefix}color-default-badge-focus-border
26
+ );
27
+ //#endregion focus
28
+
29
+ //#region hover
30
+ --#{variables.$prefix}badge-color-hover-fore: var(
31
+ --#{variables.$prefix}color-default-badge-hover-fore
32
+ );
33
+ --#{variables.$prefix}badge-color-hover-back: var(
34
+ --#{variables.$prefix}color-default-badge-hover-back
35
+ );
36
+ --#{variables.$prefix}badge-color-hover-border: var(
37
+ --#{variables.$prefix}color-default-badge-hover-border
38
+ );
39
+ //#endregion hover
40
+
41
+ //#region active
42
+ --#{variables.$prefix}badge-color-active-fore: var(
43
+ --#{variables.$prefix}color-default-badge-active-fore
44
+ );
45
+ --#{variables.$prefix}badge-color-active-back: var(
46
+ --#{variables.$prefix}color-default-badge-active-back
47
+ );
48
+ --#{variables.$prefix}badge-color-active-border: var(
49
+ --#{variables.$prefix}color-default-badge-active-border
50
+ );
51
+ //#endregion active
52
+
53
+ //#region disabled
54
+ --#{variables.$prefix}badge-color-disabled-fore: var(
55
+ --#{variables.$prefix}color-default-badge-disabled-fore
56
+ );
57
+ --#{variables.$prefix}badge-color-disabled-back: var(
58
+ --#{variables.$prefix}color-default-badge-disabled-back
59
+ );
60
+ --#{variables.$prefix}badge-color-disabled-border: var(
61
+ --#{variables.$prefix}color-default-badge-disabled-border
62
+ );
63
+ //#endregion disabled
64
+
65
+ //#endregion local css variables
66
+
6
67
  @include mixins.element();
7
68
  align-items: center;
8
- background-color: var(--#{variables.$prefix}color-default-badge-back);
9
- border-color: var(--#{variables.$prefix}color-default-badge-border);
69
+ background-color: var(--#{variables.$prefix}badge-color-back);
70
+ border-color: var(--#{variables.$prefix}badge-color-border);
10
71
  border-radius: var(--#{variables.$prefix}border-radius-medium);
11
72
  border-style: solid;
12
73
  border-width: var(--#{variables.$prefix}border-width-thin);
13
- color: var(--#{variables.$prefix}color-default-badge-fore);
74
+ color: var(--#{variables.$prefix}badge-color-fore);
14
75
  display: inline-flex;
15
76
  font-size: var(--#{variables.$prefix}font-size-small);
16
77
  justify-content: center;
@@ -23,17 +84,6 @@
23
84
  padding: 0.125rem 0.25rem;
24
85
  }
25
86
 
26
- @if (not variables.$is-skelton) {
27
- @each $color in variables.$colors {
28
- $colorName: map.get($color, "name");
29
- &.is-#{$colorName} {
30
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-back);
31
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-border);
32
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-fore);
33
- }
34
- }
35
- }
36
-
37
87
  &.is-clickable {
38
88
  cursor: pointer;
39
89
  touch-action: manipulation;
@@ -41,69 +91,171 @@
41
91
  &:focus,
42
92
  &.is-focus,
43
93
  &.is-focused {
44
- background-color: var(--#{variables.$prefix}color-default-badge-focus-back);
45
- border-color: var(--#{variables.$prefix}color-default-badge-focus-border);
46
- color: var(--#{variables.$prefix}color-default-badge-focus-fore);
94
+ background-color: var(
95
+ --#{variables.$prefix}badge-color-focus-back
96
+ );
97
+ border-color: var(--#{variables.$prefix}badge-color-focus-border);
98
+ color: var(--#{variables.$prefix}badge-color-focus-fore);
47
99
  }
48
100
  &:hover,
49
101
  &.is-hovered,
50
102
  &.is-hovered {
51
- background-color: var(--#{variables.$prefix}color-default-badge-hover-back);
52
- border-color: var(--#{variables.$prefix}color-default-badge-hover-border);
53
- color: var(--#{variables.$prefix}color-default-badge-hover-fore);
103
+ background-color: var(
104
+ --#{variables.$prefix}badge-color-hover-back
105
+ );
106
+ border-color: var(--#{variables.$prefix}badge-color-hover-border);
107
+ color: var(--#{variables.$prefix}badge-color-hover-fore);
54
108
  }
55
109
  &:active,
56
110
  &.is-active {
57
- background-color: var(--#{variables.$prefix}color-default-badge-active-back);
58
- border-color: var(--#{variables.$prefix}color-default-badge-active-border);
59
- color: var(--#{variables.$prefix}color-default-badge-active-fore);
111
+ background-color: var(
112
+ --#{variables.$prefix}badge-color-active-back
113
+ );
114
+ border-color: var(
115
+ --#{variables.$prefix}badge-color-active-border
116
+ );
117
+ color: var(--#{variables.$prefix}badge-color-active-fore);
60
118
  }
61
119
  &[disabled],
62
120
  fieldset[disabled],
63
121
  &.is-disabled {
64
- background-color: var(--#{variables.$prefix}color-default-badge-disabled-back);
65
- border-color: var(--#{variables.$prefix}color-default-badge-disabled-border);
66
- color: var(--#{variables.$prefix}color-default-badge-disabled-fore);
122
+ background-color: var(
123
+ --#{variables.$prefix}badge-color-disabled-back
124
+ );
125
+ border-color: var(
126
+ --#{variables.$prefix}badge-color-disabled-border
127
+ );
128
+ color: var(--#{variables.$prefix}badge-color-disabled-fore);
67
129
  }
130
+ }
68
131
 
69
- @if (not variables.$is-skelton) {
70
- @each $color in variables.$colors {
132
+ @if (not variables.$is-skelton) {
133
+ @each $color in variables.$colors {
71
134
  $colorName: map.get($color, "name");
72
- &.is-#{$colorName} {
73
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-back);
74
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-border);
75
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-fore);
76
- &.is-clickable {
77
- &:focus,
78
- &.is-focus,
79
- &.is-focused {
80
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-focus-back);
81
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-focus-border);
82
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-focus-fore);
83
- }
84
- &:hover,
85
- &.is-hover,
86
- &.is-hovered {
87
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-hover-back);
88
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-hover-border);
89
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-hover-fore);
90
- }
91
- &:active,
92
- &.is-active {
93
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-active-back);
94
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-active-border);
95
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-active-fore);
96
- }
97
- &[disabled],
98
- fieldset[disabled],
99
- &.is-disabled {
100
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-disabled-back);
101
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-disabled-border);
102
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-disabled-fore);
103
- }
104
- }
105
- }
135
+ &.is-#{$colorName} {
136
+ //#region local css variables
137
+ --#{variables.$prefix}badge-color-fore: var(
138
+ --#{variables.$prefix}color-#{$colorName}-badge-fore
139
+ );
140
+ --#{variables.$prefix}badge-color-back: var(
141
+ --#{variables.$prefix}color-#{$colorName}-badge-back
142
+ );
143
+ --#{variables.$prefix}badge-color-border: var(
144
+ --#{variables.$prefix}color-#{$colorName}-badge-border
145
+ );
146
+
147
+ //#region focus
148
+ --#{variables.$prefix}badge-color-focus-fore: var(
149
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-fore
150
+ );
151
+ --#{variables.$prefix}badge-color-focus-back: var(
152
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-back
153
+ );
154
+ --#{variables.$prefix}badge-color-focus-border: var(
155
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-border
156
+ );
157
+ //#endregion focus
158
+
159
+ //#region hover
160
+ --#{variables.$prefix}badge-color-hover-fore: var(
161
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-fore
162
+ );
163
+ --#{variables.$prefix}badge-color-hover-back: var(
164
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-back
165
+ );
166
+ --#{variables.$prefix}badge-color-hover-border: var(
167
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-border
168
+ );
169
+ //#endregion hover
170
+
171
+ //#region active
172
+ --#{variables.$prefix}badge-color-active-fore: var(
173
+ --#{variables.$prefix}color-#{$colorName}-badge-active-fore
174
+ );
175
+ --#{variables.$prefix}badge-color-active-back: var(
176
+ --#{variables.$prefix}color-#{$colorName}-badge-active-back
177
+ );
178
+ --#{variables.$prefix}badge-color-active-border: var(
179
+ --#{variables.$prefix}color-#{$colorName}-badge-active-border
180
+ );
181
+ //#endregion active
182
+
183
+ //#region disabled
184
+ --#{variables.$prefix}badge-color-disabled-fore: var(
185
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-fore
186
+ );
187
+ --#{variables.$prefix}badge-color-disabled-back: var(
188
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-back
189
+ );
190
+ --#{variables.$prefix}badge-color-disabled-border: var(
191
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-border
192
+ );
193
+ //#endregion disabled
194
+ }
195
+ }
196
+ @each $semanticColor in variables.$semanticColors {
197
+ $colorName: map.get($semanticColor, "name");
198
+ &.is-#{$colorName} {
199
+ //#region local css variables
200
+ --#{variables.$prefix}badge-color-fore: var(
201
+ --#{variables.$prefix}color-#{$colorName}-badge-fore
202
+ );
203
+ --#{variables.$prefix}badge-color-back: var(
204
+ --#{variables.$prefix}color-#{$colorName}-badge-back
205
+ );
206
+ --#{variables.$prefix}badge-color-border: var(
207
+ --#{variables.$prefix}color-#{$colorName}-badge-border
208
+ );
209
+
210
+ //#region focus
211
+ --#{variables.$prefix}badge-color-focus-fore: var(
212
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-fore
213
+ );
214
+ --#{variables.$prefix}badge-color-focus-back: var(
215
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-back
216
+ );
217
+ --#{variables.$prefix}badge-color-focus-border: var(
218
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-border
219
+ );
220
+ //#endregion focus
221
+
222
+ //#region hover
223
+ --#{variables.$prefix}badge-color-hover-fore: var(
224
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-fore
225
+ );
226
+ --#{variables.$prefix}badge-color-hover-back: var(
227
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-back
228
+ );
229
+ --#{variables.$prefix}badge-color-hover-border: var(
230
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-border
231
+ );
232
+ //#endregion hover
233
+
234
+ //#region active
235
+ --#{variables.$prefix}badge-color-active-fore: var(
236
+ --#{variables.$prefix}color-#{$colorName}-badge-active-fore
237
+ );
238
+ --#{variables.$prefix}badge-color-active-back: var(
239
+ --#{variables.$prefix}color-#{$colorName}-badge-active-back
240
+ );
241
+ --#{variables.$prefix}badge-color-active-border: var(
242
+ --#{variables.$prefix}color-#{$colorName}-badge-active-border
243
+ );
244
+ //#endregion active
245
+
246
+ //#region disabled
247
+ --#{variables.$prefix}badge-color-disabled-fore: var(
248
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-fore
249
+ );
250
+ --#{variables.$prefix}badge-color-disabled-back: var(
251
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-back
252
+ );
253
+ --#{variables.$prefix}badge-color-disabled-border: var(
254
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-border
255
+ );
256
+ //#endregion disabled
106
257
  }
107
258
  }
108
259
  }
260
+
109
261
  }
package/src/components/blockquote.scss CHANGED
@@ -3,24 +3,49 @@
3
3
  @use "../icons/index.scss" as icons;
4
4
  @use "../mixins/index.scss" as mixins;
5
5
 
6
- .blockquote {
6
+ :where(.blockquote) {
7
+ //#region local css variables
8
+ --#{variables.$prefix}blockquote-color-fore: var(
9
+ --#{variables.$prefix}color-default-blockquote-fore
10
+ );
11
+ --#{variables.$prefix}blockquote-color-back: var(
12
+ --#{variables.$prefix}color-default-blockquote-back
13
+ );
14
+ --#{variables.$prefix}blockquote-color-border: var(
15
+ --#{variables.$prefix}color-default-blockquote-border
16
+ );
17
+ --#{variables.$prefix}blockquote-color-selection-fore: var(
18
+ --#{variables.$prefix}color-default-blockquote-selection-fore,
19
+ var(--#{variables.$prefix}color-default-selection-fore)
20
+ );
21
+ --#{variables.$prefix}blockquote-color-selection-back: var(
22
+ --#{variables.$prefix}color-default-blockquote-selection-back,
23
+ var(--#{variables.$prefix}color-default-selection-back)
24
+ );
25
+
7
26
  --#{variables.$prefix}blockquote-icon-font-size: var(
8
27
  --#{variables.$prefix}font-size-xxxlarge
9
28
  );
10
29
  --#{variables.$prefix}blockquote-border-left-width: var(
11
30
  --#{variables.$prefix}border-width-thick
12
31
  );
32
+ //#endregion local css variables
33
+
13
34
  @include mixins.element();
14
35
  position: relative;
15
- color: var(--#{variables.$prefix}color-default-blockquote-fore);
16
- background-color: var(--#{variables.$prefix}color-default-blockquote-back);
17
- border-left-color: var(--#{variables.$prefix}color-default-blockquote-border);
36
+ color: var(--#{variables.$prefix}blockquote-color-fore);
37
+ background-color: var(--#{variables.$prefix}blockquote-color-back);
38
+ border-left-color: var(--#{variables.$prefix}blockquote-color-border);
18
39
  border-left-style: solid;
19
40
  border-left-width: var(--#{variables.$prefix}blockquote-border-left-width);
20
41
  margin: 0;
21
42
  margin-block: unset;
22
43
  margin-inline: unset;
23
44
  padding: 0.5rem;
45
+ &::selection {
46
+ color: var(--#{variables.$prefix}blockquote-color-selection-fore);
47
+ background-color: var(--#{variables.$prefix}blockquote-color-selection-back);
48
+ }
24
49
  &.is-italic {
25
50
  font-style: italic;
26
51
  }
@@ -38,7 +63,7 @@
38
63
  content: open-quote;
39
64
  display: block;
40
65
  max-width: 100%;
41
- color: var(--#{variables.$prefix}color-default-blockquote-fore);
66
+ color: var(--#{variables.$prefix}blockquote-color-fore);
42
67
  font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
43
68
  }
44
69
  }
@@ -56,7 +81,7 @@
56
81
  content: close-quote;
57
82
  display: block;
58
83
  max-width: 100%;
59
- color: var(--#{variables.$prefix}color-default-blockquote-fore);
84
+ color: var(--#{variables.$prefix}blockquote-color-fore);
60
85
  font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
61
86
  }
62
87
  }
@@ -65,27 +90,51 @@
65
90
  @each $color in variables.$colors {
66
91
  $colorName: map.get($color, "name");
67
92
  &.is-#{$colorName} {
68
- background-color: var(--#{variables.$prefix}color-#{$colorName}-blockquote-back);
69
- border-left-color: var(
93
+
94
+ //#region local css variables
95
+ --#{variables.$prefix}blockquote-color-fore: var(
96
+ --#{variables.$prefix}color-#{$colorName}-blockquote-fore
97
+ );
98
+ --#{variables.$prefix}blockquote-color-back: var(
99
+ --#{variables.$prefix}color-#{$colorName}-blockquote-back
100
+ );
101
+ --#{variables.$prefix}blockquote-color-border: var(
70
102
  --#{variables.$prefix}color-#{$colorName}-blockquote-border
71
103
  );
72
- color: var(--#{variables.$prefix}color-#{$colorName}-blockquote-fore);
73
- &.has-quote,
74
- &.has-quote-before {
75
- &::before {
76
- color: var(
77
- --#{variables.$prefix}color-#{$colorName}-blockquote-fore
78
- );
79
- }
80
- }
81
- &.has-quote,
82
- &.has-quote-after {
83
- &::after {
84
- color: var(
85
- --#{variables.$prefix}color-#{$colorName}-blockquote-fore
86
- );
87
- }
88
- }
104
+ --#{variables.$prefix}blockquote-color-selection-fore: var(
105
+ --#{variables.$prefix}color-#{$colorName}-blockquote-selection-fore,
106
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
107
+ );
108
+ --#{variables.$prefix}blockquote-color-selection-back: var(
109
+ --#{variables.$prefix}color-#{$colorName}-blockquote-selection-back,
110
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
111
+ );
112
+ //#endregion local css variables
113
+ }
114
+ }
115
+ @each $semanticColor in variables.$semanticColors {
116
+ $colorName: map.get($semanticColor, "name");
117
+ &.is-#{$colorName} {
118
+
119
+ //#region local css variables
120
+ --#{variables.$prefix}blockquote-color-fore: var(
121
+ --#{variables.$prefix}color-#{$colorName}-blockquote-fore
122
+ );
123
+ --#{variables.$prefix}blockquote-color-back: var(
124
+ --#{variables.$prefix}color-#{$colorName}-blockquote-back
125
+ );
126
+ --#{variables.$prefix}blockquote-color-border: var(
127
+ --#{variables.$prefix}color-#{$colorName}-blockquote-border
128
+ );
129
+ --#{variables.$prefix}blockquote-color-selection-fore: var(
130
+ --#{variables.$prefix}color-#{$colorName}-blockquote-selection-fore,
131
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
132
+ );
133
+ --#{variables.$prefix}blockquote-color-selection-back: var(
134
+ --#{variables.$prefix}color-#{$colorName}-blockquote-selection-back,
135
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
136
+ );
137
+ //#endregion local css variables
89
138
  }
90
139
  }
91
140
  }
package/src/components/breadcrumbs.scss CHANGED
@@ -3,21 +3,45 @@
3
3
  @use "../variables/index.scss" as variables;
4
4
  @use "../mixins/index.scss" as mixins;
5
5
 
6
- .breadcrumbs {
6
+ :where(.breadcrumbs) {
7
+ //#region local css variables
8
+ --#{variables.$prefix}breadcrumb-color-fore: var(
9
+ --#{variables.$prefix}color-default-breadcrumb-fore,
10
+ var(--#{variables.$prefix}color-default-fore)
11
+ );
12
+ --#{variables.$prefix}breadcrumb-color-selection-fore: var(
13
+ --#{variables.$prefix}color-default-breadcrumb-selection-fore,
14
+ var(--#{variables.$prefix}color-default-selection-fore)
15
+ );
16
+ --#{variables.$prefix}breadcrumb-color-selection-back: var(
17
+ --#{variables.$prefix}color-default-breadcrumb-selection-back,
18
+ var(--#{variables.$prefix}color-default-selection-back)
19
+ );
20
+ --#{variables.$prefix}breadcrumb-divider-color-fore: var(
21
+ --#{variables.$prefix}color-default-breadcrumb-divider-fore
22
+ );
23
+ //#endregion local css variables
24
+
7
25
  @include mixins.element();
8
26
  display: flex;
9
27
  flex-wrap: wrap;
10
28
  list-style: none;
11
- > .breadcrumb {
29
+ > :where(.breadcrumb) {
12
30
  @include mixins.element();
13
31
  text-wrap: wrap;
14
- color: var(--#{variables.$prefix}color-default-breadcrumb-fore);
32
+ color: var(--#{variables.$prefix}breadcrumb-color-fore);
33
+ &::selection {
34
+ color: var(--#{variables.$prefix}breadcrumb-color-selection-fore);
35
+ background-color: var(
36
+ --#{variables.$prefix}breadcrumb-color-selection-back
37
+ );
38
+ }
15
39
  &:has(~ .breadcrumb) {
16
40
  &::after {
17
41
  @include mixins.element();
18
42
  content: var(--#{variables.$prefix}breadcrumb-divider);
19
43
  margin: 0 0.5rem;
20
- color: var(--#{variables.$prefix}color-default-breadcrumb-divider-fore);
44
+ color: var(--#{variables.$prefix}breadcrumb-divider-color-fore);
21
45
  user-select: none;
22
46
  }
23
47
  }
@@ -27,21 +51,48 @@
27
51
  @each $color in variables.$colors {
28
52
  $colorName: map.get($color, "name");
29
53
  &.is-#{$colorName} {
30
- > .breadcrumb {
31
- color: var(--#{variables.$prefix}color-#{$colorName}-breadcrumb-fore);
32
- &:has(~ .breadcrumb) {
33
- &::after {
34
- color: var(
35
- --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
36
- );
37
- }
38
- }
39
- }
54
+ //#region local css variables
55
+ --#{variables.$prefix}breadcrumb-color-fore: var(
56
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-fore
57
+ );
58
+ --#{variables.$prefix}breadcrumb-divider-color-fore: var(
59
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
60
+ );
61
+ --#{variables.$prefix}breadcrumb-color-selection-fore: var(
62
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-selection-fore,
63
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
64
+ );
65
+ --#{variables.$prefix}breadcrumb-color-selection-back: var(
66
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-selection-back,
67
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
68
+ );
69
+ //#endregion local css variables
70
+ }
71
+ }
72
+ @each $semanticColor in variables.$semanticColors {
73
+ $colorName: map.get($semanticColor, "name");
74
+ &.is-#{$colorName} {
75
+ //#region local css variables
76
+ --#{variables.$prefix}breadcrumb-color-fore: var(
77
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-fore
78
+ );
79
+ --#{variables.$prefix}breadcrumb-divider-color-fore: var(
80
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
81
+ );
82
+ --#{variables.$prefix}breadcrumb-color-selection-fore: var(
83
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-selection-fore,
84
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
85
+ );
86
+ --#{variables.$prefix}breadcrumb-color-selection-back: var(
87
+ --#{variables.$prefix}color-#{$colorName}-breadcrumb-selection-back,
88
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
89
+ );
90
+ //#endregion local css variables
40
91
  }
41
92
  }
42
93
  }
43
94
  }
44
95
 
45
- .breadcrumbs-nav {
96
+ :where(.breadcrumbs-nav) {
46
97
  @include mixins.element();
47
98
  }