Improve output cells in dark mode (#679)

* Add palettes to pick colors logically in light and dark theme

* Make plain outputs borderless if highlighted

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Fix typo

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: jaladh-singhal

myst_nb/static/mystnb.css

@@ -1,24 +1,60 @@
 /* Variables */
 :root {
-  --mystnb-source-bg-color: #f7f7f7;
-  --mystnb-stdout-bg-color: #fcfcfc;
-  --mystnb-stderr-bg-color: #fdd;
-  --mystnb-traceback-bg-color: #fcfcfc;
-  --mystnb-source-border-color: #ccc;
+  /*
+  Following palettes are generated by using https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
+  - neutral palette with #fcfcfc and danger palette with #ffdddd as base colors.
+  50 means lightest, 900 means darkest; less used intermediate shades are omitted
+  but can be added when needed by accessing full palette from the above link.
+  */
+  --mystnb-neutral-palette-50: #fcfcfc;
+  --mystnb-neutral-palette-100: #f7f7f7;
+  --mystnb-neutral-palette-400: #cccccc;
+  --mystnb-neutral-palette-500: #afafaf;
+  --mystnb-neutral-palette-800: #505050;
+  --mystnb-neutral-palette-900: #2d2d2d;
+
+  --mystnb-danger-palette-50: #ffdddd;
+  --mystnb-danger-palette-100: #f5acad;
+  --mystnb-danger-palette-400: #c42029;
+  --mystnb-danger-palette-500: #b40008;
+  --mystnb-danger-palette-800: #850010;
+  --mystnb-danger-palette-900: #680010;
+
+  /* MyST-NB specific variables; colors should be logically picked from palettes */
+  --mystnb-source-bg-color: var(--mystnb-neutral-palette-100);
+  --mystnb-stdout-bg-color: var(--mystnb-neutral-palette-50);
+  --mystnb-stderr-bg-color: var(--mystnb-danger-palette-50);
+  --mystnb-traceback-bg-color: var(--mystnb-neutral-palette-50);
+  --mystnb-source-border-color: var(--mystnb-neutral-palette-400);
   --mystnb-source-margin-color: green;
-  --mystnb-stdout-border-color: #f7f7f7;
-  --mystnb-stderr-border-color: #f7f7f7;
-  --mystnb-traceback-border-color: #ffd6d6;
+  --mystnb-stdout-border-color: var(--mystnb-neutral-palette-100);
+  --mystnb-stderr-border-color: var(--mystnb-neutral-palette-100);
+  --mystnb-traceback-border-color: var(--mystnb-danger-palette-100);
   --mystnb-hide-prompt-opacity: 70%;
   --mystnb-source-border-radius: .4em;
   --mystnb-source-border-width: 1px;
   --mystnb-scrollbar-width: 0.3rem;
   --mystnb-scrollbar-height: 0.3rem;
-  --mystnb-scrollbar-thumb-color: #c1c1c1;
-  --mystnb-scrollbar-thumb-hover-color: #a0a0a0;
+  --mystnb-scrollbar-thumb-color: var(--mystnb-neutral-palette-400);
+  --mystnb-scrollbar-thumb-hover-color: var(--mystnb-neutral-palette-500);
   --mystnb-scrollbar-thumb-border-radius: 0.25rem;
 }
 
+/* Override colors in dark theme */
+html[data-theme="dark"] {
+  --mystnb-source-bg-color: var(--mystnb-neutral-palette-800);
+  --mystnb-stdout-bg-color: var(--mystnb-neutral-palette-900);
+  --mystnb-stderr-bg-color: var(--mystnb-danger-palette-900);
+  --mystnb-traceback-bg-color: var(--mystnb-neutral-palette-900);
+  --mystnb-source-border-color: var(--mystnb-neutral-palette-500);
+  --mystnb-stdout-border-color: var(--mystnb-neutral-palette-800);
+  --mystnb-stderr-border-color: var(--mystnb-neutral-palette-800);
+  --mystnb-traceback-border-color: var(--mystnb-danger-palette-800);
+  --mystnb-scrollbar-thumb-color: var(--mystnb-neutral-palette-500);
+  --mystnb-scrollbar-thumb-hover-color: var(--mystnb-neutral-palette-400);
+}
+
+
 /* Whole cell */
 div.container.cell {
   padding-left: 0;
@@ -73,8 +109,9 @@ div.cell_output div.output>div.highlight {
   box-shadow: none;
 }
 
-.cell_output .output.text_plain,
-.cell_output .output.stream {
+.cell_output .output.text_plain:not(:has(.highlight)),
+.cell_output .output.stream:not(:has(.highlight)) {
+  /* plain (or stream of) output, not containing a pygments-highlighted block */
   background: var(--mystnb-stdout-bg-color);
   border: 1px solid var(--mystnb-stdout-border-color);
 }