@pandacss/studio 0.15.1 → 0.15.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 (97) hide show
  1. package/astro.config.mjs +1 -1
  2. package/dist/studio.d.mts +3 -2
  3. package/dist/studio.d.ts +3 -2
  4. package/dist/studio.js +10 -4
  5. package/dist/studio.mjs +10 -4
  6. package/package.json +8 -8
  7. package/src/lib/panda.context.ts +3 -5
  8. package/src/lib/virtual-panda.d.ts +3 -0
  9. package/styled-system/chunks/src__components__analyzer__category-utilities.css +61 -168
  10. package/styled-system/chunks/src__components__analyzer__data-combobox.css +69 -114
  11. package/styled-system/chunks/src__components__analyzer__data-table.css +24 -23
  12. package/styled-system/chunks/src__components__analyzer__file-details.css +53 -112
  13. package/styled-system/chunks/src__components__analyzer__report-item-columns.css +20 -19
  14. package/styled-system/chunks/src__components__analyzer__report-item-link.css +39 -222
  15. package/styled-system/chunks/src__components__analyzer__section.css +16 -15
  16. package/styled-system/chunks/src__components__analyzer__text-with-count.css +18 -17
  17. package/styled-system/chunks/src__components__analyzer__truncated-text.css +10 -9
  18. package/styled-system/chunks/src__components__analyzer__utility-details.css +71 -178
  19. package/styled-system/chunks/src__components__color-constrast.css +54 -61
  20. package/styled-system/chunks/src__components__color-item.css +12 -11
  21. package/styled-system/chunks/src__components__color-wrapper.css +37 -196
  22. package/styled-system/chunks/src__components__colors.css +54 -53
  23. package/styled-system/chunks/src__components__empty-state.css +24 -23
  24. package/styled-system/chunks/src__components__font-family.css +44 -43
  25. package/styled-system/chunks/src__components__font-tokens.css +32 -31
  26. package/styled-system/chunks/src__components__input.css +34 -137
  27. package/styled-system/chunks/src__components__layer-styles.css +34 -76
  28. package/styled-system/chunks/src__components__nav-item.css +37 -161
  29. package/styled-system/chunks/src__components__overview.css +63 -102
  30. package/styled-system/chunks/src__components__radii.css +26 -25
  31. package/styled-system/chunks/src__components__semantic-color.css +34 -33
  32. package/styled-system/chunks/src__components__side-nav-item.css +17 -56
  33. package/styled-system/chunks/src__components__side-nav.css +26 -25
  34. package/styled-system/chunks/src__components__sizes.css +22 -21
  35. package/styled-system/chunks/src__components__text-styles.css +16 -15
  36. package/styled-system/chunks/src__components__theme-toggle.css +28 -47
  37. package/styled-system/chunks/src__components__token-analyzer.css +114 -379
  38. package/styled-system/chunks/src__components__token-content.css +8 -7
  39. package/styled-system/chunks/src__components__token-group.css +12 -11
  40. package/styled-system/chunks/src__components__typography-playground.css +32 -31
  41. package/styled-system/chunks/src__layouts__Sidebar.css +59 -94
  42. package/styled-system/jsx/aspect-ratio.d.ts +1 -1
  43. package/styled-system/jsx/bleed.d.ts +1 -1
  44. package/styled-system/jsx/box.d.ts +1 -1
  45. package/styled-system/jsx/center.d.ts +1 -1
  46. package/styled-system/jsx/circle.d.ts +1 -1
  47. package/styled-system/jsx/container.d.ts +1 -1
  48. package/styled-system/jsx/divider.d.ts +1 -1
  49. package/styled-system/jsx/flex.d.ts +1 -1
  50. package/styled-system/jsx/float.d.ts +1 -1
  51. package/styled-system/jsx/grid-item.d.ts +1 -1
  52. package/styled-system/jsx/grid.d.ts +1 -1
  53. package/styled-system/jsx/hstack.d.ts +1 -1
  54. package/styled-system/jsx/link-box.d.ts +1 -1
  55. package/styled-system/jsx/link-overlay.d.ts +1 -1
  56. package/styled-system/jsx/spacer.d.ts +1 -1
  57. package/styled-system/jsx/square.d.ts +1 -1
  58. package/styled-system/jsx/stack.d.ts +1 -1
  59. package/styled-system/jsx/styled-link.d.ts +1 -1
  60. package/styled-system/jsx/visually-hidden.d.ts +1 -1
  61. package/styled-system/jsx/vstack.d.ts +1 -1
  62. package/styled-system/jsx/wrap.d.ts +1 -1
  63. package/styled-system/patterns/aspect-ratio.d.ts +2 -2
  64. package/styled-system/patterns/bleed.d.ts +2 -2
  65. package/styled-system/patterns/box.d.ts +2 -2
  66. package/styled-system/patterns/center.d.ts +2 -2
  67. package/styled-system/patterns/circle.d.ts +2 -2
  68. package/styled-system/patterns/container.d.ts +2 -2
  69. package/styled-system/patterns/divider.d.ts +2 -2
  70. package/styled-system/patterns/flex.d.ts +2 -2
  71. package/styled-system/patterns/float.d.ts +2 -2
  72. package/styled-system/patterns/grid-item.d.ts +2 -2
  73. package/styled-system/patterns/grid.d.ts +2 -2
  74. package/styled-system/patterns/hstack.d.ts +2 -2
  75. package/styled-system/patterns/link-box.d.ts +2 -2
  76. package/styled-system/patterns/link-overlay.d.ts +2 -2
  77. package/styled-system/patterns/spacer.d.ts +2 -2
  78. package/styled-system/patterns/square.d.ts +2 -2
  79. package/styled-system/patterns/stack.d.ts +2 -2
  80. package/styled-system/patterns/styled-link.d.ts +2 -2
  81. package/styled-system/patterns/visually-hidden.d.ts +2 -2
  82. package/styled-system/patterns/vstack.d.ts +2 -2
  83. package/styled-system/patterns/wrap.d.ts +2 -2
  84. package/styled-system/styles.css +507 -516
  85. package/styled-system/tokens/index.css +8 -8
  86. package/styled-system/types/composition.d.ts +3 -3
  87. package/styled-system/types/conditions.d.ts +227 -114
  88. package/styled-system/types/global.d.ts +7 -7
  89. package/styled-system/types/index.d.ts +6 -4
  90. package/styled-system/types/jsx.d.ts +3 -3
  91. package/styled-system/types/parts.d.ts +1 -1
  92. package/styled-system/types/pattern.d.ts +2 -2
  93. package/styled-system/types/prop-type.d.ts +2 -2
  94. package/styled-system/types/recipe.d.ts +9 -6
  95. package/styled-system/types/style-props.d.ts +1 -1
  96. package/styled-system/types/system-types.d.ts +12 -6
  97. package/{virtual-panda.mjs → virtual-panda.ts} +24 -28
