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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "minolith",
3
- "version": "1.0.4",
3
+ "version": "1.1.0",
4
4
  "description": "design system by minominolyly",
5
5
  "main": "src/minolith.scss",
6
6
  "scripts": {
package/src/backgrounds/dot.scss CHANGED
@@ -59,5 +59,21 @@
59
59
  );
60
60
  }
61
61
  }
62
+
63
+ @each $semanticColor in variables.$semanticColors {
64
+ $colorName: map.get($semanticColor, "name");
65
+ &.is-#{$colorName} {
66
+ --#{variables.$prefix}dot-color-fore: oklch(
67
+ from var(--#{variables.$prefix}color-#{$colorName}-dot-fore)
68
+ l
69
+ c
70
+ h /
71
+ 0.5
72
+ );
73
+ --#{variables.$prefix}dot-color-back: var(
74
+ --#{variables.$prefix}color-#{$colorName}-dot-back
75
+ );
76
+ }
77
+ }
62
78
  }
63
79
  }
package/src/backgrounds/gingham.scss CHANGED
@@ -53,5 +53,21 @@
53
53
  );
54
54
  }
55
55
  }
56
+
57
+ @each $semanticColor in variables.$semanticColors {
58
+ $colorName: map.get($semanticColor, "name");
59
+ &.is-#{$colorName} {
60
+ --#{variables.$prefix}gingham-color-fore: oklch(
61
+ from var(--#{variables.$prefix}color-#{$colorName}-gingham-fore)
62
+ l
63
+ c
64
+ h /
65
+ 0.5
66
+ );
67
+ --#{variables.$prefix}gingham-color-back: var(
68
+ --#{variables.$prefix}color-#{$colorName}-gingham-back
69
+ );
70
+ }
71
+ }
56
72
  }
57
73
  }
package/src/backgrounds/rhombus.scss CHANGED
@@ -4,8 +4,7 @@
4
4
 
5
5
  :where(.rhombus) {
6
6
  --#{variables.$prefix}rhombus-color-fore: oklch(
7
- from var(--#{variables.$prefix}color-default-rhombus-fore) l c h /
8
- 0.5
7
+ from var(--#{variables.$prefix}color-default-rhombus-fore) l c h / 0.5
9
8
  );
10
9
  --#{variables.$prefix}rhombus-color-back: var(
11
10
  --#{variables.$prefix}color-default-rhombus-back
@@ -69,5 +68,21 @@
69
68
  );
70
69
  }
71
70
  }
71
+
72
+ @each $semanticColor in variables.$semanticColors {
73
+ $colorName: map.get($semanticColor, "name");
74
+ &.is-#{$colorName} {
75
+ --#{variables.$prefix}rhombus-color-fore: oklch(
76
+ from var(--#{variables.$prefix}color-#{$colorName}-rhombus-fore)
77
+ l
78
+ c
79
+ h /
80
+ 0.5
81
+ );
82
+ --#{variables.$prefix}rhombus-color-back: var(
83
+ --#{variables.$prefix}color-#{$colorName}-rhombus-back
84
+ );
85
+ }
86
+ }
72
87
  }
73
88
  }
package/src/backgrounds/stripe.scss CHANGED
@@ -46,5 +46,21 @@
46
46
  );
47
47
  }
48
48
  }
49
+
50
+ @each $semanticColor in variables.$semanticColors {
51
+ $colorName: map.get($semanticColor, "name");
52
+ &.is-#{$colorName} {
53
+ --#{variables.$prefix}stripe-color-fore: oklch(
54
+ from var(--#{variables.$prefix}color-#{$colorName}-stripe-fore)
55
+ l
56
+ c
57
+ h /
58
+ 0.5
59
+ );
60
+ --#{variables.$prefix}stripe-color-back: var(
61
+ --#{variables.$prefix}color-#{$colorName}-stripe-back
62
+ );
63
+ }
64
+ }
49
65
  }
50
66
  }
package/src/backgrounds/zigzag.scss CHANGED
@@ -76,5 +76,21 @@
76
76
  );
77
77
  }
78
78
  }
