noctemyth 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/dist/css/noctemyth-skelton.css +3126 -5336
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3126 -5336
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +38455 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +38455 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +22250 -37070
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5326 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/backgrounds/dot.scss +39 -15
  15. package/src/backgrounds/gingham.scss +35 -18
  16. package/src/backgrounds/rhombus.scss +58 -19
  17. package/src/backgrounds/stripe.scss +30 -9
  18. package/src/backgrounds/zigzag.scss +43 -18
  19. package/src/base/dub.scss +15 -2
  20. package/src/base/element.scss +1 -1
  21. package/src/components/accordion.scss +254 -88
  22. package/src/components/badge.scss +215 -63
  23. package/src/components/blockquote.scss +74 -25
  24. package/src/components/breadcrumbs.scss +66 -15
  25. package/src/components/button.scss +204 -76
  26. package/src/components/card.scss +204 -47
  27. package/src/components/dialogue.scss +209 -140
  28. package/src/components/div.scss +1 -1
  29. package/src/components/footer.scss +28 -5
  30. package/src/components/hamburger.scss +89 -50
  31. package/src/components/header.scss +71 -5
  32. package/src/components/heading.scss +6 -6
  33. package/src/components/image.scss +1 -0
  34. package/src/components/input.scss +141 -69
  35. package/src/components/label.scss +51 -3
  36. package/src/components/link.scss +72 -9
  37. package/src/components/list.scss +2 -2
  38. package/src/components/loader.scss +18 -7
  39. package/src/components/main.scss +1 -1
  40. package/src/components/message.scss +142 -23
  41. package/src/components/modal.scss +26 -7
  42. package/src/components/nav.scss +655 -279
  43. package/src/components/paragraph.scss +1 -1
  44. package/src/components/progress.scss +40 -15
  45. package/src/components/section.scss +1 -1
  46. package/src/components/span.scss +1 -1
  47. package/src/css-variables/color.scss +582 -465
  48. package/src/css-variables/components/dialogue.scss +2 -2
  49. package/src/css-variables/miscellaneous.scss +1 -1
  50. package/src/functions/color.scss +13 -0
  51. package/src/functions/index.scss +1 -0
  52. package/src/functions/string.scss +12 -0
  53. package/src/layouts/centering.scss +1 -1
  54. package/src/layouts/columns.scss +3 -2
  55. package/src/layouts/container.scss +1 -1
  56. package/src/mixins/color.scss +0 -32
  57. package/src/mixins/element.scss +2 -2
  58. package/src/mixins/responsive.scss +2 -1
  59. package/src/utilities/color.scss +2 -6
  60. package/src/variables/color.scss +949 -909
  61. package/src/variables/components/dialogue.scss +2 -2
  62. package/src/variables/miscellaneous.scss +1 -1
