@inkbar/theme 0.4.0 → 0.6.0

package/README.md

@@ -20,7 +20,7 @@
 
 ---
 
-`@inkbar/theme` styles the viewer, toolbar controls, note threads and suggestion cards from `@inkbar/vue`, `@inkbar/react`, `@inkbar/svelte` and `createViewer` in `@inkbar/core`. Import it and ship, or override any part of it with your own CSS. If your app already defines shadcn tokens, the theme picks up your colours and radius.
+`@inkbar/theme` styles the viewer, toolbar controls and note threads from `@inkbar/vue`, `@inkbar/react`, `@inkbar/svelte` and `createViewer` in `@inkbar/core`. Import it and ship, or override any part of it with your own CSS. If your app already defines shadcn tokens, the theme picks up your colours and radius.
 
 ## Install
 
@@ -60,13 +60,12 @@ Colour tokens must hold complete CSS colour values. Tokens written as bare HSL c
 
 Set these variables on `[data-ink-root]` to change the default colour for new annotations:
 
-| Variable                                                                   | Used for                            |
-| -------------------------------------------------------------------------- | ----------------------------------- |
-| `--ink-highlight`, `--ink-underline`, `--ink-strikeout`, `--ink-squiggly`  | Text markup                         |
-| `--ink-note`, `--ink-free-text`                                            | Notes and text boxes                |
-| `--ink-shape`, `--ink-ink`                                                 | Shapes and freehand drawing         |
-| `--ink-redact`, `--ink-redact-fill`                                        | Redaction outline and fill          |
-| `--ink-suggestion-low`, `--ink-suggestion-medium`, `--ink-suggestion-high` | Suggested redactions, by confidence |
+| Variable                                                                  | Used for                    |
+| ------------------------------------------------------------------------- | --------------------------- |
+| `--ink-highlight`, `--ink-underline`, `--ink-strikeout`, `--ink-squiggly` | Text markup                 |
+| `--ink-note`, `--ink-free-text`                                           | Notes and text boxes        |
+| `--ink-shape`, `--ink-ink`                                                | Shapes and freehand drawing |
+| `--ink-redact`, `--ink-redact-fill`                                       | Redaction outline and fill  |
 
 Inkbar reads a colour when you create the annotation and stores it on the annotation, because the colour goes into the PDF. Changing a variable later affects new annotations only.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkbar/theme",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Default stylesheet for Inkbar. Zero specificity, so your CSS wins.",
   "license": "MIT",
   "homepage": "https://inkbar.dev",

package/theme.css