79
+
80
+ @each $semanticColor in variables.$semanticColors {
81
+ $colorName: map.get($semanticColor, "name");
82
+ &.is-#{$colorName} {
83
+ --#{variables.$prefix}zigzag-color-fore: oklch(
84
+ from var(--#{variables.$prefix}color-#{$colorName}-zigzag-fore)
85
+ l
86
+ c
87
+ h /
88
+ 0.5
89
+ );
90
+ --#{variables.$prefix}zigzag-color-back: var(
91
+ --#{variables.$prefix}color-#{$colorName}-zigzag-back
92
+ );
93
+ }
94
+ }
79
95
  }
80
96
  }
package/src/base/tabula.scss CHANGED
@@ -1,9 +1,26 @@
1
1
  @use "../variables/index.scss" as variables;
2
2
 
3
3
  :where(.tabula) {
4
- color: var(--#{variables.$prefix}color-default-fore);
5
- background-color: var(--#{variables.$prefix}color-default-back);
4
+ --#{variables.$prefix}tabula-color-fore: var(
5
+ --#{variables.$prefix}color-default-fore
6
+ );
7
+ --#{variables.$prefix}tabula-color-back: var(
8
+ --#{variables.$prefix}color-default-back
9
+ );
10
+ --#{variables.$prefix}tabula-color-selection-fore: var(
11
+ --#{variables.$prefix}color-default-selection-fore
12
+ );
13
+ --#{variables.$prefix}tabula-color-selection-back: var(
14
+ --#{variables.$prefix}color-default-selection-back
15
+ );
16
+
17
+ color: var(--#{variables.$prefix}tabula-color-fore);
18
+ background-color: var(--#{variables.$prefix}tabula-color-back);
6
19
  font-family: var(--#{variables.$prefix}font-family-main);
7
20
  z-index: var(--#{variables.$prefix}z-index-tabula);
8
21
  text-size-adjust: 100%;
22
+ &::selection {
23
+ color: var(--#{variables.$prefix}tabula-color-selection-fore);
24
+ background-color: var(--#{variables.$prefix}tabula-color-selection-back);
25
+ }
9
26
  }
package/src/components/accordion.scss CHANGED
@@ -5,68 +5,77 @@
5
5
 
6
6
  :where(.accordion) {
7
7
  //#region local css variables
8
- --#{variables.$prefix}color-accordion-fore: var(
9
- --#{variables.$prefix}color-default-accordion-fore
8
+ --#{variables.$prefix}accordion-color-fore: var(
9
+ --#{variables.$prefix}color-default-accordion-fore,
10
+ var(--#{variables.$prefix}color-default-fore)
10
11
  );
11
- --#{variables.$prefix}color-accordion-back: var(
12
- --#{variables.$prefix}color-default-accordion-back
12
+ --#{variables.$prefix}accordion-color-back: var(
13
+ --#{variables.$prefix}color-default-accordion-back,
14
+ var(--#{variables.$prefix}color-default-back)
13
15
  );
14
- --#{variables.$prefix}color-accordion-border: var(
15
- --#{variables.$prefix}color-default-accordion-border
16
+ --#{variables.$prefix}accordion-color-border: var(
17
+ --#{variables.$prefix}color-default-accordion-border,
18
+ var(--#{variables.$prefix}color-default-border)
19
+ );
20
+ --#{variables.$prefix}accordion-color-selection-fore: var(
21
+ --#{variables.$prefix}color-default-selection-fore
22
+ );
23
+ --#{variables.$prefix}accordion-color-selection-back: var(
24
+ --#{variables.$prefix}color-default-selection-back
16
25
  );
17
26
 
18
- --#{variables.$prefix}color-accordion-summary-fore: var(
27
+ --#{variables.$prefix}accordion-summary-color-fore: var(
19
28
  --#{variables.$prefix}color-default-accordion-summary-fore
20
29
  );
21
- --#{variables.$prefix}color-accordion-summary-back: var(
30
+ --#{variables.$prefix}accordion-summary-color-back: var(
22
31
  --#{variables.$prefix}color-default-accordion-summary-back
23
32
  );
24
- --#{variables.$prefix}color-accordion-summary-border: var(
33
+ --#{variables.$prefix}accordion-summary-color-border: var(
25
34
  --#{variables.$prefix}color-default-accordion-summary-border
26
35
  );
27
36
 
28
- --#{variables.$prefix}color-accordion-details-fore: var(
37
+ --#{variables.$prefix}accordion-details-color-fore: var(
29
38
  --#{variables.$prefix}color-default-accordion-details-fore
30
39
  );
