@pandacss/studio 0.3.0 → 0.3.1

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 (31) hide show
  1. package/LICENSE.md +1 -1
  2. package/package.json +8 -8
  3. package/src/components/analyzer/category-utilities.tsx +12 -4
  4. package/src/components/analyzer/data-combobox.tsx +27 -10
  5. package/src/components/analyzer/external-icon.tsx +1 -1
  6. package/src/components/analyzer/report-item-columns.tsx +1 -1
  7. package/src/components/analyzer/report-item-link.tsx +1 -1
  8. package/src/components/analyzer/truncated-text.tsx +3 -1
  9. package/src/components/analyzer/utility-details.tsx +31 -25
  10. package/src/components/color-item.tsx +1 -1
  11. package/src/components/colors.tsx +12 -3
  12. package/src/components/icons.tsx +49 -0
  13. package/src/components/semantic-color.tsx +25 -19
  14. package/src/components/token-analyzer.tsx +7 -5
  15. package/src/layouts/Layout.astro +1 -1
  16. package/styled-system/chunks/src__components__analyzer__category-utilities.css +21 -173
  17. package/styled-system/chunks/src__components__analyzer__data-combobox.css +60 -210
  18. package/styled-system/chunks/src__components__analyzer__report-item-columns.css +12 -4
  19. package/styled-system/chunks/src__components__analyzer__report-item-link.css +10 -106
  20. package/styled-system/chunks/src__components__analyzer__truncated-text.css +4 -16
  21. package/styled-system/chunks/src__components__analyzer__utility-details.css +32 -120
  22. package/styled-system/chunks/src__components__color-item.css +2 -2
  23. package/styled-system/chunks/src__components__colors.css +10 -2
  24. package/styled-system/chunks/src__components__semantic-color.css +28 -8
  25. package/styled-system/chunks/src__components__token-analyzer.css +18 -1361
  26. package/styled-system/styles.css +64 -94
  27. package/styled-system/types/pattern.d.ts +7 -6
  28. package/styled-system/jsx/absolute-center.d.ts +0 -8
  29. package/styled-system/jsx/absolute-center.mjs +0 -9
  30. package/styled-system/patterns/absolute-center.d.ts +0 -14
  31. package/styled-system/patterns/absolute-center.mjs +0 -23
@@ -1,20 +1,4 @@
1
1
  @layer utilities {
2
- .font_bold {
3
- font-weight: var(--font-weights-bold);
4
- }
5
-
6
- .font_medium {
7
- font-weight: var(--font-weights-medium);
8
- }
9
-
10
- .font_semibold {
11
- font-weight: var(--font-weights-semibold);
12
- }
13
-
14
- .bg_white {
15
- background-color: var(--colors-white);
16
- }
17
-
18
2
  .p_2 {
19
3
  padding: var(--spacing-2);
20
4
  }
@@ -26,4 +10,8 @@
26
10
  .border_1px_solid_rgba\(0\,_0\,_0\,_0\.1\) {
27
11
  border: 1px solid rgba(0, 0, 0, 0.1);
28
12
  }
13
+
14
+ .text_text {
15
+ color: var(--colors-text);
16
+ }
29
17
  }
