@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
@@ -1,217 +1,58 @@
1
1
  @layer utilities {
2
- .before\:content_\'\' {
3
- &::before {
4
- content: '';
5
- }
6
- }
7
-
8
- .before\:pos_absolute {
9
- &::before {
10
- position: absolute;
11
- }
12
- }
13
-
14
- .before\:rounded_sm {
15
- &::before {
16
- border-radius: var(--radii-sm);
17
- }
18
- }
19
-
20
- .before\:w_100\% {
21
- &::before {
22
- width: 100%;
23
- }
24
- }
25
-
26
- .before\:h_100\% {
27
- &::before {
28
- height: 100%;
29
- }
30
- }
31
-
32
- .before\:bg_24px {
33
- &::before {
34
- background-size: 24px;
35
- }
36
- }
37
-
38
- .before\:z_-1 {
39
- &::before {
40
- z-index: -1;
41
- }
42
- }
43
-
44
- .before\:bg-img_check {
45
- &::before {
46
- background-image: var(--assets-check);
47
- }
48
- }
49
-
50
- .before\:content_\'\' {
51
- &::before {
52
- content: '';
53
- }
54
- }
55
-
56
- .before\:pos_absolute {
57
- &::before {
58
- position: absolute;
59
- }
60
- }
61
-
62
- .before\:rounded_sm {
63
- &::before {
64
- border-radius: var(--radii-sm);
65
- }
66
- }
67
-
68
- .before\:w_100\% {
69
- &::before {
70
- width: 100%;
71
- }
72
- }
73
-
74
- .before\:h_100\% {
75
- &::before {
76
- height: 100%;
77
- }
78
- }
79
-
80
- .before\:bg_24px {
81
- &::before {
82
- background-size: 24px;
83
- }
84
- }
85
-
86
- .before\:z_-1 {
87
- &::before {
88
- z-index: -1;
89
- }
90
- }
91
-
92
- .before\:bg-img_check {
93
- &::before {
94
- background-image: var(--assets-check);
95
- }
96
- }
97
-
98
- .before\:content_\'\' {
99
- &::before {
100
- content: '';
101
- }
102
- }
103
-
104
- .before\:pos_absolute {
105
- &::before {
106
- position: absolute;
107
- }
108
- }
109
-
110
- .before\:rounded_sm {
111
- &::before {
112
- border-radius: var(--radii-sm);
113
- }
114
- }
115
-
116
- .before\:w_100\% {
117
- &::before {
118
- width: 100%;
119
- }
120
- }
121
-
122
- .before\:h_100\% {
123
- &::before {
124
- height: 100%;
125
- }
126
- }
127
-
128
- .before\:bg_24px {
129
- &::before {
130
- background-size: 24px;
131
- }
132
- }
133
-
134
- .before\:z_-1 {
135
- &::before {
136
- z-index: -1;
137
- }
138
- }
139
-
140
- .before\:bg-img_check {
141
- &::before {
142
- background-image: var(--assets-check);
143
- }
144
- }
145
2
 
146
3
  .w_full {
147
- width: var(--sizes-full);
148
- }
4
+ width: var(--sizes-full)
5
+ }
149
6
 
150
7
  .h_10 {
151
- height: var(--sizes-10);
152
- }
8
+ height: var(--sizes-10)
9
+ }
153
10
 
154
11
  .rounded_sm {
155
- border-radius: var(--radii-sm);
156
- }
12
+ border-radius: var(--radii-sm)
13
+ }
157
14
 
158
15
  .pos_relative {
159
- position: relative;
160
- }
16
+ position: relative
17
+ }
161
18
 
162
19
  .overflow_hidden {
163
- overflow: hidden;
164
- }
20
+ overflow: hidden
21
+ }
165
22
 
166
23
  .shadow_inset {
167
- box-shadow: var(--shadows-inset);
168
- }
169
-
170
- .before\:content_\'\' {
171
- &::before {
172
- content: '';
24
+ box-shadow: var(--shadows-inset)
173
25
  }
174
- }
175
26
 
176
- .before\:pos_absolute {
177
- &::before {
178
- position: absolute;
179
- }
180
- }
27
+ .before\:content_\'\'::before {
28
+ content: ''
29
+ }
181
30
 
