[pull] main from mdn:main

files/en-us/mozilla/add-ons/webextensions/api/theme/update/index.md

@@ -37,7 +37,7 @@ const sunTheme = {
   },
   colors: {
     frame: "#CF723F",
-    tab_background_text: "#111",
+    tab_background_text: "#111111",
   },
 };
 
@@ -53,7 +53,7 @@ const day = {
   },
   colors: {
     frame: "#CF723F",
-    tab_background_text: "#111",
+    tab_background_text: "#111111",
   },
 };
 

files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md

@@ -257,8 +257,8 @@ let pattern = "https://developer.mozilla.org/*";
 
 let image = `
   <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
-    <rect style="stroke-width: 10; stroke: #666;" width="100%" height="100%" fill="#d4d0c8" />
-    <text transform="translate(0, 9)" x="50%" y="50%" width="100%" fill="#666" height="100%" style="text-anchor: middle; font: bold 10pt 'Segoe UI', Arial, Helvetica, Sans-serif;">Blocked</text>
+    <rect style="stroke-width: 10; stroke: #666666;" width="100%" height="100%" fill="#d4d0c8" />
+    <text transform="translate(0, 9)" x="50%" y="50%" width="100%" fill="#666666" height="100%" style="text-anchor: middle; font: bold 10pt 'Segoe UI', Arial, Helvetica, Sans-serif;">Blocked</text>
   </svg>
 `;
 

files/en-us/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md