@@ -1,24 +1,6 @@
1
1
  @layer utilities {
2
- .\[\&_li\]\:cursor_pointer {
3
- & li {
4
- cursor: pointer;
5
- }
6
- }
7
-
8
- .\[\&_li\]\:cursor_pointer {
9
- & li {
10
- cursor: pointer;
11
- }
12
- }
13
-
14
- .\[\&_li\]\:cursor_pointer {
15
- & li {
16
- cursor: pointer;
17
- }
18
- }
19
-
20
- .rounded_md {
21
- border-radius: var(--radii-md);
2
+ .p_4px_8px {
3
+ padding: 4px 8px;
22
4
  }
23
5
 
24
6
  .\[\&_li\]\:cursor_pointer {
@@ -27,66 +9,6 @@
27
9
  }
28
10
  }
29
11
 
30
- .p_4px_8px {
31
- padding: 4px 8px;
32
- }
33
-
34
- .bg_white {
35
- background: var(--colors-white);
36
- }
37
-
38
- .hover\:opacity_1 {
39
- &:where(:hover, [data-hover]) {
40
- opacity: 1;
41
- }
42
- }
43
-
44
- .hover\:border-b_black {
45
- &:where(:hover, [data-hover]) {
46
- border-bottom-color: var(--colors-black);
47
- }
48
- }
49
-
50
- .hover\:opacity_1 {
51
- &:where(:hover, [data-hover]) {
52
- opacity: 1;
53
- }
54
- }
55
-
56
- .hover\:border-b_black {
57
- &:where(:hover, [data-hover]) {
58
- border-bottom-color: var(--colors-black);
59
- }
60
- }
61
-
62
- .hover\:opacity_1 {
63
- &:where(:hover, [data-hover]) {
64
- opacity: 1;
65
- }
66
- }
67
-
68
- .hover\:border-b_black {
69
- &:where(:hover, [data-hover]) {
70
- border-bottom-color: var(--colors-black);
71
- }
72
- }
73
-
74
- .bg_gray\.50 {
75
- background: var(--colors-gray-50);
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
12
  .list-style_none {
91
13
  list-style: none;
92
14
  }
@@ -123,40 +45,54 @@
123
45
  margin-top: var(--spacing-1);
124
46
  }
125
47
 
126
- .d_block {
127
- display: block;
48
+ .gap_2 {
49
+ gap: var(--spacing-2);
50
+ }
51
+
52
+ .fs_md {
53
+ font-size: var(--font-sizes-md);
128
54
  }
129
55
 
130
- .self_flex-end {
131
- align-self: flex-end;
56
+ .font_bold {
57
+ font-weight: var(--font-weights-bold);
132
58
  }
133
59
 
134
- .mt_2 {
135
- margin-top: var(--spacing-2);
60
+ .ml_auto {
61
+ margin-left: auto;
136
62
  }
137
63
 
138
64
  .select_none {
139
65
  user-select: none;
140
66
  }
141
67
 
142
- .fs_lg {
143
- font-size: var(--font-sizes-lg);
68
+ .bg_card {
69
+ background: var(--colors-card);
144
70
  }
145
71
 
146
- .fs_md {
147
- font-size: var(--font-sizes-md);
72
+ .px_3 {
73
+ padding-inline: var(--spacing-3);
148
74
  }
149
75
 
150
- .font_bold {
151
- font-weight: var(--font-weights-bold);
76
+ .py_2 {
77
+ padding-block: var(--spacing-2);
152
78
  }
153
79
 
154
- .ml_auto {
155
- margin-left: auto;
80
+ .rounded_md {
81
+ border-radius: var(--radii-md);
156
82
  }
157
83
 
158
- .bg_card {
159
- background: var(--colors-card);
84
+ .hover\:opacity_0\.8 {
85
+ &:where(:hover, [data-hover]) {
86
+ opacity: 0.8;
87
+ }
88
+ }
89
+
90
+ .w_16 {
91
+ width: var(--sizes-16);
92
+ }
93
+
94
+ .h_16 {
95
+ height: var(--sizes-16);
160
96
  }
161
97
 
162
98
  .d_flex {
@@ -210,28 +146,4 @@
210
146
  }
211
147
  }
212
148
  }
213
-
214
- .\[\&_li\]\:hover\:opacity_0\.8 {
215
- & li {
216
- &:where(:hover, [data-hover]) {
217
- opacity: 0.8;
218
- }
219
- }
220
- }
221
-
222
- .\[\&_li\]\:hover\:opacity_0\.8 {
223
- & li {
224
- &:where(:hover, [data-hover]) {
225
- opacity: 0.8;
226
- }
227
- }
228
- }
229
-
230
- .\[\&_li\]\:hover\:opacity_0\.8 {
231
- & li {
232
- &:where(:hover, [data-hover]) {
233
- opacity: 0.8;
234
- }
235
- }
236
- }
237
149
  }
@@ -15,7 +15,7 @@
15
15
  margin-bottom: var(--spacing-2);
16
16
  }
17
17
 
18
- .opacity_0\.1 {
19
- opacity: 0.1;
18
+ .opacity_0\.7 {
19
+ opacity: 0.7;
20
20
  }
21
21
  }
@@ -1,4 +1,8 @@
1
1
  @layer utilities {
2
+ .font_semibold {
3
+ font-weight: var(--font-weights-semibold);
4
+ }
5
+
2
6
  .text_capitalize {
3
7
  text-transform: capitalize;
4
8
  }
@@ -75,12 +79,16 @@
75
79
  flex-direction: row;
76
80
  }
77
81
 
82
+ .grid-cols_repeat\(auto-fit\,_minmax\(13rem\,_1fr\)\) {
83
+ grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
84
+ }
85
+
78
86
  .d_grid {
79
87
  display: grid;
80
88
  }
81
89
 
82
- .grid-cols_repeat\(auto-fit\,_minmax\(13rem\,_1fr\)\) {
83
- grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
90
+ .grid-cols_repeat\(auto-fit\,_minmax\(30rem\,_1fr\)\) {
91
+ grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
84
92
  }
85
93
 
86
94
  .gap_4 {
@@ -3,14 +3,6 @@
3
3
  height: var(--sizes-12);
4
4
  }
5
5
 
6
- .font_medium {
7
- font-weight: var(--font-weights-medium);
8
- }
9
-
10
- .fs_sm {
11
- font-size: var(--font-sizes-sm);
12
- }
13
-
14
6
  .min-w_5 {
15
7
  min-width: var(--sizes-5);
16
8
  }
@@ -42,4 +34,32 @@
42
34
  .border_neutral\.700 {
43
35
  border-color: var(--colors-neutral-700);
44
36
  }
37
+
38
+ .font_medium {
39
+ font-weight: var(--font-weights-medium);
40
+ }
41
+
42
+ .opacity_0\.7 {
43
+ opacity: 0.7;
44
+ }
45
+
46
+ .fs_sm {
47
+ font-size: var(--font-sizes-sm);
48
+ }
49
+
50
+ .text_uppercase {
51
+ text-transform: uppercase;
52
+ }
53
+
54
+ .d_flex {
55
+ display: flex;
56
+ }
57
+
58
+ .flex_column {
59
+ flex-direction: column;
60
+ }
61
+
62
+ .w_full {
63
+ width: var(--sizes-full);
64
+ }
45
65
  }