CSS live examples: color contrast improvements (#2848)

* css logical-properties: Set fg & bg color

For the demonstration elements with
background-color: yellow, also set explicit
foreground color. Prevents white-on-yellow
text, with the dark skin.

* css content-visibility: Set fg & bg color

For demonstration elements with background-color: set and text content,
also set explicit foreground color.

* CSS filter example: Add white container element

The default filter in the example is a drop-shadow, which will be
invisible in dark mode against the default black background. Add an
`.example-container` div with background-color set to `#fff`, so
that the effect is visible regardless of the selected theme.

Author: ferdnyc

live-examples/css-examples/container/content-visibility.css

@@ -11,6 +11,7 @@
 .child {
   border: 3px solid rgb(64, 28, 163);
   background-color: wheat;
+  color: black;
   width: 80%;
   height: 80%;
   display: flex;

live-examples/css-examples/filter-effects/filter.css

@@ -0,0 +1,13 @@
+.example-container {
+  background-color: #fff;
+  width: 260px;
+  height: 260px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#example-element {
+  flex: 1;
+  padding: 30px;
+}

live-examples/css-examples/filter-effects/filter.html

@@ -44,6 +44,8 @@
 
 <div id="output" class="output large hidden">
   <section id="default-example">
-    <img id="example-element" src="../../media/examples/firefox-logo.svg" width="200" />
+    <div class="example-container">
+      <img id="example-element" src="../../media/examples/firefox-logo.svg" width="200" />
+    </div>
   </section>
 </div>

live-examples/css-examples/filter-effects/meta.json

@@ -32,6 +32,7 @@
       "type": "css"
     },
     "filter": {
+      "cssExampleSrc": "./live-examples/css-examples/filter-effects/filter.css",
       "exampleCode": "./live-examples/css-examples/filter-effects/filter.html",
       "fileName": "filter.html",
       "title": "CSS Demo: filter",

live-examples/css-examples/logical-properties/inset-block-end.css

@@ -9,6 +9,7 @@
 
 #abspos {
   background-color: yellow;
+  color: black;
   border: 3px solid red;
   position: absolute;
   inset-block-end: 20px;

live-examples/css-examples/logical-properties/inset-block-start.css

@@ -9,6 +9,7 @@
 
 #abspos {
   background-color: yellow;
+  color: black;
   border: 3px solid red;
   position: absolute;
   inset-block-start: 50px;

live-examples/css-examples/logical-properties/inset-inline-end.css

@@ -9,6 +9,7 @@
 
 #abspos {
   background-color: yellow;
+  color: black;
   border: 3px solid red;
   position: absolute;
   inset-inline-end: 50px;

live-examples/css-examples/logical-properties/inset-inline-start.css

@@ -9,6 +9,7 @@
 
 #abspos {
   background-color: yellow;
+  color: black;
   border: 3px solid red;
   position: absolute;
   inset-inline-start: 50px;