@mongoosejs/studio 0.2.13 → 0.3.1

package/frontend/public/dark-theme.css

@@ -0,0 +1,365 @@
+/*
+ * Dark-mode overrides for Mongoose Studio.
+ *
+ * Semantic Tailwind tokens (bg-primary, bg-surface, text-content, border-edge, etc.)
+ * swap automatically via CSS variables in theme-variables.css — no overrides needed here.
+ *
+ * This file only covers:
+ *   1. Remaining hard-coded Tailwind gray shades not yet converted to semantic tokens
+ *   2. Status / semantic colors (red, green, yellow, blue)
+ *   3. Component-specific overrides (CodeMirror, modals, chat, etc.)
+ *   4. Miscellaneous (JSON view, tooltips, scrollbars, placeholders)
+ */
+
+/* ---- Remaining gray backgrounds ---- */
+.dark .bg-gray-200 {
+  background-color: var(--studio-bg-subtle);
+}
+
+.dark .bg-gray-300 {
+  background-color: var(--studio-bg-subtle-hover);
+}
+
+.dark .bg-gray-600 {
+  background-color: var(--studio-bg-strong);
+}
+
+.dark .bg-gray-800 {
+  background-color: var(--studio-bg-stronger);
+}
+
+.dark .hover\:bg-gray-300:hover,
+.dark .hover\:bg-gray-400:hover {
+  background-color: var(--studio-bg-strong);
+}
+
+/* ---- Remaining gray text ---- */
+.dark .text-gray-300,
+.dark .text-gray-400 {
+  color: var(--studio-text-subtle);
+}
+
+.dark .text-gray-600 {
+  color: var(--studio-text-muted);
+}
+
+.dark .text-gray-800 {
+  color: var(--studio-text-primary);
+}
+
+/* ---- Status / semantic ---- */
+.dark .bg-red-50 {
+  background-color: var(--studio-bg-error);
+}
+
+.dark .bg-yellow-50 {
+  background-color: var(--studio-bg-warning);
+}
+
+.dark .bg-green-50 {
+  background-color: var(--studio-bg-success);
+}
+
+.dark .bg-blue-100 {
+  background-color: var(--studio-bg-info);
+}
+
+.dark .border-red-200 {
+  border-color: var(--studio-border-error);
+}
+
+.dark .border-yellow-200 {
+  border-color: var(--studio-border-warning);
+}
+
+.dark .border-green-200 {
+  border-color: var(--studio-border-success);
+}
+
+.dark .text-red-700 {
+  color: var(--studio-text-error);
+}
+
+.dark .text-green-700 {
+  color: var(--studio-text-success);
+}
+
+.dark .ring-green-600\/20 {
+  --tw-ring-color: var(--studio-ring-success);
+}
+
+.dark .ring-gray-600\/20 {
+  --tw-ring-color: var(--studio-ring-muted);
+}
+
+/* ---- Ring / shadow ---- */
+.dark .ring-black\/5,
+.dark .ring-opacity-5 {
+  --tw-ring-color: var(--studio-ring);
+}
+
+.dark .ring-gray-900\/5 {
+  --tw-ring-color: var(--studio-ring);
+}
+
+/* ---- Slate (documents area, filter bar) ---- */
+.dark .bg-slate-50 {
+  background-color: var(--studio-bg-muted);
+}
+
+.dark .hover\:bg-slate-50:hover {
+  background-color: var(--studio-bg-muted-hover);
+}
+
+.dark .bg-slate-100 {
+  background-color: var(--studio-bg-muted);
+}
+
+.dark .border-slate-100,
+.dark .border-slate-300 {
+  border-color: var(--studio-border);
+}
+
+.dark .text-slate-400 {
+  color: var(--studio-text-muted);
+}
+
+.dark .text-slate-500 {
+  color: var(--studio-text-muted);
+}
+
+.dark .text-slate-600 {
+  color: var(--studio-text-secondary);
+}
+
+.dark .text-slate-700 {
+  color: var(--studio-text-secondary);
+}
+
+.dark .text-slate-800 {
+  color: var(--studio-text-primary);
+}
+
+.dark .hover\:text-slate-700:hover {
+  color: var(--studio-text-primary);
+}
+
+/* ---- JSON view – high-contrast value colors ---- */
+.dark .text-blue-600 {
+  color: #93c5fd;
+}
+
+.dark .text-sky-700,
+.dark .text-sky-800 {
+  color: #7dd3fc;
+}
+
+.dark .text-emerald-600 {
+  color: #6ee7b7;
+}
+
+.dark .text-amber-600 {
+  color: #fcd34d;
+}
+
+.dark .text-violet-600 {
+  color: #c4b5fd;
+}
+
+/* ---- Selected document row ---- */
+.dark .bg-blue-200 {
+  background-color: rgba(127, 29, 43, 0.35);
+}
+
+/* ---- Tooltip ---- */
+.dark .tooltip .tooltiptext {
+  background-color: var(--studio-tooltip-bg);
+  color: var(--studio-tooltip-text);
+  border: 1px solid var(--studio-tooltip-border);
+}
+
+/* ---- Document layout ---- */
+.dark .document .document-menu {
+  background-color: var(--studio-bg-surface);
+}
+
+.dark .document-details .path-key {
+  background-color: var(--studio-bg-subtle);
+}
+
+.dark .document-details .path-type {
+  color: var(--studio-text-muted);
+}
+
+.dark .document-details .value {
+  color: var(--studio-text-secondary);
+}
+
+.dark .json-view pre {
+  background-color: var(--studio-bg-surface);
+  color: var(--studio-text-primary);
+}
+
+.dark .json-view pre::-webkit-scrollbar-track {
+  background: var(--studio-bg-subtle);
+}
+
+.dark .json-view pre::-webkit-scrollbar-thumb {
+  background: var(--studio-bg-strong);
+}
+
+.dark .json-view pre::-webkit-scrollbar-thumb:hover {
+  background: var(--studio-text-muted);
+}
+
+/* ---- Models table and sidebar ---- */
+.dark .models .documents table th,
+.dark .models .documents table td,
+.dark .models .documents table tr {
+  color: var(--studio-text-primary);
+  border-bottom-color: var(--studio-border);
+}
+
+.dark .models .documents table th::after {
+  border-bottom-color: var(--studio-border);
+}
+
+.dark .models .model-selector,
+.dark .models button.gray {
+  background-color: var(--studio-bg-muted);
+  color: var(--studio-text-primary);
+}
+
+.dark .models .path-type {
+  color: var(--studio-text-muted);
+}
+
+/* ---- Modal ---- */
+.dark .modal-container {
+  background-color: var(--studio-bg-surface);
+  color: var(--studio-text-primary);
+}
+
+.dark .modal-body {
+  color: inherit;
+}
+
+/* ---- Ace editor border in dark mode ---- */
+.dark .ace-editor-container {
+  border-color: var(--studio-border) !important;
+}
+
+/* ---- Prism.js syntax highlighting (dark) ---- */
+.dark code[class*="language-"],
+.dark pre[class*="language-"] {
+  color: #e8e8e8 !important;
+  text-shadow: none !important;
+  background: var(--studio-bg-muted) !important;
+}
+
+.dark .token.comment,
+.dark .token.prolog,
+.dark .token.doctype,
+.dark .token.cdata {
+  color: #6a9955 !important;
+}
+
+.dark .token.punctuation {
+  color: #b8b8bc !important;
+}
+
+.dark .token.property,
+.dark .token.tag,
+.dark .token.boolean,
+.dark .token.number,
+.dark .token.constant,
+.dark .token.symbol,
+.dark .token.deleted {
+  color: #d19a66 !important;
+}
+
+.dark .token.selector,
+.dark .token.attr-name,
+.dark .token.string,
+.dark .token.char,
+.dark .token.builtin,
+.dark .token.inserted {
+  color: #98c379 !important;
+}
+
+.dark .token.operator,
+.dark .token.entity,
+.dark .token.url,
+.dark .language-css .token.string,
+.dark .style .token.string {
+  color: #56b6c2 !important;
+  background: none !important;
+}
+
+.dark .token.atrule,
+.dark .token.attr-value,
+.dark .token.keyword {
+  color: #c678dd !important;
+}
+
+.dark .token.function,
+.dark .token.class-name {
+  color: #61afef !important;
+}
+
+.dark .token.regex,
+.dark .token.important,
+.dark .token.variable {
+  color: #d19a66 !important;
+}
+
+/* ---- Textarea (modal, dashboard editor) ---- */
+.dark .modal-container textarea,
+.dark .modal-body textarea,
+.dark .dashboard-editor textarea,
+.dark .dashboard-editor input {
+  background-color: var(--studio-bg-muted) !important;
+  color: var(--studio-text-primary) !important;
+  border-color: var(--studio-border) !important;
+}
+
+.dark .modal-container textarea::placeholder,
+.dark .modal-body textarea::placeholder,
+.dark .dashboard-editor textarea::placeholder,
+.dark .dashboard-editor input::placeholder {
+  color: var(--studio-text-subtle) !important;
+}
+
+.dark .modal-container textarea:focus,
+.dark .modal-body textarea:focus,
+.dark .dashboard-editor textarea:focus,
+.dark .dashboard-editor input:focus {
+  border-color: var(--studio-focus-ring) !important;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--studio-focus-ring-shadow) !important;
+}
+
+/* ---- Dashboard editor panel ---- */
+.dark .dashboard-editor {
+  background-color: var(--studio-bg-muted) !important;
+  color: var(--studio-text-primary);
+}
+
+/* ---- Chat message script block ---- */
+.dark .chat-message-script {
+  background-color: var(--studio-bg-surface) !important;
+  color: var(--studio-text-primary);
+  border-color: var(--studio-border) !important;
+}
+
+.dark .chat-message-script .flex.border-b {
+  background-color: var(--studio-bg-surface) !important;
+  border-color: var(--studio-border) !important;
+}
+
+
+/* ---- Input placeholder contrast ---- */
+.dark ::placeholder,
+.dark .placeholder\:text-gray-400::placeholder {
+  color: var(--studio-text-muted);
+}