package/styled-system/chunks/src__components__input.css CHANGED
@@ -1,161 +1,58 @@
1
1
  @layer utilities {
2
- .dark\:text_neutral\.300 {
3
- &.dark,
4
- .dark & {
5
- color: var(--colors-neutral-300);
6
- }
7
- }
8
-
9
- .focusWithin\:outline-style_solid {
10
- &:focus-within {
11
- outline-style: solid;
12
- }
13
- }
14
-
15
- .focusWithin\:ring_2px {
16
- &:focus-within {
17
- outline-width: 2px;
18
- }
19
- }
20
-
21
- .focusWithin\:ring_2px {
22
- &:focus-within {
23
- outline-offset: 2px;
24
- }
25
- }
26
-
27
- .focusWithin\:ring_neutral\.400 {
28
- &:focus-within {
29
- outline-color: var(--colors-neutral-400);
30
- }
31
- }
32
-
33
- .dark\:text_neutral\.300 {
34
- &.dark,
35
- .dark & {
36
- color: var(--colors-neutral-300);
37
- }
38
- }
39
-
40
- .focusWithin\:outline-style_solid {
41
- &:focus-within {
42
- outline-style: solid;
43
- }
44
- }
45
-
46
- .focusWithin\:ring_2px {
47
- &:focus-within {
48
- outline-width: 2px;
49
- }
50
- }
51
-
52
- .focusWithin\:ring_2px {
53
- &:focus-within {
54
- outline-offset: 2px;
55
- }
56
- }
57
-
58
- .focusWithin\:ring_neutral\.400 {
59
- &:focus-within {
60
- outline-color: var(--colors-neutral-400);
61
- }
62
- }
63
-
64
- .dark\:text_neutral\.300 {
65
- &.dark,
66
- .dark & {
67
- color: var(--colors-neutral-300);
68
- }
69
- }
70
-
71
- .focusWithin\:outline-style_solid {
72
- &:focus-within {
73
- outline-style: solid;
74
- }
75
- }
76
-
77
- .focusWithin\:ring_2px {
78
- &:focus-within {
79
- outline-width: 2px;
80
- }
81
- }
82
-
83
- .focusWithin\:ring_2px {
84
- &:focus-within {
85
- outline-offset: 2px;
86
- }
87
- }
88
-
89
- .focusWithin\:ring_neutral\.400 {
90
- &:focus-within {
91
- outline-color: var(--colors-neutral-400);
92
- }
93
- }
94
2
 
95
3
  .bg_transparent {
96
- background: var(--colors-transparent);
97
- }
4
+ background: var(--colors-transparent)
5
+ }
98
6
 
