minolith 1.0.0 → 1.0.2

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 (43) hide show
  1. package/dist/css/minolith-skelton.css +1139 -842
  2. package/dist/css/minolith-skelton.css.map +1 -1
  3. package/dist/css/minolith-skelton.min.css +1139 -842
  4. package/dist/css/minolith-skelton.min.css.map +1 -1
  5. package/dist/css/minolith-utilities.css +55973 -77487
  6. package/dist/css/minolith-utilities.css.map +1 -1
  7. package/dist/css/minolith-utilities.min.css +55973 -77487
  8. package/dist/css/minolith-utilities.min.css.map +1 -1
  9. package/dist/css/minolith.css +5689 -3055
  10. package/dist/css/minolith.css.map +1 -1
  11. package/dist/css/minolith.min.css +2564 -68
  12. package/dist/css/minolith.min.css.map +1 -1
  13. package/package.json +1 -1
  14. package/src/backgrounds/dot.scss +12 -12
  15. package/src/backgrounds/gingham.scss +18 -19
  16. package/src/backgrounds/rhombus.scss +9 -9
  17. package/src/backgrounds/stripe.scss +8 -8
  18. package/src/backgrounds/zigzag.scss +14 -14
  19. package/src/base/normalize.scss +2 -1
  20. package/src/components/accordion.scss +154 -87
  21. package/src/components/badge.scss +151 -62
  22. package/src/components/blockquote.scss +27 -23
  23. package/src/components/breadcrumbs.scss +19 -12
  24. package/src/components/button.scss +132 -69
  25. package/src/components/card.scss +96 -30
  26. package/src/components/dialogue.scss +103 -102
  27. package/src/components/footer.scss +16 -4
  28. package/src/components/header.scss +1 -1
  29. package/src/components/link.scss +1 -0
  30. package/src/components/message.scss +74 -22
  31. package/src/components/modal.scss +10 -10
  32. package/src/components/nav.scss +595 -278
  33. package/src/components/progress.scss +32 -9
  34. package/src/css-variables/animation.scss +1 -1
  35. package/src/css-variables/border.scss +1 -1
  36. package/src/css-variables/color.scss +32 -2
  37. package/src/css-variables/miscellaneous.scss +1 -1
  38. package/src/css-variables/typography.scss +1 -1
  39. package/src/functions/string.scss +12 -0
  40. package/src/mixins/color.scss +0 -32
  41. package/src/mixins/element.scss +2 -2
  42. package/src/utilities/color.scss +112 -6
  43. package/src/variables/color.scss +1082 -798
