npm - @fgv/ts-app-shell - Versions diffs - 5.1.0-3 → 5.1.0-31 - Mend

@fgv/ts-app-shell 5.1.0-3 → 5.1.0-31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (208) hide show

package/lib/styles/theme.css ADDED Viewed

@@ -0,0 +1,194 @@
+/*
+ * @fgv/ts-app-shell — Default theme
+ *
+ * Defines all semantic design tokens as CSS custom properties.
+ * Import this file once at your application entry point:
+ *
+ *   import '@fgv/ts-app-shell/theme.css';
+ *
+ * Then add the Tailwind preset in your tailwind.config.js:
+ *
+ *   const appShellPreset = require('@fgv/ts-app-shell/tailwind-preset');
+ *   module.exports = { presets: [appShellPreset], ... };
+ *
+ * Dark mode: put class="dark" on <html> (or any ancestor).
+ * The ThemeProvider component handles this automatically.
+ *
+ * All variables use the --fgv- prefix and can be overridden by the consumer.
+ */
+/* ============================================================
+ * LIGHT MODE (default / :root)
+ * ============================================================ */
+:root {
+  /* --- Surfaces --- */
+  /* Base application surface (page background) */
+  --fgv-surface: #ffffff;
+  /* Slightly elevated surface (cards, panels) */
+  --fgv-surface-raised: #f3f4f6;
+  /* Alternate surface (zebra rows, secondary panels) */
+  --fgv-surface-alt: #f9fafb;
+  /* Modal / dialog backdrop overlay */
+  --fgv-backdrop: rgba(0, 0, 0, 0.45);
+  /* Hover highlight background (subtle, interactive rows) */
+  --fgv-hover: #f3f4f6;
+  /* Selected item background (listbox rows, picker items) */
+  --fgv-selected: #eff6ff;
+  /* --- Text --- */
+  /* High-emphasis body text — minimum 7:1 on --fgv-surface (WCAG AAA) */
+  --fgv-text-primary: #111827;
+  /* Medium-emphasis secondary text — ~5.4:1 on #fff (WCAG AA) */
+  --fgv-text-secondary: #374151;
+  /* De-emphasized muted text — ~3.5:1, use only for decorative / supporting copy */
+  --fgv-text-muted: #6b7280;
+  /* Faintest ghost text — intentionally low contrast, only for truly ornamental content */
+  --fgv-text-faint: #9ca3af;
+  /* Star / favorite accent (golden) */
+  --fgv-text-star: #d97706;
+  /* --- Borders --- */
+  /* Default divider / input border */
+  --fgv-border: #d1d5db;
+  /* Subtle divider (row separators, inner section borders) */
+  --fgv-border-subtle: #e5e7eb;
+  /* --- Brand colors --- */
+  /* Primary action color (buttons, active nav, links) */
+  --fgv-brand-primary: #2563eb;
+  /* Darker tonal variant (pressed state, dark top-bar) */
+  --fgv-brand-secondary: #1d4ed8;
+  /* Accent / highlight (hover text on dark surfaces, checkmarks) */
+  --fgv-brand-accent: #3b82f6;
+  /* --- Focus ring --- */
+  --fgv-focus-ring: #3b82f6;
+  /* Selected item left-border accent */
+  --fgv-selected-border: #2563eb;
+  /* --- Status: error / danger --- */
+  --fgv-status-error-bg: #fef2f2;
+  --fgv-status-error-surface: #fee2e2;
+  --fgv-status-error-btn: #dc2626;
+  --fgv-status-error-btn-hover: #b91c1c;
+  --fgv-status-error-icon: #dc2626;
+  --fgv-status-error-border: #fca5a5;
+  --fgv-status-error-accent: #ef4444;
+  --fgv-status-error-text: #b91c1c;
+  --fgv-status-error-strong: #991b1b;
+  /* --- Status: warning --- */
+  --fgv-status-warning-bg: #fffbeb;
+  --fgv-status-warning-surface: #fef3c7;
+  --fgv-status-warning-btn: #d97706;
+  --fgv-status-warning-btn-hover: #b45309;
+  --fgv-status-warning-icon: #d97706;
+  --fgv-status-warning-border: #fcd34d;
+  --fgv-status-warning-accent: #f59e0b;
+  --fgv-status-warning-text: #92400e;
+  --fgv-status-warning-strong: #78350f;
+  /* --- Status: info --- */
+  --fgv-status-info-bg: #eff6ff;
+  --fgv-status-info-surface: #dbeafe;
+  --fgv-status-info-btn: #2563eb;
+  --fgv-status-info-btn-hover: #1d4ed8;
+  --fgv-status-info-icon: #3b82f6;
+  --fgv-status-info-border: #93c5fd;
+  --fgv-status-info-accent: #60a5fa;
+  --fgv-status-info-text: #1e40af;
+  --fgv-status-info-strong: #1e3a8a;
+  /* --- Status: success --- */
+  --fgv-status-success-bg: #f0fdf4;
+  --fgv-status-success-surface: #dcfce7;
+  --fgv-status-success-btn: #16a34a;
+  --fgv-status-success-btn-hover: #15803d;
+  --fgv-status-success-icon: #16a34a;
+  --fgv-status-success-border: #86efac;
+  --fgv-status-success-accent: #4ade80;
+  --fgv-status-success-text: #166534;
+  --fgv-status-success-strong: #14532d;
+}
+/* ============================================================
+ * DARK MODE  (.dark on any ancestor element)
+ * ============================================================ */
+.dark {
+  /* --- Surfaces --- */
+  --fgv-surface: #1f2937;
+  --fgv-surface-raised: #374151;
+  --fgv-surface-alt: #111827;
+  --fgv-backdrop: rgba(0, 0, 0, 0.65);
+  --fgv-hover: #374151;
+  --fgv-selected: #1e3a5f;
+  /* --- Text --- */
+  /* ~14:1 on --fgv-surface dark (WCAG AAA) */
+  --fgv-text-primary: #f9fafb;
+  /* ~8:1 on dark surface (WCAG AA) */
+  --fgv-text-secondary: #d1d5db;
+  /* ~4.5:1 on dark surface (WCAG AA) */
+  --fgv-text-muted: #9ca3af;
+  /* Faint ghost text — intentionally low contrast */
+  --fgv-text-faint: #6b7280;
+  /* Star accent — brightened slightly for dark bg */
+  --fgv-text-star: #fbbf24;
+  /* --- Borders --- */
+  --fgv-border: #4b5563;
+  --fgv-border-subtle: #374151;
+  /* --- Brand colors --- */
+  --fgv-brand-primary: #3b82f6;
+  --fgv-brand-secondary: #1e3a5f;
+  --fgv-brand-accent: #60a5fa;
+  /* --- Focus ring --- */
+  --fgv-focus-ring: #60a5fa;
+  --fgv-selected-border: #3b82f6;
+  /* --- Status: error / danger --- */
+  --fgv-status-error-bg: #450a0a;
+  --fgv-status-error-surface: #7f1d1d;
+  --fgv-status-error-btn: #dc2626;
+  --fgv-status-error-btn-hover: #b91c1c;
+  --fgv-status-error-icon: #f87171;
+  --fgv-status-error-border: #7f1d1d;
+  --fgv-status-error-accent: #ef4444;
+  --fgv-status-error-text: #fca5a5;
+  --fgv-status-error-strong: #fecaca;
+  /* --- Status: warning --- */
+  --fgv-status-warning-bg: #451a03;
+  --fgv-status-warning-surface: #78350f;
+  --fgv-status-warning-btn: #d97706;
+  --fgv-status-warning-btn-hover: #b45309;
+  --fgv-status-warning-icon: #fbbf24;
+  --fgv-status-warning-border: #78350f;
+  --fgv-status-warning-accent: #f59e0b;
+  --fgv-status-warning-text: #fde68a;
+  --fgv-status-warning-strong: #fef3c7;
+  /* --- Status: info --- */
+  --fgv-status-info-bg: #0c1d3e;
+  --fgv-status-info-surface: #1e3a5f;
+  --fgv-status-info-btn: #3b82f6;
+  --fgv-status-info-btn-hover: #2563eb;
+  --fgv-status-info-icon: #60a5fa;
+  --fgv-status-info-border: #1e3a5f;
+  --fgv-status-info-accent: #93c5fd;
+  --fgv-status-info-text: #bfdbfe;
+  --fgv-status-info-strong: #dbeafe;
+  /* --- Status: success --- */
+  --fgv-status-success-bg: #052e16;
+  --fgv-status-success-surface: #14532d;
+  --fgv-status-success-btn: #16a34a;
+  --fgv-status-success-btn-hover: #15803d;
+  --fgv-status-success-icon: #4ade80;
+  --fgv-status-success-border: #14532d;
+  --fgv-status-success-accent: #86efac;
+  --fgv-status-success-text: #bbf7d0;
+  --fgv-status-success-strong: #dcfce7;
+}

