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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "minolith",
3
- "version": "1.0.4",
3
+ "version": "1.1.1",
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,16 +93,23 @@
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;
94
109
  padding: 1rem;
95
110
  position: relative;
96
111
  touch-action: manipulation;
112
+ user-select: none;
97
113
  list-style: none;
98
114
  &::marker,
99
115
  &::-webkit-details-marker {
@@ -105,52 +121,52 @@
105
121
  right: 1rem;
106
122
  position: absolute;
107
123
  top: calc(50% - 0.25rem);
108
- background: var(--#{variables.$prefix}color-accordion-fore);
124
+ background: var(--#{variables.$prefix}accordion-color-fore);
109
125
  }
110
126
  }
111
127
  &:focus,
112
128
  &.is-focus,
113
129
  &.is-focused {
114
130
  background-color: var(
115
- --#{variables.$prefix}color-accordion-summary-focus-back
131
+ --#{variables.$prefix}accordion-summary-color-focus-back
116
132
  );
117
133
  border-color: var(
118
- --#{variables.$prefix}color-accordion-summary-focus-border
134
+ --#{variables.$prefix}accordion-summary-color-focus-border
119
135
  );
120
136
  }
121
137
  &:hover,
122
138
  &.is-hovered,
123
139
  &.is-hovered {
124
140
  background-color: var(
125
- --#{variables.$prefix}color-accordion-summary-hover-back
141
+ --#{variables.$prefix}accordion-summary-color-hover-back
126
142
  );
127
143
  border-color: var(
128
- --#{variables.$prefix}color-accordion-summary-hover-border
144
+ --#{variables.$prefix}accordion-summary-color-hover-border
129
145
  );
130
146
  }
131
147
  &:active,
132
148
  &.is-active {
133
149
  background-color: var(
134
- --#{variables.$prefix}color-accordion-summary-active-back
150
+ --#{variables.$prefix}accordion-summary-color-active-back
135
151
  );
136
152
  border-color: var(
137
- --#{variables.$prefix}color-accordion-summary-active-border
153
+ --#{variables.$prefix}accordion-summary-color-active-border
138
154
  );
139
155
  }
140
156
  &[disabled],
141
157
  fieldset[disabled],
142
158
  &.is-disabled {
143
159
  background-color: var(
144
- --#{variables.$prefix}color-accordion-summary-disabled-back
160
+ --#{variables.$prefix}accordion-summary-color-disabled-back
145
161
  );
146
162
  border-color: var(
147
- --#{variables.$prefix}color-accordion-summary-disabled-border
163
+ --#{variables.$prefix}accordion-summary-color-disabled-border
148
164
  );
149
165
  }
150
166
  }
