@oardi/css-utils 0.106.0 → 0.108.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 (7) hide show
  1. package/package.json +1 -1
  2. package/scss/components/chip.scss +23 -10
  3. package/scss/components/form.scss +75 -1
  4. package/scss/components/list.scss +2 -2
  5. package/scss/components/menu.scss +1 -1
  6. package/scss/components/pagination.scss +1 -1
  7. package/scss/components/tabs.scss +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oardi/css-utils",
3
- "version": "0.106.0",
3
+ "version": "0.108.0",
4
4
  "author": "Ardian Shala",
5
5
  "homepage": "https://css-utils.oardi.com",
6
6
  "description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",
package/scss/components/chip.scss CHANGED
@@ -8,6 +8,9 @@
8
8
  --chip-color-hover: var(--primary-hover);
9
9
  --chip-color-active: var(--primary-active);
10
10
  --chip-on-color: var(--on-primary);
11
+ --chip-surface-color: var(--chip-color);
12
+ --chip-surface-color-hover: var(--chip-color-hover);
13
+ --chip-surface-color-active: var(--chip-color-active);
11
14
 
12
15
  --chip-font-size: var(--font-size-sm);
13
16
  --chip-padding-y: var(--spacer-0);
@@ -115,26 +118,35 @@
115
118
  --chip-color: var(--#{$name});
116
119
  --chip-color-hover: var(--#{$name}-hover);
117
120
  --chip-color-active: var(--#{$name}-active);
121
+ --chip-surface-color: var(--#{$name});
122
+ --chip-surface-color-hover: var(--#{$name}-hover);
123
+ --chip-surface-color-active: var(--#{$name}-active);
118
124
  --chip-on-color: var(--on-#{$name});
119
125
  }
120
126
  }
121
127
 
128
+ .chip-primary:is(a, button, .chip-interactive) {
129
+ --chip-color: var(--action-color);
130
+ --chip-color-hover: var(--action-color-hover);
131
+ --chip-color-active: var(--action-color-active);
132
+ }
133
+
122
134
  .chip-solid {
123
135
  color: var(--chip-on-color);
124
- background-color: var(--chip-color);
125
- border-color: var(--chip-color);
136
+ background-color: var(--chip-surface-color);
137
+ border-color: var(--chip-surface-color);
126
138
 
127
139
  &:is(a, button, .chip-interactive):hover {
128
140
  color: var(--chip-on-color);
129
- background-color: var(--chip-color-hover);
130
- border-color: var(--chip-color-hover);
141
+ background-color: var(--chip-surface-color-hover);
142
+ border-color: var(--chip-surface-color-hover);
131
143
  }
132
144
 
133
145
  &.is-active,
134
146
  &:is(a, button, .chip-interactive):active {
135
147
  color: var(--chip-on-color);
136
- background-color: var(--chip-color-active);
137
- border-color: var(--chip-color-active);
148
+ background-color: var(--chip-surface-color-active);
149
+ border-color: var(--chip-surface-color-active);
138
150
  }
139
151
  }
140
152
 
@@ -145,15 +157,15 @@
145
157
 
146
158
  &:is(a, button, .chip-interactive):hover {
147
159
  color: var(--chip-on-color);
148
- background-color: var(--chip-color-hover);
149
- border-color: var(--chip-color-hover);
160
+ background-color: var(--chip-surface-color-hover);
161
+ border-color: var(--chip-surface-color-hover);
150
162
  }
151
163
 
152
164
  &.is-active,
153
165
  &:is(a, button, .chip-interactive):active {
154
166
  color: var(--chip-on-color);
155
- background-color: var(--chip-color-active);
156
- border-color: var(--chip-color-active);
167
+ background-color: var(--chip-surface-color-active);
168
+ border-color: var(--chip-surface-color-active);
157
169
  }
158
170
  }
159
171
 
@@ -163,6 +175,7 @@
163
175
  border-color: transparent;
164
176
 
165
177
  &:is(a, button, .chip-interactive):hover {
178
+ color: var(--chip-color-hover);
166
179
  background-color: var(--chip-highlight);
167
180
  }
168
181
 
package/scss/components/form.scss CHANGED
@@ -241,7 +241,7 @@
241
241
  border-color: var(--form-check-input-checked-border-color);
242
242
  }
243
243
 
244
- &[type='checkbox']:checked::after {
244
+ &:where([type='checkbox']):checked::after {
245
245
  content: '';
246
246
  position: absolute;
247
247
  inset-inline-start: 0.25rem;
@@ -253,6 +253,23 @@
253
253
  transform: rotate(45deg);
254
254
  }
255
255
 
256
+ &:where([type='checkbox']):indeterminate {
257
+ background-color: var(--form-check-input-checked-bg-color);
258
+ border-color: var(--form-check-input-checked-border-color);
259
+
260
+ &::after {
261
+ content: '';
262
+ position: absolute;
263
+ inset-inline: 0.1875rem;
264
+ inset-block-start: calc(50% - 0.0625rem);
265
+ width: auto;
266
+ height: 0.125rem;
267
+ background-color: var(--form-check-input-checked-color);
268
+ border: 0;
269
+ transform: none;
270
+ }
271
+ }
272
+
256
273
  &[type='radio'] {
257
274
  border-radius: 9999px;
258
275
  }
@@ -293,6 +310,10 @@
293
310
  background-color: var(--form-check-disabled-bg-color);
294
311
  border-color: var(--form-check-disabled-border-color);
295
312
 
313
+ &:where([type='checkbox']):indeterminate::after {
314
+ background-color: var(--disabled-text-color);
315
+ }
316
+
296
317
  & + .form-label {
297
318
  color: var(--disabled-text-color);
298
319
  cursor: not-allowed;
@@ -306,6 +327,59 @@
306
327
  }
307
328
  }
308
329
 
330
+ @layer components {
331
+ @media (forced-colors: active) {
332
+ .form-check .form-check-input:where([type='checkbox']) {
333
+ forced-color-adjust: none;
334
+ background-color: Canvas;
335
+ border-color: CanvasText;
336
+
337
+ &:checked,
338
+ &:indeterminate {
339
+ background-color: Highlight;
340
+ border-color: Highlight;
341
+ }
342
+
343
+ &:checked::after {
344
+ border-color: HighlightText;
345
+ }
346
+
347
+ &:indeterminate::after {
348
+ background-color: HighlightText;
349
+ }
350
+
351
+ &:focus-visible,
352
+ &.is-focus-visible {
353
+ border-color: Highlight;
354
+ outline-color: Highlight;
355
+ }
356
+
357
+ &.is-invalid {
358
+ border-color: LinkText;
359
+
360
+ &:focus-visible,
361
+ &.is-focus-visible {
362
+ outline-color: Highlight;
363
+ }
364
+ }
365
+
366
+ &:disabled,
367
+ &[disabled] {
368
+ background-color: Canvas;
369
+ border-color: GrayText;
370
+
371
+ &:checked::after {
372
+ border-color: GrayText;
373
+ }
374
+
375
+ &:indeterminate::after {
376
+ background-color: GrayText;
377
+ }
378
+ }
379
+ }
380
+ }
381
+ }
382
+
309
383
  @layer components {
310
384
  .form-label {
311
385
  display: inline-block;
package/scss/components/list.scss CHANGED
@@ -13,8 +13,8 @@
13
13
  --list-item-padding-x: var(--spacer-3);
14
14
  --list-item-gap: var(--spacer-2);
15
15
 
16
- --list-item-active-color: var(--primary);
17
- --list-item-hover-color: var(--primary);
16
+ --list-item-active-color: var(--action-color);
17
+ --list-item-hover-color: var(--action-color);
18
18
 
19
19
  --list-item-transition-duration: var(--transition-duration);
20
20
  --list-item-transition-easing: var(--transition-easing);
package/scss/components/menu.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  --menu-item-border-radius: var(--border-radius-sm);
28
28
  --menu-item-hover-bg-color: var(--bg-surface-hover);
29
29
  --menu-item-active-bg-color: var(--bg-active);
30
- --menu-item-current-color: var(--primary);
30
+ --menu-item-current-color: var(--action-color);
31
31
  --menu-item-destructive-color: var(--error);
32
32
  --menu-item-disabled-color: var(--disabled-text-color);
33
33
  --menu-item-description-color: var(--text-muted);
package/scss/components/pagination.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  --pagination-item-color: var(--text-color);
13
13
  --pagination-item-bg-color: transparent;
14
14
 
15
- --pagination-item-hover-color: var(--primary);
15
+ --pagination-item-hover-color: var(--action-color);
16
16
  --pagination-item-hover-bg-color: var(--bg-highlight);
17
17
 
18
18
  --pagination-item-active-color: var(--on-primary);
package/scss/components/tabs.scss CHANGED
@@ -17,12 +17,12 @@
17
17
  --tab-color: var(--text-color);
18
18
  --tab-bg-color: transparent;
19
19
 
20
- --tab-hover-color: var(--primary);
20
+ --tab-hover-color: var(--action-color);
21
21
  --tab-hover-bg-color: var(--bg-surface-hover);
22
22
 
23
- --tab-active-color: var(--primary);
23
+ --tab-active-color: var(--action-color);
24
24
  --tab-active-bg-color: transparent;
25
- --tab-active-border-color: var(--primary);
25
+ --tab-active-border-color: var(--tab-active-color);
26
26
 
27
27
  --tab-border-width: 2px;
28
28
  --tab-border-color: transparent;