@pandacss/studio 0.20.1 → 0.22.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 (46) hide show
  1. package/astro.config.mjs +3 -9
  2. package/dist/studio.d.mts +1 -1
  3. package/dist/studio.d.ts +1 -1
  4. package/dist/studio.js +38 -2050
  5. package/dist/studio.mjs +42 -2080
  6. package/package.json +11 -14
  7. package/src/components/sizes.tsx +4 -3
  8. package/styled-system/css/css.mjs +1 -1
  9. package/styled-system/helpers.mjs +4 -4
  10. package/styled-system/jsx/factory.mjs +1 -2
  11. package/styled-system/jsx/index.d.ts +0 -3
  12. package/styled-system/jsx/is-valid-prop.mjs +1 -1
  13. package/styled-system/styles.css +1277 -542
  14. package/styled-system/types/conditions.d.ts +1 -1
  15. package/styled-system/types/csstype.d.ts +1270 -721
  16. package/styled-system/types/prop-type.d.ts +22 -5
  17. package/styled-system/types/recipe.d.ts +5 -0
  18. package/styled-system/types/static-css.d.ts +39 -0
  19. package/styled-system/chunks/src__components__color-constrast.css +0 -106
  20. package/styled-system/chunks/src__components__color-wrapper.css +0 -58
  21. package/styled-system/chunks/src__components__colors.css +0 -106
  22. package/styled-system/chunks/src__components__empty-state.css +0 -46
  23. package/styled-system/chunks/src__components__font-family.css +0 -86
  24. package/styled-system/chunks/src__components__font-tokens.css +0 -62
  25. package/styled-system/chunks/src__components__input.css +0 -58
  26. package/styled-system/chunks/src__components__layer-styles.css +0 -63
  27. package/styled-system/chunks/src__components__nav-item.css +0 -57
  28. package/styled-system/chunks/src__components__overview.css +0 -122
  29. package/styled-system/chunks/src__components__radii.css +0 -50
  30. package/styled-system/chunks/src__components__semantic-color.css +0 -70
  31. package/styled-system/chunks/src__components__side-nav-item.css +0 -30
  32. package/styled-system/chunks/src__components__side-nav.css +0 -50
  33. package/styled-system/chunks/src__components__sizes.css +0 -42
  34. package/styled-system/chunks/src__components__text-styles.css +0 -32
  35. package/styled-system/chunks/src__components__theme-toggle.css +0 -62
  36. package/styled-system/chunks/src__components__token-content.css +0 -14
  37. package/styled-system/chunks/src__components__token-group.css +0 -22
  38. package/styled-system/chunks/src__components__typography-playground.css +0 -62
  39. package/styled-system/chunks/src__layouts__Sidebar.css +0 -114
  40. package/styled-system/global.css +0 -58
  41. package/styled-system/reset.css +0 -214
  42. package/styled-system/static.css +0 -5
  43. package/styled-system/tokens/index.css +0 -437
  44. package/styled-system/tokens/keyframes.css +0 -28
  45. package/styled-system/types/helpers.d.ts +0 -2
  46. package/virtual-panda.ts +0 -62