99
7
  .w_full {
100
- width: var(--sizes-full);
101
- }
8
+ width: var(--sizes-full)
9
+ }
102
10
 
103
11
  .px_4 {
104
- padding-inline: var(--spacing-4);
105
- }
12
+ padding-inline: var(--spacing-4)
13
+ }
106
14
 
107
15
  .py_2 {
108
- padding-block: var(--spacing-2);
109
- }
16
+ padding-block: var(--spacing-2)
17
+ }
110
18
 
111
19
  .rounded_md {
112
- border-radius: var(--radii-md);
113
- }
20
+ border-radius: var(--radii-md)
21
+ }
114
22
 
115
23
  .text_neutral\.600 {
116
- color: var(--colors-neutral-600);
117
- }
118
-
119
- .dark\:text_neutral\.300 {
120
- &.dark,
121
- .dark & {
122
- color: var(--colors-neutral-300);
24
+ color: var(--colors-neutral-600)
123
25
  }
124
- }
26
+
27
+ .dark\:text_neutral\.300.dark, .dark .dark\:text_neutral\.300 {
28
+ color: var(--colors-neutral-300)
29
+ }
125
30
 
126
31
  .shadow_sm {
127
- box-shadow: var(--shadows-sm);
128
- }
32
+ box-shadow: var(--shadows-sm)
33
+ }
129
34
 
130
35
  .border-width_1px {
131
- border-width: 1px;
132
- }
36
+ border-width: 1px
37
+ }
133
38
 
134
39
  .border_border {
135
- border-color: var(--colors-border);
136
- }
137
-
138
- .focusWithin\:outline-style_solid {
139
- &:focus-within {
140
- outline-style: solid;
40
+ border-color: var(--colors-border)
141
41
  }
142
- }
143
42
 
144
- .focusWithin\:ring_2px {
145
- &:focus-within {
146
- outline-width: 2px;
147
- }
148
- }
43
+ .focusWithin\:outline-style_solid:focus-within {
44
+ outline-style: solid
45
+ }
149
46
 
150
- .focusWithin\:ring_2px {
151
- &:focus-within {
152
- outline-offset: 2px;
153
- }
154
- }
47
+ .focusWithin\:ring_2px:focus-within {
48
+ outline-width: 2px
49
+ }
155
50
 
156
- .focusWithin\:ring_neutral\.400 {
157
- &:focus-within {
158
- outline-color: var(--colors-neutral-400);
159
- }
160
- }
161
- }
51
+ .focusWithin\:ring_2px:focus-within {
52
+ outline-offset: 2px
53
+ }
54
+
55
+ .focusWithin\:ring_neutral\.400:focus-within {
56
+ outline-color: var(--colors-neutral-400)
57
+ }
58
+ }
package/styled-system/chunks/src__components__layer-styles.css CHANGED
@@ -1,105 +1,63 @@
1
1
  @layer utilities {
2
- .divide-y_1px {
3
- & > :not([hidden]) ~ :not([hidden]) {
4
- border-top-width: 1px;
5
- border-bottom-width: 0px;
6
- }
7
- }
8
-
9
- .divide_card {
10
- & > :not([hidden]) ~ :not([hidden]) {
11
- border-color: var(--colors-card);
12
- }
13
- }
14
2
 
15
- .divide-y_1px {
16
- & > :not([hidden]) ~ :not([hidden]) {
17
- border-top-width: 1px;
18
- border-bottom-width: 0px;
19
- }
20
- }
3
+ .divide-y_1px > :not([hidden]) ~ :not([hidden]) {
4
+ border-top-width: 1px;
5
+ border-bottom-width: 0px
6
+ }
21
7
 
22
- .divide_card {
23
- & > :not([hidden]) ~ :not([hidden]) {
24
- border-color: var(--colors-card);
25
- }
26
- }
27
-
28
- .divide-y_1px {
29
- & > :not([hidden]) ~ :not([hidden]) {
30
- border-top-width: 1px;
31
- border-bottom-width: 0px;
32
- }
33
- }
34
-
35
- .divide_card {
36
- & > :not([hidden]) ~ :not([hidden]) {
37
- border-color: var(--colors-card);
38
- }
39
- }
40
-
41
- .divide-y_1px {
42
- & > :not([hidden]) ~ :not([hidden]) {
43
- border-top-width: 1px;
44
- border-bottom-width: 0px;
45
- }
46
- }
47
-
48
- .divide_card {
49
- & > :not([hidden]) ~ :not([hidden]) {
50
- border-color: var(--colors-card);
51
- }
52
- }
8
+ .divide_card > :not([hidden]) ~ :not([hidden]) {
9
+ border-color: var(--colors-card)
10
+ }
53
11
 
54
12
  .px_1 {
55
- padding-inline: var(--spacing-1);
56
- }
13
+ padding-inline: var(--spacing-1)
14
+ }
57
15
 
