@pandacss/studio 0.0.0-dev-20230616145250 → 0.0.0-dev-20230616150240
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.
- package/package.json +8 -8
- package/styled-system/chunks/src__components__analyzer__file-details.css +49 -49
- package/styled-system/chunks/src__components__analyzer__quick-tooltip.css +2 -1
- package/styled-system/chunks/src__components__analyzer__report-item-link.css +51 -50
- package/styled-system/chunks/src__components__analyzer__section.css +15 -15
- package/styled-system/chunks/src__components__analyzer__text-with-count.css +17 -17
- package/styled-system/chunks/src__components__analyzer__token-search-combobox.css +2 -1
- package/styled-system/chunks/src__components__analyzer__truncated-text.css +9 -8
- package/styled-system/chunks/src__components__analyzer__utility-details.css +70 -70
- package/styled-system/chunks/src__components__color-constrast.css +57 -57
- package/styled-system/chunks/src__components__color-item.css +11 -10
- package/styled-system/chunks/src__components__color-wrapper.css +29 -29
- package/styled-system/chunks/src__components__colors.css +53 -52
- package/styled-system/chunks/src__components__empty-state.css +23 -23
- package/styled-system/chunks/src__components__font-family.css +43 -43
- package/styled-system/chunks/src__components__font-tokens.css +31 -30
- package/styled-system/chunks/src__components__input.css +31 -30
- package/styled-system/chunks/src__components__layer-styles.css +31 -30
- package/styled-system/chunks/src__components__nav-item.css +31 -30
- package/styled-system/chunks/src__components__overview.css +61 -61
- package/styled-system/chunks/src__components__radii.css +25 -24
- package/styled-system/chunks/src__components__semantic-color.css +33 -33
- package/styled-system/chunks/src__components__side-nav-item.css +16 -16
- package/styled-system/chunks/src__components__side-nav.css +25 -25
- package/styled-system/chunks/src__components__sizes.css +21 -21
- package/styled-system/chunks/src__components__text-styles.css +15 -14
- package/styled-system/chunks/src__components__theme-toggle.css +27 -27
- package/styled-system/chunks/src__components__token-analyzer.css +120 -121
- package/styled-system/chunks/src__components__token-content.css +7 -7
- package/styled-system/chunks/src__components__token-group.css +11 -11
- package/styled-system/chunks/src__components__typography-playground.css +31 -31
- package/styled-system/chunks/src__layouts__Layout.css +2 -1
- package/styled-system/chunks/src__layouts__Sidebar.css +55 -56
- package/styled-system/chunks/src__pages__colors.css +2 -1
- package/styled-system/chunks/src__pages__font-sizes.css +2 -1
- package/styled-system/chunks/src__pages__font-weights.css +2 -1
- package/styled-system/chunks/src__pages__fonts.css +2 -1
- package/styled-system/chunks/src__pages__index.css +2 -1
- package/styled-system/chunks/src__pages__layer-styles.css +2 -1
- package/styled-system/chunks/src__pages__letter-spacings.css +2 -1
- package/styled-system/chunks/src__pages__line-heights.css +2 -1
- package/styled-system/chunks/src__pages__playground__contrast-checker.css +2 -1
- package/styled-system/chunks/src__pages__playground__typography.css +2 -1
- package/styled-system/chunks/src__pages__radii.css +2 -1
- package/styled-system/chunks/src__pages__sizes.css +2 -1
- package/styled-system/chunks/src__pages__spacing.css +2 -1
- package/styled-system/chunks/src__pages__text-styles.css +2 -1
- package/styled-system/chunks/src__pages__token-analyzer__file.css +2 -1
- package/styled-system/chunks/src__pages__token-analyzer__index.css +2 -1
- package/styled-system/chunks/src__pages__token-analyzer__utility.css +2 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pandacss/studio",
|
|
3
|
-
"version": "0.0.0-dev-
|
|
3
|
+
"version": "0.0.0-dev-20230616150240",
|
|
4
4
|
"description": "The automated token documentation for Panda CSS",
|
|
5
5
|
"main": "dist/studio.js",
|
|
6
6
|
"module": "dist/studio.mjs",
|
|
@@ -32,19 +32,19 @@
|
|
|
32
32
|
"react": "18.2.0",
|
|
33
33
|
"react-dom": "18.2.0",
|
|
34
34
|
"vite": "4.3.9",
|
|
35
|
-
"@pandacss/types": "0.0.0-dev-
|
|
36
|
-
"@pandacss/config": "0.0.0-dev-
|
|
37
|
-
"@pandacss/shared": "0.0.0-dev-
|
|
38
|
-
"@pandacss/token-dictionary": "0.0.0-dev-
|
|
39
|
-
"@pandacss/logger": "0.0.0-dev-
|
|
40
|
-
"@pandacss/node": "0.0.0-dev-
|
|
35
|
+
"@pandacss/types": "0.0.0-dev-20230616150240",
|
|
36
|
+
"@pandacss/config": "0.0.0-dev-20230616150240",
|
|
37
|
+
"@pandacss/shared": "0.0.0-dev-20230616150240",
|
|
38
|
+
"@pandacss/token-dictionary": "0.0.0-dev-20230616150240",
|
|
39
|
+
"@pandacss/logger": "0.0.0-dev-20230616150240",
|
|
40
|
+
"@pandacss/node": "0.0.0-dev-20230616150240"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@types/react": "18.2.12",
|
|
44
44
|
"@types/react-dom": "18.2.5",
|
|
45
45
|
"@vitejs/plugin-react": "4.0.0",
|
|
46
46
|
"execa": "7.1.1",
|
|
47
|
-
"@pandacss/dev": "0.0.0-dev-
|
|
47
|
+
"@pandacss/dev": "0.0.0-dev-20230616150240"
|
|
48
48
|
},
|
|
49
49
|
"scripts": {
|
|
50
50
|
"codegen": "panda",
|
|
@@ -1,103 +1,103 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
|
-
|
|
3
2
|
.ml_auto {
|
|
4
|
-
margin-left: auto
|
|
5
|
-
|
|
3
|
+
margin-left: auto;
|
|
4
|
+
}
|
|
6
5
|
|
|
7
6
|
.p_4 {
|
|
8
|
-
padding: var(--spacing-4)
|
|
9
|
-
|
|
7
|
+
padding: var(--spacing-4);
|
|
8
|
+
}
|
|
10
9
|
|
|
11
10
|
.justify_center {
|
|
12
|
-
justify-content: center
|
|
13
|
-
|
|
11
|
+
justify-content: center;
|
|
12
|
+
}
|
|
14
13
|
|
|
15
14
|
.fs_xl {
|
|
16
|
-
font-size: var(--font-sizes-xl)
|
|
17
|
-
|
|
15
|
+
font-size: var(--font-sizes-xl);
|
|
16
|
+
}
|
|
18
17
|
|
|
19
18
|
.p_16 {
|
|
20
|
-
padding: var(--spacing-16)
|
|
21
|
-
|
|
19
|
+
padding: var(--spacing-16);
|
|
20
|
+
}
|
|
22
21
|
|
|
23
22
|
.mt_8 {
|
|
24
|
-
margin-top: var(--spacing-8)
|
|
25
|
-
|
|
23
|
+
margin-top: var(--spacing-8);
|
|
24
|
+
}
|
|
26
25
|
|
|
27
26
|
.mt_1 {
|
|
28
|
-
margin-top: var(--spacing-1)
|
|
29
|
-
|
|
27
|
+
margin-top: var(--spacing-1);
|
|
28
|
+
}
|
|
30
29
|
|
|
31
30
|
.font_bold {
|
|
32
|
-
font-weight: var(--font-weights-bold)
|
|
33
|
-
|
|
31
|
+
font-weight: var(--font-weights-bold);
|
|
32
|
+
}
|
|
34
33
|
|
|
35
34
|
.mb_4 {
|
|
36
|
-
margin-bottom: var(--spacing-4)
|
|
37
|
-
|
|
35
|
+
margin-bottom: var(--spacing-4);
|
|
36
|
+
}
|
|
38
37
|
|
|
39
38
|
.py_2 {
|
|
40
|
-
padding-block: var(--spacing-2)
|
|
41
|
-
|
|
39
|
+
padding-block: var(--spacing-2);
|
|
40
|
+
}
|
|
42
41
|
|
|
43
42
|
.px_4 {
|
|
44
|
-
padding-inline: var(--spacing-4)
|
|
45
|
-
|
|
43
|
+
padding-inline: var(--spacing-4);
|
|
44
|
+
}
|
|
46
45
|
|
|
47
46
|
.transition_all_0\.2s_ease {
|
|
48
|
-
transition: all 0.2s ease
|
|
49
|
-
|
|
47
|
+
transition: all 0.2s ease;
|
|
48
|
+
}
|
|
50
49
|
|
|
51
50
|
.hover\:bg_gray\.100 {
|
|
52
51
|
&:where(:hover, [data-hover]) {
|
|
53
|
-
background-color: var(--colors-gray-100)
|
|
54
|
-
}
|
|
52
|
+
background-color: var(--colors-gray-100);
|
|
55
53
|
}
|
|
54
|
+
}
|
|
56
55
|
|
|
57
56
|
.d_inline-flex {
|
|
58
|
-
display: inline-flex
|
|
59
|
-
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
}
|
|
60
59
|
|
|
61
60
|
.items_center {
|
|
62
|
-
align-items: center
|
|
63
|
-
|
|
61
|
+
align-items: center;
|
|
62
|
+
}
|
|
64
63
|
|
|
65
64
|
.opacity_0\.5 {
|
|
66
|
-
opacity: 0.5
|
|
67
|
-
|
|
65
|
+
opacity: 0.5;
|
|
66
|
+
}
|
|
68
67
|
|
|
69
68
|
.border-b_1px_solid_transparent {
|
|
70
|
-
border-bottom: 1px solid transparent
|
|
71
|
-
|
|
69
|
+
border-bottom: 1px solid transparent;
|
|
70
|
+
}
|
|
72
71
|
|
|
73
72
|
.cursor_pointer {
|
|
74
|
-
cursor: pointer
|
|
75
|
-
|
|
73
|
+
cursor: pointer;
|
|
74
|
+
}
|
|
76
75
|
|
|
77
76
|
.hover\:opacity_1 {
|
|
78
77
|
&:where(:hover, [data-hover]) {
|
|
79
|
-
opacity: 1
|
|
80
|
-
}
|
|
78
|
+
opacity: 1;
|
|
81
79
|
}
|
|
80
|
+
}
|
|
82
81
|
|
|
83
82
|
.hover\:border-b_black {
|
|
84
83
|
&:where(:hover, [data-hover]) {
|
|
85
|
-
border-bottom-color: var(--colors-black)
|
|
86
|
-
}
|
|
84
|
+
border-bottom-color: var(--colors-black);
|
|
87
85
|
}
|
|
86
|
+
}
|
|
88
87
|
|
|
89
88
|
.d_flex {
|
|
90
|
-
display: flex
|
|
91
|
-
|
|
89
|
+
display: flex;
|
|
90
|
+
}
|
|
92
91
|
|
|
93
92
|
.flex-wrap_wrap {
|
|
94
|
-
flex-wrap: wrap
|
|
95
|
-
|
|
93
|
+
flex-wrap: wrap;
|
|
94
|
+
}
|
|
96
95
|
|
|
97
96
|
.gap_2 {
|
|
98
|
-
gap: var(--spacing-2)
|
|
99
|
-
|
|
97
|
+
gap: var(--spacing-2);
|
|
98
|
+
}
|
|
100
99
|
|
|
101
100
|
.mt_4 {
|
|
102
|
-
margin-top: var(--spacing-4)
|
|
103
|
-
|
|
101
|
+
margin-top: var(--spacing-4);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
@layer utilities {
|
|
1
|
+
@layer utilities {
|
|
2
|
+
}
|
|
@@ -1,116 +1,117 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
2
|
.d_flex {
|
|
3
|
-
display: flex
|
|
4
|
-
|
|
3
|
+
display: flex;
|
|
4
|
+
}
|
|
5
5
|
|
|
6
6
|
.pos_relative {
|
|
7
|
-
position: relative
|
|
8
|
-
|
|
7
|
+
position: relative;
|
|
8
|
+
}
|
|
9
9
|
|
|
10
10
|
.max-w_14px {
|
|
11
|
-
max-width: 14px
|
|
12
|
-
|
|
11
|
+
max-width: 14px;
|
|
12
|
+
}
|
|
13
13
|
|
|
14
14
|
.shrink_0 {
|
|
15
|
-
flex-shrink: 0
|
|
16
|
-
|
|
15
|
+
flex-shrink: 0;
|
|
16
|
+
}
|
|
17
17
|
|
|
18
18
|
.p_2 {
|
|
19
|
-
padding: var(--spacing-2)
|
|
20
|
-
|
|
19
|
+
padding: var(--spacing-2);
|
|
20
|
+
}
|
|
21
21
|
|
|
22
22
|
.bg_card {
|
|
23
|
-
background-color: var(--colors-card)
|
|
24
|
-
|
|
23
|
+
background-color: var(--colors-card);
|
|
24
|
+
}
|
|
25
25
|
|
|
26
26
|
.border_1px_solid_token\(colors\.border\) {
|
|
27
|
-
border: 1px solid var(--colors-border)
|
|
28
|
-
|
|
27
|
+
border: 1px solid var(--colors-border);
|
|
28
|
+
}
|
|
29
29
|
|
|
30
30
|
.shadow_sm {
|
|
31
|
-
box-shadow: var(--shadows-sm)
|
|
32
|
-
|
|
31
|
+
box-shadow: var(--shadows-sm);
|
|
32
|
+
}
|
|
33
33
|
|
|
34
34
|
.rounded_md {
|
|
35
|
-
border-radius: var(--radii-md)
|
|
36
|
-
|
|
35
|
+
border-radius: var(--radii-md);
|
|
36
|
+
}
|
|
37
37
|
|
|
38
38
|
.hover\:opacity_1 {
|
|
39
39
|
&:where(:hover, [data-hover]) {
|
|
40
|
-
opacity: 1
|
|
41
|
-
}
|
|
40
|
+
opacity: 1;
|
|
42
41
|
}
|
|
42
|
+
}
|
|
43
43
|
|
|
44
44
|
.hover\:border-b_black {
|
|
45
45
|
&:where(:hover, [data-hover]) {
|
|
46
|
-
border-bottom-color: var(--colors-black)
|
|
47
|
-
}
|
|
46
|
+
border-bottom-color: var(--colors-black);
|
|
48
47
|
}
|
|
48
|
+
}
|
|
49
49
|
|
|
50
50
|
.hover\:opacity_1 {
|
|
51
51
|
&:where(:hover, [data-hover]) {
|
|
52
|
-
opacity: 1
|
|
53
|
-
}
|
|
52
|
+
opacity: 1;
|
|
54
53
|
}
|
|
54
|
+
}
|
|
55
55
|
|
|
56
56
|
.hover\:border-b_black {
|
|
57
57
|
&:where(:hover, [data-hover]) {
|
|
58
|
-
border-bottom-color: var(--colors-black)
|
|
59
|
-
}
|
|
58
|
+
border-bottom-color: var(--colors-black);
|
|
60
59
|
}
|
|
60
|
+
}
|
|
61
61
|
|
|
62
62
|
.text_red\.400 {
|
|
63
|
-
color: var(--colors-red-400)
|
|
64
|
-
|
|
63
|
+
color: var(--colors-red-400);
|
|
64
|
+
}
|
|
65
65
|
|
|
66
66
|
.hover\:opacity_1 {
|
|
67
67
|
&:where(:hover, [data-hover]) {
|
|
68
|
-
opacity: 1
|
|
69
|
-
}
|
|
68
|
+
opacity: 1;
|
|
70
69
|
}
|
|
70
|
+
}
|
|
71
71
|
|
|
72
72
|
.hover\:border-b_black {
|
|
73
73
|
&:where(:hover, [data-hover]) {
|
|
74
|
-
border-bottom-color: var(--colors-black)
|
|
75
|
-
}
|
|
74
|
+
border-bottom-color: var(--colors-black);
|
|
76
75
|
}
|
|
76
|
+
}
|
|
77
77
|
|
|
78
78
|
.d_inline-flex {
|
|
79
|
-
display: inline-flex
|
|
80
|
-
|
|
79
|
+
display: inline-flex;
|
|
80
|
+
}
|
|
81
81
|
|
|
82
82
|
.items_center {
|
|
83
|
-
align-items: center
|
|
84
|
-
|
|
83
|
+
align-items: center;
|
|
84
|
+
}
|
|
85
85
|
|
|
86
86
|
.opacity_0\.5 {
|
|
87
|
-
opacity: 0.5
|
|
88
|
-
|
|
87
|
+
opacity: 0.5;
|
|
88
|
+
}
|
|
89
89
|
|
|
90
90
|
.border-b_1px_solid_transparent {
|
|
91
|
-
border-bottom: 1px solid transparent
|
|
92
|
-
|
|
91
|
+
border-bottom: 1px solid transparent;
|
|
92
|
+
}
|
|
93
93
|
|
|
94
94
|
.cursor_pointer {
|
|
95
|
-
cursor: pointer
|
|
96
|
-
|
|
95
|
+
cursor: pointer;
|
|
96
|
+
}
|
|
97
97
|
|
|
98
98
|
.hover\:opacity_1 {
|
|
99
99
|
&:where(:hover, [data-hover]) {
|
|
100
|
-
opacity: 1
|
|
101
|
-
}
|
|
100
|
+
opacity: 1;
|
|
102
101
|
}
|
|
102
|
+
}
|
|
103
103
|
|
|
104
104
|
.hover\:border-b_black {
|
|
105
105
|
&:where(:hover, [data-hover]) {
|
|
106
|
-
border-bottom-color: var(--colors-black)
|
|
107
|
-
}
|
|
106
|
+
border-bottom-color: var(--colors-black);
|
|
108
107
|
}
|
|
108
|
+
}
|
|
109
109
|
|
|
110
110
|
.self_flex-start {
|
|
111
|
-
align-self: flex-start
|
|
112
|
-
|
|
111
|
+
align-self: flex-start;
|
|
112
|
+
}
|
|
113
113
|
|
|
114
114
|
.mr_2 {
|
|
115
|
-
margin-right: var(--spacing-2)
|
|
116
|
-
|
|
115
|
+
margin-right: var(--spacing-2);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
2
|
.w_full {
|
|
3
|
-
width: var(--sizes-full)
|
|
4
|
-
|
|
3
|
+
width: var(--sizes-full);
|
|
4
|
+
}
|
|
5
5
|
|
|
6
6
|
.rounded_md {
|
|
7
|
-
border-radius: var(--radii-md)
|
|
8
|
-
|
|
7
|
+
border-radius: var(--radii-md);
|
|
8
|
+
}
|
|
9
9
|
|
|
10
10
|
.d_flex {
|
|
11
|
-
display: flex
|
|
12
|
-
|
|
11
|
+
display: flex;
|
|
12
|
+
}
|
|
13
13
|
|
|
14
14
|
.flex_column {
|
|
15
|
-
flex-direction: column
|
|
16
|
-
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
}
|
|
17
17
|
|
|
18
18
|
.gap_4 {
|
|
19
|
-
gap: var(--spacing-4)
|
|
20
|
-
|
|
19
|
+
gap: var(--spacing-4);
|
|
20
|
+
}
|
|
21
21
|
|
|
22
22
|
.p_4 {
|
|
23
|
-
padding: var(--spacing-4)
|
|
24
|
-
|
|
23
|
+
padding: var(--spacing-4);
|
|
24
|
+
}
|
|
25
25
|
|
|
26
26
|
.w_100\% {
|
|
27
|
-
width: 100
|
|
28
|
-
|
|
29
|
-
}
|
|
27
|
+
width: 100%;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
2
|
.d_inline-flex {
|
|
3
|
-
display: inline-flex
|
|
4
|
-
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
}
|
|
5
5
|
|
|
6
6
|
.items_center {
|
|
7
|
-
align-items: center
|
|
8
|
-
|
|
7
|
+
align-items: center;
|
|
8
|
+
}
|
|
9
9
|
|
|
10
10
|
.fs_75\% {
|
|
11
|
-
font-size: 75
|
|
12
|
-
|
|
11
|
+
font-size: 75%;
|
|
12
|
+
}
|
|
13
13
|
|
|
14
14
|
.leading_0 {
|
|
15
|
-
line-height: 0
|
|
16
|
-
|
|
15
|
+
line-height: 0;
|
|
16
|
+
}
|
|
17
17
|
|
|
18
18
|
.pos_relative {
|
|
19
|
-
position: relative
|
|
20
|
-
|
|
19
|
+
position: relative;
|
|
20
|
+
}
|
|
21
21
|
|
|
22
22
|
.top_-0\.35em {
|
|
23
|
-
top: -0.35em
|
|
24
|
-
|
|
23
|
+
top: -0.35em;
|
|
24
|
+
}
|
|
25
25
|
|
|
26
26
|
.opacity_0\.5 {
|
|
27
|
-
opacity: 0.5
|
|
28
|
-
|
|
27
|
+
opacity: 0.5;
|
|
28
|
+
}
|
|
29
29
|
|
|
30
30
|
.ml_1 {
|
|
31
|
-
margin-left: var(--spacing-1)
|
|
32
|
-
|
|
33
|
-
}
|
|
31
|
+
margin-left: var(--spacing-1);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
@layer utilities {
|
|
1
|
+
@layer utilities {
|
|
2
|
+
}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
2
|
.p_2 {
|
|
3
|
-
padding: var(--spacing-2)
|
|
4
|
-
|
|
3
|
+
padding: var(--spacing-2);
|
|
4
|
+
}
|
|
5
5
|
|
|
6
6
|
.bg_card {
|
|
7
|
-
background-color: var(--colors-card)
|
|
8
|
-
|
|
7
|
+
background-color: var(--colors-card);
|
|
8
|
+
}
|
|
9
9
|
|
|
10
10
|
.border_1px_solid_rgba\(0\,_0\,_0\,_0\.1\) {
|
|
11
|
-
border: 1px solid rgba(0, 0, 0, 0.1)
|
|
12
|
-
|
|
11
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
12
|
+
}
|
|
13
13
|
|
|
14
14
|
.text_text {
|
|
15
|
-
color: var(--colors-text)
|
|
16
|
-
|
|
15
|
+
color: var(--colors-text);
|
|
16
|
+
}
|
|
17
|
+
}
|