pixelize-design-library 2.4.2-beta.68 → 2.4.2-beta.69

package/CHANGELOG.md

@@ -14,7 +14,7 @@ line below names its issue number.
 ## [Unreleased] — 2.4.2-beta.x
 
 The theme-tokens/dark-mode line. Every entry below has shipped in a `2.4.2-beta.N` prerelease, the latest
-being `2.4.2-beta.67` (the `beta` dist-tag); betas carry no per-version headings, and "Unreleased" means not yet in
+being `2.4.2-beta.68` (the `beta` dist-tag); betas carry no per-version headings, and "Unreleased" means not yet in
 a stable release. The breaking items below land together in the next major.
 
 ### Added
@@ -584,9 +584,9 @@ a stable release. The breaking items below land together in the next major.
   cursor on a selected row the stacked rung, and Arrow/Home/End draw the same neutral 1px inset ring (also on Select All and
   Add New); the mouse clears it. Labels use `Select`'s neutral ink ladder in light (dark unchanged). Selected-label weight,
   radius, `activeIndex` sentinels, `insideSelect` and every prop, id and ARIA attribute are unchanged.
-- **`Select` popup, light: the selected row gets a fill (screenshots pending).** Hover stays today's faint brand tint
-  (lavender `#f1edf6`, emerald `#ebefef`). Selected is the next deeper step of the same tint (lavender `#e7e0f0`, emerald
-  `#dde4e4`, about 1.29:1 on the panel) and selected+hover one more (`#dfd6eb`, `#d2dbdb`), so hover, selected and both
+- **`Select` popup, light: the selected row gets a fill (screenshots pending).** Hover, selected and
+  selected+hover are neutral greys, identical on all nine brands (`#eeeeee`, `#e3e3e3`, `#dadada`; selected about 1.28:1 on the
+  panel; the first beta.68 build carried each brand's tint instead, strongest on meadow, and beta.69 removes it), so the three
   read as one family and every adjacent pair is at least 1.10:1 (selected vs stacked 1.08:1). Arrow-key navigation now
   also draws the neutral 1px inset ring in light (`#7b7b7b`, 3:1 on all four fills), because keyboard-on-selected is only
   1.08:1 from a plain selected row; the mouse never draws it. Multi checked rows get the same fill (checkbox fill stays

package/COMPONENT-GOTCHAS.md

@@ -1988,7 +1988,7 @@ from `optionRowDescriptionInk(theme.colors)` (exported from the package root) ra
 and mode, so a list that fills both the selected row and the hovered row shows two identical fills
 and the user cannot tell which one is chosen. Library option lists paint one fill — the cursor's —
 and mark selection with `optionRowWeight` plus a trailing `Check` in `colors.accentText`. (`Select`'s own popup
-additionally fills the selected row (a deeper step of the hover tint in light, a neutral rung in dark; not exported); a custom list keeps one fill.)
+additionally fills the selected row (neutral grey rungs in both modes, identical on every brand; not exported); a custom list keeps one fill.)
 
 **Apply:** `bg={optionRowFill(listRowBackgrounds(colors), isActive)}` for an index-driven list, or
 `{...optionRowCursorSx(listRowBackgrounds(colors))}` for rows that take DOM focus; both are exported

package/dist/Theme/tokens/builders/rowStates.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectRowBackgrounds = exports.DISTINCT_ROW_STEP = exports.SELECTED_ROW_STEP = exports.listRowBackgrounds = void 0;
-const accentText_1 = require("./accentText");
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
 const listRowBackgrounds = (colors) => {
@@ -16,17 +15,13 @@ const listRowBackgrounds = (colors) => {
 exports.listRowBackgrounds = listRowBackgrounds;
 exports.SELECTED_ROW_STEP = 1.28;
 exports.DISTINCT_ROW_STEP = 1.1;
-// NOTE: light steps deeper in the hover tint's own hue; dark uses neutral greys. Both derive direction from the panel.
+// NOTE: every rung is a neutral step off the panel, so hover and selected carry no brand hue in either mode.
 const selectRowBackgrounds = (colors) => {
     const panel = colors.surfaceRaised;
-    const { active: hoverTint } = (0, exports.listRowBackgrounds)(colors);
-    const isDark = (0, accentText_1.isDarkCanvas)(panel);
-    const active = isDark ? (0, outlineRung_1.neutralStep)(panel, outlineRung_1.MIN_PERCEPTIBLE_STEP) : hoverTint;
+    const active = (0, outlineRung_1.neutralStep)(panel, outlineRung_1.MIN_PERCEPTIBLE_STEP);
     const selectedStep = Math.max(exports.SELECTED_ROW_STEP, (0, color_1.contrastRatio)(active, panel) * exports.DISTINCT_ROW_STEP);
-    const selected = isDark ? (0, outlineRung_1.neutralStep)(panel, selectedStep) : (0, outlineRung_1.tintStep)(hoverTint, panel, selectedStep);
-    const selectedActive = isDark
-        ? (0, outlineRung_1.neutralStep)(selected, outlineRung_1.STACKED_STATE_STEP)
-        : (0, outlineRung_1.tintStep)(selected, selected, outlineRung_1.STACKED_STATE_STEP);
+    const selected = (0, outlineRung_1.neutralStep)(panel, selectedStep);
+    const selectedActive = (0, outlineRung_1.neutralStep)(selected, outlineRung_1.STACKED_STATE_STEP);
     return { active, selected, selectedActive, keyboardRing: (0, outlineRung_1.neutralStep)(selectedActive, outlineRung_1.AA_NON_TEXT) };
 };
 exports.selectRowBackgrounds = selectRowBackgrounds;

package/dist/esm/Theme/tokens/builders/rowStates.js

@@ -1,4 +1,3 @@
-import { isDarkCanvas } from "./accentText.js";
 import { contrastRatio } from "./color.js";
 import { AA_NON_TEXT, MIN_PERCEPTIBLE_STEP, neutralStep, resolveHoverTint, STACKED_STATE_STEP, tintStep, } from "./outlineRung.js";
 export const listRowBackgrounds = (colors) => {
@@ -12,16 +11,12 @@ export const listRowBackgrounds = (colors) => {
 };
 export const SELECTED_ROW_STEP = 1.28;
 export const DISTINCT_ROW_STEP = 1.1;
-// NOTE: light steps deeper in the hover tint's own hue; dark uses neutral greys. Both derive direction from the panel.
+// NOTE: every rung is a neutral step off the panel, so hover and selected carry no brand hue in either mode.
 export const selectRowBackgrounds = (colors) => {
     const panel = colors.surfaceRaised;
-    const { active: hoverTint } = listRowBackgrounds(colors);
-    const isDark = isDarkCanvas(panel);
-    const active = isDark ? neutralStep(panel, MIN_PERCEPTIBLE_STEP) : hoverTint;
+    const active = neutralStep(panel, MIN_PERCEPTIBLE_STEP);
     const selectedStep = Math.max(SELECTED_ROW_STEP, contrastRatio(active, panel) * DISTINCT_ROW_STEP);
-    const selected = isDark ? neutralStep(panel, selectedStep) : tintStep(hoverTint, panel, selectedStep);
-    const selectedActive = isDark
-        ? neutralStep(selected, STACKED_STATE_STEP)
-        : tintStep(selected, selected, STACKED_STATE_STEP);
+    const selected = neutralStep(panel, selectedStep);
+    const selectedActive = neutralStep(selected, STACKED_STATE_STEP);
     return { active, selected, selectedActive, keyboardRing: neutralStep(selectedActive, AA_NON_TEXT) };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.68",
+  "version": "2.4.2-beta.69",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",