From cbe365d73153e400226bda312a2515c08761eaf7 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Fri, 5 Apr 2024 09:44:01 -0500
Subject: [PATCH 1/6] Implement @smeragoel's data table designs

---
 .../assets/styles/extensions/_notebooks.scss  | 38 +++++++++++++++++++
 .../assets/styles/variables/_color.scss       | 12 ++++++
 2 files changed, 50 insertions(+)

diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
index 347486f36..bdf9f6dd2 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
@@ -22,6 +22,12 @@ html[data-theme="dark"] .bd-content {
   .nboutput {
     .output_area.rendered_html {
       @include cell-output-background;
+
+      // Change the background color of data table outputs to blend seamlessly
+      // with the site's background
+      &:has(table.dataframe) {
+        background-color: var(--pst-color-background);
+      }
     }
 
     .output_area.stderr {
@@ -73,3 +79,35 @@ html[data-theme="dark"] .bd-content {
     }
   }
 }
+
+/*******************************************************************************
+ * pandas
+ */
+
+// Re-style Pandas data tables
+.nboutput .output_area.rendered_html table.dataframe {
+  // ^ Need to use this long selector in order to override library CSS rules
+
+  color: var(--pst-color-table-text);
+
+  thead {
+    tr {
+      background-color: var(--pst-color-table-heading-bg);
+      border-bottom: 2px solid var(--pst-color-primary);
+    }
+  }
+
+  tbody {
+    tr {
+      &:nth-child(odd) {
+        background-color: var(--pst-color-table-row-zebra-1-bg);
+      }
+      &:nth-child(even) {
+        background-color: var(--pst-color-table-row-zebra-2-bg);
+      }
+      &:hover {
+        background-color: var(--pst-color-table-row-hover-bg);
+      }
+    }
+  }
+}
diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
index ccbabe8ff..e1db89d3b 100644
--- a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
@@ -203,6 +203,14 @@ $pst-semantic-colors: (
     "light": #f3cf95,
     "dark": #675c04,
   ),
+  "table-text": (
+    "light": #{map-deep-get($color-palette, "foundation", "black")},
+    "dark": #{map-deep-get($color-palette, "foundation", "white")},
+  ),
+  "table-row-hover": (
+    "bg-light": #{map-deep-get($color-palette, "violet", "300")},
+    "bg-dark": #{map-deep-get($color-palette, "violet", "600")},
+  ),
   // DEPTH COLORS - you can see the elevation colours and shades
   // in the Figma file https://www.figma.com/file/rUrrHGhUBBIAAjQ82x6pz9/PyData-Design-system---proposal-for-implementation-(2)?node-id=1492%3A922&t=sQeQZehkOzposYEg-1
   // background: color of the canvas / the furthest back layer
@@ -265,6 +273,10 @@ $pst-semantic-colors: (
   & {
     --pst-color-link: var(--pst-color-primary);
     --pst-color-link-hover: var(--pst-color-secondary);
+    --pst-color-table: var(--pst-color-foundation);
+    --pst-color-table-heading-bg: var(--pst-color-surface);
+    --pst-color-table-row-zebra-1-bg: var(--pst-color-on-background);
+    --pst-color-table-row-zebra-2-bg: var(--pst-color-surface);
   }
   // adapt to light/dark-specific content
   @if $mode == "light" {

From cdac6b0de9942076dc6d366633132c24f5232c45 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Thu, 11 Apr 2024 12:07:06 -0500
Subject: [PATCH 2/6] Working for nbsphinx (plus inside ipywidget)

---
 docs/examples/pydata.ipynb                    | 51 +++++++++-
 .../assets/styles/extensions/_notebooks.scss  | 96 +++++++++----------
 2 files changed, 96 insertions(+), 51 deletions(-)

diff --git a/docs/examples/pydata.ipynb b/docs/examples/pydata.ipynb
index 7f2d7d189..c63a73321 100644
--- a/docs/examples/pydata.ipynb
+++ b/docs/examples/pydata.ipynb
@@ -8,8 +8,13 @@
     "\n",
     "This theme has built-in support and special styling for several major visualization libraries in the PyData ecosystem.\n",
     "This ensures that the images and output generated by these libraries looks good for both light and dark modes.\n",
-    "Below are examples of each that we use as a benchmark for reference.\n",
-    "\n",
+    "Below are examples of each that we use as a benchmark for reference."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
     "## Pandas"
    ]
   },
@@ -30,6 +35,46 @@
     "df"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## IPyWidget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import pandas as pd\n",
+    "import numpy as np\n",
+    "import ipywidgets as widgets\n",
+    "from IPython.display import display\n",
+    "\n",
+    "tab = widgets.Tab()\n",
+    "\n",
+    "descr_str = \"Hello\"\n",
+    "\n",
+    "title = widgets.HTML(descr_str)\n",
+    "\n",
+    "# create output widgets\n",
+    "widget_images = widgets.Output()\n",
+    "widget_annotations = widgets.Output()\n",
+    "\n",
+    "# render in output widgets\n",
+    "with widget_images:\n",
+    "    display(pd.DataFrame(np.random.randn(10,10)))\n",
+    "with widget_annotations:\n",
+    "    display(pd.DataFrame(np.random.randn(10,10)))\n",
+    "\n",
+    "tab.children = [widget_images, widget_annotations]\n",
+    "tab.titles = [\"Images\", \"Annotations\"]\n",
+    "\n",
+    "display(widgets.VBox([title, tab]))"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -143,7 +188,7 @@
   },
   "language_info": {
    "name": "python",
-   "version": "3.10.8"
+   "version": "3.11.6"
   }
  },
  "nbformat": 4,
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
index bdf9f6dd2..f34fcee0e 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
@@ -6,6 +6,33 @@
  * In the future, we might add dark theme support for specific packages.
  */
 