58
16
  .py_2\.5 {
59
- padding-block: var(--spacing-2\.5);
60
- }
17
+ padding-block: var(--spacing-2\.5)
18
+ }
61
19
 
62
20
  .border_card {
63
- border-color: var(--colors-card);
64
- }
21
+ border-color: var(--colors-card)
22
+ }
65
23
 
66
24
  .fs_small {
67
- font-size: small;
68
- }
25
+ font-size: small
26
+ }
69
27
 
70
28
  .mt_1\.5 {
71
- margin-top: var(--spacing-1\.5);
72
- }
29
+ margin-top: var(--spacing-1\.5)
30
+ }
73
31
 
74
32
  .px_4 {
75
- padding-inline: var(--spacing-4);
76
- }
33
+ padding-inline: var(--spacing-4)
34
+ }
77
35
 
78
36
  .py_2 {
79
- padding-block: var(--spacing-2);
80
- }
37
+ padding-block: var(--spacing-2)
38
+ }
81
39
 
82
40
  .bg_card {
83
- background: var(--colors-card);
84
- }
41
+ background: var(--colors-card)
42
+ }
85
43
 
86
44
  .mt_5 {
87
- margin-top: var(--spacing-5);
88
- }
45
+ margin-top: var(--spacing-5)
46
+ }
89
47
 
90
48
  .flex_auto {
91
- flex: 1 1 auto;
92
- }
49
+ flex: 1 1 auto
50
+ }
93
51
 
94
52
  .my_3 {
95
- margin-block: var(--spacing-3);
96
- }
53
+ margin-block: var(--spacing-3)
54
+ }
97
55
 
98
56
  .h_20 {
99
- height: var(--sizes-20);
100
- }
57
+ height: var(--sizes-20)
58
+ }
101
59
 
