@inkbar/theme 0.1.1 → 0.2.0

package/LICENSE

@@ -19,3 +19,50 @@ 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.
+
+---
+
+Third-party notices
+
+theme.css draws the zoom select's chevron with the ChevronDown icon from Lucide
+(https://lucide.dev), under the ISC licence:
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+ChevronDown is derived from the Feather project, under the MIT licence:
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+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

@@ -20,7 +20,7 @@
 
 ---
 
-`@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.
+`@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.
 
 ## Install
 
@@ -74,6 +74,16 @@ Inkbar reads a colour when you create the annotation and stores it on the annota
 
 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.
 
+The theme gives a toolbar a background and padding and styles the controls in it. You decide where the toolbar sits, how to group its controls and what separates it from the document. Set `--ink-control-size` on a toolbar to change the height of its buttons, fields and zoom select (default `2.25rem`), and `--ink-icon-size` to change the size of their icons (default `1.125rem`).
+
+```css
+.my-page-bar {
+  --ink-control-size: 2rem;
+  --ink-icon-size: 1rem;
+  border-top: 1px solid var(--border);
+}
+```
+
 ## Licence
 
 [MIT](https://github.com/inkbar/inkbar/blob/main/LICENSE). From the team behind [Redactr](https://redactr.io).

package/package.json

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

package/theme.css

@@ -12,7 +12,12 @@
  */
 @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]) {
+  :where(
+    [data-ink-root],
+    [data-ink-note-popover],
+    [data-ink-suggestion-card],
+    [data-ink-select-content]
+  ) {
     --ink-highlight: #f2c230;
     --ink-underline: #2b5a9e;
     --ink-strikeout: #c0392b;
@@ -46,7 +51,8 @@
     :where(
       [data-ink-root]:not(.light, .light *),
       [data-ink-note-popover]:not(.light *),
-      [data-ink-suggestion-card]:not(.light *)
+      [data-ink-suggestion-card]:not(.light *),
+      [data-ink-select-content]:not(.light *)
     ) {
       --ink-bg: var(--muted, #0f1217);
       --ink-fg: var(--foreground, #e6e9ef);
@@ -65,7 +71,8 @@
     .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 *)
+    .dark [data-ink-suggestion-card]:not(.dark .light *),
+    .dark [data-ink-select-content]:not(.dark .light *)
   ) {
     --ink-bg: var(--muted, #0f1217);
     --ink-fg: var(--foreground, #e6e9ef);
@@ -355,35 +362,28 @@
     text-align: right;
   }
 
-  /* Toolbar */
+  /*
+   * 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.
+   * --ink-control-size sets the height of buttons, fields and the zoom select, and
+   * --ink-icon-size the size of their icons.
+   */
   :where(.ink-toolbar) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.25rem;
     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;
+    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);
@@ -393,6 +393,25 @@
     cursor: pointer;
   }
 
+  /* The controls' icons. --ink-icon-size sets their size; it defaults to 1.125rem. */
+  :where(.ink-icon) {
+    flex: none;
+    width: var(--ink-icon-size, 1.125rem);
+    height: var(--ink-icon-size, 1.125rem);
+  }
+
+  :where(.ink-select-icon .ink-icon, .ink-select-indicator .ink-icon) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  :where(.ink-toolbar-separator) {
+    align-self: stretch;
+    width: 1px;
+    margin: 0.25rem 0.25rem;
+    background: var(--ink-border);
+  }
+
   :where(.ink-toolbar button:hover) {
     background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
   }
@@ -407,8 +426,9 @@
     cursor: default;
   }
 
-  :where(.ink-toolbar select, .ink-toolbar input) {
-    height: 2.25rem;
+  :where(.ink-toolbar input) {
+    box-sizing: border-box;
+    height: var(--ink-control-size, 2.25rem);
     padding: 0 0.5rem;
     border: 1px solid var(--ink-border);
     border-radius: calc(var(--ink-radius) - 2px);
@@ -418,14 +438,138 @@
   }
 
   :where(.ink-page-input) {
-    width: 4rem;
+    width: 3.5rem;
     text-align: center;
+    font-variant-numeric: tabular-nums;
+    appearance: textfield;
+  }
+
+  :where(.ink-page-input)::-webkit-inner-spin-button,
+  :where(.ink-page-input)::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
   }
 
   :where(.ink-page-count) {
     padding: 0 0.25rem;
     color: var(--ink-muted-fg);
     font-size: 0.875rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /*
+   * Zoom select. The bindings render a button trigger (`.ink-select-trigger`) and a portalled
+   * listbox; createViewer renders a native select. Both take the same box and chevron.
+   */
+  :where(.ink-toolbar .ink-zoom-select) {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: 7.5rem;
+    height: var(--ink-control-size, 2.25rem);
+    padding: 0 0.5rem 0 0.75rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: var(--ink-surface);
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+    font-variant-numeric: tabular-nums;
+    text-align: left;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  :where(.ink-toolbar .ink-zoom-select:hover) {
+    background: color-mix(in srgb, var(--ink-fg) 4%, var(--ink-surface));
+  }
+
+  :where(.ink-toolbar .ink-zoom-select:disabled) {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  /* The native select draws the same chevron as the trigger's icon: Lucide's ChevronDown; see LICENSE. */
+  :where(.ink-toolbar select.ink-zoom-select) {
+    padding-right: 2rem;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6170' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+  }
+
+  :where(.ink-select-value) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :where(.ink-select-icon) {
+    display: inline-flex;
+    flex: none;
+    color: var(--ink-muted-fg);
+  }
+
+  :where(.ink-select-content) {
+    box-sizing: border-box;
+    z-index: 50;
+    min-width: var(
+      --radix-select-trigger-width,
+      var(--reka-select-trigger-width, var(--bits-select-anchor-width, 7.5rem))
+    );
+    max-height: min(
+      20rem,
+      var(
+        --radix-select-content-available-height,
+        var(
+          --reka-select-content-available-height,
+          var(--bits-select-content-available-height, 20rem)
+        )
+      )
+    );
+    overflow-y: auto;
+    padding: 0.25rem;
+    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;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.ink-select-separator) {
+    height: 1px;
+    margin: 0.25rem -0.25rem;
+    background: var(--ink-border);
+  }
+
+  :where(.ink-select-item) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 2rem 0.375rem 0.5rem;
+    border-radius: calc(var(--ink-radius) - 4px);
+    outline: none;
+    cursor: default;
+    user-select: none;
+  }
+
+  :where(.ink-select-item[data-highlighted]) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  :where(.ink-select-item[data-disabled]) {
+    opacity: 0.5;
+  }
+
+  :where(.ink-select-indicator) {
+    position: absolute;
+    right: 0.5rem;
+    display: inline-flex;
   }
 
   /* Note threads and suggestion cards */
@@ -510,6 +654,10 @@
     color: var(--ink-accent-fg);
   }
 
+  :where(.ink-select-item:focus-visible) {
+    outline: none;
+  }
+
   :where(.ink-thread-actions button:disabled) {
     opacity: 0.5;
     cursor: default;
@@ -518,6 +666,7 @@
   :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,