31
- --#{variables.$prefix}color-accordion-details-back: var(
40
+ --#{variables.$prefix}accordion-details-color-back: var(
32
41
  --#{variables.$prefix}color-default-accordion-details-back
33
42
  );
34
- --#{variables.$prefix}color-accordion-details-border: var(
43
+ --#{variables.$prefix}accordion-details-color-border: var(
35
44
  --#{variables.$prefix}color-default-accordion-details-border
36
45
  );
37
46
 
38
47
  //#region focus
39
- --#{variables.$prefix}color-accordion-summary-focus-back: var(
48
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
40
49
  --#{variables.$prefix}color-default-accordion-summary-focus-back
41
50
  );
42
- --#{variables.$prefix}color-accordion-summary-focus-border: var(
51
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
43
52
  --#{variables.$prefix}color-default-accordion-summary-focus-border
44
53
  );
45
54
  //#endregion focus
46
55
 
47
56
  //#region hover
48
- --#{variables.$prefix}color-accordion-summary-hover-back: var(
57
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
49
58
  --#{variables.$prefix}color-default-accordion-summary-hover-back
50
59
  );
51
- --#{variables.$prefix}color-accordion-summary-hover-border: var(
60
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
52
61
  --#{variables.$prefix}color-default-accordion-summary-hover-border
53
62
  );
54
63
  //#endregion hover
55
64
 
56
65
  //#region active
57
- --#{variables.$prefix}color-accordion-summary-active-back: var(
66
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
58
67
  --#{variables.$prefix}color-default-accordion-summary-active-back
59
68
  );
60
- --#{variables.$prefix}color-accordion-summary-active-border: var(
69
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
61
70
  --#{variables.$prefix}color-default-accordion-summary-active-border
62
71
  );
63
72
  //#endregion active
64
73
 
65
74
  //#region disabled
66
- --#{variables.$prefix}color-accordion-summary-disabled-back: var(
75
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
67
76
  --#{variables.$prefix}color-default-accordion-summary-disabled-back
68
77
  );
69
- --#{variables.$prefix}color-accordion-summary-disabled-border: var(
78
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
70
79
  --#{variables.$prefix}color-default-accordion-summary-disabled-border
71
80
  );
72
81
  //#endregion disabled
@@ -74,9 +83,9 @@
74
83
  //#endregion local css variables
75
84
 
76
85
  @include mixins.element();
