@pandacss/studio 0.15.0 → 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 (101) 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 +12 -6
  5. package/dist/studio.mjs +12 -6
  6. package/package.json +9 -9
  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/helpers.mjs +3 -2
  43. package/styled-system/jsx/aspect-ratio.d.ts +1 -1
  44. package/styled-system/jsx/bleed.d.ts +1 -1
  45. package/styled-system/jsx/box.d.ts +1 -1
  46. package/styled-system/jsx/center.d.ts +1 -1
  47. package/styled-system/jsx/circle.d.ts +1 -1
  48. package/styled-system/jsx/container.d.ts +1 -1
  49. package/styled-system/jsx/divider.d.ts +1 -1
  50. package/styled-system/jsx/factory.mjs +2 -1
  51. package/styled-system/jsx/flex.d.ts +1 -1
  52. package/styled-system/jsx/float.d.ts +1 -1
  53. package/styled-system/jsx/grid-item.d.ts +1 -1
  54. package/styled-system/jsx/grid.d.ts +1 -1
  55. package/styled-system/jsx/hstack.d.ts +1 -1
  56. package/styled-system/jsx/link-box.d.ts +1 -1
  57. package/styled-system/jsx/link-overlay.d.ts +1 -1
  58. package/styled-system/jsx/spacer.d.ts +1 -1
  59. package/styled-system/jsx/square.d.ts +1 -1
  60. package/styled-system/jsx/stack.d.ts +1 -1
  61. package/styled-system/jsx/styled-link.d.ts +1 -1
  62. package/styled-system/jsx/visually-hidden.d.ts +1 -1
  63. package/styled-system/jsx/vstack.d.ts +1 -1
  64. package/styled-system/jsx/wrap.d.ts +1 -1
  65. package/styled-system/patterns/aspect-ratio.d.ts +2 -2
  66. package/styled-system/patterns/bleed.d.ts +2 -2
  67. package/styled-system/patterns/box.d.ts +2 -2
  68. package/styled-system/patterns/center.d.ts +2 -2
  69. package/styled-system/patterns/circle.d.ts +2 -2
  70. package/styled-system/patterns/container.d.ts +2 -2
  71. package/styled-system/patterns/divider.d.ts +2 -2
  72. package/styled-system/patterns/flex.d.ts +2 -2
  73. package/styled-system/patterns/float.d.ts +2 -2
  74. package/styled-system/patterns/grid-item.d.ts +2 -2
  75. package/styled-system/patterns/grid.d.ts +2 -2
  76. package/styled-system/patterns/hstack.d.ts +2 -2
  77. package/styled-system/patterns/link-box.d.ts +2 -2
  78. package/styled-system/patterns/link-overlay.d.ts +2 -2
  79. package/styled-system/patterns/spacer.d.ts +2 -2
  80. package/styled-system/patterns/square.d.ts +2 -2
  81. package/styled-system/patterns/stack.d.ts +2 -2
  82. package/styled-system/patterns/styled-link.d.ts +2 -2
  83. package/styled-system/patterns/visually-hidden.d.ts +2 -2
  84. package/styled-system/patterns/vstack.d.ts +2 -2
  85. package/styled-system/patterns/wrap.d.ts +2 -2
  86. package/styled-system/reset.css +20 -5
  87. package/styled-system/styles.css +492 -735
  88. package/styled-system/tokens/index.css +8 -8
  89. package/styled-system/types/composition.d.ts +3 -3
  90. package/styled-system/types/conditions.d.ts +227 -114
  91. package/styled-system/types/global.d.ts +7 -7
  92. package/styled-system/types/index.d.ts +6 -4
  93. package/styled-system/types/jsx.d.ts +3 -3
  94. package/styled-system/types/parts.d.ts +1 -1
  95. package/styled-system/types/pattern.d.ts +2 -2
  96. package/styled-system/types/prop-type.d.ts +2 -2
  97. package/styled-system/types/recipe.d.ts +9 -6
  98. package/styled-system/types/style-props.d.ts +1 -1
  99. package/styled-system/types/system-types.d.ts +12 -6
  100. package/{virtual-panda.mjs → virtual-panda.ts} +24 -28
  101. package/styled-system/chunks/..__core____tests____atomic-rule.test.css +0 -216
