@pandacss/studio 0.5.0 → 0.6.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.
- package/{astro.config.ts → astro.config.mjs} +1 -1
- package/dist/studio.js +15 -6
- package/dist/studio.mjs +11 -5
- package/package.json +12 -11
- package/src/components/analyzer/category-utilities.tsx +8 -6
- package/styled-system/chunks/src__components__analyzer__category-utilities.css +32 -0
- package/styled-system/chunks/src__components__analyzer__data-combobox.css +12 -0
- package/styled-system/chunks/src__components__analyzer__file-details.css +18 -0
- package/styled-system/chunks/src__components__analyzer__report-item-link.css +48 -0
- package/styled-system/chunks/src__components__analyzer__utility-details.css +32 -0
- package/styled-system/chunks/src__components__color-wrapper.css +48 -0
- package/styled-system/chunks/src__components__input.css +31 -0
- package/styled-system/chunks/src__components__layer-styles.css +13 -0
- package/styled-system/chunks/src__components__nav-item.css +36 -0
- package/styled-system/chunks/src__components__overview.css +12 -0
- package/styled-system/chunks/src__components__side-nav-item.css +12 -0
- package/styled-system/chunks/src__components__theme-toggle.css +6 -0
- package/styled-system/chunks/src__components__token-analyzer.css +74 -0
- package/styled-system/chunks/src__layouts__Sidebar.css +12 -0
- package/styled-system/css/css.mjs +1 -1
- package/styled-system/css/cva.mjs +1 -1
- package/styled-system/helpers.mjs +10 -5
- package/styled-system/jsx/index.d.ts +1 -0
- package/styled-system/jsx/index.mjs +1 -0
- package/styled-system/jsx/is-valid-prop.d.ts +4 -0
- package/styled-system/patterns/grid-item.mjs +2 -0
- package/styled-system/styles.css +2 -2
- package/styled-system/types/global.d.ts +2 -2
- package/styled-system/types/pattern.d.ts +1 -1
- package/styled-system/types/prop-type.d.ts +2 -2
- package/{virtual-panda.ts → virtual-panda.mjs} +9 -5
package/dist/studio.js
CHANGED
|
@@ -34,9 +34,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
34
34
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
35
35
|
|
|
36
36
|
// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.3/node_modules/tsup/assets/cjs_shims.js
|
|
37
|
+
var getImportMetaUrl, importMetaUrl;
|
|
37
38
|
var init_cjs_shims = __esm({
|
|
38
39
|
"../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.3/node_modules/tsup/assets/cjs_shims.js"() {
|
|
39
40
|
"use strict";
|
|
41
|
+
getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
|
|
42
|
+
importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
|
|
40
43
|
}
|
|
41
44
|
});
|
|
42
45
|
|
|
@@ -2059,17 +2062,22 @@ function create$(options) {
|
|
|
2059
2062
|
var $ = create$();
|
|
2060
2063
|
|
|
2061
2064
|
// scripts/studio.ts
|
|
2062
|
-
var
|
|
2063
|
-
var
|
|
2064
|
-
var
|
|
2065
|
+
var import_node_path3 = require("path");
|
|
2066
|
+
var import_node_module = require("module");
|
|
2067
|
+
var require2 = (0, import_node_module.createRequire)(importMetaUrl);
|
|
2068
|
+
var astroBin = require2.resolve("astro");
|
|
2069
|
+
var appPath = (0, import_node_path3.join)(__dirname, "..");
|
|
2065
2070
|
async function buildStudio({ outDir }) {
|
|
2066
2071
|
process.env.ASTRO_OUT_DIR = outDir;
|
|
2067
|
-
const { stdout } = await execa(astroBin, ["build", "--root", appPath]
|
|
2072
|
+
const { stdout } = await execa(astroBin, ["build", "--root", appPath], {
|
|
2073
|
+
cwd: appPath
|
|
2074
|
+
});
|
|
2068
2075
|
import_logger.logger.log(stdout);
|
|
2069
2076
|
}
|
|
2070
2077
|
async function serveStudio() {
|
|
2071
2078
|
const result = execa(astroBin, ["dev", "--root", appPath], {
|
|
2072
|
-
stdio: "inherit"
|
|
2079
|
+
stdio: "inherit",
|
|
2080
|
+
cwd: appPath
|
|
2073
2081
|
});
|
|
2074
2082
|
result.stdout?.pipe(process.stdout);
|
|
2075
2083
|
result.stderr?.pipe(process.stderr);
|
|
@@ -2077,7 +2085,8 @@ async function serveStudio() {
|
|
|
2077
2085
|
async function previewStudio({ outDir }) {
|
|
2078
2086
|
process.env.ASTRO_OUT_DIR = outDir;
|
|
2079
2087
|
const result = execa(astroBin, ["preview", "--root", appPath], {
|
|
2080
|
-
stdio: "inherit"
|
|
2088
|
+
stdio: "inherit",
|
|
2089
|
+
cwd: appPath
|
|
2081
2090
|
});
|
|
2082
2091
|
result.stdout?.pipe(process.stdout);
|
|
2083
2092
|
result.stderr?.pipe(process.stderr);
|
package/dist/studio.mjs
CHANGED
|
@@ -2058,17 +2058,22 @@ function create$(options) {
|
|
|
2058
2058
|
var $ = create$();
|
|
2059
2059
|
|
|
2060
2060
|
// scripts/studio.ts
|
|
2061
|
-
import { join } from "path";
|
|
2062
|
-
|
|
2061
|
+
import { join } from "node:path";
|
|
2062
|
+
import { createRequire } from "node:module";
|
|
2063
|
+
var require2 = createRequire(import.meta.url);
|
|
2064
|
+
var astroBin = require2.resolve("astro");
|
|
2063
2065
|
var appPath = join(__dirname, "..");
|
|
2064
2066
|
async function buildStudio({ outDir }) {
|
|
2065
2067
|
process.env.ASTRO_OUT_DIR = outDir;
|
|
2066
|
-
const { stdout } = await execa(astroBin, ["build", "--root", appPath]
|
|
2068
|
+
const { stdout } = await execa(astroBin, ["build", "--root", appPath], {
|
|
2069
|
+
cwd: appPath
|
|
2070
|
+
});
|
|
2067
2071
|
logger.log(stdout);
|
|
2068
2072
|
}
|
|
2069
2073
|
async function serveStudio() {
|
|
2070
2074
|
const result = execa(astroBin, ["dev", "--root", appPath], {
|
|
2071
|
-
stdio: "inherit"
|
|
2075
|
+
stdio: "inherit",
|
|
2076
|
+
cwd: appPath
|
|
2072
2077
|
});
|
|
2073
2078
|
result.stdout?.pipe(process.stdout);
|
|
2074
2079
|
result.stderr?.pipe(process.stderr);
|
|
@@ -2076,7 +2081,8 @@ async function serveStudio() {
|
|
|
2076
2081
|
async function previewStudio({ outDir }) {
|
|
2077
2082
|
process.env.ASTRO_OUT_DIR = outDir;
|
|
2078
2083
|
const result = execa(astroBin, ["preview", "--root", appPath], {
|
|
2079
|
-
stdio: "inherit"
|
|
2084
|
+
stdio: "inherit",
|
|
2085
|
+
cwd: appPath
|
|
2080
2086
|
});
|
|
2081
2087
|
result.stdout?.pipe(process.stdout);
|
|
2082
2088
|
result.stderr?.pipe(process.stderr);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pandacss/studio",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "The automated token documentation for Panda CSS",
|
|
5
5
|
"main": "dist/studio.js",
|
|
6
6
|
"module": "dist/studio.mjs",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"src",
|
|
15
15
|
"public",
|
|
16
16
|
"styled-system",
|
|
17
|
-
"*.ts"
|
|
17
|
+
"*.ts",
|
|
18
|
+
"*.mjs"
|
|
18
19
|
],
|
|
19
20
|
"keywords": [
|
|
20
21
|
"panda",
|
|
@@ -25,26 +26,26 @@
|
|
|
25
26
|
"author": "Segun Adebayo <joseshegs@gmail.com>",
|
|
26
27
|
"license": "MIT",
|
|
27
28
|
"dependencies": {
|
|
28
|
-
"@ark-ui/react": "0.7.
|
|
29
|
+
"@ark-ui/react": "0.7.2",
|
|
29
30
|
"@astrojs/react": "2.2.1",
|
|
30
|
-
"astro": "2.7.
|
|
31
|
+
"astro": "2.7.2",
|
|
31
32
|
"javascript-stringify": "2.1.0",
|
|
32
33
|
"react": "18.2.0",
|
|
33
34
|
"react-dom": "18.2.0",
|
|
34
35
|
"vite": "4.3.9",
|
|
35
|
-
"@pandacss/types": "0.
|
|
36
|
-
"@pandacss/config": "0.
|
|
37
|
-
"@pandacss/shared": "0.
|
|
38
|
-
"@pandacss/token-dictionary": "0.
|
|
39
|
-
"@pandacss/logger": "0.
|
|
40
|
-
"@pandacss/node": "0.
|
|
36
|
+
"@pandacss/types": "0.6.0",
|
|
37
|
+
"@pandacss/config": "0.6.0",
|
|
38
|
+
"@pandacss/shared": "0.6.0",
|
|
39
|
+
"@pandacss/token-dictionary": "0.6.0",
|
|
40
|
+
"@pandacss/logger": "0.6.0",
|
|
41
|
+
"@pandacss/node": "0.6.0"
|
|
41
42
|
},
|
|
42
43
|
"devDependencies": {
|
|
43
44
|
"@types/react": "18.2.14",
|
|
44
45
|
"@types/react-dom": "18.2.6",
|
|
45
46
|
"@vitejs/plugin-react": "4.0.1",
|
|
46
47
|
"execa": "7.1.1",
|
|
47
|
-
"@pandacss/dev": "0.
|
|
48
|
+
"@pandacss/dev": "0.6.0"
|
|
48
49
|
},
|
|
49
50
|
"scripts": {
|
|
50
51
|
"codegen": "panda",
|
|
@@ -78,12 +78,14 @@ export const ByCategory = ({ byCategory }: { byCategory: Record<string, number[]
|
|
|
78
78
|
{keys.map((category) => (
|
|
79
79
|
<CategoryUtilities key={category} category={category} byCategory={byCategory} sortedBy={sortedBy} />
|
|
80
80
|
))}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
81
|
+
{unknown ? (
|
|
82
|
+
<CategoryUtilities
|
|
83
|
+
className={gridItem({ colSpan: 2 })}
|
|
84
|
+
category="unknown"
|
|
85
|
+
byCategory={byCategory}
|
|
86
|
+
sortedBy={sortedBy}
|
|
87
|
+
/>
|
|
88
|
+
) : null}
|
|
87
89
|
</Grid>
|
|
88
90
|
</Section>
|
|
89
91
|
)
|
|
@@ -11,6 +11,12 @@
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.\[\&_li\]\:cursor_pointer {
|
|
15
|
+
& li {
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
14
20
|
.p_4px_8px {
|
|
15
21
|
padding: 4px 8px;
|
|
16
22
|
}
|
|
@@ -57,6 +63,24 @@
|
|
|
57
63
|
}
|
|
58
64
|
}
|
|
59
65
|
|
|
66
|
+
.hover\:opacity_0\.6 {
|
|
67
|
+
&:where(:hover, [data-hover]) {
|
|
68
|
+
opacity: 0.6;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.hover\:opacity_1 {
|
|
73
|
+
&:where(:hover, [data-hover]) {
|
|
74
|
+
opacity: 1;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.hover\:border-b_black {
|
|
79
|
+
&:where(:hover, [data-hover]) {
|
|
80
|
+
border-bottom-color: var(--colors-black);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
60
84
|
.list-style_none {
|
|
61
85
|
list-style: none;
|
|
62
86
|
}
|
|
@@ -190,4 +214,12 @@
|
|
|
190
214
|
}
|
|
191
215
|
}
|
|
192
216
|
}
|
|
217
|
+
|
|
218
|
+
.\[\&_li\]\:hover\:opacity_0\.8 {
|
|
219
|
+
& li {
|
|
220
|
+
&:where(:hover, [data-hover]) {
|
|
221
|
+
opacity: 0.8;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
}
|
|
193
225
|
}
|
|
@@ -27,6 +27,18 @@
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
.highlighted\:bg_border {
|
|
31
|
+
&[data-highlighted] {
|
|
32
|
+
background: var(--colors-border);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.expanded\:transform_rotate\(180deg\) {
|
|
37
|
+
&:where([aria-expanded='true'], [data-expanded]) {
|
|
38
|
+
transform: rotate(180deg);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
30
42
|
.transition_all_\.2s_ease {
|
|
31
43
|
transition: all 0.2s ease;
|
|
32
44
|
}
|
|
@@ -35,6 +35,24 @@
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
.hover\:bg_gray\.100 {
|
|
39
|
+
&:where(:hover, [data-hover]) {
|
|
40
|
+
background-color: var(--colors-gray-100);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.hover\:opacity_1 {
|
|
45
|
+
&:where(:hover, [data-hover]) {
|
|
46
|
+
opacity: 1;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.hover\:border-b_black {
|
|
51
|
+
&:where(:hover, [data-hover]) {
|
|
52
|
+
border-bottom-color: var(--colors-black);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
38
56
|
.ml_auto {
|
|
39
57
|
margin-left: auto;
|
|
40
58
|
}
|
|
@@ -99,6 +99,54 @@
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
+
.hover\:opacity_1 {
|
|
103
|
+
&:where(:hover, [data-hover]) {
|
|
104
|
+
opacity: 1;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.hover\:border-b_black {
|
|
109
|
+
&:where(:hover, [data-hover]) {
|
|
110
|
+
border-bottom-color: var(--colors-black);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.hover\:opacity_1 {
|
|
115
|
+
&:where(:hover, [data-hover]) {
|
|
116
|
+
opacity: 1;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.hover\:border-b_black {
|
|
121
|
+
&:where(:hover, [data-hover]) {
|
|
122
|
+
border-bottom-color: var(--colors-black);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.hover\:opacity_1 {
|
|
127
|
+
&:where(:hover, [data-hover]) {
|
|
128
|
+
opacity: 1;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.hover\:border-b_black {
|
|
133
|
+
&:where(:hover, [data-hover]) {
|
|
134
|
+
border-bottom-color: var(--colors-black);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.hover\:opacity_1 {
|
|
139
|
+
&:where(:hover, [data-hover]) {
|
|
140
|
+
opacity: 1;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.hover\:border-b_black {
|
|
145
|
+
&:where(:hover, [data-hover]) {
|
|
146
|
+
border-bottom-color: var(--colors-black);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
102
150
|
.pos_relative {
|
|
103
151
|
position: relative;
|
|
104
152
|
}
|
|
@@ -11,6 +11,12 @@
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.\[\&_li\]\:cursor_pointer {
|
|
15
|
+
& li {
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
14
20
|
.p_4px_8px {
|
|
15
21
|
padding: 4px 8px;
|
|
16
22
|
}
|
|
@@ -57,6 +63,24 @@
|
|
|
57
63
|
}
|
|
58
64
|
}
|
|
59
65
|
|
|
66
|
+
.hover\:opacity_0\.8 {
|
|
67
|
+
&:where(:hover, [data-hover]) {
|
|
68
|
+
opacity: 0.8;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.hover\:opacity_1 {
|
|
73
|
+
&:where(:hover, [data-hover]) {
|
|
74
|
+
opacity: 1;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.hover\:border-b_black {
|
|
79
|
+
&:where(:hover, [data-hover]) {
|
|
80
|
+
border-bottom-color: var(--colors-black);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
60
84
|
.list-style_none {
|
|
61
85
|
list-style: none;
|
|
62
86
|
}
|
|
@@ -211,4 +235,12 @@
|
|
|
211
235
|
}
|
|
212
236
|
}
|
|
213
237
|
}
|
|
238
|
+
|
|
239
|
+
.\[\&_li\]\:hover\:opacity_0\.8 {
|
|
240
|
+
& li {
|
|
241
|
+
&:where(:hover, [data-hover]) {
|
|
242
|
+
opacity: 0.8;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}
|
|
214
246
|
}
|
|
@@ -95,6 +95,54 @@
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
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
|
+
|
|
98
146
|
.w_full {
|
|
99
147
|
width: var(--sizes-full);
|
|
100
148
|
}
|
|
@@ -61,6 +61,37 @@
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
.dark\:text_neutral\.300 {
|
|
65
|
+
&.dark,
|
|
66
|
+
.dark & {
|
|
67
|
+
color: var(--colors-neutral-300);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.focusWithin\:outline-style_solid {
|
|
72
|
+
&:focus-within {
|
|
73
|
+
outline-style: solid;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.focusWithin\:ring_2px {
|
|
78
|
+
&:focus-within {
|
|
79
|
+
outline-width: 2px;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.focusWithin\:ring_2px {
|
|
84
|
+
&:focus-within {
|
|
85
|
+
outline-offset: 2px;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.focusWithin\:ring_neutral\.400 {
|
|
90
|
+
&:focus-within {
|
|
91
|
+
outline-color: var(--colors-neutral-400);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
64
95
|
.bg_transparent {
|
|
65
96
|
background: var(--colors-transparent);
|
|
66
97
|
}
|
|
@@ -38,6 +38,19 @@
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
.divide-y_1px {
|
|
42
|
+
& > :not([hidden]) ~ :not([hidden]) {
|
|
43
|
+
border-top-width: 1px;
|
|
44
|
+
border-bottom-width: 0px;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.divide_card {
|
|
49
|
+
& > :not([hidden]) ~ :not([hidden]) {
|
|
50
|
+
border-color: var(--colors-card);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
41
54
|
.px_1 {
|
|
42
55
|
padding-inline: var(--spacing-1);
|
|
43
56
|
}
|
|
@@ -11,6 +11,12 @@
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.hover\:shadow_lg {
|
|
15
|
+
&:where(:hover, [data-hover]) {
|
|
16
|
+
box-shadow: var(--shadows-lg);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
14
20
|
.w_60 {
|
|
15
21
|
width: var(--sizes-60);
|
|
16
22
|
}
|
|
@@ -127,6 +133,36 @@
|
|
|
127
133
|
}
|
|
128
134
|
}
|
|
129
135
|
|
|
136
|
+
.\[\&_svg\]\:font_normal {
|
|
137
|
+
& svg {
|
|
138
|
+
font-weight: var(--font-weights-normal);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.\[\&_svg\]\:fs_xx-large {
|
|
143
|
+
& svg {
|
|
144
|
+
font-size: xx-large;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.\[\&_svg\]\:mb_6 {
|
|
149
|
+
& svg {
|
|
150
|
+
margin-bottom: var(--spacing-6);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.\[\&_svg\]\:h_6 {
|
|
155
|
+
& svg {
|
|
156
|
+
height: var(--sizes-6);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.\[\&_svg\]\:w_6 {
|
|
161
|
+
& svg {
|
|
162
|
+
width: var(--sizes-6);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
130
166
|
.font_semibold {
|
|
131
167
|
font-weight: var(--font-weights-semibold);
|
|
132
168
|
}
|
|
@@ -23,6 +23,18 @@
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
.hover\:text_yellow\.300 {
|
|
27
|
+
&:where(:hover, [data-hover]) {
|
|
28
|
+
color: var(--colors-yellow-300);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.currentPage\:text_yellow\.300 {
|
|
33
|
+
&[aria-current='page'] {
|
|
34
|
+
color: var(--colors-yellow-300);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
26
38
|
.d_block {
|
|
27
39
|
display: block;
|
|
28
40
|
}
|
|
@@ -135,6 +135,72 @@
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
+
.\[\&_li\]\:cursor_pointer {
|
|
139
|
+
& li {
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.hover\:opacity_0\.8 {
|
|
145
|
+
&:where(:hover, [data-hover]) {
|
|
146
|
+
opacity: 0.8;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.hover\:bg_border {
|
|
151
|
+
&:where(:hover, [data-hover]) {
|
|
152
|
+
background-color: var(--colors-border);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.hover\:bg_border {
|
|
157
|
+
&:where(:hover, [data-hover]) {
|
|
158
|
+
background: var(--colors-border);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.hover\:opacity_0\.6 {
|
|
163
|
+
&:where(:hover, [data-hover]) {
|
|
164
|
+
opacity: 0.6;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.hover\:opacity_1 {
|
|
169
|
+
&:where(:hover, [data-hover]) {
|
|
170
|
+
opacity: 1;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.hover\:border-b_black {
|
|
175
|
+
&:where(:hover, [data-hover]) {
|
|
176
|
+
border-bottom-color: var(--colors-black);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.hover\:opacity_1 {
|
|
181
|
+
&:where(:hover, [data-hover]) {
|
|
182
|
+
opacity: 1;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.hover\:border-b_black {
|
|
187
|
+
&:where(:hover, [data-hover]) {
|
|
188
|
+
border-bottom-color: var(--colors-black);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.hover\:opacity_1 {
|
|
193
|
+
&:where(:hover, [data-hover]) {
|
|
194
|
+
opacity: 1;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.hover\:border-b_black {
|
|
199
|
+
&:where(:hover, [data-hover]) {
|
|
200
|
+
border-bottom-color: var(--colors-black);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
138
204
|
.p_4px_8px {
|
|
139
205
|
padding: 4px 8px;
|
|
140
206
|
}
|
|
@@ -408,4 +474,12 @@
|
|
|
408
474
|
}
|
|
409
475
|
}
|
|
410
476
|
}
|
|
477
|
+
|
|
478
|
+
.\[\&_li\]\:hover\:opacity_0\.8 {
|
|
479
|
+
& li {
|
|
480
|
+
&:where(:hover, [data-hover]) {
|
|
481
|
+
opacity: 0.8;
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
}
|
|
411
485
|
}
|
|
@@ -134,4 +134,16 @@
|
|
|
134
134
|
padding-inline: var(--spacing-8);
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
|
+
|
|
138
|
+
.md\:px_6 {
|
|
139
|
+
@media screen and (min-width: 768px) {
|
|
140
|
+
padding-inline: var(--spacing-6);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.lg\:px_8 {
|
|
145
|
+
@media screen and (min-width: 1024px) {
|
|
146
|
+
padding-inline: var(--spacing-8);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
137
149
|
}
|
|
@@ -7,7 +7,7 @@ function isObject(value) {
|
|
|
7
7
|
var newRule = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g
|
|
8
8
|
var ruleClean = /\/\*[^]*?\*\/|\s\s+|\n/g
|
|
9
9
|
var astish = (val, tree = [{}]) => {
|
|
10
|
-
const block = newRule.exec(val.replace(ruleClean, ''))
|
|
10
|
+
const block = newRule.exec((val ?? '').replace(ruleClean, ''))
|
|
11
11
|
if (!block) return tree[0]
|
|
12
12
|
if (block[4]) tree.shift()
|
|
13
13
|
else if (block[3]) tree.unshift((tree[0][block[3]] = tree[0][block[3]] || {}))
|
|
@@ -73,6 +73,7 @@ function mergeProps(...sources) {
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
// src/walk-object.ts
|
|
76
|
+
var isNotNullish = (element) => element != null
|
|
76
77
|
function walkObject(target, predicate, options = {}) {
|
|
77
78
|
const { stop, getKey } = options
|
|
78
79
|
function inner(value, path = []) {
|
|
@@ -84,7 +85,10 @@ function walkObject(target, predicate, options = {}) {
|
|
|
84
85
|
if (stop?.(value, childPath)) {
|
|
85
86
|
return predicate(value, path)
|
|
86
87
|
}
|
|
87
|
-
|
|
88
|
+
const next = inner(child, childPath)
|
|
89
|
+
if (isNotNullish(next)) {
|
|
90
|
+
result[key] = next
|
|
91
|
+
}
|
|
88
92
|
}
|
|
89
93
|
return result
|
|
90
94
|
}
|
|
@@ -202,11 +206,12 @@ var memo = (fn) => {
|
|
|
202
206
|
return get
|
|
203
207
|
}
|
|
204
208
|
|
|
205
|
-
// src/hypenate.ts
|
|
206
|
-
var
|
|
209
|
+
// src/hypenate-property.ts
|
|
210
|
+
var wordRegex = /([A-Z])/g
|
|
211
|
+
var msRegex = /^ms-/
|
|
207
212
|
var hypenateProperty = memo((property) => {
|
|
208
213
|
if (property.startsWith('--')) return property
|
|
209
|
-
return property.replace(
|
|
214
|
+
return property.replace(wordRegex, '-$1').replace(msRegex, '-ms-').toLowerCase()
|
|
210
215
|
})
|
|
211
216
|
|
|
212
217
|
// src/normalize-html.ts
|
|
@@ -8,7 +8,9 @@ const gridItemConfig = {
|
|
|
8
8
|
return {
|
|
9
9
|
gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
|
|
10
10
|
gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
|
|
11
|
+
gridColumnStart: colStart,
|
|
11
12
|
gridColumnEnd: colEnd,
|
|
13
|
+
gridRowStart: rowStart,
|
|
12
14
|
gridRowEnd: rowEnd,
|
|
13
15
|
...rest,
|
|
14
16
|
}
|
package/styled-system/styles.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import type { RecipeVariantRecord, RecipeConfig } from './recipe'
|
|
3
3
|
import type { Parts } from './parts'
|
|
4
|
-
import type { PatternConfig } from './pattern'
|
|
4
|
+
import type { PatternConfig, PatternProperties } from './pattern'
|
|
5
5
|
import type { GlobalStyleObject, SystemStyleObject } from './system-types'
|
|
6
6
|
import type { CompositionStyles } from './composition'
|
|
7
7
|
|
|
@@ -11,6 +11,6 @@ declare module '@pandacss/dev' {
|
|
|
11
11
|
export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
|
|
12
12
|
export function defineTextStyles(definition: CompositionStyles['textStyles']): CompositionStyles['textStyles']
|
|
13
13
|
export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
|
|
14
|
-
export function definePattern<T>(config: PatternConfig<T>): PatternConfig
|
|
14
|
+
export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): PatternConfig
|
|
15
15
|
export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
|
|
16
16
|
}
|
|
@@ -15,7 +15,7 @@ export type PatternHelpers = {
|
|
|
15
15
|
map: (value: any, fn: (value: string) => string | undefined) => any
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
type PatternProperties = Record<string, PatternProperty>
|
|
18
|
+
export type PatternProperties = Record<string, PatternProperty>
|
|
19
19
|
|
|
20
20
|
type Props<T> = Record<LiteralUnion<keyof T>, any>
|
|
21
21
|
|
|
@@ -155,8 +155,8 @@ type PropertyValueTypes = {
|
|
|
155
155
|
animationDelay: Tokens["durations"];
|
|
156
156
|
scale: "auto" | CssProperties["scale"];
|
|
157
157
|
translate: "auto" | CssProperties["translate"];
|
|
158
|
-
translateX: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full";
|
|
159
|
-
translateY: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full";
|
|
158
|
+
translateX: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
|
|
159
|
+
translateY: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "full" | "-1/2" | "-1/3" | "-2/3" | "-1/4" | "-2/4" | "-3/4" | "-full";
|
|
160
160
|
accentColor: Tokens["colors"];
|
|
161
161
|
caretColor: Tokens["colors"];
|
|
162
162
|
scrollbar: "visible" | "hidden";
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { analyzeTokens, findConfig, loadConfigAndCreateContext, writeAnalyzeJSON } from '@pandacss/node'
|
|
2
|
-
import type { AstroIntegration } from 'astro'
|
|
3
2
|
import { stringify } from 'javascript-stringify'
|
|
4
|
-
import type { Plugin as VitePlugin } from 'vite'
|
|
5
3
|
|
|
6
4
|
import { dirname, resolve } from 'path'
|
|
7
5
|
import { fileURLToPath } from 'url'
|
|
@@ -13,8 +11,11 @@ const _dirname = dirname(fileURLToPath(import.meta.url))
|
|
|
13
11
|
const analysisDataFilepath = 'src/lib/analysis.json'
|
|
14
12
|
const jsonPath = resolve(_dirname, analysisDataFilepath)
|
|
15
13
|
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
/**
|
|
15
|
+
* @returns import('vite').VitePlugin
|
|
16
|
+
*/
|
|
17
|
+
function vitePlugin() {
|
|
18
|
+
let config
|
|
18
19
|
|
|
19
20
|
return {
|
|
20
21
|
name: 'vite:panda',
|
|
@@ -50,7 +51,10 @@ function vitePlugin(): VitePlugin {
|
|
|
50
51
|
}
|
|
51
52
|
}
|
|
52
53
|
|
|
53
|
-
|
|
54
|
+
/**
|
|
55
|
+
* @returns import('astro').AstroIntegration
|
|
56
|
+
*/
|
|
57
|
+
const virtualPanda = () => ({
|
|
54
58
|
name: 'virtual:panda',
|
|
55
59
|
hooks: {
|
|
56
60
|
'astro:config:setup': ({ updateConfig, addWatchFile }) => {
|