@@ -392,7 +392,7 @@ button.panel-section-tabs-button {
 }
 
 .panel-list-item.disabled {
-  color: #999;
+  color: #999999;
 }
 
 .panel-list-item > .icon {

files/en-us/mozilla/firefox/releases/142/index.md

@@ -81,7 +81,7 @@ Firefox 142 is the current [Beta version of Firefox](https://www.firefox.com/en-
 #### WebDriver BiDi
 
 - Implemented the new `emulation.setLocaleOverride` command which allows clients to override a locale in JavaScript APIs ([Firefox bug 1968952](https://bugzil.la/1968952)).
-- Improved setting a proxy with `browsingContext.createUserContext`: added support for host patterns like `.mozilla.org` in `noProxy` property ([Firefox bug 1977180](https://bugzil.la/1977180)) and fixed a bug when setting a HTTP proxy wouldn’t allow to navigate to HTTPS URLs ([Firefox bug 1977168](https://bugzil.la/1977168)).
+- Improved setting a proxy with `browsingContext.createUserContext`: added support for host patterns like `.mozilla.org` in `noProxy` property ([Firefox bug 1977180](https://bugzil.la/1977180)) and fixed a bug when setting a HTTP proxy wouldn't allow to navigate to HTTPS URLs ([Firefox bug 1977168](https://bugzil.la/1977168)).
 - Fixed a bug where `browsingContext.create` would fail after a `browsingContext.print` command was interrupted by closing a tab with the `browsingContext.close` command ([Firefox bug 1841125](https://bugzil.la/1841125)).
 - Updated the `session.end` command to resume all requests which were blocked by network interceptions ([Firefox bug 1974426](https://bugzil.la/1974426)).
 

files/en-us/web/accessibility/aria/reference/roles/menuitemradio_role/index.md

@@ -125,7 +125,7 @@ The visual appearance of the selected state is a checked radio button which we c
   width: 1em;
   height: 1em;
   padding: 0.1em;
-  border: 2px solid #333;
+  border: 2px solid #333333;
   border-radius: 50%;
   box-sizing: border-box;
   background-clip: content-box;

files/en-us/web/accessibility/aria/reference/roles/switch_role/index.md

@@ -153,13 +153,13 @@ button.switch span {
 
 [role="switch"][aria-checked="false"] :first-child,
 [role="switch"][aria-checked="true"] :last-child {
-  background: #262;
-  color: #eef;
+  background: #226622;
+  color: #eeeeff;
 }
 
 [role="switch"][aria-checked="false"] :last-child,
 [role="switch"][aria-checked="true"] :first-child {
-  color: #bbd;
+  color: #bbbbdd;
 }
 
 label.switch {

files/en-us/web/css/--_star_/index.md

@@ -48,8 +48,8 @@ Custom properties are scoped to the element(s) they are declared on, and partici
 
 ```css
 :root {
-  --first-color: #16f;
-  --second-color: #ff7;
+  --first-color: #1166ff;
+  --second-color: #ffff77;
 }
 
 #firstParagraph {
@@ -63,7 +63,7 @@ Custom properties are scoped to the element(s) they are declared on, and partici
 }
 
 #container {
-  --first-color: #290;
+  --first-color: #229900;
 }
 
 #thirdParagraph {

files/en-us/web/css/@font-palette-values/override-colors/index.md

@@ -18,7 +18,7 @@ override-colors: <index of color> <color>;
 override-colors: 0 red;
 
 /* using hex-color */
-override-colors: 0 #f00;
+override-colors: 0 #ff0000;
 
 /* using rgb */
 override-colors: 0 rgb(255 0 0);

files/en-us/web/css/@media/aspect-ratio/index.md

@@ -35,22 +35,22 @@ Note that, when none of the media query conditions are true, the background will
 /* Select aspect ratios 8/5 = 1.6 and above */
 @media (min-aspect-ratio: 8/5) {
   div {
-    background: #99f; /* blue */
+    background: #9999ff; /* blue */
   }
 }
 
 /* Maximum allowed aspect ratio */
 /* Select aspect ratios 3/2 = 1.5 and below */
 @media (max-aspect-ratio: 3/2) {
   div {
-    background: #9f9; /* green */
+    background: #99ff99; /* green */
   }
 }
 
 /* Exact aspect ratio, put it at the bottom to avoid override */
 @media (aspect-ratio: 1/1) {
   div {
-    background: #f99; /* red */
+    background: #ff9999; /* red */
   }
 }
 ```
@@ -66,7 +66,7 @@ Note that, when none of the media query conditions are true, the background will
 
 <iframe
   id="outer"
-  srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #99f; } } @media (max-aspect-ratio: 3/2) { div { background: #9f9; } } @media (aspect-ratio: 1/1) { div { background: #f99; } }</style><div id='inner'> Watch this element as you resize iframe viewport's width and height.</div>">
+  srcdoc="<style> @media (min-aspect-ratio: 8/5) { div { background: #9999ff; } } @media (max-aspect-ratio: 3/2) { div { background: #99ff99; } } @media (aspect-ratio: 1/1) { div { background: #ff9999; } }</style><div id='inner'> Watch this element as you resize iframe viewport's width and height.</div>">
 </iframe>
 ```
 

files/en-us/web/css/@media/display-mode/index.md

@@ -59,7 +59,7 @@ In this example, we combine the `display-mode: picture-in-picture` value with th
 
 @media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
   body {
-    background: #333;
+    background: #333333;
   }
 
   a {

files/en-us/web/css/@media/inverted-colors/index.md

@@ -65,7 +65,7 @@ p {
 
 @media (inverted-colors: none) {
   p {
-    background: #eee;
+    background: #eeeeee;
     color: red;
   }
 }

files/en-us/web/css/@media/monochrome/index.md

@@ -32,7 +32,7 @@ p {
 @media (monochrome) {
   p.mono {
     display: block;
-    color: #333;
+    color: #333333;
   }
 }
 

files/en-us/web/css/@media/prefers-color-scheme/index.md

@@ -62,13 +62,13 @@ Theme A (brown) uses a light color scheme by default, but will switch to a dark
 
 ```css
 .theme-a {
-  background: #dca;
-  color: #731;
+  background: #ddccaa;
+  color: #773311;
 }
 @media (prefers-color-scheme: dark) {
   .theme-a.adaptive {
-    background: #753;
-    color: #dcb;
+    background: #775533;
+    color: #ddccbb;
     outline: 5px dashed black;
   }
 }
@@ -78,13 +78,13 @@ Theme B (blue) uses a dark color scheme by default, but will switch to a light s
 
 ```css
 .theme-b {
-  background: #447;
-  color: #bbd;
+  background: #444477;
+  color: #bbbbdd;
 }
 @media (prefers-color-scheme: light) {
   .theme-b.adaptive {
-    background: #bcd;
-    color: #334;
+    background: #bbccdd;
+    color: #333344;
     outline: 5px dotted black;
   }
 }

files/en-us/web/css/@position-try/index.md

@@ -142,7 +142,7 @@ The anchor is given an {{cssxref("anchor-name")}} and has a {{cssxref("position"
 .infobox {
   color: darkblue;
   background-color: azure;
-  border: 1px solid #ddd;
+  border: 1px solid #dddddd;
   padding: 10px;
   border-radius: 10px;
   font-size: 1rem;

files/en-us/web/css/@scope/index.md

@@ -258,11 +258,11 @@ If you wrote the theme CSS like so, you'd run into trouble:
 
 ```css
 .light-theme {
-  background: #ccc;
+  background: #cccccc;
 }
 
 .dark-theme {
-  background: #333;
+  background: #333333;
 }
 
 .light-theme p {
@@ -281,7 +281,7 @@ To fix this, you can use `@scope` as follows:
 ```css
 @scope (.light-theme) {
   :scope {
-    background: #ccc;
+    background: #cccccc;
   }
   p {
     color: black;
@@ -290,7 +290,7 @@ To fix this, you can use `@scope` as follows:
 
 @scope (.dark-theme) {
   :scope {
-    background: #333;
+    background: #333333;
   }
   p {
     color: white;

files/en-us/web/css/_colon_active/index.md

@@ -83,7 +83,7 @@ a:active {
 
 /* Active paragraphs */
 p:active {
-  background: #eee;
+  background: #eeeeee;
 }
 ```
 

files/en-us/web/css/_colon_checked/index.md

@@ -180,15 +180,15 @@ This example utilizes the `:checked` pseudo-class to let the user toggle content
 /* Hide expandable content by default */
 .expandable {
   visibility: collapse;
-  background: #ddd;
+  background: #dddddd;
 }
 
 /* Style the button */
 #expand-btn {
   display: inline-block;
   margin-top: 12px;
   padding: 5px 11px;
-  background-color: #ff7;
+  background-color: #ffff77;
   border: 1px solid;
   border-radius: 3px;
 }
@@ -200,7 +200,7 @@ This example utilizes the `:checked` pseudo-class to let the user toggle content
 
 /* Style the button when the checkbox is checked */
 #expand-toggle:checked ~ #expand-btn {
-  background-color: #ccc;
+  background-color: #cccccc;
 }
 ```
 

files/en-us/web/css/_colon_defined/index.md

@@ -64,7 +64,7 @@ custom-element {
 }
 
 code {
-  background: #ccc;
+  background: #cccccc;
 }
 
 #btn {

files/en-us/web/css/_colon_disabled/index.md

@@ -81,7 +81,7 @@ This example shows a basic shipping form. It uses the [JavaScript](/en-US/docs/W
 
 ```css
 input[type="text"]:disabled {
-  background: #ccc;
+  background: #cccccc;
 }
 ```
 

files/en-us/web/css/_colon_enabled/index.md

@@ -70,11 +70,11 @@ The following example makes the color of text and button {{htmlElement("input")}
 
 ```css
 input:enabled {
-  color: #2b2;
+  color: #22bb22;
 }
 
 input:disabled {
-  color: #aaa;
+  color: #aaaaaa;
 }
 ```
 

files/en-us/web/css/_colon_focus-within/index.md

@@ -75,7 +75,7 @@ form {
 }
 
 form:focus-within {
-  background: #ff8;
+  background: #ffff88;
   color: black;
 }
 

files/en-us/web/css/_colon_read-only/index.md

@@ -156,7 +156,7 @@ input:hover,
 input:focus,
 textarea:hover,
 textarea:focus {
-  background-color: #eee;
+  background-color: #eeeeee;
 }
 
 button {
@@ -170,7 +170,7 @@ input:read-only,
 textarea:read-only {
   border: 0;
   box-shadow: none;
-  background-color: #ddd;
+  background-color: #dddddd;
 }
 
 textarea:read-write {

files/en-us/web/css/_colon_read-write/index.md

@@ -106,7 +106,7 @@ textarea:read-only {
 }
 
 textarea:read-write {
-  box-shadow: inset 1px 1px 3px #ccc;
+  box-shadow: inset 1px 1px 3px #cccccc;
   border-radius: 5px;
 }
 ```

files/en-us/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.md

@@ -52,7 +52,13 @@ body {
 }
 
 #styled::-webkit-meter-even-less-good-value {
-  background: linear-gradient(to bottom, #f77, #900 45%, #900 55%, #f77);
+  background: linear-gradient(
+    to bottom,
+    #ff7777,
+    #990000 45%,
+    #990000 55%,
+    #ff7777
+  );
   height: 100%;
   box-sizing: border-box;
 }

files/en-us/web/css/_doublecolon_-webkit-meter-inner-element/index.md

@@ -48,7 +48,7 @@ body {
 #styled::-webkit-meter-inner-element {
   -webkit-appearance: inherit;
   box-sizing: inherit;
-  border: 1px dashed #aaa;
+  border: 1px dashed #aaaaaa;
 }
 ```
 

files/en-us/web/css/_doublecolon_-webkit-meter-optimum-value/index.md

@@ -54,7 +54,13 @@ body {
 }
 
 #styled::-webkit-meter-optimum-value {
-  background: linear-gradient(to bottom, #7f7, #090 45%, #090 55%, #7f7);
+  background: linear-gradient(
+    to bottom,
+    #77ff77,
+    #009900 45%,
+    #009900 55%,
+    #77ff77
+  );
   height: 100%;
   box-sizing: border-box;
 }

files/en-us/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md

@@ -54,7 +54,13 @@ body {
 }
 
 #styled::-webkit-meter-suboptimum-value {
-  background: linear-gradient(to bottom, #ff7, #990 45%, #990 55%, #ff7);
+  background: linear-gradient(
+    to bottom,
+    #ffff77,
+    #999900 45%,
+    #999900 55%,
+    #ffff77
+  );
   height: 100%;
   box-sizing: border-box;
 }