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/src/components/button.scss CHANGED
@@ -4,60 +4,60 @@
4
4
 
5
5
  :where(.button) {
6
6
  //#region local css variables
7
- --#{variables.$prefix}color-button-fore: var(
7
+ --#{variables.$prefix}button-color-fore: var(
8
8
  --#{variables.$prefix}color-default-button-fore
9
9
  );
10
- --#{variables.$prefix}color-button-back: var(
10
+ --#{variables.$prefix}button-color-back: var(
11
11
  --#{variables.$prefix}color-default-button-back
12
12
  );
13
- --#{variables.$prefix}color-button-border: var(
13
+ --#{variables.$prefix}button-color-border: var(
14
14
  --#{variables.$prefix}color-default-button-border
15
15
  );
16
16
 
17
17
  //#region focus
18
- --#{variables.$prefix}color-button-focus-fore: var(
18
+ --#{variables.$prefix}button-focus-color-fore: var(
19
19
  --#{variables.$prefix}color-default-button-focus-fore
20
20
  );
21
- --#{variables.$prefix}color-button-focus-back: var(
21
+ --#{variables.$prefix}button-focus-color-back: var(
22
22
  --#{variables.$prefix}color-default-button-focus-back
23
23
  );
24
- --#{variables.$prefix}color-button-focus-border: var(
24
+ --#{variables.$prefix}button-focus-color-border: var(
25
25
  --#{variables.$prefix}color-default-button-focus-border
26
26
  );
27
27
  //#endregion focus
28
28
 
29
29
  //#region hover
30
- --#{variables.$prefix}color-button-hover-fore: var(
30
+ --#{variables.$prefix}button-hover-color-fore: var(
31
31
  --#{variables.$prefix}color-default-button-hover-fore
32
32
  );
33
- --#{variables.$prefix}color-button-hover-back: var(
33
+ --#{variables.$prefix}button-hover-color-back: var(
34
34
  --#{variables.$prefix}color-default-button-hover-back
35
35
  );
36
- --#{variables.$prefix}color-button-hover-border: var(
36
+ --#{variables.$prefix}button-hover-color-border: var(
37
37
  --#{variables.$prefix}color-default-button-hover-border
38
38
  );
39
39
  //#endregion hover
40
40
 
41
41
  //#region active
42
- --#{variables.$prefix}color-button-active-fore: var(
42
+ --#{variables.$prefix}button-active-color-fore: var(
43
43
  --#{variables.$prefix}color-default-button-active-fore
44
44
  );
45
- --#{variables.$prefix}color-button-active-back: var(
45
+ --#{variables.$prefix}button-active-color-back: var(
46
46
  --#{variables.$prefix}color-default-button-active-back
47
47
  );
48
- --#{variables.$prefix}color-button-active-border: var(
48
+ --#{variables.$prefix}button-active-color-border: var(
49
49
  --#{variables.$prefix}color-default-button-active-border
50
50
  );
51
51
  //#endregion active
52
52
 
53
53
  //#region disabled
54
- --#{variables.$prefix}color-button-disabled-fore: var(
54
+ --#{variables.$prefix}button-disabled-color-fore: var(
55
55
  --#{variables.$prefix}color-default-button-disabled-fore
56
56
  );
57
- --#{variables.$prefix}color-button-disabled-back: var(
57
+ --#{variables.$prefix}button-disabled-color-back: var(
58
58
  --#{variables.$prefix}color-default-button-disabled-back
59
59
  );
60
- --#{variables.$prefix}color-button-disabled-border: var(
60
+ --#{variables.$prefix}button-disabled-color-border: var(
61
61
  --#{variables.$prefix}color-default-button-disabled-border
62
62
  );
63
63
  //#endregion disabled
@@ -65,11 +65,11 @@
65
65
  //#endregion local css variables
66
66
 
67
67
  @include mixins.element();
