@deadragdoll/reactnu 0.1.14 → 0.1.16

package/dist/index.cjs

@@ -9451,10 +9451,47 @@ var phosphorTheme = {
     windowModalBackdrop: "rgb(6 18 8 / 0.34)"
   }
 };
+var midnightTheme = {
+  name: "midnight",
+  label: "Midnight Slate",
+  tokens: {
+    desktopBackground: "#1b2430",
+    desktopPattern: "rgb(156 177 201 / 0.24)",
+    shellBackground: "#101722",
+    appBackground: "#17273b",
+    appBackgroundAlt: "#0d1724",
+    chromeBackground: "#d4dde8",
+    panelBackground: "#17273b",
+    panelInsetBackground: "#111e2e",
+    titleBackground: "#d4dde8",
+    titleText: "#14233a",
+    textPrimary: "#e6edf7",
+    textMuted: "#aebdcd",
+    textInverse: "#0b1220",
+    textAccent: "#ffd166",
+    textHotkey: "#ff7171",
+    buttonFace: "#d4dde8",
+    buttonFaceAlt: "#9baabd",
+    buttonDanger: "#a94d57",
+    buttonSuccess: "#3c936d",
+    buttonText: "#0b1220",
+    fieldBackground: "#09111c",
+    fieldText: "#e6edf7",
+    borderLight: "#e6edf7",
+    borderDark: "#070c14",
+    borderAccent: "#ffd166",
+    shadowColor: "#070c14",
+    panelShadowColor: "rgb(7 12 20 / 0.56)",
+    focusColor: "#ffd166",
+    windowInactiveOverlay: "rgb(7 12 20 / 0.3)",
+    windowModalBackdrop: "rgb(7 12 20 / 0.48)"
+  }
+};
 var nuThemes = {
   classic: classicTheme,
   amber: amberTheme,
-  phosphor: phosphorTheme
+  phosphor: phosphorTheme,
+  midnight: midnightTheme
 };
 function isNuThemeName(value) {
   return value in nuThemes;

package/dist/index.js

@@ -9487,10 +9487,47 @@ var phosphorTheme = {
     windowModalBackdrop: "rgb(6 18 8 / 0.34)"
   }
 };
+var midnightTheme = {
+  name: "midnight",
+  label: "Midnight Slate",
+  tokens: {
+    desktopBackground: "#1b2430",
+    desktopPattern: "rgb(156 177 201 / 0.24)",
+    shellBackground: "#101722",
+    appBackground: "#17273b",
+    appBackgroundAlt: "#0d1724",
+    chromeBackground: "#d4dde8",
+    panelBackground: "#17273b",
+    panelInsetBackground: "#111e2e",
+    titleBackground: "#d4dde8",
+    titleText: "#14233a",
+    textPrimary: "#e6edf7",
+    textMuted: "#aebdcd",
+    textInverse: "#0b1220",
+    textAccent: "#ffd166",
+    textHotkey: "#ff7171",
+    buttonFace: "#d4dde8",
+    buttonFaceAlt: "#9baabd",
+    buttonDanger: "#a94d57",
+    buttonSuccess: "#3c936d",
+    buttonText: "#0b1220",
+    fieldBackground: "#09111c",
+    fieldText: "#e6edf7",
+    borderLight: "#e6edf7",
+    borderDark: "#070c14",
+    borderAccent: "#ffd166",
+    shadowColor: "#070c14",
+    panelShadowColor: "rgb(7 12 20 / 0.56)",
+    focusColor: "#ffd166",
+    windowInactiveOverlay: "rgb(7 12 20 / 0.3)",
+    windowModalBackdrop: "rgb(7 12 20 / 0.48)"
+  }
+};
 var nuThemes = {
   classic: classicTheme,
   amber: amberTheme,
-  phosphor: phosphorTheme
+  phosphor: phosphorTheme,
+  midnight: midnightTheme
 };
 function isNuThemeName(value) {
   return value in nuThemes;

package/dist/styles.css

@@ -49,6 +49,11 @@
   --nu-window-shadow-offset-x: 1ch;
   --nu-window-shadow-offset-y: 1em;
   --nu-window-inactive-overlay: rgba(0, 0, 0, 0.22);
+  --nu-window-inactive-border: color-mix(
+    in srgb,
+    var(--nu-border-light) 78%,
+    var(--nu-border-dark)
+  );
   --nu-window-modal-backdrop: rgba(0, 0, 0, 0.32);
   --nu-scrollbar-track: transparent;
   --nu-scrollbar-thumb: var(--nu-color-button-face);
@@ -3345,10 +3350,17 @@
 .nu-window[data-border="single"] {
   border: 1px solid var(--nu-border-light);
 }
+.nu-window:not([data-active])[data-border="single"] {
+  border-color: var(--nu-window-inactive-border);
+}
 .nu-window[data-border="double"] {
   border: 1px solid var(--nu-border-light);
   box-shadow: inset 0 0 0 1px var(--nu-border-light);
 }
+.nu-window:not([data-active])[data-border="double"] {
+  border-color: var(--nu-window-inactive-border);
+  box-shadow: inset 0 0 0 1px var(--nu-window-inactive-border);
+}
 .nu-window__shadow {
   position: absolute;
   z-index: -1;

package/dist/theme/themes.d.ts

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

package/docs/NuThemeProvider.md

@@ -59,6 +59,7 @@ Supported props:
 
 ## Notes
 
-- The default theme is the classic DOS/Norton-inspired palette.
+- Built-in themes are `classic` (default), `amber`, `phosphor`, and `midnight`.
+- `midnight` is a restrained dark blue-gray palette with pale chrome and yellow focus accents.
 - 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/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`, and `phosphor`?
+  - Would the component still read correctly in `classic`, `amber`, `phosphor`, and `midnight`?
 - 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.14",
+  "version": "0.1.16",
   "private": false,
   "description": "React components with a precise DOS-era utility interface.",
   "license": "MIT",