@elasticias/ui 1.0.31 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/styles/_comptoir.scss

@@ -119,6 +119,22 @@
   --text-soft:  var(--ink-400);
   --ink-active: var(--ink-900);
 
+  /* The module rail is the shell's deepest chrome, and it is dark in BOTH
+     themes on purpose: it anchors the app rather than tracking the page.
+
+     It used to paint `--ink-active` on `--paper`. Both of those flip, so the
+     rail was a dark strip on a light app in light mode and a WHITE strip on a
+     dark app in dark mode — while its icons still hardcoded white, which
+     measured 1.03:1. The ink ramp itself is theme-independent (`--ink-900` is
+     #0f1115 under both `:root` and `.p-dark`); only the `--ink-active` alias
+     flips. Naming the ramp step directly is what makes the rail hold still. */
+  --rail-bg:      var(--ink-900);
+  --rail-fg:      #fff;
+  --rail-fg-mute: rgba(255, 255, 255, 0.6);
+  --rail-rule:    rgba(255, 255, 255, 0.08);
+  --rail-hover:   rgba(255, 255, 255, 0.08);
+  --rail-active:  rgba(255, 255, 255, 0.12);
+
   /* `--ink-soft` is not a ramp step and was never defined anywhere; it is an
      alias, added because eight call sites across three files already name it
      as `var(--ink-soft, #64748b)`. Undefined, every one of them fell through
@@ -192,6 +208,14 @@
   --text-mute:  var(--ink-400);
   --text-soft:  var(--ink-500);
   --ink-active: var(--ink-50);
+
+  /* The page is already `--ink-900` here, so the rail goes one step deeper to
+     stay a surface of its own instead of merging into the canvas. In light
+     mode the rail is far darker than the page; this keeps that relationship
+     rather than the literal colour. Everything painted on it stays white, so
+     only the ground is restated. */
+  --rail-bg: #08090c;
+
   /* Status pairs. Without these a chip kept its light pastel ground on a dark
      page — the one place the dark theme visibly fell apart, because chips are
      the densest colour in any list.

package/styles/_patterns.scss

@@ -734,7 +734,12 @@
 }
 
 .popover .preset.active .hint {
-  color: rgba(255, 255, 255, 0.7);
+  /* The active preset inverts against the page: its ground is `--ink-active`
+     and its ink `--paper`, and both flip together, so the pair stays readable
+     in either theme. This hint has to ride that inversion rather than assume
+     the ground is dark — hardcoded white measured 1.04:1 on the light ground
+     the token resolves to in dark mode. */
+  color: color-mix(in srgb, var(--paper) 70%, transparent);
 }
 
 .f-pill.has-pop {
@@ -1093,11 +1098,15 @@
 }
 
 .bulk .count {
-  color: rgba(255, 255, 255, 0.7);
+  /* `.bulk` inverts against the page (`--ink-active` ground, `--paper` ink),
+     and both flip together. The count has to ride that inversion; hardcoded
+     white read as white-on-white once the ground resolved light in dark mode.
+     Same for the buttons below, whose scrims were white-on-white too. */
+  color: color-mix(in srgb, var(--paper) 70%, transparent);
 }
 
 .bulk .btn {
-  background: rgba(255, 255, 255, 0.1);
+  background: color-mix(in srgb, var(--paper) 10%, transparent);
   color: var(--paper);
   border: 0;
   min-height: 28px;
@@ -1106,7 +1115,7 @@
 }
 
 .bulk .btn:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: color-mix(in srgb, var(--paper) 20%, transparent);
 }
 
 /* ──────────── EMPTY STATE ──────────────────────────────────────── */
@@ -2045,7 +2054,10 @@
 }
 
 .dp__preset.active .hint {
-  color: rgba(255, 255, 255, 0.7);
+  /* Rides the active preset's inversion, same as `.popover .preset.active
+     .hint`. The two lists are styled separately and carried the same
+     hardcoded white, so they broke in dark mode together. */
+  color: color-mix(in srgb, var(--paper) 70%, transparent);
 }
 
 .dp__preset.muted {