68
- background-color: var(--#{variables.$prefix}color-button-back);
69
- border-color: var(--#{variables.$prefix}color-button-border);
68
+ background-color: var(--#{variables.$prefix}button-color-back);
69
+ border-color: var(--#{variables.$prefix}button-color-border);
70
70
  border-radius: var(--#{variables.$prefix}border-radius-medium);
71
71
  border-style: solid;
72
- color: var(--#{variables.$prefix}color-button-fore);
72
+ color: var(--#{variables.$prefix}button-color-fore);
73
73
  cursor: pointer;
74
74
  display: inline-block;
75
75
  height: auto;
@@ -115,39 +115,39 @@
115
115
  &.is-focused {
116
116
  outline: none;
117
117
  background-color: var(
118
- --#{variables.$prefix}color-button-focus-back
118
+ --#{variables.$prefix}button-focus-color-back
119
119
  );
120
- border-color: var(--#{variables.$prefix}color-button-focus-border);
121
- color: var(--#{variables.$prefix}color-button-focus-fore);
120
+ border-color: var(--#{variables.$prefix}button-focus-color-border);
121
+ color: var(--#{variables.$prefix}button-focus-color-fore);
122
122
  }
123
123
  &:hover,
124
124
  &.is-hovered,
125
125
  &.is-hovered {
126
126
  outline: none;
127
127
  background-color: var(
128
- --#{variables.$prefix}color-button-hover-back
128
+ --#{variables.$prefix}button-hover-color-back
129
129
  );
130
- border-color: var(--#{variables.$prefix}color-button-hover-border);
131
- color: var(--#{variables.$prefix}color-button-hover-fore);
130
+ border-color: var(--#{variables.$prefix}button-hover-color-border);
131
+ color: var(--#{variables.$prefix}button-hover-color-fore);
132
132
  }
133
133
  &:active,
134
134
  &.is-active {
135
135
  background-color: var(
136
- --#{variables.$prefix}color-button-active-back
136
+ --#{variables.$prefix}button-active-color-back
137
137
  );
138
- border-color: var(--#{variables.$prefix}color-button-active-border);
139
- color: var(--#{variables.$prefix}color-button-active-fore);
138
+ border-color: var(--#{variables.$prefix}button-active-color-border);
139
+ color: var(--#{variables.$prefix}button-active-color-fore);
140
140
  }
141
141
  &[disabled],
142
142
  fieldset[disabled],
143
143
  &.is-disabled {
144
144
  background-color: var(
145
- --#{variables.$prefix}color-button-disabled-back
145
+ --#{variables.$prefix}button-disabled-color-back
146
146
  );
147
147
  border-color: var(
148
- --#{variables.$prefix}color-button-disabled-border
148
+ --#{variables.$prefix}button-disabled-color-border
149
149
  );
150
- color: var(--#{variables.$prefix}color-button-disabled-fore);
150
+ color: var(--#{variables.$prefix}button-disabled-color-fore);
151
151
  }
152
152
 
153
153
  @if (not variables.$is-skelton) {
@@ -155,60 +155,125 @@
155
155
  $colorName: map.get($color, "name");
156
156
  &.is-#{$colorName} {
157
157
  //#region local css variables
158
- --#{variables.$prefix}color-button-fore: var(
158
+ --#{variables.$prefix}button-color-fore: var(
159
159
  --#{variables.$prefix}color-#{$colorName}-button-fore
160
160
  );
161
- --#{variables.$prefix}color-button-back: var(
161
+ --#{variables.$prefix}button-color-back: var(
162
162
  --#{variables.$prefix}color-#{$colorName}-button-back
163
163
  );
164
- --#{variables.$prefix}color-button-border: var(
164
+ --#{variables.$prefix}button-color-border: var(
165
165
  --#{variables.$prefix}color-#{$colorName}-button-border
166
166
  );
167
167
 
168
168
  //#region focus
169
- --#{variables.$prefix}color-button-focus-fore: var(
169
+ --#{variables.$prefix}button-focus-color-fore: var(
170
170
  --#{variables.$prefix}color-#{$colorName}-button-focus-fore
171
171
  );
172
- --#{variables.$prefix}color-button-focus-back: var(
172
+ --#{variables.$prefix}button-focus-color-back: var(
173
173
  --#{variables.$prefix}color-#{$colorName}-button-focus-back
174
174
  );
175
- --#{variables.$prefix}color-button-focus-border: var(
175
+ --#{variables.$prefix}button-focus-color-border: var(
176
176
  --#{variables.$prefix}color-#{$colorName}-button-focus-border
177
177
  );
178
178
  //#endregion focus
179
179
 
180
180
  //#region hover
181
- --#{variables.$prefix}color-button-hover-fore: var(
181
+ --#{variables.$prefix}button-hover-color-fore: var(
182
182
  --#{variables.$prefix}color-#{$colorName}-button-hover-fore
183
183
  );
184
- --#{variables.$prefix}color-button-hover-back: var(
184
+ --#{variables.$prefix}button-hover-color-back: var(
185
185
  --#{variables.$prefix}color-#{$colorName}-button-hover-back
186
186
  );
187
- --#{variables.$prefix}color-button-hover-border: var(
187
+ --#{variables.$prefix}button-hover-color-border: var(
188
188
  --#{variables.$prefix}color-#{$colorName}-button-hover-border
189
189
  );
190
190
  //#endregion hover
191
191
 
192
192
  //#region active
193
- --#{variables.$prefix}color-button-active-fore: var(
193
+ --#{variables.$prefix}button-active-color-fore: var(
194
194
  --#{variables.$prefix}color-#{$colorName}-button-active-fore
195
195
  );
196
- --#{variables.$prefix}color-button-active-back: var(
196
+ --#{variables.$prefix}button-active-color-back: var(
197
197
  --#{variables.$prefix}color-#{$colorName}-button-active-back
198
198
  );
199
- --#{variables.$prefix}color-button-active-border: var(
199
+ --#{variables.$prefix}button-active-color-border: var(
200
200
  --#{variables.$prefix}color-#{$colorName}-button-active-border
201
201
  );
202
202
  //#endregion active
203
203
 
204
204
  //#region disabled
205
- --#{variables.$prefix}color-button-disabled-fore: var(
205
+ --#{variables.$prefix}button-disabled-color-fore: var(
206
206
  --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
207
207
  );
208
- --#{variables.$prefix}color-button-disabled-back: var(
208
+ --#{variables.$prefix}button-disabled-color-back: var(
209
209
  --#{variables.$prefix}color-#{$colorName}-button-disabled-back
210
210
  );
211
- --#{variables.$prefix}color-button-disabled-border: var(
211
+ --#{variables.$prefix}button-disabled-color-border: var(
212
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-border
213
+ );
214
+ //#endregion disabled
215
+
216
+ //#endregion local css variables
217
+ }
218
+ }
219
+ @each $semanticColor in variables.$semanticColors {
220
+ $colorName: map.get($semanticColor, "name");
221
+ &.is-#{$colorName} {
222
+ //#region local css variables
223
+ --#{variables.$prefix}button-color-fore: var(
224
+ --#{variables.$prefix}color-#{$colorName}-button-fore
225
+ );
226
+ --#{variables.$prefix}button-color-back: var(
227
+ --#{variables.$prefix}color-#{$colorName}-button-back
228
+ );
229
+ --#{variables.$prefix}button-color-border: var(
230
+ --#{variables.$prefix}color-#{$colorName}-button-border
231
+ );
232
+
233
+ //#region focus
234
+ --#{variables.$prefix}button-focus-color-fore: var(
235
+ --#{variables.$prefix}color-#{$colorName}-button-focus-fore
236
+ );
237
+ --#{variables.$prefix}button-focus-color-back: var(
238
+ --#{variables.$prefix}color-#{$colorName}-button-focus-back
239
+ );
240
+ --#{variables.$prefix}button-focus-color-border: var(
241
+ --#{variables.$prefix}color-#{$colorName}-button-focus-border
242
+ );
243
+ //#endregion focus
244
+
245
+ //#region hover
246
+ --#{variables.$prefix}button-hover-color-fore: var(
247
+ --#{variables.$prefix}color-#{$colorName}-button-hover-fore
248
+ );
249
+ --#{variables.$prefix}button-hover-color-back: var(
250
+ --#{variables.$prefix}color-#{$colorName}-button-hover-back
251
+ );
252
+ --#{variables.$prefix}button-hover-color-border: var(
253
+ --#{variables.$prefix}color-#{$colorName}-button-hover-border
254
+ );
255
+ //#endregion hover
256
+
257
+ //#region active
258
+ --#{variables.$prefix}button-active-color-fore: var(
259
+ --#{variables.$prefix}color-#{$colorName}-button-active-fore
260
+ );
261
+ --#{variables.$prefix}button-active-color-back: var(
262
+ --#{variables.$prefix}color-#{$colorName}-button-active-back
263
+ );
264
+ --#{variables.$prefix}button-active-color-border: var(
265
+ --#{variables.$prefix}color-#{$colorName}-button-active-border
266
+ );
267
+ //#endregion active
268
+
269
+ //#region disabled
270
+ --#{variables.$prefix}button-disabled-color-fore: var(
271
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
272
+ );
273
+ --#{variables.$prefix}button-disabled-color-back: var(
274
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-back
275
+ );
276
+ --#{variables.$prefix}button-disabled-color-border: var(
212
277
  --#{variables.$prefix}color-#{$colorName}-button-disabled-border
