@deadragdoll/reactnu 0.1.24 → 0.1.30

package/dist/components/PopupMenu/PopupMenu.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from "react";
 import { MainMenuItem, MainMenuNode } from "../MainMenu/MainMenu.types";
 export type PopupMenuPointAnchor = {
+    themeSource?: HTMLElement;
     type: "point";
     x: number;
     y: number;

package/dist/components/PopupMenu/usePopupMenu.d.ts

@@ -5,7 +5,7 @@ export declare function usePopupMenu(): {
     close: () => void;
     open: boolean;
     openAtElement: (element: HTMLElement) => void;
-    openAtPoint: (x: number, y: number) => void;
+    openAtPoint: (x: number, y: number, themeSource?: HTMLElement) => void;
     openFromClick: (event: MouseEvent<HTMLElement>) => void;
     openFromContextMenu: (event: MouseEvent<HTMLElement>) => void;
     setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;

package/dist/index.cjs

@@ -4495,7 +4495,7 @@ function PopupMenu({
         ref: rootRef,
         style: {
           ...getThemePortalStyle(
-            anchor?.type === "element" ? anchor.element : null
+            anchor.type === "element" ? anchor.element : anchor.themeSource ?? null
           ),
           ...styleProp,
           left: 0,
@@ -4528,8 +4528,9 @@ function usePopupMenu() {
   function close() {
     setOpen(false);
   }
-  function openAtPoint(x, y) {
+  function openAtPoint(x, y, themeSource) {
     setAnchor({
+      themeSource,
       type: "point",
       x,
       y
@@ -4548,7 +4549,7 @@ function usePopupMenu() {
   }
   function openFromContextMenu(event) {
     event.preventDefault();
-    openAtPoint(event.clientX, event.clientY);
+    openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
   return {
     anchor,
@@ -4688,7 +4689,7 @@ function NuIconGridItem({ gridElement, icon }) {
       return;
     }
     event.preventDefault();
-    contextMenu.openAtPoint(event.clientX, event.clientY);
+    contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
   function handleKeyDown(event) {
     if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey) || contextMenuItems.length === 0) {
@@ -4780,7 +4781,7 @@ function NuIconGrid({
     }
     event.preventDefault();
     manager.selectIcon(null);
-    contextMenu.openAtPoint(event.clientX, event.clientY);
+    contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
@@ -9898,11 +9899,48 @@ var midnightTheme = {
     windowModalBackdrop: "rgb(7 12 20 / 0.48)"
   }
 };
+var grayscaleTheme = {
+  name: "grayscale",
+  label: "Grayscale Monitor",
+  tokens: {
+    desktopBackground: "#808080",
+    desktopPattern: "rgb(0 0 0 / 0.3)",
+    shellBackground: "#202020",
+    appBackground: "#3f3f3f",
+    appBackgroundAlt: "#2b2b2b",
+    chromeBackground: "#727272",
+    panelBackground: "#3f3f3f",
+    panelInsetBackground: "#343434",
+    titleBackground: "#262626",
+    titleText: "#d0d0d0",
+    textPrimary: "#c8c8c8",
+    textMuted: "#969696",
+    textInverse: "#d0d0d0",
+    textAccent: "#e0e0e0",
+    textHotkey: "#ffffff",
+    buttonFace: "#5b5b5b",
+    buttonFaceAlt: "#414141",
+    buttonDanger: "#303030",
+    buttonSuccess: "#6b6b6b",
+    buttonText: "#d0d0d0",
+    fieldBackground: "#0e0e0e",
+    fieldText: "#d8d8d8",
+    borderLight: "#c7c7c7",
+    borderDark: "#000000",
+    borderAccent: "#ffffff",
+    shadowColor: "#000000",
+    panelShadowColor: "rgb(0 0 0 / 0.5)",
+    focusColor: "#ffffff",
+    windowInactiveOverlay: "rgb(0 0 0 / 0.34)",
+    windowModalBackdrop: "rgb(0 0 0 / 0.5)"
+  }
+};
 var nuThemes = {
   classic: classicTheme,
   amber: amberTheme,
   phosphor: phosphorTheme,
-  midnight: midnightTheme
+  midnight: midnightTheme,
+  grayscale: grayscaleTheme
 };
 function isNuThemeName(value) {
   return value in nuThemes;

package/dist/index.js

@@ -4454,7 +4454,7 @@ function PopupMenu({
         ref: rootRef,
         style: {
           ...getThemePortalStyle(
-            anchor?.type === "element" ? anchor.element : null
+            anchor.type === "element" ? anchor.element : anchor.themeSource ?? null
           ),
           ...styleProp,
           left: 0,
@@ -4487,8 +4487,9 @@ function usePopupMenu() {
   function close() {
     setOpen(false);
   }
-  function openAtPoint(x, y) {
+  function openAtPoint(x, y, themeSource) {
     setAnchor({
+      themeSource,
       type: "point",
       x,
       y
@@ -4507,7 +4508,7 @@ function usePopupMenu() {
   }
   function openFromContextMenu(event) {
     event.preventDefault();
-    openAtPoint(event.clientX, event.clientY);
+    openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
   return {
     anchor,
@@ -4647,7 +4648,7 @@ function NuIconGridItem({ gridElement, icon }) {
       return;
     }
     event.preventDefault();
-    contextMenu.openAtPoint(event.clientX, event.clientY);
+    contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
   function handleKeyDown(event) {
     if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey) || contextMenuItems.length === 0) {
@@ -4739,7 +4740,7 @@ function NuIconGrid({
     }
     event.preventDefault();
     manager.selectIcon(null);
-    contextMenu.openAtPoint(event.clientX, event.clientY);
+    contextMenu.openAtPoint(event.clientX, event.clientY, event.currentTarget);
   }
   return /* @__PURE__ */ jsxs20(
     "div",
@@ -9941,11 +9942,48 @@ var midnightTheme = {
     windowModalBackdrop: "rgb(7 12 20 / 0.48)"
   }
 };
+var grayscaleTheme = {
+  name: "grayscale",
+  label: "Grayscale Monitor",
+  tokens: {
+    desktopBackground: "#808080",
+    desktopPattern: "rgb(0 0 0 / 0.3)",
+    shellBackground: "#202020",
+    appBackground: "#3f3f3f",
+    appBackgroundAlt: "#2b2b2b",
+    chromeBackground: "#727272",
+    panelBackground: "#3f3f3f",
+    panelInsetBackground: "#343434",
+    titleBackground: "#262626",
+    titleText: "#d0d0d0",
+    textPrimary: "#c8c8c8",
+    textMuted: "#969696",
+    textInverse: "#d0d0d0",
+    textAccent: "#e0e0e0",
+    textHotkey: "#ffffff",
+    buttonFace: "#5b5b5b",
+    buttonFaceAlt: "#414141",
+    buttonDanger: "#303030",
+    buttonSuccess: "#6b6b6b",
+    buttonText: "#d0d0d0",
+    fieldBackground: "#0e0e0e",
+    fieldText: "#d8d8d8",
+    borderLight: "#c7c7c7",
+    borderDark: "#000000",
+    borderAccent: "#ffffff",
+    shadowColor: "#000000",
+    panelShadowColor: "rgb(0 0 0 / 0.5)",
+    focusColor: "#ffffff",
+    windowInactiveOverlay: "rgb(0 0 0 / 0.34)",
+    windowModalBackdrop: "rgb(0 0 0 / 0.5)"
+  }
+};
 var nuThemes = {
   classic: classicTheme,
   amber: amberTheme,
   phosphor: phosphorTheme,
-  midnight: midnightTheme
+  midnight: midnightTheme,
+  grayscale: grayscaleTheme
 };
 function isNuThemeName(value) {
   return value in nuThemes;

package/dist/styles.css

@@ -3497,11 +3497,6 @@
   outline: none;
   box-shadow: none;
 }
-.nu-window__title-button--close {
-  background: var(--nu-color-title-bg);
-  border: 1px solid var(--nu-border-light);
-  color: var(--nu-text-inverse);
-}
 .nu-window__body {
   min-width: 0;
   min-height: 0;

package/dist/theme/themes.d.ts

@@ -42,6 +42,7 @@ export declare const nuThemes: {
     readonly amber: NuThemeDefinition;
     readonly phosphor: NuThemeDefinition;
     readonly midnight: NuThemeDefinition;
+    readonly grayscale: NuThemeDefinition;
 };
 export type NuThemeName = keyof typeof nuThemes;
 export declare function isNuThemeName(value: string): value is NuThemeName;

package/docs/NuThemeProvider.md

@@ -59,7 +59,9 @@ Supported props:
 
 ## Notes
 
-- Built-in themes are `classic` (default), `amber`, `phosphor`, and `midnight`.
+- Built-in themes are `classic` (default), `amber`, `phosphor`, `midnight`, and
+  `grayscale`.
 - `midnight` is a restrained dark blue-gray palette with pale chrome and yellow focus accents.
+- `grayscale` is a high-contrast monochrome monitor palette. Semantic button variants use brightness rather than hue.
 - Theme tokens drive desktop, windowing, controls, selection, and inactive overlays.
 - Provider typography affects preview content, managed windows, dialogs, menus, and popup portals rendered inside the theme scope.

package/docs/PopupMenu.md

@@ -32,7 +32,7 @@ const popupMenu = usePopupMenu();
   - `open`
   - `setOpen`
   - `close()`
-  - `openAtPoint(x, y)`
+  - `openAtPoint(x, y, themeSource?)`
   - `openAtElement(element)`
   - `openFromClick(event)`
   - `openFromContextMenu(event)`
@@ -40,3 +40,6 @@ const popupMenu = usePopupMenu();
 ## Notes
 
 - Popup menus render through a portal and are not clipped by local overflow containers.
+- `openFromContextMenu(event)` carries the event target into the portal, so
+  context menus inherit tokens from the nearest `NuThemeProvider`. Pass the
+  optional `themeSource` to `openAtPoint(...)` when opening one manually.

package/docs/TOKEN_CHECKLIST.md

@@ -97,7 +97,7 @@ If a component needs a new reusable visual value, add it there first instead of
 - Shadows:
   - If it is raised, is it reusing button/window shadow logic instead of inventing a new one?
 - Theme coverage:
-  - Would the component still read correctly in `classic`, `amber`, `phosphor`, and `midnight`?
+- Would the component still read correctly in `classic`, `amber`, `phosphor`, `midnight`, and `grayscale`?
 - Hardcoded values:
   - Are any colors or dimensions local only because they are truly component-specific?
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deadragdoll/reactnu",
-  "version": "0.1.24",
+  "version": "0.1.30",
   "private": false,
   "description": "React components with a precise DOS-era utility interface.",
   "license": "MIT",