@inkbar/theme 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkbar/theme",
-  "version": "0.7.0",
+  "version": "0.9.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;
@@ -44,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);
   }
@@ -54,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);
@@ -65,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;
     }
   }
 
@@ -75,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);
@@ -86,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. */
@@ -354,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;
@@ -1302,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;