213
278
  );
214
279
  //#endregion disabled
package/src/components/card.scss CHANGED
@@ -4,70 +4,93 @@
4
4
 
5
5
  :where(.card) {
6
6
  //#region local css variables
7
- --#{variables.$prefix}color-card-fore: var(
7
+ --#{variables.$prefix}card-color-fore: var(
8
8
  --#{variables.$prefix}color-default-card-fore
9
9
  );
10
- --#{variables.$prefix}color-card-back: var(
10
+ --#{variables.$prefix}card-color-back: var(
11
11
  --#{variables.$prefix}color-default-card-back
12
12
  );
13
- --#{variables.$prefix}color-card-border: var(
13
+ --#{variables.$prefix}card-color-border: var(
14
14
  --#{variables.$prefix}color-default-card-border
15
15
  );
16
- --#{variables.$prefix}color-card-shadow: var(
16
+ --#{variables.$prefix}card-color-shadow: var(
17
17
  --#{variables.$prefix}color-default-card-shadow
18
18
  );
19
19
 
20
- --#{variables.$prefix}color-card-header-fore: var(
20
+ --#{variables.$prefix}card-color-selection-fore: var(
21
+ --#{variables.$prefix}color-default-card-selection-fore,
22
+ var(--#{variables.$prefix}color-default-selection-fore)
23
+ );
24
+ --#{variables.$prefix}card-color-selection-back: var(
25
+ --#{variables.$prefix}color-default-card-selection-back,
26
+ var(--#{variables.$prefix}color-default-selection-back)
27
+ );
28
+
29
+ --#{variables.$prefix}card-header-color-fore: var(
21
30
  --#{variables.$prefix}color-default-card-header-fore
