@kanunilabs/datagrid 1.9.1 → 1.9.3

package/dist/styles.css

@@ -84,6 +84,9 @@
   --dg-danger: #dc2626;              /* red-600 — borders, solid fills */
   --dg-danger-text: #b91c1c;         /* red-700 — text on a light surface */
   --dg-on-danger: #ffffff;           /* text ON a solid --dg-danger fill */
+  --dg-success: #15803d;             /* green-700 — fills ("saved" marks) */
+  --dg-success-text: #166534;        /* success as text on a light surface */
+  --dg-on-success: #ffffff;          /* text ON a solid --dg-success fill */
   --dg-warning: #b45309;             /* amber-700 */
   --dg-selected-bg: var(--dg-primary-soft);
   /* Search highlight (P2.4). Amber rather than the accent: the accent already
@@ -171,10 +174,20 @@
   color: var(--dg-text);
 }
 
+/* Typeface. Inherited from the page unless --dg-font-family names one — set
+   it once (on :root, or in a palette class) and the grid, the Enterprise
+   chrome around it and every popup portalled to <body> use it. Without the
+   variable, a font set only on the grid's container never reached the menus
+   and dialogs, which inherit from <body> (2026-10-16, customer request). */
+.kanuni-datagrid-enterprise,
+.kanuni-datagrid-detached {
+  font-family: var(--dg-font-family, inherit);
+}
+
 /* The grid's own box. */
 .kanuni-datagrid-root {
   box-sizing: border-box;
-  font-family: inherit;
+  font-family: var(--dg-font-family, inherit);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
@@ -229,6 +242,9 @@
   /* The dark danger is a LIGHT red, so what sits on it has to be dark. White
      on #f87171 measures 2.4:1 — the delete button's own label. */
   --dg-on-danger: #450a0a;
+  --dg-success: #4ade80;
+  --dg-success-text: #86efac;
+  --dg-on-success: #0d2817;
   --dg-warning: #fbbf24;
   --dg-overlay: rgba(2, 6, 23, 0.7);
   --dg-scrollbar-thumb: #475569;
@@ -663,6 +679,48 @@
   font-size: 11px;
 }
 