77
- color: var(--#{variables.$prefix}color-accordion-fore);
78
- background-color: var(--#{variables.$prefix}color-accordion-back);
79
- border-color: var(--#{variables.$prefix}color-accordion-border);
86
+ color: var(--#{variables.$prefix}accordion-color-fore);
87
+ background-color: var(--#{variables.$prefix}accordion-color-back);
88
+ border-color: var(--#{variables.$prefix}accordion-color-border);
80
89
  border-radius: calc(
81
90
  var(--#{variables.$prefix}border-radius-medium) +
82
91
  var(--#{variables.$prefix}border-width-thin)
@@ -84,10 +93,16 @@
84
93
  border-style: solid;
85
94
  border-width: var(--#{variables.$prefix}border-width-thin);
86
95
  border-collapse: collapse;
96
+
97
+ &::selection {
98
+ color: var(--#{variables.$prefix}accordion-color-selection-fore);
99
+ background-color: var(--#{variables.$prefix}accordion-color-selection-back);
100
+ }
101
+
87
102
  > .accordion-summary {
88
103
  @include mixins.element();
89
- background-color: var(--#{variables.$prefix}color-accordion-summary-back);
90
- border-color: var(--#{variables.$prefix}color-accordion-summary-border);
104
+ background-color: var(--#{variables.$prefix}accordion-summary-color-back);
105
+ border-color: var(--#{variables.$prefix}accordion-summary-color-border);
91
106
  border-radius: calc(var(--#{variables.$prefix}border-radius-medium));
92
107
  cursor: pointer;
93
108
  display: block;
@@ -105,52 +120,52 @@
105
120
  right: 1rem;
106
121
  position: absolute;
107
122
  top: calc(50% - 0.25rem);
108
- background: var(--#{variables.$prefix}color-accordion-fore);
123
+ background: var(--#{variables.$prefix}accordion-color-fore);
109
124
  }
110
125
  }
111
126
  &:focus,
112
127
  &.is-focus,
113
128
  &.is-focused {
114
129
  background-color: var(
115
- --#{variables.$prefix}color-accordion-summary-focus-back
130
+ --#{variables.$prefix}accordion-summary-color-focus-back
116
131
  );
117
132
  border-color: var(
118
- --#{variables.$prefix}color-accordion-summary-focus-border
133
+ --#{variables.$prefix}accordion-summary-color-focus-border
119
134
  );
120
135
  }
121
136
  &:hover,
122
137
  &.is-hovered,
123
138
  &.is-hovered {
124
139
  background-color: var(
125
- --#{variables.$prefix}color-accordion-summary-hover-back
140
+ --#{variables.$prefix}accordion-summary-color-hover-back
126
141
  );
127
142
  border-color: var(
128
- --#{variables.$prefix}color-accordion-summary-hover-border
143
+ --#{variables.$prefix}accordion-summary-color-hover-border
129
144
  );
130
145
  }
131
146
  &:active,
132
147
  &.is-active {
133
148
  background-color: var(
134
- --#{variables.$prefix}color-accordion-summary-active-back
149
+ --#{variables.$prefix}accordion-summary-color-active-back
135
150
  );
136
151
  border-color: var(
137
- --#{variables.$prefix}color-accordion-summary-active-border
152
+ --#{variables.$prefix}accordion-summary-color-active-border
138
153
  );
139
154
  }
140
155
  &[disabled],
141
156
  fieldset[disabled],
142
157
  &.is-disabled {
143
158
  background-color: var(
144
- --#{variables.$prefix}color-accordion-summary-disabled-back
159
+ --#{variables.$prefix}accordion-summary-color-disabled-back
145
160
  );
146
161
  border-color: var(
147
- --#{variables.$prefix}color-accordion-summary-disabled-border
162
+ --#{variables.$prefix}accordion-summary-color-disabled-border
148
163
  );
149
164
  }
150
165
  }
151
166
  > .accordion-details {
152
167
  @include mixins.element();
153
- border-color: var(--#{variables.$prefix}color-accordion-details-border);
168
+ border-color: var(--#{variables.$prefix}accordion-details-color-border);
154
169
  height: 0;
155
170
  display: none;
156
171
  padding: 1rem;
@@ -175,68 +190,151 @@
175
190
  @each $color in variables.$colors {
176
191
  $colorName: map.get($color, "name");
177
192
  &.is-#{$colorName} {
178
- --#{variables.$prefix}color-accordion-fore: var(
193
+ --#{variables.$prefix}accordion-color-fore: var(
179
194
  --#{variables.$prefix}color-#{$colorName}-accordion-fore
180
195
  );
181
- --#{variables.$prefix}color-accordion-back: var(
196
+ --#{variables.$prefix}accordion-color-back: var(
182
197
  --#{variables.$prefix}color-#{$colorName}-accordion-back
183
198
  );
184
- --#{variables.$prefix}color-accordion-border: var(
199
+ --#{variables.$prefix}accordion-color-border: var(
185
200
  --#{variables.$prefix}color-#{$colorName}-accordion-border
186
201
  );
202
+ --#{variables.$prefix}accordion-color-selection-fore: var(
203
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
204
+ );
205
+ --#{variables.$prefix}accordion-color-selection-back: var(
206
+ --#{variables.$prefix}color-#{$colorName}-selection-back
207
+ );
208
+
209
+ --#{variables.$prefix}accordion-summary-color-fore: var(
210
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-fore
211
+ );
212
+ --#{variables.$prefix}accordion-summary-color-back: var(
213
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
214
+ );
215
+ --#{variables.$prefix}accordion-summary-color-border: var(
216
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
217
+ );
218
+
219
+ --#{variables.$prefix}accordion-details-color-fore: var(
220
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-fore
221
+ );
222
+ --#{variables.$prefix}accordion-details-color-back: var(
223
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-back
224
+ );
225
+ --#{variables.$prefix}accordion-details-color-border: var(
226
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-border
227
+ );
228
+
229
+ //#region focus
230
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
231
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
232
+ );
233
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
234
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
235
+ );
236
+ //#endregion focus
237
+
238
+ //#region hover
239
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
240
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
241
+ );
242
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
243
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
244
+ );
245
+ //#endregion hover
246
+
247
+ //#region active
248
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
249
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
250
+ );
251
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
252
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
253
+ );
254
+ //#endregion active
255
+
256
+ //#region disabled
257
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
258
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
259
+ );
260
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
261
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
262
+ );
263
+ //#endregion disabled
264
+ }
265
+ }
266
+
267
+ @each $semanticColor in variables.$semanticColors {
268
+ $colorName: map.get($semanticColor, "name");
269
+ &.is-#{$colorName} {
270
+ --#{variables.$prefix}accordion-color-fore: var(
271
+ --#{variables.$prefix}color-#{$colorName}-accordion-fore
272
+ );
273
+ --#{variables.$prefix}accordion-color-back: var(
274
+ --#{variables.$prefix}color-#{$colorName}-accordion-back
275
+ );
276
+ --#{variables.$prefix}accordion-color-border: var(
277
+ --#{variables.$prefix}color-#{$colorName}-accordion-border
278
+ );
279
+ --#{variables.$prefix}accordion-color-selection-fore: var(
280
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
281
+ );
282
+ --#{variables.$prefix}accordion-color-selection-back: var(
283
+ --#{variables.$prefix}color-#{$colorName}-selection-back
284
+ );
187
285
 