+@mixin pandas-data-table {
+  table.dataframe {
+    color: var(--pst-color-table-text);
+
+    thead {
+      tr {
+        background-color: var(--pst-color-table-heading-bg);
+        border-bottom: 2px solid var(--pst-color-primary);
+      }
+    }
+
+    tbody {
+      tr {
+        &:nth-child(odd) {
+          background-color: var(--pst-color-table-row-zebra-1-bg);
+        }
+        &:nth-child(even) {
+          background-color: var(--pst-color-table-row-zebra-2-bg);
+        }
+        &:hover {
+          background-color: var(--pst-color-table-row-hover-bg);
+        }
+      }
+    }
+  }
+}
+
 /*******************************************************************************
  * nbsphinx
  */
@@ -17,21 +44,23 @@ html .jp-RenderedHTMLCommon {
   }
 }
 
-// Dark theme special-cases
-html[data-theme="dark"] .bd-content {
-  .nboutput {
-    .output_area.rendered_html {
-      @include cell-output-background;
+.bd-content .nboutput {
+  .output_area {
+    &.rendered_html,
+    .jp-RenderedHTMLCommon {
+      @include pandas-data-table;
+    }
 
-      // Change the background color of data table outputs to blend seamlessly
-      // with the site's background
-      &:has(table.dataframe) {
-        background-color: var(--pst-color-background);
+    // Dark theme special-cases
+    html[data-theme="dark"] & {
+      &.rendered_html:not(:has(table.dataframe)),
+      .widget-subarea {
+        @include cell-output-background;
       }
-    }
 
-    .output_area.stderr {
-      background: var(--pst-color-danger);
+      &.stderr {
+        background: var(--pst-color-danger);
+      }
     }
   }
 }
@@ -50,12 +79,15 @@ div.cell_output .output {
   overflow-x: auto;
 }
 
-// Dark theme special-cases
-html[data-theme="dark"] .bd-content {
-  div.cell_output {
+.bd-content div.cell_output {
+  @include pandas-data-table;
+
+  html[data-theme="dark"] & {
     img,
     .text_html {
-      @include cell-output-background;
+      &:not(:has(table.dataframe)) {
+        @include cell-output-background;
+      }
     }
   }
 }
@@ -79,35 +111,3 @@ html[data-theme="dark"] .bd-content {
     }
   }
 }
-
-/*******************************************************************************
- * pandas
- */
-
-// Re-style Pandas data tables
-.nboutput .output_area.rendered_html table.dataframe {
-  // ^ Need to use this long selector in order to override library CSS rules
-
-  color: var(--pst-color-table-text);
-
-  thead {
-    tr {
-      background-color: var(--pst-color-table-heading-bg);
-      border-bottom: 2px solid var(--pst-color-primary);
-    }
-  }
-
-  tbody {
-    tr {
-      &:nth-child(odd) {
-        background-color: var(--pst-color-table-row-zebra-1-bg);
-      }
-      &:nth-child(even) {
-        background-color: var(--pst-color-table-row-zebra-2-bg);
-      }
-      &:hover {
-        background-color: var(--pst-color-table-row-hover-bg);
-      }
-    }
-  }
-}

From d7bd7bc1be603274ee97d944bf025d9b700873c0 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Thu, 11 Apr 2024 15:29:31 -0500
Subject: [PATCH 3/6] Add outer and column borders to data table

---
 .../assets/styles/extensions/_notebooks.scss     | 16 ++++++++++++----
 .../assets/styles/variables/_color.scss          |  4 ++++
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
index f34fcee0e..945244bda 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
@@ -9,6 +9,15 @@
 @mixin pandas-data-table {
   table.dataframe {
     color: var(--pst-color-table-text);
+    border: 1px solid var(--pst-color-surface);
+
+    th,
+    td {
+      ~ th,
+      ~ td {
+        border-left: 1px solid var(--pst-color-table-internal-border);
+      }
+    }
 
     thead {
       tr {
@@ -84,10 +93,9 @@ div.cell_output .output {
 
   html[data-theme="dark"] & {
     img,
-    .text_html {
-      &:not(:has(table.dataframe)) {
-        @include cell-output-background;
-      }
+    .text_html:not(:has(table.dataframe)),
+    .widget-subarea {
+      @include cell-output-background;
     }
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
index e1db89d3b..1b5b05fab 100644
--- a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
@@ -211,6 +211,10 @@ $pst-semantic-colors: (
     "bg-light": #{map-deep-get($color-palette, "violet", "300")},
     "bg-dark": #{map-deep-get($color-palette, "violet", "600")},
   ),
+  "table-internal-border": (
+    "light": #{map-deep-get($color-palette, "gray", "200")},
+    "dark": #364150,
+  ),
   // DEPTH COLORS - you can see the elevation colours and shades
   // in the Figma file https://www.figma.com/file/rUrrHGhUBBIAAjQ82x6pz9/PyData-Design-system---proposal-for-implementation-(2)?node-id=1492%3A922&t=sQeQZehkOzposYEg-1
   // background: color of the canvas / the furthest back layer

From 8fbe5692ff6d23fc9e9ed6919302df36a123765c Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Thu, 11 Apr 2024 15:39:30 -0500
Subject: [PATCH 4/6] Rename color vars

---
 .../assets/styles/extensions/_notebooks.scss       | 14 +++++++-------
 .../assets/styles/variables/_color.scss            | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
index 945244bda..01109de4f 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
@@ -8,20 +8,20 @@
 
 @mixin pandas-data-table {
   table.dataframe {
-    color: var(--pst-color-table-text);
-    border: 1px solid var(--pst-color-surface);
+    color: var(--pst-color-data-table);
+    border: 1px solid var(--pst-color-data-table-outer-border);
 
     th,
     td {
       ~ th,
       ~ td {
-        border-left: 1px solid var(--pst-color-table-internal-border);
+        border-left: 1px solid var(--pst-color-data-table-inner-border);
       }
     }
 
     thead {
       tr {
-        background-color: var(--pst-color-table-heading-bg);
+        background-color: var(--pst-color-data-table-heading-bg);
         border-bottom: 2px solid var(--pst-color-primary);
       }
     }
@@ -29,13 +29,13 @@
     tbody {
       tr {
         &:nth-child(odd) {
-          background-color: var(--pst-color-table-row-zebra-1-bg);
+          background-color: var(--pst-color-data-table-row-zebra-high-bg);
         }
         &:nth-child(even) {
-          background-color: var(--pst-color-table-row-zebra-2-bg);
+          background-color: var(--pst-color-data-table-row-zebra-low-bg);
         }
         &:hover {
-          background-color: var(--pst-color-table-row-hover-bg);
+          background-color: var(--pst-color-data-table-row-hover-bg);
         }
       }
     }
diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
index 1b5b05fab..58e10f30c 100644
--- a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
@@ -203,15 +203,15 @@ $pst-semantic-colors: (
     "light": #f3cf95,
     "dark": #675c04,
   ),
-  "table-text": (
+  "data-table": (
     "light": #{map-deep-get($color-palette, "foundation", "black")},
     "dark": #{map-deep-get($color-palette, "foundation", "white")},
   ),
-  "table-row-hover": (
+  "data-table-row-hover": (
     "bg-light": #{map-deep-get($color-palette, "violet", "300")},
     "bg-dark": #{map-deep-get($color-palette, "violet", "600")},
   ),
-  "table-internal-border": (
+  "data-table-inner-border": (
     "light": #{map-deep-get($color-palette, "gray", "200")},
     "dark": #364150,
   ),
@@ -277,10 +277,10 @@ $pst-semantic-colors: (
   & {
     --pst-color-link: var(--pst-color-primary);
     --pst-color-link-hover: var(--pst-color-secondary);
-    --pst-color-table: var(--pst-color-foundation);
-    --pst-color-table-heading-bg: var(--pst-color-surface);
-    --pst-color-table-row-zebra-1-bg: var(--pst-color-on-background);
-    --pst-color-table-row-zebra-2-bg: var(--pst-color-surface);
+    --pst-color-data-table-outer-border: var(--pst-color-surface);
+    --pst-color-data-table-heading-bg: var(--pst-color-surface);
+    --pst-color-data-table-row-zebra-high-bg: var(--pst-color-on-background);
+    --pst-color-data-table-row-zebra-low-bg: var(--pst-color-surface);
   }
   // adapt to light/dark-specific content
   @if $mode == "light" {

From f907229603bb77db1a81f408b5cfdacc3cdd8268 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Thu, 18 Apr 2024 07:55:47 -0500
Subject: [PATCH 5/6] Extend data-table styles to all tables

---
 .../assets/styles/abstracts/_mixins.scss      | 34 ++++++++++++++
 .../assets/styles/content/_tables.scss        |  4 ++
 .../assets/styles/extensions/_notebooks.scss  | 46 ++++---------------
 .../assets/styles/variables/_color.scss       | 14 +++---
 4 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
index d74bbbb9f..22c4ba7f0 100644
--- a/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
+++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
@@ -20,3 +20,37 @@
   border-radius: 0.25rem;
   padding: 0.5rem;
 }
+
+@mixin table-colors {
+  color: var(--pst-color-table);
+  border: 1px solid var(--pst-color-table-outer-border);
+
+  th,
+  td {
+    ~ th,
+    ~ td {
+      border-left: 1px solid var(--pst-color-table-inner-border);
+    }
+  }
+
+  thead {
+    tr {
+      background-color: var(--pst-color-table-heading-bg);
+      border-bottom: 2px solid var(--pst-color-primary);
+    }
+  }
+
+  tbody {
+    tr {
+      &:nth-child(odd) {
+        background-color: var(--pst-color-table-row-zebra-low-bg);
+      }
+      &:nth-child(even) {
+        background-color: var(--pst-color-table-row-zebra-high-bg);
+      }
+      &:hover {
+        background-color: var(--pst-color-table-row-hover-bg);
+      }
+    }
+  }
+}
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_tables.scss b/src/pydata_sphinx_theme/assets/styles/content/_tables.scss
index c476269c8..b70132374 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_tables.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_tables.scss
@@ -4,6 +4,8 @@
 
 // ensure table will fit in the article width and make them y-scrollable
 table {
+  @include table-colors;
+
   display: table;
   overflow: auto;
 
@@ -46,6 +48,8 @@ td {
 
 // override bootstrap table colors
 .table {
+  @include table-colors;
+
   --bs-table-bg: transparent; //background
   --bs-table-color: var(
     --pst-color-text-base
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
index 881986f0e..5ae3cbde5 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
@@ -6,42 +6,6 @@
  * In the future, we might add dark theme support for specific packages.
  */
 
-@mixin pandas-data-table {
-  table.dataframe {
-    color: var(--pst-color-data-table);
-    border: 1px solid var(--pst-color-data-table-outer-border);
-
-    th,
-    td {
-      ~ th,
-      ~ td {
-        border-left: 1px solid var(--pst-color-data-table-inner-border);
-      }
-    }
-
-    thead {
-      tr {
-        background-color: var(--pst-color-data-table-heading-bg);
-        border-bottom: 2px solid var(--pst-color-primary);
-      }
-    }
-
-    tbody {
-      tr {
-        &:nth-child(odd) {
-          background-color: var(--pst-color-data-table-row-zebra-high-bg);
-        }
-        &:nth-child(even) {
-          background-color: var(--pst-color-data-table-row-zebra-low-bg);
-        }
-        &:hover {
-          background-color: var(--pst-color-data-table-row-hover-bg);
-        }
-      }
-    }
-  }
-}
-
 /*******************************************************************************
  * nbsphinx
  */
@@ -57,7 +21,10 @@ html .jp-RenderedHTMLCommon {
   .output_area {
     &.rendered_html,
     .jp-RenderedHTMLCommon {
-      @include pandas-data-table;
+      // pandas
+      table.dataframe {
+        @include table-colors;
+      }
     }
 
     // Dark theme special-cases
@@ -89,7 +56,10 @@ div.cell_output .output {
 }
 
 .bd-content div.cell_output {
-  @include pandas-data-table;
+  // pandas
+  table.dataframe {
+    @include table-colors;
+  }
 
   html[data-theme="dark"] & {
     img,
diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
index 4edc0597f..d25ba65e3 100644
--- a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
+++ b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
@@ -203,15 +203,15 @@ $pst-semantic-colors: (
     "light": #f3cf95,
     "dark": #675c04,
   ),
-  "data-table": (
+  "table": (
     "light": #{map-deep-get($color-palette, "foundation", "black")},
     "dark": #{map-deep-get($color-palette, "foundation", "white")},
   ),
-  "data-table-row-hover": (
+  "table-row-hover": (
     "bg-light": #{map-deep-get($color-palette, "violet", "300")},
     "bg-dark": #{map-deep-get($color-palette, "violet", "600")},
   ),
-  "data-table-inner-border": (
+  "table-inner-border": (
     "light": #{map-deep-get($color-palette, "gray", "200")},
     "dark": #364150,
   ),
@@ -277,10 +277,10 @@ $pst-semantic-colors: (
   & {
     --pst-color-link: var(--pst-color-primary);
     --pst-color-link-hover: var(--pst-color-secondary);
-    --pst-color-data-table-outer-border: var(--pst-color-surface);
-    --pst-color-data-table-heading-bg: var(--pst-color-surface);
-    --pst-color-data-table-row-zebra-high-bg: var(--pst-color-on-background);
-    --pst-color-data-table-row-zebra-low-bg: var(--pst-color-surface);
+    --pst-color-table-outer-border: var(--pst-color-surface);
+    --pst-color-table-heading-bg: var(--pst-color-surface);
+    --pst-color-table-row-zebra-high-bg: var(--pst-color-on-background);
+    --pst-color-table-row-zebra-low-bg: var(--pst-color-surface);
   }
   // adapt to light/dark-specific content
   @if $mode == "light" {

From 8d8ac06768f45464b45d0cb0732439fd8dcbd226 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Tue, 7 May 2024 08:49:48 -0500
Subject: [PATCH 6/6] Apply suggestions from code review

---
 .../assets/styles/extensions/_notebooks.scss                    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
index 5ae3cbde5..c012e0840 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
+++ b/src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
@@ -30,6 +30,7 @@ html .jp-RenderedHTMLCommon {
     // Dark theme special-cases
     html[data-theme="dark"] & {
       &.rendered_html:not(:has(table.dataframe)),
+      // ipywidgets
       .widget-subarea {
         @include cell-output-background;
       }
@@ -64,6 +65,7 @@ div.cell_output .output {
   html[data-theme="dark"] & {
     img,
     .text_html:not(:has(table.dataframe)),
+    // ipywidgets
     .widget-subarea {
       @include cell-output-background;
     }