@pandacss/studio 0.21.0 → 0.22.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 (64) 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/helpers.mjs +3 -1
  9. package/styled-system/jsx/aspect-ratio.mjs +2 -5
  10. package/styled-system/jsx/bleed.mjs +2 -5
  11. package/styled-system/jsx/box.mjs +3 -7
  12. package/styled-system/jsx/center.mjs +2 -5
  13. package/styled-system/jsx/circle.mjs +2 -5
  14. package/styled-system/jsx/container.mjs +3 -7
  15. package/styled-system/jsx/divider.mjs +2 -5
  16. package/styled-system/jsx/factory.mjs +1 -2
  17. package/styled-system/jsx/flex.mjs +2 -5
  18. package/styled-system/jsx/float.mjs +2 -5
  19. package/styled-system/jsx/grid-item.mjs +2 -5
  20. package/styled-system/jsx/grid.mjs +2 -5
  21. package/styled-system/jsx/hstack.mjs +2 -5
  22. package/styled-system/jsx/index.d.ts +0 -3
  23. package/styled-system/jsx/link-box.mjs +3 -7
  24. package/styled-system/jsx/link-overlay.mjs +3 -7
  25. package/styled-system/jsx/spacer.mjs +2 -5
  26. package/styled-system/jsx/square.mjs +2 -5
  27. package/styled-system/jsx/stack.mjs +2 -5
  28. package/styled-system/jsx/styled-link.mjs +3 -7
  29. package/styled-system/jsx/visually-hidden.mjs +3 -7
  30. package/styled-system/jsx/vstack.mjs +2 -5
  31. package/styled-system/jsx/wrap.mjs +2 -5
  32. package/styled-system/styles.css +1277 -542
  33. package/styled-system/types/conditions.d.ts +1 -1
  34. package/styled-system/types/csstype.d.ts +1270 -721
  35. package/styled-system/types/recipe.d.ts +9 -0
  36. package/styled-system/types/static-css.d.ts +39 -0
  37. package/styled-system/chunks/src__components__color-constrast.css +0 -106
  38. package/styled-system/chunks/src__components__color-wrapper.css +0 -58
  39. package/styled-system/chunks/src__components__colors.css +0 -106
  40. package/styled-system/chunks/src__components__empty-state.css +0 -46
  41. package/styled-system/chunks/src__components__font-family.css +0 -86
  42. package/styled-system/chunks/src__components__font-tokens.css +0 -62
  43. package/styled-system/chunks/src__components__input.css +0 -58
  44. package/styled-system/chunks/src__components__layer-styles.css +0 -63
  45. package/styled-system/chunks/src__components__nav-item.css +0 -57
  46. package/styled-system/chunks/src__components__overview.css +0 -122
  47. package/styled-system/chunks/src__components__radii.css +0 -50
  48. package/styled-system/chunks/src__components__semantic-color.css +0 -70
  49. package/styled-system/chunks/src__components__side-nav-item.css +0 -30
  50. package/styled-system/chunks/src__components__side-nav.css +0 -50
  51. package/styled-system/chunks/src__components__sizes.css +0 -42
  52. package/styled-system/chunks/src__components__text-styles.css +0 -32
  53. package/styled-system/chunks/src__components__theme-toggle.css +0 -62
  54. package/styled-system/chunks/src__components__token-content.css +0 -14
  55. package/styled-system/chunks/src__components__token-group.css +0 -22
  56. package/styled-system/chunks/src__components__typography-playground.css +0 -62
  57. package/styled-system/chunks/src__layouts__Sidebar.css +0 -114
  58. package/styled-system/global.css +0 -58
  59. package/styled-system/reset.css +0 -214
  60. package/styled-system/static.css +0 -5
  61. package/styled-system/tokens/index.css +0 -437
  62. package/styled-system/tokens/keyframes.css +0 -28
  63. package/styled-system/types/helpers.d.ts +0 -2
  64. package/virtual-panda.ts +0 -62
