@kanunilabs/datagrid 1.9.0 → 1.9.2

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;
@@ -3181,6 +3197,491 @@
   }
 }
 
+/* ─────────────────────────────────────────────────────────────
+   Editing modes: batch, row, form, popup.
+   ─────────────────────────────────────────────────────────────
+   Moved here from the Enterprise sheet when these modes became Community
+   (owner decision, 2026-10-16). The Enterprise sheet loads after this one,
+   so the Enterprise grid looks exactly as before; the plain-JS grid reads
+   this file too. The command column's rules stay in the Enterprise sheet. */
+
+/* ── Pending (unsaved) edits ──────────────────────────────── */
+/* A corner triangle rather than a background tint: the row may already be
+   striped, selected or in-range, and those must stay distinguishable. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--dirty {
+  position: relative;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-cell--dirty::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-width: 5px 5px 0 0;
+  border-style: solid;
+  border-color: var(--dg-primary) transparent transparent transparent;
+  pointer-events: none;
+}
+
+/* Marked for deletion, not yet saved (batch mode). Still readable, clearly on
+   its way out, and still right-clickable so the delete can be undone. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--removed {
+  text-decoration: line-through;
+  opacity: 0.55;
+  background: color-mix(in srgb, var(--dg-danger) 10%, transparent);
+}
+
+/* ── The Save / Cancel strip (and the Enterprise filter strip) ── */
+.kanuni-datagrid-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--dg-border);
+  border-bottom: none;
+  border-radius: var(--dg-radius) var(--dg-radius) 0 0;
+  background: var(--dg-surface-header);
+  font-size: var(--dg-chrome-font-size);
+}
+
+.kanuni-datagrid-filter-bar button {
+  padding: 2px 8px;
+  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-chrome-font-size);
+  cursor: pointer;
+}
+
+.kanuni-datagrid-filter-active {
+  color: var(--dg-primary);
+  font-weight: 600;
+}
+
+/* Inside the free grid's root, whose own border is the frame: the strip is
+   a band across the top rather than a tab sitting on the grid. */
+.kanuni-datagrid-root > .kanuni-datagrid-edit-bar {
+  flex: none;
+  border: 0;
+  border-bottom: 1px solid var(--dg-border);
+  border-radius: 0;
+}
+
+/* The filter, in words. Truncated rather than wrapped: the strip is one line
+   tall, and a growing bar would push the grid around as conditions are added.
+   The full sentence is on the element's title. */
+.kanuni-datagrid-filter-active {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: min(60ch, 50%);
+}
+
+/* ── Row / form / popup editing (G2) ──────────────────────── */
+/*
+ * One panel, two placements: in the row flow (`form`, the `--inline` variant
+ * below, inside a row slot the virtualizer sized) and in a dialog over the
+ * grid (`popup`).
+ */
+.kanuni-datagrid-edit-form {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  max-height: 60vh;
+  margin-bottom: 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  box-shadow: var(--dg-shadow-panel);
+  font-size: var(--dg-font-size);
+}
+
+/* Drawn inside a row slot: the row is already the card, so the panel drops the
+   chrome that exists to lift a FLOATING panel off the page. `max-height: 100%`
+   rather than 60vh — the slot's height is the budget here, and overflowing it
+   would spill over the rows below, which the virtualizer has already placed. */
+.kanuni-datagrid-edit-form--inline {
+  height: 100%;
+  max-height: 100%;
+  margin-bottom: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--dg-surface-header);
+}
+
+.kanuni-datagrid-edit-form-header {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--dg-border);
+  background: var(--dg-surface-header);
+  border-radius: var(--dg-radius) var(--dg-radius) 0 0;
+}
+
+.kanuni-datagrid-edit-form-fields {
+  flex: 1;
+  overflow: auto;
+  display: grid;
+  /* Two columns on a wide grid, one on a narrow one — without a media query,
+     which would key off the VIEWPORT when what matters is the grid's width. */
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 10px 16px;
+  padding: 14px;
+}
+
+.kanuni-datagrid-edit-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.kanuni-datagrid-edit-form-label {
+  font-size: 11px;
+  font-weight: 600;
+  opacity: 0.75;
+}
+
+.kanuni-datagrid-edit-form-input {
+  width: 100%;
+  min-width: 0;
+  padding: 4px 6px;
+  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-font-size);
+}
+
+input[type='checkbox'].kanuni-datagrid-edit-form-input {
+  width: auto;
+  accent-color: var(--dg-primary);
+}
+
+.kanuni-datagrid-edit-form-input:focus {
+  outline: 2px solid var(--dg-primary);
+  outline-offset: -1px;
+}
+
+.kanuni-datagrid-edit-form-field[data-invalid] .kanuni-datagrid-edit-form-input {
+  border-color: var(--dg-danger);
+}
+
+.kanuni-datagrid-edit-form-message {
+  color: var(--dg-danger-text);
+  font-size: 11px;
+}
+
+/* A rejected save, above the fields — where the eye already is after pressing
+   Save, rather than beside the button that is about to be pressed again. */
+.kanuni-datagrid-edit-form-error {
+  margin: 10px 14px 0;
+  padding: 6px 10px;
+  border-radius: var(--dg-radius-control);
+  background: color-mix(in srgb, var(--dg-danger) 12%, transparent);
+  color: var(--dg-danger-text);
+  font-size: var(--dg-chrome-font-size);
+}
+
+.kanuni-datagrid-edit-form-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--dg-border);
+  background: var(--dg-surface-header);
+  border-radius: 0 0 var(--dg-radius) var(--dg-radius);
+}
+
+.kanuni-datagrid-edit-form-hint {
+  margin-inline-end: auto;
+  font-size: 11px;
+  opacity: 0.65;
+}
+
+.kanuni-datagrid-edit-form-footer button {
+  padding: 4px 12px;
+  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-chrome-font-size);
+  cursor: pointer;
+}
+
+.kanuni-datagrid-edit-form-footer button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.kanuni-datagrid-edit-form-save {
+  border-color: var(--dg-primary) !important;
+  background: var(--dg-primary) !important;
+  color: var(--dg-on-primary) !important;
+}
+
+/* ── Popup mode ───────────────────────────────────────────── */
+.kanuni-datagrid-edit-popup {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kanuni-datagrid-edit-popup-overlay {
+  position: absolute;
+  inset: 0;
+  /* Opaque enough to read the form against a dense grid — the see-through
+     overlay was a real bug in PivotGrid's drill-down modal. */
+  background: var(--dg-overlay);
+}
+
+.kanuni-datagrid-edit-popup > .kanuni-datagrid-edit-form {
+  position: relative;
+  width: min(720px, 94vw);
+  max-height: 86vh;
+  margin-bottom: 0;
+  box-shadow: var(--dg-shadow-dialog);
+}
+
+/* While a row/form/popup session owns the record, the grid behind it must not
+   accept edits: a click that lands on a cell would change a value the user
+   cannot see is changing, in a record they believe is open in the dialog. */
+/* A modal covers the grid, so nothing under it should react at all. */
+.kanuni-datagrid-enterprise[data-row-session='popup'] .kanuni-datagrid-scroller,
+.kanuni-datagrid-root[data-row-session='popup'] .kanuni-datagrid-scroller {
+  pointer-events: none;
+}
+
+/* The in-grid form is INSIDE the scroller, so the lock is per row rather than
+   over the whole scroll area. Locking the scroller would take the form's own
+   fields and buttons with it — and the wheel, leaving a form taller than the
+   viewport with a Save nobody could scroll to. */
+.kanuni-datagrid-enterprise[data-row-session='form']
+  .kanuni-datagrid-row:not(.kanuni-datagrid-editform-row),
+.kanuni-datagrid-root[data-row-session='form']
+  .kanuni-datagrid-row:not(.kanuni-datagrid-editform-row) {
+  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
    ─────────────────────────────────────────────────────────────
@@ -3647,6 +4148,9 @@
   --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);
 
@@ -3995,6 +4499,9 @@
   --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 */
 }
 
@@ -4023,6 +4530,9 @@
   /* 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);
 }
@@ -4056,6 +4566,9 @@
   --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;
 }
 
@@ -4082,6 +4595,9 @@
   --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);
 }
@@ -4115,6 +4631,9 @@
   --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 */
 }
 
@@ -4141,6 +4660,9 @@
   --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);
 }
@@ -4173,6 +4695,9 @@
   --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. */
@@ -4202,6 +4727,9 @@
   --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);
 }
@@ -4235,6 +4763,9 @@
   --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 */
 }
 
@@ -4261,6 +4792,9 @@
   --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);
 }
@@ -4297,6 +4831,9 @@
   --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;
 }
 
@@ -4323,6 +4860,9 @@
   --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);
 }