151
167
  > .accordion-details {
152
168
  @include mixins.element();
153
- border-color: var(--#{variables.$prefix}color-accordion-details-border);
169
+ border-color: var(--#{variables.$prefix}accordion-details-color-border);
154
170
  height: 0;
155
171
  display: none;
156
172
  padding: 1rem;
@@ -175,68 +191,151 @@
175
191
  @each $color in variables.$colors {
176
192
  $colorName: map.get($color, "name");
177
193
  &.is-#{$colorName} {
178
- --#{variables.$prefix}color-accordion-fore: var(
194
+ --#{variables.$prefix}accordion-color-fore: var(
179
195
  --#{variables.$prefix}color-#{$colorName}-accordion-fore
180
196
  );
181
- --#{variables.$prefix}color-accordion-back: var(
197
+ --#{variables.$prefix}accordion-color-back: var(
182
198
  --#{variables.$prefix}color-#{$colorName}-accordion-back
183
199
  );
184
- --#{variables.$prefix}color-accordion-border: var(
200
+ --#{variables.$prefix}accordion-color-border: var(
185
201
  --#{variables.$prefix}color-#{$colorName}-accordion-border
186
202
  );
203
+ --#{variables.$prefix}accordion-color-selection-fore: var(
204
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
205
+ );
206
+ --#{variables.$prefix}accordion-color-selection-back: var(
207
+ --#{variables.$prefix}color-#{$colorName}-selection-back
208
+ );
209
+
210
+ --#{variables.$prefix}accordion-summary-color-fore: var(
211
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-fore
212
+ );
213
+ --#{variables.$prefix}accordion-summary-color-back: var(
214
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
215
+ );
216
+ --#{variables.$prefix}accordion-summary-color-border: var(
217
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
218
+ );
219
+
220
+ --#{variables.$prefix}accordion-details-color-fore: var(
221
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-fore
222
+ );
223
+ --#{variables.$prefix}accordion-details-color-back: var(
224
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-back
225
+ );
226
+ --#{variables.$prefix}accordion-details-color-border: var(
227
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-border
228
+ );
229
+
230
+ //#region focus
231
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
232
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
233
+ );
234
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
235
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
236
+ );
237
+ //#endregion focus
238
+
239
+ //#region hover
240
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
241
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
242
+ );
243
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
244
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
245
+ );
246
+ //#endregion hover
247
+
248
+ //#region active
249
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
250
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
251
+ );
252
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
253
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
254
+ );
255
+ //#endregion active
256
+
257
+ //#region disabled
258
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
259
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
260
+ );
261
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
262
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
263
+ );
264
+ //#endregion disabled
265
+ }
266
+ }
267
+
268
+ @each $semanticColor in variables.$semanticColors {
269
+ $colorName: map.get($semanticColor, "name");
270
+ &.is-#{$colorName} {
271
+ --#{variables.$prefix}accordion-color-fore: var(
272
+ --#{variables.$prefix}color-#{$colorName}-accordion-fore
273
+ );
274
+ --#{variables.$prefix}accordion-color-back: var(
275
+ --#{variables.$prefix}color-#{$colorName}-accordion-back
276
+ );
277
+ --#{variables.$prefix}accordion-color-border: var(
278
+ --#{variables.$prefix}color-#{$colorName}-accordion-border
279
+ );
280
+ --#{variables.$prefix}accordion-color-selection-fore: var(
281
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
282
+ );
283
+ --#{variables.$prefix}accordion-color-selection-back: var(
284
+ --#{variables.$prefix}color-#{$colorName}-selection-back
285
+ );
187
286
 
188
- --#{variables.$prefix}color-accordion-summary-fore: var(
287
+ --#{variables.$prefix}accordion-summary-color-fore: var(
189
288
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-fore
190
289
  );
191
- --#{variables.$prefix}color-accordion-summary-back: var(
290
+ --#{variables.$prefix}accordion-summary-color-back: var(
192
291
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
193
292
  );
194
- --#{variables.$prefix}color-accordion-summary-border: var(
293
+ --#{variables.$prefix}accordion-summary-color-border: var(
195
294
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
196
295
  );
197
296
 
198
- --#{variables.$prefix}color-accordion-details-fore: var(
297
+ --#{variables.$prefix}accordion-details-color-fore: var(
199
298
  --#{variables.$prefix}color-#{$colorName}-accordion-details-fore
200
299
  );
201
- --#{variables.$prefix}color-accordion-details-back: var(
300
+ --#{variables.$prefix}accordion-details-color-back: var(
202
301
  --#{variables.$prefix}color-#{$colorName}-accordion-details-back
203
302
  );
204
- --#{variables.$prefix}color-accordion-details-border: var(
303
+ --#{variables.$prefix}accordion-details-color-border: var(
205
304
  --#{variables.$prefix}color-#{$colorName}-accordion-details-border
206
305
  );
207
306
 
208
307
  //#region focus
209
- --#{variables.$prefix}color-accordion-summary-focus-back: var(
308
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
210
309
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
211
310
  );
212
- --#{variables.$prefix}color-accordion-summary-focus-border: var(
311
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
213
312
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
214
313
  );
215
314
  //#endregion focus
216
315
 
217
316
  //#region hover
218
- --#{variables.$prefix}color-accordion-summary-hover-back: var(
317
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
219
318
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
220
319
  );
221
- --#{variables.$prefix}color-accordion-summary-hover-border: var(
320
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
222
321
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
223
322
  );
224
323
  //#endregion hover
225
324
 
226
325
  //#region active
227
- --#{variables.$prefix}color-accordion-summary-active-back: var(
326
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
228
327
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
229
328
  );
230
- --#{variables.$prefix}color-accordion-summary-active-border: var(
329
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
231
330
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
232
331
  );
233
332
  //#endregion active
234
333
 
235
334
  //#region disabled
236
- --#{variables.$prefix}color-accordion-summary-disabled-back: var(
335
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
237
336
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
238
337
  );
239
- --#{variables.$prefix}color-accordion-summary-disabled-border: var(
338
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
240
339
  --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
241
340
  );
242
341
  //#endregion disabled