@@ -1,122 +0,0 @@
1
- @layer utilities {
2
-
3
- .bg_\#646cff {
4
- background: #646cff
5
- }
6
-
7
- .text_white {
8
- color: var(--colors-white)
9
- }
10
-
11
- .w_fit-content {
12
- width: fit-content
13
- }
14
-
15
- .fs_small {
16
- font-size: small
17
- }
18
-
19
- .px_6 {
20
- padding-inline: var(--spacing-6)
21
- }
22
-
23
- .py_1 {
24
- padding-block: var(--spacing-1)
25
- }
26
-
27
- .rounded_sm {
28
- border-radius: var(--radii-sm)
29
- }
30
-
31
- .mt_6 {
32
- margin-top: var(--spacing-6)
33
- }
34
-
35
- .transition_all_0\.2s_ease {
36
- transition: all 0.2s ease
37
- }
38
-
39
- .flex_column {
40
- flex-direction: column
41
- }
42
-
43
- .py_24 {
44
- padding-block: var(--spacing-24)
45
- }
46
-
47
- .mb_10 {
48
- margin-bottom: var(--spacing-10)
49
- }
50
-
51
- .bg_card {
52
- background: var(--colors-card)
53
- }
54
-
55
- .font_bold {
56
- font-weight: var(--font-weights-bold)
57
- }
58
-
59
- .fs_2xl {
60
- font-size: var(--font-sizes-2xl)
61
- }
62
-
63
- .px_8 {
64
- padding-inline: var(--spacing-8)
65
- }
66
-
67
- .py_4 {
68
- padding-block: var(--spacing-4)
69
- }
70
-
71
- .gap_2 {
72
- gap: var(--spacing-2)
73
- }
74
-
75
- .fs_3xl {
76
- font-size: var(--font-sizes-3xl)
77
- }
78
-
79
- .font_semibold {
80
- font-weight: var(--font-weights-semibold)
81
- }
82
-
83
- .mb_6 {
84
- margin-bottom: var(--spacing-6)
85
- }
86
-
87
- .d_block {
88
- display: block
89
- }
90
-
91
- .p_8 {
92
- padding: var(--spacing-8)
93
- }
94
-
95
- .d_flex {
96
- display: flex
97
- }
98
-
99
- .flex-wrap_wrap {
100
- flex-wrap: wrap
101
- }
102
-
103
- .gap_6 {
104
- gap: var(--spacing-6)
105
- }
106
-
107
- .my_2 {
108
- margin-block: var(--spacing-2)
109
- }
110
-
111
- .p_0 {
112
- padding: var(--spacing-0)
113
- }
114
-
115
- .\[\&\:hover\]\:bg_\#4049f0:hover {
116
- background: #4049f0
117
- }
118
-
119
- .\[\&\:hover\]\:shadow_lg:hover {
120
- box-shadow: var(--shadows-lg)
121
- }
122
- }
@@ -1,50 +0,0 @@
1
- @layer utilities {
2
-
3
- .w_80px {
4
- width: 80px
5
- }
6
-
7
- .h_80px {
8
- height: 80px
9
- }
10
-
11
- .bg_rgba\(255\,_192\,_203\,_0\.5\) {
12
- background: rgba(255, 192, 203, 0.5)
13
- }
14
-
15
- .opacity_0\.7 {
16
- opacity: 0.7
17
- }
18
-
19
- .d_grid {
20
- display: grid
21
- }
22
-
23
- .grid-cols_repeat\(auto-fit\,_minmax\(10rem\,_1fr\)\) {
24
- grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))
25
- }
26
-
27
- .gap_10 {
28
- gap: var(--spacing-10)
29
- }
30
-
31
- .gap_10px {
32
- gap: 10px
33
- }
34
-
35
- .d_flex {
36
- display: flex
37
- }
38
-
39
- .flex_column {
40
- flex-direction: column
41
- }
42
-
43
- .items_center {
44
- align-items: center
45
- }
46
-
47
- .gap_1 {
48
- gap: var(--spacing-1)
49
- }
50
- }
@@ -1,70 +0,0 @@
1
- @layer utilities {
2
-
3
- .h_12 {
4
- height: var(--sizes-12)
5
- }
6
-
7
- .min-w_5 {
8
- min-width: var(--sizes-5)
9
- }
10
-
11
- .bg_neutral\.800 {
12
- background: var(--colors-neutral-800)
13
- }
14
-
15
- .px_1 {
16
- padding-inline: var(--spacing-1)
17
- }
18
-
19
- .py_1 {
20
- padding-block: var(--spacing-1)
21
- }
22
-
23
- .text_white {
24
- color: var(--colors-white)
25
- }
26
-
27
- .rounded-br_sm {
28
- border-bottom-right-radius: var(--radii-sm)
29
- }
30
-
31
- .border-width_1px {
32
- border-width: 1px
33
- }
34
-
35
- .border_neutral\.700 {
36
- border-color: var(--colors-neutral-700)
37
- }
38
-
39
- .font_medium {
40
- font-weight: var(--font-weights-medium)
41
- }
42
-
43
- .mt_2 {
44
- margin-top: var(--spacing-2)
45
- }
46
-
47
- .opacity_0\.7 {
48
- opacity: 0.7
49
- }
50
-
51
- .fs_sm {
52
- font-size: var(--font-sizes-sm)
53
- }
54
-
55
- .text_uppercase {
56
- text-transform: uppercase
57
- }
58
-
59
- .d_flex {
60
- display: flex
61
- }
62
-
63
- .flex_column {
64
- flex-direction: column
65
- }
66
-
67
- .w_full {
68
- width: var(--sizes-full)
69
- }
70
- }
@@ -1,30 +0,0 @@
1
- @layer utilities {
2
-
3
- .d_block {
4
- display: block
5
- }
6
-
7
- .py_1\.5 {
8
- padding-block: var(--spacing-1\.5)
9
- }
10
-
11
- .cursor_pointer {
12
- cursor: pointer
13
- }
14
-
15
- .fs_md {
16
- font-size: var(--font-sizes-md)
17
- }
18
-
19
- .font_medium {
20
- font-weight: var(--font-weights-medium)
21
- }
22
-
23
- .currentPage\:text_yellow\.300[aria-current=page] {
24
- color: var(--colors-yellow-300)
25
- }
26
-
27
- .hover\:text_yellow\.300:is(:hover, [data-hover]) {
28
- color: var(--colors-yellow-300)
29
- }
30
- }
@@ -1,50 +0,0 @@
1
- @layer utilities {
2
-
3
- .mt_8 {
4
- margin-top: var(--spacing-8)
5
- }
6
-
7
- .font_bold {
8
- font-weight: var(--font-weights-bold)
9
- }
10
-
11
- .fs_small {
12
- font-size: small
13
- }
14
-
15
- .opacity_0\.7 {
16
- opacity: 0.7
17
- }
18
-
19
- .mb_8 {
20
- margin-bottom: var(--spacing-8)
21
- }
22
-
23
- .list_none {
24
- list-style-type: none
25
- }
26
-
27
- .p_0 {
28
- padding: var(--spacing-0)
29
- }
30
-
31
- .my_2 {
32
- margin-block: var(--spacing-2)
33
- }
34
-
35
- .mx_0 {
36
- margin-inline: var(--spacing-0)
37
- }
38
-
39
- .d_flex {
40
- display: flex
41
- }
42
-
43
- .flex_column {
44
- flex-direction: column
45
- }
46
-
47
- .gap_10 {
48
- gap: var(--spacing-10)
49
- }
50
- }
@@ -1,42 +0,0 @@
1
- @layer utilities {
2
-
3
- .font_semibold {
4
- font-weight: var(--font-weights-semibold)
5
- }
6
-
7
- .col-span_span_3_\/_span_3 {
8
- grid-column: span 3 / span 3
9
- }
10
-
11
- .h_5 {
12
- height: var(--sizes-5)
13
- }
14
-
15
- .bg_rgba\(255\,_192\,_203\,_0\.5\) {
16
- background: rgba(255, 192, 203, 0.5)
17
- }
18
-
19
- .col-span_span_2_\/_span_2 {
20
- grid-column: span 2 / span 2
21
- }
22
-
23
- .col-span_span_5_\/_span_5 {
24
- grid-column: span 5 / span 5
25
- }
26
-
27
- .d_grid {
28
- display: grid
29
- }
30
-
31
- .grid-cols_repeat\(5\,_minmax\(0\,_1fr\)\) {
32
- grid-template-columns: repeat(5, minmax(0, 1fr))
33
- }
34
-
35
- .gap-y_10 {
36
- column-gap: var(--spacing-10)
37
- }
38
-
39
- .gap-x_2\.5 {
40
- row-gap: var(--spacing-2\.5)
41
- }
42
- }
@@ -1,32 +0,0 @@
1
- @layer utilities {
2
-
3
- .px_1 {
4
- padding-inline: var(--spacing-1)
5
- }
6
-
7
- .py_2\.5 {
8
- padding-block: var(--spacing-2\.5)
9
- }
10
-
11
- .border_card {
12
- border-color: var(--colors-card)
13
- }
14
-
15
- .flex_auto {
16
- flex: 1 1 auto
17
- }
18
-
19
- .my_3 {
20
- margin-block: var(--spacing-3)
21
- }
22
-
23
- .truncate_true {
24
- overflow: hidden;
25
- text-overflow: ellipsis;
26
- white-space: nowrap
27
- }
28
-
29
- .font_medium {
30
- font-weight: var(--font-weights-medium)
31
- }
32
- }
@@ -1,62 +0,0 @@
1
- @layer utilities {
2
-
3
- .cursor_pointer {
4
- cursor: pointer
5
- }
6
-
7
- .\[\&\.active\]\:text_yellow\.300.active {
8
- color: var(--colors-yellow-300)
9
- }
10
-
11
- .sr_true {
12
- position: absolute;
13
- width: 1px;
14
- height: 1px;
15
- padding: 0;
16
- margin: -1px;
17
- overflow: hidden;
18
- clip: rect(0, 0, 0, 0);
19
- white-space: nowrap;
20
- border-width: 0
21
- }
22
-
23
- .d_flex {
24
- display: flex
25
- }
26
-
27
- .items_center {
28
- align-items: center
29
- }
30
-
31
- .gap_3 {
32
- gap: var(--spacing-3)
33
- }
34
-
35
- .flex_row {
36
- flex-direction: row
37
- }
38
-
39
- .rounded_md {
40
- border-radius: var(--radii-md)
41
- }
42
-
43
- .px_2 {
44
- padding-inline: var(--spacing-2)
45
- }
46
-
47
- .py_2 {
48
- padding-block: var(--spacing-2)
49
- }
50
-
51
- .border-width_1px {
52
- border-width: 1px
53
- }
54
-
55
- .self_flex-start {
56
- align-self: flex-start
57
- }
58
-
59
- .text_inherit {
60
- color: inherit
61
- }
62
- }
@@ -1,14 +0,0 @@
1
- @layer utilities {
2
-
3
- .d_flex {
4
- display: flex
5
- }
6
-
7
- .flex_column {
8
- flex-direction: column
9
- }
10
-
11
- .gap_12 {
12
- gap: var(--spacing-12)
13
- }
14
- }
@@ -1,22 +0,0 @@
1
- @layer utilities {
2
-
3
- .d_flex {
4
- display: flex
5
- }
6
-
7
- .flex_column {
8
- flex-direction: column
9
- }
10
-
11
- .gap_3 {
12
- gap: var(--spacing-3)
13
- }
14
-
15
- .w_full {
16
- width: var(--sizes-full)
17
- }
18
-
19
- .mt_5 {
20
- margin-top: var(--spacing-5)
21
- }
22
- }
@@ -1,62 +0,0 @@
1
- @layer utilities {
2
-
3
- .bg_card {
4
- background: var(--colors-card)
5
- }
6
-
7
- .ring_0 {
8
- outline: 0
9
- }
10
-
11
- .pt_28 {
12
- padding-top: var(--spacing-28)
13
- }
14
-
15
- .pb_28 {
16
- padding-bottom: var(--spacing-28)
17
- }
18
-
19
- .mx_auto {
20
- margin-inline: auto
21
- }
22
-
23
- .w_fit-content {
24
- width: fit-content
25
- }
26
-
27
- .items_center {
28
- align-items: center
29
- }
30
-
31
- .gap_1\.5 {
32
- gap: var(--spacing-1\.5)
33
- }
34
-
35
- .white-space_nowrap {
36
- white-space: nowrap
37
- }
38
-
39
- .w_48 {
40
- width: var(--sizes-48)
41
- }
42
-
43
- .text_capitalize {
44
- text-transform: capitalize
45
- }
46
-
47
- .mr_2 {
48
- margin-right: var(--spacing-2)
49
- }
50
-
51
- .d_flex {
52
- display: flex
53
- }
54
-
55
- .flex_column {
56
- flex-direction: column
57
- }
58
-
59
- .gap_4 {
60
- gap: var(--spacing-4)
61
- }
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
- }