package/src/components/button.scss CHANGED
@@ -2,13 +2,74 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .button {
5
+ :where(.button) {
6
+ //#region local css variables
7
+ --#{variables.$prefix}button-color-fore: var(
8
+ --#{variables.$prefix}color-default-button-fore
9
+ );
10
+ --#{variables.$prefix}button-color-back: var(
11
+ --#{variables.$prefix}color-default-button-back
12
+ );
13
+ --#{variables.$prefix}button-color-border: var(
14
+ --#{variables.$prefix}color-default-button-border
15
+ );
16
+
17
+ //#region focus
18
+ --#{variables.$prefix}button-focus-color-fore: var(
19
+ --#{variables.$prefix}color-default-button-focus-fore
20
+ );
21
+ --#{variables.$prefix}button-focus-color-back: var(
22
+ --#{variables.$prefix}color-default-button-focus-back
23
+ );
24
+ --#{variables.$prefix}button-focus-color-border: var(
25
+ --#{variables.$prefix}color-default-button-focus-border
26
+ );
27
+ //#endregion focus
28
+
29
+ //#region hover
30
+ --#{variables.$prefix}button-hover-color-fore: var(
31
+ --#{variables.$prefix}color-default-button-hover-fore
32
+ );
33
+ --#{variables.$prefix}button-hover-color-back: var(
34
+ --#{variables.$prefix}color-default-button-hover-back
35
+ );
36
+ --#{variables.$prefix}button-hover-color-border: var(
37
+ --#{variables.$prefix}color-default-button-hover-border
38
+ );
39
+ //#endregion hover
40
+
41
+ //#region active
42
+ --#{variables.$prefix}button-active-color-fore: var(
43
+ --#{variables.$prefix}color-default-button-active-fore
44
+ );
45
+ --#{variables.$prefix}button-active-color-back: var(
46
+ --#{variables.$prefix}color-default-button-active-back
47
+ );
48
+ --#{variables.$prefix}button-active-color-border: var(
49
+ --#{variables.$prefix}color-default-button-active-border
50
+ );
51
+ //#endregion active
52
+
53
+ //#region disabled
54
+ --#{variables.$prefix}button-disabled-color-fore: var(
55
+ --#{variables.$prefix}color-default-button-disabled-fore
56
+ );
57
+ --#{variables.$prefix}button-disabled-color-back: var(
58
+ --#{variables.$prefix}color-default-button-disabled-back
59
+ );
60
+ --#{variables.$prefix}button-disabled-color-border: var(
61
+ --#{variables.$prefix}color-default-button-disabled-border
62
+ );
63
+ //#endregion disabled
64
+
65
+ //#endregion local css variables
66
+
6
67
  @include mixins.element();