@@ -15,7 +15,7 @@
   :where(
     [data-ink-root],
     [data-ink-thread-popover],
-    [data-ink-suggestion-card],
+    [data-ink-popover],
     [data-ink-select-content],
     [data-ink-signature-dialog]
   ) {
@@ -29,9 +29,6 @@
     --ink-ink: #151820;
     --ink-redact: #c0392b;
     --ink-redact-fill: #000000;
-    --ink-suggestion-low: #d4a017;
-    --ink-suggestion-medium: #e67e22;
-    --ink-suggestion-high: #c0392b;
 
     --ink-bg: var(--muted, #f1f2f5);
     --ink-fg: var(--foreground, #151820);
@@ -52,7 +49,7 @@
     :where(
       [data-ink-root]:not(.light, .light *),
       [data-ink-thread-popover]:not(.light *),
-      [data-ink-suggestion-card]:not(.light *),
+      [data-ink-popover]:not(.light *),
       [data-ink-select-content]:not(.light *),
       [data-ink-signature-dialog]:not(.light *)
     ) {
@@ -73,7 +70,7 @@
     .dark [data-ink-root]:not(.light, .dark .light *),
     [data-ink-root].dark,
     .dark [data-ink-thread-popover]:not(.dark .light *),
-    .dark [data-ink-suggestion-card]:not(.dark .light *),
+    .dark [data-ink-popover]:not(.dark .light *),
     .dark [data-ink-select-content]:not(.dark .light *),
     .dark [data-ink-signature-dialog]:not(.dark .light *)
   ) {
@@ -244,10 +241,11 @@
     background: transparent;
   }
 
-  /* Tools: the active tool's cursor is set on the root; text spans follow it unless text is the target. */
+  /* Tools: the active tool's cursor is set on the root; page text follows it, except under
+     select text, where text is the target. */
   :where(
-    [data-ink-tool='redact-area'] .ink-text-layer span,
-    [data-ink-tool='note'] .ink-text-layer span
+    [data-ink-tool]:not([data-ink-tool='select-text']) .ink-text-layer span,
+    [data-ink-tool]:not([data-ink-tool='select-text']) .ink-text-layer br
   ) {
     cursor: inherit;
   }
@@ -280,7 +278,8 @@
     fill: none;
   }
 
-  /* Edit handles on a selected annotation: shown with the select tools only. */
+  /* Edit handles on a selected annotation: shown with the select tools, and on what a creation
+     tool just made (`data-ink-made`). */
   :where(.ink-handle) {
     box-sizing: border-box;
     border: 1px solid var(--ink-accent);
@@ -289,7 +288,11 @@
   }
 
   :where(
-    [data-ink-tool]:not([data-ink-tool='select'], [data-ink-tool='select-text'])
+    [data-ink-tool]:not(
+        [data-ink-tool='select'],
+        [data-ink-tool='select-text'],
+        [data-ink-made]
+      )
       .ink-handle
   ) {
     display: none;
@@ -303,9 +306,16 @@
     cursor: nesw-resize;
   }
 
+  :where(
+    .ink-handle[data-handle='start'],
+    .ink-handle[data-handle='end'],
+    .ink-handle[data-handle='callout']
+  ) {
+    cursor: crosshair;
+  }
+
   :where(.ink-handle[data-handle='start'], .ink-handle[data-handle='end']) {
     border-radius: 50%;
-    cursor: move;
   }
 
   /* Annotations */
@@ -313,23 +323,73 @@
     z-index: 1;
   }
 
+  /* Plugin layers sit over the overlay (after it, at the same level). Presses that miss a
+     plugin's marks go through to the annotations and tools underneath. */
+  :where(.ink-plugin-layer) {
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  :where(.ink-plugin-layer > *) {
+    pointer-events: auto;
+  }
+
   :where(.ink-annotation) {
     border-radius: 2px;
     outline: 1px solid transparent;
     outline-offset: 1px;
   }
 
+  /* An annotation's SVGs (its shape, and a text box's edge band over the text) cover its box. */
   :where(.ink-annotation:not([data-custom]) > svg) {
     position: absolute;
     left: 0;
     top: 0;
   }
 
+  /* Cursors say what a press will do: move an annotation, edit a text box's text, or (text
+     markup under select text) select text. Under rectangle select a press on text markup
+     selects and drags it, so it shows move there. The creation tools' cursor shows through
+     elsewhere. */
   :where(
     [data-ink-tool='select'] .ink-annotation,
-    [data-ink-tool='select-text'] .ink-annotation
+    [data-ink-tool='select-text'] .ink-annotation,
+    [data-ink-made] .ink-annotation[data-state='selected']
   ) {
-    cursor: pointer;
+    cursor: move;
+  }
+
+  :where(
+    [data-ink-tool='select-text']
+      .ink-annotation:is(
+        [data-type='highlight'],
+        [data-type='underline'],
+        [data-type='strikeout'],
+        [data-type='squiggly']
+      )
+  ) {
+    cursor: text;
+  }
+
+  :where(
+    [data-ink-tool='select'] .ink-annotation:not([data-locked]) .ink-free-text,
+    [data-ink-tool='select-text'] .ink-annotation:not([data-locked]) .ink-free-text,
+    [data-ink-made]
+      .ink-annotation[data-state='selected']:not([data-locked])
+      .ink-free-text
+  ) {
+    cursor: text;
+  }
+
+  /* The band along a text box's edge presses to move it, not to edit. */
+  :where(
+    [data-ink-tool='select'] .ink-annotation:not([data-locked]) [data-ink-edge],
+    [data-ink-tool='select-text'] .ink-annotation:not([data-locked]) [data-ink-edge],
+    [data-ink-made]
+      .ink-annotation[data-state='selected']:not([data-locked])
+      [data-ink-edge]
+  ) {
+    cursor: move;
   }
 
   :where(.ink-annotation[data-state='hover']) {
@@ -345,6 +405,13 @@
     cursor: default;
   }
 
+  /* While an annotation is moved the whole viewport shows it, over any element's own cursor.
+     The one rule here that is not zero specificity: it has to beat them. */
+  [data-ink-dragging],
+  [data-ink-dragging] * {
+    cursor: move !important;
+  }
+
   :where(.ink-annotation[data-locked][data-state='selected']) {
     outline-style: dotted;
   }
@@ -379,10 +446,6 @@
     outline-style: dotted;
   }
 
-  :where(.ink-annotation[data-origin='suggested'] .ink-annotation-shape > *) {
-    stroke-dasharray: 4 3;
-  }
-
   :where(.ink-note-icon) {
     position: absolute;
     left: 0;
@@ -537,6 +600,54 @@
     cursor: default;
   }
 
+  /*
+   * A plugin command button (createCommandButton): the button looks like a toolbar button
+   * wherever it sits, and its status text goes beside it.
+   */
+  :where(.ink-command) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  :where(.ink-command button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--ink-control-size, 2.25rem);
+    height: var(--ink-control-size, 2.25rem);
+    padding: 0 0.5rem;
+    border: 1px solid transparent;
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  :where(.ink-command button:hover) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  :where(.ink-command button:disabled, .ink-command button[aria-disabled='true']) {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  :where(.ink-command button[aria-busy='true']) {
+    cursor: progress;
+  }
+
+  :where(.ink-command button:focus-visible) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: 2px;
+  }
+
+  :where(.ink-command-status) {
+    opacity: 0.75;
+    font-size: 0.875rem;
+  }
+
   :where(.ink-toolbar input) {
     box-sizing: border-box;
     height: var(--ink-control-size, 2.25rem);
@@ -870,16 +981,48 @@
     border-color: var(--ink-border);
   }
 
-  /* Shape menu: a split button, the tool part beside a narrow chevron. */
+  /*
+   * Split buttons (shape, highlight, signature): one control with two parts, the tool button
+   * beside a narrow chevron. Hovering either part tints the whole control and the part under
+   * the pointer a shade more; with the tool on, both parts take the accent. Plain sibling
+ * selectors, not :has(), which costs frames on long documents.
+   */
   :where(.ink-split-button) {
     display: inline-flex;
     align-items: stretch;
+    border-radius: calc(var(--ink-radius) - 2px);
+  }
+
+  :where(.ink-split-button > .ink-tool-button) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
-  :where(.ink-split-button .ink-menu-trigger) {
+  :where(.ink-split-button > .ink-menu-trigger) {
     min-width: 0;
     width: 1.25rem;
     padding-inline: 0.125rem;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :where(.ink-split-button:hover) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  /* The tool button's on state already takes the accent; the chevron beside it follows. */
+  :where(.ink-split-button > .ink-tool-button[data-state='on'] + .ink-menu-trigger) {
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+    /* The line between the parts, only while the accent fills both. */
+    box-shadow: inset 1px 0 color-mix(in srgb, var(--ink-accent-fg) 35%, transparent);
+  }
+
+  :where(
+    .ink-split-button > .ink-tool-button[data-state='on']:hover,
+    .ink-split-button > .ink-tool-button[data-state='on'] + .ink-menu-trigger:hover
+  ) {
+    background: color-mix(in srgb, var(--ink-accent-fg) 16%, var(--ink-accent));
   }
 
   :where(.ink-shape-grid) {
@@ -910,12 +1053,54 @@
     padding-right: 0.5rem;
   }
 
+  /*
+   * The colour row reads as one more item: the swatch sits in the icon column and "Colour" in
+   * the label column. The colour menu's trigger covers the whole row, so the row is the target;
+   * the label shows through it.
+   */
   :where(.ink-highlight-colour) {
+    position: relative;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-highlight-colour-label) {
+    padding: 0.375rem 0.5rem 0.375rem 2rem;
+  }
+
+  :where(.ink-highlight-colour > .ink-menu-trigger) {
+    position: absolute;
+    inset: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: auto;
+    min-width: 0;
+    height: auto;
+    padding: 0 0.5rem;
+    border: 0;
+    border-radius: calc(var(--ink-radius) - 4px);
+    background: transparent;
+  }
+
+  :where(
+    .ink-highlight-colour > .ink-menu-trigger:hover,
+    .ink-highlight-colour > .ink-menu-trigger:focus-visible,
+    .ink-highlight-colour > .ink-menu-trigger[data-state='open']
+  ) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  /* A markup colour is a fill, so its swatch is a disc, not the border ring. */
+  :where(.ink-highlight-colour .ink-swatch) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  :where(.ink-highlight-colour .ink-swatch[data-kind='color']) {
+    border: 1px solid color-mix(in srgb, var(--ink-fg) 20%, transparent);
+    background: var(--ink-swatch);
   }
 
   /* Stamps: an image filling its box; the overlay sets its geometry and opacity. */
@@ -1159,8 +1344,8 @@
     outline-offset: 2px;
   }
 
-  /* Comment threads and suggestion cards */
-  :where(.ink-thread-popover, .ink-suggestion-card) {
+  /* Comment threads */
+  :where(.ink-thread-popover) {
     z-index: 50;
     width: 20rem;
     max-width: calc(100vw - 1rem);
@@ -1216,13 +1401,13 @@
     resize: vertical;
   }
 
-  :where(.ink-thread-actions, .ink-suggestion-actions) {
+  :where(.ink-thread-actions) {
     display: flex;
     gap: 0.375rem;
     margin-top: 0.5rem;
   }
 
-  :where(.ink-thread-actions button, .ink-suggestion-actions button) {
+  :where(.ink-thread-actions button) {
     padding: 0.375rem 0.75rem;
     border: 1px solid var(--ink-border);
     border-radius: calc(var(--ink-radius) - 2px);
@@ -1232,75 +1417,98 @@
     cursor: pointer;
   }
 
-  :where(
-    .ink-thread-actions button[type='submit'],
-    .ink-suggestion-actions button:first-child
-  ) {
+  :where(.ink-thread-actions button[type='submit']) {
     border-color: var(--ink-accent);
     background: var(--ink-accent);
     color: var(--ink-accent-fg);
   }
 
-  :where(.ink-select-item:focus-visible) {
-    outline: none;
-  }
-
-  :where(.ink-thread-actions button:disabled) {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  :where(
-    .ink-toolbar button:focus-visible,
-    .ink-toolbar select:focus-visible,
-    .ink-select-trigger:focus-visible,
-    .ink-toolbar input:focus-visible,
-    .ink-thread-actions button:focus-visible,
-    .ink-suggestion-actions button:focus-visible,
-    .ink-thread-reply textarea:focus-visible
-  ) {
-    outline: 2px solid var(--ink-ring);
-    outline-offset: 2px;
+  /* Plugin cards: the card a plugin mark opens, a core popover like the thread's. */
+  :where(.ink-card) {
+    z-index: 50;
+    width: 20rem;
+    max-width: calc(100vw - 1rem);
+    padding: 0.75rem;
+    border: 1px solid var(--ink-border);
+    border-radius: var(--ink-radius);
+    background: var(--ink-surface);
+    color: var(--ink-fg);
+    box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
+    font-size: 0.875rem;
   }
 
-  :where(.ink-suggestion-reason, .ink-suggestion-explanation) {
+  :where(.ink-card-title, .ink-card-meta, .ink-card-body) {
     margin: 0;
   }
 
-  :where(.ink-suggestion-explanation) {
-    margin-top: 0.25rem;
-    color: var(--ink-muted-fg);
+  :where(.ink-card-title) {
+    font-weight: 600;
   }
 
-  /* The label text keeps the body colour for contrast; the confidence colour is a swatch. */
-  :where(.ink-suggestion-confidence) {
-    display: inline-flex;
+  /* The meta line keeps the body colour for contrast; any colour of its own is the swatch. */
+  :where(.ink-card-meta) {
+    display: flex;
     align-items: center;
     gap: 0.375rem;
-    margin-left: 0.5rem;
-    color: var(--ink-fg);
+    margin-top: 0.125rem;
     font-size: 0.75rem;
-    text-transform: capitalize;
   }
 
-  :where(.ink-suggestion-confidence)::before {
-    content: '';
+  :where(.ink-card-swatch) {
+    flex: none;
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
-    background: currentColor;
   }
 
-  :where(.ink-suggestion-confidence[data-confidence='low'])::before {
-    background: var(--ink-suggestion-low);
+  :where(.ink-card-body) {
+    margin-top: 0.25rem;
+    color: var(--ink-muted-fg);
   }
 
-  :where(.ink-suggestion-confidence[data-confidence='medium'])::before {
-    background: var(--ink-suggestion-medium);
+  :where(.ink-card-actions) {
+    display: flex;
+    gap: 0.375rem;
+    margin-top: 0.5rem;
   }
 
-  :where(.ink-suggestion-confidence[data-confidence='high'])::before {
-    background: var(--ink-suggestion-high);
+  :where(.ink-card-actions button) {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: var(--ink-surface);
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  /* The first action is the primary one. */
+  :where(.ink-card-actions button:first-child) {
+    border-color: var(--ink-accent);
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+  }
+
+  :where(.ink-select-item:focus-visible) {
+    outline: none;
+  }
+
+  :where(.ink-thread-actions button:disabled) {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  :where(
+    .ink-toolbar button:focus-visible,
+    .ink-toolbar select:focus-visible,
+    .ink-select-trigger:focus-visible,
+    .ink-toolbar input:focus-visible,
+    .ink-thread-actions button:focus-visible,
+    .ink-thread-reply textarea:focus-visible,
+    .ink-card-actions button:focus-visible
+  ) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: 2px;
   }
 
   @media (prefers-reduced-motion: no-preference) {