@@ -1,114 +0,0 @@
1
- @layer utilities {
2
-
3
- .h_calc\(100vh_-_env\(safe-area-inset-bottom\)\) {
4
- height: calc(100vh - env(safe-area-inset-bottom))
5
- }
6
-
7
- .font_bold {
8
- font-weight: var(--font-weights-bold)
9
- }
10
-
11
- .fs_2xl {
12
- font-size: var(--font-sizes-2xl)
13
- }
14
-
15
- .gap_2 {
16
- gap: var(--spacing-2)
17
- }
18
-
19
- .w_16 {
20
- width: var(--sizes-16)
21
- }
22
-
23
- .mt_4 {
24
- margin-top: var(--spacing-4)
25
- }
26
-
27
- .pt_14 {
28
- padding-top: var(--spacing-14)
29
- }
30
-
31
- .pb_8 {
32
- padding-bottom: var(--spacing-8)
33
- }
34
-
35
- .fs_3xl {
36
- font-size: var(--font-sizes-3xl)
37
- }
38
-
39
- .font_semibold {
40
- font-weight: var(--font-weights-semibold)
41
- }
42
-
43
- .mb_8 {
44
- margin-bottom: var(--spacing-8)
45
- }
46
-
47
- .tracking_tight {
48
- letter-spacing: var(--letter-spacings-tight)
49
- }
50
-
51
- .d_flex {
52
- display: flex
53
- }
54
-
55
- .flex_column {
56
- flex-direction: column
57
- }
58
-
59
- .gap_10px {
60
- gap: 10px
61
- }
62
-
63
- .h_full {
64
- height: var(--sizes-full)
65
- }
66
-
67
- .min-w_60 {
68
- min-width: var(--sizes-60)
69
- }
70
-
71
- .px_12 {
72
- padding-inline: var(--spacing-12)
73
- }
74
-
75
- .py_8 {
76
- padding-block: var(--spacing-8)
77
- }
78
-
79
- .pos_relative {
80
- position: relative
81
- }
82
-
83
- .max-w_8xl {
84
- max-width: var(--sizes-8xl)
85
- }
86
-
87
- .mx_auto {
88
- margin-inline: auto
89
- }
90
-
91
- .px_4 {
92
- padding-inline: var(--spacing-4)
93
- }
94
-
95
- .w_full {
96
- width: var(--sizes-full)
97
- }
98
-
99
- .overflow_auto {
100
- overflow: auto
101
- }
102
-
103
- @media screen and (min-width: 48em) {
104
- .md\:px_6 {
105
- padding-inline: var(--spacing-6)
106
- }
107
- }
108
-
109
- @media screen and (min-width: 64em) {
110
- .lg\:px_8 {
111
- padding-inline: var(--spacing-8)
112
- }
113
- }
114
- }
@@ -1,58 +0,0 @@
1
- @layer base {
2
- :root {
3
- --made-with-panda: '🐼'
4
- }
5
-
6
- *, *::before, *::after, ::backdrop {
7
- --blur: ;
8
- --brightness: ;
9
- --contrast: ;
10
- --grayscale: ;
11
- --hue-rotate: ;
12
- --invert: ;
13
- --saturate: ;
14
- --sepia: ;
15
- --drop-shadow: ;
16
- --backdrop-blur: ;
17
- --backdrop-brightness: ;
18
- --backdrop-contrast: ;
19
- --backdrop-grayscale: ;
20
- --backdrop-hue-rotate: ;
21
- --backdrop-invert: ;
22
- --backdrop-opacity: ;
23
- --backdrop-saturate: ;
24
- --backdrop-sepia: ;
25
- --scroll-snap-strictness: proximity;
26
- --border-spacing-x: 0;
27
- --border-spacing-y: 0;
28
- --translate-x: 0;
29
- --translate-y: 0;
30
- --rotate: 0;
31
- --skew-x: 0;
32
- --skew-y: 0;
33
- --scale-x: 1;
34
- --scale-y: 1
35
- }
36
-
37
- :root {
38
- --global-color-border: var(--colors-border);
39
- --global-color-placeholder: var(--colors-neutral-500);
40
- font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
41
- font-size: var(--font-sizes-md);
42
- line-height: var(--line-heights-normal);
43
- font-weight: var(--font-weights-normal);
44
- color-scheme: light dark;
45
- color: var(--colors-text);
46
- background: var(--colors-bg)
47
- }
48
-
49
- a {
50
- color: unset;
51
- text-decoration: none
52
- }
53
-
54
- body {
55
- margin: var(--spacing-0);
56
- min-height: 100vh
57
- }
58
- }
@@ -1,214 +0,0 @@
1
- @layer reset {
2
- * {
3
- margin: 0;
4
- padding: 0;
5
- font: inherit;
6
- }
7
-
8
- *,
9
- *::before,
10
- *::after {
11
- box-sizing: border-box;
12
- border-width: 0;
13
- border-style: solid;
14
- border-color: var(--global-color-border, currentColor);
15
- }
16
-
17
- html {
18
- line-height: 1.5;
19
- --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
20
- 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
21
- 'Noto Color Emoji';
22
- -webkit-text-size-adjust: 100%;
23
- -webkit-font-smoothing: antialiased;
24
- -moz-osx-font-smoothing: grayscale;
25
- -moz-tab-size: 4;
26
- tab-size: 4;
27
- font-family: var(--global-font-body, var(--font-fallback));
28
- }
29
-
30
- hr {
31
- height: 0;
32
- color: inherit;
33
- border-top-width: 1px;
34
- }
35
-
36
- body {
37
- height: 100%;
38
- line-height: inherit;
39
- }
40
-
41
- img {
42
- border-style: none;
43
- }
44
-
45
- img,
46
- svg,
47
- video,
48
- canvas,
49
- audio,
50
- iframe,
51
- embed,
52
- object {
53
- display: block;
54
- vertical-align: middle;
55
- }
56
-
57
- img,
58
- video {
59
- max-width: 100%;
60
- height: auto;
61
- }
62
-
63
- p,
64
- h1,
65
- h2,
66
- h3,
67
- h4,
68
- h5,
69
- h6 {
70
- overflow-wrap: break-word;
71
- }
72
-
73
- ol,
74
- ul {
75
- list-style: none;
76
- }
77
-
78
- code,
79
- kbd,
80
- pre,
81
- samp {
82
- font-size: 1em;
83
- }
84
-
85
- button,
86
- [type='button'],
87
- [type='reset'],
88
- [type='submit'] {
89
- -webkit-appearance: button;
90
- background-color: transparent;
91
- background-image: none;
92
- }
93
-
94
- button,
95
- input,
96
- optgroup,
97
- select,
98
- textarea {
99
- color: inherit;
100
- }
101
-
102
- button,
103
- select {
104
- text-transform: none;
105
- }
106
-
107
- table {
108
- text-indent: 0;
109
- border-color: inherit;
110
- border-collapse: collapse;
111
- }
112
-
113
- input::placeholder,
114
- textarea::placeholder {
115
- opacity: 1;
116
- color: var(--global-color-placeholder, #9ca3af);
117
- }
118
-
119
- textarea {
120
- resize: vertical;
121
- }
122
-
123
- summary {
124
- display: list-item;
125
- }
126
-
127
- small {
128
- font-size: 80%;
129
- }
130
-
131
- sub,
132
- sup {
133
- font-size: 75%;
134
- line-height: 0;
135
- position: relative;
136
- vertical-align: baseline;
137
- }
138
-
139
- sub {
140
- bottom: -0.25em;
141
- }
142
-
143
- sup {
144
- top: -0.5em;
145
- }
146
-
147
- dialog {
148
- padding: 0;
149
- }
150
-
151
- a {
152
- color: inherit;
153
- text-decoration: inherit;
154
- }
155
-
156
- abbr:where([title]) {
157
- text-decoration: underline dotted;
158
- }
159
-
160
- b,
161
- strong {
162
- font-weight: bolder;
163
- }
164
-
165
- code,
166
- kbd,
167
- samp,
168
- pre {
169
- font-size: 1em;
170
- --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
171
- font-family: var(--global-font-mono, var(--font-mono-fallback));
172
- }
173
-
174
-
175
- input[type="text"],
176
- input[type="email"],
177
- input[type="search"],
178
- input[type="password"] {
179
- -webkit-appearance: none;
180
- -moz-appearance: none;
181
- }
182
-
183
- input[type='search'] {
184
- -webkit-appearance: textfield;
185
- outline-offset: -2px;
186
- }
187
-
188
- ::-webkit-search-decoration,
189
- ::-webkit-search-cancel-button {
190
- -webkit-appearance: none;
191
- }
192
-
193
- ::-webkit-file-upload-button {
194
- -webkit-appearance: button;
195
- font: inherit;
196
- }
197
-
198
- input[type="number"]::-webkit-inner-spin-button,
199
- input[type="number"]::-webkit-outer-spin-button {
200
- height: auto;
201
- }
202
-
203
- input[type='number']{
204
- -moz-appearance: textfield;
205
- }
206
-
207
- :-moz-ui-invalid {
208
- box-shadow: none;
209
- }
210
-
211
- :-moz-focusring {
212
- outline: auto;
213
- }
214
- }
@@ -1,5 +0,0 @@
1
- @layer utilities {
2
- .text_red\.400 {
3
- color: var(--colors-red-400)
4
- }
5
- }