package/styled-system/chunks/src__components__analyzer__report-item-link.css CHANGED
@@ -1,261 +1,78 @@
1
1
  @layer utilities {
2
- .d_flex {
3
- display: flex;
4
- }
5
-
6
- .hover\:opacity_1 {
7
- &:where(:hover, [data-hover]) {
8
- opacity: 1;
9
- }
10
- }
11
-
12
- .hover\:border-b_black {
13
- &:where(:hover, [data-hover]) {
14
- border-bottom-color: var(--colors-black);
15
- }
16
- }
17
-
18
- .hover\:opacity_1 {
19
- &:where(:hover, [data-hover]) {
20
- opacity: 1;
21
- }
22
- }
23
-
24
- .hover\:border-b_black {
25
- &:where(:hover, [data-hover]) {
26
- border-bottom-color: var(--colors-black);
27
- }
28
- }
29
-
30
- .hover\:opacity_1 {
31
- &:where(:hover, [data-hover]) {
32
- opacity: 1;
33
- }
34
- }
35
-
36
- .hover\:border-b_black {
37
- &:where(:hover, [data-hover]) {
38
- border-bottom-color: var(--colors-black);
39
- }
40
- }
41
-
42
- .hover\:opacity_1 {
43
- &:where(:hover, [data-hover]) {
44
- opacity: 1;
45
- }
46
- }
47
-
48
- .hover\:border-b_black {
49
- &:where(:hover, [data-hover]) {
50
- border-bottom-color: var(--colors-black);
51
- }
52
- }
53
-
54
- .hover\:opacity_1 {
55
- &:where(:hover, [data-hover]) {
56
- opacity: 1;
57
- }
58
- }
59
-
60
- .hover\:border-b_black {
61
- &:where(:hover, [data-hover]) {
62
- border-bottom-color: var(--colors-black);
63
- }
64
- }
65
-
66
- .hover\:opacity_1 {
67
- &:where(:hover, [data-hover]) {
68
- opacity: 1;
69
- }
70
- }
71
-
72
- .hover\:border-b_black {
73
- &:where(:hover, [data-hover]) {
74
- border-bottom-color: var(--colors-black);
75
- }
76
- }
77
-
78
- .hover\:opacity_1 {
79
- &:where(:hover, [data-hover]) {
80
- opacity: 1;
81
- }
82
- }
83
-
84
- .hover\:border-b_black {
85
- &:where(:hover, [data-hover]) {
86
- border-bottom-color: var(--colors-black);
87
- }
88
- }
89
-
90
- .hover\:opacity_1 {
91
- &:where(:hover, [data-hover]) {
92
- opacity: 1;
93
- }
94
- }
95
-
96
- .hover\:border-b_black {
97
- &:where(:hover, [data-hover]) {
98
- border-bottom-color: var(--colors-black);
99
- }
100
- }
101
-
102
- .hover\:opacity_1 {
103
- &:where(:hover, [data-hover]) {
104
- opacity: 1;
105
- }
106
- }
107
-
108
- .hover\:border-b_black {
109
- &:where(:hover, [data-hover]) {
110
- border-bottom-color: var(--colors-black);
111
- }
112
- }
113
2
 
114
- .hover\:opacity_1 {
115
- &:where(:hover, [data-hover]) {
116
- opacity: 1;
117
- }
118
- }
119
-
120
- .hover\:border-b_black {
121
- &:where(:hover, [data-hover]) {
122
- border-bottom-color: var(--colors-black);
123
- }
124
- }
125
-
126
- .hover\:opacity_1 {
127
- &:where(:hover, [data-hover]) {
128
- opacity: 1;
129
- }
130
- }
131
-
132
- .hover\:border-b_black {
133
- &:where(:hover, [data-hover]) {
134
- border-bottom-color: var(--colors-black);
135
- }
136
- }
137
-
138
- .hover\:opacity_1 {
139
- &:where(:hover, [data-hover]) {
140
- opacity: 1;
141
- }
142
- }
143
-
144
- .hover\:border-b_black {
145
- &:where(:hover, [data-hover]) {
146
- border-bottom-color: var(--colors-black);
3
+ .d_flex {
4
+ display: flex
147
5
  }
148
- }
149
6
 
150
7
  .pos_relative {
151
- position: relative;
152
- }
8
+ position: relative
9
+ }
153
10
 
154
11
  .max-w_14px {
155
- max-width: 14px;
156
- }
12
+ max-width: 14px
13
+ }
157
14
 
