@inkdropapp/theme-dev-helpers 0.1.0 → 0.2.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.
- package/README.md +4 -7
- package/bun.lockb +0 -0
- package/package.json +1 -2
- package/src/generate-palette.ts +11 -9
package/README.md
CHANGED
|
@@ -24,18 +24,15 @@ generate-palette [options] <theme-name>
|
|
|
24
24
|
|
|
25
25
|
### Parameters
|
|
26
26
|
|
|
27
|
-
You can specify
|
|
27
|
+
You can specify the following options:
|
|
28
28
|
|
|
29
|
-
- `<theme-name>`: The name of the theme package to extract variables from. Required. (e.g.,: `default-light-ui`).
|
|
30
29
|
- `-a, --appearance <light/dark>`: Force the UI appearance ("light" or "dark")
|
|
31
30
|
- `-o, --output`: The file path where the extracted variables will be saved (default: `./palette.json`).
|
|
32
31
|
|
|
33
|
-
###
|
|
32
|
+
### Example
|
|
34
33
|
|
|
35
|
-
|
|
36
|
-
generate-palette default-light-ui
|
|
37
|
-
```
|
|
34
|
+
If your theme package name doesn't include 'dark' but it is a dark mode:
|
|
38
35
|
|
|
39
36
|
```sh
|
|
40
|
-
generate-palette
|
|
37
|
+
generate-palette -a dark
|
|
41
38
|
```
|
package/bun.lockb
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inkdropapp/theme-dev-helpers",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "A helper module for creating themes for Inkdrop",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"inkdrop",
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
"@inkdropapp/base-ui-theme": "^0.3.0",
|
|
19
19
|
"@inkdropapp/css": "^0.4.2",
|
|
20
20
|
"commander": "^12.1.0",
|
|
21
|
-
"debug": "^4.3.7",
|
|
22
21
|
"puppeteer": "^23.5.3"
|
|
23
22
|
}
|
|
24
23
|
}
|
package/src/generate-palette.ts
CHANGED
|
@@ -12,29 +12,32 @@ program
|
|
|
12
12
|
.name('generate-palette')
|
|
13
13
|
.description('CLI tool for extracting CSS variables from a theme package for Inkdrop')
|
|
14
14
|
.version(packageJson.version)
|
|
15
|
-
.argument('<theme-name>', 'Theme package name (e.g., default-light-ui)')
|
|
16
15
|
.option('-a, --appearance <light/dark>', 'Force the UI appearance ("light" or "dark")')
|
|
17
16
|
.option('-o, --output <path>', 'Output file path (default: ./palette.json)', './palette.json')
|
|
18
17
|
.parse(process.argv);
|
|
19
18
|
|
|
20
19
|
// Parse options
|
|
21
|
-
const themePackageName = program.args[0] as string;
|
|
22
20
|
const options = program.opts();
|
|
23
21
|
const outputPath = options.output as string;
|
|
24
22
|
const appearance = options.appearance as 'light' | 'dark' | undefined;
|
|
25
23
|
|
|
26
24
|
// Function to extract theme CSS variables
|
|
27
|
-
async function extractPalette(
|
|
25
|
+
async function extractPalette(outputPath: string) {
|
|
26
|
+
const themePackageJson = (await import(path.join(process.cwd(), 'package.json')))
|
|
28
27
|
const themeVariableNames = (await import(`@inkdropapp/base-ui-theme/lib/variable-names.json`)).default;
|
|
29
28
|
|
|
30
29
|
const browser = await puppeteer.launch();
|
|
31
30
|
const page = await browser.newPage();
|
|
32
31
|
|
|
33
32
|
page
|
|
34
|
-
.on('console', message =>
|
|
35
|
-
|
|
33
|
+
.on('console', message => {
|
|
34
|
+
if (message.type() === 'error') {
|
|
35
|
+
console.error(`${message.type().substr(0, 3).toUpperCase()} ${message.text()}`)
|
|
36
|
+
}
|
|
37
|
+
})
|
|
36
38
|
.on('pageerror', ({ message }) => console.error(message));
|
|
37
39
|
|
|
40
|
+
const themeCSSFiles = (themePackageJson.styleSheets?.map((filePath: string) => (`<link rel="stylesheet" href="styles/${filePath}" />`)) || []).join('\n')
|
|
38
41
|
const baseUrl = pathToFileURL(process.cwd()).toString() + '/';
|
|
39
42
|
const content = `<!DOCTYPE html>
|
|
40
43
|
<html>
|
|
@@ -44,15 +47,14 @@ async function extractPalette(themePackageName: string, outputPath: string) {
|
|
|
44
47
|
<link rel="stylesheet" href="node_modules/@inkdropapp/css/tokens.css" />
|
|
45
48
|
<link rel="stylesheet" href="node_modules/@inkdropapp/css/tags.css" />
|
|
46
49
|
<link rel="stylesheet" href="node_modules/@inkdropapp/base-ui-theme/styles/theme.css" />
|
|
47
|
-
|
|
50
|
+
${themeCSSFiles}
|
|
48
51
|
</head>
|
|
49
|
-
<body class="${
|
|
52
|
+
<body class="${themePackageJson.name} ${typeof appearance !== 'undefined' ? appearance + '-mode' : ''}">
|
|
50
53
|
<h1>Hello</h1>
|
|
51
54
|
</body>
|
|
52
55
|
</html>
|
|
53
56
|
`;
|
|
54
57
|
|
|
55
|
-
console.log(content)
|
|
56
58
|
await page.goto(baseUrl);
|
|
57
59
|
await page.setContent(content);
|
|
58
60
|
|
|
@@ -80,6 +82,6 @@ async function extractPalette(themePackageName: string, outputPath: string) {
|
|
|
80
82
|
await browser.close();
|
|
81
83
|
}
|
|
82
84
|
|
|
83
|
-
extractPalette(
|
|
85
|
+
extractPalette(outputPath)
|
|
84
86
|
.then(() => console.log('Palette extraction complete!'))
|
|
85
87
|
.catch(err => console.error('Error extracting palette:', err));
|