noctemyth 0.2.0 → 1.0.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 (80) hide show
  1. package/dist/css/noctemyth-skelton.css +3171 -8838
  2. package/dist/css/noctemyth-skelton.css.map +1 -1
  3. package/dist/css/noctemyth-skelton.min.css +3171 -8838
  4. package/dist/css/noctemyth-skelton.min.css.map +1 -1
  5. package/dist/css/noctemyth-utilities.css +55988 -77487
  6. package/dist/css/noctemyth-utilities.css.map +1 -1
  7. package/dist/css/noctemyth-utilities.min.css +55988 -77487
  8. package/dist/css/noctemyth-utilities.min.css.map +1 -1
  9. package/dist/css/noctemyth.css +26697 -38194
  10. package/dist/css/noctemyth.css.map +1 -1
  11. package/dist/css/noctemyth.min.css +5866 -22994
  12. package/dist/css/noctemyth.min.css.map +1 -1
  13. package/package.json +8 -8
  14. package/src/animations/fade.scss +2 -2
  15. package/src/backgrounds/dot.scss +28 -20
  16. package/src/backgrounds/gingham.scss +22 -21
  17. package/src/backgrounds/rhombus.scss +45 -22
  18. package/src/backgrounds/stripe.scss +19 -14
  19. package/src/backgrounds/zigzag.scss +34 -25
  20. package/src/base/accessibility.scss +68 -0
  21. package/src/base/dub.scss +34 -4
  22. package/src/base/element.scss +1 -1
  23. package/src/base/index.scss +2 -0
  24. package/src/base/normalize.scss +0 -8
  25. package/src/base/root.scss +25 -0
  26. package/src/components/accordion.scss +183 -90
  27. package/src/components/aside.scss +7 -0
  28. package/src/components/badge.scss +170 -64
  29. package/src/components/blockquote.scss +52 -27
  30. package/src/components/breadcrumbs.scss +46 -16
  31. package/src/components/button.scss +177 -88
  32. package/src/components/card.scss +147 -48
  33. package/src/components/description-list.scss +46 -0
  34. package/src/components/dialogue.scss +194 -143
  35. package/src/components/div.scss +1 -1
  36. package/src/components/figure.scss +173 -0
  37. package/src/components/footer.scss +20 -6
  38. package/src/components/hamburger.scss +77 -51
  39. package/src/components/header.scss +42 -6
  40. package/src/components/heading.scss +6 -7
  41. package/src/components/image.scss +1 -1
  42. package/src/components/index.scss +3 -0
  43. package/src/components/input.scss +110 -69
  44. package/src/components/label.scss +34 -4
  45. package/src/components/link.scss +56 -12
  46. package/src/components/list.scss +39 -9
  47. package/src/components/loader.scss +10 -8
  48. package/src/components/main.scss +1 -1
  49. package/src/components/message.scss +100 -24
  50. package/src/components/modal.scss +18 -8
  51. package/src/components/nav.scss +600 -280
  52. package/src/components/paragraph.scss +1 -2
  53. package/src/components/progress.scss +42 -16
  54. package/src/components/section.scss +1 -1
  55. package/src/components/span.scss +1 -1
  56. package/src/css-variables/animation.scss +1 -1
  57. package/src/css-variables/border.scss +1 -1
  58. package/src/css-variables/color.scss +757 -468
  59. package/src/css-variables/components/dialogue.scss +2 -2
  60. package/src/css-variables/components/header.scss +1 -0
  61. package/src/css-variables/index.scss +1 -0
  62. package/src/css-variables/layout.scss +11 -0
  63. package/src/css-variables/miscellaneous.scss +4 -4
  64. package/src/css-variables/typography.scss +1 -1
  65. package/src/functions/color.scss +13 -0
  66. package/src/functions/index.scss +1 -0
  67. package/src/functions/string.scss +12 -0
  68. package/src/layouts/centering.scss +1 -1
  69. package/src/layouts/columns.scss +57 -51
  70. package/src/layouts/container.scss +33 -31
  71. package/src/mixins/color.scss +0 -32
  72. package/src/mixins/element.scss +2 -2
  73. package/src/mixins/responsive.scss +12 -11
  74. package/src/utilities/border.scss +4 -0
  75. package/src/utilities/color.scss +112 -6
  76. package/src/variables/color.scss +1169 -1084
  77. package/src/variables/components/dialogue.scss +2 -2
  78. package/src/variables/components/header.scss +1 -0
  79. package/src/variables/layout.scss +13 -11
  80. package/src/variables/miscellaneous.scss +1 -3