7
- background-color: var(--#{variables.$prefix}color-default-button-back);
8
- border-color: var(--#{variables.$prefix}color-default-button-border);
68
+ background-color: var(--#{variables.$prefix}button-color-back);
69
+ border-color: var(--#{variables.$prefix}button-color-border);
9
70
  border-radius: var(--#{variables.$prefix}border-radius-medium);
10
71
  border-style: solid;
11
- color: var(--#{variables.$prefix}color-default-button-fore);
72
+ color: var(--#{variables.$prefix}button-color-fore);
12
73
  cursor: pointer;
13
74
  display: inline-block;
14
75
  height: auto;
@@ -49,108 +110,175 @@
49
110
  width: 5rem;
50
111
  }
51
112
  }
52
- &:hover,
53
- &.is-hovered,
54
- &.is-hovered {
113
+ &:focus,
114
+ &.is-focus,
115
+ &.is-focused {
55
116
  outline: none;
56
117
  background-color: var(
57
- --#{variables.$prefix}color-default-button-hover-back
118
+ --#{variables.$prefix}button-focus-color-back
58
119
  );
59
- border-color: var(--#{variables.$prefix}color-default-button-hover-border);
60
- color: var(--#{variables.$prefix}color-default-button-hover-fore);
120
+ border-color: var(--#{variables.$prefix}button-focus-color-border);
121
+ color: var(--#{variables.$prefix}button-focus-color-fore);
61
122
  }
62
- &:focus,
63
- &.is-focus,
64
- &.is-focused {
123
+ &:hover,
124
+ &.is-hovered,
125
+ &.is-hovered {
65
126
  outline: none;
66
127
  background-color: var(
67
- --#{variables.$prefix}color-default-button-focus-back
128
+ --#{variables.$prefix}button-hover-color-back
68
129
  );
69
- border-color: var(--#{variables.$prefix}color-default-button-focus-border);
70
- color: var(--#{variables.$prefix}color-default-button-focus-fore);
130
+ border-color: var(--#{variables.$prefix}button-hover-color-border);
131
+ color: var(--#{variables.$prefix}button-hover-color-fore);
71
132
  }
72
133
  &:active,
73
134
  &.is-active {
74
135
  background-color: var(
75
- --#{variables.$prefix}color-default-button-active-back
136
+ --#{variables.$prefix}button-active-color-back
76
137
  );
77
- border-color: var(--#{variables.$prefix}color-default-button-active-border);
78
- color: var(--#{variables.$prefix}color-default-button-active-fore);
138
+ border-color: var(--#{variables.$prefix}button-active-color-border);
139
+ color: var(--#{variables.$prefix}button-active-color-fore);
79
140
  }
80
141
  &[disabled],
81
142
  fieldset[disabled],
82
143
  &.is-disabled {
83
144
  background-color: var(
84
- --#{variables.$prefix}color-default-button-disabled-back
145
+ --#{variables.$prefix}button-disabled-color-back
85
146
  );
86
147
  border-color: var(
87
- --#{variables.$prefix}color-default-button-disabled-border
148
+ --#{variables.$prefix}button-disabled-color-border
88
149
  );
89
- color: var(--#{variables.$prefix}color-default-button-disabled-fore);
150
+ color: var(--#{variables.$prefix}button-disabled-color-fore);
90
151
  }
91
152
 
92
153
  @if (not variables.$is-skelton) {
93
154
  @each $color in variables.$colors {
94
155
  $colorName: map.get($color, "name");
95
156
  &.is-#{$colorName} {
96
- background-color: var(
157
+ //#region local css variables
158
+ --#{variables.$prefix}button-color-fore: var(
159
+ --#{variables.$prefix}color-#{$colorName}-button-fore
160
+ );
161
+ --#{variables.$prefix}button-color-back: var(
97
162
  --#{variables.$prefix}color-#{$colorName}-button-back
98
163
  );
99
- border-color: var(
164
+ --#{variables.$prefix}button-color-border: var(
100
165
  --#{variables.$prefix}color-#{$colorName}-button-border
101
166
  );
102
- color: var(--#{variables.$prefix}color-#{$colorName}-button-fore);
103
- &:focus,
104
- &.is-focus,
105
- &.is-focused {
106
- background-color: var(
107
- --#{variables.$prefix}color-#{$colorName}-button-focus-back
108
- );
109
- border-color: var(
110
- --#{variables.$prefix}color-#{$colorName}-button-focus-border
111
- );
112
- color: var(
113
- --#{variables.$prefix}color-#{$colorName}-button-focus-fore
114
- );
115
- }
116
- &:hover,
117
- &.is-hover,
118
- &.is-hovered {
119
- background-color: var(
120
- --#{variables.$prefix}color-#{$colorName}-button-hover-back
121
- );
122
- border-color: var(
123
- --#{variables.$prefix}color-#{$colorName}-button-hover-border
124
- );
125
- color: var(
126
- --#{variables.$prefix}color-#{$colorName}-button-hover-fore
127
- );
128
- }
129
- &:active,
130
- &.is-active {
131
- background-color: var(
132
- --#{variables.$prefix}color-#{$colorName}-button-active-back
133
- );
134
- border-color: var(
135
- --#{variables.$prefix}color-#{$colorName}-button-active-border
136
- );
137
- color: var(
138
- --#{variables.$prefix}color-#{$colorName}-button-active-fore
139
- );
140
- }
141
- &[disabled],
142
- fieldset[disabled],
143
- &.is-disabled {
144
- background-color: var(
145
- --#{variables.$prefix}color-#{$colorName}-button-disabled-back
146
- );
147
- border-color: var(
148
- --#{variables.$prefix}color-#{$colorName}-button-disabled-border
149
- );
150
- color: var(
151
- --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
152
- );
153
- }
167
+
168
+ //#region focus
169
+ --#{variables.$prefix}button-focus-color-fore: var(
170
+ --#{variables.$prefix}color-#{$colorName}-button-focus-fore
171
+ );
172
+ --#{variables.$prefix}button-focus-color-back: var(
173
+ --#{variables.$prefix}color-#{$colorName}-button-focus-back
174
+ );
175
+ --#{variables.$prefix}button-focus-color-border: var(
176
+ --#{variables.$prefix}color-#{$colorName}-button-focus-border
177
+ );
178
+ //#endregion focus
179
+
180
+ //#region hover
181
+ --#{variables.$prefix}button-hover-color-fore: var(
182
+ --#{variables.$prefix}color-#{$colorName}-button-hover-fore
183
+ );
184
+ --#{variables.$prefix}button-hover-color-back: var(
185
+ --#{variables.$prefix}color-#{$colorName}-button-hover-back
186
+ );
187
+ --#{variables.$prefix}button-hover-color-border: var(
188
+ --#{variables.$prefix}color-#{$colorName}-button-hover-border
189
+ );
190
+ //#endregion hover
191
+
192
+ //#region active
193
+ --#{variables.$prefix}button-active-color-fore: var(
194
+ --#{variables.$prefix}color-#{$colorName}-button-active-fore
195
+ );
196
+ --#{variables.$prefix}button-active-color-back: var(
197
+ --#{variables.$prefix}color-#{$colorName}-button-active-back
198
+ );
199
+ --#{variables.$prefix}button-active-color-border: var(
200
+ --#{variables.$prefix}color-#{$colorName}-button-active-border
201
+ );
202
+ //#endregion active
203
+
204
+ //#region disabled
205
+ --#{variables.$prefix}button-disabled-color-fore: var(
206
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-fore
207
+ );
208
+ --#{variables.$prefix}button-disabled-color-back: var(
209
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-back
210
+ );
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(
277
+ --#{variables.$prefix}color-#{$colorName}-button-disabled-border
278
+ );
279
+ //#endregion disabled
280
+
281
+ //#endregion local css variables
154
282
  }
155
283
  }
156
284
  }
package/src/components/card.scss CHANGED
@@ -2,56 +2,124 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .card {
5
+ :where(.card) {
6
+ //#region local css variables
7
+ --#{variables.$prefix}card-color-fore: var(
8
+ --#{variables.$prefix}color-default-card-fore
9
+ );
10
+ --#{variables.$prefix}card-color-back: var(
11
+ --#{variables.$prefix}color-default-card-back
12
+ );
13
+ --#{variables.$prefix}card-color-border: var(
14
+ --#{variables.$prefix}color-default-card-border
15
+ );
16
+ --#{variables.$prefix}card-color-shadow: var(
17
+ --#{variables.$prefix}color-default-card-shadow
18
+ );
19
+
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(
30
+ --#{variables.$prefix}color-default-card-header-fore
31
+ );
32
+ --#{variables.$prefix}card-header-color-back: var(
33
+ --#{variables.$prefix}color-default-card-header-back
34
+ );
35
+ --#{variables.$prefix}card-header-color-border: var(
36
+ --#{variables.$prefix}color-default-card-header-border
37
+ );
38
+
39
+ --#{variables.$prefix}card-body-color-fore: var(
40
+ --#{variables.$prefix}color-default-card-body-fore
41
+ );
42
+ --#{variables.$prefix}card-body-color-back: var(
43
+ --#{variables.$prefix}color-default-card-body-back
44
+ );
45
+ --#{variables.$prefix}card-body-color-border: var(
46
+ --#{variables.$prefix}color-default-card-body-border
47
+ );
48
+
49
+ --#{variables.$prefix}card-footer-color-fore: var(
50
+ --#{variables.$prefix}color-default-card-footer-fore
51
+ );
52
+ --#{variables.$prefix}card-footer-color-back: var(
53
+ --#{variables.$prefix}color-default-card-footer-back
54
+ );
55
+ --#{variables.$prefix}card-footer-color-border: var(
56
+ --#{variables.$prefix}color-default-card-footer-border
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
+ );
65
+ //#endregion local css variables
66
+
6
67
  @include mixins.element();
