@nqlib/nqui 0.5.4 → 0.5.6

package/dist/styles.css

@@ -75,7 +75,7 @@
 
 
 /* Custom dark mode variant - matches when .dark class is on element or ancestor */
-/* Non-dark themes — .light (warm paper) and .mid (dimmer neutral); both use light: utilities */
+/* Non-dark theme — .light (warm paper) uses light: utilities */
 /* Hit-area — https://bazza.dev/craft/2026/hit-area */
 /* Bazza hit-area utilities — https://bazza.dev/craft/2026/hit-area */
 
@@ -792,7 +792,7 @@
    nqui Additional System Variables
    ============================================ */
 
-/* Default light theme variables (.mid / .dark blocks follow) */
+/* Default light theme variables (.dark block follows) */
 /* ============================================
    nqui Color System & Design Tokens
    ============================================ */
@@ -957,13 +957,13 @@
     --z-debug: 9999;
 
     /* Color system variables from colors.css */
-    /* Primary scale — midpoint between classic light and dark (blue hue 240) */
-    --primary-100: oklch(0.675 0.115 240);
-    --primary-200: oklch(0.675 0.14 240);
-    --primary-300: oklch(0.675 0.16 240);
-    --primary-400: oklch(0.675 0.18 240);
-    --primary-500: oklch(0.625 0.225 240);
-    --primary-600: oklch(0.6 0.25 240);
+    /* Primary scale — blue hue 240; toned down vs prior (lower L / slightly less chroma on saturated stops) */
+    --primary-100: oklch(0.655 0.11 240);
+    --primary-200: oklch(0.655 0.135 240);
+    --primary-300: oklch(0.655 0.155 240);
+    --primary-400: oklch(0.655 0.172 240);
+    --primary-500: oklch(0.605 0.215 240);
+    --primary-600: oklch(0.575 0.238 240);
 
     /* ============================================
        Semantic Color Scales — classic light (success / warning / danger / info)
@@ -1023,21 +1023,23 @@
     --info-foreground: oklch(0.98 0 0);
 
     /* Additional variables from index.css */
-    /* Light / system UI — warm paper */
-    --background: oklch(0.985 0.002 78);
+    /* Light / system UI — Claude-adjacent warm paper (#FAF9F5 ≈ oklch(0.982 0.0054 95)) */
+    --background: oklch(0.982 0.0054 95);
     --foreground: oklch(0.2416 0.0219 57);
-    --card: oklch(0.9792 0.0042 78.3);
+    /* Surfaces: stepped darker than page bg for readable elevation */
+    --card: oklch(0.966 0.0054 95);
     --card-foreground: oklch(0.2416 0.0219 57);
-    --popover: oklch(0.9792 0.0042 78.3);
+    --popover: oklch(0.966 0.0054 95);
     --popover-foreground: oklch(0.2416 0.0219 57);
-    --secondary: oklch(0.927 0.009 73.15);
+    --secondary: oklch(0.928 0.008 95);
     --secondary-foreground: oklch(0.3067 0.0309 56.81);
-    --muted: oklch(0.9111 0.0082 73.15);
+    --muted: oklch(0.914 0.007 95);
     --muted-foreground: oklch(0.5576 0.0222 57.81);
-    --accent: oklch(0.935 0.011 73.15);
+    /* Slightly deeper than sidebar/card so row hovers read on pale paper */
+    --accent: oklch(0.932 0.007 95);
     --accent-foreground: oklch(0.2416 0.0219 57);
-    --border: oklch(0.89 0.0137 73.1);
-    --input: oklch(0.89 0.0137 73.1);
+    --border: oklch(0.892 0.006 95);
+    --input: oklch(0.892 0.006 95);
 
     /* Chart colors */
     --chart-1: oklch(0.809 0.105 251.813);
@@ -1049,49 +1051,14 @@
     /* Layout */
     --radius: 0.45rem;
 
-    /* Sidebar */
-    --sidebar: oklch(0.9792 0.0042 78.3);
+    /* Sidebar — darker than page so rail + row hovers read clearly */
+    --sidebar: oklch(0.953 0.006 95);
     --sidebar-foreground: oklch(0.2416 0.0219 57);
     --sidebar-primary: var(--primary);
     --sidebar-primary-foreground: var(--primary-foreground);
-    --sidebar-accent: oklch(0.96 0.004 75);
+    --sidebar-accent: oklch(0.904 0.009 95);
     --sidebar-accent-foreground: oklch(0.205 0.015 55);