182
- .before\:rounded_sm {
183
- &::before {
184
- border-radius: var(--radii-sm);
185
- }
186
- }
31
+ .before\:pos_absolute::before {
32
+ position: absolute
33
+ }
187
34
 
188
- .before\:w_100\% {
189
- &::before {
190
- width: 100%;
191
- }
192
- }
35
+ .before\:rounded_sm::before {
36
+ border-radius: var(--radii-sm)
37
+ }
193
38
 
194
- .before\:h_100\% {
195
- &::before {
196
- height: 100%;
197
- }
198
- }
39
+ .before\:w_100\%::before {
40
+ width: 100%
41
+ }
199
42
 
200
- .before\:bg_24px {
201
- &::before {
202
- background-size: 24px;
203
- }
204
- }
43
+ .before\:h_100\%::before {
44
+ height: 100%
45
+ }
205
46
 
206
- .before\:z_-1 {
207
- &::before {
208
- z-index: -1;
209
- }
210
- }
47
+ .before\:bg_24px::before {
48
+ background-size: 24px
49
+ }
211
50
 
212
- .before\:bg-img_check {
213
- &::before {
214
- background-image: var(--assets-check);
215
- }
216
- }
217
- }
51
+ .before\:z_-1::before {
52
+ z-index: -1
53
+ }
54
+
55
+ .before\:bg-img_check::before {
56
+ background-image: var(--assets-check)
57
+ }
58
+ }
@@ -1,105 +1,106 @@
1
1
  @layer utilities {
2
+
2
3
  .font_semibold {
3
- font-weight: var(--font-weights-semibold);
4
- }
4
+ font-weight: var(--font-weights-semibold)
5
+ }
5
6
 
6
7
  .text_capitalize {
7
- text-transform: capitalize;
8
- }
8
+ text-transform: capitalize
9
+ }
9
10
 
10
11
  .fs_xl {
11
- font-size: var(--font-sizes-xl);
12
- }
12
+ font-size: var(--font-sizes-xl)
13
+ }
13
14
 
14
15
  .font_medium {
15
- font-weight: var(--font-weights-medium);
16
- }
16
+ font-weight: var(--font-weights-medium)
17
+ }
17
18
 
18
19
  .opacity_0\.7 {
19
- opacity: 0.7;
20
- }
20
+ opacity: 0.7
21
+ }
21
22
 
22
23
  .fs_sm {
23
- font-size: var(--font-sizes-sm);
24
- }
24
+ font-size: var(--font-sizes-sm)
25
+ }
25
26
 
26
27
  .text_uppercase {
27
- text-transform: uppercase;
28
- }
28
+ text-transform: uppercase
29
+ }
29
30
 
30
31
  .mb_3\.5 {
31
- margin-bottom: var(--spacing-3\.5);
32
- }
32
+ margin-bottom: var(--spacing-3\.5)
33
+ }
33
34
 
34
35
  .pos_sticky {
35
- position: sticky;
36
- }
36
+ position: sticky
37
+ }
37
38
 
38
39
  .top_0 {
39
- top: var(--spacing-0);
40
- }
40
+ top: var(--spacing-0)
41
+ }
41
42
 
42
43
  .z_1 {
43
- z-index: 1;
44
- }
44
+ z-index: 1
45
+ }
45
46
 
46
47
  .w_full {
47
- width: var(--sizes-full);
48
- }
48
+ width: var(--sizes-full)
49
+ }
49
50
 
50
51
  .gap_0\.5 {
51
- gap: var(--spacing-0\.5);
52
- }
52
+ gap: var(--spacing-0\.5)
53
+ }
53
54
 
54
55
  .mt_2 {
55
- margin-top: var(--spacing-2);
56
- }
56
+ margin-top: var(--spacing-2)
57
+ }
57
58
 
58
59
  .flex_column {
59
- flex-direction: column;
60
- }
60
+ flex-direction: column
61
+ }
61
62
 
62
63
  .gap_10 {
63
- gap: var(--spacing-10);
64
- }
64
+ gap: var(--spacing-10)
65
+ }
65
66
 
66
67
  .d_flex {
67
- display: flex;
68
- }
68
+ display: flex
69
+ }
69
70
 
70
71
  .items_center {
71
- align-items: center;
72
- }
72
+ align-items: center
73
+ }
73
74
 