package/src/backgrounds/stripe.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  .stripe {
6
6
  --#{variables.$prefix}stripe-color-fore: oklch(
7
7
  from var(--#{variables.$prefix}color-default-stripe-fore) l c h /
8
- calc(alpha - 0.5)
8
+ 0.5
9
9
  );
10
10
  --#{variables.$prefix}stripe-color-back: var(
11
11
  --#{variables.$prefix}color-default-stripe-back
@@ -23,14 +23,14 @@
23
23
  var(--#{variables.$prefix}stripe-color-fore) 1.5rem
24
24
  );
25
25
 
26
- @for $n from 0 through 24 {
27
- $degree: $n * 15deg;
28
- &.is-#{$degree} {
29
- --#{variables.$prefix}stripe-degree: #{$degree};
26
+ @if (not variables.$is-skelton) {
27
+ @for $n from 0 through 24 {
28
+ $degree: $n * 15deg;
29
+ &.is-#{$degree} {
30
+ --#{variables.$prefix}stripe-degree: #{$degree};
31
+ }
30
32
  }
31
- }
32
33
 
33
- @if (not variables.$is-skelton) {
34
34
  @each $color in variables.$colors {
35
35
  $colorName: map.get($color, "name");
36
36
  &.is-#{$colorName} {
@@ -39,7 +39,7 @@
39
39
  l
40
40
  c
41
41
  h /
42
- calc(alpha - 0.5)
42
+ 0.5
43
43
  );
44
44
  --#{variables.$prefix}stripe-color-back: var(
45
45
  --#{variables.$prefix}color-#{$colorName}-stripe-back
package/src/backgrounds/zigzag.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  --#{variables.$prefix}zigzag-size: 1rem;
7
7
  --#{variables.$prefix}zigzag-color-fore: oklch(
8
8
  from var(--#{variables.$prefix}color-default-zigzag-fore) l c h /
9
- calc(alpha - 0.5)
9
+ 0.5
10
10
  );
11
11
  --#{variables.$prefix}zigzag-color-back: var(
12
12
  --#{variables.$prefix}color-default-zigzag-back
@@ -45,22 +45,22 @@
45
45
  calc(var(--#{variables.$prefix}zigzag-size) * 2);
46
46
  background-repeat: repeat;
47
47
 
48
- &.is-small {
49
- --#{variables.$prefix}zigzag-size: 0.5rem;
50
- }
48
+ @if (not variables.$is-skelton) {
49
+ &.is-small {
50
+ --#{variables.$prefix}zigzag-size: 0.5rem;
51
+ }
51
52
 
52
- &.is-large {
53
- --#{variables.$prefix}zigzag-size: 4rem;
54
- }
53
+ &.is-large {
54
+ --#{variables.$prefix}zigzag-size: 4rem;
55
+ }
55
56
 
56
- @for $n from 0 through 24 {
57
- $degree: $n * 15deg;
58
- &.is-#{$degree} {
59
- --#{variables.$prefix}zigzag-degree: #{$degree};
57
+ @for $n from 0 through 24 {
58
+ $degree: $n * 15deg;
59
+ &.is-#{$degree} {
60
+ --#{variables.$prefix}zigzag-degree: #{$degree};
61
+ }
60
62
  }
61
- }
62
63
 
63
- @if (not variables.$is-skelton) {
64
64
  @each $color in variables.$colors {
65
65
  $colorName: map.get($color, "name");
66
66
  &.is-#{$colorName} {
@@ -69,7 +69,7 @@
69
69
  l
70
70
  c
71
71
  h /
72
- calc(alpha - 0.5)
72
+ 0.5
73
73
  );
74
74
  --#{variables.$prefix}zigzag-color-back: var(
75
75
  --#{variables.$prefix}color-#{$colorName}-zigzag-back
package/src/base/normalize.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "../variables/index.scss" as variables;
2
2
 
3
- :root {
3
+ :where(:root) {
4
+ scrollbar-gutter: stable;
4
5
  @if variables.$enable-smooth-scroll {
5
6
  @media (prefers-reduced-motion: no-preference) {
6
7
  scroll-behavior: smooth;
package/src/components/accordion.scss CHANGED
@@ -4,10 +4,79 @@
4
4
  @use "../mixins/index.scss" as mixins;
5
5
 
6
6
  .accordion {
7
+ //#region local css variables
8
+ --#{variables.$prefix}color-accordion-fore: var(
9
+ --#{variables.$prefix}color-default-accordion-fore
10
+ );
11
+ --#{variables.$prefix}color-accordion-back: var(
12
+ --#{variables.$prefix}color-default-accordion-back
13
+ );
14
+ --#{variables.$prefix}color-accordion-border: var(
15
+ --#{variables.$prefix}color-default-accordion-border
16
+ );
17
+
18
+ --#{variables.$prefix}color-accordion-summary-fore: var(
19
+ --#{variables.$prefix}color-default-accordion-summary-fore
20
+ );
21
+ --#{variables.$prefix}color-accordion-summary-back: var(
22
+ --#{variables.$prefix}color-default-accordion-summary-back
23
+ );
24
+ --#{variables.$prefix}color-accordion-summary-border: var(
25
+ --#{variables.$prefix}color-default-accordion-summary-border
26
+ );
27
+
28
+ --#{variables.$prefix}color-accordion-details-fore: var(
29
+ --#{variables.$prefix}color-default-accordion-details-fore
30
+ );
31
+ --#{variables.$prefix}color-accordion-details-back: var(
32
+ --#{variables.$prefix}color-default-accordion-details-back
33
+ );
34
+ --#{variables.$prefix}color-accordion-details-border: var(
35
+ --#{variables.$prefix}color-default-accordion-details-border
36
+ );
37
+
38
+ //#region focus
39
+ --#{variables.$prefix}color-accordion-summary-focus-back: var(
40
+ --#{variables.$prefix}color-default-accordion-summary-focus-back
41
+ );
42
+ --#{variables.$prefix}color-accordion-summary-focus-border: var(
43
+ --#{variables.$prefix}color-default-accordion-summary-focus-border
44
+ );
45
+ //#endregion focus
46
+
47
+ //#region hover
48
+ --#{variables.$prefix}color-accordion-summary-hover-back: var(
49
+ --#{variables.$prefix}color-default-accordion-summary-hover-back
50
+ );
51
+ --#{variables.$prefix}color-accordion-summary-hover-border: var(
52
+ --#{variables.$prefix}color-default-accordion-summary-hover-border
53
+ );
54
+ //#endregion hover
55
+
56
+ //#region active
57
+ --#{variables.$prefix}color-accordion-summary-active-back: var(
58
+ --#{variables.$prefix}color-default-accordion-summary-active-back
59
+ );
60
+ --#{variables.$prefix}color-accordion-summary-active-border: var(
61
+ --#{variables.$prefix}color-default-accordion-summary-active-border
62
+ );
63
+ //#endregion active
64
+
65
+ //#region disabled
66
+ --#{variables.$prefix}color-accordion-summary-disabled-back: var(
67
+ --#{variables.$prefix}color-default-accordion-summary-disabled-back
68
+ );
69
+ --#{variables.$prefix}color-accordion-summary-disabled-border: var(
70
+ --#{variables.$prefix}color-default-accordion-summary-disabled-border
71
+ );
72
+ //#endregion disabled
73
+
74
+ //#endregion local css variables
75
+
7
76
  @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);
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);
11
80
  border-radius: calc(
12
81
  var(--#{variables.$prefix}border-radius-medium) +
13
82
  var(--#{variables.$prefix}border-width-thin)
@@ -15,17 +84,11 @@
15
84
  border-style: solid;
16
85
  border-width: var(--#{variables.$prefix}border-width-thin);
17
86
  border-collapse: collapse;
18
- >.accordion-summary {
87
+ > .accordion-summary {
19
88
  @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
- );
89
+ background-color: var(--#{variables.$prefix}color-accordion-summary-back);
90
+ border-color: var(--#{variables.$prefix}color-accordion-summary-border);
91
+ border-radius: calc(var(--#{variables.$prefix}border-radius-medium));
29
92
  cursor: pointer;
30
93
  display: block;
31
94
  padding: 1rem;
@@ -42,65 +105,68 @@
42
105
  right: 1rem;
43
106
  position: absolute;
44
107
  top: calc(50% - 0.25rem);
108
+ background: var(--#{variables.$prefix}color-accordion-fore);
45
109
  }
46
110
  }
47
111
  &:focus,
48
112
  &.is-focus,
49
113
  &.is-focused {
50
114
  background-color: var(
51
- --#{variables.$prefix}color-default-accordion-summary-focus-back
115
+ --#{variables.$prefix}color-accordion-summary-focus-back
52
116
  );
53
117
  border-color: var(
54
- --#{variables.$prefix}color-default-accordion-summary-focus-border
118
+ --#{variables.$prefix}color-accordion-summary-focus-border
55
119
  );
56
120
  }
57
121
  &:hover,
58
122
  &.is-hovered,
59
123
  &.is-hovered {
60
124
  background-color: var(
61
- --#{variables.$prefix}color-default-accordion-summary-hover-back
125
+ --#{variables.$prefix}color-accordion-summary-hover-back
62
126
  );
63
127
  border-color: var(
64
- --#{variables.$prefix}color-default-accordion-summary-hover-border
128
+ --#{variables.$prefix}color-accordion-summary-hover-border
65
129
  );
66
130
  }
67
131
  &:active,
68
132
  &.is-active {
69
133
  background-color: var(
70
- --#{variables.$prefix}color-default-accordion-summary-active-back
134
+ --#{variables.$prefix}color-accordion-summary-active-back
71
135
  );
72
136
  border-color: var(
73
- --#{variables.$prefix}color-default-accordion-summary-active-border
137
+ --#{variables.$prefix}color-accordion-summary-active-border
74
138
  );
75
139
  }
76
140
  &[disabled],
77
141
  fieldset[disabled],
78
142
  &.is-disabled {
79
143
  background-color: var(
80
- --#{variables.$prefix}color-default-accordion-summary-disabled-back
144
+ --#{variables.$prefix}color-accordion-summary-disabled-back
81
145
  );
82
146
  border-color: var(
83
- --#{variables.$prefix}color-default-accordion-summary-disabled-border
147
+ --#{variables.$prefix}color-accordion-summary-disabled-border
84
148
  );
85
149
  }
86
150
  }
87
- >.accordion-details {
151
+ > .accordion-details {
88
152
  @include mixins.element();
89
- border-color: var(--#{variables.$prefix}color-gray-border);
153
+ border-color: var(--#{variables.$prefix}color-accordion-details-border);
90
154
  height: 0;
91
155
  display: none;
92
156
  padding: 1rem;
93
- border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium);
157
+ border-radius: 0 0 var(--#{variables.$prefix}border-radius-medium)
158
+ var(--#{variables.$prefix}border-radius-medium);
94
159
  }
95
160
  &[open],
96
161
  is-open {
97
- >.accordion-summary {
98
- border-radius: var(--#{variables.$prefix}border-radius-medium) var(--#{variables.$prefix}border-radius-medium) 0 0;
162
+ > .accordion-summary {
163
+ border-radius: var(--#{variables.$prefix}border-radius-medium)
164
+ var(--#{variables.$prefix}border-radius-medium) 0 0;
99
165
  &::after {
100
166
  transform: rotate(180deg);
101
167
  }
102
168
  }
103
- >.accordion-details {
169
+ > .accordion-details {
104
170
  display: block;
105
171
  height: auto;
106
172
  }
@@ -109,70 +175,71 @@
109
175
  @each $color in variables.$colors {
110
176
  $colorName: map.get($color, "name");
111
177
  &.is-#{$colorName} {
112
- color: var(--#{variables.$prefix}color-#{$colorName}-accordion-fore);
113
- background-color: var(
178
+ --#{variables.$prefix}color-accordion-fore: var(
179
+ --#{variables.$prefix}color-#{$colorName}-accordion-fore
180
+ );
181
+ --#{variables.$prefix}color-accordion-back: var(
114
182
  --#{variables.$prefix}color-#{$colorName}-accordion-back
115
183
  );
116
- border-color: var(
184
+ --#{variables.$prefix}color-accordion-border: var(
117
185
  --#{variables.$prefix}color-#{$colorName}-accordion-border
118
186
  );
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
- }
187
+
188
+ --#{variables.$prefix}color-accordion-summary-fore: var(
189
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-fore
190
+ );
191
+ --#{variables.$prefix}color-accordion-summary-back: var(
192
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-back
193
+ );
194
+ --#{variables.$prefix}color-accordion-summary-border: var(
195
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-border
196
+ );
197
+
198
+ --#{variables.$prefix}color-accordion-details-fore: var(
199
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-fore
200
+ );
201
+ --#{variables.$prefix}color-accordion-details-back: var(
202
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-back
203
+ );
204
+ --#{variables.$prefix}color-accordion-details-border: var(
205
+ --#{variables.$prefix}color-#{$colorName}-accordion-details-border
206
+ );
207
+
208
+ //#region focus
209
+ --#{variables.$prefix}color-accordion-summary-focus-back: var(
210
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-back
211
+ );
212
+ --#{variables.$prefix}color-accordion-summary-focus-border: var(
213
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-focus-border
214
+ );
215
+ //#endregion focus
216
+
217
+ //#region hover
218
+ --#{variables.$prefix}color-accordion-summary-hover-back: var(
219
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-back
220
+ );
221
+ --#{variables.$prefix}color-accordion-summary-hover-border: var(
222
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-hover-border
223
+ );
224
+ //#endregion hover
225
+
226
+ //#region active
227
+ --#{variables.$prefix}color-accordion-summary-active-back: var(
228
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-back
229
+ );
230
+ --#{variables.$prefix}color-accordion-summary-active-border: var(
231
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-active-border
232
+ );
233
+ //#endregion active
234
+
235
+ //#region disabled
236
+ --#{variables.$prefix}color-accordion-summary-disabled-back: var(
237
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-back
238
+ );
239
+ --#{variables.$prefix}color-accordion-summary-disabled-border: var(
240
+ --#{variables.$prefix}color-#{$colorName}-accordion-summary-disabled-border
241
+ );
242
+ //#endregion disabled
176
243
  }
177
244
  }
178
245
  }