188
- --#{variables.$prefix}color-accordion-summary-fore: var(
286
+ --#{variables.$prefix}accordion-summary-color-fore: var(
189
287
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-fore
190
288
  );
191
- --#{variables.$prefix}color-accordion-summary-back: var(
289
+ --#{variables.$prefix}accordion-summary-color-back: var(
192
290
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
193
291
  );
194
- --#{variables.$prefix}color-accordion-summary-border: var(
292
+ --#{variables.$prefix}accordion-summary-color-border: var(
195
293
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
196
294
  );
197
295
 
198
- --#{variables.$prefix}color-accordion-details-fore: var(
296
+ --#{variables.$prefix}accordion-details-color-fore: var(
199
297
  --#{variables.$prefix}color-#{$colorName}-accordion-details-fore
200
298
  );
201
- --#{variables.$prefix}color-accordion-details-back: var(
299
+ --#{variables.$prefix}accordion-details-color-back: var(
202
300
  --#{variables.$prefix}color-#{$colorName}-accordion-details-back
203
301
  );
204
- --#{variables.$prefix}color-accordion-details-border: var(
302
+ --#{variables.$prefix}accordion-details-color-border: var(
205
303
  --#{variables.$prefix}color-#{$colorName}-accordion-details-border
206
304
  );
207
305
 
208
306
  //#region focus
209
- --#{variables.$prefix}color-accordion-summary-focus-back: var(
307
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
210
308
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
211
309
  );
212
- --#{variables.$prefix}color-accordion-summary-focus-border: var(
310
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
213
311
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
214
312
  );
215
313
  //#endregion focus
216
314
 
217
315
  //#region hover
218
- --#{variables.$prefix}color-accordion-summary-hover-back: var(
316
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
219
317
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
220
318
  );
221
- --#{variables.$prefix}color-accordion-summary-hover-border: var(
319
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
222
320
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
223
321
  );
224
322
  //#endregion hover
225
323
 
226
324
  //#region active
227
- --#{variables.$prefix}color-accordion-summary-active-back: var(
325
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
228
326
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
229
327
  );
230
- --#{variables.$prefix}color-accordion-summary-active-border: var(
328
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
231
329
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
232
330
  );
233
331
  //#endregion active
234
332
 
235
333
  //#region disabled
236
- --#{variables.$prefix}color-accordion-summary-disabled-back: var(
334
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
237
335
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
238
336
  );
239
- --#{variables.$prefix}color-accordion-summary-disabled-border: var(
337
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
240
338
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
241
339
  );
242
340
  //#endregion disabled