-    --sidebar-border: oklch(0.89 0.0137 73.1);
-    --sidebar-ring: var(--ring);
-}
-
-/* Mid — between warm paper and dark (neutral, slightly dimmer than light) */
-.mid {
-    --background: oklch(0.915 0.01 78);
-    --foreground: oklch(0.28 0.022 57);
-    --card: oklch(0.895 0.012 78);
-    --card-foreground: oklch(0.28 0.022 57);
-    --popover: oklch(0.895 0.012 78);
-    --popover-foreground: oklch(0.28 0.022 57);
-    --secondary: oklch(0.88 0.012 73);
-    --secondary-foreground: oklch(0.32 0.028 57);
-    --muted: oklch(0.855 0.012 73);
-    --muted-foreground: oklch(0.48 0.024 58);
-    --accent: oklch(0.87 0.014 73);
-    --accent-foreground: oklch(0.28 0.022 57);
-    --border: oklch(0.82 0.016 73);
-    --input: oklch(0.82 0.016 73);
-
-    --chart-1: oklch(0.809 0.105 251.813);
-    --chart-2: oklch(0.623 0.214 259.815);
-    --chart-3: oklch(0.546 0.245 262.881);
-    --chart-4: oklch(0.488 0.243 264.376);
-    --chart-5: oklch(0.424 0.199 265.638);
-
-    --radius: 0.45rem;
-
-    --sidebar: oklch(0.9 0.01 78);
-    --sidebar-foreground: oklch(0.28 0.022 57);
-    --sidebar-primary: var(--primary);
-    --sidebar-primary-foreground: var(--primary-foreground);
-    --sidebar-accent: oklch(0.875 0.012 75);
-    --sidebar-accent-foreground: oklch(0.26 0.018 55);
-    --sidebar-border: oklch(0.82 0.016 73);
+    --sidebar-border: oklch(0.878 0.007 95);
     --sidebar-ring: var(--ring);
 }
 
@@ -1102,12 +1069,13 @@
        ============================================ */
 
     /* Primary Color Scale (Dark Mode) - Blue Theme (Hue 240) */
-    --primary-100: oklch(0.40 0.15 240);
-    --primary-200: oklch(0.45 0.18 240);
-    --primary-300: oklch(0.50 0.20 240);
-    --primary-400: oklch(0.55 0.22 240);
-    --primary-500: oklch(0.65 0.20 240); /* Main primary - lighter for dark mode */
-    --primary-600: oklch(0.70 0.22 240);
+    /* Dark UI: keep blues subdued (lower L on 500/600); high chroma + high L reads “neon” on #111 */
+    --primary-100: oklch(0.30 0.14 240);
+    --primary-200: oklch(0.34 0.165 240);
+    --primary-300: oklch(0.385 0.185 240);
+    --primary-400: oklch(0.435 0.198 240);
+    --primary-500: oklch(0.515 0.168 240); /* --primary: deeper accent blue */
+    --primary-600: oklch(0.565 0.185 240);
 
     /* ============================================
        Semantic Color Scales - Dark Mode
@@ -1177,14 +1145,14 @@
     --card-foreground: oklch(0.92 0 0);
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.92 0 0);
-    --secondary: oklch(0.274 0.006 286.033);
+    --secondary: oklch(0.274 0.003 0);
     --secondary-foreground: oklch(0.92 0 0);
-    --muted: oklch(0.24 0 0);
+    --muted: oklch(0.24 0.002 0);
     --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.27 0 0);
+    --accent: oklch(0.27 0.003 0);
     --accent-foreground: oklch(0.92 0 0);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 0.07);
+    --border: oklch(0.34 0.004 0);
+    --input: oklch(0.30 0.003 0);
 
     /* Chart colors (same for both modes) */
     --chart-1: oklch(0.809 0.105 251.813);
@@ -1194,12 +1162,32 @@
     --chart-5: oklch(0.424 0.199 265.638);
 
     /* Sidebar for dark mode */
-    --sidebar: oklch(0.205 0 0);
+    --sidebar: oklch(0.205 0.001 0);
     --sidebar-foreground: oklch(0.92 0 0);
     --sidebar-primary: var(--primary);
     --sidebar-primary-foreground: var(--primary-foreground);