158
15
  .shrink_0 {
159
- flex-shrink: 0;
160
- }
16
+ flex-shrink: 0
17
+ }
161
18
 
162
19
  .p_2 {
163
- padding: var(--spacing-2);
164
- }
20
+ padding: var(--spacing-2)
21
+ }
165
22
 
166
23
  .bg_card {
167
- background-color: var(--colors-card);
168
- }
169
-
170
- .border_1px_solid_token\(colors\.border\) {
171
- border: 1px solid var(--colors-border);
172
- }
173
-
174
- .shadow_sm {
175
- box-shadow: var(--shadows-sm);
176
- }
177
-
178
- .rounded_md {
179
- border-radius: var(--radii-md);
180
- }
181
-
182
- .hover\:opacity_1 {
183
- &:where(:hover, [data-hover]) {
184
- opacity: 1;
24
+ background-color: var(--colors-card)
185
25
  }
186
- }
187
26
 
188
- .hover\:border-b_black {
189
- &:where(:hover, [data-hover]) {
190
- border-bottom-color: var(--colors-black);
27
+ .border_1px_solid_token\(colors\.border\) {
28
+ border: 1px solid var(--colors-border)
191
29
  }
192
- }
193
30
 
194
- .hover\:opacity_1 {
195
- &:where(:hover, [data-hover]) {
196
- opacity: 1;
31
+ .shadow_sm {
32
+ box-shadow: var(--shadows-sm)
197
33
  }
198
- }
199
34
 
200
- .hover\:border-b_black {
201
- &:where(:hover, [data-hover]) {
202
- border-bottom-color: var(--colors-black);
35
+ .rounded_md {
36
+ border-radius: var(--radii-md)
203
37
  }
204
- }
205
38
 
206
39
  .text_red\.400 {
207
- color: var(--colors-red-400);
208
- }
209
-
210
- .hover\:opacity_1 {
211
- &:where(:hover, [data-hover]) {
212
- opacity: 1;
213
- }
214
- }
215
-
216
- .hover\:border-b_black {
217
- &:where(:hover, [data-hover]) {
218
- border-bottom-color: var(--colors-black);
40
+ color: var(--colors-red-400)
219
41
  }
220
- }
221
42
 
222
43
  .d_inline-flex {
223
- display: inline-flex;
224
- }
44
+ display: inline-flex
45
+ }
225
46
 
226
47
  .items_center {
227
- align-items: center;
228
- }
48
+ align-items: center
49
+ }
229
50
 
230
51
  .opacity_0\.5 {
231
- opacity: 0.5;
232
- }
52
+ opacity: 0.5
53
+ }
233
54
 
234
55
  .border-b_1px_solid_transparent {
235
- border-bottom: 1px solid transparent;
236
- }
56
+ border-bottom: 1px solid transparent
57
+ }
237
58
 
238
59
  .cursor_pointer {
239
- cursor: pointer;
240
- }
60
+ cursor: pointer
61
+ }
241
62
 
