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

package/dist/esm/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -17,7 +17,7 @@ const WindowTitle = ({ testId, color, children }) => {
     }, [setHeaderMounted]);
     return (_jsx(Text, { id: headerId, fontSize: "sm", fontWeight: 600, color: color, noOfLines: 1, "data-testid": `${testId}-title`, children: children }));
 };
-// Presentational floating "workspace window" (Jira-style dialog), headless — the parent owns window state.
+/** Floating Jira-style workspace window; headless, so the parent owns its `state`. */
 export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, labels, finalFocusRef, testId = "workspace-window", }) {
     var _a, _b, _c;
     // Must run before the early return: a minimized render would otherwise skip the hook
@@ -37,6 +37,7 @@ export default function WorkspaceWindow({ title, state, children, onMinimize, on
                 }, "data-testid": `${testId}-backdrop`, children: _jsxs(Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: raisedRule(theme.colors), bg: bandOn(theme.colors.background[100], theme.colors.surfaceRaised), flexShrink: 0, children: [_jsx(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(IconButton, { "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.openFullPage) !== null && _a !== void 0 ? _a : "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": (_c = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _c !== void 0 ? _c : "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
 const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
+/** Row of minimized-window pills, portalled above modals. */
 // Portalled above modal overlays; aria-live keeps Chakra's modal aria-hidden off it, data-no-focus-lock keeps the focus trap off it.
 export function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", placement = "bottom-end", offset, closeLabel, dirtyLabel = "Unsaved changes", label = "Minimized windows", renderItem, }) {
     var _a, _b;

package/dist/esm/Theme/tokens/brands/index.js

@@ -61,7 +61,7 @@ export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldD
 // NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.
 const resolveRungs = (palette) => withFocusRing(withSurfaceRungs(withSurfaceRaised(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette))))));
 const lightBrand = (source) => lazyPalette(source, () => resolveRungs(finalizeLightPalette(source)));
-/** Light palette per brand, derived on first read. `lavender` is the base the other six extend. */
+/** Light palette per brand, derived on first read. `lavender` is the base the other eight extend. */
 export const lightPalettes = {
     lavender: lightBrand(lavender),
     meadow: lightBrand(meadow),

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

@@ -1,4 +1,6 @@
-import { MIN_PERCEPTIBLE_STEP, resolveHoverTint, STACKED_STATE_STEP, tintStep, } from "./outlineRung.js";
+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) => {
     // Raw tertiary reaches 1.29:1 and reads as pressed; dark aliases it to the panel at 1.025:1.
     const selected = tintStep(colors.backgroundColor.tertiary, colors.surfaceRaised, MIN_PERCEPTIBLE_STEP);
@@ -8,3 +10,18 @@ export const listRowBackgrounds = (colors) => {
         selectedActive: tintStep(selected, selected, STACKED_STATE_STEP),
     };
 };
+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.
+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 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);
+    return { active, selected, selectedActive, keyboardRing: neutralStep(selectedActive, AA_NON_TEXT) };
+};

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

@@ -1,5 +1,8 @@
+import { isDarkCanvas } from "./accentText.js";
 const EDGE = "24px";
 const TINT = "rgba(0, 0, 0, 0.08)";
+const TINT_ON_DARK = "rgba(0, 0, 0, 0.32)";
+const VERTICAL_SHADOW = "8px";
 // CSS-only overflow hint via background-attachment local vs scroll — no listener, no extra node.
 export function scrollShadowStyles(surface) {
     return {
@@ -11,3 +14,15 @@ export function scrollShadowStyles(surface) {
         backgroundAttachment: "local, local, scroll, scroll",
     };
 }
+// NOTE: dark panels swallow an 8% black edge, so the vertical hint steps up on a dark surface.
+export function scrollShadowStylesVertical(surface) {
+    const tint = isDarkCanvas(surface) ? TINT_ON_DARK : TINT;
+    return {
+        backgroundColor: surface,
+        backgroundImage: `linear-gradient(${surface}, ${surface}), linear-gradient(${surface}, ${surface}), linear-gradient(${tint}, transparent), linear-gradient(transparent, ${tint})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: `100% ${EDGE}, 100% ${EDGE}, 100% ${VERTICAL_SHADOW}, 100% ${VERTICAL_SHADOW}`,
+        backgroundPosition: "0 0, 0 100%, 0 0, 0 100%",
+        backgroundAttachment: "local, local, scroll, scroll",
+    };
+}

package/package.json

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