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/badge.scss CHANGED
@@ -4,60 +4,60 @@
4
4
 
5
5
  :where(.badge) {
6
6
  //#region local css variables
7
- --#{variables.$prefix}color-badge-fore: var(
7
+ --#{variables.$prefix}badge-color-fore: var(
8
8
  --#{variables.$prefix}color-default-badge-fore
9
9
  );
10
- --#{variables.$prefix}color-badge-back: var(
10
+ --#{variables.$prefix}badge-color-back: var(
11
11
  --#{variables.$prefix}color-default-badge-back
12
12
  );
13
- --#{variables.$prefix}color-badge-border: var(
13
+ --#{variables.$prefix}badge-color-border: var(
14
14
  --#{variables.$prefix}color-default-badge-border
15
15
  );
16
16
 
17
17
  //#region focus
18
- --#{variables.$prefix}color-badge-focus-fore: var(
18
+ --#{variables.$prefix}badge-color-focus-fore: var(
19
19
  --#{variables.$prefix}color-default-badge-focus-fore
20
20
  );
21
- --#{variables.$prefix}color-badge-focus-back: var(
21
+ --#{variables.$prefix}badge-color-focus-back: var(
22
22
  --#{variables.$prefix}color-default-badge-focus-back
23
23
  );
24
- --#{variables.$prefix}color-badge-focus-border: var(
24
+ --#{variables.$prefix}badge-color-focus-border: var(
25
25
  --#{variables.$prefix}color-default-badge-focus-border
26
26
  );
27
27
  //#endregion focus
28
28
 
29
29
  //#region hover
30
- --#{variables.$prefix}color-badge-hover-fore: var(
30
+ --#{variables.$prefix}badge-color-hover-fore: var(
31
31
  --#{variables.$prefix}color-default-badge-hover-fore
32
32
  );
33
- --#{variables.$prefix}color-badge-hover-back: var(
33
+ --#{variables.$prefix}badge-color-hover-back: var(
34
34
  --#{variables.$prefix}color-default-badge-hover-back
35
35
  );
36
- --#{variables.$prefix}color-badge-hover-border: var(
36
+ --#{variables.$prefix}badge-color-hover-border: var(
37
37
  --#{variables.$prefix}color-default-badge-hover-border
38
38
  );
39
39
  //#endregion hover
40
40
 
41
41
  //#region active
42
- --#{variables.$prefix}color-badge-active-fore: var(
42
+ --#{variables.$prefix}badge-color-active-fore: var(
43
43
  --#{variables.$prefix}color-default-badge-active-fore
44
44
  );
45
- --#{variables.$prefix}color-badge-active-back: var(
45
+ --#{variables.$prefix}badge-color-active-back: var(
46
46
  --#{variables.$prefix}color-default-badge-active-back
47
47
  );
48
- --#{variables.$prefix}color-badge-active-border: var(
48
+ --#{variables.$prefix}badge-color-active-border: var(
49
49
  --#{variables.$prefix}color-default-badge-active-border
50
50
  );
51
51
  //#endregion active
52
52
 
53
53
  //#region disabled
54
- --#{variables.$prefix}color-badge-disabled-fore: var(
54
+ --#{variables.$prefix}badge-color-disabled-fore: var(
55
55
  --#{variables.$prefix}color-default-badge-disabled-fore
56
56
  );
57
- --#{variables.$prefix}color-badge-disabled-back: var(
57
+ --#{variables.$prefix}badge-color-disabled-back: var(
58
58
  --#{variables.$prefix}color-default-badge-disabled-back
59
59
  );
60
- --#{variables.$prefix}color-badge-disabled-border: var(
60
+ --#{variables.$prefix}badge-color-disabled-border: var(
61
61
  --#{variables.$prefix}color-default-badge-disabled-border
62
62
  );
63
63
  //#endregion disabled
@@ -66,12 +66,12 @@
66
66
 
67
67
  @include mixins.element();
68
68
  align-items: center;