102
60
  .font_medium {
103
- font-weight: var(--font-weights-medium);
104
- }
105
- }
61
+ font-weight: var(--font-weights-medium)
62
+ }
63
+ }
package/styled-system/chunks/src__components__nav-item.css CHANGED
@@ -1,181 +1,57 @@
1
1
  @layer utilities {
2
- .hover\:shadow_lg {
3
- &:where(:hover, [data-hover]) {
4
- box-shadow: var(--shadows-lg);
5
- }
6
- }
7
-
8
- .hover\:shadow_lg {
9
- &:where(:hover, [data-hover]) {
10
- box-shadow: var(--shadows-lg);
11
- }
12
- }
13
-
14
- .hover\:shadow_lg {
15
- &:where(:hover, [data-hover]) {
16
- box-shadow: var(--shadows-lg);
17
- }
18
- }
19
2
 
20
3
  .w_60 {
21
- width: var(--sizes-60);
22
- }
23
-
24
- .bg_card {
25
- background: var(--colors-card);
26
- }
27
-
28
- .rounded_sm {
29
- border-radius: var(--radii-sm);
30
- }
31
-
32
- .p_4 {
33
- padding: var(--spacing-4);
34
- }
35
-
36
- .transition_all_0\.2s_ease {
37
- transition: all 0.2s ease;
38
- }
39
-
40
- .hover\:shadow_lg {
41
- &:where(:hover, [data-hover]) {
42
- box-shadow: var(--shadows-lg);
43
- }
44
- }
45
-
46
- .\[\&_svg\]\:font_normal {
47
- & svg {
48
- font-weight: var(--font-weights-normal);
49
- }
50
- }
51
-
52
- .\[\&_svg\]\:fs_xx-large {
53
- & svg {
54
- font-size: xx-large;
55
- }
56
- }
57
-
58
- .\[\&_svg\]\:mb_6 {
59
- & svg {
60
- margin-bottom: var(--spacing-6);
61
- }
62
- }
63
-
64
- .\[\&_svg\]\:h_6 {
65
- & svg {
66
- height: var(--sizes-6);
67
- }
68
- }
69
-
70
- .\[\&_svg\]\:w_6 {
71
- & svg {
72
- width: var(--sizes-6);
73
- }
74
- }
75
-
76
- .\[\&_svg\]\:font_normal {
77
- & svg {
78
- font-weight: var(--font-weights-normal);
79
- }
80
- }
81
-
82
- .\[\&_svg\]\:fs_xx-large {
83
- & svg {
84
- font-size: xx-large;
85
- }
86
- }
87
-
88
- .\[\&_svg\]\:mb_6 {
89
- & svg {
90
- margin-bottom: var(--spacing-6);
91
- }
92
- }
93
-
94
- .\[\&_svg\]\:h_6 {
95
- & svg {
96
- height: var(--sizes-6);
97
- }
98
- }
99
-
100
- .\[\&_svg\]\:w_6 {
101
- & svg {
102
- width: var(--sizes-6);
4
+ width: var(--sizes-60)
103
5
  }
104
- }
105
6
 
106
- .\[\&_svg\]\:font_normal {
107
- & svg {
108
- font-weight: var(--font-weights-normal);
109
- }
110
- }
111
-
112
- .\[\&_svg\]\:fs_xx-large {
113
- & svg {
114
- font-size: xx-large;
115
- }
116
- }
117
-
118
- .\[\&_svg\]\:mb_6 {
119
- & svg {
120
- margin-bottom: var(--spacing-6);
7
+ .bg_card {
8
+ background: var(--colors-card)
121
9
  }
122
- }
123
10
 
124
- .\[\&_svg\]\:h_6 {
125
- & svg {
126
- height: var(--sizes-6);
11
+ .rounded_sm {
12
+ border-radius: var(--radii-sm)
127
13
  }
128
- }
129
14
 
130
- .\[\&_svg\]\:w_6 {
131
- & svg {
132
- width: var(--sizes-6);
15
+ .p_4 {
16
+ padding: var(--spacing-4)
133
17
  }
134
- }
135
18
 
136
- .\[\&_svg\]\:font_normal {
137
- & svg {
138
- font-weight: var(--font-weights-normal);
139
- }
140
- }
19
+ .transition_all_0\.2s_ease {
20
+ transition: all 0.2s ease
21
+ }
22
+ .\[\&_svg\]\:font_normal svg {
23
+ font-weight: var(--font-weights-normal)
24
+ }
25
+ .\[\&_svg\]\:fs_xx-large svg {
26
+ font-size: xx-large
27
+ }
28
+ .\[\&_svg\]\:mb_6 svg {
29
+ margin-bottom: var(--spacing-6)
30
+ }
31
+ .\[\&_svg\]\:h_6 svg {
32
+ height: var(--sizes-6)
33
+ }
34
+ .\[\&_svg\]\:w_6 svg {
35
+ width: var(--sizes-6)
36
+ }
141
37
 
142
- .\[\&_svg\]\:fs_xx-large {
143
- & svg {
144
- font-size: xx-large;
38
+ .font_semibold {
39
+ font-weight: var(--font-weights-semibold)
145
40
  }
146
- }
147
41
 
148
- .\[\&_svg\]\:mb_6 {
149
- & svg {
150
- margin-bottom: var(--spacing-6);
42
+ .fs_small {
43
+ font-size: small
151
44
  }
152
- }
153
45
 
154
- .\[\&_svg\]\:h_6 {
155
- & svg {
156
- height: var(--sizes-6);
46
+ .d_block {
47
+ display: block
157
48
  }
158
- }
159
49
 
160
- .\[\&_svg\]\:w_6 {
161
- & svg {
162
- width: var(--sizes-6);
50
+ .mt_3 {
51
+ margin-top: var(--spacing-3)
163
52
  }
164
- }
165
53
 
166
- .font_semibold {
167
- font-weight: var(--font-weights-semibold);
168
- }
169
-
170
- .fs_small {
171
- font-size: small;
172
- }
173
-
174
- .d_block {
175
- display: block;
176
- }
177
-
178
- .mt_3 {
179
- margin-top: var(--spacing-3);
180
- }
181
- }
54
+ .hover\:shadow_lg:is(:hover, [data-hover]) {
55
+ box-shadow: var(--shadows-lg)
56
+ }
57
+ }