package/src/components/badge.scss CHANGED
@@ -3,14 +3,75 @@
3
3
  @use "../mixins/index.scss" as mixins;
4
4
 
5
5
  .badge {
6
+ //#region local css variables
7
+ --#{variables.$prefix}color-badge-fore: var(
8
+ --#{variables.$prefix}color-default-badge-fore
9
+ );
10
+ --#{variables.$prefix}color-badge-back: var(
11
+ --#{variables.$prefix}color-default-badge-back
12
+ );
13
+ --#{variables.$prefix}color-badge-border: var(
14
+ --#{variables.$prefix}color-default-badge-border
15
+ );
16
+
17
+ //#region focus
18
+ --#{variables.$prefix}color-badge-focus-fore: var(
19
+ --#{variables.$prefix}color-default-badge-focus-fore
20
+ );
21
+ --#{variables.$prefix}color-badge-focus-back: var(
22
+ --#{variables.$prefix}color-default-badge-focus-back
23
+ );
24
+ --#{variables.$prefix}color-badge-focus-border: var(
25
+ --#{variables.$prefix}color-default-badge-focus-border
26
+ );
27
+ //#endregion focus
28
+
29
+ //#region hover
30
+ --#{variables.$prefix}color-badge-hover-fore: var(
31
+ --#{variables.$prefix}color-default-badge-hover-fore
32
+ );
33
+ --#{variables.$prefix}color-badge-hover-back: var(
34
+ --#{variables.$prefix}color-default-badge-hover-back
35
+ );
36
+ --#{variables.$prefix}color-badge-hover-border: var(
37
+ --#{variables.$prefix}color-default-badge-hover-border
38
+ );
39
+ //#endregion hover
40
+
41
+ //#region active
42
+ --#{variables.$prefix}color-badge-active-fore: var(
43
+ --#{variables.$prefix}color-default-badge-active-fore
44
+ );
45
+ --#{variables.$prefix}color-badge-active-back: var(
46
+ --#{variables.$prefix}color-default-badge-active-back
47
+ );
48
+ --#{variables.$prefix}color-badge-active-border: var(
49
+ --#{variables.$prefix}color-default-badge-active-border
50
+ );
51
+ //#endregion active
52
+
53
+ //#region disabled
54
+ --#{variables.$prefix}color-badge-disabled-fore: var(
55
+ --#{variables.$prefix}color-default-badge-disabled-fore
56
+ );
57
+ --#{variables.$prefix}color-badge-disabled-back: var(
58
+ --#{variables.$prefix}color-default-badge-disabled-back
59
+ );
60
+ --#{variables.$prefix}color-badge-disabled-border: var(
61
+ --#{variables.$prefix}color-default-badge-disabled-border
62
+ );
63
+ //#endregion disabled
64
+
65
+ //#endregion local css variables
66
+
6
67
  @include mixins.element();