74
75
  .gap_1 {
75
- gap: var(--spacing-1);
76
- }
76
+ gap: var(--spacing-1)
77
+ }
77
78
 
78
79
  .flex_row {
79
- flex-direction: row;
80
- }
80
+ flex-direction: row
81
+ }
81
82
 
82
83
  .grid-cols_repeat\(auto-fit\,_minmax\(13rem\,_1fr\)\) {
83
- grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
84
- }
84
+ grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr))
85
+ }
85
86
 
86
87
  .d_grid {
87
- display: grid;
88
- }
88
+ display: grid
89
+ }
89
90
 
90
91
  .grid-cols_repeat\(auto-fit\,_minmax\(30rem\,_1fr\)\) {
91
- grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
92
- }
92
+ grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr))
93
+ }
93
94
 
94
95
  .gap_4 {
95
- gap: var(--spacing-4);
96
- }
96
+ gap: var(--spacing-4)
97
+ }
97
98
 
98
99
  .my_5 {
99
- margin-block: var(--spacing-5);
100
- }
100
+ margin-block: var(--spacing-5)
101
+ }
101
102
 
102
103
  .mx_0 {
103
- margin-inline: var(--spacing-0);
104
- }
105
- }
104
+ margin-inline: var(--spacing-0)
105
+ }
106
+ }
@@ -1,45 +1,46 @@
1
1
  @layer utilities {
2
+
2
3
  .fs_5xl {
3
- font-size: var(--font-sizes-5xl);
4
- }
4
+ font-size: var(--font-sizes-5xl)
5
+ }
5
6
 
6
7
  .font_semibold {
7
- font-weight: var(--font-weights-semibold);
8
- }
8
+ font-weight: var(--font-weights-semibold)
9
+ }
9
10
 
10
11
  .justify_center {
11
- justify-content: center;
12
- }
12
+ justify-content: center
13
+ }
13
14
 
14
15
  .gap_5 {
15
- gap: var(--spacing-5);
16
- }
16
+ gap: var(--spacing-5)
17
+ }
17
18
 
18
19
  .h_full {
19
- height: var(--sizes-full);
20
- }
20
+ height: var(--sizes-full)
21
+ }
21
22
 
22
23
  .min-h_40vh {
23
- min-height: 40vh;
24
- }
24
+ min-height: 40vh
25
+ }
25
26
 
26
27
  .d_flex {
27
- display: flex;
28
- }
28
+ display: flex
29
+ }
29
30
 
30
31
  .flex_column {
31
- flex-direction: column;
32
- }
32
+ flex-direction: column
33
+ }
33
34
 
34
35
  .items_center {
35
- align-items: center;
36
- }
36
+ align-items: center
37
+ }
37
38
 
38
39
  .gap_10px {
39
- gap: 10px;
40
- }
40
+ gap: 10px
41
+ }
41
42
 
42
43
  .opacity_0\.8 {
43
- opacity: 0.8;
44
- }
45
- }
44
+ opacity: 0.8
45
+ }
46
+ }
@@ -1,85 +1,86 @@
1
1
  @layer utilities {
2
+
2
3
  .fs_100px {
3
- font-size: 100px;
4
- }
4
+ font-size: 100px
5
+ }
5
6
 
6
7
  .font_bold {
7
- font-weight: var(--font-weights-bold);
8
- }
8
+ font-weight: var(--font-weights-bold)
9
+ }
9
10
 
10
11
  .leading_1 {
11
- line-height: 1;
12
- }
12
+ line-height: 1
13
+ }
13
14
 
14
15
  .font_semibold {
15
- font-weight: var(--font-weights-semibold);
16
- }
16
+ font-weight: var(--font-weights-semibold)
17
+ }
17
18
 
18
19
  .opacity_0\.7 {
19
- opacity: 0.7;
20
- }
20
+ opacity: 0.7
21
+ }
21
22
 
22
23
  .gap_8 {
23
- gap: var(--spacing-8);
24
- }
24
+ gap: var(--spacing-8)
25
+ }
25
26
 
26
27
  .flex_column {
27
- flex-direction: column;
28
- }
28
+ flex-direction: column
29
+ }
29
30
 
30
31
  .gap_10px {
31
- gap: 10px;
32
- }
32
+ gap: 10px
33
+ }
33
34
 