package/package.json CHANGED Viewed

@@ -1,10 +1,12 @@
 {
   "name": "@fgv/ts-app-shell",
-  "version": "5.1.0-3",
+  "version": "5.1.0-31",
   "description": "Shared React UI primitives for application shells: column cascade, sidebar, toast/log messages, command palette, keybinding registry",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "keywords": [
     "typescript",
     "react",
@@ -17,8 +19,8 @@
   "dependencies": {
     "@heroicons/react": "~2.2.0",
     "tslib": "^2.8.1",
-    "@fgv/ts-utils": "5.1.0-3",
-    "@fgv/ts-extras": "5.1.0-3"
+    "@fgv/ts-utils": "5.1.0-31",
+    "@fgv/ts-extras": "5.1.0-31"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -46,13 +48,13 @@
     "rimraf": "^6.1.2",
     "ts-jest": "^29.4.6",
     "typescript": "5.9.3",
-    "@rushstack/heft": "1.2.6",
+    "@rushstack/heft": "1.2.7",
     "@rushstack/eslint-config": "4.6.4",
     "@rushstack/heft-jest-plugin": "1.2.6",
     "@testing-library/dom": "^10.4.0",
-    "@rushstack/heft-node-rig": "2.11.26",
-    "@fgv/ts-utils-jest": "5.1.0-3",
-    "@fgv/heft-dual-rig": "5.1.0-3"
+    "@rushstack/heft-node-rig": "2.11.27",
+    "@fgv/heft-dual-rig": "5.1.0-31",
+    "@fgv/ts-utils-jest": "5.1.0-31"
   },
   "exports": {
     ".": {
@@ -65,7 +67,9 @@
         "require": "./lib/index.browser.js"
       },
       "types": "lib/index.d.ts"
-    }
+    },
+    "./tailwind-preset": "./tailwind-preset.cjs",
+    "./theme.css": "./lib/styles/theme.css"
   },
   "repository": {
     "type": "git",

package/tailwind-preset.cjs ADDED Viewed

@@ -0,0 +1,102 @@
+/**
+ * @fgv/ts-app-shell — Tailwind CSS preset
+ *
+ * Maps the package's semantic design tokens to the CSS custom properties
+ * defined in theme.css. Add this preset to your tailwind.config.js and
+ * import theme.css once at your application entry point.
+ *
+ * Usage:
+ *
+ *   // tailwind.config.js
+ *   const appShellPreset = require('@fgv/ts-app-shell/tailwind-preset');
+ *   module.exports = {
+ *     presets: [appShellPreset],
+ *     content: ['./src/**\/*.{ts,tsx}', './node_modules/@fgv/ts-app-shell/lib/**\/*.{js,jsx}'],
+ *     // ...your config
+ *   };
+ *
+ *   // application entry (e.g. main.tsx or index.css)
+ *   import '@fgv/ts-app-shell/theme.css';
+ *
+ *   // dark mode: add class="dark" to <html> (ThemeProvider does this automatically)
+ */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        /* ----- Surfaces ----- */
+        surface: 'var(--fgv-surface)',
+        'surface-raised': 'var(--fgv-surface-raised)',
+        'surface-alt': 'var(--fgv-surface-alt)',
+        backdrop: 'var(--fgv-backdrop)',
+        hover: 'var(--fgv-hover)',
+        selected: 'var(--fgv-selected)',
+        /* ----- Text ----- */
+        primary: 'var(--fgv-text-primary)',
+        secondary: 'var(--fgv-text-secondary)',
+        muted: 'var(--fgv-text-muted)',
+        faint: 'var(--fgv-text-faint)',
+        star: 'var(--fgv-text-star)',
+        /* ----- Borders ----- */
+        border: 'var(--fgv-border)',
+        'border-subtle': 'var(--fgv-border-subtle)',
+        'focus-ring': 'var(--fgv-focus-ring)',
+        'selected-border': 'var(--fgv-selected-border)',
+        /* ----- Brand ----- */
+        'brand-primary': 'var(--fgv-brand-primary)',
+        'brand-secondary': 'var(--fgv-brand-secondary)',
+        'brand-accent': 'var(--fgv-brand-accent)',
+        /* ----- Status: error / danger ----- */
+        'status-error-bg': 'var(--fgv-status-error-bg)',
+        'status-error-surface': 'var(--fgv-status-error-surface)',
+        'status-error-btn': 'var(--fgv-status-error-btn)',
+        'status-error-btn-hover': 'var(--fgv-status-error-btn-hover)',
+        'status-error-icon': 'var(--fgv-status-error-icon)',
+        'status-error-border': 'var(--fgv-status-error-border)',
+        'status-error-accent': 'var(--fgv-status-error-accent)',
+        'status-error-text': 'var(--fgv-status-error-text)',
+        'status-error-strong': 'var(--fgv-status-error-strong)',
+        /* ----- Status: warning ----- */
+        'status-warning-bg': 'var(--fgv-status-warning-bg)',
+        'status-warning-surface': 'var(--fgv-status-warning-surface)',
+        'status-warning-btn': 'var(--fgv-status-warning-btn)',
+        'status-warning-btn-hover': 'var(--fgv-status-warning-btn-hover)',
+        'status-warning-icon': 'var(--fgv-status-warning-icon)',
+        'status-warning-border': 'var(--fgv-status-warning-border)',
+        'status-warning-accent': 'var(--fgv-status-warning-accent)',
+        'status-warning-text': 'var(--fgv-status-warning-text)',
+        'status-warning-strong': 'var(--fgv-status-warning-strong)',
+        /* ----- Status: info ----- */
+        'status-info-bg': 'var(--fgv-status-info-bg)',
+        'status-info-surface': 'var(--fgv-status-info-surface)',
+        'status-info-btn': 'var(--fgv-status-info-btn)',
+        'status-info-btn-hover': 'var(--fgv-status-info-btn-hover)',
+        'status-info-icon': 'var(--fgv-status-info-icon)',
+        'status-info-border': 'var(--fgv-status-info-border)',
+        'status-info-accent': 'var(--fgv-status-info-accent)',
+        'status-info-text': 'var(--fgv-status-info-text)',
+        'status-info-strong': 'var(--fgv-status-info-strong)',
+        /* ----- Status: success ----- */
+        'status-success-bg': 'var(--fgv-status-success-bg)',
+        'status-success-surface': 'var(--fgv-status-success-surface)',
+        'status-success-btn': 'var(--fgv-status-success-btn)',
+        'status-success-btn-hover': 'var(--fgv-status-success-btn-hover)',
+        'status-success-icon': 'var(--fgv-status-success-icon)',
+        'status-success-border': 'var(--fgv-status-success-border)',
+        'status-success-accent': 'var(--fgv-status-success-accent)',
+        'status-success-text': 'var(--fgv-status-success-text)',
+        'status-success-strong': 'var(--fgv-status-success-strong)'
+      }
+    }
+  }
+};