22
31
  );
23
- --#{variables.$prefix}color-card-header-back: var(
32
+ --#{variables.$prefix}card-header-color-back: var(
24
33
  --#{variables.$prefix}color-default-card-header-back
25
34
  );
26
- --#{variables.$prefix}color-card-header-border: var(
35
+ --#{variables.$prefix}card-header-color-border: var(
27
36
  --#{variables.$prefix}color-default-card-header-border
28
37
  );
29
38
 
30
- --#{variables.$prefix}color-card-body-fore: var(
39
+ --#{variables.$prefix}card-body-color-fore: var(
31
40
  --#{variables.$prefix}color-default-card-body-fore
32
41
  );
33
- --#{variables.$prefix}color-card-body-back: var(
42
+ --#{variables.$prefix}card-body-color-back: var(
34
43
  --#{variables.$prefix}color-default-card-body-back
35
44
  );
36
- --#{variables.$prefix}color-card-body-border: var(
45
+ --#{variables.$prefix}card-body-color-border: var(
37
46
  --#{variables.$prefix}color-default-card-body-border
38
47
  );
39
48
 
40
- --#{variables.$prefix}color-card-footer-fore: var(
49
+ --#{variables.$prefix}card-color-footer-fore: var(
41
50
  --#{variables.$prefix}color-default-card-body-fore