package/frontend/public/images/mongoose-studio.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250" fill="none">
+<path d="M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z" fill="#7F1D2B"/>
+<path d="M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z" fill="#7F1D2B"/>
+</svg>

package/frontend/public/index.html

@@ -6,11 +6,12 @@
     <meta name="msapplication-TileColor" />
     <meta name="theme-color" content="#ffffff"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter"/>
+    <link rel="stylesheet" href="theme-variables.css">
     <link rel="stylesheet" type="text/css" href="style.css"/>
     <link rel="stylesheet" href="https://unpkg.com/prismjs@1.29.0/themes/prism.css"/>
     <link rel="stylesheet" href="tw.css">
+    <link rel="stylesheet" href="dark-theme.css">
     <link rel="stylesheet" href="vanillatoasts/vanillatoasts.css">
-    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.16/lib/codemirror.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
     <link rel="icon" href="images/logo.svg" type="image/svg+xml">
     <script src="./config.js"></script>
@@ -20,6 +21,25 @@
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script src="https://unpkg.com/codemirror@5.65.16/lib/codemirror.js"></script>
     <script src="https://unpkg.com/codemirror@5.65.16/mode/javascript/javascript.js"></script>
+    <script>
+      (function() {
+        try {
+          var key = 'studio-theme';
+          var stored = localStorage.getItem(key);
+          var prefersDark = typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches;
+          var isDark = stored === 'dark' || (!stored && prefersDark);
+          if (!stored) localStorage.setItem(key, isDark ? 'dark' : 'light');
+          if (isDark) document.documentElement.classList.add('dark');
+          var meta = document.querySelector('meta[name="theme-color"]');
+          if (meta) meta.setAttribute('content', isDark ? '#0f0f0f' : '#ffffff');
+        } catch (err) {
+          var prefersDark = typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches;
+          if (prefersDark) document.documentElement.classList.add('dark');
+          var meta = document.querySelector('meta[name="theme-color"]');
+          if (meta) meta.setAttribute('content', prefersDark ? '#0f0f0f' : '#ffffff');
+        }
+      })();
+    </script>
   </head>
 
   <body>

package/frontend/public/style.css

@@ -3,11 +3,8 @@ body {
   margin: 0;
   padding: 0;
   font-family: "Inter", Helvetica, Arial, FreeSans, sans-serif;
-}
-
-a {
-  text-decoration: none;
-  color: #0e5887;
+  background-color: var(--studio-bg-page);
+  color: var(--studio-text-page);
 }
 
 .bold {
@@ -23,8 +20,9 @@ a {
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
-  background-color: black;
-  color: #fff;
+  background-color: var(--studio-tooltip-bg);
+  color: var(--studio-tooltip-text);
+  border: 1px solid var(--studio-tooltip-border);
   text-align: center;
   padding: 5px 0px;
   border-radius: 6px;