@ascribed/review 0.2.1-next.10 → 0.2.1-next.11

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/README.md +1 -1
  2. package/dist/overlay/style.d.ts +1 -1
  3. package/dist/overlay/style.js +22 -15
  4. package/dist/overlay/style.js.map +1 -1
  5. package/package.json +3 -3
  6. package/src/marks/marks.css +54 -49
package/README.md CHANGED
@@ -32,7 +32,7 @@ Each changed block gets a label (Added, Changed, Removed, Moved) and a bar in th
32
32
 
33
33
  The blocks are found by their anchors: the element with exactly a change's anchor, or, when there's none (a paragraph in a tight list item has no element of its own), the smallest anchored element with the same file and includes whose lines contain it.
34
34
 
35
- The colors are the `--ascribe-review-*` custom properties at the top of `marks.css`, with light and dark values.
35
+ The colors are the `--ascribe-review-*` custom properties at the top of `marks.css`, with light and dark values. Their names don't change; their defaults are Ascribe's design tokens, shared with `@ascribed/elements`, and a release may change them, noting it in the changelog.
36
36
 
37
37
  ## The static report
38
38
 
package/dist/overlay/style.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const OVERLAY_CSS = "\n:host {\n all: initial;\n --text: var(--ascribe-review-text, CanvasText);\n --muted: var(--ascribe-review-muted, #5b6475);\n --line: var(--ascribe-review-border, #d3d8e0);\n --surface: var(--ascribe-review-surface, Canvas);\n --thread: var(--ascribe-review-thread, #f5f7fb);\n --accent: var(--ascribe-review-focus, #1f6feb);\n --accent-text: var(--ascribe-review-accent-text, #ffffff);\n --input: var(--ascribe-review-input, var(--surface));\n --flash: var(--ascribe-review-flash, #fff6bf);\n --added: var(--ascribe-review-added, #1a7f37);\n --changed: var(--ascribe-review-changed, #8a5a00);\n --changed-background: var(--ascribe-review-changed-background, #fff1c2);\n --removed: var(--ascribe-review-removed, #c4222d);\n --removed-background: var(--ascribe-review-removed-background, #ffe4e2);\n --mono: var(--ascribe-review-mono, ui-monospace, monospace);\n font-family: var(--ascribe-review-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);\n font-size: 12.5px;\n line-height: 1.45;\n color: var(--text);\n}\n* {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\nbutton,\ntextarea,\ninput {\n font: inherit;\n color: inherit;\n}\nbutton {\n cursor: pointer;\n}\nbutton:disabled,\nbutton[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible,\n.thread:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Buttons */\n.ghost {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n padding: 2px 8px;\n font-size: 12px;\n min-height: 24px;\n}\n.ghost:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n border-color: var(--accent);\n color: var(--accent);\n}\n.primary {\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.danger {\n border: 1px solid var(--removed);\n background: var(--removed);\n color: var(--surface);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.link {\n border: 0;\n background: transparent;\n color: var(--accent);\n padding: 0;\n font-size: inherit;\n text-align: inherit;\n}\na.link {\n text-decoration: none;\n}\n.link:hover {\n text-decoration: underline;\n}\n.hint {\n color: var(--muted);\n font-size: 11.5px;\n}\n.refuse,\n.error {\n color: var(--removed);\n font-size: 12px;\n}\n.spacer {\n flex: 1;\n}\n\n/* The layer over the page: the column, markers' panel, dialogs. */\n.layer {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.layer > *,\n.column > * {\n pointer-events: auto;\n}\n.column {\n position: absolute;\n top: 0;\n width: 250px;\n pointer-events: none;\n}\n.slot {\n position: absolute;\n left: 0;\n right: 0;\n}\n.slot > .thread,\n.slot > .composer {\n margin: 0 0 6px;\n}\n.slot.linked .thread,\n.slot.linked .composer {\n border-color: var(--accent);\n}\n.highlight {\n position: absolute;\n pointer-events: none;\n background: color-mix(in srgb, var(--flash) 55%, transparent);\n border-radius: 3px;\n /* Over the page's text, a tint that keeps the text as it was: multiplied\n on a light page, screened on a dark one. */\n mix-blend-mode: var(--ascribe-review-blend, multiply);\n}\nsvg.connector {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\nsvg.connector path {\n fill: none;\n stroke: var(--accent);\n stroke-width: 1.5;\n}\n\n/* The block tools: the Comment button, and the count marker at narrow widths. */\n.tool {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n font-size: 11.5px;\n padding: 0 7px;\n min-height: 22px;\n color: var(--accent);\n white-space: nowrap;\n}\n.hint-count {\n margin-inline-start: 2px;\n font-size: 11px;\n font-weight: 600;\n color: var(--accent);\n}\n\n.marker {\n border: 1px solid var(--accent);\n background: var(--surface);\n color: var(--accent);\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n padding: 0 8px;\n min-width: 30px;\n min-height: 24px;\n}\n\n/* Threads */\n.thread {\n background: var(--thread);\n border: 1px solid var(--line);\n border-radius: 6px;\n margin: 6px 0 10px;\n}\n.th {\n display: flex;\n flex-wrap: wrap;\n gap: 3px 8px;\n align-items: center;\n padding: 5px 9px 2px;\n font-size: 11.5px;\n color: var(--muted);\n}\n.acts {\n display: flex;\n flex-wrap: wrap;\n gap: 2px 12px;\n padding: 0 9px 5px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n}\n.thread.collapsed .acts {\n border-bottom: 0;\n}\n.orig,\n.inside {\n padding: 5px 9px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n color: var(--muted);\n}\n.orig q {\n color: var(--text);\n white-space: pre-wrap;\n}\n.badge {\n border-radius: 999px;\n padding: 0 7px;\n font-size: 10.5px;\n font-weight: 600;\n border: 1px solid currentColor;\n white-space: nowrap;\n}\n.badge.unsent {\n color: var(--changed);\n}\n.badge.resolved {\n color: var(--added);\n}\n.badge.outdated {\n color: var(--muted);\n}\n.badge.summary {\n color: var(--accent);\n}\n.badge.removed,\n.badge.detached {\n color: var(--removed);\n}\n.comment {\n display: grid;\n grid-template-columns: 22px minmax(0, 1fr);\n gap: 7px;\n padding: 6px 9px;\n}\n.comment + .comment {\n border-top: 1px dashed var(--line);\n}\n.avatar {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--accent-text);\n display: grid;\n place-items: center;\n font-size: 9.5px;\n font-weight: 700;\n}\n.who {\n font-weight: 600;\n}\n.when {\n color: var(--muted);\n font-size: 11px;\n margin-left: 6px;\n}\n.body {\n overflow-wrap: anywhere;\n}\n.body > :first-child {\n margin-top: 1px;\n}\n.body > :last-child {\n margin-bottom: 0;\n}\n.body p,\n.body ul,\n.body ol,\n.body blockquote,\n.body pre {\n margin: 4px 0;\n}\n.body ul,\n.body ol {\n padding-left: 18px;\n}\n.body blockquote {\n border-left: 3px solid var(--line);\n padding-left: 8px;\n color: var(--muted);\n}\n.body code,\n.thread-list .where code {\n font-family: var(--mono);\n font-size: 0.92em;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n padding: 0.05em 0.3em;\n border-radius: 3px;\n}\n.body pre {\n overflow-x: auto;\n padding: 6px 8px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n}\n.body pre code {\n background: none;\n padding: 0;\n}\n.body a {\n color: var(--accent);\n}\n.reply {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 6px 9px 8px;\n border-top: 1px solid var(--line);\n}\n.reply textarea {\n flex: 1 1 100%;\n min-width: 80px;\n padding: 2px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n resize: vertical;\n field-sizing: content;\n min-height: 26px;\n max-height: 160px;\n}\n.reply .error,\n.reply .hint {\n flex-basis: 100%;\n}\n.composer {\n background: var(--thread);\n border: 1px solid var(--accent);\n border-radius: 6px;\n padding: 8px 10px;\n margin: 6px 0 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.composer textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.row {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* The detached list, above the page */\n.detached {\n margin: 12px 0;\n border: 1px dashed var(--line);\n border-radius: 6px;\n padding: 8px 10px 2px;\n color: var(--muted);\n max-width: 520px;\n}\n.detached .thread {\n color: var(--text);\n}\n\n/* The unsent bar, at the bottom */\n.unsent-bar {\n background: var(--changed-background);\n border-top: 1px solid var(--line);\n padding: 6px 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 6px 10px;\n align-items: center;\n}\n.unsent-bar .hint {\n font-size: 12px;\n}\n\n/* The panel for one block's threads, at narrow widths */\n.sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n max-height: 62vh;\n overflow: auto;\n background: var(--surface);\n border-top: 2px solid var(--accent);\n box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);\n padding: 8px 12px 10px;\n z-index: 4;\n}\n.sheet .head {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n color: var(--muted);\n}\n\n/* Dialogs */\n.backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 8;\n display: grid;\n place-items: center;\n padding: 12px;\n}\n.dialog {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 8px;\n width: min(480px, 100%);\n max-height: 100%;\n overflow: auto;\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 13px;\n}\n.dialog h2 {\n margin: 0;\n font-size: 14px;\n}\n.dialog ul.unsent-list {\n margin: 0;\n padding-left: 18px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.dialog fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 4px 14px;\n}\n.dialog textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.confirm {\n border: 1px solid var(--removed);\n background: var(--removed-background);\n border-radius: 6px;\n padding: 8px 10px;\n}\n.segmented {\n display: inline-flex;\n flex-wrap: wrap;\n align-self: flex-start;\n border: 1px solid var(--line);\n border-radius: 5px;\n overflow: hidden;\n}\n.segmented button {\n border: 0;\n background: transparent;\n padding: 2px 9px;\n font-size: 12px;\n color: var(--muted);\n min-height: 24px;\n}\n.segmented button + button {\n border-left: 1px solid var(--line);\n}\n.segmented button[aria-pressed=\"true\"] {\n background: var(--accent);\n color: var(--accent-text);\n}\n.thread-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.thread-list li + li {\n border-top: 1px solid var(--line);\n}\n.thread-list button {\n display: flex;\n flex-direction: column;\n gap: 1px;\n width: 100%;\n text-align: left;\n border: 0;\n background: transparent;\n padding: 6px 4px;\n}\n.thread-list button:hover,\n.thread-list button:focus-visible {\n background: color-mix(in srgb, var(--muted) 12%, transparent);\n}\n.thread-list .where {\n font-size: 11.5px;\n color: var(--muted);\n}\n.thread-list .first {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.flash {\n animation: flash 1.4s ease-out;\n}\n@keyframes flash {\n from {\n box-shadow: 0 0 0 3px var(--accent);\n }\n to {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .flash {\n animation: none;\n outline: 2px solid var(--accent);\n }\n}\n";
1
+ export declare const OVERLAY_CSS = "\n:host {\n all: initial;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: host, light. */\n --muted: var(--ascribe-review-muted, #676c75);\n --line: var(--ascribe-review-border, #e3e6ec);\n --thread: var(--ascribe-review-thread, #f7f9fd);\n --accent: var(--ascribe-review-focus, #5962e8);\n --accent-text: var(--ascribe-review-accent-text, #ffffff);\n --flash: var(--ascribe-review-flash, #fee9d0);\n --added: var(--ascribe-review-added, #057256);\n --changed: var(--ascribe-review-changed, #845502);\n --changed-background: var(--ascribe-review-changed-background, #fee9d0);\n --removed: var(--ascribe-review-removed, #ca3f02);\n --removed-background: var(--ascribe-review-removed-background, #fef4f1);\n --mono: var(--ascribe-review-mono, ui-monospace, monospace);\n font-family: var(--ascribe-review-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);\n /* End of generated host. */\n --text: var(--ascribe-review-text, CanvasText);\n --surface: var(--ascribe-review-surface, Canvas);\n --input: var(--ascribe-review-input, var(--surface));\n font-size: 12.5px;\n line-height: 1.45;\n color: var(--text);\n}\n* {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\nbutton,\ntextarea,\ninput {\n font: inherit;\n color: inherit;\n}\nbutton {\n cursor: pointer;\n}\nbutton:disabled,\nbutton[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible,\n.thread:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Buttons */\n.ghost {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n padding: 2px 8px;\n font-size: 12px;\n min-height: 24px;\n}\n.ghost:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n border-color: var(--accent);\n color: var(--accent);\n}\n.primary {\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.danger {\n border: 1px solid var(--removed);\n background: var(--removed);\n color: var(--surface);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.link {\n border: 0;\n background: transparent;\n color: var(--accent);\n padding: 0;\n font-size: inherit;\n text-align: inherit;\n}\na.link {\n text-decoration: none;\n}\n.link:hover {\n text-decoration: underline;\n}\n.hint {\n color: var(--muted);\n font-size: 11.5px;\n}\n.refuse,\n.error {\n color: var(--removed);\n font-size: 12px;\n}\n.spacer {\n flex: 1;\n}\n\n/* The layer over the page: the column, markers' panel, dialogs. */\n.layer {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.layer > *,\n.column > * {\n pointer-events: auto;\n}\n.column {\n position: absolute;\n top: 0;\n width: 250px;\n pointer-events: none;\n}\n.slot {\n position: absolute;\n left: 0;\n right: 0;\n}\n.slot > .thread,\n.slot > .composer {\n margin: 0 0 6px;\n}\n.slot.linked .thread,\n.slot.linked .composer {\n border-color: var(--accent);\n}\n.highlight {\n position: absolute;\n pointer-events: none;\n background: color-mix(in srgb, var(--flash) 55%, transparent);\n border-radius: 3px;\n /* Over the page's text, a tint that keeps the text as it was: multiplied\n on a light page, screened on a dark one. */\n mix-blend-mode: var(--ascribe-review-blend, multiply);\n}\nsvg.connector {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\nsvg.connector path {\n fill: none;\n stroke: var(--accent);\n stroke-width: 1.5;\n}\n\n/* The block tools: the Comment button, and the count marker at narrow widths. */\n.tool {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n font-size: 11.5px;\n padding: 0 7px;\n min-height: 22px;\n color: var(--accent);\n white-space: nowrap;\n}\n.hint-count {\n margin-inline-start: 2px;\n font-size: 11px;\n font-weight: 600;\n color: var(--accent);\n}\n\n.marker {\n border: 1px solid var(--accent);\n background: var(--surface);\n color: var(--accent);\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n padding: 0 8px;\n min-width: 30px;\n min-height: 24px;\n}\n\n/* Threads */\n.thread {\n background: var(--thread);\n border: 1px solid var(--line);\n border-radius: 6px;\n margin: 6px 0 10px;\n}\n.th {\n display: flex;\n flex-wrap: wrap;\n gap: 3px 8px;\n align-items: center;\n padding: 5px 9px 2px;\n font-size: 11.5px;\n color: var(--muted);\n}\n.acts {\n display: flex;\n flex-wrap: wrap;\n gap: 2px 12px;\n padding: 0 9px 5px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n}\n.thread.collapsed .acts {\n border-bottom: 0;\n}\n.orig,\n.inside {\n padding: 5px 9px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n color: var(--muted);\n}\n.orig q {\n color: var(--text);\n white-space: pre-wrap;\n}\n.badge {\n border-radius: 999px;\n padding: 0 7px;\n font-size: 10.5px;\n font-weight: 600;\n border: 1px solid currentColor;\n white-space: nowrap;\n}\n.badge.unsent {\n color: var(--changed);\n}\n.badge.resolved {\n color: var(--added);\n}\n.badge.outdated {\n color: var(--muted);\n}\n.badge.summary {\n color: var(--accent);\n}\n.badge.removed,\n.badge.detached {\n color: var(--removed);\n}\n.comment {\n display: grid;\n grid-template-columns: 22px minmax(0, 1fr);\n gap: 7px;\n padding: 6px 9px;\n}\n.comment + .comment {\n border-top: 1px dashed var(--line);\n}\n.avatar {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--accent-text);\n display: grid;\n place-items: center;\n font-size: 9.5px;\n font-weight: 700;\n}\n.who {\n font-weight: 600;\n}\n.when {\n color: var(--muted);\n font-size: 11px;\n margin-left: 6px;\n}\n.body {\n overflow-wrap: anywhere;\n}\n.body > :first-child {\n margin-top: 1px;\n}\n.body > :last-child {\n margin-bottom: 0;\n}\n.body p,\n.body ul,\n.body ol,\n.body blockquote,\n.body pre {\n margin: 4px 0;\n}\n.body ul,\n.body ol {\n padding-left: 18px;\n}\n.body blockquote {\n border-left: 3px solid var(--line);\n padding-left: 8px;\n color: var(--muted);\n}\n.body code,\n.thread-list .where code {\n font-family: var(--mono);\n font-size: 0.92em;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n padding: 0.05em 0.3em;\n border-radius: 3px;\n}\n.body pre {\n overflow-x: auto;\n padding: 6px 8px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n}\n.body pre code {\n background: none;\n padding: 0;\n}\n.body a {\n color: var(--accent);\n}\n.reply {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 6px 9px 8px;\n border-top: 1px solid var(--line);\n}\n.reply textarea {\n flex: 1 1 100%;\n min-width: 80px;\n padding: 2px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n resize: vertical;\n field-sizing: content;\n min-height: 26px;\n max-height: 160px;\n}\n.reply .error,\n.reply .hint {\n flex-basis: 100%;\n}\n.composer {\n background: var(--thread);\n border: 1px solid var(--accent);\n border-radius: 6px;\n padding: 8px 10px;\n margin: 6px 0 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.composer textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.row {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* The detached list, above the page */\n.detached {\n margin: 12px 0;\n border: 1px dashed var(--line);\n border-radius: 6px;\n padding: 8px 10px 2px;\n color: var(--muted);\n max-width: 520px;\n}\n.detached .thread {\n color: var(--text);\n}\n\n/* The unsent bar, at the bottom */\n.unsent-bar {\n background: var(--changed-background);\n border-top: 1px solid var(--line);\n padding: 6px 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 6px 10px;\n align-items: center;\n}\n.unsent-bar .hint {\n color: var(--text);\n font-size: 12px;\n}\n\n/* The panel for one block's threads, at narrow widths */\n.sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n max-height: 62vh;\n overflow: auto;\n background: var(--surface);\n border-top: 2px solid var(--accent);\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: sheet, light. */\n box-shadow: 0 -8px 24px rgb(0 0 0 / 0.22);\n /* End of generated sheet. */\n padding: 8px 12px 10px;\n z-index: 4;\n}\n.sheet .head {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n color: var(--muted);\n}\n\n/* Dialogs */\n.backdrop {\n position: fixed;\n inset: 0;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: backdrop, light. */\n background: rgb(0 0 0 / 0.4);\n /* End of generated backdrop. */\n z-index: 8;\n display: grid;\n place-items: center;\n padding: 12px;\n}\n.dialog {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 8px;\n width: min(480px, 100%);\n max-height: 100%;\n overflow: auto;\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 13px;\n}\n.dialog h2 {\n margin: 0;\n font-size: 14px;\n}\n.dialog ul.unsent-list {\n margin: 0;\n padding-left: 18px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.dialog fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 4px 14px;\n}\n.dialog textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.confirm {\n border: 1px solid var(--removed);\n background: var(--removed-background);\n border-radius: 6px;\n padding: 8px 10px;\n}\n.segmented {\n display: inline-flex;\n flex-wrap: wrap;\n align-self: flex-start;\n border: 1px solid var(--line);\n border-radius: 5px;\n overflow: hidden;\n}\n.segmented button {\n border: 0;\n background: transparent;\n padding: 2px 9px;\n font-size: 12px;\n color: var(--muted);\n min-height: 24px;\n}\n.segmented button + button {\n border-left: 1px solid var(--line);\n}\n.segmented button[aria-pressed=\"true\"] {\n background: var(--accent);\n color: var(--accent-text);\n}\n.thread-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.thread-list li + li {\n border-top: 1px solid var(--line);\n}\n.thread-list button {\n display: flex;\n flex-direction: column;\n gap: 1px;\n width: 100%;\n text-align: left;\n border: 0;\n background: transparent;\n padding: 6px 4px;\n}\n.thread-list button:hover,\n.thread-list button:focus-visible {\n background: color-mix(in srgb, var(--muted) 12%, transparent);\n}\n.thread-list .where {\n font-size: 11.5px;\n color: var(--muted);\n}\n.thread-list .first {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.flash {\n animation: flash 1.4s ease-out;\n}\n@keyframes flash {\n from {\n box-shadow: 0 0 0 3px var(--accent);\n }\n to {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .flash {\n animation: none;\n outline: 2px solid var(--accent);\n }\n}\n";
package/dist/overlay/style.js CHANGED
@@ -6,22 +6,24 @@
6
6
  export const OVERLAY_CSS = `
7
7
  :host {
8
8
  all: initial;
9
- --text: var(--ascribe-review-text, CanvasText);
10
- --muted: var(--ascribe-review-muted, #5b6475);
11
- --line: var(--ascribe-review-border, #d3d8e0);
12
- --surface: var(--ascribe-review-surface, Canvas);
13
- --thread: var(--ascribe-review-thread, #f5f7fb);
14
- --accent: var(--ascribe-review-focus, #1f6feb);
9
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: host, light. */
10
+ --muted: var(--ascribe-review-muted, #676c75);
11
+ --line: var(--ascribe-review-border, #e3e6ec);
12
+ --thread: var(--ascribe-review-thread, #f7f9fd);
13
+ --accent: var(--ascribe-review-focus, #5962e8);
15
14
  --accent-text: var(--ascribe-review-accent-text, #ffffff);
16
- --input: var(--ascribe-review-input, var(--surface));
17
- --flash: var(--ascribe-review-flash, #fff6bf);
18
- --added: var(--ascribe-review-added, #1a7f37);
19
- --changed: var(--ascribe-review-changed, #8a5a00);
20
- --changed-background: var(--ascribe-review-changed-background, #fff1c2);
21
- --removed: var(--ascribe-review-removed, #c4222d);
22
- --removed-background: var(--ascribe-review-removed-background, #ffe4e2);
15
+ --flash: var(--ascribe-review-flash, #fee9d0);
16
+ --added: var(--ascribe-review-added, #057256);
17
+ --changed: var(--ascribe-review-changed, #845502);
18
+ --changed-background: var(--ascribe-review-changed-background, #fee9d0);
19
+ --removed: var(--ascribe-review-removed, #ca3f02);
20
+ --removed-background: var(--ascribe-review-removed-background, #fef4f1);
23
21
  --mono: var(--ascribe-review-mono, ui-monospace, monospace);
24
22
  font-family: var(--ascribe-review-font, system-ui, -apple-system, "Segoe UI", sans-serif);
23
+ /* End of generated host. */
24
+ --text: var(--ascribe-review-text, CanvasText);
25
+ --surface: var(--ascribe-review-surface, Canvas);
26
+ --input: var(--ascribe-review-input, var(--surface));
25
27
  font-size: 12.5px;
26
28
  line-height: 1.45;
27
29
  color: var(--text);
@@ -413,6 +415,7 @@ svg.connector path {
413
415
  align-items: center;
414
416
  }
415
417
  .unsent-bar .hint {
418
+ color: var(--text);
416
419
  font-size: 12px;
417
420
  }
418
421
 
@@ -426,7 +429,9 @@ svg.connector path {
426
429
  overflow: auto;
427
430
  background: var(--surface);
428
431
  border-top: 2px solid var(--accent);
429
- box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);
432
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: sheet, light. */
433
+ box-shadow: 0 -8px 24px rgb(0 0 0 / 0.22);
434
+ /* End of generated sheet. */
430
435
  padding: 8px 12px 10px;
431
436
  z-index: 4;
432
437
  }
@@ -442,7 +447,9 @@ svg.connector path {
442
447
  .backdrop {
443
448
  position: fixed;
444
449
  inset: 0;
445
- background: rgba(0, 0, 0, 0.4);
450
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: backdrop, light. */
451
+ background: rgb(0 0 0 / 0.4);
452
+ /* End of generated backdrop. */
446
453
  z-index: 8;
447
454
  display: grid;
448
455
  place-items: center;
package/dist/overlay/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/overlay/style.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,6EAA6E;AAC7E,6EAA6E;AAC7E,+EAA+E;AAC/E,kDAAkD;AAElD,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAojB1B,CAAC","sourcesContent":["// The overlay's stylesheet. It applies inside the overlay's shadow roots only,\n// so the page's styles don't reach the overlay and the overlay's don't reach\n// the page. Colors come from the page's --ascribe-review-* custom properties\n// (`marks.css` sets them, with light and dark values; a host can set its own),\n// which reach inside shadow roots by inheritance.\n\nexport const OVERLAY_CSS = `\n:host {\n all: initial;\n --text: var(--ascribe-review-text, CanvasText);\n --muted: var(--ascribe-review-muted, #5b6475);\n --line: var(--ascribe-review-border, #d3d8e0);\n --surface: var(--ascribe-review-surface, Canvas);\n --thread: var(--ascribe-review-thread, #f5f7fb);\n --accent: var(--ascribe-review-focus, #1f6feb);\n --accent-text: var(--ascribe-review-accent-text, #ffffff);\n --input: var(--ascribe-review-input, var(--surface));\n --flash: var(--ascribe-review-flash, #fff6bf);\n --added: var(--ascribe-review-added, #1a7f37);\n --changed: var(--ascribe-review-changed, #8a5a00);\n --changed-background: var(--ascribe-review-changed-background, #fff1c2);\n --removed: var(--ascribe-review-removed, #c4222d);\n --removed-background: var(--ascribe-review-removed-background, #ffe4e2);\n --mono: var(--ascribe-review-mono, ui-monospace, monospace);\n font-family: var(--ascribe-review-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);\n font-size: 12.5px;\n line-height: 1.45;\n color: var(--text);\n}\n* {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\nbutton,\ntextarea,\ninput {\n font: inherit;\n color: inherit;\n}\nbutton {\n cursor: pointer;\n}\nbutton:disabled,\nbutton[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible,\n.thread:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Buttons */\n.ghost {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n padding: 2px 8px;\n font-size: 12px;\n min-height: 24px;\n}\n.ghost:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n border-color: var(--accent);\n color: var(--accent);\n}\n.primary {\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.danger {\n border: 1px solid var(--removed);\n background: var(--removed);\n color: var(--surface);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.link {\n border: 0;\n background: transparent;\n color: var(--accent);\n padding: 0;\n font-size: inherit;\n text-align: inherit;\n}\na.link {\n text-decoration: none;\n}\n.link:hover {\n text-decoration: underline;\n}\n.hint {\n color: var(--muted);\n font-size: 11.5px;\n}\n.refuse,\n.error {\n color: var(--removed);\n font-size: 12px;\n}\n.spacer {\n flex: 1;\n}\n\n/* The layer over the page: the column, markers' panel, dialogs. */\n.layer {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.layer > *,\n.column > * {\n pointer-events: auto;\n}\n.column {\n position: absolute;\n top: 0;\n width: 250px;\n pointer-events: none;\n}\n.slot {\n position: absolute;\n left: 0;\n right: 0;\n}\n.slot > .thread,\n.slot > .composer {\n margin: 0 0 6px;\n}\n.slot.linked .thread,\n.slot.linked .composer {\n border-color: var(--accent);\n}\n.highlight {\n position: absolute;\n pointer-events: none;\n background: color-mix(in srgb, var(--flash) 55%, transparent);\n border-radius: 3px;\n /* Over the page's text, a tint that keeps the text as it was: multiplied\n on a light page, screened on a dark one. */\n mix-blend-mode: var(--ascribe-review-blend, multiply);\n}\nsvg.connector {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\nsvg.connector path {\n fill: none;\n stroke: var(--accent);\n stroke-width: 1.5;\n}\n\n/* The block tools: the Comment button, and the count marker at narrow widths. */\n.tool {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n font-size: 11.5px;\n padding: 0 7px;\n min-height: 22px;\n color: var(--accent);\n white-space: nowrap;\n}\n.hint-count {\n margin-inline-start: 2px;\n font-size: 11px;\n font-weight: 600;\n color: var(--accent);\n}\n\n.marker {\n border: 1px solid var(--accent);\n background: var(--surface);\n color: var(--accent);\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n padding: 0 8px;\n min-width: 30px;\n min-height: 24px;\n}\n\n/* Threads */\n.thread {\n background: var(--thread);\n border: 1px solid var(--line);\n border-radius: 6px;\n margin: 6px 0 10px;\n}\n.th {\n display: flex;\n flex-wrap: wrap;\n gap: 3px 8px;\n align-items: center;\n padding: 5px 9px 2px;\n font-size: 11.5px;\n color: var(--muted);\n}\n.acts {\n display: flex;\n flex-wrap: wrap;\n gap: 2px 12px;\n padding: 0 9px 5px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n}\n.thread.collapsed .acts {\n border-bottom: 0;\n}\n.orig,\n.inside {\n padding: 5px 9px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n color: var(--muted);\n}\n.orig q {\n color: var(--text);\n white-space: pre-wrap;\n}\n.badge {\n border-radius: 999px;\n padding: 0 7px;\n font-size: 10.5px;\n font-weight: 600;\n border: 1px solid currentColor;\n white-space: nowrap;\n}\n.badge.unsent {\n color: var(--changed);\n}\n.badge.resolved {\n color: var(--added);\n}\n.badge.outdated {\n color: var(--muted);\n}\n.badge.summary {\n color: var(--accent);\n}\n.badge.removed,\n.badge.detached {\n color: var(--removed);\n}\n.comment {\n display: grid;\n grid-template-columns: 22px minmax(0, 1fr);\n gap: 7px;\n padding: 6px 9px;\n}\n.comment + .comment {\n border-top: 1px dashed var(--line);\n}\n.avatar {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--accent-text);\n display: grid;\n place-items: center;\n font-size: 9.5px;\n font-weight: 700;\n}\n.who {\n font-weight: 600;\n}\n.when {\n color: var(--muted);\n font-size: 11px;\n margin-left: 6px;\n}\n.body {\n overflow-wrap: anywhere;\n}\n.body > :first-child {\n margin-top: 1px;\n}\n.body > :last-child {\n margin-bottom: 0;\n}\n.body p,\n.body ul,\n.body ol,\n.body blockquote,\n.body pre {\n margin: 4px 0;\n}\n.body ul,\n.body ol {\n padding-left: 18px;\n}\n.body blockquote {\n border-left: 3px solid var(--line);\n padding-left: 8px;\n color: var(--muted);\n}\n.body code,\n.thread-list .where code {\n font-family: var(--mono);\n font-size: 0.92em;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n padding: 0.05em 0.3em;\n border-radius: 3px;\n}\n.body pre {\n overflow-x: auto;\n padding: 6px 8px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n}\n.body pre code {\n background: none;\n padding: 0;\n}\n.body a {\n color: var(--accent);\n}\n.reply {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 6px 9px 8px;\n border-top: 1px solid var(--line);\n}\n.reply textarea {\n flex: 1 1 100%;\n min-width: 80px;\n padding: 2px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n resize: vertical;\n field-sizing: content;\n min-height: 26px;\n max-height: 160px;\n}\n.reply .error,\n.reply .hint {\n flex-basis: 100%;\n}\n.composer {\n background: var(--thread);\n border: 1px solid var(--accent);\n border-radius: 6px;\n padding: 8px 10px;\n margin: 6px 0 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.composer textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.row {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* The detached list, above the page */\n.detached {\n margin: 12px 0;\n border: 1px dashed var(--line);\n border-radius: 6px;\n padding: 8px 10px 2px;\n color: var(--muted);\n max-width: 520px;\n}\n.detached .thread {\n color: var(--text);\n}\n\n/* The unsent bar, at the bottom */\n.unsent-bar {\n background: var(--changed-background);\n border-top: 1px solid var(--line);\n padding: 6px 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 6px 10px;\n align-items: center;\n}\n.unsent-bar .hint {\n font-size: 12px;\n}\n\n/* The panel for one block's threads, at narrow widths */\n.sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n max-height: 62vh;\n overflow: auto;\n background: var(--surface);\n border-top: 2px solid var(--accent);\n box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);\n padding: 8px 12px 10px;\n z-index: 4;\n}\n.sheet .head {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n color: var(--muted);\n}\n\n/* Dialogs */\n.backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: 8;\n display: grid;\n place-items: center;\n padding: 12px;\n}\n.dialog {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 8px;\n width: min(480px, 100%);\n max-height: 100%;\n overflow: auto;\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 13px;\n}\n.dialog h2 {\n margin: 0;\n font-size: 14px;\n}\n.dialog ul.unsent-list {\n margin: 0;\n padding-left: 18px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.dialog fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 4px 14px;\n}\n.dialog textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.confirm {\n border: 1px solid var(--removed);\n background: var(--removed-background);\n border-radius: 6px;\n padding: 8px 10px;\n}\n.segmented {\n display: inline-flex;\n flex-wrap: wrap;\n align-self: flex-start;\n border: 1px solid var(--line);\n border-radius: 5px;\n overflow: hidden;\n}\n.segmented button {\n border: 0;\n background: transparent;\n padding: 2px 9px;\n font-size: 12px;\n color: var(--muted);\n min-height: 24px;\n}\n.segmented button + button {\n border-left: 1px solid var(--line);\n}\n.segmented button[aria-pressed=\"true\"] {\n background: var(--accent);\n color: var(--accent-text);\n}\n.thread-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.thread-list li + li {\n border-top: 1px solid var(--line);\n}\n.thread-list button {\n display: flex;\n flex-direction: column;\n gap: 1px;\n width: 100%;\n text-align: left;\n border: 0;\n background: transparent;\n padding: 6px 4px;\n}\n.thread-list button:hover,\n.thread-list button:focus-visible {\n background: color-mix(in srgb, var(--muted) 12%, transparent);\n}\n.thread-list .where {\n font-size: 11.5px;\n color: var(--muted);\n}\n.thread-list .first {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.flash {\n animation: flash 1.4s ease-out;\n}\n@keyframes flash {\n from {\n box-shadow: 0 0 0 3px var(--accent);\n }\n to {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .flash {\n animation: none;\n outline: 2px solid var(--accent);\n }\n}\n`;\n"]}
1
+ {"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/overlay/style.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,6EAA6E;AAC7E,6EAA6E;AAC7E,+EAA+E;AAC/E,kDAAkD;AAElD,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2jB1B,CAAC","sourcesContent":["// The overlay's stylesheet. It applies inside the overlay's shadow roots only,\n// so the page's styles don't reach the overlay and the overlay's don't reach\n// the page. Colors come from the page's --ascribe-review-* custom properties\n// (`marks.css` sets them, with light and dark values; a host can set its own),\n// which reach inside shadow roots by inheritance.\n\nexport const OVERLAY_CSS = `\n:host {\n all: initial;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: host, light. */\n --muted: var(--ascribe-review-muted, #676c75);\n --line: var(--ascribe-review-border, #e3e6ec);\n --thread: var(--ascribe-review-thread, #f7f9fd);\n --accent: var(--ascribe-review-focus, #5962e8);\n --accent-text: var(--ascribe-review-accent-text, #ffffff);\n --flash: var(--ascribe-review-flash, #fee9d0);\n --added: var(--ascribe-review-added, #057256);\n --changed: var(--ascribe-review-changed, #845502);\n --changed-background: var(--ascribe-review-changed-background, #fee9d0);\n --removed: var(--ascribe-review-removed, #ca3f02);\n --removed-background: var(--ascribe-review-removed-background, #fef4f1);\n --mono: var(--ascribe-review-mono, ui-monospace, monospace);\n font-family: var(--ascribe-review-font, system-ui, -apple-system, \"Segoe UI\", sans-serif);\n /* End of generated host. */\n --text: var(--ascribe-review-text, CanvasText);\n --surface: var(--ascribe-review-surface, Canvas);\n --input: var(--ascribe-review-input, var(--surface));\n font-size: 12.5px;\n line-height: 1.45;\n color: var(--text);\n}\n* {\n box-sizing: border-box;\n}\n[hidden] {\n display: none !important;\n}\nbutton,\ntextarea,\ninput {\n font: inherit;\n color: inherit;\n}\nbutton {\n cursor: pointer;\n}\nbutton:disabled,\nbutton[aria-disabled=\"true\"] {\n cursor: not-allowed;\n opacity: 0.5;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible,\n.thread:focus-visible {\n outline: 2px solid var(--accent);\n outline-offset: 1px;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n/* Buttons */\n.ghost {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n padding: 2px 8px;\n font-size: 12px;\n min-height: 24px;\n}\n.ghost:hover:not(:disabled):not([aria-disabled=\"true\"]) {\n border-color: var(--accent);\n color: var(--accent);\n}\n.primary {\n border: 1px solid var(--accent);\n background: var(--accent);\n color: var(--accent-text);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.danger {\n border: 1px solid var(--removed);\n background: var(--removed);\n color: var(--surface);\n border-radius: 5px;\n padding: 2px 10px;\n font-size: 12.5px;\n font-weight: 600;\n min-height: 24px;\n}\n.link {\n border: 0;\n background: transparent;\n color: var(--accent);\n padding: 0;\n font-size: inherit;\n text-align: inherit;\n}\na.link {\n text-decoration: none;\n}\n.link:hover {\n text-decoration: underline;\n}\n.hint {\n color: var(--muted);\n font-size: 11.5px;\n}\n.refuse,\n.error {\n color: var(--removed);\n font-size: 12px;\n}\n.spacer {\n flex: 1;\n}\n\n/* The layer over the page: the column, markers' panel, dialogs. */\n.layer {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.layer > *,\n.column > * {\n pointer-events: auto;\n}\n.column {\n position: absolute;\n top: 0;\n width: 250px;\n pointer-events: none;\n}\n.slot {\n position: absolute;\n left: 0;\n right: 0;\n}\n.slot > .thread,\n.slot > .composer {\n margin: 0 0 6px;\n}\n.slot.linked .thread,\n.slot.linked .composer {\n border-color: var(--accent);\n}\n.highlight {\n position: absolute;\n pointer-events: none;\n background: color-mix(in srgb, var(--flash) 55%, transparent);\n border-radius: 3px;\n /* Over the page's text, a tint that keeps the text as it was: multiplied\n on a light page, screened on a dark one. */\n mix-blend-mode: var(--ascribe-review-blend, multiply);\n}\nsvg.connector {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\nsvg.connector path {\n fill: none;\n stroke: var(--accent);\n stroke-width: 1.5;\n}\n\n/* The block tools: the Comment button, and the count marker at narrow widths. */\n.tool {\n border: 1px solid var(--line);\n background: var(--surface);\n border-radius: 5px;\n font-size: 11.5px;\n padding: 0 7px;\n min-height: 22px;\n color: var(--accent);\n white-space: nowrap;\n}\n.hint-count {\n margin-inline-start: 2px;\n font-size: 11px;\n font-weight: 600;\n color: var(--accent);\n}\n\n.marker {\n border: 1px solid var(--accent);\n background: var(--surface);\n color: var(--accent);\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n padding: 0 8px;\n min-width: 30px;\n min-height: 24px;\n}\n\n/* Threads */\n.thread {\n background: var(--thread);\n border: 1px solid var(--line);\n border-radius: 6px;\n margin: 6px 0 10px;\n}\n.th {\n display: flex;\n flex-wrap: wrap;\n gap: 3px 8px;\n align-items: center;\n padding: 5px 9px 2px;\n font-size: 11.5px;\n color: var(--muted);\n}\n.acts {\n display: flex;\n flex-wrap: wrap;\n gap: 2px 12px;\n padding: 0 9px 5px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n}\n.thread.collapsed .acts {\n border-bottom: 0;\n}\n.orig,\n.inside {\n padding: 5px 9px;\n border-bottom: 1px solid var(--line);\n font-size: 11.5px;\n color: var(--muted);\n}\n.orig q {\n color: var(--text);\n white-space: pre-wrap;\n}\n.badge {\n border-radius: 999px;\n padding: 0 7px;\n font-size: 10.5px;\n font-weight: 600;\n border: 1px solid currentColor;\n white-space: nowrap;\n}\n.badge.unsent {\n color: var(--changed);\n}\n.badge.resolved {\n color: var(--added);\n}\n.badge.outdated {\n color: var(--muted);\n}\n.badge.summary {\n color: var(--accent);\n}\n.badge.removed,\n.badge.detached {\n color: var(--removed);\n}\n.comment {\n display: grid;\n grid-template-columns: 22px minmax(0, 1fr);\n gap: 7px;\n padding: 6px 9px;\n}\n.comment + .comment {\n border-top: 1px dashed var(--line);\n}\n.avatar {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--accent-text);\n display: grid;\n place-items: center;\n font-size: 9.5px;\n font-weight: 700;\n}\n.who {\n font-weight: 600;\n}\n.when {\n color: var(--muted);\n font-size: 11px;\n margin-left: 6px;\n}\n.body {\n overflow-wrap: anywhere;\n}\n.body > :first-child {\n margin-top: 1px;\n}\n.body > :last-child {\n margin-bottom: 0;\n}\n.body p,\n.body ul,\n.body ol,\n.body blockquote,\n.body pre {\n margin: 4px 0;\n}\n.body ul,\n.body ol {\n padding-left: 18px;\n}\n.body blockquote {\n border-left: 3px solid var(--line);\n padding-left: 8px;\n color: var(--muted);\n}\n.body code,\n.thread-list .where code {\n font-family: var(--mono);\n font-size: 0.92em;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n padding: 0.05em 0.3em;\n border-radius: 3px;\n}\n.body pre {\n overflow-x: auto;\n padding: 6px 8px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--muted) 14%, transparent);\n}\n.body pre code {\n background: none;\n padding: 0;\n}\n.body a {\n color: var(--accent);\n}\n.reply {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 6px 9px 8px;\n border-top: 1px solid var(--line);\n}\n.reply textarea {\n flex: 1 1 100%;\n min-width: 80px;\n padding: 2px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n resize: vertical;\n field-sizing: content;\n min-height: 26px;\n max-height: 160px;\n}\n.reply .error,\n.reply .hint {\n flex-basis: 100%;\n}\n.composer {\n background: var(--thread);\n border: 1px solid var(--accent);\n border-radius: 6px;\n padding: 8px 10px;\n margin: 6px 0 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.composer textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.row {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* The detached list, above the page */\n.detached {\n margin: 12px 0;\n border: 1px dashed var(--line);\n border-radius: 6px;\n padding: 8px 10px 2px;\n color: var(--muted);\n max-width: 520px;\n}\n.detached .thread {\n color: var(--text);\n}\n\n/* The unsent bar, at the bottom */\n.unsent-bar {\n background: var(--changed-background);\n border-top: 1px solid var(--line);\n padding: 6px 10px;\n display: flex;\n flex-wrap: wrap;\n gap: 6px 10px;\n align-items: center;\n}\n.unsent-bar .hint {\n color: var(--text);\n font-size: 12px;\n}\n\n/* The panel for one block's threads, at narrow widths */\n.sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n max-height: 62vh;\n overflow: auto;\n background: var(--surface);\n border-top: 2px solid var(--accent);\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: sheet, light. */\n box-shadow: 0 -8px 24px rgb(0 0 0 / 0.22);\n /* End of generated sheet. */\n padding: 8px 12px 10px;\n z-index: 4;\n}\n.sheet .head {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 12px;\n color: var(--muted);\n}\n\n/* Dialogs */\n.backdrop {\n position: fixed;\n inset: 0;\n /* Generated from design/tokens.toml by scripts/design/tokens.ts: backdrop, light. */\n background: rgb(0 0 0 / 0.4);\n /* End of generated backdrop. */\n z-index: 8;\n display: grid;\n place-items: center;\n padding: 12px;\n}\n.dialog {\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 8px;\n width: min(480px, 100%);\n max-height: 100%;\n overflow: auto;\n padding: 12px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 13px;\n}\n.dialog h2 {\n margin: 0;\n font-size: 14px;\n}\n.dialog ul.unsent-list {\n margin: 0;\n padding-left: 18px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.dialog fieldset {\n border: 0;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 4px 14px;\n}\n.dialog textarea {\n width: 100%;\n min-height: 56px;\n resize: vertical;\n padding: 6px 8px;\n border: 1px solid var(--line);\n border-radius: 5px;\n background: var(--input);\n}\n.confirm {\n border: 1px solid var(--removed);\n background: var(--removed-background);\n border-radius: 6px;\n padding: 8px 10px;\n}\n.segmented {\n display: inline-flex;\n flex-wrap: wrap;\n align-self: flex-start;\n border: 1px solid var(--line);\n border-radius: 5px;\n overflow: hidden;\n}\n.segmented button {\n border: 0;\n background: transparent;\n padding: 2px 9px;\n font-size: 12px;\n color: var(--muted);\n min-height: 24px;\n}\n.segmented button + button {\n border-left: 1px solid var(--line);\n}\n.segmented button[aria-pressed=\"true\"] {\n background: var(--accent);\n color: var(--accent-text);\n}\n.thread-list {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.thread-list li + li {\n border-top: 1px solid var(--line);\n}\n.thread-list button {\n display: flex;\n flex-direction: column;\n gap: 1px;\n width: 100%;\n text-align: left;\n border: 0;\n background: transparent;\n padding: 6px 4px;\n}\n.thread-list button:hover,\n.thread-list button:focus-visible {\n background: color-mix(in srgb, var(--muted) 12%, transparent);\n}\n.thread-list .where {\n font-size: 11.5px;\n color: var(--muted);\n}\n.thread-list .first {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.flash {\n animation: flash 1.4s ease-out;\n}\n@keyframes flash {\n from {\n box-shadow: 0 0 0 3px var(--accent);\n }\n to {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .flash {\n animation: none;\n outline: 2px solid var(--accent);\n }\n}\n`;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ascribed/review",
3
- "version": "0.2.1-next.10",
3
+ "version": "0.2.1-next.11",
4
4
  "description": "Reviewing Ascribe pages as readers see them: changed blocks marked on the rendered page, and a pull request's review threads beside them.",
5
5
  "type": "module",
6
6
  "license": "MPL-2.0",
@@ -40,7 +40,7 @@
40
40
  "node": ">=24"
41
41
  },
42
42
  "devDependencies": {
43
- "@ascribed/elements": "0.2.1-next.10",
43
+ "@ascribed/elements": "0.2.1-next.11",
44
44
  "@types/node": "^24.0.0",
45
45
  "esbuild": "^0.28.2",
46
46
  "jsdom": "^30.1.1"
@@ -51,7 +51,7 @@
51
51
  "dependencies": {
52
52
  "smol-toml": "^1.9.0"
53
53
  },
54
- "gitHead": "737a7e8afe84147602ddbe83628c1d4dfcddaf90",
54
+ "gitHead": "dd64394135ff782efb8db030c81ac3b38e0f92c5",
55
55
  "scripts": {
56
56
  "build": "tsc -p tsconfig.build.json",
57
57
  "typecheck": "tsc --noEmit",
package/src/marks/marks.css CHANGED
@@ -12,69 +12,74 @@
12
12
  */
13
13
 
14
14
  :root {
15
- --ascribe-review-added: #1a7f37;
16
- --ascribe-review-added-background: #dcf7e3;
17
- --ascribe-review-changed: #8a5a00;
18
- --ascribe-review-changed-background: #fff1c2;
19
- --ascribe-review-removed: #c4222d;
20
- --ascribe-review-removed-background: #ffe4e2;
21
- --ascribe-review-moved: #7a3fd0;
22
- --ascribe-review-moved-background: #f0e6ff;
23
- --ascribe-review-muted: #5b6475;
15
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: root, light. */
16
+ --ascribe-review-added: #057256;
17
+ --ascribe-review-added-background: #c7fae5;
18
+ --ascribe-review-changed: #845502;
19
+ --ascribe-review-changed-background: #fee9d0;
20
+ --ascribe-review-removed: #ca3f02;
21
+ --ascribe-review-removed-background: #fef4f1;
22
+ --ascribe-review-moved: #932f8e;
23
+ --ascribe-review-moved-background: #fff2fd;
24
+ --ascribe-review-muted: #676c75;
24
25
  --ascribe-review-surface: #ffffff;
25
- --ascribe-review-flash: #fff6bf;
26
- --ascribe-review-focus: #1f6feb;
26
+ --ascribe-review-flash: #fee9d0;
27
+ --ascribe-review-focus: #5962e8;
27
28
  --ascribe-review-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
28
- /* The review overlay's threads and controls (@ascribed/review/overlay). */
29
- --ascribe-review-text: #1d2330;
30
- --ascribe-review-border: #d3d8e0;
31
- --ascribe-review-thread: #f5f7fb;
29
+ --ascribe-review-text: #22272e;
30
+ --ascribe-review-border: #e3e6ec;
31
+ --ascribe-review-thread: #f7f9fd;
32
32
  --ascribe-review-input: #ffffff;
33
33
  --ascribe-review-accent-text: #ffffff;
34
+ /* End of generated root. */
34
35
  --ascribe-review-blend: multiply;
35
36
  }
36
37
 
37
38
  @media (prefers-color-scheme: dark) {
38
39
  :root:not([data-ascribe-scheme="light"]) {
39
- --ascribe-review-added: #4fc572;
40
- --ascribe-review-added-background: #133520;
41
- --ascribe-review-changed: #dcb13a;
42
- --ascribe-review-changed-background: #3a2f0d;
43
- --ascribe-review-removed: #ff8279;
44
- --ascribe-review-removed-background: #401918;
45
- --ascribe-review-moved: #c59bff;
46
- --ascribe-review-moved-background: #2d2440;
47
- --ascribe-review-muted: #929bab;
48
- --ascribe-review-surface: #1e2026;
49
- --ascribe-review-flash: #3b3514;
50
- --ascribe-review-focus: #5aa2ff;
51
- --ascribe-review-text: #d9dde5;
52
- --ascribe-review-border: #343a45;
53
- --ascribe-review-thread: #272b33;
54
- --ascribe-review-input: #1e2026;
55
- --ascribe-review-accent-text: #0b1220;
40
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: root, dark. */
41
+ --ascribe-review-added: #22c598;
42
+ --ascribe-review-added-background: #003929;
43
+ --ascribe-review-changed: #e0992e;
44
+ --ascribe-review-changed-background: #432900;
45
+ --ascribe-review-removed: #fe7f57;
46
+ --ascribe-review-removed-background: #511b0a;
47
+ --ascribe-review-moved: #ffc8f9;
48
+ --ascribe-review-moved-background: #461c43;
49
+ --ascribe-review-muted: #a5a9b2;
50
+ --ascribe-review-surface: #0c0f16;
51
+ --ascribe-review-flash: #432900;
52
+ --ascribe-review-focus: #b3c0ff;
53
+ --ascribe-review-text: #f0f3f7;
54
+ --ascribe-review-border: #393d46;
55
+ --ascribe-review-thread: #13171f;
56
+ --ascribe-review-input: #0c0f16;
57
+ --ascribe-review-accent-text: #0c0f16;
58
+ /* End of generated root. */
56
59
  --ascribe-review-blend: screen;
57
60
  }
58
61
  }
59
62
 
60
63
  :root[data-ascribe-scheme="dark"] {
61
- --ascribe-review-added: #4fc572;
62
- --ascribe-review-added-background: #133520;
63
- --ascribe-review-changed: #dcb13a;
64
- --ascribe-review-changed-background: #3a2f0d;
65
- --ascribe-review-removed: #ff8279;
66
- --ascribe-review-removed-background: #401918;
67
- --ascribe-review-moved: #c59bff;
68
- --ascribe-review-moved-background: #2d2440;
69
- --ascribe-review-muted: #929bab;
70
- --ascribe-review-surface: #1e2026;
71
- --ascribe-review-flash: #3b3514;
72
- --ascribe-review-focus: #5aa2ff;
73
- --ascribe-review-text: #d9dde5;
74
- --ascribe-review-border: #343a45;
75
- --ascribe-review-thread: #272b33;
76
- --ascribe-review-input: #1e2026;
77
- --ascribe-review-accent-text: #0b1220;
64
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: root, dark. */
65
+ --ascribe-review-added: #22c598;
66
+ --ascribe-review-added-background: #003929;
67
+ --ascribe-review-changed: #e0992e;
68
+ --ascribe-review-changed-background: #432900;
69
+ --ascribe-review-removed: #fe7f57;
70
+ --ascribe-review-removed-background: #511b0a;
71
+ --ascribe-review-moved: #ffc8f9;
72
+ --ascribe-review-moved-background: #461c43;
73
+ --ascribe-review-muted: #a5a9b2;
74
+ --ascribe-review-surface: #0c0f16;
75
+ --ascribe-review-flash: #432900;
76
+ --ascribe-review-focus: #b3c0ff;
77
+ --ascribe-review-text: #f0f3f7;
78
+ --ascribe-review-border: #393d46;
79
+ --ascribe-review-thread: #13171f;
80
+ --ascribe-review-input: #0c0f16;
81
+ --ascribe-review-accent-text: #0c0f16;
82
+ /* End of generated root. */
78
83
  --ascribe-review-blend: screen;
79
84
  }
80
85