-    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent: oklch(0.269 0.003 0);
     --sidebar-accent-foreground: oklch(0.92 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-border: oklch(0.34 0.004 0);
     --sidebar-ring: oklch(0.556 0 0);
-}
+}
+
+/* Elevation component styles from elevation.css */
+/**
+   * Card surface elevation — semantic --border + light shadow stack.
+   * Dark mode matches v0.4.x (no inset / multi-stack drop shadows).
+   * Lives here with the elevation system (was JS-injected from card.tsx).
+   */
+  .nqui-card {
+    border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+    box-shadow:
+      0 1px 0 0 color-mix(in oklch, var(--border) 40%, transparent),
+      0 1px 2px 0 oklch(0.15 0 0 / 0.05);
+  }
+
+  .dark .nqui-card {
+    border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+    box-shadow:
+      0 1px 0 0 color-mix(in oklch, var(--border) 40%, transparent),
+      0 1px 2px 0 oklch(0 0 0 / 0.3);
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nqlib/nqui",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "A React component library with enhanced UI components and developer tools",
   "type": "module",
   "main": "./dist/nqui.cjs.js",

package/scripts/build-styles.js

@@ -22,6 +22,23 @@ const elevationCssPath = join(projectRoot, 'src', 'styles', 'elevation.css');
 const hitAreaCssPath = join(projectRoot, 'src', 'styles', 'hit-area.css');
 const outputPath = join(projectRoot, 'dist', 'styles.css');
 
+function extractLayerBlock(css, layerName) {
+  const layerStart = css.indexOf(`@layer ${layerName}`);
+  if (layerStart === -1) return '';
+  const firstBrace = css.indexOf('{', layerStart);
+  if (firstBrace === -1) return '';
+  let depth = 1;
+  let i = firstBrace + 1;
+  while (i < css.length && depth > 0) {
+    const ch = css[i];
+    if (ch === '{') depth++;
+    if (ch === '}') depth--;
+    i++;
+  }
+  if (depth !== 0) return '';
+  return css.slice(firstBrace + 1, i - 1).trim();
+}
+
 function extractStandaloneCSS() {
   // Read the source CSS files
   if (!existsSync(indexCssPath)) {
@@ -47,15 +64,22 @@ function extractStandaloneCSS() {
 
   // Extract :root block from elevation.css (it's wrapped in @layer base)
   let elevationRootContent = '';
+  let elevationComponentContent = '';
   if (elevationCss) {
-    const elevationRootMatch = elevationCss.match(/@layer base\s*\{\s*:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\}/s);
-    if (elevationRootMatch) {
-      elevationRootContent = elevationRootMatch[1].trim();
+    const elevationBaseLayer = extractLayerBlock(elevationCss, 'base');
+    if (elevationBaseLayer) {
+      const elevationRootMatch = elevationBaseLayer.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+      if (elevationRootMatch) {
+        elevationRootContent = elevationRootMatch[1].trim();
+      }
     } else {
       // Fallback: try to extract without @layer base wrapper
       const rootMatch = elevationCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
       if (rootMatch) elevationRootContent = rootMatch[1].trim();
     }
+
+    // Keep component-level elevation classes (e.g. .nqui-card) in dist/styles.css.
+    elevationComponentContent = extractLayerBlock(elevationCss, 'components');
   }
 
   // Extract :root and .dark blocks from colors.css (they're wrapped in @layer base)
@@ -229,6 +253,10 @@ function extractStandaloneCSS() {
                   combinedCss.slice(rootIndex);
   }
 
+  if (elevationComponentContent) {
+    combinedCss += '\n\n/* Elevation component styles from elevation.css */\n' + elevationComponentContent + '\n';
+  }
+
   // Clean up extra blank lines
   combinedCss = combinedCss.replace(/\n{4,}/g, '\n\n\n');
 

package/scripts/publish-npmjs.js

@@ -27,6 +27,23 @@ function printSslTroubleshooting() {
 `);
 }
 
+function isVersionAlreadyPublished(pkgName, version, cwd) {
+  try {
+    const result = execSync(`npm view ${pkgName}@${version} version --registry=https://registry.npmjs.com`, {
+      encoding: 'utf-8',
+      cwd,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    }).trim();
+    return result === version;
+  } catch (error) {
+    const errText = `${error?.message || ''} ${error?.stderr?.toString?.() || ''}`;
+    if (errText.includes('404') || errText.includes('E404')) {
+      return false;
+    }
+    throw error;
+  }
+}
+
 async function main() {
   // Read package.json
   const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
@@ -94,6 +111,14 @@ async function main() {
       npm_config_registry: 'https://registry.npmjs.com',
     };
 
+    const pkgName = packageJson.name;
+    const pkgVersion = packageJson.version;
+    if (isVersionAlreadyPublished(pkgName, pkgVersion, rootDir)) {
+      throw new Error(
+        `Version ${pkgVersion} is already published for ${pkgName}. Bump package.json version before publishing (e.g. npm version patch --no-git-tag-version).`
+      );
+    }
+
     const maxAttempts = Math.min(
       5,
       Math.max(1, parseInt(process.env.NPM_PUBLISH_RETRIES || '3', 10) || 3)
@@ -142,6 +167,10 @@ async function main() {
     if (error.message && error.message.includes('Authentication required')) {
       throw error;
     }
+    if (error.message && error.message.includes('already published')) {
+      console.error(`💡 ${error.message}`);
+      throw error;
+    }
     const errText = `${error.message || ''} ${(error.output && error.output.toString()) || ''}`;
     if (error.status === 404 || errText.includes('404')) {
       console.error('💡 Package not found. This might be the first publish.');