+/* The search box's own refusal (`toolbar.search.validate`), right after it. */
+.kanuni-datagrid-toolbar-search-error {
+  color: var(--dg-danger-text);
+  font-size: 11px;
+}
+
+.kanuni-datagrid-toolbar-search[aria-invalid='true'] {
+  border-color: var(--dg-danger);
+}
+
+/* An app's own button (GridToolbarButton / toolbarButton()), drawn like the
+   grid's commands wherever it sits: the toolbar's rule above reaches only its
+   DIRECT children, and the status bar has none. */
+.kanuni-datagrid-app-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: inherit;
+  font: inherit;
+  font-size: var(--dg-control-font-size);
+  cursor: pointer;
+}
+
+.kanuni-datagrid-app-button.kanuni-datagrid-toolbar-icon-button {
+  padding: 0;
+}
+
+.kanuni-datagrid-app-button:hover:not([aria-disabled='true']) {
+  background: var(--dg-surface-hover);
+}
+
+/* Unavailable but still focusable, so its reason can be read. */
+.kanuni-datagrid-app-button[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 /*
  * The same message, but floating where a context menu just was — the cell
  * menu's Export entries have nowhere else to report a missing optional peer.
@@ -1870,6 +1928,17 @@
   flex: none;
 }
 
+/* A row of a server's list whose piece has not arrived: the slot is held (the
+   scroll bar describes the whole list), the value is not known yet. */
+.kanuni-datagrid-filter-item--pending {
+  color: var(--dg-text-muted);
+  cursor: default;
+}
+
+.kanuni-datagrid-filter-item--pending:hover {
+  background: transparent;
+}
+
 .kanuni-datagrid-filter-item:hover,
 .kanuni-datagrid-filter-item--active {
   background: var(--dg-surface-hover);
@@ -2830,6 +2899,19 @@
   margin: 0 calc(var(--dg-cell-padding-x) * -1);
 }
 
+/* ...but the TEXT stays where the cell drew it. Widened to the cell's edges
+   with only 4px of padding, the value jumped left by the cell padding as the
+   editor opened; in row mode, with every cell open, no value lined up with the
+   column above it (2026-10-19, content session). The date editor's own input
+   keeps its 4px, so its wrapper makes up the rest. */
+.kanuni-datagrid-root .kanuni-datagrid-cell > .kanuni-datagrid-editor:not([type='checkbox']) {
+  padding-inline: var(--dg-cell-padding-x);
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-cell > .kanuni-datagrid-date-editor {
+  padding-inline: max(0px, calc(var(--dg-cell-padding-x) - 4px)) 0;
+}
+
 /* In a WRAPPED cell the editor takes the LINE BOX, not the row height.
    A wrapping cell is as tall as its own text: one line of it is
    `padding-block x2 + --dg-wrap-line-height`, which is shorter than a standard
@@ -2867,6 +2949,38 @@
   background: var(--dg-surface);
 }
 
+/* Row mode opens every cell of the row at once and marks none of them
+   `--editing`, so the focused one kept its ring around the underlined editor —
+   the double rectangle above, on one cell of the row (2026-10-19, content
+   session). Any cell that holds an editor drops the ring. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--focused:has(> .kanuni-datagrid-editor),
+.kanuni-datagrid-root .kanuni-datagrid-cell--focused:has(> .kanuni-datagrid-date-editor) {
+  outline: none;
+}
+
+/* A number is typed where it is read: right-aligned, as the cell shows it.
+   Left-aligned editors made the value jump across the column the moment the
+   cell opened, and in row mode two number editors side by side read as one
+   field. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--number > .kanuni-datagrid-editor {
+  text-align: right;
+}
+
+/* Chrome keeps ~15px at the end of a number input for its spin buttons, shown
+   or not, so a right-aligned value still stopped short of the column's
+   numbers. In a row-high cell the arrows are too small to use anyway; the
+   keyboard's arrow keys move between cells here. */
+.kanuni-datagrid-root input.kanuni-datagrid-editor[type='number'] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.kanuni-datagrid-root input.kanuni-datagrid-editor[type='number']::-webkit-inner-spin-button,
+.kanuni-datagrid-root input.kanuni-datagrid-editor[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 .kanuni-datagrid-root input.kanuni-datagrid-editor[type='checkbox'] {
   width: auto;
   height: auto;
@@ -3350,6 +3464,51 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   outline-offset: -1px;
 }
 
+/* The date and lookup editors in a form are the CELL editors (one control per
+   column), whose look is an underline sized to a row. In a form that read as a
+   different kind of field from its boxed neighbours (2026-10-19, content
+   session), so here they take the form's box: on the date editor's wrapper,
+   which holds the calendar button too, and on a lookup's input directly. */
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-editor,
+.kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-date-editor {
+  height: auto;
+  padding: 4px 6px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-date-editor > .kanuni-datagrid-editor {
+  height: auto;
+  padding: 0;
+  border: none;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-editor:focus,
+.kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-date-editor:focus-within {
+  outline: 2px solid var(--dg-primary);
+  outline-offset: -1px;
+}
+
+/* A field the user cannot change must not look like one they can.
+   `editable: false` columns were drawn as disabled inputs with the same
+   surface, border and text as the open ones: readers clicked them and nothing
+   happened (2026-10-19, content session). Recessed surface, muted text, a
+   lighter border and the not-allowed cursor — the value stays readable. */
+.kanuni-datagrid-edit-form-input:disabled,
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-editor:disabled,
+.kanuni-datagrid-edit-form-lookup > .kanuni-datagrid-date-editor:has(.kanuni-datagrid-editor:disabled) {
+  border-color: var(--dg-border);
+  background: var(--dg-surface-header);
+  color: var(--dg-text-muted);
+  cursor: not-allowed;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-edit-form-lookup .kanuni-datagrid-date-editor .kanuni-datagrid-editor:disabled {
+  color: var(--dg-text-muted);
+  cursor: not-allowed;
+}
+
 .kanuni-datagrid-edit-form-field[data-invalid] .kanuni-datagrid-edit-form-input {
   border-color: var(--dg-danger);
 }
@@ -3454,6 +3613,218 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   pointer-events: none;
 }
 
+/* ─────────────────────────────────────────────────────────────
+   Row save status (`rowStatus`, Community, 2026-10-16).
+   ─────────────────────────────────────────────────────────────
+   A customer whose grid saves every edit at once asked to see each row's
+   save: unsaved, in flight, saved, refused. Both renderers put
+   `data-row-status` and `kanuni-datagrid-row--status-<status>` on the ROW
+   element — one element per row, pinned cells included — so the marker is
+   drawn once per row and cannot repeat per pinned block.
+
+   The marker is the row's own `::before`: a sticky flex item at the inline
+   start that gives its width back with a negative margin. Sticky, because
+   the row is as wide as all its columns and scrolls sideways — a plain left
+   border or inset shadow on the row would scroll out of view with the first
+   column, and under a pinned-left column it would be painted over. It sits
+   above pinned cells (z-index) and moves no cell content. `inset-inline-start`
+   puts it on the right edge under `dir="rtl"`. The focused row keeps its own
+   inset bar; at the leading edge the status marker covers it, which is the
+   more urgent of the two. */
+.kanuni-datagrid-root,
+.kanuni-datagrid-enterprise,
+.kanuni-datagrid-detached {
+  --dg-row-status-width: 3px;
+  --dg-row-status-changed: var(--dg-warning);
+  --dg-row-status-saving: var(--dg-primary);
+  /* The success fill: every palette and scheme sets it, dark ones included. */
+  --dg-row-status-saved: var(--dg-success);
+  --dg-row-status-error: var(--dg-danger);
+  /* How strongly `tint: true` washes the row. */
+  --dg-row-status-tint: 8%;
+}
+
+.kanuni-datagrid-row--status-changed {
+  --dg-row-status-color: var(--dg-row-status-changed);
+}
+
+.kanuni-datagrid-row--status-saving {
+  --dg-row-status-color: var(--dg-row-status-saving);
+}
+
+.kanuni-datagrid-row--status-saved {
+  --dg-row-status-color: var(--dg-row-status-saved);
+}
+
+.kanuni-datagrid-row--status-error {
+  --dg-row-status-color: var(--dg-row-status-error);
+}
+
+.kanuni-datagrid-row[data-row-status]::before {
+  content: '';
+  position: sticky;
+  inset-inline-start: 0;
+  /* Above pinned cells (2), below the row being edited (4): at 6 the next
+     row's marker cut through the editor's error bubble, which hangs one row
+     down (pre-release review, 2026-10-16). */
+  z-index: 3;
+  flex: none;
+  align-self: stretch;
+  width: var(--dg-row-status-width);
+  margin-inline-end: calc(-1 * var(--dg-row-status-width));
+  background: var(--dg-row-status-color);
+  pointer-events: none;
+}
+
+/* The tint is a translucent IMAGE over whatever colour the row already has —
+   stripe, hover, selection or focus — so those still read through it. Pinned
+   cells inherit the row's background but the hover rule resets theirs, so
+   they are named here too (three classes + an attribute: above the hover and
+   selection rules, which are two classes). */
+.kanuni-datagrid-row.kanuni-datagrid-row--status-tint[data-row-status],
+.kanuni-datagrid-row.kanuni-datagrid-row--status-tint[data-row-status] .kanuni-datagrid-cell--pinned {
+  background-image: linear-gradient(
+    color-mix(in srgb, var(--dg-row-status-color) var(--dg-row-status-tint), transparent),
+    color-mix(in srgb, var(--dg-row-status-color) var(--dg-row-status-tint), transparent)
+  );
+}
+
+/* High contrast drops background colours; the marker is the whole signal,
+   so it keeps its own. */
+@media (forced-colors: active) {
+  .kanuni-datagrid-row[data-row-status]::before {
+    forced-color-adjust: none;
+  }
+}
+
+/* ── Message rows (`rowStatus.messages`, 2026-10-16) ─────────
+   A refused save's reason in a row under it, with Retry and Delete row. The
+   in-grid edit form's shape: sticky to the scroller's inline start and as wide
+   as the VIEWPORT, so it stays in view while the columns scroll. The ground
+   stays the surface — the text is the danger TEXT colour, measured at 4.5:1
+   on it — and the row's own marker colour runs down its leading edge. */
+.kanuni-datagrid-message-row {
+  background: var(--dg-surface);
+  border-bottom: 1px solid var(--dg-border);
+}
+
+.kanuni-datagrid-message-cell {
+  position: sticky;
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  width: var(--dg-viewport-width, 100%);
+  height: 100%;
+  border-inline-start: var(--dg-row-status-width) solid var(--dg-row-status-error);
+  user-select: text;
+}
+
+.kanuni-datagrid-row-message {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+  padding: 0 var(--dg-cell-padding-x);
+  color: var(--dg-danger-text);
+  font-size: var(--dg-chrome-font-size);
+}
+
+.kanuni-datagrid-row-message-icon {
+  flex: none;
+}
+
+.kanuni-datagrid-row-message-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-row-message-button {
+  flex: none;
+  height: min(var(--dg-control-height), calc(100% - 6px));
+  padding: 0 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-row-message-button:hover {
+  background: var(--dg-surface-hover);
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-row-message-button:focus-visible {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: 1px;
+}
+
+/* ── Status column (`rowStatus.icons`, 2026-10-16) ───────────
+   A glyph per status so it does not rest on colour alone: a dot while
+   changed, a turning ring while saving, a tick when saved, a triangle when
+   refused. Drawn as a MASK filled with the status colour, so a palette or a
+   scheme recolours it like the marker. The cell exists on every row (an empty
+   one where there is no status) so the columns beside it never step. */
+.kanuni-datagrid-status-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.kanuni-datagrid-status-icon {
+  display: none;
+  width: 12px;
+  height: 12px;
+  background: var(--dg-row-status-color);
+  -webkit-mask: var(--dg-row-status-glyph) center / contain no-repeat;
+  mask: var(--dg-row-status-glyph) center / contain no-repeat;
+}
+
+.kanuni-datagrid-row[data-row-status] .kanuni-datagrid-status-icon {
+  display: block;
+}
+
+.kanuni-datagrid-row--status-changed {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3C/svg%3E");
+}
+
+.kanuni-datagrid-row--status-saving {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 1-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+.kanuni-datagrid-row--status-saved {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.5 12.5 13.5 3.5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.kanuni-datagrid-row--status-error {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15.5 14.5H.5z M7 6v4.5h2V6z M7 11.5v2h2v-2z' fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+.kanuni-datagrid-row--status-saving .kanuni-datagrid-status-icon {
+  animation: kanuni-datagrid-status-spin 0.9s linear infinite;
+}
+
+@keyframes kanuni-datagrid-status-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kanuni-datagrid-row--status-saving .kanuni-datagrid-status-icon {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .kanuni-datagrid-status-icon {
+    background: CanvasText;
+  }
+}
+
 /* ─────────────────────────────────────────────────────────────
    KANUNILABS DataGrid — packaged themes
    ─────────────────────────────────────────────────────────────
@@ -3920,6 +4291,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #f87171;
   --dg-danger-text: #fca5a5;
   --dg-on-danger: #450a0a;
+  --dg-success: #4ade80;
+  --dg-success-text: #86efac;
+  --dg-on-success: #0d2817;
   --dg-warning: #fbbf24;
   --dg-overlay: rgba(12, 10, 9, 0.72);
 
@@ -4268,6 +4642,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #a2515a;              /* Aurora nord11, deepened for white text */
   --dg-danger-text: #8f4149;
   --dg-on-danger: #ffffff;
+  --dg-success: #687a5a;
+  --dg-success-text: #5d6c50;
+  --dg-on-success: #ffffff;
   --dg-warning: #8a6220;             /* nord13 family */
 }
 
@@ -4296,6 +4673,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   /* nord11 is a muted red, so the label on it has to go further down than the
      usual near-black: #2b1113 measured 4.31:1 and this is 5.17:1. */
   --dg-on-danger: #170709;
+  --dg-success: #a3be8c;
+  --dg-success-text: #adc599;
+  --dg-on-success: #1d2219;
   --dg-warning: #ebcb8b;             /* nord13 */
   --dg-overlay: rgba(24, 28, 36, 0.72);
 }
@@ -4329,6 +4709,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #b03a5b;              /* Pink #ff79c6 / Red #ff5555 family */
   --dg-danger-text: #98304d;
   --dg-on-danger: #ffffff;
+  --dg-success: #2a8441;
+  --dg-success-text: #257339;
+  --dg-on-success: #ffffff;
   --dg-warning: #8a5a1c;
 }
 
@@ -4355,6 +4738,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #ff5555;              /* Red */
   --dg-danger-text: #ff8a8a;
   --dg-on-danger: #3b0000;
+  --dg-success: #50fa7b;
+  --dg-success-text: #50fa7b;
+  --dg-on-success: #0e2d16;
   --dg-warning: #f1fa8c;             /* Yellow */
   --dg-overlay: rgba(18, 19, 26, 0.74);
 }
@@ -4388,6 +4774,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #b3372c;              /* red #dc322f, deepened */
   --dg-danger-text: #9c2f25;
   --dg-on-danger: #ffffff;
+  --dg-success: #6c7c00;
+  --dg-success-text: #5a6800;
+  --dg-on-success: #ffffff;
   --dg-warning: #8a5a00;             /* yellow #b58900, deepened */
 }
 
@@ -4414,6 +4803,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #e07a72;
   --dg-danger-text: #f0a49e;
   --dg-on-danger: #34110d;
+  --dg-success: #859900;
+  --dg-success-text: #a4b240;
+  --dg-on-success: #181c00;
   --dg-warning: #d5a63b;
   --dg-overlay: rgba(0, 20, 26, 0.74);
 }
@@ -4446,6 +4838,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #9d0006;              /* light red */
   --dg-danger-text: #9d0006;
   --dg-on-danger: #ffffff;
+  --dg-success: #79740e;
+  --dg-success-text: #605c0b;
+  --dg-on-success: #ffffff;
   /* The scheme's light yellow (#b57614) is 3.33:1 on this cream ground — the
      warmth that makes Gruvbox work is also what makes its yellow weak here.
      Same hue, two steps down, 4.72:1. */
@@ -4475,6 +4870,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #fb4934;              /* dark red */
   --dg-danger-text: #fb8b7f;
   --dg-on-danger: #2c0500;
+  --dg-success: #b8bb26;
+  --dg-success-text: #bfc23c;
+  --dg-on-success: #212207;
   --dg-warning: #fabd2f;             /* dark yellow */
   --dg-overlay: rgba(20, 20, 20, 0.74);
 }
@@ -4508,6 +4906,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #c4304a;              /* red #d20f39, deepened for white text */
   --dg-danger-text: #b02540;
   --dg-on-danger: #ffffff;
+  --dg-success: #358524;
+  --dg-success-text: #2d701e;
+  --dg-on-success: #ffffff;
   --dg-warning: #995f14;             /* peach, deepened */
 }
 
@@ -4534,6 +4935,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #f38ba8;              /* red */
   --dg-danger-text: #f5a3ba;
   --dg-on-danger: #3d0b1a;
+  --dg-success: #a6e3a1;
+  --dg-success-text: #a6e3a1;
+  --dg-on-success: #1e291d;
   --dg-warning: #fab387;             /* peach */
   --dg-overlay: rgba(14, 14, 22, 0.74);
 }
@@ -4570,6 +4974,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #b1364a;
   --dg-danger-text: #9d2c3f;
   --dg-on-danger: #ffffff;
+  --dg-success: #587539;
+  --dg-success-text: #455b2c;
+  --dg-on-success: #ffffff;
   --dg-warning: #8a5a12;
 }
 
@@ -4596,6 +5003,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #f7768e;              /* red */
   --dg-danger-text: #f993a6;
   --dg-on-danger: #3a0713;
+  --dg-success: #9ece6a;
+  --dg-success-text: #9ece6a;
+  --dg-on-success: #1c2513;
   --dg-warning: #e0af68;             /* yellow */
   --dg-overlay: rgba(10, 11, 18, 0.76);
 }