@inkdropapp/theme-dev-helpers 0.1.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 (6) hide show
  1. package/.github/workflows/CI.yaml +27 -0
  2. package/README.md +41 -0
  3. package/bin/generate-palette +2 -0
  4. package/bun.lockb +0 -0
  5. package/package.json +24 -0
  6. package/src/generate-palette.ts +85 -0
package/.github/workflows/CI.yaml ADDED
@@ -0,0 +1,27 @@
1
+ name: CI
2
+
3
+ on:
4
+ pull_request:
5
+ push:
6
+
7
+ jobs:
8
+ test:
9
+ name: Run tests
10
+ runs-on: ubuntu-latest
11
+ steps:
12
+ - name: Checkout 🛎️
13
+ uses: actions/checkout@v4
14
+
15
+ - name: Use Bun 🥟
16
+ uses: oven-sh/setup-bun@v2
17
+ with:
18
+ registry-url: 'https://registry.npmjs.org'
19
+ scope: '@inkdropapp'
20
+
21
+ - name: Install 🔧
22
+ env:
23
+ BUN_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
24
+ run: bun install
25
+
26
+ - name: Generate Palette 🏗️
27
+ run: ./bin/generate-palette
package/README.md ADDED
@@ -0,0 +1,41 @@
1
+ # Theme dev helpers
2
+
3
+ A helper module for creating themes for Inkdrop.
4
+
5
+ ## Requirements
6
+
7
+ - [Bun](https://bun.sh/)
8
+
9
+ ## Installation
10
+
11
+ You can install the `@inkdropapp/theme-dev-helpers` in your theme project:
12
+
13
+ ```bash
14
+ bun i -D @inkdropapp/theme-dev-helpers
15
+ ```
16
+
17
+ ## Generate Palette
18
+
19
+ It extracts computed values of theme-related CSS variables from CSS files, and outputs to the specified path.
20
+
21
+ ```sh
22
+ generate-palette [options] <theme-name>
23
+ ```
24
+
25
+ ### Parameters
26
+
27
+ You can specify a different theme package name and output destination using the following options:
28
+
29
+ - `<theme-name>`: The name of the theme package to extract variables from. Required. (e.g.,: `default-light-ui`).
30
+ - `-a, --appearance <light/dark>`: Force the UI appearance ("light" or "dark")
31
+ - `-o, --output`: The file path where the extracted variables will be saved (default: `./palette.json`).
32
+
33
+ ### Examples
34
+
35
+ ```sh
36
+ generate-palette default-light-ui
37
+ ```
38
+
39
+ ```sh
40
+ generate-palette nord-ui -a dark
41
+ ```
package/bin/generate-palette ADDED
@@ -0,0 +1,2 @@
1
+ #!/usr/bin/env bun
2
+ import '../src/generate-palette.ts'
package/bun.lockb ADDED
Binary file
package/package.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "@inkdropapp/theme-dev-helpers",
3
+ "version": "0.1.0",
4
+ "description": "A helper module for creating themes for Inkdrop",
5
+ "keywords": [
6
+ "inkdrop",
7
+ "markdown"
8
+ ],
9
+ "scripts": {
10
+ "test": "echo \"Error: no test specified\" && exit 1"
11
+ },
12
+ "author": "Takuya Matsuyama<t@inkdrop.app>",
13
+ "license": "MIT",
14
+ "bin": {
15
+ "generate-palette": "./bin/generate-palette"
16
+ },
17
+ "dependencies": {
18
+ "@inkdropapp/base-ui-theme": "^0.3.0",
19
+ "@inkdropapp/css": "^0.4.2",
20
+ "commander": "^12.1.0",
21
+ "debug": "^4.3.7",
22
+ "puppeteer": "^23.5.3"
23
+ }
24
+ }
package/src/generate-palette.ts ADDED
@@ -0,0 +1,85 @@
1
+ import puppeteer from 'puppeteer';
2
+ import { writeFile } from 'fs/promises';
3
+ import path from 'path';
4
+ import { pathToFileURL } from 'url'
5
+ import { Command } from 'commander';
6
+ import packageJson from '../package.json';
7
+
8
+ const program = new Command();
9
+
10
+ // Define CLI options and help using commander
11
+ program
12
+ .name('generate-palette')
13
+ .description('CLI tool for extracting CSS variables from a theme package for Inkdrop')
14
+ .version(packageJson.version)
15
+ .argument('<theme-name>', 'Theme package name (e.g., default-light-ui)')
16
+ .option('-a, --appearance <light/dark>', 'Force the UI appearance ("light" or "dark")')
17
+ .option('-o, --output <path>', 'Output file path (default: ./palette.json)', './palette.json')
18
+ .parse(process.argv);
19
+
20
+ // Parse options
21
+ const themePackageName = program.args[0] as string;
22
+ const options = program.opts();
23
+ const outputPath = options.output as string;
24
+ const appearance = options.appearance as 'light' | 'dark' | undefined;
25
+
26
+ // Function to extract theme CSS variables
27
+ async function extractPalette(themePackageName: string, outputPath: string) {
28
+ const themeVariableNames = (await import(`@inkdropapp/base-ui-theme/lib/variable-names.json`)).default;
29
+
30
+ const browser = await puppeteer.launch();
31
+ const page = await browser.newPage();
32
+
33
+ page
34
+ .on('console', message =>
35
+ console.error(`${message.type().substr(0, 3).toUpperCase()} ${message.text()}`))
36
+ .on('pageerror', ({ message }) => console.error(message));
37
+
38
+ const baseUrl = pathToFileURL(process.cwd()).toString() + '/';
39
+ const content = `<!DOCTYPE html>
40
+ <html>
41
+ <head>
42
+ <base href="${baseUrl}" />
43
+ <link rel="stylesheet" href="node_modules/@inkdropapp/css/reset.css" />
44
+ <link rel="stylesheet" href="node_modules/@inkdropapp/css/tokens.css" />
45
+ <link rel="stylesheet" href="node_modules/@inkdropapp/css/tags.css" />
46
+ <link rel="stylesheet" href="node_modules/@inkdropapp/base-ui-theme/styles/theme.css" />
47
+ <link rel="stylesheet" href="styles/theme.css" />
48
+ </head>
49
+ <body class="${themePackageName} ${typeof appearance !== 'undefined' ? appearance + '-mode' : ''}">
50
+ <h1>Hello</h1>
51
+ </body>
52
+ </html>
53
+ `;
54
+
55
+ console.log(content)
56
+ await page.goto(baseUrl);
57
+ await page.setContent(content);
58
+
59
+ // Extract CSS variables
60
+ const computedCSSVariables = await page.$eval('body', (body) => {
61
+ const computedStyles = body.computedStyleMap();
62
+ const variables = {};
63
+ for (const [prop, val] of computedStyles) {
64
+ if (prop.startsWith('--')) {
65
+ variables[prop] = val.toString();
66
+ }
67
+ }
68
+ return variables;
69
+ });
70
+
71
+ const themeCSSVariables = themeVariableNames.reduce((variables, name) => {
72
+ variables[name] = computedCSSVariables[name];
73
+ return variables;
74
+ }, {});
75
+
76
+ // Write to the output file
77
+ const outputFilePath = path.resolve(outputPath);
78
+ await writeFile(outputFilePath, JSON.stringify(themeCSSVariables, null, 2));
79
+
80
+ await browser.close();
81
+ }
82
+
83
+ extractPalette(themePackageName, outputPath)
84
+ .then(() => console.log('Palette extraction complete!'))
85
+ .catch(err => console.error('Error extracting palette:', err));