@deadragdoll/reactnu 0.1.77 → 0.1.78

package/dist/index.cjs

@@ -10577,6 +10577,9 @@ var phosphorTheme = {
 var midnightTheme = {
   name: "midnight",
   label: "Midnight Slate",
+  desktopPatternMode: "coarse-dots",
+  fontFamily: '"Courier New", Courier, monospace',
+  fontSize: 16,
   tokens: {
     desktopBackground: "#1b2430",
     desktopPattern: "rgb(156 177 201 / 0.24)",
@@ -10586,10 +10589,10 @@ var midnightTheme = {
     chromeBackground: "#36547d",
     panelBackground: "#192c43",
     panelInsetBackground: "#111e2e",
-    titleBackground: "#0b2432",
-    menuBackground: "#1c2945",
-    titleText: "#c2d0e5",
-    textPrimary: "#6b9adb",
+    titleBackground: "#1b3550",
+    menuBackground: "#1a2337",
+    titleText: "#a8cbff",
+    textPrimary: "#b3d2ff",
     textMuted: "#65a8ec",
     textInverse: "#b7caf0",
     mainMenuText: "#b7caf0",
@@ -10598,7 +10601,7 @@ var midnightTheme = {
     buttonFace: "#5074af",
     buttonFaceAlt: "#3c5372",
     buttonDanger: "#4e0e15",
-    buttonSuccess: "#3c936d",
+    buttonSuccess: "#275214",
     buttonText: "#ffffff",
     fieldBackground: "#09111c",
     fieldText: "#627b9d",
@@ -10610,6 +10613,66 @@ var midnightTheme = {
     focusColor: "#af532c",
     windowInactiveOverlay: "rgb(7 12 20 / 0.3)",
     windowModalBackdrop: "rgb(7 12 20 / 0.48)"
+  },
+  visualTokens: {
+    "--nu-glyph-cell-size": "1em",
+    "--nu-content-inset": "1em 1ch",
+    "--nu-control-height": "1.2em",
+    "--nu-space-xs": "0.25rem",
+    "--nu-space-sm": "0.5rem",
+    "--nu-space-md": "0.75rem",
+    "--nu-space-lg": "1rem",
+    "--nu-space-xl": "1.5rem",
+    "--nu-radius-none": "0",
+    "--nu-window-title-height": "calc(1em + 10px)",
+    "--nu-window-status-height": "1.35rem",
+    "--nu-window-title-controls-width": "7.8ch",
+    "--nu-window-title-icon-width": "1em",
+    "--nu-frame-thickness": "1px",
+    "--nu-rule-thickness": "1px",
+    "--nu-window-shadow-offset-x": "1ch",
+    "--nu-window-shadow-offset-y": "1em",
+    "--nu-button-shadow-x": "1ch",
+    "--nu-button-shadow-y": "calc(var(--nu-control-height) / 2)",
+    "--nu-button-shadow-offset-x": "var(--nu-button-shadow-x)",
+    "--nu-button-shadow-offset-y": "calc(var(--nu-control-height) / 2)",
+    "--nu-button-press-depth-x": "0.18em",
+    "--nu-button-press-depth-y": "0.1em",
+    "--nu-app-bar-height": "2.1rem",
+    "--nu-app-bar-padding": "0.2rem 0.35rem",
+    "--nu-toolbar-background": "#1b3550",
+    "--nu-toolbar-inset": "1ch",
+    "--nu-toolbar-border-color": "var(--nu-border-dark)",
+    "--nu-toolbar-border-style": "none",
+    "--nu-toolbar-border-width": "var(--nu-rule-thickness)",
+    "--nu-toolbar-separator-color": "#6184bd",
+    "--nu-toolbar-separator-style": "solid",
+    "--nu-toolbar-separator-width": "var(--nu-rule-thickness)",
+    "--nu-menu-divider-color": "#3d5a8a",
+    "--nu-menu-divider-style": "solid",
+    "--nu-menu-divider-width": "var(--nu-rule-thickness)",
+    "--nu-window-shadow-bg": "rgb(0 0 0 / 0.38)",
+    "--nu-window-inactive-border": "color-mix(in srgb, var(--nu-border-light) 78%, var(--nu-border-dark))",
+    "--nu-scrollbar-track": "transparent",
+    "--nu-scrollbar-thumb": "var(--nu-color-button-face)",
+    "--nu-scrollbar-button-bg": "var(--nu-color-button-face)",
+    "--nu-scrollbar-button-size": "0.875rem",
+    "--nu-icon-grid-icon-background": "transparent",
+    "--nu-icon-grid-icon-border-color": "transparent",
+    "--nu-icon-grid-icon-border-style": "solid",
+    "--nu-icon-grid-icon-opacity": "1",
+    "--nu-icon-grid-icon-selected-background": "var(--nu-color-title-bg)",
+    "--nu-icon-grid-icon-inactive-selected-background": "color-mix(in srgb, var(--nu-icon-grid-icon-selected-background) 65%, var(--nu-color-app-bg-alt))",
+    "--nu-icon-grid-icon-selected-border-color": "transparent",
+    "--nu-icon-grid-icon-selected-border-style": "none",
+    "--nu-icon-grid-icon-selected-opacity": "1",
+    "--nu-icon-grid-icon-focus-background": "#153051",
+    "--nu-icon-grid-icon-focus-border-color": "#5672bd",
+    "--nu-icon-grid-icon-focus-border-style": "solid",
+    "--nu-icon-grid-icon-focus-opacity": "1",
+    "--nu-icon-grid-icon-disabled-opacity": "0.6",
+    "--nu-icon-grid-icon-drag-opacity": "0.35",
+    "--nu-icon-grid-icon-drag-preview-opacity": "0.85"
   }
 };
 var grayscaleTheme = {
@@ -10698,7 +10761,8 @@ function getNuThemeStyle(theme) {
     "--nu-panel-shadow-color": theme.tokens.panelShadowColor,
     "--nu-focus-color": theme.tokens.focusColor ?? theme.tokens.borderAccent,
     "--nu-window-inactive-overlay": theme.tokens.windowInactiveOverlay,
-    "--nu-window-modal-backdrop": theme.tokens.windowModalBackdrop
+    "--nu-window-modal-backdrop": theme.tokens.windowModalBackdrop,
+    ...theme.visualTokens
   };
 }
 function getNuDesktopPatternStyle(mode) {
@@ -10754,9 +10818,9 @@ function NuThemeProvider({
   children,
   className,
   crtGlitch = false,
-  defaultDesktopPatternMode = "dot-grid",
-  defaultFontFamily = '"IBM Plex Mono", "Cascadia Mono", "Consolas", monospace',
-  defaultFontSize = 16,
+  defaultDesktopPatternMode,
+  defaultFontFamily,
+  defaultFontSize,
   defaultTheme = "classic",
   desktopPatternMode,
   fontFamily,
@@ -10769,10 +10833,17 @@ function NuThemeProvider({
   theme
 }) {
   const generatedId = (0, import_react49.useId)();
+  const defaultThemeDefinition = resolveNuTheme(theme ?? defaultTheme);
   const [internalTheme, setInternalTheme] = (0, import_react49.useState)(defaultTheme);
-  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = (0, import_react49.useState)(defaultDesktopPatternMode);
-  const [internalFontFamily, setInternalFontFamily] = (0, import_react49.useState)(defaultFontFamily);
-  const [internalFontSize, setInternalFontSize] = (0, import_react49.useState)(defaultFontSize);
+  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = (0, import_react49.useState)(
+    () => defaultDesktopPatternMode ?? defaultThemeDefinition.desktopPatternMode ?? "dot-grid"
+  );
+  const [internalFontFamily, setInternalFontFamily] = (0, import_react49.useState)(
+    () => defaultFontFamily ?? defaultThemeDefinition.fontFamily ?? '"IBM Plex Mono", "Cascadia Mono", "Consolas", monospace'
+  );
+  const [internalFontSize, setInternalFontSize] = (0, import_react49.useState)(
+    () => defaultFontSize ?? defaultThemeDefinition.fontSize ?? 16
+  );
   const currentTheme = theme ?? internalTheme;
   const resolvedDesktopPatternMode = desktopPatternMode ?? internalDesktopPatternMode;
   const resolvedFontFamily = fontFamily ?? internalFontFamily;

package/dist/index.js

@@ -10626,6 +10626,9 @@ var phosphorTheme = {
 var midnightTheme = {
   name: "midnight",
   label: "Midnight Slate",
+  desktopPatternMode: "coarse-dots",
+  fontFamily: '"Courier New", Courier, monospace',
+  fontSize: 16,
   tokens: {
     desktopBackground: "#1b2430",
     desktopPattern: "rgb(156 177 201 / 0.24)",
@@ -10635,10 +10638,10 @@ var midnightTheme = {
     chromeBackground: "#36547d",
     panelBackground: "#192c43",
     panelInsetBackground: "#111e2e",
-    titleBackground: "#0b2432",
-    menuBackground: "#1c2945",
-    titleText: "#c2d0e5",
-    textPrimary: "#6b9adb",
+    titleBackground: "#1b3550",
+    menuBackground: "#1a2337",
+    titleText: "#a8cbff",
+    textPrimary: "#b3d2ff",
     textMuted: "#65a8ec",
     textInverse: "#b7caf0",
     mainMenuText: "#b7caf0",
@@ -10647,7 +10650,7 @@ var midnightTheme = {
     buttonFace: "#5074af",
     buttonFaceAlt: "#3c5372",
     buttonDanger: "#4e0e15",
-    buttonSuccess: "#3c936d",
+    buttonSuccess: "#275214",
     buttonText: "#ffffff",
     fieldBackground: "#09111c",
     fieldText: "#627b9d",
@@ -10659,6 +10662,66 @@ var midnightTheme = {
     focusColor: "#af532c",
     windowInactiveOverlay: "rgb(7 12 20 / 0.3)",
     windowModalBackdrop: "rgb(7 12 20 / 0.48)"
+  },
+  visualTokens: {
+    "--nu-glyph-cell-size": "1em",
+    "--nu-content-inset": "1em 1ch",
+    "--nu-control-height": "1.2em",
+    "--nu-space-xs": "0.25rem",
+    "--nu-space-sm": "0.5rem",
+    "--nu-space-md": "0.75rem",
+    "--nu-space-lg": "1rem",
+    "--nu-space-xl": "1.5rem",
+    "--nu-radius-none": "0",
+    "--nu-window-title-height": "calc(1em + 10px)",
+    "--nu-window-status-height": "1.35rem",
+    "--nu-window-title-controls-width": "7.8ch",
+    "--nu-window-title-icon-width": "1em",
+    "--nu-frame-thickness": "1px",
+    "--nu-rule-thickness": "1px",
+    "--nu-window-shadow-offset-x": "1ch",
+    "--nu-window-shadow-offset-y": "1em",
+    "--nu-button-shadow-x": "1ch",
+    "--nu-button-shadow-y": "calc(var(--nu-control-height) / 2)",
+    "--nu-button-shadow-offset-x": "var(--nu-button-shadow-x)",
+    "--nu-button-shadow-offset-y": "calc(var(--nu-control-height) / 2)",
+    "--nu-button-press-depth-x": "0.18em",
+    "--nu-button-press-depth-y": "0.1em",
+    "--nu-app-bar-height": "2.1rem",
+    "--nu-app-bar-padding": "0.2rem 0.35rem",
+    "--nu-toolbar-background": "#1b3550",
+    "--nu-toolbar-inset": "1ch",
+    "--nu-toolbar-border-color": "var(--nu-border-dark)",
+    "--nu-toolbar-border-style": "none",
+    "--nu-toolbar-border-width": "var(--nu-rule-thickness)",
+    "--nu-toolbar-separator-color": "#6184bd",
+    "--nu-toolbar-separator-style": "solid",
+    "--nu-toolbar-separator-width": "var(--nu-rule-thickness)",
+    "--nu-menu-divider-color": "#3d5a8a",
+    "--nu-menu-divider-style": "solid",
+    "--nu-menu-divider-width": "var(--nu-rule-thickness)",
+    "--nu-window-shadow-bg": "rgb(0 0 0 / 0.38)",
+    "--nu-window-inactive-border": "color-mix(in srgb, var(--nu-border-light) 78%, var(--nu-border-dark))",
+    "--nu-scrollbar-track": "transparent",
+    "--nu-scrollbar-thumb": "var(--nu-color-button-face)",
+    "--nu-scrollbar-button-bg": "var(--nu-color-button-face)",
+    "--nu-scrollbar-button-size": "0.875rem",
+    "--nu-icon-grid-icon-background": "transparent",
+    "--nu-icon-grid-icon-border-color": "transparent",
+    "--nu-icon-grid-icon-border-style": "solid",
+    "--nu-icon-grid-icon-opacity": "1",
+    "--nu-icon-grid-icon-selected-background": "var(--nu-color-title-bg)",
+    "--nu-icon-grid-icon-inactive-selected-background": "color-mix(in srgb, var(--nu-icon-grid-icon-selected-background) 65%, var(--nu-color-app-bg-alt))",
+    "--nu-icon-grid-icon-selected-border-color": "transparent",
+    "--nu-icon-grid-icon-selected-border-style": "none",
+    "--nu-icon-grid-icon-selected-opacity": "1",
+    "--nu-icon-grid-icon-focus-background": "#153051",
+    "--nu-icon-grid-icon-focus-border-color": "#5672bd",
+    "--nu-icon-grid-icon-focus-border-style": "solid",
+    "--nu-icon-grid-icon-focus-opacity": "1",
+    "--nu-icon-grid-icon-disabled-opacity": "0.6",
+    "--nu-icon-grid-icon-drag-opacity": "0.35",
+    "--nu-icon-grid-icon-drag-preview-opacity": "0.85"
   }
 };
 var grayscaleTheme = {
@@ -10747,7 +10810,8 @@ function getNuThemeStyle(theme) {
     "--nu-panel-shadow-color": theme.tokens.panelShadowColor,
     "--nu-focus-color": theme.tokens.focusColor ?? theme.tokens.borderAccent,
     "--nu-window-inactive-overlay": theme.tokens.windowInactiveOverlay,
-    "--nu-window-modal-backdrop": theme.tokens.windowModalBackdrop
+    "--nu-window-modal-backdrop": theme.tokens.windowModalBackdrop,
+    ...theme.visualTokens
   };
 }
 function getNuDesktopPatternStyle(mode) {
@@ -10803,9 +10867,9 @@ function NuThemeProvider({
   children,
   className,
   crtGlitch = false,
-  defaultDesktopPatternMode = "dot-grid",
-  defaultFontFamily = '"IBM Plex Mono", "Cascadia Mono", "Consolas", monospace',
-  defaultFontSize = 16,
+  defaultDesktopPatternMode,
+  defaultFontFamily,
+  defaultFontSize,
   defaultTheme = "classic",
   desktopPatternMode,
   fontFamily,
@@ -10818,10 +10882,17 @@ function NuThemeProvider({
   theme
 }) {
   const generatedId = useId18();
+  const defaultThemeDefinition = resolveNuTheme(theme ?? defaultTheme);
   const [internalTheme, setInternalTheme] = useState32(defaultTheme);
-  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = useState32(defaultDesktopPatternMode);
-  const [internalFontFamily, setInternalFontFamily] = useState32(defaultFontFamily);
-  const [internalFontSize, setInternalFontSize] = useState32(defaultFontSize);
+  const [internalDesktopPatternMode, setInternalDesktopPatternMode] = useState32(
+    () => defaultDesktopPatternMode ?? defaultThemeDefinition.desktopPatternMode ?? "dot-grid"
+  );
+  const [internalFontFamily, setInternalFontFamily] = useState32(
+    () => defaultFontFamily ?? defaultThemeDefinition.fontFamily ?? '"IBM Plex Mono", "Cascadia Mono", "Consolas", monospace'
+  );
+  const [internalFontSize, setInternalFontSize] = useState32(
+    () => defaultFontSize ?? defaultThemeDefinition.fontSize ?? 16
+  );
   const currentTheme = theme ?? internalTheme;
   const resolvedDesktopPatternMode = desktopPatternMode ?? internalDesktopPatternMode;
   const resolvedFontFamily = fontFamily ?? internalFontFamily;

package/dist/theme/themes.d.ts

@@ -34,10 +34,15 @@ export type NuThemeTokens = {
     windowInactiveOverlay: string;
     windowModalBackdrop: string;
 };
+export type NuThemeVisualTokens = Record<`--nu-${string}`, string>;
 export type NuThemeDefinition = {
+    desktopPatternMode?: NuDesktopPatternMode;
+    fontFamily?: string;
+    fontSize?: number;
     name: string;
     label: string;
     tokens: NuThemeTokens;
+    visualTokens?: NuThemeVisualTokens;
 };
 export declare const nuThemes: {
     readonly classic: NuThemeDefinition;

package/docs/NuThemeProvider.md

@@ -63,7 +63,11 @@ Supported props:
 
 - Built-in themes are `classic` (default), `amber`, `phosphor`, `midnight`, and
   `grayscale`.
-- `midnight` is a dark slate-blue palette with blue chrome and a burnt-orange focus accent.
+- Built-in themes may also define default desktop pattern, typography, and
+  visual CSS-token overrides. Explicit provider props still take precedence.
+- `midnight` is a dark slate-blue palette with blue chrome, a burnt-orange
+  focus accent, coarse dots, and dedicated window, toolbar, menu, and icon-grid
+  chrome tokens.
 - `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/package.json

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