7
68
  display: block;
8
- background-color: var(--#{variables.$prefix}color-default-card-back);
69
+ background-color: var(--#{variables.$prefix}card-color-back);
9
70
  border-radius: calc(
10
- var(--#{variables.$prefix}border-radius-medium) +
11
- var(--#{variables.$prefix}border-width-thin)
71
+ var(--#{variables.$prefix}card-border-radius) +
72
+ var(--#{variables.$prefix}card-border-width)
12
73
  );
13
- border-color: var(--#{variables.$prefix}color-default-card-border);
74
+ border-color: var(--#{variables.$prefix}card-color-border);
14
75
  border-style: solid;
15
- border-width: var(--#{variables.$prefix}border-width-thin);
16
- color: var(--#{variables.$prefix}color-default-card-fore);
76
+ border-width: var(--#{variables.$prefix}card-border-width);
77
+ color: var(--#{variables.$prefix}card-color-fore);
78
+
17
79
  &.has-shadow {
18
- 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);
81
+ }
82
+
83
+ &::selection {
84
+ color: var(--#{variables.$prefix}card-color-selection-fore);
85
+ background-color: var(--#{variables.$prefix}card-color-selection-back);
19
86
  }
20
- >.card-header {
87
+
88
+ > .card-header {
21
89
  @include mixins.element();
22
- background-color: var(--#{variables.$prefix}color-default-card-header-back);
23
- border-radius: var(--#{variables.$prefix}border-radius-medium)
24
- var(--#{variables.$prefix}border-radius-medium) 0 0;
25
- color: var(--#{variables.$prefix}color-default-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);
26
94
  padding: 0.5rem;
27
95
  display: block;
28
96
  font-size: var(--#{variables.$prefix}font-size-medium);
29
97
  font-weight: var(--#{variables.$prefix}font-weight-semibold);
30
98
  }
31
- >.card-body {
99
+ > .card-body {
32
100
  @include mixins.element();
33
- background-color: var(--#{variables.$prefix}color-default-card-body-back);
34
- color: var(--#{variables.$prefix}color-default-card-body-fore);
101
+ background-color: var(--#{variables.$prefix}card-body-color-back);
102
+ color: var(--#{variables.$prefix}card-body-color-fore);
35
103
  padding: 0.5rem;
36
104
  display: block;
37
105
  &:first-child {
38
- border-radius: var(--#{variables.$prefix}border-radius-medium)
39
- 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;
40
108
  }
41
109
  &:last-child {
42
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
43
- var(--#{variables.$prefix}border-radius-medium);
110
+ border-radius: 0 0 var(--#{variables.$prefix}card-border-radius)
111
+ var(--#{variables.$prefix}card-border-radius);
44
112
  }
45
113
  &:only-child {
46
- border-radius: var(--#{variables.$prefix}border-radius-medium);
114
+ border-radius: var(--#{variables.$prefix}card-border-radius);
47
115
  }
48
116
  }
49
- >.card-footer {
117
+ > .card-footer {
50
118
  @include mixins.element();
51
- background-color: var(--#{variables.$prefix}color-default-card-footer-back);
52
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
53
- var(--#{variables.$prefix}border-radius-medium);
54
- color: var(--#{variables.$prefix}color-default-card-footer-fore);
119
+ background-color: var(--#{variables.$prefix}card-footer-color-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-footer-color-fore);
55
123
  padding: 0.5rem;
56
124
  display: block;
57
125
  }
@@ -60,29 +128,118 @@
60
128
  @each $color in variables.$colors {
61
129
  $colorName: map.get($color, "name");
62
130
  &.is-#{$colorName} {
63
- background-color: var(
131
+ //#region local css variables
132
+ --#{variables.$prefix}card-color-fore: var(
133
+ --#{variables.$prefix}color-#{$colorName}-card-fore
134
+ );
135
+ --#{variables.$prefix}card-color-back: var(
64
136
  --#{variables.$prefix}color-#{$colorName}-card-back
65
137
  );
66
- border-color: var(--#{variables.$prefix}color-#{$colorName}-card-border);
67
- color: var(--#{variables.$prefix}color-#{$colorName}-card-fore);
68
- >.card-header {
69
- background-color: var(
70
- --#{variables.$prefix}color-#{$colorName}-card-header-back
71
- );
72
- color: var(--#{variables.$prefix}color-#{$colorName}-card-header-fore);
73
- }
74
- >.card-body {
75
- background-color: var(
76
- --#{variables.$prefix}color-#{$colorName}-card-body-back
77
- );
78
- color: var(--#{variables.$prefix}color-#{$colorName}-card-body-fore);
79
- }
80
- >.card-footer {
81
- background-color: var(
82
- --#{variables.$prefix}color-#{$colorName}-card-footer-back
83
- );
84
- color: var(--#{variables.$prefix}color-#{$colorName}-card-footer-fore);
85
- }
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-footer-color-fore: var(
175
+ --#{variables.$prefix}color-#{$colorName}-card-body-fore
176
+ );
177
+ --#{variables.$prefix}card-footer-color-back: var(
178
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
179
+ );
180
+ --#{variables.$prefix}card-footer-color-border: var(
181
+ --#{variables.$prefix}color-#{$colorName}-card-body-border
182
+ );
183
+ //#endregion local css variables
184
+ }
185
+ }
186
+
187
+ @each $semanticColor in variables.$semanticColors {
188
+ $colorName: map.get($semanticColor, "name");
189
+ &.is-#{$colorName} {
190
+ //#region local css variables
191
+ --#{variables.$prefix}card-color-fore: var(
192
+ --#{variables.$prefix}color-#{$colorName}-card-fore
193
+ );
194
+ --#{variables.$prefix}card-color-back: var(
195
+ --#{variables.$prefix}color-#{$colorName}-card-back
196
+ );
197
+ --#{variables.$prefix}card-color-border: var(
198
+ --#{variables.$prefix}color-#{$colorName}-card-border
199
+ );
200
+ --#{variables.$prefix}card-color-shadow: var(
201
+ --#{variables.$prefix}color-#{$colorName}-card-shadow
202
+ );
203
+
204
+ --#{variables.$prefix}card-color-selection-fore: var(
205
+ --#{variables.$prefix}color-#{$colorName}-card-selection-fore,
206
+ var(--#{variables.$prefix}color-#{$colorName}-selection-fore)
207
+ );
208
+ --#{variables.$prefix}card-color-selection-back: var(
209
+ --#{variables.$prefix}color-#{$colorName}-card-selection-back,
210
+ var(--#{variables.$prefix}color-#{$colorName}-selection-back)
211
+ );
212
+
213
+ --#{variables.$prefix}card-header-color-fore: var(
214
+ --#{variables.$prefix}color-#{$colorName}-card-header-fore
215
+ );
216
+ --#{variables.$prefix}card-header-color-back: var(
217
+ --#{variables.$prefix}color-#{$colorName}-card-header-back
218
+ );
219
+ --#{variables.$prefix}card-header-color-border: var(
220
+ --#{variables.$prefix}color-#{$colorName}-card-header-border
221
+ );
222
+
223
+ --#{variables.$prefix}card-body-color-fore: var(
224
+ --#{variables.$prefix}color-#{$colorName}-card-body-fore
225
+ );
226
+ --#{variables.$prefix}card-body-color-back: var(
227
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
228
+ );
229
+ --#{variables.$prefix}card-body-color-border: var(
230
+ --#{variables.$prefix}color-#{$colorName}-card-body-border
231
+ );
232
+
233
+ --#{variables.$prefix}card-footer-color-fore: var(
234
+ --#{variables.$prefix}color-#{$colorName}-card-body-fore
235
+ );
236
+ --#{variables.$prefix}card-footer-color-back: var(
237
+ --#{variables.$prefix}color-#{$colorName}-card-body-back
238
+ );
239
+ --#{variables.$prefix}card-footer-color-border: var(
240
+ --#{variables.$prefix}color-#{$colorName}-card-body-border
241
+ );
242
+ //#endregion local css variables
86
243
  }
87
244
  }
88
245
  }