242
- .hover\:opacity_1 {
243
- &:where(:hover, [data-hover]) {
244
- opacity: 1;
63
+ .self_flex-start {
64
+ align-self: flex-start
245
65
  }
246
- }
247
66
 
248
- .hover\:border-b_black {
249
- &:where(:hover, [data-hover]) {
250
- border-bottom-color: var(--colors-black);
67
+ .mr_2 {
68
+ margin-right: var(--spacing-2)
251
69
  }
252
- }
253
70
 
254
- .self_flex-start {
255
- align-self: flex-start;
256
- }
71
+ .hover\:opacity_1:is(:hover, [data-hover]) {
72
+ opacity: 1
73
+ }
257
74
 
258
- .mr_2 {
259
- margin-right: var(--spacing-2);
260
- }
261
- }
75
+ .hover\:border-b_black:is(:hover, [data-hover]) {
76
+ border-bottom-color: var(--colors-black)
77
+ }
78
+ }
package/styled-system/chunks/src__components__analyzer__section.css CHANGED
@@ -1,29 +1,30 @@
1
1
  @layer utilities {
2
+
2
3
  .w_full {
3
- width: var(--sizes-full);
4
- }
4
+ width: var(--sizes-full)
5
+ }
5
6
 
6
7
  .rounded_md {
7
- border-radius: var(--radii-md);
8
- }
8
+ border-radius: var(--radii-md)
9
+ }
9
10
 
10
11
  .d_flex {
11
- display: flex;
12
- }
12
+ display: flex
13
+ }
13
14
 
14
15
  .flex_column {
15
- flex-direction: column;
16
- }
16
+ flex-direction: column
17
+ }
17
18
 
18
19
  .gap_4 {
19
- gap: var(--spacing-4);
20
- }
20
+ gap: var(--spacing-4)
21
+ }
21
22
 
22
23
  .p_4 {
23
- padding: var(--spacing-4);
24
- }
24
+ padding: var(--spacing-4)
25
+ }
25
26
 
26
27
  .w_100\% {
27
- width: 100%;
28
- }
29
- }
28
+ width: 100%
29
+ }
30
+ }
package/styled-system/chunks/src__components__analyzer__text-with-count.css CHANGED
@@ -1,33 +1,34 @@
1
1
  @layer utilities {
2
+
2
3
  .d_inline-flex {
3
- display: inline-flex;
4
- }
4
+ display: inline-flex
5
+ }
5
6
 
6
7
  .items_center {
7
- align-items: center;
8
- }
8
+ align-items: center
9
+ }
9
10
 
10
11
  .fs_75\% {
11
- font-size: 75%;
12
- }
12
+ font-size: 75%
13
+ }
13
14
 
14
15
  .leading_0 {
15
- line-height: 0;
16
- }
16
+ line-height: 0
17
+ }
17
18
 
18
19
  .pos_relative {
19
- position: relative;
20
- }
20
+ position: relative
21
+ }
21
22
 
22
23
  .top_-0\.35em {
23
- top: -0.35em;
24
- }
24
+ top: -0.35em
25
+ }
25
26
 
26
27
  .opacity_0\.5 {
27
- opacity: 0.5;
28
- }
28
+ opacity: 0.5
29
+ }
29
30
 
30
31
  .ml_1 {
31
- margin-left: var(--spacing-1);
32
- }
33
- }
32
+ margin-left: var(--spacing-1)
33
+ }
34
+ }
package/styled-system/chunks/src__components__analyzer__truncated-text.css CHANGED
@@ -1,17 +1,18 @@
1
1
  @layer utilities {
2
+
2
3
  .p_2 {
3
- padding: var(--spacing-2);
4
- }
4
+ padding: var(--spacing-2)
5
+ }
5
6
 
6
7
  .bg_card {
7
- background-color: var(--colors-card);
8
- }
8
+ background-color: var(--colors-card)
9
+ }
9
10
 
10
11
  .border_1px_solid_rgba\(0\,_0\,_0\,_0\.1\) {
11
- border: 1px solid rgba(0, 0, 0, 0.1);
12
- }
12
+ border: 1px solid rgba(0, 0, 0, 0.1)
13
+ }
13
14
 
14
15
  .text_text {
15
- color: var(--colors-text);
16
- }
17
- }
16
+ color: var(--colors-text)
17
+ }
18
+ }