@pandacss/studio 0.4.0 → 0.5.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 (52) hide show
  1. package/dist/studio.d.mts +13 -0
  2. package/dist/studio.js +11 -4
  3. package/dist/studio.mjs +12 -5
  4. package/package.json +13 -13
  5. package/styled-system/chunks/src__components__analyzer__category-utilities.css +65 -1
  6. package/styled-system/chunks/src__components__analyzer__data-combobox.css +29 -0
  7. package/styled-system/chunks/src__components__analyzer__file-details.css +36 -0
  8. package/styled-system/chunks/src__components__analyzer__report-item-columns.css +1 -0
  9. package/styled-system/chunks/src__components__analyzer__report-item-link.css +96 -0
  10. package/styled-system/chunks/src__components__analyzer__utility-details.css +65 -0
  11. package/styled-system/chunks/src__components__color-constrast.css +1 -2
  12. package/styled-system/chunks/src__components__color-wrapper.css +96 -0
  13. package/styled-system/chunks/src__components__colors.css +2 -2
  14. package/styled-system/chunks/src__components__font-tokens.css +1 -1
  15. package/styled-system/chunks/src__components__input.css +62 -0
  16. package/styled-system/chunks/src__components__layer-styles.css +26 -0
  17. package/styled-system/chunks/src__components__nav-item.css +72 -0
  18. package/styled-system/chunks/src__components__overview.css +25 -1
  19. package/styled-system/chunks/src__components__side-nav-item.css +24 -0
  20. package/styled-system/chunks/src__components__side-nav.css +2 -2
  21. package/styled-system/chunks/src__components__theme-toggle.css +12 -0
  22. package/styled-system/chunks/src__components__token-analyzer.css +149 -1
  23. package/styled-system/chunks/src__layouts__Sidebar.css +24 -0
  24. package/styled-system/helpers.mjs +35 -22
  25. package/styled-system/styles.css +5 -266
  26. package/styled-system/tokens/index.css +101 -30
  27. package/styled-system/tokens/index.mjs +322 -38
  28. package/styled-system/tokens/tokens.d.ts +3 -3
  29. package/styled-system/types/pattern.d.ts +1 -1
  30. package/styled-system/types/prop-type.d.ts +1 -1
  31. package/styled-system/types/system-types.d.ts +1 -1
  32. package/styled-system/chunks/..__core____tests____atomic-rule.test.css +0 -363
  33. package/styled-system/chunks/src__components__analyzer__quick-tooltip.css +0 -2
  34. package/styled-system/chunks/src__components__analyzer__token-search-combobox.css +0 -2
  35. package/styled-system/chunks/src__layouts__Layout.css +0 -2
  36. package/styled-system/chunks/src__pages__colors.css +0 -2
  37. package/styled-system/chunks/src__pages__font-sizes.css +0 -2
  38. package/styled-system/chunks/src__pages__font-weights.css +0 -2
  39. package/styled-system/chunks/src__pages__fonts.css +0 -2
  40. package/styled-system/chunks/src__pages__index.css +0 -2
  41. package/styled-system/chunks/src__pages__layer-styles.css +0 -2
  42. package/styled-system/chunks/src__pages__letter-spacings.css +0 -2
  43. package/styled-system/chunks/src__pages__line-heights.css +0 -2
  44. package/styled-system/chunks/src__pages__playground__contrast-checker.css +0 -2
  45. package/styled-system/chunks/src__pages__playground__typography.css +0 -2
  46. package/styled-system/chunks/src__pages__radii.css +0 -2
  47. package/styled-system/chunks/src__pages__sizes.css +0 -2
  48. package/styled-system/chunks/src__pages__spacing.css +0 -2
  49. package/styled-system/chunks/src__pages__text-styles.css +0 -2
  50. package/styled-system/chunks/src__pages__token-analyzer__file.css +0 -2
  51. package/styled-system/chunks/src__pages__token-analyzer__index.css +0 -2
  52. package/styled-system/chunks/src__pages__token-analyzer__utility.css +0 -2
@@ -57,7 +57,7 @@ export type JsxStyleProps = SystemProperties &
57
57
  css?: SystemStyleObject
58
58
  }
59
59
 
60
- type Assign<T, U> = Omit<T, keyof U> & U
60
+ export type Assign<T, U> = Omit<T, keyof U> & U
61
61
 