7
68
  align-items: center;
8
- background-color: var(--#{variables.$prefix}color-default-badge-back);
9
- border-color: var(--#{variables.$prefix}color-default-badge-border);
69
+ background-color: var(--#{variables.$prefix}color-badge-back);
70
+ border-color: var(--#{variables.$prefix}color-badge-border);
10
71
  border-radius: var(--#{variables.$prefix}border-radius-medium);
11
72
  border-style: solid;
12
73
  border-width: var(--#{variables.$prefix}border-width-thin);
13
- color: var(--#{variables.$prefix}color-default-badge-fore);
74
+ color: var(--#{variables.$prefix}color-badge-fore);
14
75
  display: inline-flex;
15
76
  font-size: var(--#{variables.$prefix}font-size-small);
16
77
  justify-content: center;
@@ -23,17 +84,6 @@
23
84
  padding: 0.125rem 0.25rem;
24
85
  }
25
86
 
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
87
  &.is-clickable {
38
88
  cursor: pointer;
39
89
  touch-action: manipulation;
@@ -41,69 +91,108 @@
41
91
  &:focus,
42
92
  &.is-focus,
43
93
  &.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);
94
+ background-color: var(
95
+ --#{variables.$prefix}color-badge-focus-back
96
+ );
97
+ border-color: var(--#{variables.$prefix}color-badge-focus-border);
98
+ color: var(--#{variables.$prefix}color-badge-focus-fore);
47
99
  }
48
100
  &:hover,
49
101
  &.is-hovered,
50
102
  &.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);
103
+ background-color: var(
104
+ --#{variables.$prefix}color-badge-hover-back
105
+ );
106
+ border-color: var(--#{variables.$prefix}color-badge-hover-border);
107
+ color: var(--#{variables.$prefix}color-badge-hover-fore);
54
108
  }
55
109
  &:active,
56
110
  &.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);
111
+ background-color: var(
112
+ --#{variables.$prefix}color-badge-active-back
113
+ );
114
+ border-color: var(
115
+ --#{variables.$prefix}color-badge-active-border
116
+ );
117
+ color: var(--#{variables.$prefix}color-badge-active-fore);
60
118
  }
61
119
  &[disabled],
62
120
  fieldset[disabled],
63
121
  &.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);
122
+ background-color: var(
123
+ --#{variables.$prefix}color-badge-disabled-back
124
+ );
125
+ border-color: var(
126
+ --#{variables.$prefix}color-badge-disabled-border
127
+ );
128
+ color: var(--#{variables.$prefix}color-badge-disabled-fore);
67
129
  }
130
+ }
68
131
 
69
- @if (not variables.$is-skelton) {
70
- @each $color in variables.$colors {
132
+ @if (not variables.$is-skelton) {
133
+ @each $color in variables.$colors {
71
134
  $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
- }
135
+ &.is-#{$colorName} {
136
+ //#region local css variables
137
+ --#{variables.$prefix}color-badge-fore: var(
138
+ --#{variables.$prefix}color-#{$colorName}-badge-fore
139
+ );
140
+ --#{variables.$prefix}color-badge-back: var(
141
+ --#{variables.$prefix}color-#{$colorName}-badge-back
142
+ );
143
+ --#{variables.$prefix}color-badge-border: var(
144
+ --#{variables.$prefix}color-#{$colorName}-badge-border
145
+ );
146
+
147
+ //#region focus
148
+ --#{variables.$prefix}color-badge-focus-fore: var(
149
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-fore
150
+ );
151
+ --#{variables.$prefix}color-badge-focus-back: var(
152
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-back
153
+ );
154
+ --#{variables.$prefix}color-badge-focus-border: var(
155
+ --#{variables.$prefix}color-#{$colorName}-badge-focus-border
156
+ );
157
+ //#endregion focus
158
+
159
+ //#region hover
160
+ --#{variables.$prefix}color-badge-hover-fore: var(
161
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-fore
162
+ );
163
+ --#{variables.$prefix}color-badge-hover-back: var(
164
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-back
165
+ );
166
+ --#{variables.$prefix}color-badge-hover-border: var(
167
+ --#{variables.$prefix}color-#{$colorName}-badge-hover-border
168
+ );
169
+ //#endregion hover
170
+
171
+ //#region active
172
+ --#{variables.$prefix}color-badge-active-fore: var(
173
+ --#{variables.$prefix}color-#{$colorName}-badge-active-fore
174
+ );
175
+ --#{variables.$prefix}color-badge-active-back: var(
176
+ --#{variables.$prefix}color-#{$colorName}-badge-active-back
177
+ );
178
+ --#{variables.$prefix}color-badge-active-border: var(
179
+ --#{variables.$prefix}color-#{$colorName}-badge-active-border
180
+ );
181
+ //#endregion active
182
+
183
+ //#region disabled
184
+ --#{variables.$prefix}color-badge-disabled-fore: var(
185
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-fore
186
+ );
187
+ --#{variables.$prefix}color-badge-disabled-back: var(
188
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-back
189
+ );
190
+ --#{variables.$prefix}color-badge-disabled-border: var(
191
+ --#{variables.$prefix}color-#{$colorName}-badge-disabled-border
192
+ );
193
+ //#endregion disabled
106
194
  }
107
195
  }
108
196
  }
197
+
109
198
  }