34
35
  .gap_10 {
35
- gap: var(--spacing-10);
36
- }
36
+ gap: var(--spacing-10)
37
+ }
37
38
 
38
39
  .flex_row {
39
- flex-direction: row;
40
- }
40
+ flex-direction: row
41
+ }
41
42
 
42
43
  .flex-wrap_wrap {
43
- flex-wrap: wrap;
44
- }
44
+ flex-wrap: wrap
45
+ }
45
46
 
46
47
  .fs_24px {
47
- font-size: 24px;
48
- }
48
+ font-size: 24px
49
+ }
49
50
 
50
51
  .mt_8 {
51
- margin-top: var(--spacing-8);
52
- }
52
+ margin-top: var(--spacing-8)
53
+ }
53
54
 
54
55
  .text_uppercase {
55
- text-transform: uppercase;
56
- }
56
+ text-transform: uppercase
57
+ }
57
58
 
58
59
  .d_flex {
59
- display: flex;
60
- }
60
+ display: flex
61
+ }
61
62
 
62
63
  .items_center {
63
- align-items: center;
64
- }
64
+ align-items: center
65
+ }
65
66
 
66
67
  .justify_center {
67
- justify-content: center;
68
- }
68
+ justify-content: center
69
+ }
69
70
 
70
71
  .flex_0_0_auto {
71
- flex: 0 0 auto;
72
- }
72
+ flex: 0 0 auto
73
+ }
73
74
 
74
75
  .w_8 {
75
- width: var(--sizes-8);
76
- }
76
+ width: var(--sizes-8)
77
+ }
77
78
 
78
79
  .h_8 {
79
- height: var(--sizes-8);
80
- }
80
+ height: var(--sizes-8)
81
+ }
81
82
 
82
83
  .text_lowercase {
83
- text-transform: lowercase;
84
- }
85
- }
84
+ text-transform: lowercase
85
+ }
86
+ }
@@ -1,61 +1,62 @@
1
1
  @layer utilities {
2
+
2
3
  .mb_3\.5 {
3
- margin-bottom: var(--spacing-3\.5);
4
- }
4
+ margin-bottom: var(--spacing-3\.5)
5
+ }
5
6
 
6
7
  .pos_sticky {
7
- position: sticky;
8
- }
8
+ position: sticky
9
+ }
9
10
 
10
11
  .top_0 {
11
- top: var(--spacing-0);
12
- }
12
+ top: var(--spacing-0)
13
+ }
13
14
 
14
15
  .z_1 {
15
- z-index: 1;
16
- }
16
+ z-index: 1
17
+ }
17
18
 
18
19
  .resize_vertical {
19
- resize: vertical;
20
- }
20
+ resize: vertical
21
+ }
21
22
 
22
23
  .font_medium {
23
- font-weight: var(--font-weights-medium);
24
- }
24
+ font-weight: var(--font-weights-medium)
25
+ }
25
26
 
26
27
  .opacity_0\.4 {
27
- opacity: 0.4;
28
- }
28
+ opacity: 0.4
29
+ }
29
30
 
30
31
  .fs_4xl {
31
- font-size: var(--font-sizes-4xl);
32
- }
32
+ font-size: var(--font-sizes-4xl)
33
+ }
33
34
 
34
35
  .leading_normal {
35
- line-height: var(--line-heights-normal);
36
- }
36
+ line-height: var(--line-heights-normal)
37
+ }
37
38
 
38
39
  .flex_column {
39
- flex-direction: column;
40
- }
40
+ flex-direction: column
41
+ }
41
42
 
42
43
  .gap_3\.5 {
43
- gap: var(--spacing-3\.5);
44
- }
44
+ gap: var(--spacing-3\.5)
45
+ }
45
46
 
46
47
  .d_flex {
47
- display: flex;
48
- }
48
+ display: flex
49
+ }
49
50
 
50
51
  .items_center {
51
- align-items: center;
52
- }
52
+ align-items: center
53
+ }
53
54
 
54
55
  .gap_1 {
55
- gap: var(--spacing-1);
56
- }
56
+ gap: var(--spacing-1)
57
+ }
57
58
 
58
59
  .flex_row {
59
- flex-direction: row;
60
- }
61
- }
60
+ flex-direction: row
61
+ }
62
+ }