fix(css): fix contrast of 9 css examples (#2469)

* Improve contrast pointer events * fix(css): fix contrast of margin-inline * fix(css): fix contrast of margin-bottom * fix(css): fix contrast in margin-block.css this commit improves the contrast of margin-block, margin-block-start, and margin-block-end * fix(css): improve contrast of list-style-type * fix(css): fix contrast of text in list-style-type * fix(css): fix example link in pointer-events * fix: change stroke to fill in pointer-events * remove style list-style-type * fix: add class to give color list-style-type * remove style * fix(css): fix color of text in pointer-events.css * fix * fix(css): fix contrast by changing color * fix:css change color * Fix lint --------- Co-authored-by: Michał Niedziółka <niedziolek@hotmail.com>
mdn · Mar 3, 2023 · f32a584 · f32a584
1 parent 6f1e102
commit f32a584
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 15 deletions.
diff --git a/live-examples/css-examples/basic-box-model/margin.css b/live-examples/css-examples/basic-box-model/margin.css
@@ -10,12 +10,12 @@
 .row {
     height: 33.33%;
     display: inline-block;
-    border: solid #5b6dcd 10px;
-    background-color: rgba(229, 232, 252, 0.6);
+    border: solid #ce7777 10px;
+    background-color: #2b3a55;
     flex-shrink: 0;
 }
 
 #example-element {
-    border: solid 10px #ffc129;
-    background-color: rgba(255, 244, 219, 0.6);
+    border: solid 10px #ffbf00;
+    background-color: #2b3a55;
 }
diff --git a/live-examples/css-examples/lists/list-style.css b/live-examples/css-examples/lists/list-style.css
@@ -4,7 +4,8 @@
 
 #example-element {
     width: 100%;
-    background: #f1f8ff30;
+    background: #be094b;
+    color: white;
 }
 
 .output section {
@@ -22,6 +23,10 @@
     font-size: 0.8rem;
 }
 
+.note a {
+    color: #009e5f;
+}
+
 @counter-style space-counter {
     symbols: '\1F680''\1F6F8''\1F6F0''\1F52D';
     suffix: ' ';

diff --git a/live-examples/css-examples/logical-properties/margin-block.css b/live-examples/css-examples/logical-properties/margin-block.css
@@ -10,12 +10,12 @@
 .row {
     height: 33.33%;
     display: inline-block;
-    border: solid #5b6dcd 10px;
-    background-color: rgba(229, 232, 252, 0.6);
+    border: solid #ce7777 10px;
+    background-color: #2b3a55;
     flex-shrink: 0;
 }
 
 #example-element {
-    border: solid 10px #ffc129;
-    background-color: rgba(255, 244, 219, 0.6);
+    border: solid 10px #ffbf00;
+    background-color: #2b3a55;
 }
diff --git a/live-examples/css-examples/logical-properties/margin-inline.css b/live-examples/css-examples/logical-properties/margin-inline.css
@@ -8,13 +8,14 @@
 
 .col {
     width: 33.33%;
-    border: solid #5b6dcd 10px;
-    background-color: rgba(229, 232, 252, 0.6);
+    border: solid #ce7777 10px;
+    background-color: #2b3a55;
+    color: white;
     flex-shrink: 0;
 }
 
 #example-element {
-    border: solid 10px #ffc129;
-    background-color: rgba(255, 244, 219, 0.6);
+    border: solid 10px #ffbf00;
+    background-color: #2b3a55;
     unicode-bidi: bidi-override;
 }
diff --git a/live-examples/css-examples/svg/pointer-events.css b/live-examples/css-examples/svg/pointer-events.css
@@ -2,6 +2,10 @@
     font-weight: bold;
 }
 
+#example-element a {
+    color: #009e5f;
+}
+
 #example-element svg {
     width: 10em;
     height: 10em;

diff --git a/live-examples/css-examples/svg/pointer-events.html b/live-examples/css-examples/svg/pointer-events.html
@@ -38,8 +38,8 @@
             <p>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                     <a xlink:href="#">
-                        <circle cx="50" cy="50" r="40" stroke="orange" stroke-width="5" fill="lightblue"/>
-                        <text x="50" y="55" text-anchor="middle" stroke="black">SVG</text>
+                        <circle cx="50" cy="50" r="40" stroke="#ffb500" stroke-width="5" fill="#264653"/>
+                        <text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
                     </a>
                 </svg>
             </p>