62
62
  export type PatchedHTMLProps = {
63
63
  htmlSize?: string | number
@@ -1,363 +0,0 @@
1
- @layer utilities {
2
- .styles\:text_red\! {
3
- color: red !important;
4
- }
5
-
6
- .styles\:fs_30px\! {
7
- font-size: 30px !important;
8
- }
9
-
10
- .styles\:bg_red\.300 {
11
- background: var(--colors-red-300);
12
- }
13
-
14
- .styles\:w_20px {
15
- width: 20px;
16
- }
17
-
18
- .styles\:w_70px {
19
- width: 70px;
20
- }
21
-
22
- .styles\:w_50px {
23
- width: 50px;
24
- }
25
-
26
- .styles\:ltr\:sm\:ml_4 {
27
- [dir='ltr'] & {
28
- @media screen and (min-width: 640px) {
29
- margin-left: var(--spacing-4);
30
- }
31
- }
32
- }
33
-
34
- .styles\:rtl\:ml_-4 {
35
- [dir='rtl'] & {
36
- margin-left: calc(var(--spacing-4) * -1);
37
- }
38
- }
39
-
40
- .styles\:light\:text_red {
41
- &.light,
42
- .light & {
43
- color: red;
44
- }
45
- }
46
-
47
- .styles\:dark\:text_green {
48
- &.dark,
49
- .dark & {
50
- color: green;
51
- }
52
- }
53
-
54
- .styles\:dark\:opacity_slate400 {
55
- &.dark,
56
- .dark & {
57
- opacity: slate400;
58
- }
59
- }
60
-
61
- .styles\:sm\:rtl\:top_20px {
62
- [dir='rtl'] & {
63
- @media screen and (min-width: 640px) {
64
- top: 20px;
65
- }
66
- }
67
- }
68
-
69
- .styles\:left_20px {
70
- left: 20px;
71
- }
72
-
73
- .styles\:\[\&_\>_p\]\:left_20px {
74
- & > p {
75
- left: 20px;
76
- }
77
- }
78
-
79
- .styles\:\[\&_\>_p\]\:md\:left_40px {
80
- & > p {
81
- @media screen and (min-width: 768px) {
82
- left: 40px;
83
- }
84
- }
85
- }
86
-
87
- .styles\:\[\&_\>_p\]\:light\:bg_red400 {
88
- & > p {
89
- &.light,
90
- .light & {
91
- background: red400;
92
- }
93
- }
94
- }
95
-
96
- .styles\:\[\&_\>_p\]\:dark\:bg_green500 {
97
- & > p {
98
- &.dark,
99
- .dark & {
100
- background: green500;
101
- }
102
- }
103
- }
104
-
105
- .styles\:\[\&_\>_p\]\:rtl\:font_sans {
106
- & > p {
107
- [dir='rtl'] & {
108
- font: sans;
109
- }
110
- }
111
- }
112
-
113
- .styles\:\[\&\:\:placeholder\]\:left_40px {
114
- &::placeholder {
115
- left: 40px;
116
- }
117
- }
118
-
119
- .styles\:\[\&\:\:placeholder\]\:bg_red400 {
120
- &::placeholder {
121
- background: red400;
122
- }
123
- }
124
-
125
- .styles\:\[\&\:\:placeholder\]\:sm\:text_left {
126
- &::placeholder {
127
- @media screen and (min-width: 640px) {
128
- text-align: left;
129
- }
130
- }
131
- }
132
-
133
- .styles\:all_unset {
134
- all: unset;
135
- }
136
-
137
- .styles\:bg_red {
138
- background-color: red;
139
- }
140
-
141
- .styles\:border_none {
142
- border: var(--borders-none);
143
- }
144
-
145
- .styles\:p_\$3_\$3 {
146
- padding: $3 $3;
147
- }
148
-
149
- .styles\:rounded_\$button {
150
- border-radius: $button;
151
- }
152
-
153
- .styles\:fs_\$xsmall {
154
- font-size: $xsmall;
155
- }
156
-
157
- .styles\:cursor_pointer {
158
- cursor: pointer;
159
- }
160
-
161
- .styles\:\[\&_\+_span\]\:ml_\$2 {
162
- & + span {
163
- margin-left: $2;
164
- }
165
- }
166
-
167
- .styles\:\[\.test_\&\]\:bg_blue {
168
- .test & {
169
- background-color: blue;
170
- }
171
- }
172
-
173
- .styles\:\[\&_\.my-class\]\:text_red {
174
- & .my-class {
175
- color: red;
176
- }
177
- }
178
-
179
- .styles\:\[\&_span\]\:text_red {
180
- & span {
181
- color: red;
182
- }
183
- }
184
-
185
- .styles\:\[\&_kbd\]\:text_red {
186
- & kbd {
187
- color: red;
188
- }
189
- }
190
-
191
- .styles\:\[\&\:focus\,_\&\:hover\]\:shadow_none {
192
- &:focus,
193
- &:hover {
194
- box-shadow: none;
195
- }
196
- }
197
-
198
- .styles\:\[\:focus_\>_\&\]\:text_white {
199
- :focus > & {
200
- color: var(--colors-white);
201
- }
202
- }
203
-
204
- .styles\:sm\:hover\:top_50px {
205
- &:where(:hover, [data-hover]) {
206
- @media screen and (min-width: 640px) {
207
- top: 50px;
208
- }
209
- }
210
- }
211
-
212
- .styles\:\[\&_\>_p\]\:ltr\:dark\:sm\:hover\:font_serif {
213
- & > p {
214
- &:where(:hover, [data-hover]) {
215
- [dir='ltr'] & {
216
- &.dark,
217
- .dark & {
218
- @media screen and (min-width: 640px) {
219
- font: serif;
220
- }
221
- }
222
- }
223
- }
224
- }
225
- }
226
-
227
- .styles\:\[input\:hover_\&\]\:bg_red400 {
228
- input:hover & {
229
- background: red400;
230
- }
231
- }
232
-
233
- .styles\:\[input\:hover_\&\]\:sm\:fs_14px {
234
- input:hover & {
235
- @media screen and (min-width: 640px) {
236
- font-size: 14px;
237
- }
238
- }
239
- }
240
-
241
- .styles\:\[input\:hover_\&\]\:lg\:fs_18px {
242
- input:hover & {
243
- @media screen and (min-width: 1024px) {
244
- font-size: 18px;
245
- }
246
- }
247
- }
248
-
249
- .styles\:hover\:bg_pink\.400 {
250
- &:where(:hover, [data-hover]) {
251
- background: var(--colors-pink-400);
252
- }
253
- }
254
-
255
- .styles\:hover\:sm\:dark\:bg_red\.300 {
256
- &:where(:hover, [data-hover]) {
257
- &.dark,
258
- .dark & {
259
- @media screen and (min-width: 640px) {
260
- background: var(--colors-red-300);
261
- }
262
- }
263
- }
264
- }
265
-
266
- .styles\:hover\:text_pink\.400 {
267
- &:where(:hover, [data-hover]) {
268
- color: var(--colors-pink-400);
269
- }
270
- }
271
-
272
- .styles\:hover\:disabled\:sm\:bg_red\.300 {
273
- &:where(:hover, [data-hover]) {
274
- &:where(:disabled, [disabled], [data-disabled]) {
275
- @media screen and (min-width: 640px) {
276
- background: var(--colors-red-300);
277
- }
278
- }
279
- }
280
- }
281
-
282
- .styles\:\[\@media_base\]\:\[\&\:hover\]\:left_40px {
283
- &:hover {
284
- @media base {
285
- left: 40px;
286
- }
287
- }
288
- }
289
-
290
- .styles\:\[\@media_base\]\:\[\&\:hover\]\:sm\:text_left {
291
- &:hover {
292
- @media base {
293
- @media screen and (min-width: 640px) {
294
- text-align: left;
295
- }
296
- }
297
- }
298
- }
299
-
300
- .styles\:\[\@media_\(min-width\:_768px\)\]\:\[\&\:hover\]\:bg_yellow {
301
- &:hover {
302
- @media (min-width: 768px) {
303
- background-color: yellow;
304
- }
305
- }
306
- }
307
-
308
- .styles\:sm\:w_60px {
309
- @media screen and (min-width: 640px) {
310
- width: 60px;
311
- }
312
- }
313
-
314
- .styles\:sm\:w_60px {
315
- @media screen and (min-width: 640px) {
316
- width: 60px;
317
- }
318
- }
319
-
320
- .styles\:lg\:top_120px {
321
- @media screen and (min-width: 1024px) {
322
- top: 120px;
323
- }
324
- }
325
-
326
- .styles\:md\:left_40px {
327
- @media screen and (min-width: 768px) {
328
- left: 40px;
329
- }
330
- }
331
-
332
- .styles\:\[\@media_base\]\:left_40px {
333
- @media base {
334
- left: 40px;
335
- }
336
- }
337
-
338
- .styles\:\[\@media_base\]\:sm\:text_left {
339
- @media base {
340
- @media screen and (min-width: 640px) {
341
- text-align: left;
342
- }
343
- }
344
- }
345
-
346
- .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
347
- @media (min-width: 768px) {
348
- background-color: green;
349
- }
350
- }
351
-
352
- .styles\:\[\@media_\(min-width\:_768px\)\]\:bg_green {
353
- @media (min-width: 768px) {
354
- background-color: green;
355
- }
356
- }
357
-
358
- .styles\:\[\@media_\(min-width\:_768px\)\]\:fs_\$small {
359
- @media (min-width: 768px) {
360
- font-size: $small;
361
- }
362
- }
363
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }
@@ -1,2 +0,0 @@
1
- @layer utilities {
2
- }