42
51
  );
43
- --#{variables.$prefix}color-card-footer-back: var(
52
+ --#{variables.$prefix}card-color-footer-back: var(
44
53
  --#{variables.$prefix}color-default-card-body-back
45
54
  );
46
- --#{variables.$prefix}color-card-footer-border: var(
55
+ --#{variables.$prefix}card-color-footer-border: var(
47
56
  --#{variables.$prefix}color-default-card-body-border
48
57
  );
58
+
59
+ --#{variables.$prefix}card-border-width: var(
60
+ --#{variables.$prefix}border-width-thin
61
+ );
62
+ --#{variables.$prefix}card-border-radius: var(
63
+ --#{variables.$prefix}border-radius-medium
64
+ );
49
65
  //#endregion local css variables
50
66
 
51
67
  @include mixins.element();
52
68
  display: block;
53
- background-color: var(--#{variables.$prefix}color-card-back);
69
+ background-color: var(--#{variables.$prefix}card-color-back);
54
70
  border-radius: calc(
55
- var(--#{variables.$prefix}border-radius-medium) +
56
- var(--#{variables.$prefix}border-width-thin)
71
+ var(--#{variables.$prefix}card-border-radius) +
72
+ var(--#{variables.$prefix}card-border-width)
57
73
  );
58
- border-color: var(--#{variables.$prefix}color-card-border);
74
+ border-color: var(--#{variables.$prefix}card-color-border);
59
75
  border-style: solid;
60
- border-width: var(--#{variables.$prefix}border-width-thin);
61
- color: var(--#{variables.$prefix}color-card-fore);
76
+ border-width: var(--#{variables.$prefix}card-border-width);
77
+ color: var(--#{variables.$prefix}card-color-fore);
78
+
62
79
  &.has-shadow {
63
- box-shadow: 0 0.5rem 0.5rem var(--#{variables.$prefix}color-card-shadow);
80
+ box-shadow: 0 0.5rem 0.5rem var(--#{variables.$prefix}card-color-shadow);
64
81
  }
82
+
83
+ &::selection {
84
+ color: var(--#{variables.$prefix}card-color-selection-fore);
85
+ background-color: var(--#{variables.$prefix}card-color-selection-back);
86
+ }
87
+
65
88
  >.card-header {
66
89
  @include mixins.element();
67
- background-color: var(--#{variables.$prefix}color-card-header-back);
68
- border-radius: var(--#{variables.$prefix}border-radius-medium)
69
- var(--#{variables.$prefix}border-radius-medium) 0 0;
70
- color: var(--#{variables.$prefix}color-card-header-fore);
90
+ background-color: var(--#{variables.$prefix}card-header-color-back);
91
+ border-radius: var(--#{variables.$prefix}card-border-radius)
92
+ var(--#{variables.$prefix}card-border-radius) 0 0;
93
+ color: var(--#{variables.$prefix}card-header-color-fore);
71
94
  padding: 0.5rem;
72
95
  display: block;
73
96
  font-size: var(--#{variables.$prefix}font-size-medium);
@@ -75,28 +98,28 @@
75
98
  }
76
99
  >.card-body {
77
100
  @include mixins.element();
78
- background-color: var(--#{variables.$prefix}color-card-body-back);
79
- color: var(--#{variables.$prefix}color-card-body-fore);
101
+ background-color: var(--#{variables.$prefix}card-body-color-back);
102
+ color: var(--#{variables.$prefix}card-body-color-fore);
80
103
  padding: 0.5rem;
81
104
  display: block;
82
105
  &:first-child {
83
- border-radius: var(--#{variables.$prefix}border-radius-medium)
84
- var(--#{variables.$prefix}border-radius-medium) 0 0;
106
+ border-radius: var(--#{variables.$prefix}card-border-radius)
107
+ var(--#{variables.$prefix}card-border-radius) 0 0;
85
108
  }
86
109
  &:last-child {
87
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
88
- var(--#{variables.$prefix}border-radius-medium);
110
+ border-radius: 0 0 var(--#{variables.$prefix}card-border-radius)
111
+ var(--#{variables.$prefix}card-border-radius);
89
112
  }
90
113
  &:only-child {
91
- border-radius: var(--#{variables.$prefix}border-radius-medium);
114
+ border-radius: var(--#{variables.$prefix}card-border-radius);
92
115
  }
93
116
  }
94
117
  >.card-footer {
95
118
  @include mixins.element();
96
- background-color: var(--#{variables.$prefix}color-card-footer-back);
97
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
98
- var(--#{variables.$prefix}border-radius-medium);
99
- color: var(--#{variables.$prefix}color-card-footer-fore);
119
+ background-color: var(--#{variables.$prefix}card-color-footer-back);
120
+ border-radius: 0 0 var(--#{variables.$prefix}card-border-radius)
121
+ var(--#{variables.$prefix}card-border-radius);
122
+ color: var(--#{variables.$prefix}card-color-footer-fore);
100
123
  padding: 0.5rem;
101
124
  display: block;
102
125
  }
@@ -106,46 +129,113 @@
106
129
  $colorName: map.get($color, "name");
107
130
  &.is-#{$colorName} {
108
131
  //#region local css variables
109
- --#{variables.$prefix}color-card-fore: var(
132
+ --#{variables.$prefix}card-color-fore: var(
133
+ --#{variables.$prefix}color-#{$colorName}-card-fore
134
+ );
135
+ --#{variables.$prefix}card-color-back: var(
136
+ --#{variables.$prefix}color-#{$colorName}-card-back
137
+ );
138
+ --#{variables.$prefix}card-color-border: var(
139
+ --#{variables.$prefix}color-#{$colorName}-card-border
140
+ );
141
+ --#{variables.$prefix}card-color-shadow: var(
142
+ --#{variables.$prefix}color-#{$colorName}-card-shadow
143
+ );
144
+
145
+ --#{variables.$prefix}card-color-selection-fore: var(
146
+ --#{variables.$prefix}color-#{$colorName}-card-selection-fore,
147
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
148
+ );
149
+ --#{variables.$prefix}card-color-selection-back: var(
150
+ --#{variables.$prefix}color-#{$colorName}-card-selection-back,
151
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
152
+ );
153
+
154
+ --#{variables.$prefix}card-header-color-fore: var(
155
+ --#{variables.$prefix}color-#{$colorName}-card-header-fore
156
+ );
157
+ --#{variables.$prefix}card-header-color-back: var(
158
+ --#{variables.$prefix}color-#{$colorName}-card-header-back
159
+ );
160
+ --#{variables.$prefix}card-header-color-border: var(
161
+ --#{variables.$prefix}color-#{$colorName}-card-header-border
162
+ );
163
+
164
+ --#{variables.$prefix}card-body-color-fore: var(
165
+ --#{variables.$prefix}color-#{$colorName}-card-body-fore
166
+ );
167
+ --#{variables.$prefix}card-body-color-back: var(
168
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
169
+ );
170
+ --#{variables.$prefix}card-body-color-border: var(
171
+ --#{variables.$prefix}color-#{$colorName}-card-body-border
172
+ );
173
+
174
+ --#{variables.$prefix}card-color-footer-fore: var(
175
+ --#{variables.$prefix}color-#{$colorName}-card-body-fore
176
+ );
177
+ --#{variables.$prefix}card-color-footer-back: var(
178
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
179
+ );
180
+ --#{variables.$prefix}card-color-footer-border: var(
181
+ --#{variables.$prefix}color-#{$colorName}-card-body-border
182
+ );
183
+ //#endregion local css variables
184
+ }
185
+ }
186
+ @each $semanticColor in variables.$semanticColors {
187
+ $colorName: map.get($semanticColor, "name");
188
+ &.is-#{$colorName} {
189
+ //#region local css variables
190
+ --#{variables.$prefix}card-color-fore: var(
110
191
  --#{variables.$prefix}color-#{$colorName}-card-fore
111
192
  );
112
- --#{variables.$prefix}color-card-back: var(
193
+ --#{variables.$prefix}card-color-back: var(
113
194
  --#{variables.$prefix}color-#{$colorName}-card-back
114
195
  );
115
- --#{variables.$prefix}color-card-border: var(
196
+ --#{variables.$prefix}card-color-border: var(
116
197
  --#{variables.$prefix}color-#{$colorName}-card-border
117
198
  );
118
- --#{variables.$prefix}color-card-shadow: var(
199
+ --#{variables.$prefix}card-color-shadow: var(
119
200
  --#{variables.$prefix}color-#{$colorName}-card-shadow
120
201
  );
121
202
 
122
- --#{variables.$prefix}color-card-header-fore: var(
203
+ --#{variables.$prefix}card-color-selection-fore: var(
204
+ --#{variables.$prefix}color-#{$colorName}-card-selection-fore,
205
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
206
+ );
207
+ --#{variables.$prefix}card-color-selection-back: var(
208
+ --#{variables.$prefix}color-#{$colorName}-card-selection-back,
209
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
210
+ );
211
+
212
+ --#{variables.$prefix}card-header-color-fore: var(
123
213
  --#{variables.$prefix}color-#{$colorName}-card-header-fore
124
214
  );
125
- --#{variables.$prefix}color-card-header-back: var(
215
+ --#{variables.$prefix}card-header-color-back: var(
126
216
  --#{variables.$prefix}color-#{$colorName}-card-header-back
127
217
  );
128
- --#{variables.$prefix}color-card-header-border: var(
218
+ --#{variables.$prefix}card-header-color-border: var(
129
219
  --#{variables.$prefix}color-#{$colorName}-card-header-border
130
220
  );
131
221
 
132
- --#{variables.$prefix}color-card-body-fore: var(
222
+ --#{variables.$prefix}card-body-color-fore: var(
133
223
  --#{variables.$prefix}color-#{$colorName}-card-body-fore
134
224
  );
135
- --#{variables.$prefix}color-card-body-back: var(
225
+ --#{variables.$prefix}card-body-color-back: var(
136
226
  --#{variables.$prefix}color-#{$colorName}-card-body-back
137
227
  );
138
- --#{variables.$prefix}color-card-body-border: var(
228
+ --#{variables.$prefix}card-body-color-border: var(
139
229
  --#{variables.$prefix}color-#{$colorName}-card-body-border
140
230
  );
141
231
 
142
- --#{variables.$prefix}color-card-footer-fore: var(
232
+ --#{variables.$prefix}card-color-footer-fore: var(
143
233
  --#{variables.$prefix}color-#{$colorName}-card-body-fore
144
234
  );
145
- --#{variables.$prefix}color-card-footer-back: var(
235
+ --#{variables.$prefix}card-color-footer-back: var(
146
236
  --#{variables.$prefix}color-#{$colorName}-card-body-back
147
237
  );
148
- --#{variables.$prefix}color-card-footer-border: var(
238
+ --#{variables.$prefix}card-color-footer-border: var(
149
239
  --#{variables.$prefix}color-#{$colorName}-card-body-border
150
240
  );
151
241
  //#endregion local css variables