@inkbar/theme 0.6.0 → 0.8.0

package/package.json

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

package/theme.css

@@ -17,7 +17,8 @@
     [data-ink-thread-popover],
     [data-ink-popover],
     [data-ink-select-content],
-    [data-ink-signature-dialog]
+    [data-ink-signature-dialog],
+    [data-ink-form-alert]
   ) {
     --ink-highlight: #f2c230;
     --ink-underline: #2b5a9e;
@@ -29,6 +30,9 @@
     --ink-ink: #151820;
     --ink-redact: #c0392b;
     --ink-redact-fill: #000000;
+    /* Pages stay white in dark mode and the search layer multiplies, so these serve both. */
+    --ink-search-hit: #f1ffa0;
+    --ink-search-current: #e4ff4a;
 
     --ink-bg: var(--muted, #f1f2f5);
     --ink-fg: var(--foreground, #151820);
@@ -41,6 +45,10 @@
     --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%);
+    /* Form fields sit on the white page, in light and dark alike. */
+    --ink-form-field-bg: rgb(43 90 158 / 0.12);
+    --ink-form-field-focus: #2b5a9e;
+    --ink-form-field-invalid: #c0392b;
 
     color: var(--ink-fg);
   }
@@ -51,7 +59,8 @@
       [data-ink-thread-popover]:not(.light *),
       [data-ink-popover]:not(.light *),
       [data-ink-select-content]:not(.light *),
-      [data-ink-signature-dialog]:not(.light *)
+      [data-ink-signature-dialog]:not(.light *),
+      [data-ink-form-alert]:not(.light *)
     ) {
       --ink-bg: var(--muted, #0f1217);
       --ink-fg: var(--foreground, #e6e9ef);
@@ -62,6 +71,9 @@
       --ink-accent-fg: var(--primary-foreground, #151820);
       --ink-ring: var(--ring, #7aa5e6);
       --ink-page-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
+      --ink-form-field-bg: rgb(43 90 158 / 0.16);
+      --ink-form-field-focus: #3d73c4;
+      --ink-form-field-invalid: #c0392b;
     }
   }
 
@@ -72,7 +84,8 @@
     .dark [data-ink-thread-popover]: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 *)
+    .dark [data-ink-signature-dialog]:not(.dark .light *),
+    .dark [data-ink-form-alert]:not(.dark .light *)
   ) {
     --ink-bg: var(--muted, #0f1217);
     --ink-fg: var(--foreground, #e6e9ef);
@@ -83,6 +96,9 @@
     --ink-accent-fg: var(--primary-foreground, #151820);
     --ink-ring: var(--ring, #7aa5e6);
     --ink-page-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
+    --ink-form-field-bg: rgb(43 90 158 / 0.16);
+    --ink-form-field-focus: #3d73c4;
+    --ink-form-field-invalid: #c0392b;
   }
 
   /* Layout: root and viewport fill their parent; the scroll area takes the space left over. */
@@ -318,6 +334,23 @@
     border-radius: 50%;
   }
 
+  /* Search matches sit under the annotations: before the overlay in the page, same level. The
+     layer multiplies with the page, so dark text shows through as if the page were marked. */
+  :where(.ink-search-layer) {
+    z-index: 1;
+    pointer-events: none;
+    mix-blend-mode: multiply;
+  }
+
+  :where([data-search-hit]) {
+    background: var(--ink-search-hit);
+    border-radius: 2px;
+  }
+
+  :where([data-search-hit][data-current]) {
+    background: var(--ink-search-current);
+  }
+
   /* Annotations */
   :where(.ink-overlay) {
     z-index: 1;
@@ -334,6 +367,49 @@
     pointer-events: auto;
   }
 
+  /* Form fields: over the text layer, under the annotations (after the overlay in the page, at
+     the same level), so a press on an annotation's shape is the annotation's. A field is
+     tinted, except while it is read-only or signed or highlighting is off. It is ringed while
+     focused and marked when a value was refused. */
+  :where(.ink-form-layer) {
+    z-index: 1;
+  }
+
+  :where(.ink-form-control) {
+    outline: none;
+    box-shadow: inset 0 0 0 100vmax var(--ink-form-field-bg);
+  }
+
+  :where(
+    [data-ink-form-highlight='off'] .ink-form-control,
+    .ink-form-widget[data-ink-readonly] .ink-form-control
+  ) {
+    box-shadow: none;
+  }
+
+  /* An empty signature field's "Sign"; a signed one shows its signature, drawn above it. */
+  :where(.ink-form-sign) {
+    color: var(--ink-form-field-focus);
+    font-family: system-ui, sans-serif;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  :where(.ink-form-sign[data-ink-signed]) {
+    box-shadow: none;
+    cursor: default;
+  }
+
+  :where(.ink-form-widget[data-ink-focused] .ink-form-control) {
+    outline: 2px solid var(--ink-form-field-focus);
+    outline-offset: 0;
+  }
+
+  :where(.ink-form-widget[data-ink-invalid] .ink-form-control) {
+    outline: 2px solid var(--ink-form-field-invalid);
+    outline-offset: 0;
+  }
+
   :where(.ink-annotation) {
     border-radius: 2px;
     outline: 1px solid transparent;
@@ -648,6 +724,97 @@
     font-size: 0.875rem;
   }
 
+  /*
+   * The find bar (createFindBar): floats over the top-right of the viewport root, which is
+   * what it positions against, so the pages do not move. Hidden while the search is closed.
+   */
+  :where(.ink-find-bar) {
+    position: absolute;
+    top: 0.5rem;
+    right: 1.5rem;
+    z-index: 3;
+    box-sizing: border-box;
+    max-width: calc(100% - 2rem);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    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 4px 16px rgb(0 0 0 / 0.18);
+  }
+
+  :where(.ink-find-bar[hidden]) {
+    display: none;
+  }
+
+  :where(.ink-find-bar input) {
+    box-sizing: border-box;
+    flex: 1;
+    width: 14rem;
+    min-width: 0;
+    height: var(--ink-control-size, 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-find-count) {
+    min-width: 4.5rem;
+    padding: 0 0.25rem;
+    color: var(--ink-muted-fg);
+    font-size: 0.875rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  :where(.ink-find-bar 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-find-bar button:hover) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  :where(.ink-find-bar button[aria-pressed='true']) {
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+  }
+
+  :where(.ink-find-bar input:focus-visible, .ink-find-bar button:focus-visible) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: 2px;
+  }
+
+  /* Text for assistive technology only, such as the find bar's live region. */
+  :where(.ink-visually-hidden) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
   :where(.ink-toolbar input) {
     box-sizing: border-box;
     height: var(--ink-control-size, 2.25rem);
@@ -1191,6 +1358,13 @@
     outline: none;
   }
 
+  /* A form script's message: non-modal, so no overlay dims the page behind it. */
+  :where(.ink-form-alert-message) {
+    margin: 0;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
   :where(.ink-dialog-title) {
     margin: 0 0 0.75rem;
     font-size: 1rem;