package/src/components/accordion.scss CHANGED
@@ -3,11 +3,89 @@
3
3
  @use "../icons/index.scss" as icons;
4
4
  @use "../mixins/index.scss" as mixins;
5
5
 
6
- .accordion {
6
+ :where(.accordion) {
7
+ //#region local css variables
8
+ --#{variables.$prefix}accordion-color-fore: var(
9
+ --#{variables.$prefix}color-default-accordion-fore,
10
+ var(--#{variables.$prefix}color-default-fore)
11
+ );
12
+ --#{variables.$prefix}accordion-color-back: var(
13
+ --#{variables.$prefix}color-default-accordion-back,
14
+ var(--#{variables.$prefix}color-default-back)
15
+ );
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
25
+ );
26
+
27
+ --#{variables.$prefix}accordion-summary-color-fore: var(
28
+ --#{variables.$prefix}color-default-accordion-summary-fore
29
+ );
30
+ --#{variables.$prefix}accordion-summary-color-back: var(
31
+ --#{variables.$prefix}color-default-accordion-summary-back
32
+ );
33
+ --#{variables.$prefix}accordion-summary-color-border: var(
34
+ --#{variables.$prefix}color-default-accordion-summary-border
35
+ );
36
+
37
+ --#{variables.$prefix}accordion-details-color-fore: var(
38
+ --#{variables.$prefix}color-default-accordion-details-fore
39
+ );
40
+ --#{variables.$prefix}accordion-details-color-back: var(
41
+ --#{variables.$prefix}color-default-accordion-details-back
42
+ );
43
+ --#{variables.$prefix}accordion-details-color-border: var(
44
+ --#{variables.$prefix}color-default-accordion-details-border
45
+ );
46
+
47
+ //#region focus
48
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
49
+ --#{variables.$prefix}color-default-accordion-summary-focus-back
50
+ );
51
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
52
+ --#{variables.$prefix}color-default-accordion-summary-focus-border
53
+ );
54
+ //#endregion focus
55
+
56
+ //#region hover
57
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
58
+ --#{variables.$prefix}color-default-accordion-summary-hover-back
59
+ );
60
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
61
+ --#{variables.$prefix}color-default-accordion-summary-hover-border
62
+ );
63
+ //#endregion hover
64
+
65
+ //#region active
66
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
67
+ --#{variables.$prefix}color-default-accordion-summary-active-back
68
+ );
69
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
70
+ --#{variables.$prefix}color-default-accordion-summary-active-border
71
+ );
72
+ //#endregion active
73
+
74
+ //#region disabled
75
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
76
+ --#{variables.$prefix}color-default-accordion-summary-disabled-back
77
+ );
78
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
79
+ --#{variables.$prefix}color-default-accordion-summary-disabled-border
80
+ );
81
+ //#endregion disabled
82
+
83
+ //#endregion local css variables
84
+
7
85
  @include mixins.element();