69
- background-color: var(--#{variables.$prefix}color-badge-back);
70
- border-color: var(--#{variables.$prefix}color-badge-border);
69
+ background-color: var(--#{variables.$prefix}badge-color-back);
70
+ border-color: var(--#{variables.$prefix}badge-color-border);
71
71
  border-radius: var(--#{variables.$prefix}border-radius-medium);
72
72
  border-style: solid;
73
73
  border-width: var(--#{variables.$prefix}border-width-thin);
74
- color: var(--#{variables.$prefix}color-badge-fore);
74
+ color: var(--#{variables.$prefix}badge-color-fore);
75
75
  display: inline-flex;
76
76
  font-size: var(--#{variables.$prefix}font-size-small);
77
77
  justify-content: center;
@@ -92,40 +92,40 @@
92
92
  &.is-focus,
93
93
  &.is-focused {
94
94
  background-color: var(
95
- --#{variables.$prefix}color-badge-focus-back
95
+ --#{variables.$prefix}badge-color-focus-back
96
96
  );
97
- border-color: var(--#{variables.$prefix}color-badge-focus-border);
98
- color: var(--#{variables.$prefix}color-badge-focus-fore);
97
+ border-color: var(--#{variables.$prefix}badge-color-focus-border);
98
+ color: var(--#{variables.$prefix}badge-color-focus-fore);
99
99
  }
100
100
  &:hover,
101
101
  &.is-hovered,
102
102
  &.is-hovered {
103
103
  background-color: var(
104
- --#{variables.$prefix}color-badge-hover-back
104
+ --#{variables.$prefix}badge-color-hover-back
105
105
  );
106
- border-color: var(--#{variables.$prefix}color-badge-hover-border);
107
- color: var(--#{variables.$prefix}color-badge-hover-fore);
106
+ border-color: var(--#{variables.$prefix}badge-color-hover-border);
107
+ color: var(--#{variables.$prefix}badge-color-hover-fore);
108
108
  }
109
109
  &:active,
110
110
  &.is-active {
111
111
  background-color: var(
112
- --#{variables.$prefix}color-badge-active-back
112
+ --#{variables.$prefix}badge-color-active-back
113
113
  );
114
114
  border-color: var(
115
- --#{variables.$prefix}color-badge-active-border
115
+ --#{variables.$prefix}badge-color-active-border
116
116
  );
117
- color: var(--#{variables.$prefix}color-badge-active-fore);
117
+ color: var(--#{variables.$prefix}badge-color-active-fore);
118
118
  }
119
119
  &[disabled],
120
120
  fieldset[disabled],
121
121
  &.is-disabled {
122
122
  background-color: var(
123
- --#{variables.$prefix}color-badge-disabled-back
123
+ --#{variables.$prefix}badge-color-disabled-back
124
124
  );
125
125
  border-color: var(
126
- --#{variables.$prefix}color-badge-disabled-border
126
+ --#{variables.$prefix}badge-color-disabled-border
127
127
  );
128
- color: var(--#{variables.$prefix}color-badge-disabled-fore);
128
+ color: var(--#{variables.$prefix}badge-color-disabled-fore);
129
129
  }
130
130
  }
131
131
 
@@ -134,60 +134,123 @@
134
134
  $colorName: map.get($color, "name");
135
135
  &.is-#{$colorName} {
136
136
  //#region local css variables
137
- --#{variables.$prefix}color-badge-fore: var(
137
+ --#{variables.$prefix}badge-color-fore: var(
138
138
  --#{variables.$prefix}color-#{$colorName}-badge-fore
139
139
  );
140
- --#{variables.$prefix}color-badge-back: var(
140
+ --#{variables.$prefix}badge-color-back: var(
141
141
  --#{variables.$prefix}color-#{$colorName}-badge-back
142
142
  );
143
- --#{variables.$prefix}color-badge-border: var(
143
+ --#{variables.$prefix}badge-color-border: var(
144
144
  --#{variables.$prefix}color-#{$colorName}-badge-border
145
145
  );
146
146
 
147
147
  //#region focus
148
- --#{variables.$prefix}color-badge-focus-fore: var(
148
+ --#{variables.$prefix}badge-color-focus-fore: var(
149
149
  --#{variables.$prefix}color-#{$colorName}-badge-focus-fore
150
150
  );
151
- --#{variables.$prefix}color-badge-focus-back: var(
151
+ --#{variables.$prefix}badge-color-focus-back: var(
152
152
  --#{variables.$prefix}color-#{$colorName}-badge-focus-back
153
153
  );
154
- --#{variables.$prefix}color-badge-focus-border: var(
154
+ --#{variables.$prefix}badge-color-focus-border: var(
155
155
  --#{variables.$prefix}color-#{$colorName}-badge-focus-border
156
156
  );
157
157
  //#endregion focus
158
158
 
159
159
  //#region hover
160
- --#{variables.$prefix}color-badge-hover-fore: var(
160
+ --#{variables.$prefix}badge-color-hover-fore: var(
161
161
  --#{variables.$prefix}color-#{$colorName}-badge-hover-fore
162
162
  );
163
- --#{variables.$prefix}color-badge-hover-back: var(
163
+ --#{variables.$prefix}badge-color-hover-back: var(
164
164
  --#{variables.$prefix}color-#{$colorName}-badge-hover-back
165
165
  );
166
- --#{variables.$prefix}color-badge-hover-border: var(
166
+ --#{variables.$prefix}badge-color-hover-border: var(
167
167
  --#{variables.$prefix}color-#{$colorName}-badge-hover-border
168
168
  );
169
169
  //#endregion hover
170
170
 
171
171
  //#region active
172
- --#{variables.$prefix}color-badge-active-fore: var(
172
+ --#{variables.$prefix}badge-color-active-fore: var(
173
173
  --#{variables.$prefix}color-#{$colorName}-badge-active-fore
174
174
  );
175
- --#{variables.$prefix}color-badge-active-back: var(
175
+ --#{variables.$prefix}badge-color-active-back: var(
176
176
  --#{variables.$prefix}color-#{$colorName}-badge-active-back
177
177
  );
178
- --#{variables.$prefix}color-badge-active-border: var(
178
+ --#{variables.$prefix}badge-color-active-border: var(
179
179
  --#{variables.$prefix}color-#{$colorName}-badge-active-border
180
180
  );
181
181
  //#endregion active
182
182
 
183
183
  //#region disabled
184
- --#{variables.$prefix}color-badge-disabled-fore: var(
184
+ --#{variables.$prefix}badge-color-disabled-fore: var(
185
185
  --#{variables.$prefix}color-#{$colorName}-badge-disabled-fore
186
186
  );
187
- --#{variables.$prefix}color-badge-disabled-back: var(
187
+ --#{variables.$prefix}badge-color-disabled-back: var(
188
188
  --#{variables.$prefix}color-#{$colorName}-badge-disabled-back
189
189
  );
190
- --#{variables.$prefix}color-badge-disabled-border: var(
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(
191
254
  --#{variables.$prefix}color-#{$colorName}-badge-disabled-border
192
255
  );
193
256
  //#endregion disabled
package/src/components/blockquote.scss CHANGED
@@ -5,15 +5,23 @@
5
5
 
6
6
  :where(.blockquote) {
7
7
  //#region local css variables
8
- --#{variables.$prefix}color-blockquote-fore: var(
8
+ --#{variables.$prefix}blockquote-color-fore: var(
9
9
  --#{variables.$prefix}color-default-blockquote-fore
10
10
  );
11
- --#{variables.$prefix}color-blockquote-back: var(
11
+ --#{variables.$prefix}blockquote-color-back: var(
12
12
  --#{variables.$prefix}color-default-blockquote-back
13
13
  );
14
- --#{variables.$prefix}color-blockquote-border: var(
14
+ --#{variables.$prefix}blockquote-color-border: var(
15
15
  --#{variables.$prefix}color-default-blockquote-border
16
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
+ );
17
25
 
18
26
  --#{variables.$prefix}blockquote-icon-font-size: var(
19
27
  --#{variables.$prefix}font-size-xxxlarge
@@ -25,15 +33,19 @@
25
33
 
26
34
  @include mixins.element();
27
35
  position: relative;
28
- color: var(--#{variables.$prefix}color-blockquote-fore);
29
- background-color: var(--#{variables.$prefix}color-blockquote-back);
30
- border-left-color: var(--#{variables.$prefix}color-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);
31
39
  border-left-style: solid;
32
40
  border-left-width: var(--#{variables.$prefix}blockquote-border-left-width);
33
41
  margin: 0;
34
42
  margin-block: unset;
35
43
  margin-inline: unset;
36
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
+ }
37
49
  &.is-italic {
38
50
  font-style: italic;
39
51
  }
@@ -51,7 +63,7 @@
51
63
  content: open-quote;
52
64
  display: block;
53
65
  max-width: 100%;
54
- color: var(--#{variables.$prefix}color-blockquote-fore);
66
+ color: var(--#{variables.$prefix}blockquote-color-fore);
55
67
  font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
56
68
  }
57
69
  }
@@ -69,7 +81,7 @@
69
81
  content: close-quote;
70
82
  display: block;
71
83
  max-width: 100%;
72
- color: var(--#{variables.$prefix}color-blockquote-fore);
84
+ color: var(--#{variables.$prefix}blockquote-color-fore);
73
85
  font-size: var(--#{variables.$prefix}blockquote-icon-font-size);
74
86
  }
75
87
  }
@@ -80,15 +92,48 @@
80
92
  &.is-#{$colorName} {
81
93
 
82
94
  //#region local css variables
83
- --#{variables.$prefix}color-blockquote-fore: var(
95
+ --#{variables.$prefix}blockquote-color-fore: var(
84
96
  --#{variables.$prefix}color-#{$colorName}-blockquote-fore
85
97
  );
86
- --#{variables.$prefix}color-blockquote-back: var(
98
+ --#{variables.$prefix}blockquote-color-back: var(
87
99
  --#{variables.$prefix}color-#{$colorName}-blockquote-back
88
100
  );
89
- --#{variables.$prefix}color-blockquote-border: var(
101
+ --#{variables.$prefix}blockquote-color-border: var(
90
102
  --#{variables.$prefix}color-#{$colorName}-blockquote-border
91
103
  );
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
+ );
92
137
  //#endregion local css variables
93
138
  }
94
139
  }
package/src/components/breadcrumbs.scss CHANGED
@@ -5,10 +5,19 @@
5
5
 
6
6
  :where(.breadcrumbs) {
7
7
  //#region local css variables
8
- --#{variables.$prefix}color-breadcrumb-fore: var(
9
- --#{variables.$prefix}color-default-breadcrumb-fore
8
+ --#{variables.$prefix}breadcrumb-color-fore: var(
9
+ --#{variables.$prefix}color-default-breadcrumb-fore,
10
+ var(--#{variables.$prefix}color-default-fore)
10
11
  );
11
- --#{variables.$prefix}color-breadcrumb-divider-fore: var(
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(
12
21
  --#{variables.$prefix}color-default-breadcrumb-divider-fore
13
22
  );
14
23
  //#endregion local css variables
@@ -17,16 +26,22 @@
17
26
  display: flex;
18
27
  flex-wrap: wrap;
19
28
  list-style: none;
20
- > .breadcrumb {
29
+ > :where(.breadcrumb) {
21
30
  @include mixins.element();
22
31
  text-wrap: wrap;
23
- color: var(--#{variables.$prefix}color-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
+ }
24
39
  &:has(~ .breadcrumb) {
25
40
  &::after {
26
41
  @include mixins.element();
27
42
  content: var(--#{variables.$prefix}breadcrumb-divider);
28
43
  margin: 0 0.5rem;
29
- color: var(--#{variables.$prefix}color-breadcrumb-divider-fore);
44
+ color: var(--#{variables.$prefix}breadcrumb-divider-color-fore);
30
45
  user-select: none;
31
46
  }
32
47
  }
@@ -37,12 +52,41 @@
37
52
  $colorName: map.get($color, "name");
38
53
  &.is-#{$colorName} {
39
54
  //#region local css variables
40
- --#{variables.$prefix}color-breadcrumb-fore: var(
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(
41
77
  --#{variables.$prefix}color-#{$colorName}-breadcrumb-fore
42
78
  );
43
- --#{variables.$prefix}color-breadcrumb-divider-fore: var(
79
+ --#{variables.$prefix}breadcrumb-divider-color-fore: var(
44
80
  --#{variables.$prefix}color-#{$colorName}-breadcrumb-divider-fore
45
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
+ );
46
90
  //#endregion local css variables
47
91
  }
48
92
  }