twiddle-panel 0.9.0 → 0.9.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 +2 -2
- package/dist/twiddle.js +74 -71
- package/dist/twiddle.mjs +671 -667
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -43,7 +43,7 @@ if (import.meta.env.DEV) import('twiddle-panel');
|
|
|
43
43
|
**Plain HTML prototypes** (no install needed)
|
|
44
44
|
|
|
45
45
|
```html
|
|
46
|
-
<script src="https://cdn.jsdelivr.net/npm/twiddle-panel@0.9.
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/twiddle-panel@0.9.1/dist/twiddle.js" defer></script>
|
|
47
47
|
```
|
|
48
48
|
|
|
49
49
|
The prototype's CSS must use the `--twd-*` token variables
|
|
@@ -63,7 +63,7 @@ that use them can be re-pointed in **Spacing › Layout roles**.
|
|
|
63
63
|
|
|
64
64
|
Open it with the Panel button in the bottom-right corner, or Alt+T (Option+T on a Mac). The panel opens to the left of the button.
|
|
65
65
|
|
|
66
|
-
- **Tabs** along the top: **Overview** (the **Character** pad: up/down for spacing, Subtle ↔ Bold for weights, borders, corners and shadows; plus a summary of the current look), **Colour** (four themes, then fine-tune with the Tailwind palette: a colour family and shade for the primary, a grey family for the neutrals, or any custom hex; Light/Dark), **Type** (font pairings as tiles, base size, scale), **Spacing** (density, layout roles), **Shape** (button style, corners and size; card style, corners
|
|
66
|
+
- **Tabs** along the top: **Overview** (the **Character** pad: up/down for spacing, Subtle ↔ Bold for weights, borders, corners and shadows; plus a summary of the current look), **Colour** (four themes, then fine-tune with the Tailwind palette: a colour family and shade for the primary, a grey family for the neutrals, or any custom hex; Light/Dark), **Type** (font pairings as tiles, base size, scale), **Spacing** (density, layout roles), **Shape** (a **Buttons & Inputs | Cards** switch: button style, corners and size, which inputs and chips follow; card style, corners and borders; tiles preview with the page's own colour and corners) and **Shadows**. Tabs stay in step: when the Character pad changes something another tab owns (corners, borders, shadows, weights), that tab shows the real value and says "from Character". Each tab ends with its tokens as rows you can set to a fixed value; an edited token shows **Custom** and its own reset. One row along the bottom holds every action (Undo, Redo, Pick, Compare, Copy link, Reset, Changes, Copy prompt); the Panel button opens and closes the panel. **Copy link** shares the exact version (`?twd=…`).
|
|
67
67
|
- **Pick** (arrow) starts selection mode: click an element and every tab now changes just that element (Character pad included), until you press **Pick** again. Choose **This element** or **All `.class` (n)** to set where the tweaks go. Add `data-twd="name"` to an element to control what counts as "all like this".
|
|
68
68
|
- **Compare** (half circle): hold it, or press Alt+C, to see the original page.
|
|
69
69
|
- **Minimise** (the chevron at the end of the tabs) shrinks the panel to just its tabs, beside the Panel button; click a tab or the chevron to open it again.
|