8
- color: var(--#{variables.$prefix}color-default-accordion-fore);
9
- background-color: var(--#{variables.$prefix}color-default-accordion-back);
10
- border-color: var(--#{variables.$prefix}color-default-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);
11
89
  border-radius: calc(
12
90
  var(--#{variables.$prefix}border-radius-medium) +
13
91
  var(--#{variables.$prefix}border-width-thin)
@@ -15,22 +93,23 @@
15
93
  border-style: solid;
16
94
  border-width: var(--#{variables.$prefix}border-width-thin);
17
95
  border-collapse: collapse;
18
- >.accordion-summary {
96
+
97
+ &::selection {
98
+ color: var(--#{variables.$prefix}accordion-color-selection-fore);
99
+ background-color: var(--#{variables.$prefix}accordion-color-selection-back);
100
+ }
101
+
102
+ > .accordion-summary {
19
103
  @include mixins.element();
20
- background-color: var(
21
- --#{variables.$prefix}color-default-accordion-summary-back
22
- );
23
- border-color: var(
24
- --#{variables.$prefix}color-default-accordion-summary-border
25
- );
26
- border-radius: calc(
27
- var(--#{variables.$prefix}border-radius-medium)
28
- );
104
+ background-color: var(--#{variables.$prefix}accordion-summary-color-back);
105
+ border-color: var(--#{variables.$prefix}accordion-summary-color-border);
106
+ border-radius: calc(var(--#{variables.$prefix}border-radius-medium));
29
107
  cursor: pointer;
30
108
  display: block;
31
109
  padding: 1rem;
32
110
  position: relative;
33
111
  touch-action: manipulation;
112
+ user-select: none;
34
113
  list-style: none;
35
114
  &::marker,
36
115
  &::-webkit-details-marker {
@@ -42,137 +121,151 @@
42
121
  right: 1rem;
43
122
  position: absolute;
44
123
  top: calc(50% - 0.25rem);
124
+ background: var(--#{variables.$prefix}accordion-color-fore);
45
125
  }
46
126
  }
127
+
47
128
  &:focus,
48
129
  &.is-focus,
49
130
  &.is-focused {
50
131
  background-color: var(
51
- --#{variables.$prefix}color-default-accordion-summary-focus-back
132
+ --#{variables.$prefix}accordion-summary-color-focus-back
52
133
  );
53
134
  border-color: var(
54
- --#{variables.$prefix}color-default-accordion-summary-focus-border
135
+ --#{variables.$prefix}accordion-summary-color-focus-border
55
136
  );
56
137
  }
138
+
57
139
  &:hover,
58
- &.is-hovered,
140
+ &.is-hover,
59
141
  &.is-hovered {
60
142
  background-color: var(
61
- --#{variables.$prefix}color-default-accordion-summary-hover-back
143
+ --#{variables.$prefix}accordion-summary-color-hover-back
62
144
  );
63
145
  border-color: var(
64
- --#{variables.$prefix}color-default-accordion-summary-hover-border
146
+ --#{variables.$prefix}accordion-summary-color-hover-border
65
147
  );
66
148
  }
149
+
67
150
  &:active,
68
151
  &.is-active {
69
152
  background-color: var(
70
- --#{variables.$prefix}color-default-accordion-summary-active-back
153
+ --#{variables.$prefix}accordion-summary-color-active-back
71
154
  );
72
155
  border-color: var(
73
- --#{variables.$prefix}color-default-accordion-summary-active-border
156
+ --#{variables.$prefix}accordion-summary-color-active-border
74
157
  );
75
158
  }
159
+
76
160
  &[disabled],
77
161
  fieldset[disabled],
78
162
  &.is-disabled {
79
163
  background-color: var(
80
- --#{variables.$prefix}color-default-accordion-summary-disabled-back
164
+ --#{variables.$prefix}accordion-summary-color-disabled-back
81
165
  );
82
166
  border-color: var(
83
- --#{variables.$prefix}color-default-accordion-summary-disabled-border
167
+ --#{variables.$prefix}accordion-summary-color-disabled-border
84
168
  );
85
169
  }
86
170
  }
87
- >.accordion-details {
171
+ > .accordion-details {
88
172
  @include mixins.element();
89
- border-color: var(--#{variables.$prefix}color-gray-border);
173
+ border-color: var(--#{variables.$prefix}accordion-details-color-border);
90
174
  height: 0;
91
175
  display: none;
92
176
  padding: 1rem;
93
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium);
177
+ border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
178
+ var(--#{variables.$prefix}border-radius-medium);
94
179
  }
95
180
  &[open],
96
181
  is-open {
97
- >.accordion-summary {
98
- border-radius: var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium) 0 0;
182
+ > .accordion-summary {
183
+ border-radius: var(--#{variables.$prefix}border-radius-medium)
184
+ var(--#{variables.$prefix}border-radius-medium) 0 0;
99
185
  &::after {
100
186
  transform: rotate(180deg);
101
187
  }
102
188
  }
103
- >.accordion-details {
189
+ > .accordion-details {
104
190
  display: block;
105
191
  height: auto;
106
192
  }
107
193
  }
108
194
  @if (not variables.$is-skelton) {
109
- @each $color in variables.$colors {
195
+ @each $color in variables.$allColors {
110
196
  $colorName: map.get($color, "name");
111
197
  &.is-#{$colorName} {
112
- color: var(--#{variables.$prefix}color-#{$colorName}-accordion-fore);
113
- background-color: var(
198
+ --#{variables.$prefix}accordion-color-fore: var(
199
+ --#{variables.$prefix}color-#{$colorName}-accordion-fore
200
+ );
201
+ --#{variables.$prefix}accordion-color-back: var(
114
202
  --#{variables.$prefix}color-#{$colorName}-accordion-back
115
203
  );
116
- border-color: var(
204
+ --#{variables.$prefix}accordion-color-border: var(
117
205
  --#{variables.$prefix}color-#{$colorName}-accordion-border
118
206
  );
119
- >.accordion-summary {
120
- background-color: var(
121
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
122
- );
123
- border-color: var(
124
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
125
- );
126
- &::after {
127
- background: var(
128
- --#{variables.$prefix}color-#{$colorName}-accordion-fore
129
- );
130
- }
131
- &:focus,
132
- &.is-focus,
133
- &.is-focused {
134
- background-color: var(
135
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
136
- );
137
- border-color: var(
138
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
139
- );
140
- }
141
- &:hover,
142
- &.is-hovered,
143
- &.is-hovered {
144
- background-color: var(
145
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
146
- );
147
- border-color: var(
148
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
149
- );
150
- }
151
- &:active,
152
- &.is-active {
153
- background-color: var(
154
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
155
- );
156
- border-color: var(
157
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
158
- );
159
- }
160
- &[disabled],
161
- fieldset[disabled],
162
- &.is-disabled {
163
- background-color: var(
164
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
165
- );
166
- border-color: var(
167
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
168
- );
169
- }
170
- }
171
- >.accordion-details {
172
- border-color: var(
173
- --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
174
- );
175
- }
207
+ --#{variables.$prefix}accordion-color-selection-fore: var(
208
+ --#{variables.$prefix}color-#{$colorName}-selection-fore
209
+ );
210
+ --#{variables.$prefix}accordion-color-selection-back: var(
211
+ --#{variables.$prefix}color-#{$colorName}-selection-back
212
+ );
213
+
214
+ --#{variables.$prefix}accordion-summary-color-fore: var(
215
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-fore
216
+ );
217
+ --#{variables.$prefix}accordion-summary-color-back: var(
218
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
219
+ );
220
+ --#{variables.$prefix}accordion-summary-color-border: var(
221
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
222
+ );
223
+
224
+ --#{variables.$prefix}accordion-details-color-fore: var(
225
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-fore
226
+ );
227
+ --#{variables.$prefix}accordion-details-color-back: var(
228
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-back
229
+ );
230
+ --#{variables.$prefix}accordion-details-color-border: var(
231
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-border
232
+ );
233
+
234
+ //#region focus
235
+ --#{variables.$prefix}accordion-summary-color-focus-back: var(
236
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
237
+ );
238
+ --#{variables.$prefix}accordion-summary-color-focus-border: var(
239
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
240
+ );
241
+ //#endregion focus
242
+
243
+ //#region hover
244
+ --#{variables.$prefix}accordion-summary-color-hover-back: var(
245
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
246
+ );
247
+ --#{variables.$prefix}accordion-summary-color-hover-border: var(
248
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
249
+ );
250
+ //#endregion hover
251
+
252
+ //#region active
253
+ --#{variables.$prefix}accordion-summary-color-active-back: var(
254
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
255
+ );
256
+ --#{variables.$prefix}accordion-summary-color-active-border: var(
257
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
258
+ );
259
+ //#endregion active
260
+
261
+ //#region disabled
262
+ --#{variables.$prefix}accordion-summary-color-disabled-back: var(
263
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
264
+ );
265
+ --#{variables.$prefix}accordion-summary-color-disabled-border: var(
266
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
267
+ );
268
+ //#endregion disabled
176
269
  }
177
270
  }
178
271
  }
package/src/components/aside.scss ADDED
@@ -0,0 +1,7 @@
1
+ @use "sass:map";
2
+ @use "../variables/index.scss" as variables;
3
+ @use "../mixins/index.scss" as mixins;
4
+
5
+ :where(.aside) {
6
+ @include mixins.element();
7
+ }
package/src/components/badge.scss CHANGED
@@ -2,15 +2,91 @@
2
2
  @use "../variables/index.scss" as variables;
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
- .badge {
5
+ :where(.badge) {
6
+ //#region local css variables
7
+ --#{variables.$prefix}badge-color-fore: var(
8
+ --#{variables.$prefix}color-default-badge-fore,
9
+ var(--#{variables.$prefix}color-default-fore)
10
+ );
11
+ --#{variables.$prefix}badge-color-back: var(
12
+ --#{variables.$prefix}color-default-badge-back,
13
+ var(--#{variables.$prefix}color-default-back)
14
+ );
15
+ --#{variables.$prefix}badge-color-border: var(
16
+ --#{variables.$prefix}color-default-badge-border,
17
+ var(--#{variables.$prefix}color-default-border)
18
+ );
19
+
20
+ //#region focus
21
+ --#{variables.$prefix}badge-color-focus-fore: var(
22
+ --#{variables.$prefix}color-default-badge-focus-fore,
23
+ var(--#{variables.$prefix}color-default-focus-fore)
24
+ );
25
+ --#{variables.$prefix}badge-color-focus-back: var(
26
+ --#{variables.$prefix}color-default-badge-focus-back,
27
+ var(--#{variables.$prefix}color-default-focus-back)
28
+ );
29
+ --#{variables.$prefix}badge-color-focus-border: var(
30
+ --#{variables.$prefix}color-default-badge-focus-border,
31
+ var(--#{variables.$prefix}color-default-focus-border)
32
+ );
33
+ //#endregion focus
34
+
35
+ //#region hover
36
+ --#{variables.$prefix}badge-color-hover-fore: var(
37
+ --#{variables.$prefix}color-default-badge-hover-fore,
38
+ var(--#{variables.$prefix}color-default-hover-fore)
39
+ );
40
+ --#{variables.$prefix}badge-color-hover-back: var(
41
+ --#{variables.$prefix}color-default-badge-hover-back,
42
+ var(--#{variables.$prefix}color-default-hover-back)
43
+ );
44
+ --#{variables.$prefix}badge-color-hover-border: var(
45
+ --#{variables.$prefix}color-default-badge-hover-border,
46
+ var(--#{variables.$prefix}color-default-hover-border)
47
+ );
48
+ //#endregion hover
49
+
50
+ //#region active
51
+ --#{variables.$prefix}badge-color-active-fore: var(
52
+ --#{variables.$prefix}color-default-badge-active-fore,
53
+ var(--#{variables.$prefix}color-default-active-fore)
54
+ );
55
+ --#{variables.$prefix}badge-color-active-back: var(
56
+ --#{variables.$prefix}color-default-badge-active-back,
57
+ var(--#{variables.$prefix}color-default-active-back)
58
+ );
59
+ --#{variables.$prefix}badge-color-active-border: var(
60
+ --#{variables.$prefix}color-default-badge-active-border,
61
+ var(--#{variables.$prefix}color-default-active-border)
62
+ );
63
+ //#endregion active
64
+
65
+ //#region disabled
66
+ --#{variables.$prefix}badge-color-disabled-fore: var(
67
+ --#{variables.$prefix}color-default-badge-disabled-fore,
68
+ var(--#{variables.$prefix}color-default-disabled-fore)
69
+ );
70
+ --#{variables.$prefix}badge-color-disabled-back: var(
71
+ --#{variables.$prefix}color-default-badge-disabled-back,
72
+ var(--#{variables.$prefix}color-default-disabled-back)
73
+ );
74
+ --#{variables.$prefix}badge-color-disabled-border: var(
75
+ --#{variables.$prefix}color-default-badge-disabled-border,
76
+ var(--#{variables.$prefix}color-default-disabled-border)
77
+ );
78
+ //#endregion disabled
79
+
80
+ //#endregion local css variables
81
+
6
82
  @include mixins.element();
7
83
  align-items: center;
8
- background-color: var(--#{variables.$prefix}color-default-badge-back);
9
- border-color: var(--#{variables.$prefix}color-default-badge-border);
84
+ background-color: var(--#{variables.$prefix}badge-color-back);
85
+ border-color: var(--#{variables.$prefix}badge-color-border);
10
86
  border-radius: var(--#{variables.$prefix}border-radius-medium);
11
87
  border-style: solid;
12
88
  border-width: var(--#{variables.$prefix}border-width-thin);
13
- color: var(--#{variables.$prefix}color-default-badge-fore);
89
+ color: var(--#{variables.$prefix}badge-color-fore);
14
90
  display: inline-flex;
15
91
  font-size: var(--#{variables.$prefix}font-size-small);
16
92
  justify-content: center;
@@ -23,17 +99,6 @@
23
99
  padding: 0.125rem 0.25rem;
24
100
  }
25
101
 
26
- @if (not variables.$is-skelton) {
27
- @each $color in variables.$colors {
28
- $colorName: map.get($color, "name");
29
- &.is-#{$colorName} {
30
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-back);
31
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-border);
32
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-fore);
33
- }
34
- }
35
- }
36
-
37
102
  &.is-clickable {
38
103
  cursor: pointer;
39
104
  touch-action: manipulation;
@@ -41,68 +106,109 @@
41
106
  &:focus,
42
107
  &.is-focus,
43
108
  &.is-focused {
44
- background-color: var(--#{variables.$prefix}color-default-badge-focus-back);
45
- border-color: var(--#{variables.$prefix}color-default-badge-focus-border);
46
- color: var(--#{variables.$prefix}color-default-badge-focus-fore);
109
+ background-color: var(--#{variables.$prefix}badge-color-focus-back);
110
+ border-color: var(--#{variables.$prefix}badge-color-focus-border);
111
+ color: var(--#{variables.$prefix}badge-color-focus-fore);
47
112
  }
48
113
  &:hover,
49
- &.is-hovered,
114
+ &.is-hover,
50
115
  &.is-hovered {
51
- background-color: var(--#{variables.$prefix}color-default-badge-hover-back);
52
- border-color: var(--#{variables.$prefix}color-default-badge-hover-border);
53
- color: var(--#{variables.$prefix}color-default-badge-hover-fore);
116
+ background-color: var(--#{variables.$prefix}badge-color-hover-back);
117
+ border-color: var(--#{variables.$prefix}badge-color-hover-border);
118
+ color: var(--#{variables.$prefix}badge-color-hover-fore);
54
119
  }
55
120
  &:active,
56
121
  &.is-active {
57
- background-color: var(--#{variables.$prefix}color-default-badge-active-back);
58
- border-color: var(--#{variables.$prefix}color-default-badge-active-border);
59
- color: var(--#{variables.$prefix}color-default-badge-active-fore);
122
+ background-color: var(--#{variables.$prefix}badge-color-active-back);
123
+ border-color: var(--#{variables.$prefix}badge-color-active-border);
124
+ color: var(--#{variables.$prefix}badge-color-active-fore);
60
125
  }
61
126
  &[disabled],
62
127
  fieldset[disabled],
63
128
  &.is-disabled {
64
- background-color: var(--#{variables.$prefix}color-default-badge-disabled-back);
65
- border-color: var(--#{variables.$prefix}color-default-badge-disabled-border);
66
- color: var(--#{variables.$prefix}color-default-badge-disabled-fore);
129
+ background-color: var(--#{variables.$prefix}badge-color-disabled-back);
130
+ border-color: var(--#{variables.$prefix}badge-color-disabled-border);
131
+ color: var(--#{variables.$prefix}badge-color-disabled-fore);
67
132
  }
133
+ }
68
134
 
69
- @if (not variables.$is-skelton) {
70
- @each $color in variables.$colors {
135
+ @if (not variables.$is-skelton) {
136
+ @each $color in variables.$allColors {
71
137
  $colorName: map.get($color, "name");
72
- &.is-#{$colorName} {
73
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-back);
74
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-border);
75
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-fore);
76
- &.is-clickable {
77
- &:focus,
78
- &.is-focus,
79
- &.is-focused {
80
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-focus-back);
81
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-focus-border);
82
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-focus-fore);
83
- }
84
- &:hover,
85
- &.is-hover,
86
- &.is-hovered {
87
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-hover-back);
88
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-hover-border);
89
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-hover-fore);
90
- }
91
- &:active,
92
- &.is-active {
93
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-active-back);
94
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-active-border);
95
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-active-fore);
96
- }
97
- &[disabled],
98
- fieldset[disabled],
99
- &.is-disabled {
100
- background-color: var(--#{variables.$prefix}color-#{$colorName}-badge-disabled-back);
101
- border-color: var(--#{variables.$prefix}color-#{$colorName}-badge-disabled-border);
102
- color: var(--#{variables.$prefix}color-#{$colorName}-badge-disabled-fore);
103
- }
104
- }
105
- }
138
+ &.is-#{$colorName} {
139
+ //#region local css variables
140
+ --#{variables.$prefix}badge-color-fore: var(
141
+ --#{variables.$prefix}color-#{$colorName}-badge-fore,
142
+ var(--#{variables.$prefix}color-#{$colorName}-fore)
143
+ );
144
+ --#{variables.$prefix}badge-color-back: var(
145
+ --#{variables.$prefix}color-#{$colorName}-badge-back,
146
+ var(--#{variables.$prefix}color-#{$colorName}-back)
147
+ );
148
+ --#{variables.$prefix}badge-color-border: var(
149
+ --#{variables.$prefix}color-#{$colorName}-badge-border,
150
+ var(--#{variables.$prefix}color-#{$colorName}-border)
151
+ );
152
+
153
+ //#region focus
154
+ --#{variables.$prefix}badge-color-focus-fore: var(
155
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-fore,
156
+ var(--#{variables.$prefix}color-#{$colorName}-focus-fore)
157
+ );
158
+ --#{variables.$prefix}badge-color-focus-back: var(
159
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-back,
160
+ var(--#{variables.$prefix}color-#{$colorName}-focus-back)
161
+ );
162
+ --#{variables.$prefix}badge-color-focus-border: var(
163
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-border,
164
+ var(--#{variables.$prefix}color-#{$colorName}-focus-border)
165
+ );
166
+ //#endregion focus
167
+
168
+ //#region hover
169
+ --#{variables.$prefix}badge-color-hover-fore: var(
170
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-fore,
171
+ var(--#{variables.$prefix}color-#{$colorName}-hover-fore)
172
+ );
173
+ --#{variables.$prefix}badge-color-hover-back: var(
174
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-back,
175
+ var(--#{variables.$prefix}color-#{$colorName}-hover-back)
176
+ );
177
+ --#{variables.$prefix}badge-color-hover-border: var(
178
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-border,
179
+ var(--#{variables.$prefix}color-#{$colorName}-hover-border)
180
+ );
181
+ //#endregion hover
182
+
183
+ //#region active
184
+ --#{variables.$prefix}badge-color-active-fore: var(
185
+ --#{variables.$prefix}color-#{$colorName}-badge-active-fore,
186
+ var(--#{variables.$prefix}color-#{$colorName}-active-fore)
187
+ );
188
+ --#{variables.$prefix}badge-color-active-back: var(
189
+ --#{variables.$prefix}color-#{$colorName}-badge-active-back,
190
+ var(--#{variables.$prefix}color-#{$colorName}-active-back)
191
+ );
192
+ --#{variables.$prefix}badge-color-active-border: var(
193
+ --#{variables.$prefix}color-#{$colorName}-badge-active-border,
194
+ var(--#{variables.$prefix}color-#{$colorName}-active-border)
195
+ );
196
+ //#endregion active
197
+
198
+ //#region disabled
199
+ --#{variables.$prefix}badge-color-disabled-fore: var(
200
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-fore,
201
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-fore)
202
+ );
203
+ --#{variables.$prefix}badge-color-disabled-back: var(
204
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-back,
205
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-back)
206
+ );
207
+ --#{variables.$prefix}badge-color-disabled-border: var(
208
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-border,
209
+ var(--#{variables.$prefix}color-#{$colorName}-disabled-border)
210
+ );
211
+ //#endregion disabled
106
212
  }
107
213
  }
108
214
  }