@inkbar/theme 0.3.0 → 0.4.0

package/package.json

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

package/theme.css

@@ -14,9 +14,10 @@
   /* Tokens. Popovers are portalled out of the root, so they carry the tokens too. */
   :where(
     [data-ink-root],
-    [data-ink-note-popover],
+    [data-ink-thread-popover],
     [data-ink-suggestion-card],
-    [data-ink-select-content]
+    [data-ink-select-content],
+    [data-ink-signature-dialog]
   ) {
     --ink-highlight: #f2c230;
     --ink-underline: #2b5a9e;
@@ -50,9 +51,10 @@
   @media (prefers-color-scheme: dark) {
     :where(
       [data-ink-root]:not(.light, .light *),
-      [data-ink-note-popover]:not(.light *),
+      [data-ink-thread-popover]:not(.light *),
       [data-ink-suggestion-card]:not(.light *),
-      [data-ink-select-content]:not(.light *)
+      [data-ink-select-content]:not(.light *),
+      [data-ink-signature-dialog]:not(.light *)
     ) {
       --ink-bg: var(--muted, #0f1217);
       --ink-fg: var(--foreground, #e6e9ef);
@@ -70,9 +72,10 @@
   :where(
     .dark [data-ink-root]:not(.light, .dark .light *),
     [data-ink-root].dark,
-    .dark [data-ink-note-popover]:not(.dark .light *),
+    .dark [data-ink-thread-popover]:not(.dark .light *),
     .dark [data-ink-suggestion-card]:not(.dark .light *),
-    .dark [data-ink-select-content]:not(.dark .light *)
+    .dark [data-ink-select-content]:not(.dark .light *),
+    .dark [data-ink-signature-dialog]:not(.dark .light *)
   ) {
     --ink-bg: var(--muted, #0f1217);
     --ink-fg: var(--foreground, #e6e9ef);
@@ -259,7 +262,25 @@
     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. */
+  /* The shape draft's box is only its bounds; the outline is the SVG inside it. */
+  :where(.ink-draft[data-ink-draft='shape']) {
+    border: 0;
+    background: none;
+  }
+
+  :where(.ink-draft[data-ink-draft='shape'] svg) {
+    display: block;
+    stroke: var(--ink-accent);
+    stroke-width: 1.5;
+    stroke-dasharray: 4 3;
+    fill: color-mix(in srgb, var(--ink-accent) 10%, transparent);
+  }
+
+  :where(.ink-draft[data-ink-draft='shape'] polyline) {
+    fill: none;
+  }
+
+  /* Edit handles on a selected annotation: shown with the select tools only. */
   :where(.ink-handle) {
     box-sizing: border-box;
     border: 1px solid var(--ink-accent);
@@ -267,7 +288,10 @@
     background: var(--ink-surface);
   }
 
-  :where([data-ink-tool]:not([data-ink-tool='select']) .ink-handle) {
+  :where(
+    [data-ink-tool]:not([data-ink-tool='select'], [data-ink-tool='select-text'])
+      .ink-handle
+  ) {
     display: none;
   }
 
@@ -279,6 +303,11 @@
     cursor: nesw-resize;
   }
 
+  :where(.ink-handle[data-handle='start'], .ink-handle[data-handle='end']) {
+    border-radius: 50%;
+    cursor: move;
+  }
+
   /* Annotations */
   :where(.ink-overlay) {
     z-index: 1;
@@ -298,7 +327,7 @@
 
   :where(
     [data-ink-tool='select'] .ink-annotation,
-    [data-ink-tool='view'] .ink-annotation
+    [data-ink-tool='select-text'] .ink-annotation
   ) {
     cursor: pointer;
   }
@@ -320,6 +349,36 @@
     outline-style: dotted;
   }
 
+  /* A free text inset by a fringe outlines its text box, where its corner handles sit, not
+     the whole rect with its callout. */
+  :where(.ink-annotation[data-framed]) {
+    outline-color: transparent;
+  }
+
+  :where(.ink-selection-frame) {
+    border-radius: 2px;
+    outline: 1px solid transparent;
+    outline-offset: 1px;
+  }
+
+  :where(.ink-annotation[data-framed][data-state='hover'] > .ink-selection-frame) {
+    outline-color: color-mix(in srgb, var(--ink-ring) 50%, transparent);
+  }
+
+  :where(
+    .ink-annotation[data-framed][data-state='selected'] > .ink-selection-frame,
+    .ink-annotation[data-framed]:focus-visible > .ink-selection-frame
+  ) {
+    outline: 2px solid var(--ink-ring);
+  }
+
+  :where(
+    .ink-annotation[data-framed][data-locked][data-state='selected']
+      > .ink-selection-frame
+  ) {
+    outline-style: dotted;
+  }
+
   :where(.ink-annotation[data-origin='suggested'] .ink-annotation-shape > *) {
     stroke-dasharray: 4 3;
   }
@@ -337,19 +396,58 @@
     pointer-events: none;
   }
 
+  /* Commented text markup: a comment glyph at the markup's end. */
+  :where(.ink-comment-marker) {
+    position: absolute;
+    display: grid;
+    place-items: center;
+    width: 14px;
+    height: 14px;
+    translate: -25% -75%;
+    border-radius: 4px;
+    background: var(--ink-surface);
+    color: var(--ink-accent);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
+    pointer-events: none;
+  }
+
+  :where(.ink-comment-marker > svg) {
+    width: 10px;
+    height: 10px;
+  }
+
   :where(.ink-free-text) {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     overflow: hidden;
     font-family: var(--ink-font-family, Helvetica), Helvetica, Arial, sans-serif;
     font-size: var(--ink-font-size);
+    font-weight: var(--ink-font-weight, normal);
+    font-style: var(--ink-font-style, normal);
+    text-decoration: var(--ink-text-decoration, none);
     line-height: 1.2;
     color: var(--ink-text-color, var(--ink-free-text));
+    background: var(--ink-fill, transparent);
+    border-radius: var(--ink-corner-radius, 0);
     opacity: var(--ink-opacity, 1);
     overflow-wrap: break-word;
     white-space: pre-wrap;
   }
 
+  :where(.ink-free-text[data-border]) {
+    border: var(--ink-border-width, 1px) solid var(--ink-box-border, var(--ink-free-text));
+  }
+
+  :where(.ink-free-text[data-border='dashed']) {
+    border-style: dashed;
+  }
+
+  /* A speech bubble's outline is the path beside the text, so the text only needs room inside it. */
+  :where(.ink-free-text[data-bubble]) {
+    padding: 0.4em 0.6em;
+  }
+
   :where(.ink-free-text[data-align='left']) {
     text-align: left;
   }
@@ -362,6 +460,19 @@
     text-align: right;
   }
 
+  :where(.ink-free-text[data-align='justify']) {
+    text-align: justify;
+  }
+
+  /* The in-place editor grows with its text, and shows where the box is while it is empty. */
+  :where(.ink-free-text[data-ink-editor]) {
+    height: auto;
+    overflow: visible;
+    outline: 1px dashed var(--ink-free-text);
+    outline-offset: 1px;
+    cursor: text;
+  }
+
   /*
    * Toolbar. The theme styles the bar's surface and the controls in it; where a bar sits, how
    * its controls are grouped and what separates it from the document are up to the app.
@@ -572,8 +683,484 @@
     display: inline-flex;
   }
 
-  /* Note threads and suggestion cards */
-  :where(.ink-note-popover, .ink-suggestion-card) {
+  /*
+   * Style menus (line style and the other style controls). The panel takes the select
+   * panel's box through `.ink-select-content`; its items are buttons.
+   */
+  :where(.ink-menu-content) {
+    min-width: 11rem;
+  }
+
+  :where(.ink-menu-group + .ink-menu-group) {
+    margin-top: 0.25rem;
+    padding-top: 0.25rem;
+    border-top: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-menu-label) {
+    padding: 0.25rem 0.5rem;
+    color: var(--ink-muted-fg);
+    font-size: 0.75rem;
+  }
+
+  :where(.ink-menu-item) {
+    box-sizing: border-box;
+    width: 100%;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+  }
+
+  :where(.ink-menu-item:hover:not(:disabled), .ink-menu-item:focus-visible) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  :where(.ink-menu-item:disabled) {
+    opacity: 0.5;
+  }
+
+  /*
+   * Colour menus. The trigger shows the current colour as a swatch; `data-kind` is `color`,
+   * `none` (slashed), `mixed` (split) or `empty`. A border swatch is a ring, a fill swatch a
+   * disc.
+   */
+  :where(.ink-swatch) {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 1.125rem;
+    height: 1.125rem;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--ink-fg) 35%, transparent);
+    border-radius: 50%;
+    background: var(--ink-swatch, transparent);
+  }
+
+  :where(.ink-swatch[data-property='border'][data-kind='color']) {
+    border: 3px solid var(--ink-swatch);
+    background: transparent;
+  }
+
+  :where(.ink-swatch[data-kind='none'])::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to top right,
+      transparent calc(50% - 1px),
+      #e5484d calc(50% - 1px),
+      #e5484d calc(50% + 1px),
+      transparent calc(50% + 1px)
+    );
+  }
+
+  :where(.ink-swatch[data-kind='mixed']) {
+    background: linear-gradient(135deg, #e5484d 50%, #3b82f6 50%);
+  }
+
+  :where(.ink-color-grid) {
+    display: grid;
+    grid-template-columns: repeat(12, 1.25rem);
+    gap: 2px;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-swatch-item) {
+    box-sizing: border-box;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--ink-fg) 20%, transparent);
+    border-radius: 3px;
+    background: var(--ink-swatch);
+    cursor: default;
+  }
+
+  :where(.ink-swatch-item[data-state='checked']) {
+    outline: 2px solid var(--ink-fg);
+    outline-offset: 1px;
+  }
+
+  :where(.ink-swatch-item:hover, .ink-swatch-item:focus-visible) {
+    outline: 2px solid var(--ink-ring, var(--ink-fg));
+    outline-offset: 1px;
+  }
+
+  /* The native input stays in the page so its picker opens; only the picker is seen. */
+  :where(.ink-color-input) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /*
+   * Text style menu: a popover panel of mixed widgets (font select, text colour, size stepper,
+   * emphasis toggles, alignment radios).
+   */
+  :where(.ink-text-style-content) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem;
+  }
+
+  :where(.ink-text-style-row, .ink-text-style-size) {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  :where(.ink-text-style-font, .ink-text-style-input) {
+    box-sizing: border-box;
+    height: 2rem;
+    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-text-style-input) {
+    width: 3.5rem;
+    text-align: center;
+    appearance: textfield;
+  }
+
+  :where(.ink-text-style-button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: none;
+    color: inherit;
+    cursor: default;
+  }
+
+  :where(.ink-text-style-button:hover, .ink-text-style-button:focus-visible) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  :where(.ink-text-style-button[data-state='on']) {
+    border-color: var(--ink-border);
+    background: color-mix(in srgb, var(--ink-fg) 14%, transparent);
+  }
+
+  :where(.ink-text-style-button[data-mixed]) {
+    border-style: dashed;
+    border-color: var(--ink-border);
+  }
+
+  /* A style menu's trigger when the selection disagrees (the colour menus' swatch shows it too). */
+  :where(.ink-menu-trigger[data-mixed]) {
+    border-style: dashed;
+    border-color: var(--ink-border);
+  }
+
+  /* Shape menu: a split button, the tool part beside a narrow chevron. */
+  :where(.ink-split-button) {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  :where(.ink-split-button .ink-menu-trigger) {
+    min-width: 0;
+    width: 1.25rem;
+    padding-inline: 0.125rem;
+  }
+
+  :where(.ink-shape-grid) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
+    gap: 2px;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-shape-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  /* Highlight menu: the markup kinds, then the markup colour. */
+  :where(.ink-highlight-kinds) {
+    display: grid;
+    gap: 2px;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-highlight-item) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  :where(.ink-highlight-colour) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+  }
+
+  /* Stamps: an image filling its box; the overlay sets its geometry and opacity. */
+  :where(.ink-stamp) {
+    display: block;
+    max-width: none;
+    opacity: var(--ink-opacity, 1);
+    user-select: none;
+  }
+
+  /* Signature menu: saved signatures as previews, each with a remove button. */
+  :where(.ink-signature-list) {
+    display: grid;
+    grid-template-columns: minmax(10rem, 1fr) auto;
+    gap: 2px;
+    padding: 0.25rem;
+  }
+
+  :where(.ink-signature-item) {
+    padding-right: 0.5rem;
+    color: var(--ink-ink);
+  }
+
+  :where(.ink-signature-item[data-state='checked']) {
+    background: color-mix(in srgb, var(--ink-accent) 10%, transparent);
+  }
+
+  /* Signatures are dark ink in both themes, so they sit on paper. */
+  :where(.ink-signature-preview) {
+    display: inline-flex;
+    align-items: center;
+    height: 2rem;
+    border-radius: calc(var(--ink-radius) - 4px);
+    background: #fff;
+  }
+
+  :where(.ink-signature-preview svg, .ink-signature-preview img) {
+    height: 100%;
+    max-width: 10rem;
+    object-fit: contain;
+  }
+
+  :where(.ink-signature-remove) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    padding: 0;
+    border-radius: calc(var(--ink-radius) - 4px);
+    color: var(--ink-muted-fg);
+  }
+
+  :where(.ink-signature-create) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  /* Dialogs (Create signature): a modal over an overlay. */
+  :where(.ink-dialog-overlay) {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    background: rgb(0 0 0 / 0.4);
+  }
+
+  :where(.ink-dialog) {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 51;
+    box-sizing: border-box;
+    width: min(32rem, calc(100vw - 2rem));
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
+    padding: 1rem;
+    border: 1px solid var(--ink-border);
+    border-radius: var(--ink-radius);
+    background: var(--ink-surface);
+    color: var(--ink-fg);
+    box-shadow: 0 16px 48px rgb(0 0 0 / 0.25);
+    font-size: 0.875rem;
+    transform: translate(-50%, -50%);
+  }
+
+  :where(.ink-dialog:focus) {
+    outline: none;
+  }
+
+  :where(.ink-dialog-title) {
+    margin: 0 0 0.75rem;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  :where(.ink-tabs) {
+    display: flex;
+    gap: 0.25rem;
+    margin-bottom: 0.75rem;
+    border-bottom: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-tab) {
+    margin-bottom: -1px;
+    padding: 0.375rem 0.75rem;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    background: none;
+    color: var(--ink-muted-fg);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  :where(.ink-tab[data-state='active']) {
+    border-bottom-color: var(--ink-accent);
+    color: var(--ink-fg);
+  }
+
+  :where(.ink-tab-panel) {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  :where(.ink-tab-panel[hidden]) {
+    display: none;
+  }
+
+  :where(.ink-signature-pad-host) {
+    box-sizing: border-box;
+    height: 10rem;
+    border: 1px dashed var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: #fff;
+    color: var(--ink-ink);
+    cursor: crosshair;
+  }
+
+  :where(.ink-signature-pad .ink-stroke) {
+    fill: currentColor;
+  }
+
+  :where(.ink-dialog-row) {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  :where(.ink-field) {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  :where(.ink-input) {
+    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;
+  }
+
+  :where(.ink-field-error) {
+    margin: 0;
+    color: var(--ink-strikeout);
+  }
+
+  :where(.ink-signature-fonts) {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  :where(.ink-signature-font) {
+    overflow: hidden;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: #fff;
+    color: var(--ink-ink);
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  :where(.ink-signature-font-sample) {
+    font-size: 1.75rem;
+    line-height: 1.4;
+  }
+
+  :where(.ink-signature-font[data-state='checked']) {
+    border-color: var(--ink-accent);
+    box-shadow: inset 0 0 0 1px var(--ink-accent);
+  }
+
+  :where(.ink-signature-image) {
+    max-width: 100%;
+    max-height: 8rem;
+    object-fit: contain;
+  }
+
+  :where(.ink-dialog-actions) {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.375rem;
+    margin-top: 1rem;
+  }
+
+  :where(.ink-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-button[data-variant='primary']) {
+    border-color: var(--ink-accent);
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+  }
+
+  :where(.ink-button:disabled) {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  :where(
+    .ink-tab:focus-visible,
+    .ink-button:focus-visible,
+    .ink-input:focus-visible,
+    .ink-signature-font:focus-visible,
+    .ink-text-style-font:focus-visible,
+    .ink-text-style-input:focus-visible,
+    .ink-text-style-button:focus-visible
+  ) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: 2px;
+  }
+
+  /* Comment threads and suggestion cards */
+  :where(.ink-thread-popover, .ink-suggestion-card) {
     z-index: 50;
     width: 20rem;
     max-width: calc(100vw - 1rem);