@designtools/shadows 0.1.0 → 0.1.2
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 +57 -0
- package/package.json +12 -4
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# @designtools/shadows
|
|
2
|
+
|
|
3
|
+
Visual shadow editing CLI — scan, preview, and edit box-shadow values in your project. Detects your styling system and reads/writes shadows in the appropriate format.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install -g @designtools/shadows
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
Start your dev server, then run the CLI in your project directory:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
designtools-shadows
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Or use `npx` without installing:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npx @designtools/shadows
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
The editor opens at [http://localhost:4410](http://localhost:4410) with your app proxied inside.
|
|
26
|
+
|
|
27
|
+
### Options
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
--port <number> Port your dev server is running on (default: 3000)
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
designtools-shadows --port 5173
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Supported styling systems
|
|
38
|
+
|
|
39
|
+
| System | Detection | Shadow format |
|
|
40
|
+
|--------|-----------|---------------|
|
|
41
|
+
| Tailwind CSS v4 | `tailwindcss ^4` in package.json | `@theme { --shadow-*: ... }` |
|
|
42
|
+
| Tailwind CSS v3 | `tailwindcss ^3` + config file | `:root` CSS custom properties |
|
|
43
|
+
| Bootstrap 5 | `bootstrap` in package.json | Sass `$box-shadow-*` and CSS `--bs-box-shadow-*` |
|
|
44
|
+
| W3C Design Tokens | `.tokens.json` files with `$type: "shadow"` | DTCG composite values |
|
|
45
|
+
| CSS Variables | `--*` custom properties in `:root` | Standard `box-shadow` values |
|
|
46
|
+
|
|
47
|
+
## How it works
|
|
48
|
+
|
|
49
|
+
The CLI scans your project to detect the framework and styling system, loads shadow presets for the detected framework, and starts an Express server that proxies your app with a visual shadow editor. Edits are written back to the appropriate source file format (CSS, Sass, JSON, etc.).
|
|
50
|
+
|
|
51
|
+
## Part of @designtools
|
|
52
|
+
|
|
53
|
+
This package is part of the [@designtools](https://github.com/andflett/designtools) monorepo. See also [`@designtools/studio`](https://www.npmjs.com/package/@designtools/studio) for token, component, and instance editing.
|
|
54
|
+
|
|
55
|
+
## License
|
|
56
|
+
|
|
57
|
+
CC BY-NC 4.0 — free to use and modify for non-commercial purposes with attribution.
|
package/package.json
CHANGED
|
@@ -1,19 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designtools/shadows",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Visual shadow editing CLI — scan, preview, and edit box-shadow values in your project",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "CC-BY-NC-4.0",
|
|
7
7
|
"author": "Andrew Flett",
|
|
8
|
-
"engines": {
|
|
8
|
+
"engines": {
|
|
9
|
+
"node": ">=18"
|
|
10
|
+
},
|
|
9
11
|
"scripts": {
|
|
10
12
|
"dev": "tsx src/cli.ts",
|
|
11
13
|
"dev:client": "vite dev src/client",
|
|
12
14
|
"build": "vite build src/client && tsup",
|
|
13
15
|
"prepublishOnly": "npm run build"
|
|
14
16
|
},
|
|
15
|
-
"bin": {
|
|
16
|
-
|
|
17
|
+
"bin": {
|
|
18
|
+
"designtools-shadows": "dist/cli.js"
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"dist",
|
|
22
|
+
"src/client",
|
|
23
|
+
"src/inject"
|
|
24
|
+
],
|
|
17
25
|
"dependencies": {
|
|
18
26
|
"@designtools/core": "*",
|
|
19
27
|
"@radix-ui/react-icons": "^1.3.2",
|