From a74592f215100702657fa7627463ebf546049468 Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Mon, 4 Mar 2024 12:18:38 -0800 Subject: [PATCH] make image visible by forcing light bg --- packages/lit-dev-content/site/css/colors.css | 1 + packages/lit-dev-content/site/css/docs.css | 4 ++++ .../site/docs/v2/composition/component-composition.md | 2 +- .../site/docs/v3/composition/component-composition.md | 2 +- 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/lit-dev-content/site/css/colors.css b/packages/lit-dev-content/site/css/colors.css index 9c7ff1a73..ccf91b1f7 100644 --- 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 index c87006d41..953b9c6f9 100644 --- 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 index 0e926ae7c..e7777761f 100644 --- 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 index 38cda5d61..086460ca6 100644 --- 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: