@inkbar/theme 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Redactr Platforms Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,79 @@
-# Temporary Holding Version
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/inkbar/inkbar/main/.github/assets/inkbar-mark-on-dark.svg">
+    <img src="https://raw.githubusercontent.com/inkbar/inkbar/main/.github/assets/inkbar-mark-on-light.svg" alt="Inkbar" width="72" height="72">
+  </picture>
+</p>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<h1 align="center">@inkbar/theme</h1>
+
+<p align="center">
+  The default look for Inkbar: one stylesheet, no JavaScript.
+</p>
+
+<p align="center">
+  <a href="https://inkbar.dev">Website</a> ·
+  <a href="https://inkbar.dev/docs/">Docs</a> ·
+  <a href="https://sandbox.inkbar.dev">Sandbox</a> ·
+  <a href="https://github.com/inkbar/inkbar">GitHub</a>
+</p>
+
+---
+
+`@inkbar/theme` styles the viewer, toolbar, 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.
+
+## Install
+
+```sh
+pnpm add @inkbar/theme
+```
+
+Import the stylesheet once in your app:
+
+```ts
+import '@inkbar/theme/theme.css'
+```
+
+Every rule sits in `@layer inkbar` and inside `:where()`, so each selector has zero specificity. Your unlayered CSS overrides it without `!important`.
+
+## Layer order
+
+Cascade layers win by order, whatever the specificity. The browser orders layers by first appearance, so if your stylesheet declares its own layers before this file loads, `inkbar` comes later and beats them. Declare `inkbar` first, at the top of your main stylesheet:
+
+```css
+@layer inkbar, utilities;
+```
+
+Put `inkbar` ahead of your own layer names, and your utility classes override the theme.
+
+## Tokens
+
+The stylesheet is compatible with shadcn token names. It reads `--background`, `--foreground`, `--muted`, `--muted-foreground`, `--border`, `--primary`, `--primary-foreground`, `--ring` and `--radius` when your page defines them, and uses its own values when it does not. Dark values apply under `prefers-color-scheme: dark` or inside a `.dark` ancestor. Add `.light` to the root or an ancestor to keep the light values, including inside a `.dark` ancestor.
+
+Colour tokens must hold complete CSS colour values. Tokens written as bare HSL channels (`--muted: 210 40% 96%`) do not work. Write the full colour instead:
+
+```css
+--muted: hsl(210 40% 96%);
+```
+
+## Annotation colours
+
+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 |
+
+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.
+
+## Layout
+
+The root and viewport fill their parent as a column, and the scroll area takes the remaining height. Give the parent a height and the document scrolls inside it.
+
+## Licence
+
+[MIT](https://github.com/inkbar/inkbar/blob/main/LICENSE). From the team behind [Redactr](https://redactr.io).

package/package.json

@@ -1,6 +1,36 @@
 {
   "name": "@inkbar/theme",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Default stylesheet for Inkbar. Zero specificity, so your CSS wins.",
+  "license": "MIT",
+  "homepage": "https://inkbar.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/inkbar/inkbar.git",
+    "directory": "packages/theme"
+  },
+  "bugs": "https://github.com/inkbar/inkbar/issues",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "theme.css",
+    "README.md"
+  ],
+  "exports": {
+    "./theme.css": "./theme.css",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "postcss": "^8.5.0",
+    "postcss-selector-parser": "^7.1.0",
+    "vitest": "^5.0.4"
+  },
+  "scripts": {
+    "build": "echo skip",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "lint": "eslint . && prettier --check theme.css",
+    "test": "vitest run"
+  }
 }

package/theme.css

@@ -0,0 +1,575 @@
+/*
+ * Inkbar default theme.
+ *
+ * Every rule sits in @layer inkbar and every selector is wrapped in :where(), so any rule of
+ * yours wins without !important. Interface colours read shadcn token names (--background,
+ * --foreground, --muted, --border, --primary, --radius) and fall back to Inkbar's own values
+ * when the page does not define them.
+ *
+ * Annotation colours (--ink-highlight and the rest) are read once, when an annotation is
+ * created, and stored on it, because they are written into the PDF. Changing them restyles
+ * new annotations only.
+ */
+@layer inkbar {
+  /* Tokens. Popovers are portalled out of the root, so they carry the tokens too. */
+  :where([data-ink-root], [data-ink-note-popover], [data-ink-suggestion-card]) {
+    --ink-highlight: #f2c230;
+    --ink-underline: #2b5a9e;
+    --ink-strikeout: #c0392b;
+    --ink-squiggly: #1f7a4d;
+    --ink-note: #f2c230;
+    --ink-free-text: #151820;
+    --ink-shape: #c0392b;
+    --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);
+    --ink-muted-fg: var(--muted-foreground, #5a6170);
+    --ink-surface: var(--background, #ffffff);
+    --ink-border: var(--border, #dce0e7);
+    --ink-accent: var(--primary, #151820);
+    --ink-accent-fg: var(--primary-foreground, #ffffff);
+    --ink-ring: var(--ring, #2b5a9e);
+    --ink-radius: var(--radius, 0.5rem);
+    --ink-page-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+    --ink-text-selection: color-mix(in srgb, AccentColor, transparent 50%);
+
+    color: var(--ink-fg);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :where(
+      [data-ink-root]:not(.light, .light *),
+      [data-ink-note-popover]:not(.light *),
+      [data-ink-suggestion-card]:not(.light *)
+    ) {
+      --ink-bg: var(--muted, #0f1217);
+      --ink-fg: var(--foreground, #e6e9ef);
+      --ink-muted-fg: var(--muted-foreground, #9aa1ae);
+      --ink-surface: var(--background, #161a21);
+      --ink-border: var(--border, #2a303b);
+      --ink-accent: var(--primary, #e6e9ef);
+      --ink-accent-fg: var(--primary-foreground, #151820);
+      --ink-ring: var(--ring, #7aa5e6);
+      --ink-page-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
+    }
+  }
+
+  /* A .light element inside a .dark one keeps the light values. */
+  :where(
+    .dark [data-ink-root]:not(.light, .dark .light *),
+    [data-ink-root].dark,
+    .dark [data-ink-note-popover]:not(.dark .light *),
+    .dark [data-ink-suggestion-card]:not(.dark .light *)
+  ) {
+    --ink-bg: var(--muted, #0f1217);
+    --ink-fg: var(--foreground, #e6e9ef);
+    --ink-muted-fg: var(--muted-foreground, #9aa1ae);
+    --ink-surface: var(--background, #161a21);
+    --ink-border: var(--border, #2a303b);
+    --ink-accent: var(--primary, #e6e9ef);
+    --ink-accent-fg: var(--primary-foreground, #151820);
+    --ink-ring: var(--ring, #7aa5e6);
+    --ink-page-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
+  }
+
+  /* Layout: root and viewport fill their parent; the scroll area takes the space left over. */
+  :where([data-ink-root]) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
+
+  :where([data-ink-viewport-root]) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    height: 100%;
+    min-height: 0;
+  }
+
+  :where(.ink-scroll) {
+    flex: 1 1 auto;
+    min-height: 0;
+    background: var(--ink-bg);
+    outline-offset: -2px;
+  }
+
+  :where(.ink-scroll:focus-visible) {
+    outline: 2px solid var(--ink-ring);
+  }
+
+  :where(.ink-page) {
+    background: #ffffff;
+    box-shadow: var(--ink-page-shadow);
+  }
+
+  /* Loading, error and empty states cover the scroll area. */
+  :where(.ink-status) {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-content: center;
+    gap: 0.25rem;
+    padding: 1rem;
+    text-align: center;
+    background: var(--ink-bg);
+  }
+
+  :where(.ink-error-title) {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  :where(.ink-error-code) {
+    margin-right: 0.5rem;
+    font-family: ui-monospace, monospace;
+    font-size: 0.8rem;
+    color: var(--ink-muted-fg);
+  }
+
+  /* A page that failed to render: covers that page only. */
+  :where(.ink-page-error) {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: grid;
+    place-content: center;
+    gap: 0.25rem;
+    padding: 1rem;
+    text-align: center;
+    color: var(--ink-fg);
+    background: var(--ink-surface);
+  }
+
+  :where(.ink-page-error p) {
+    margin: 0;
+  }
+
+  /*
+   * Text layer: the .textLayer rules from pdfjs-dist 6.4.299 web/pdf_viewer.css, renamed to
+   * .ink-text-layer. PDF.js sizes the layer from --total-scale-factor (set on the page) and
+   * --scale-round-x/y, writes --font-height, --scale-x and --rotate on each span and
+   * data-main-rotation on the layer. These rules turn those into the final layout.
+   */
+  :where(.ink-text-layer) {
+    --scale-round-x: 1px;
+    --scale-round-y: 1px;
+    --min-font-size: 1;
+    --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+    --min-font-size-inv: calc(1 / var(--min-font-size));
+
+    color-scheme: only light;
+    overflow: clip;
+    opacity: 1;
+    text-align: initial;
+    line-height: 1;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-size-adjust: none;
+    forced-color-adjust: none;
+    transform-origin: 0 0;
+    caret-color: CanvasText;
+    z-index: 0;
+  }
+
+  :where(.ink-text-layer span, .ink-text-layer br) {
+    color: transparent;
+    position: absolute;
+    white-space: pre;
+    cursor: text;
+    transform-origin: 0% 0%;
+    user-select: text;
+  }
+
+  :where(
+    .ink-text-layer > :not(.markedContent),
+    .ink-text-layer .markedContent span:not(.markedContent)
+  ) {
+    --font-height: 0;
+    --scale-x: 1;
+    --rotate: 0deg;
+
+    z-index: 1;
+    font-size: calc(var(--text-scale-factor) * var(--font-height));
+    transform: rotate(var(--rotate)) scaleX(var(--scale-x))
+      scale(var(--min-font-size-inv));
+  }
+
+  :where(.ink-text-layer .markedContent) {
+    display: contents;
+  }
+
+  :where(.ink-text-layer span[role='img']) {
+    user-select: none;
+    cursor: default;
+  }
+
+  :where(.ink-text-layer[data-main-rotation='90']) {
+    transform: rotate(90deg) translateY(-100%);
+  }
+
+  :where(.ink-text-layer[data-main-rotation='180']) {
+    transform: rotate(180deg) translate(-100%, -100%);
+  }
+
+  :where(.ink-text-layer[data-main-rotation='270']) {
+    transform: rotate(270deg) translateX(-100%);
+  }
+
+  :where(.ink-text-layer span)::selection {
+    background: var(--ink-text-selection, rgb(0 0 255 / 0.25));
+    color: transparent;
+  }
+
+  :where(.ink-text-layer br)::selection {
+    background: transparent;
+  }
+
+  /* Tools: the active tool's cursor is set on the root; text spans follow it unless text is the target. */
+  :where(
+    [data-ink-tool='redact-area'] .ink-text-layer span,
+    [data-ink-tool='note'] .ink-text-layer span
+  ) {
+    cursor: inherit;
+  }
+
+  :where(.ink-draft, .ink-marquee) {
+    border: 1px dashed var(--ink-accent);
+    background: color-mix(in srgb, var(--ink-accent) 10%, transparent);
+  }
+
+  :where(.ink-draft[data-ink-draft='redact']) {
+    border-color: var(--ink-redact);
+    background: color-mix(in srgb, var(--ink-redact) 15%, transparent);
+  }
+
+  /* Resize handles on a selected area mark, text box or shape: shown with the select tool only. */
+  :where(.ink-handle) {
+    box-sizing: border-box;
+    border: 1px solid var(--ink-accent);
+    border-radius: 1px;
+    background: var(--ink-surface);
+  }
+
+  :where([data-ink-tool]:not([data-ink-tool='select']) .ink-handle) {
+    display: none;
+  }
+
+  :where(.ink-handle[data-handle='nw'], .ink-handle[data-handle='se']) {
+    cursor: nwse-resize;
+  }
+
+  :where(.ink-handle[data-handle='ne'], .ink-handle[data-handle='sw']) {
+    cursor: nesw-resize;
+  }
+
+  /* Annotations */
+  :where(.ink-overlay) {
+    z-index: 1;
+  }
+
+  :where(.ink-annotation) {
+    border-radius: 2px;
+    outline: 1px solid transparent;
+    outline-offset: 1px;
+  }
+
+  :where(.ink-annotation:not([data-custom]) > svg) {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  :where(
+    [data-ink-tool='select'] .ink-annotation,
+    [data-ink-tool='view'] .ink-annotation
+  ) {
+    cursor: pointer;
+  }
+
+  :where(.ink-annotation[data-state='hover']) {
+    outline-color: color-mix(in srgb, var(--ink-ring) 50%, transparent);
+  }
+
+  :where(.ink-annotation[data-state='selected'], .ink-annotation:focus-visible) {
+    outline: 2px solid var(--ink-ring);
+  }
+
+  /* Locked annotations can be selected but not moved or deleted. */
+  :where(.ink-annotation[data-locked]) {
+    cursor: default;
+  }
+
+  :where(.ink-annotation[data-locked][data-state='selected']) {
+    outline-style: dotted;
+  }
+
+  :where(.ink-annotation[data-origin='suggested'] .ink-annotation-shape > *) {
+    stroke-dasharray: 4 3;
+  }
+
+  :where(.ink-note-icon) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 3px 3px 3px 0;
+    background: var(--ink-note);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
+    pointer-events: none;
+  }
+
+  :where(.ink-free-text) {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-family: var(--ink-font-family, Helvetica), Helvetica, Arial, sans-serif;
+    font-size: var(--ink-font-size);
+    line-height: 1.2;
+    color: var(--ink-text-color, var(--ink-free-text));
+    opacity: var(--ink-opacity, 1);
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  }
+
+  :where(.ink-free-text[data-align='left']) {
+    text-align: left;
+  }
+
+  :where(.ink-free-text[data-align='center']) {
+    text-align: center;
+  }
+
+  :where(.ink-free-text[data-align='right']) {
+    text-align: right;
+  }
+
+  /* Toolbar */
+  :where(.ink-toolbar) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    background: var(--ink-surface);
+    color: var(--ink-fg);
+    border-bottom: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-toolbar-group) {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+  }
+
+  :where(.ink-toolbar-group + .ink-toolbar-group) {
+    padding-left: 0.5rem;
+    border-left: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-toolbar button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    height: 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-toolbar button:hover) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  :where(.ink-toolbar button[data-state='on']) {
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+  }
+
+  :where(.ink-toolbar button:disabled) {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  :where(.ink-toolbar select, .ink-toolbar input) {
+    height: 2.25rem;
+    padding: 0 0.5rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: var(--ink-surface);
+    color: inherit;
+    font: inherit;
+  }
+
+  :where(.ink-page-input) {
+    width: 4rem;
+    text-align: center;
+  }
+
+  :where(.ink-page-count) {
+    padding: 0 0.25rem;
+    color: var(--ink-muted-fg);
+    font-size: 0.875rem;
+  }
+
+  /* Note threads and suggestion cards */
+  :where(.ink-note-popover, .ink-suggestion-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-thread) {
+    display: grid;
+    gap: 0.5rem;
+    max-height: 16rem;
+    margin: 0 0 0.5rem;
+    padding: 0;
+    overflow: auto;
+    list-style: none;
+  }
+
+  :where(.ink-thread-item[data-reply]) {
+    margin-left: 0.75rem;
+    padding-left: 0.5rem;
+    border-left: 2px solid var(--ink-border);
+  }
+
+  :where(.ink-thread-author) {
+    font-weight: 600;
+  }
+
+  :where(.ink-thread-time) {
+    margin-left: 0.5rem;
+    color: var(--ink-muted-fg);
+    font-size: 0.75rem;
+  }
+
+  :where(.ink-thread-text) {
+    margin: 0.125rem 0 0;
+    white-space: pre-wrap;
+  }
+
+  :where(.ink-thread-reply textarea) {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0.375rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: var(--ink-surface);
+    color: inherit;
+    font: inherit;
+    resize: vertical;
+  }
+
+  :where(.ink-thread-actions, .ink-suggestion-actions) {
+    display: flex;
+    gap: 0.375rem;
+    margin-top: 0.5rem;
+  }
+
+  :where(.ink-thread-actions button, .ink-suggestion-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;
+  }
+
+  :where(
+    .ink-thread-actions button[type='submit'],
+    .ink-suggestion-actions button:first-child
+  ) {
+    border-color: var(--ink-accent);
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+  }
+
+  :where(.ink-thread-actions button:disabled) {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  :where(
+    .ink-toolbar button:focus-visible,
+    .ink-toolbar select: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;
+  }
+
+  :where(.ink-suggestion-reason, .ink-suggestion-explanation) {
+    margin: 0;
+  }
+
+  :where(.ink-suggestion-explanation) {
+    margin-top: 0.25rem;
+    color: var(--ink-muted-fg);
+  }
+
+  /* The label text keeps the body colour for contrast; the confidence colour is a swatch. */
+  :where(.ink-suggestion-confidence) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin-left: 0.5rem;
+    color: var(--ink-fg);
+    font-size: 0.75rem;
+    text-transform: capitalize;
+  }
+
+  :where(.ink-suggestion-confidence)::before {
+    content: '';
+    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-suggestion-confidence[data-confidence='medium'])::before {
+    background: var(--ink-suggestion-medium);
+  }
+
+  :where(.ink-suggestion-confidence[data-confidence='high'])::before {
+    background: var(--ink-suggestion-high);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.ink-annotation) {
+      transition: outline-color 120ms ease;
+    }
+  }
+}