make image visible by forcing light bg

lit · Mar 4, 2024 · a74592f · a74592f
1 parent f3d1f3e
commit a74592f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/packages/lit-dev-content/site/css/colors.css b/packages/lit-dev-content/site/css/colors.css
@@ -59,6 +59,7 @@ body.light {
   --sys-color-on-dark-surface-emphasis: #fff;
   --sys-color-dark-surface: #303030;
   --sys-color-dark-surface-dim: #222;
+  --sys-color-light-surface: #f9f9f9;
 
   --playground-code-background: var(--sys-color-surface);
   --playground-code-keyword-color: #d92f3f;

diff --git a/packages/lit-dev-content/site/css/docs.css b/packages/lit-dev-content/site/css/docs.css
@@ -254,6 +254,10 @@ article h4 {
   margin-top: 1.3em;
 }
 
+article .light-bg {
+  background-color: var(--sys-color-light-surface);
+}
+
 /* ------------------------------------
  * Lists
  * ------------------------------------ */

diff --git a/packages/lit-dev-content/site/docs/v2/composition/component-composition.md b/packages/lit-dev-content/site/docs/v2/composition/component-composition.md
@@ -62,7 +62,7 @@ A few implications of this model:
 Consider a menu component that includes a set of menu items and exposes `items` and `selectedItem` properties as part of its public API. Its DOM structure might look like this:
 
 
-![A hierarchy of DOM nodes representing a menu. The top node, my-menu, has a ShadowRoot, which contains three my-item elements.](/images/docs/composition/composition-menu-component.png)
+![A hierarchy of DOM nodes representing a menu. The top node, my-menu, has a ShadowRoot, which contains three my-item elements.](/images/docs/composition/composition-menu-component.png){.light-bg}
 
 When the user selects an item, the `my-menu` element should update its `selectedItem` property. It should also fire an event to notify any owning component that the selection has changed. The complete sequence would be something like this:
 

diff --git a/packages/lit-dev-content/site/docs/v3/composition/component-composition.md b/packages/lit-dev-content/site/docs/v3/composition/component-composition.md
@@ -62,7 +62,7 @@ A few implications of this model:
 Consider a menu component that includes a set of menu items and exposes `items` and `selectedItem` properties as part of its public API. Its DOM structure might look like this:
 
 
-![A hierarchy of DOM nodes representing a menu. The top node, my-menu, has a ShadowRoot, which contains three my-item elements.](/images/docs/composition/composition-menu-component.png)
+![A hierarchy of DOM nodes representing a menu. The top node, my-menu, has a ShadowRoot, which contains three my-item elements.](/images/docs/composition/composition-menu-component.png){.light-bg}
 
 When the user selects an item, the `my-menu` element should update its `selectedItem` property. It should also fire an event to notify any owning component that the selection has changed. The complete sequence would be something like this: