@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/styles/DataGrid.module.scss

@@ -109,7 +109,7 @@
 
 #smartTableSearchInput {
     background: #eeeeee;
-    border: 1px solid rgba(var(--table-color-rgb), 1.1);
+    border: 1px solid rgba(var(--table-color-rgb, 88, 214, 188), 1);
     border-radius: var(--br);
     color: var(--paragraph-color);
     padding: 10px 10px 10px 35px;
@@ -190,7 +190,7 @@
 
 .modal__header {
     width: 100%;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
+    border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -228,7 +228,7 @@
     min-width: 2rem;
     min-height: 2rem;
     box-sizing: border-box;
-    background: rgba(var(--paragraph-rgb), 0.05);
+    background: rgba(var(--paragraph-rgb, 43, 43, 43), 0.05);
     cursor: pointer;
     padding: 0.25rem;
     margin: 0;
@@ -242,7 +242,7 @@
     transition: all 0.2s ease;
 
     &:hover {
-        background: rgba(var(--paragraph-rgb), 0.1);
+        background: rgba(var(--paragraph-rgb, 43, 43, 43), 0.1);
     }
 
     svg {
@@ -286,7 +286,7 @@
         margin-bottom: 12px;
         padding: 10px 12px;
         background-color: #f0f7ff;
-        border: 1px solid rgba(var(--primary-rgb), 0.2);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
         border-radius: 6px;
         color: var(--secondary-color);
         font-size: 0.9rem;
@@ -441,7 +441,7 @@
     padding: 1.5rem;
     margin: 1rem auto;
     background: var(--tertiary-color);
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     border-radius: var(--br);
     max-width: 90%;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
@@ -810,7 +810,7 @@
         padding: 0 20px;
         margin-left: 0;
         font-size: 0.9rem;
-        border: 1px solid rgba(var(--primary-rgb, 59, 130, 246), 1.1);
+        border: 1px solid rgba(var(--primary-rgb, 59, 130, 246), 1);
         box-sizing: border-box;
         background-color: var(--primary-color, #3b82f6);
         color: var(--tertiary-color, white);
@@ -820,7 +820,7 @@
         &:hover {
             color: var(--tertiary-color, white);
             background-color: var(--secondary-color, #2563eb);
-            border: 1px solid rgba(var(--secondary-rgb, 37, 99, 235), 1.05);
+            border: 1px solid rgba(var(--secondary-rgb, 37, 99, 235), 1);
         }
 
         &:focus,
@@ -1695,3 +1695,450 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+// ============================================================================
+// 2026 pass — the grid's own chrome
+// ----------------------------------------------------------------------------
+// Appended rather than folded into the rules above, deliberately. The grid
+// itself is the vendored @visns-studio/visns-datagrid-* fork and its cell
+// markup is not ours to restyle; what IS ours is the frame around it — the
+// toolbar, the container, the action cell and the pagination bar — and that is
+// where the dated look actually lives: square corners, an edge-to-edge slab,
+// a search field with no affordance and a primary button welded to its edge.
+//
+// Everything here is a targeted override of a rule above, so the cascade order
+// is doing real work. Tokens carry fallbacks so a host that declares none
+// still renders.
+// ============================================================================
+
+.dataGridContainer {
+    --dg-surface: var(--background-color, #fff);
+    --dg-ink: var(--paragraph-color, #2b2b2b);
+    // Defers to the app's hairline token first, so the grid's edge is the same
+    // line as every card around it rather than a second opinion 12% of the way
+    // to the ink colour. The local expression stays as the fallback.
+    --dg-line: var(
+        --border-color,
+        color-mix(in srgb, var(--dg-ink) 12%, transparent)
+    );
+    --dg-muted: color-mix(in srgb, var(--dg-ink) 62%, transparent);
+    --dg-quiet: color-mix(in srgb, var(--dg-ink) 3%, var(--dg-surface));
+    --dg-hover: color-mix(in srgb, var(--primary-color, #1b3933) 5%, var(--dg-surface));
+    // 14px was the grid's own idea of a card corner while every other card on
+    // the page used `--br` (5px). `--dg-card-radius` is the hook an app points
+    // at its one card radius.
+    --dg-radius: var(--dg-card-radius, var(--card-radius, 14px));
+    --dg-motion: var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
+
+    border: 1px solid var(--dg-line);
+    border-radius: var(--dg-radius);
+    background: var(--dg-surface);
+    // One contact shadow plus one ambient, as on the dashboard card — a single
+    // large blur reads as a smudge. Deferred to `--shadow-sm` so there is one
+    // elevation in the app; this pair is the fallback.
+    box-shadow: var(
+        --shadow-sm,
+        0 1px 2px color-mix(in srgb, var(--primary-color, #1b3933) 8%, transparent),
+        0 8px 24px -12px color-mix(in srgb, var(--primary-color, #1b3933) 18%, transparent)
+    );
+    overflow: hidden;
+}
+
+// -- toolbar -----------------------------------------------------------------
+
+.dataGridTopContainer {
+    /* The `--dg-*` tokens are declared on `.dataGridContainer`, and the
+       toolbar is NOT inside it — measured: `container.contains(searchInput)`
+       is false. So every `var(--dg-line)` in here resolved to nothing, and a
+       `border: 1px solid var(--dg-line)` with no fallback is invalid at
+       computed-value time, which discards THE WHOLE DECLARATION. The result
+       was a search field with no border and no background: an invisible box
+       with a magnifier floating beside it.
+
+       This is the trap this file's own header warns about, so the tokens are
+       redeclared here rather than hoped for, and the uses below carry literal
+       fallbacks as well. */
+    --dg-surface: var(--background-color, #fff);
+    --dg-ink: var(--paragraph-color, #2b2b2b);
+    --dg-line: var(
+        --border-color,
+        color-mix(in srgb, var(--dg-ink) 12%, transparent)
+    );
+    --dg-muted: color-mix(in srgb, var(--dg-ink) 62%, transparent);
+    --dg-quiet: color-mix(in srgb, var(--dg-ink) 3%, var(--dg-surface));
+    --dg-motion: var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
+
+    /* ONE source of truth for control height inside the toolbar.
+    
+       The search field hardcoded 34px while every button resolved
+       `--control-height`, whose default is 2.5rem — so the field was 34px, the
+       Add New button beside it was 40px, and the button read as oversized
+       because it was. Scoped here rather than changed globally: retuning
+       `--control-height` for the whole library would resize every button in
+       every view to fix one toolbar. */
+    --control-height: var(--dg-control-h, 34px);
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    border-bottom: 1px solid var(--dg-line);
+    background: var(--dg-surface);
+}
+
+.dataGridTopLeftContainer,
+.dataGridTopRightContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+}
+
+.dataGridTopLeftContainer { flex: 1 1 18rem; }
+
+// The search field was a full-bleed strip with no border and no radius, which
+// read as part of the table rather than as a control.
+.searchContainer,
+.searchInputWrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 32rem;
+}
+
+/* The field and the primary action were flush against each other inside a
+   white, shadowed container, which read as ONE welded pill — a text box with a
+   dark blob fused to its right edge — rather than as a field and a button.
+   They are two different controls doing two different things, so they are
+   separated and the container stops drawing a card around them. */
+.searchContainer {
+    gap: 0.5rem;
+    background: none;
+    box-shadow: none;
+    border: none;
+    padding: 0;
+}
+
+/* The focus ring belongs to the FIELD, not to the pair.
+ *
+ * The pre-2026 rule put `box-shadow: 0 0 0 2px` on `.searchContainer:focus-within`,
+ * and that container wraps the search field AND the Add New button. Once the two
+ * were separated by a gap, focusing the field drew a ring around both of them —
+ * a stray line bridging the space between the input and the button, visible only
+ * while focused. `:focus-within` outspecifies the plain `.searchContainer` above,
+ * so it has to be turned off at matching specificity rather than by resetting the
+ * container.
+ *
+ * `.searchInput:focus` already carries its own ring, which is the correct target:
+ * the thing that has focus is the thing that should show it.
+ */
+.searchContainer:focus-within {
+    box-shadow: none;
+    border-color: transparent;
+}
+
+/* The toolbar's action buttons.
+ *
+ * These rules predate the 2026 pass and outspecified it: `.actionButtons >
+ * .btn` (0,2,0) hardcoded `height: 38px` and `border-radius: 0`, which beat
+ * `button-base`'s `min-height: var(--control-height)` and
+ * `border-radius: var(--radius-sm)` no matter what those tokens said. That is
+ * why the Add New button sat 4px taller than the field beside it with square
+ * corners, and why it read as oversized: it WAS oversized.
+ *
+ * `gap: 0` is the other half of the welded look — two adjacent actions with no
+ * space between them read as one wide control split by a hairline.
+ */
+.actionButtons,
+.actionButtonsStandalone {
+    /* Was a separate `--grid-toolbar-height` at 38px, a second source of truth
+       for a height the rest of the toolbar already had a token for. */
+    height: var(--control-height, 34px);
+    gap: 0.5rem;
+
+    > .btn {
+        height: var(--control-height, 34px);
+        /* The same radius token the search field beside it uses. `--radius-sm`
+           resolved to 4px here where the field's `--btn-br` gave 5px, and a
+           1px difference between two controls on one row is the kind of thing
+           you cannot name but can see. */
+        border-radius: var(--btn-br, var(--radius-sm, 8px));
+        /* 0.9rem here against 0.8125rem on every other control in the row. */
+        font-size: var(--font-size-sm, 0.8125rem);
+        padding: 0 var(--spacing-md, 1rem);
+    }
+}
+
+.searchInput,
+.filterInput {
+    width: 100%;
+    /* Same token the buttons beside it resolve — see .dataGridTopContainer. */
+    height: var(--control-height, 34px);
+    padding: 0 0.75rem 0 2rem;
+    /* Literal fallbacks, not decoration: this field renders OUTSIDE
+       `.dataGridContainer`, so before the token block was added to
+       `.dataGridTopContainer` above, each of these three was a bare `var()`
+       resolving to nothing — and one invalid var() discards its whole
+       declaration, which is how the field lost its border AND its background
+       at once. */
+    border: 1px solid var(--dg-line, rgba(43, 43, 43, 0.14));
+    border-radius: var(--btn-br, 8px);
+    background: var(--dg-quiet, #fafafa);
+    color: var(--dg-ink, #2b2b2b);
+    font: inherit;
+    font-size: 0.8125rem;
+    transition: border-color var(--dg-motion), background var(--dg-motion);
+}
+
+.searchInput::placeholder,
+.filterInput::placeholder { color: var(--dg-muted, #6b7280); }
+
+/* The focus ring. Literal fallbacks so an undeclared token cannot discard the
+   whole declaration — this field renders outside `.dataGridContainer`, which
+   is where the `--dg-*` tokens are declared. */
+.searchInput:focus,
+.filterInput:focus {
+    outline: none;
+    background: var(--dg-surface, #fff);
+    border-color: color-mix(
+        in srgb,
+        var(--primary-color, #1b3933) 45%,
+        var(--dg-line, rgba(43, 43, 43, 0.14))
+    );
+    box-shadow: 0 0 0 3px
+        color-mix(
+            in srgb,
+            var(--highlight-color, #3cbf7d) 22%,
+            transparent
+        );
+}
+
+.icon-search {
+    position: absolute;
+    /* Paired with the input's `padding-left` above: the glyph sits in the
+       indent the field leaves for it. Change one and change the other. */
+    left: 0.6rem;
+    display: flex;
+    align-items: center;
+    color: var(--dg-muted, #6b7280);
+    pointer-events: none;
+}
+
+// -- action cell -------------------------------------------------------------
+// The per-row actions were bare 12px glyphs with no hit area — under the 24px
+// minimum a pointer target wants, and invisible until you knew to look.
+
+.tdactions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.15rem;
+}
+
+.tdaction {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-sm, 6px);
+    background: none;
+    color: var(--dg-muted);
+    line-height: 1;
+    cursor: pointer;
+    transition: background var(--dg-motion), color var(--dg-motion);
+}
+
+.tdaction:hover {
+    background: var(--dg-hover);
+    color: var(--primary-color, #1b3933);
+}
+
+.tdaction:focus-visible {
+    outline: 2px solid var(--highlight-color, #3cbf7d);
+    outline-offset: 1px;
+}
+
+/* The wrapper around one action icon. Carries no look of its own — it exists
+   so the quick-assign menu's outside-click dismissal can recognise the
+   trigger — but it must not add a line box that pushes the icon off centre. */
+.rowActionTrigger {
+    display: inline-flex;
+    align-items: center;
+}
+
+/* -- quick-assign menu -------------------------------------------------------
+   Rendered at the root of the component and positioned `fixed` from the
+   trigger's rect, because the grid's cells clip their overflow. Literal
+   fallbacks throughout: it renders outside `.dataGridContainer`, where the
+   `--dg-*` tokens are declared, so an unresolved token would discard the whole
+   declaration and leave a transparent, borderless panel. */
+.rowActionPicker {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid var(--dg-line, rgba(43, 43, 43, 0.14));
+    border-radius: var(--radius-md, 8px);
+    background: var(--dg-surface, #fff);
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
+    font-size: 0.8125rem;
+    text-align: left;
+}
+
+.rowActionPickerHeader {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.45rem 0.5rem;
+    border-bottom: 1px solid var(--dg-line, rgba(43, 43, 43, 0.14));
+    background: var(--dg-quiet, #fafafa);
+    color: var(--dg-muted, #6b7280);
+}
+
+/* This field IS the header strip, not a box inside it — a bordered input
+   inside a bordered panel reads as two menus. global.css's blanket input rule
+   would give it a border, a 1rem padding and a white ground, and that rule
+   sits at roughly (0,13,1) so no sane selector here outranks it. It carries an
+   opt-out list for exactly this, matched on a class-name SUBSTRING, and
+   `rowActionPickerSearch` is now on it — see the long note there. */
+.rowActionPickerSearch {
+    flex: 1;
+    min-width: 0;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    font-size: 0.8125rem;
+    color: var(--dg-ink, #2b2b2b);
+}
+
+.rowActionPickerSearch:focus {
+    outline: none;
+}
+
+.rowActionPickerSearch::placeholder {
+    color: var(--dg-muted, #6b7280);
+}
+
+.rowActionPickerClose {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-sm, 6px);
+    background: none;
+    color: var(--dg-muted, #6b7280);
+    cursor: pointer;
+}
+
+.rowActionPickerClose:hover {
+    background: var(--dg-hover, rgba(27, 57, 51, 0.05));
+    color: var(--primary-color, #1b3933);
+}
+
+.rowActionPickerList {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.25rem;
+}
+
+.rowActionPickerOption {
+    display: block;
+    width: 100%;
+    padding: 0.4rem 0.5rem;
+    border: 0;
+    border-radius: var(--radius-sm, 6px);
+    background: none;
+    color: var(--dg-ink, #2b2b2b);
+    font: inherit;
+    text-align: left;
+    /* Long names truncate rather than wrap: the menu is a fixed width and a
+       two-line row makes the list jump as you type. */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+
+.rowActionPickerOption:hover,
+.rowActionPickerOption:focus-visible {
+    outline: none;
+    background: var(--dg-hover, rgba(27, 57, 51, 0.05));
+    color: var(--primary-color, #1b3933);
+}
+
+.rowActionPickerClear {
+    color: var(--dg-muted, #6b7280);
+    font-style: italic;
+}
+
+.rowActionPickerEmpty {
+    padding: 0.5rem;
+    color: var(--dg-muted, #6b7280);
+    text-align: center;
+}
+
+// -- pagination --------------------------------------------------------------
+
+.dataGridBottomContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 0.75rem;
+    border-top: 1px solid var(--dg-line);
+    background: var(--dg-quiet);
+    color: var(--dg-muted);
+    font-size: 0.75rem;
+    // A row of counts and page numbers: tabular so the digits stop jittering
+    // as you page through.
+    font-variant-numeric: tabular-nums;
+}
+
+.dataGridBottomContainer button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 28px;
+    border: 0;
+    border-radius: var(--radius-sm, 6px);
+    background: none;
+    color: var(--dg-muted);
+    cursor: pointer;
+    transition: background var(--dg-motion), color var(--dg-motion);
+}
+
+.dataGridBottomContainer button:hover:not(:disabled) {
+    background: var(--dg-hover);
+    color: var(--primary-color, #1b3933);
+}
+
+.dataGridBottomContainer button:disabled {
+    opacity: 0.4;
+    cursor: default;
+}
+
+// -- empty state -------------------------------------------------------------
+
+.noDataMessage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 8rem;
+    padding: 2rem 1rem;
+    color: var(--dg-muted);
+    font-size: 0.875rem;
+}

package/src/components/styles/Field.module.scss

@@ -48,9 +48,9 @@
     justify-content: center;
     min-width: 42px;
     min-height: 3.1rem;
-    background: rgba(var(--primary-color-rgb), 0.08);
+    background: rgba(var(--primary-color-rgb, 27, 57, 51), 0.08);
     color: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
+    border: 1px solid rgba(var(--primary-color-rgb, 27, 57, 51), 0.25);
     border-left: none;
     border-top-right-radius: var(--br);
     border-bottom-right-radius: var(--br);
@@ -68,7 +68,7 @@
     left: 0;
     width: 1px;
     height: 60%;
-    background: rgba(var(--primary-color-rgb), 0.15);
+    background: rgba(var(--primary-color-rgb, 27, 57, 51), 0.15);
 }
 
 .buttonRight:hover {
@@ -82,7 +82,7 @@
 }
 
 .buttonRight:focus {
-    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
+    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 27, 57, 51), 0.2);
 }
 
 /* Fallback for browsers that don't support :has() */
@@ -164,17 +164,20 @@
         font-size: 0.85rem;
         background: white;
         border-radius: var(--br);
-        // border: 1px solid rgba(var(--paragraph-rgb), 0.15);
+        // border: 1px solid rgba(var(--paragraph-rgb, 43, 43, 43), 0.15);
         color: var(--paragraph-color);
         box-sizing: border-box;
         transition: box-shadow 0.15s linear, border 0.15s linear;
 
-        :hover {
-            border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
+        /* Were `:hover` / `:focus-within` without the `&`, which in Sass is a
+           DESCENDANT selector — they matched children of the field, never the
+           field itself, so its hover and focus border never applied. */
+        &:hover {
+            border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.85);
         }
 
-        :focus-within {
-            border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
+        &:focus-within {
+            border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.85);
         }
     }
 
@@ -212,7 +215,7 @@
         appearance: none;
         width: 14px;
         height: 14px;
-        border: 1px solid rgba(var(--paragraph-color-rgb), 0.5);
+        border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.5);
         outline: none;
         position: relative;
         cursor: pointer;
@@ -308,7 +311,7 @@ select:not(:placeholder-shown) + .fi__span {
     background: var(--tertiary-color);
     font-weight: 400;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
-    color: rgba(var(--paragraph-rgb), 0.65);
+    color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.65);
 }
 
 .prefocus {
@@ -322,7 +325,7 @@ select:not(:placeholder-shown) + .fi__span {
     font-weight: 400;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
     z-index: 1;
-    color: rgba(var(--paragraph-rgb), 0.65);
+    color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.65);
     padding: 0 0.25rem;
 }
 
@@ -337,7 +340,7 @@ select:not(:placeholder-shown) + .fi__span {
     font-weight: 400;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
     z-index: 1;
-    color: rgba(var(--paragraph-rgb), 0.65);
+    color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.65);
     padding: 0 0.25rem;
 }
 
@@ -395,7 +398,7 @@ select:not(:placeholder-shown) + .fi__span {
     ):not([type='radio']):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):hover {
-    border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
+    border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.85);
     transition: border 0.15s linear;
 }
 
@@ -407,7 +410,7 @@ select:not(:placeholder-shown) + .fi__span {
     ):not([type='radio']):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):focus {
-    border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
+    border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.85);
 }
 
 .formItem textarea {
@@ -546,7 +549,7 @@ input[type='file']:hover {
 }
 
 .contentTable tbody tr:nth-of-type(even) {
-    background: rgba(var(--item-color-rgb), 1.02);
+    background: rgba(var(--item-color-rgb, 255, 255, 255), 1);
 }
 
 .gridtxt__header {
@@ -696,7 +699,7 @@ input[type='file']:hover {
         &__header {
             width: 100%;
             background: var(--primary-color);
-            border: 2px solid rgba(var(--primary-color), 1.05);
+            border: 2px solid color-mix(in srgb, var(--primary-color, #1b3933) 100%, transparent);
             border-top-left-radius: var(--br);
             border-top-right-radius: var(--br);
             box-sizing: border-box;
@@ -719,7 +722,7 @@ input[type='file']:hover {
                 right: 5px;
                 top: 5px;
                 box-sizing: border-box;
-                /* Was `rgba(var(--primary-color), 1.08)`, which is not a
+                /* Was `color-mix(in srgb, var(--primary-color, #1b3933) 100%, transparent)`, which is not a
                    colour: `--primary-color` is a hex, rgba() wants three
                    channels, and an alpha above 1 is out of range either way.
                    The declaration was invalid and dropped, so this button had
@@ -769,7 +772,7 @@ input[type='file']:hover {
 
             .btn {
                 background: var(--primary-color);
-                border: 1px solid rgba(var(--primary-color), 1.05);
+                border: 1px solid color-mix(in srgb, var(--primary-color, #1b3933) 100%, transparent);
 
                 &:hover {
                     background: var(--secondary-color);
@@ -842,9 +845,9 @@ input[type='file']:hover {
         }
 
         .drawactive {
-            border: 1px solid rgba(var(--paragraph-color-rgb), 1.4);
-            background: rgba(var(--paragraph-color-rgb), 0.2);
-            color: rgba(var(--paragraph-color-rgb), 1.05);
+            border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 1);
+            background: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.2);
+            color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 1);
         }
     }
 }
@@ -853,7 +856,7 @@ input[type='file']:hover {
     display: block;
     flex: 0 1 80%;
     margin: 0;
-    border: 1px dashed rgba(var(--primary-color-rgb), 1.2);
+    border: 1px dashed rgba(var(--primary-color-rgb, 27, 57, 51), 1);
     padding: 5px;
     overflow: hidden;
     box-sizing: border-box;
@@ -1676,7 +1679,12 @@ input[type='file']:hover {
 }
 
 /* Dark mode support */
-@media (prefers-color-scheme: dark) {
+// The app ships a single light theme. These dark overrides used to fire
+// straight off the OS setting, which left the app half-dark at night: only 4
+// of 72 stylesheets carry dark rules, so dark surfaces ended up wearing
+// light-theme text. They now apply only when `data-theme="dark"` is opted
+// into explicitly, so the work survives for a real theme toggle later.
+:root[data-theme='dark'] {
     .emailSuggestions {
         background: var(--dark-item-color, #2d3748);
         border-color: var(--dark-border-color, #4a5568);