cetec-design-system 1.1.0 → 1.2.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.
- package/dist/{cetec-preset-BCioTXu9.js → cetec-preset-kUkA_FyU.js} +160 -169
- package/dist/cetec-preset-kUkA_FyU.js.map +1 -0
- package/dist/index.js +868 -806
- package/dist/index.js.map +1 -1
- package/dist/panda.buildinfo.json +135 -6
- package/dist/preset.js +1 -1
- package/dist/specs/conditions.json +53 -53
- package/dist/specs/recipes.json +322 -267
- package/dist/styles.css +8192 -7522
- package/dist/types/index.d.ts +60 -55
- package/package.json +1 -1
- package/src/recipes/icon.ts +17 -6
- package/src/recipes/{index.ts → recipes-regular.ts} +0 -16
- package/src/recipes/recipes-slot.ts +14 -0
- package/src/recipes/textInput.ts +22 -0
- package/src/styles/utilities/conditions.ts +57 -53
- package/dist/cetec-preset-BCioTXu9.js.map +0 -1
|
@@ -404,6 +404,131 @@
|
|
|
404
404
|
"color]___[value:transparent",
|
|
405
405
|
"marginBottom]___[value:48",
|
|
406
406
|
"marginBlock]___[value:48",
|
|
407
|
+
"background]___[value:bg.neutral.hovered]___[cond:_hover",
|
|
408
|
+
"paddingInline]___[value:16",
|
|
409
|
+
"paddingBlock]___[value:8",
|
|
410
|
+
"borderBottomWidth]___[value:2",
|
|
411
|
+
"borderBottomStyle]___[value:solid",
|
|
412
|
+
"borderBottomColor]___[value:transparent",
|
|
413
|
+
"borderBottomColor]___[value:border.selected]___[cond:_current",
|
|
414
|
+
"color]___[value:text]___[cond:_current",
|
|
415
|
+
"fontWeight]___[value:bold]___[cond:_current",
|
|
416
|
+
"padding]___[value:8",
|
|
417
|
+
"background]___[value:bg.warning]___[cond:_even",
|
|
418
|
+
"background]___[value:surface]___[cond:_odd",
|
|
419
|
+
"color]___[value:text.accent.gold]___[cond:_marker",
|
|
420
|
+
"width]___[value:16",
|
|
421
|
+
"height]___[value:16",
|
|
422
|
+
"borderStyle]___[value:solid",
|
|
423
|
+
"color]___[value:text.selected]___[cond:_peerChecked",
|
|
424
|
+
"borderColor]___[value:border.selected]___[cond:_peerChecked",
|
|
425
|
+
"fontWeight]___[value:medium]___[cond:_peerChecked",
|
|
426
|
+
"opacity]___[value:0.4]___[cond:_peerDisabled",
|
|
427
|
+
"textDecoration]___[value:line-through]___[cond:_peerDisabled",
|
|
428
|
+
"background]___[value:blue.80]___[cond:_osDark",
|
|
429
|
+
"background]___[value:blue.10]___[cond:_osLight",
|
|
430
|
+
"borderRadius]___[value:full",
|
|
431
|
+
"width]___[value:120]___[cond:_horizontal",
|
|
432
|
+
"height]___[value:8]___[cond:_horizontal",
|
|
433
|
+
"background]___[value:bg.selected]___[cond:_horizontal",
|
|
434
|
+
"height]___[value:120]___[cond:_vertical",
|
|
435
|
+
"width]___[value:8]___[cond:_vertical",
|
|
436
|
+
"background]___[value:bg.neutral.subtle]___[cond:_vertical",
|
|
437
|
+
"background]___[value:bg.neutral.subtle]___[cond:_horizontal",
|
|
438
|
+
"background]___[value:bg.selected]___[cond:_vertical",
|
|
439
|
+
"borderWidth]___[value:0",
|
|
440
|
+
"borderColor]___[value:border.focused",
|
|
441
|
+
"paddingInlineStart]___[value:16",
|
|
442
|
+
"borderInlineStartWidth]___[value:4]___[cond:_ltr",
|
|
443
|
+
"borderInlineStartWidth]___[value:4]___[cond:_rtl",
|
|
444
|
+
"background]___[value:surface.raised]___[cond:_hover",
|
|
445
|
+
"outlineWidth]___[value:2]___[cond:_focusVisible",
|
|
446
|
+
"outlineStyle]___[value:solid]___[cond:_focusVisible",
|
|
447
|
+
"outlineOffset]___[value:2px]___[cond:_focusVisible",
|
|
448
|
+
"background]___[value:bg.neutral.pressed]___[cond:_active",
|
|
449
|
+
"boxShadow]___[value:none]___[cond:_active",
|
|
450
|
+
"background]___[value:bg.selected]___[cond:_pressed",
|
|
451
|
+
"borderColor]___[value:border.selected]___[cond:_pressed",
|
|
452
|
+
"color]___[value:text.selected]___[cond:_pressed",
|
|
453
|
+
"background]___[value:bg.selected]___[cond:_checked",
|
|
454
|
+
"borderColor]___[value:border.selected]___[cond:_checked",
|
|
455
|
+
"rotate]___[value:180deg]___[cond:_expanded<___>_icon",
|
|
456
|
+
"display]___[value:block]___[cond:_expanded<___>& > span",
|
|
457
|
+
"display]___[value:none]___[cond:_collapsed<___>& > span",
|
|
458
|
+
"background]___[value:bg.selected]___[cond:_open",
|
|
459
|
+
"borderColor]___[value:border.selected]___[cond:_open",
|
|
460
|
+
"color]___[value:text.selected]___[cond:_open",
|
|
461
|
+
"opacity]___[value:0.4]___[cond:_closed",
|
|
462
|
+
"background]___[value:bg.neutral.subtle]___[cond:_closed",
|
|
463
|
+
"textDecoration]___[value:line-through]___[cond:_deleted",
|
|
464
|
+
"opacity]___[value:0.4]___[cond:_deleted",
|
|
465
|
+
"color]___[value:text.subtle]___[cond:_deleted",
|
|
466
|
+
"opacity]___[value:0.5]___[cond:_loading",
|
|
467
|
+
"cursor]___[value:wait]___[cond:_loading",
|
|
468
|
+
"background]___[value:bg.selected]___[cond:_highlighted",
|
|
469
|
+
"borderColor]___[value:border.selected]___[cond:_highlighted",
|
|
470
|
+
"opacity]___[value:0]___[cond:_hidden",
|
|
471
|
+
"pointerEvents]___[value:none]___[cond:_hidden",
|
|
472
|
+
"borderColor]___[value:border.focused]___[cond:_hover",
|
|
473
|
+
"background]___[value:bg.neutral.bold]___[cond:_dark",
|
|
474
|
+
"color]___[value:text.inverse]___[cond:_dark",
|
|
475
|
+
"background]___[value:bg.neutral.subtle]___[cond:_light",
|
|
476
|
+
"color]___[value:text]___[cond:_light",
|
|
477
|
+
"background]___[value:blue.90]___[cond:_osDark",
|
|
478
|
+
"borderColor]___[value:border.info]___[cond:_osDark",
|
|
479
|
+
"background]___[value:blue.2]___[cond:_osLight",
|
|
480
|
+
"borderColor]___[value:border.info]___[cond:_osLight",
|
|
481
|
+
"padding]___[value:20",
|
|
482
|
+
"marginTop]___[value:4",
|
|
483
|
+
"marginTop]___[value:8",
|
|
484
|
+
"transitionProperty]___[value:transform",
|
|
485
|
+
"transitionDuration]___[value:normal",
|
|
486
|
+
"transitionTimingFunction]___[value:default",
|
|
487
|
+
"transform]___[value:translateY(-4px)]___[cond:_hover",
|
|
488
|
+
"transitionDuration]___[value:fastest]___[cond:_motionReduce",
|
|
489
|
+
"transform]___[value:none]___[cond:_motionReduce<___>_hover",
|
|
490
|
+
"outline]___[value:2px solid border.focus]___[cond:_highContrast",
|
|
491
|
+
"outlineOffset]___[value:2px]___[cond:_highContrast",
|
|
492
|
+
"display]___[value:none]___[cond:_print",
|
|
493
|
+
"border]___[value:disabled",
|
|
494
|
+
"borderColor]___[value:border.bold]___[cond:_moreContrast",
|
|
495
|
+
"color]___[value:text]___[cond:_moreContrast",
|
|
496
|
+
"borderWidth]___[value:2]___[cond:_moreContrast",
|
|
497
|
+
"maxHeight]___[value:96",
|
|
498
|
+
"overflowY]___[value:scroll",
|
|
499
|
+
"width]___[value:6]___[cond:_scrollbar",
|
|
500
|
+
"background]___[value:bg.selected]___[cond:_scrollbarThumb",
|
|
501
|
+
"borderRadius]___[value:999]___[cond:_scrollbarThumb",
|
|
502
|
+
"background]___[value:bg.neutral.subtle]___[cond:_scrollbarTrack",
|
|
503
|
+
"fontWeight]___[value:bold]___[cond:_first",
|
|
504
|
+
"color]___[value:text.accent.purple]___[cond:_first",
|
|
505
|
+
"fontWeight]___[value:bold]___[cond:_last",
|
|
506
|
+
"color]___[value:text.accent.yellow]___[cond:_last",
|
|
507
|
+
"background]___[value:bg.selected]___[cond:_selection",
|
|
508
|
+
"color]___[value:text.selected]___[cond:_selection",
|
|
509
|
+
"color]___[value:text.accent.purple]___[cond:_peerFocusWithin",
|
|
510
|
+
"fontWeight]___[value:bold]___[cond:_peerFocusWithin",
|
|
511
|
+
"color]___[value:text.accent.purple]___[cond:_groupHover",
|
|
512
|
+
"color]___[value:text.inverse]___[cond:_osDark",
|
|
513
|
+
"color]___[value:text]___[cond:_osLight",
|
|
514
|
+
"display]___[value:none",
|
|
515
|
+
"color]___[value:purple.30",
|
|
516
|
+
"display]___[value:block]___[cond:_osDark",
|
|
517
|
+
"color]___[value:purple.60",
|
|
518
|
+
"display]___[value:block]___[cond:_osLight",
|
|
519
|
+
"borderBottomWidth]___[value:1",
|
|
520
|
+
"borderBottomColor]___[value:border",
|
|
521
|
+
"content]___[value:\"→ \"]___[cond:_before",
|
|
522
|
+
"display]___[value:inline-block]___[cond:_before",
|
|
523
|
+
"color]___[value:text.bold]___[cond:_before",
|
|
524
|
+
"fontWeight]___[value:bold]___[cond:_before",
|
|
525
|
+
"content]___[value:\" ←\"]___[cond:_after",
|
|
526
|
+
"display]___[value:inline-block]___[cond:_after",
|
|
527
|
+
"color]___[value:text.bold]___[cond:_after",
|
|
528
|
+
"fontWeight]___[value:bold]___[cond:_after",
|
|
529
|
+
"borderColor]___[value:border.success]___[cond:_valid",
|
|
530
|
+
"borderColor]___[value:border.danger]___[cond:_invalid",
|
|
531
|
+
"color]___[value:text.accent.purple]___[cond:_placeholder",
|
|
407
532
|
"textStyle]___[value:body-lg",
|
|
408
533
|
"borderLeftWidth]___[value:4",
|
|
409
534
|
"borderLeftColor]___[value:slate.20",
|
|
@@ -412,14 +537,11 @@
|
|
|
412
537
|
"marginBlock]___[value:16",
|
|
413
538
|
"gridTemplateColumns]___[value:repeat(3, minmax(0, 1fr))",
|
|
414
539
|
"listStyleType]___[value:disc",
|
|
415
|
-
"paddingBlock]___[value:8",
|
|
416
|
-
"paddingInline]___[value:16",
|
|
417
540
|
"background]___[value:warning.lighter",
|
|
418
541
|
"color]___[value:warning.dark",
|
|
419
542
|
"width]___[value:fit-content",
|
|
420
543
|
"listStyleType]___[value:decimal",
|
|
421
544
|
"gridTemplateColumns]___[value:repeat(3, minmax(0, 1fr))]___[cond:md",
|
|
422
|
-
"padding]___[value:8",
|
|
423
545
|
"gridColumn]___[value:span 3",
|
|
424
546
|
"gridTemplateColumns]___[value:auto auto 1fr",
|
|
425
547
|
"rowGap]___[value:16",
|
|
@@ -429,7 +551,6 @@
|
|
|
429
551
|
"gridTemplateColumns]___[value:subgrid",
|
|
430
552
|
"gridColumn]___[value:2 / -1",
|
|
431
553
|
"gridColumnStart]___[value:2",
|
|
432
|
-
"marginTop]___[value:4",
|
|
433
554
|
"textAlign]___[value:right",
|
|
434
555
|
"color]___[value:text.warning",
|
|
435
556
|
"background]___[value:bg.warning",
|
|
@@ -548,7 +669,8 @@
|
|
|
548
669
|
"variant]___[value:selected]___[recipe:button",
|
|
549
670
|
"iconAfter]___[value:screwdriver]___[recipe:button",
|
|
550
671
|
"iconBefore]___[value:edit]___[recipe:button",
|
|
551
|
-
"iconAfter]___[value:caret-down]___[recipe:button"
|
|
672
|
+
"iconAfter]___[value:caret-down]___[recipe:button",
|
|
673
|
+
"iconBefore]___[value:check]___[recipe:button"
|
|
552
674
|
],
|
|
553
675
|
"iconButton": [
|
|
554
676
|
"variant]___[value:ghost]___[recipe:iconButton",
|
|
@@ -584,7 +706,14 @@
|
|
|
584
706
|
"shape]___[value:square]___[recipe:avatar",
|
|
585
707
|
"shape]___[value:hexagon]___[recipe:avatar"
|
|
586
708
|
],
|
|
587
|
-
"icon": [
|
|
709
|
+
"icon": [
|
|
710
|
+
"size]___[value:24]___[recipe:icon",
|
|
711
|
+
"size]___[value:12]___[recipe:icon",
|
|
712
|
+
"size]___[value:20]___[recipe:icon",
|
|
713
|
+
"size]___[value:32]___[recipe:icon",
|
|
714
|
+
"size]___[value:48]___[recipe:icon",
|
|
715
|
+
"size]___[value:16]___[recipe:icon"
|
|
716
|
+
],
|
|
588
717
|
"badge": [
|
|
589
718
|
"size]___[value:sm]___[recipe:badge",
|
|
590
719
|
"variant]___[value:danger]___[recipe:badge",
|
package/dist/preset.js
CHANGED
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"name": "_disabled",
|
|
54
|
-
"value": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
|
|
54
|
+
"value": "&:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true])",
|
|
55
55
|
"functionExamples": [
|
|
56
56
|
"css({ margin: { base: '2', _disabled: '4' } })",
|
|
57
57
|
"css({ margin: '2', _disabled: { margin: '4' } })"
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
},
|
|
100
100
|
{
|
|
101
101
|
"name": "_readOnly",
|
|
102
|
-
"value": "&:is(:read-only, [data-read-only], [aria-readonly=true])",
|
|
102
|
+
"value": "&:is(:read-only, [readonly], [data-read-only=true], [aria-readonly=true])",
|
|
103
103
|
"functionExamples": [
|
|
104
104
|
"css({ margin: { base: '2', _readOnly: '4' } })",
|
|
105
105
|
"css({ margin: '2', _readOnly: { margin: '4' } })"
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
},
|
|
124
124
|
{
|
|
125
125
|
"name": "_empty",
|
|
126
|
-
"value": "&:is(:empty, [data-empty])",
|
|
126
|
+
"value": "&:is(:empty, [data-empty=true])",
|
|
127
127
|
"functionExamples": [
|
|
128
128
|
"css({ margin: { base: '2', _empty: '4' } })",
|
|
129
129
|
"css({ margin: '2', _empty: { margin: '4' } })"
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
},
|
|
136
136
|
{
|
|
137
137
|
"name": "_checked",
|
|
138
|
-
"value": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"])",
|
|
138
|
+
"value": "&:is(:checked, [data-checked=true], [aria-checked=true], [data-state=\"checked\"])",
|
|
139
139
|
"functionExamples": [
|
|
140
140
|
"css({ margin: { base: '2', _checked: '4' } })",
|
|
141
141
|
"css({ margin: '2', _checked: { margin: '4' } })"
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
},
|
|
160
160
|
{
|
|
161
161
|
"name": "_expanded",
|
|
162
|
-
"value": "&:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"])",
|
|
162
|
+
"value": "&:is([aria-expanded=true], [data-expanded=true], [data-state=\"expanded\"])",
|
|
163
163
|
"functionExamples": [
|
|
164
164
|
"css({ margin: { base: '2', _expanded: '4' } })",
|
|
165
165
|
"css({ margin: '2', _expanded: { margin: '4' } })"
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
},
|
|
172
172
|
{
|
|
173
173
|
"name": "_highlighted",
|
|
174
|
-
"value": "&[data-highlighted]",
|
|
174
|
+
"value": "&[data-highlighted=true]",
|
|
175
175
|
"functionExamples": [
|
|
176
176
|
"css({ margin: { base: '2', _highlighted: '4' } })",
|
|
177
177
|
"css({ margin: '2', _highlighted: { margin: '4' } })"
|
|
@@ -183,7 +183,7 @@
|
|
|
183
183
|
},
|
|
184
184
|
{
|
|
185
185
|
"name": "_complete",
|
|
186
|
-
"value": "&[data-complete]",
|
|
186
|
+
"value": "&[data-complete=true]",
|
|
187
187
|
"functionExamples": [
|
|
188
188
|
"css({ margin: { base: '2', _complete: '4' } })",
|
|
189
189
|
"css({ margin: '2', _complete: { margin: '4' } })"
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
},
|
|
196
196
|
{
|
|
197
197
|
"name": "_incomplete",
|
|
198
|
-
"value": "&[data-incomplete]",
|
|
198
|
+
"value": "&[data-incomplete=true]",
|
|
199
199
|
"functionExamples": [
|
|
200
200
|
"css({ margin: { base: '2', _incomplete: '4' } })",
|
|
201
201
|
"css({ margin: '2', _incomplete: { margin: '4' } })"
|
|
@@ -207,7 +207,7 @@
|
|
|
207
207
|
},
|
|
208
208
|
{
|
|
209
209
|
"name": "_dragging",
|
|
210
|
-
"value": "&[data-dragging]",
|
|
210
|
+
"value": "&[data-dragging=true]",
|
|
211
211
|
"functionExamples": [
|
|
212
212
|
"css({ margin: { base: '2', _dragging: '4' } })",
|
|
213
213
|
"css({ margin: '2', _dragging: { margin: '4' } })"
|
|
@@ -411,7 +411,7 @@
|
|
|
411
411
|
},
|
|
412
412
|
{
|
|
413
413
|
"name": "_peerFocus",
|
|
414
|
-
"value": ".peer:is(:focus, [data-focus]) ~ &",
|
|
414
|
+
"value": ".peer:is(:focus, [data-focus=true]) ~ &",
|
|
415
415
|
"functionExamples": [
|
|
416
416
|
"css({ margin: { base: '2', _peerFocus: '4' } })",
|
|
417
417
|
"css({ margin: '2', _peerFocus: { margin: '4' } })"
|
|
@@ -423,7 +423,7 @@
|
|
|
423
423
|
},
|
|
424
424
|
{
|
|
425
425
|
"name": "_peerHover",
|
|
426
|
-
"value": ".peer:is(:hover, [data-hover]) ~ &",
|
|
426
|
+
"value": ".peer:is(:hover, [data-hover=true]) ~ &",
|
|
427
427
|
"functionExamples": [
|
|
428
428
|
"css({ margin: { base: '2', _peerHover: '4' } })",
|
|
429
429
|
"css({ margin: '2', _peerHover: { margin: '4' } })"
|
|
@@ -435,7 +435,7 @@
|
|
|
435
435
|
},
|
|
436
436
|
{
|
|
437
437
|
"name": "_peerActive",
|
|
438
|
-
"value": ".peer:is(:active, [data-active]) ~ &",
|
|
438
|
+
"value": ".peer:is(:active, [data-active=true]) ~ &",
|
|
439
439
|
"functionExamples": [
|
|
440
440
|
"css({ margin: { base: '2', _peerActive: '4' } })",
|
|
441
441
|
"css({ margin: '2', _peerActive: { margin: '4' } })"
|
|
@@ -471,7 +471,7 @@
|
|
|
471
471
|
},
|
|
472
472
|
{
|
|
473
473
|
"name": "_peerDisabled",
|
|
474
|
-
"value": ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
|
|
474
|
+
"value": ".peer:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) ~ &",
|
|
475
475
|
"functionExamples": [
|
|
476
476
|
"css({ margin: { base: '2', _peerDisabled: '4' } })",
|
|
477
477
|
"css({ margin: '2', _peerDisabled: { margin: '4' } })"
|
|
@@ -483,7 +483,7 @@
|
|
|
483
483
|
},
|
|
484
484
|
{
|
|
485
485
|
"name": "_peerChecked",
|
|
486
|
-
"value": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) ~ &",
|
|
486
|
+
"value": ".peer:is(:checked, [data-checked=true], [aria-checked=true], [data-state=\"checked\"]) ~ &",
|
|
487
487
|
"functionExamples": [
|
|
488
488
|
"css({ margin: { base: '2', _peerChecked: '4' } })",
|
|
489
489
|
"css({ margin: '2', _peerChecked: { margin: '4' } })"
|
|
@@ -495,7 +495,7 @@
|
|
|
495
495
|
},
|
|
496
496
|
{
|
|
497
497
|
"name": "_peerInvalid",
|
|
498
|
-
"value": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
|
|
498
|
+
"value": ".peer:is(:invalid, [data-invalid=true], [aria-invalid=true]) ~ &",
|
|
499
499
|
"functionExamples": [
|
|
500
500
|
"css({ margin: { base: '2', _peerInvalid: '4' } })",
|
|
501
501
|
"css({ margin: '2', _peerInvalid: { margin: '4' } })"
|
|
@@ -507,7 +507,7 @@
|
|
|
507
507
|
},
|
|
508
508
|
{
|
|
509
509
|
"name": "_peerExpanded",
|
|
510
|
-
"value": ".peer:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) ~ &",
|
|
510
|
+
"value": ".peer:is([aria-expanded=true], [data-expanded=true], [data-state=\"expanded\"]) ~ &",
|
|
511
511
|
"functionExamples": [
|
|
512
512
|
"css({ margin: { base: '2', _peerExpanded: '4' } })",
|
|
513
513
|
"css({ margin: '2', _peerExpanded: { margin: '4' } })"
|
|
@@ -531,7 +531,7 @@
|
|
|
531
531
|
},
|
|
532
532
|
{
|
|
533
533
|
"name": "_groupFocus",
|
|
534
|
-
"value": ".group:is(:focus, [data-focus]) &",
|
|
534
|
+
"value": ".group:is(:focus, [data-focus=true]) &",
|
|
535
535
|
"functionExamples": [
|
|
536
536
|
"css({ margin: { base: '2', _groupFocus: '4' } })",
|
|
537
537
|
"css({ margin: '2', _groupFocus: { margin: '4' } })"
|
|
@@ -543,7 +543,7 @@
|
|
|
543
543
|
},
|
|
544
544
|
{
|
|
545
545
|
"name": "_groupHover",
|
|
546
|
-
"value": ".group:is(:hover, [data-hover]) &",
|
|
546
|
+
"value": ".group:is(:hover, [data-hover=true]) &",
|
|
547
547
|
"functionExamples": [
|
|
548
548
|
"css({ margin: { base: '2', _groupHover: '4' } })",
|
|
549
549
|
"css({ margin: '2', _groupHover: { margin: '4' } })"
|
|
@@ -555,7 +555,7 @@
|
|
|
555
555
|
},
|
|
556
556
|
{
|
|
557
557
|
"name": "_groupActive",
|
|
558
|
-
"value": ".group:is(:active, [data-active]) &",
|
|
558
|
+
"value": ".group:is(:active, [data-active=true]) &",
|
|
559
559
|
"functionExamples": [
|
|
560
560
|
"css({ margin: { base: '2', _groupActive: '4' } })",
|
|
561
561
|
"css({ margin: '2', _groupActive: { margin: '4' } })"
|
|
@@ -579,7 +579,7 @@
|
|
|
579
579
|
},
|
|
580
580
|
{
|
|
581
581
|
"name": "_groupFocusVisible",
|
|
582
|
-
"value": ".group:is(:focus-visible, [data-focus-visible]) &",
|
|
582
|
+
"value": ".group:is(:focus-visible, [data-focus-visible=true]) &",
|
|
583
583
|
"functionExamples": [
|
|
584
584
|
"css({ margin: { base: '2', _groupFocusVisible: '4' } })",
|
|
585
585
|
"css({ margin: '2', _groupFocusVisible: { margin: '4' } })"
|
|
@@ -591,7 +591,7 @@
|
|
|
591
591
|
},
|
|
592
592
|
{
|
|
593
593
|
"name": "_groupDisabled",
|
|
594
|
-
"value": ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
|
|
594
|
+
"value": ".group:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) &",
|
|
595
595
|
"functionExamples": [
|
|
596
596
|
"css({ margin: { base: '2', _groupDisabled: '4' } })",
|
|
597
597
|
"css({ margin: '2', _groupDisabled: { margin: '4' } })"
|
|
@@ -603,7 +603,7 @@
|
|
|
603
603
|
},
|
|
604
604
|
{
|
|
605
605
|
"name": "_groupChecked",
|
|
606
|
-
"value": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=\"checked\"]) &",
|
|
606
|
+
"value": ".group:is(:checked, [data-checked=true], [aria-checked=true], [data-state=\"checked\"]) &",
|
|
607
607
|
"functionExamples": [
|
|
608
608
|
"css({ margin: { base: '2', _groupChecked: '4' } })",
|
|
609
609
|
"css({ margin: '2', _groupChecked: { margin: '4' } })"
|
|
@@ -615,7 +615,7 @@
|
|
|
615
615
|
},
|
|
616
616
|
{
|
|
617
617
|
"name": "_groupExpanded",
|
|
618
|
-
"value": ".group:is([aria-expanded=true], [data-expanded], [data-state=\"expanded\"]) &",
|
|
618
|
+
"value": ".group:is([aria-expanded=true], [data-expanded=true], [data-state=\"expanded\"]) &",
|
|
619
619
|
"functionExamples": [
|
|
620
620
|
"css({ margin: { base: '2', _groupExpanded: '4' } })",
|
|
621
621
|
"css({ margin: '2', _groupExpanded: { margin: '4' } })"
|
|
@@ -627,7 +627,7 @@
|
|
|
627
627
|
},
|
|
628
628
|
{
|
|
629
629
|
"name": "_groupInvalid",
|
|
630
|
-
"value": ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
|
|
630
|
+
"value": ".group:is(:invalid, [data-invalid=true], [aria-invalid=true]) &",
|
|
631
631
|
"functionExamples": [
|
|
632
632
|
"css({ margin: { base: '2', _groupInvalid: '4' } })",
|
|
633
633
|
"css({ margin: '2', _groupInvalid: { margin: '4' } })"
|
|
@@ -639,7 +639,7 @@
|
|
|
639
639
|
},
|
|
640
640
|
{
|
|
641
641
|
"name": "_indeterminate",
|
|
642
|
-
"value": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=\"indeterminate\"])",
|
|
642
|
+
"value": "&:is(:indeterminate, [data-indeterminate=true], [aria-checked=mixed], [data-state=\"indeterminate\"])",
|
|
643
643
|
"functionExamples": [
|
|
644
644
|
"css({ margin: { base: '2', _indeterminate: '4' } })",
|
|
645
645
|
"css({ margin: '2', _indeterminate: { margin: '4' } })"
|
|
@@ -651,7 +651,7 @@
|
|
|
651
651
|
},
|
|
652
652
|
{
|
|
653
653
|
"name": "_required",
|
|
654
|
-
"value": "&:is(:required, [data-required], [aria-required=true])",
|
|
654
|
+
"value": "&:is(:required, [data-required=true], [aria-required=true])",
|
|
655
655
|
"functionExamples": [
|
|
656
656
|
"css({ margin: { base: '2', _required: '4' } })",
|
|
657
657
|
"css({ margin: '2', _required: { margin: '4' } })"
|
|
@@ -663,7 +663,7 @@
|
|
|
663
663
|
},
|
|
664
664
|
{
|
|
665
665
|
"name": "_valid",
|
|
666
|
-
"value": "&:is(:valid, [data-valid])",
|
|
666
|
+
"value": "&:is(:valid, [data-valid=true])",
|
|
667
667
|
"functionExamples": [
|
|
668
668
|
"css({ margin: { base: '2', _valid: '4' } })",
|
|
669
669
|
"css({ margin: '2', _valid: { margin: '4' } })"
|
|
@@ -675,7 +675,7 @@
|
|
|
675
675
|
},
|
|
676
676
|
{
|
|
677
677
|
"name": "_invalid",
|
|
678
|
-
"value": "&:is(:invalid, [data-invalid], [aria-invalid=true])",
|
|
678
|
+
"value": "&:is(:invalid, [data-invalid=true], [aria-invalid=true])",
|
|
679
679
|
"functionExamples": [
|
|
680
680
|
"css({ margin: { base: '2', _invalid: '4' } })",
|
|
681
681
|
"css({ margin: '2', _invalid: { margin: '4' } })"
|
|
@@ -699,7 +699,7 @@
|
|
|
699
699
|
},
|
|
700
700
|
{
|
|
701
701
|
"name": "_inRange",
|
|
702
|
-
"value": "&:is(:in-range, [data-in-range])",
|
|
702
|
+
"value": "&:is(:in-range, [data-in-range=true])",
|
|
703
703
|
"functionExamples": [
|
|
704
704
|
"css({ margin: { base: '2', _inRange: '4' } })",
|
|
705
705
|
"css({ margin: '2', _inRange: { margin: '4' } })"
|
|
@@ -711,7 +711,7 @@
|
|
|
711
711
|
},
|
|
712
712
|
{
|
|
713
713
|
"name": "_outOfRange",
|
|
714
|
-
"value": "&:is(:out-of-range, [data-outside-range])",
|
|
714
|
+
"value": "&:is(:out-of-range, [data-outside-range=true])",
|
|
715
715
|
"functionExamples": [
|
|
716
716
|
"css({ margin: { base: '2', _outOfRange: '4' } })",
|
|
717
717
|
"css({ margin: '2', _outOfRange: { margin: '4' } })"
|
|
@@ -723,7 +723,7 @@
|
|
|
723
723
|
},
|
|
724
724
|
{
|
|
725
725
|
"name": "_placeholder",
|
|
726
|
-
"value": "&::placeholder, &[data-placeholder]",
|
|
726
|
+
"value": "&::placeholder, &[data-placeholder=true]",
|
|
727
727
|
"functionExamples": [
|
|
728
728
|
"css({ margin: { base: '2', _placeholder: '4' } })",
|
|
729
729
|
"css({ margin: '2', _placeholder: { margin: '4' } })"
|
|
@@ -735,7 +735,7 @@
|
|
|
735
735
|
},
|
|
736
736
|
{
|
|
737
737
|
"name": "_placeholderShown",
|
|
738
|
-
"value": "&:is(:placeholder-shown, [data-placeholder-shown])",
|
|
738
|
+
"value": "&:is(:placeholder-shown, [data-placeholder-shown=true])",
|
|
739
739
|
"functionExamples": [
|
|
740
740
|
"css({ margin: { base: '2', _placeholderShown: '4' } })",
|
|
741
741
|
"css({ margin: '2', _placeholderShown: { margin: '4' } })"
|
|
@@ -747,7 +747,7 @@
|
|
|
747
747
|
},
|
|
748
748
|
{
|
|
749
749
|
"name": "_pressed",
|
|
750
|
-
"value": "&:is([aria-pressed=true], [data-pressed])",
|
|
750
|
+
"value": "&:is([aria-pressed=true], [data-pressed=true])",
|
|
751
751
|
"functionExamples": [
|
|
752
752
|
"css({ margin: { base: '2', _pressed: '4' } })",
|
|
753
753
|
"css({ margin: '2', _pressed: { margin: '4' } })"
|
|
@@ -771,7 +771,7 @@
|
|
|
771
771
|
},
|
|
772
772
|
{
|
|
773
773
|
"name": "_grabbed",
|
|
774
|
-
"value": "&:is([aria-grabbed=true], [data-grabbed])",
|
|
774
|
+
"value": "&:is([aria-grabbed=true], [data-grabbed=true])",
|
|
775
775
|
"functionExamples": [
|
|
776
776
|
"css({ margin: { base: '2', _grabbed: '4' } })",
|
|
777
777
|
"css({ margin: '2', _grabbed: { margin: '4' } })"
|
|
@@ -783,7 +783,7 @@
|
|
|
783
783
|
},
|
|
784
784
|
{
|
|
785
785
|
"name": "_underValue",
|
|
786
|
-
"value": "&[data-state
|
|
786
|
+
"value": "&[data-state=\"under-value\"]",
|
|
787
787
|
"functionExamples": [
|
|
788
788
|
"css({ margin: { base: '2', _underValue: '4' } })",
|
|
789
789
|
"css({ margin: '2', _underValue: { margin: '4' } })"
|
|
@@ -795,7 +795,7 @@
|
|
|
795
795
|
},
|
|
796
796
|
{
|
|
797
797
|
"name": "_overValue",
|
|
798
|
-
"value": "&[data-state
|
|
798
|
+
"value": "&[data-state=\"over-value\"]",
|
|
799
799
|
"functionExamples": [
|
|
800
800
|
"css({ margin: { base: '2', _overValue: '4' } })",
|
|
801
801
|
"css({ margin: '2', _overValue: { margin: '4' } })"
|
|
@@ -807,7 +807,7 @@
|
|
|
807
807
|
},
|
|
808
808
|
{
|
|
809
809
|
"name": "_atValue",
|
|
810
|
-
"value": "&[data-state
|
|
810
|
+
"value": "&[data-state=\"at-value\"]",
|
|
811
811
|
"functionExamples": [
|
|
812
812
|
"css({ margin: { base: '2', _atValue: '4' } })",
|
|
813
813
|
"css({ margin: '2', _atValue: { margin: '4' } })"
|
|
@@ -843,7 +843,7 @@
|
|
|
843
843
|
},
|
|
844
844
|
{
|
|
845
845
|
"name": "_open",
|
|
846
|
-
"value": "&:is([open], [data-open], [data-state=\"open\"], :popover-open)",
|
|
846
|
+
"value": "&:is([open], [data-open=true], [data-state=\"open\"], :popover-open)",
|
|
847
847
|
"functionExamples": [
|
|
848
848
|
"css({ margin: { base: '2', _open: '4' } })",
|
|
849
849
|
"css({ margin: '2', _open: { margin: '4' } })"
|
|
@@ -855,7 +855,7 @@
|
|
|
855
855
|
},
|
|
856
856
|
{
|
|
857
857
|
"name": "_closed",
|
|
858
|
-
"value": "&:is([closed], [data-closed], [data-state=\"closed\"])",
|
|
858
|
+
"value": "&:is([closed], [data-closed=true], [data-state=\"closed\"])",
|
|
859
859
|
"functionExamples": [
|
|
860
860
|
"css({ margin: { base: '2', _closed: '4' } })",
|
|
861
861
|
"css({ margin: '2', _closed: { margin: '4' } })"
|
|
@@ -867,7 +867,7 @@
|
|
|
867
867
|
},
|
|
868
868
|
{
|
|
869
869
|
"name": "_fullscreen",
|
|
870
|
-
"value": "&:is(:fullscreen, [data-fullscreen])",
|
|
870
|
+
"value": "&:is(:fullscreen, [data-fullscreen=true])",
|
|
871
871
|
"functionExamples": [
|
|
872
872
|
"css({ margin: { base: '2', _fullscreen: '4' } })",
|
|
873
873
|
"css({ margin: '2', _fullscreen: { margin: '4' } })"
|
|
@@ -879,7 +879,7 @@
|
|
|
879
879
|
},
|
|
880
880
|
{
|
|
881
881
|
"name": "_loading",
|
|
882
|
-
"value": "&:is([data-loading], [aria-busy=true])",
|
|
882
|
+
"value": "&:is([data-loading=true], [aria-busy=true])",
|
|
883
883
|
"functionExamples": [
|
|
884
884
|
"css({ margin: { base: '2', _loading: '4' } })",
|
|
885
885
|
"css({ margin: '2', _loading: { margin: '4' } })"
|
|
@@ -891,7 +891,7 @@
|
|
|
891
891
|
},
|
|
892
892
|
{
|
|
893
893
|
"name": "_hidden",
|
|
894
|
-
"value": "&:is([hidden], [data-hidden])",
|
|
894
|
+
"value": "&:is([hidden], [data-hidden=true])",
|
|
895
895
|
"functionExamples": [
|
|
896
896
|
"css({ margin: { base: '2', _hidden: '4' } })",
|
|
897
897
|
"css({ margin: '2', _hidden: { margin: '4' } })"
|
|
@@ -903,7 +903,7 @@
|
|
|
903
903
|
},
|
|
904
904
|
{
|
|
905
905
|
"name": "_current",
|
|
906
|
-
"value": "&:is([aria-current=true], [data-current])",
|
|
906
|
+
"value": "&:is([aria-current=true], [data-current=true])",
|
|
907
907
|
"functionExamples": [
|
|
908
908
|
"css({ margin: { base: '2', _current: '4' } })",
|
|
909
909
|
"css({ margin: '2', _current: { margin: '4' } })"
|
|
@@ -939,7 +939,7 @@
|
|
|
939
939
|
},
|
|
940
940
|
{
|
|
941
941
|
"name": "_today",
|
|
942
|
-
"value": "&:is([data-today])",
|
|
942
|
+
"value": "&:is([data-today=true])",
|
|
943
943
|
"functionExamples": [
|
|
944
944
|
"css({ margin: { base: '2', _today: '4' } })",
|
|
945
945
|
"css({ margin: '2', _today: { margin: '4' } })"
|
|
@@ -951,7 +951,7 @@
|
|
|
951
951
|
},
|
|
952
952
|
{
|
|
953
953
|
"name": "_unavailable",
|
|
954
|
-
"value": "&[data-unavailable]",
|
|
954
|
+
"value": "&[data-unavailable=true]",
|
|
955
955
|
"functionExamples": [
|
|
956
956
|
"css({ margin: { base: '2', _unavailable: '4' } })",
|
|
957
957
|
"css({ margin: '2', _unavailable: { margin: '4' } })"
|
|
@@ -963,7 +963,7 @@
|
|
|
963
963
|
},
|
|
964
964
|
{
|
|
965
965
|
"name": "_rangeStart",
|
|
966
|
-
"value": "&[data-range-start]",
|
|
966
|
+
"value": "&[data-range-start=true]",
|
|
967
967
|
"functionExamples": [
|
|
968
968
|
"css({ margin: { base: '2', _rangeStart: '4' } })",
|
|
969
969
|
"css({ margin: '2', _rangeStart: { margin: '4' } })"
|
|
@@ -975,7 +975,7 @@
|
|
|
975
975
|
},
|
|
976
976
|
{
|
|
977
977
|
"name": "_rangeEnd",
|
|
978
|
-
"value": "&[data-range-end]",
|
|
978
|
+
"value": "&[data-range-end=true]",
|
|
979
979
|
"functionExamples": [
|
|
980
980
|
"css({ margin: { base: '2', _rangeEnd: '4' } })",
|
|
981
981
|
"css({ margin: '2', _rangeEnd: { margin: '4' } })"
|
|
@@ -987,7 +987,7 @@
|
|
|
987
987
|
},
|
|
988
988
|
{
|
|
989
989
|
"name": "_now",
|
|
990
|
-
"value": "&[data-now]",
|
|
990
|
+
"value": "&[data-now=true]",
|
|
991
991
|
"functionExamples": [
|
|
992
992
|
"css({ margin: { base: '2', _now: '4' } })",
|
|
993
993
|
"css({ margin: '2', _now: { margin: '4' } })"
|
|
@@ -999,7 +999,7 @@
|
|
|
999
999
|
},
|
|
1000
1000
|
{
|
|
1001
1001
|
"name": "_topmost",
|
|
1002
|
-
"value": "&[data-topmost]",
|
|
1002
|
+
"value": "&[data-topmost=true]",
|
|
1003
1003
|
"functionExamples": [
|
|
1004
1004
|
"css({ margin: { base: '2', _topmost: '4' } })",
|
|
1005
1005
|
"css({ margin: '2', _topmost: { margin: '4' } })"
|
|
@@ -1071,7 +1071,7 @@
|
|
|
1071
1071
|
},
|
|
1072
1072
|
{
|
|
1073
1073
|
"name": "_dark",
|
|
1074
|
-
"value": ".dark &, &:is([data-color-mode
|
|
1074
|
+
"value": ".dark &, &:is([data-color-mode=\"dark\"] *), [data-color-mode=\"dark\"] &",
|
|
1075
1075
|
"functionExamples": [
|
|
1076
1076
|
"css({ margin: { base: '2', _dark: '4' } })",
|
|
1077
1077
|
"css({ margin: '2', _dark: { margin: '4' } })"
|
|
@@ -1083,7 +1083,7 @@
|
|
|
1083
1083
|
},
|
|
1084
1084
|
{
|
|
1085
1085
|
"name": "_light",
|
|
1086
|
-
"value": ".light &, &:is([data-color-mode
|
|
1086
|
+
"value": ".light &, &:is([data-color-mode=\"light\"] *), [data-color-mode=\"light\"] &",
|
|
1087
1087
|
"functionExamples": [
|
|
1088
1088
|
"css({ margin: { base: '2', _light: '4' } })",
|
|
1089
1089
|
"css({ margin: '2', _light: { margin: '4' } })"
|
|
@@ -1299,7 +1299,7 @@
|
|
|
1299
1299
|
},
|
|
1300
1300
|
{
|
|
1301
1301
|
"name": "_collapsed",
|
|
1302
|
-
"value": "&:is([aria-collapsed=true], [data-collapsed], [data-state=\"collapsed\"])",
|
|
1302
|
+
"value": "&:is([aria-collapsed=true], [data-collapsed=true], [data-state=\"collapsed\"])",
|
|
1303
1303
|
"functionExamples": [
|
|
1304
1304
|
"css({ margin: { base: '2', _collapsed: '4' } })",
|
|
1305
1305
|
"css({ margin: '2', _collapsed: { margin: '4' } })"
|
|
@@ -1323,7 +1323,7 @@
|
|
|
1323
1323
|
},
|
|
1324
1324
|
{
|
|
1325
1325
|
"name": "_error",
|
|
1326
|
-
"value": "&:is([data-error
|
|
1326
|
+
"value": "&:is([data-error=true])",
|
|
1327
1327
|
"functionExamples": [
|
|
1328
1328
|
"css({ margin: { base: '2', _error: '4' } })",
|
|
1329
1329
|
"css({ margin: '2', _error: { margin: '4' } })"
|