twiddle-panel 0.6.1 → 0.7.1

package/README.md

@@ -35,13 +35,17 @@ if (import.meta.env.DEV) import('twiddle-panel');
 **Plain HTML prototypes** (no install needed)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/twiddle-panel@0.6.1/dist/twiddle.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/twiddle-panel@0.7.1/dist/twiddle.js" defer></script>
 ```
 
 The prototype's CSS must use the `--twd-*` token variables
 (for example `border-radius: var(--twd-radius-control)`). Hard-coded values
 won't respond to the panel.
 
+Optional weight tokens (contract v0.3), `--twd-weight-heading` and `--twd-weight-strong`, let headings and labels follow the Character pad's Subtle ↔ Bold.
+
+Optional component tokens (contract v0.4) let the Shape tab restyle the main button (`--twd-button-bg`, `-fg`, `-border`, `-hover`: Solid, Soft, Outline, Ghost) and the default card (`--twd-card-bg`, `-border`, `-shadow`: Filled, Outlined, Elevated, Tinted). They default to today's look and point at the colour and shadow tokens, so they still follow Colour and the Character pad.
+
 Optional layout roles (token contract v0.2) name what a space is for:
 `--twd-page-pad`, `--twd-section-gap`, `--twd-card-pad`, `--twd-card-gap` and
 `--twd-control-gap`. Each points at a spacing step by default, so prototypes
@@ -49,7 +53,7 @@ that use them can be re-pointed in **Edit every token › Spacing › Roles**.
 
 ## Using the panel
 
-- The **Simple** page tweaks the whole page with broad knobs: the **Character** pad (drag up/down for spacing, left/right for shadow strength), then Fonts, Brand, Neutral, Mode and Corners (buttons and cards together). **Edit every token** opens a page per area (Fonts, Type scale, Colours, Spacing, Corners, Borders, Shadows): the area's knobs, then each of its tokens as a row you can set to a fixed value. An edited token shows **Custom** and its own reset, and stays put when you change the broad knobs. **Spacing › Roles** points each layout role (page padding, section gap, card padding, card gap, control gap, control padding) at another spacing step or a fixed value. **Copy link** shares the exact version (`?twd=…`).
+- **Tabs** along the bottom: **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 and borders) and **Shadows**. Each tab ends with its tokens as rows you can set to a fixed value; an edited token shows **Custom** and its own reset. The header holds the global actions; **Copy link** shares the exact version (`?twd=…`).
 - **Pick** (crosshair) selects one element. The panel then shows only the sections that element uses. 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".
 - **Compare** (half circle): hold it, or press Alt+C, to see the original page.
 - **Undo / Redo** in the footer, or ⌘Z / ⇧⌘Z while the panel has focus. Reset can be undone too.

package/dist/twiddle-tokens.css

@@ -1,5 +1,5 @@
 /* ==========================================================
-   Panel token contract — v0.2
+   Panel token contract — v0.4
    Default values for every role token. Prototypes use ONLY
    these variables; the panel overrides them live.
    ========================================================== */
@@ -21,6 +21,11 @@
   --twd-leading-tight: 1.2;
   --twd-leading-normal: 1.5;
 
+  /* Weights (v0.3). The Character pad's Subtle ↔ Bold moves them
+     (heading 400…800, strong 500…700); body text stays as it is. */
+  --twd-weight-heading: 600; /* headings, big numbers */
+  --twd-weight-strong: 600;  /* buttons, labels, emphasis */
+
   /* ---------- Colour (roles) ---------- */
   --twd-bg: #fafafa;
   --twd-surface: #ffffff;
@@ -68,4 +73,16 @@
   --twd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
   --twd-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
   --twd-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
+
+  /* ---------- Component styles (v0.4) ----------
+     Optional. The main button and the default card. Each points at
+     the tokens above, so Colour, Depth and the Character pad still
+     reach them; the panel's Shape › Style swaps the recipe. */
+  --twd-button-bg: var(--twd-primary);
+  --twd-button-fg: var(--twd-on-primary);
+  --twd-button-border: transparent;
+  --twd-button-hover: var(--twd-primary-hover); /* background on hover */
+  --twd-card-bg: var(--twd-surface);
+  --twd-card-border: var(--twd-border);
+  --twd-card-shadow: var(--twd-shadow-sm);
 }