[pull] main from mdn:main

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

@@ -38,7 +38,7 @@ width: calc(var(--variable-width) + 20px);
 }
 
 #example-element {
-  border: 10px solid #000;
+  border: 10px solid black;
   padding: 10px;
 }
 ```

files/en-us/web/css/caption-side/index.md

@@ -52,7 +52,7 @@ caption-side: bottom;
 table {
   font-size: 1.2rem;
   text-align: left;
-  color: #000;
+  color: black;
 }
 
 th,

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

@@ -154,7 +154,7 @@ clear: unset;
   float: left;
   margin: 0;
   background-color: black;
-  color: #fff;
+  color: white;
   width: 20%;
 }
 .red {
@@ -200,7 +200,7 @@ p {
   float: right;
   margin: 0;
   background-color: black;
-  color: #fff;
+  color: white;
   width: 20%;
 }
 .red {
@@ -250,7 +250,7 @@ p {
   float: left;
   margin: 0;
   background-color: black;
-  color: #fff;
+  color: white;
   width: 20%;
 }
 .red {

files/en-us/web/css/clip-rule/index.md

@@ -93,7 +93,7 @@ svg {
 
 #star3 path {
   fill: none;
-  stroke: #000;
+  stroke: black;
   stroke-width: 1;
 }
 ```

files/en-us/web/css/color_value/color-mix/index.md

@@ -24,9 +24,9 @@ color-mix(in hsl, hsl(200 50 80), coral 80%)
 color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)
 
 /* color-mix(in <rectangular-color-space>, <color>, <color>) */
-color-mix(in srgb, plum, #f00)
+color-mix(in srgb, plum, #123456)
 /* color-mix(in <rectangular-color-space>, <color> <percentage>, <color> <percentage> */
-color-mix(in lab, plum 60%, #f00 50%)
+color-mix(in lab, plum 60%, #123456 50%)
 
 /* color-mix(in <custom-color-space>, <color>, <color>) */
 color-mix(in --swop5c, red, blue)

files/en-us/web/css/color_value/color/index.md

@@ -23,7 +23,7 @@ color(display-p3 1 0.5 0 / .5);
 
 /* Relative values */
 color(from green srgb r g b / 0.5)
-color(from #0000FF xyz calc(x + 0.75) y calc(z - 0.35))
+color(from #123456 xyz calc(x + 0.75) y calc(z - 0.35))
 ```
 
 ### Values

files/en-us/web/css/color_value/hsl/index.md

@@ -59,7 +59,7 @@ hsl(none 75% 25%)
 
 /* Relative values */
 hsl(from green h s l / 0.5)
-hsl(from #0000FF h s calc(l + 20))
+hsl(from #123456 h s calc(l + 20))
 hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30))
 
 /* Legacy 'hsla()' alias */

files/en-us/web/css/color_value/hwb/index.md

@@ -52,7 +52,7 @@ hwb(194 0% 0% / .5)
 
 /* Relative values */
 hwb(from green h w b / 0.5)
-hwb(from #0000FF h calc(w + 30) b)
+hwb(from #123456 h calc(w + 30) b)
 hwb(from lch(40% 70 240deg) h w calc(b - 30))
 ```
 

files/en-us/web/css/color_value/lab/index.md

@@ -23,7 +23,7 @@ lab(52.2345% 40.1645 59.9971 / .5);
 
 /* Relative values */
 lab(from green l a b / 0.5)
-lab(from #0000FF calc(l + 10) a b)
+lab(from #123456 calc(l + 10) a b)
 lab(from hsl(180 100% 50%) calc(l - 10) a b)
 ```
 

files/en-us/web/css/color_value/lch/index.md

@@ -21,7 +21,7 @@ lch(52.2345% 72.2 56.2 / .5);
 
 /* Relative values */
 lch(from green l c h / 0.5)
-lch(from #0000FF calc(l + 10) c h)
+lch(from #123456 calc(l + 10) c h)
 lch(from hsl(180 100% 50%) calc(l - 10) c h)
 lch(from var(--aColorValue) l c h / calc(alpha - 0.1))
 ```

files/en-us/web/css/color_value/oklab/index.md

@@ -29,7 +29,7 @@ oklab(59.69% 0.1007 0.1191 / 0.5);
 
 /* Relative values */
 oklab(from green l a b / 0.5)
-oklab(from #0000FF calc(l + 0.1) a b / calc(alpha * 0.9))
+oklab(from #123456 calc(l + 0.1) a b / calc(alpha * 0.9))
 oklab(from hsl(180 100% 50%) calc(l - 0.1) a b)
 ```
 

files/en-us/web/css/color_value/oklch/index.md

@@ -21,7 +21,7 @@ oklch(59.69% 0.156 49.77 / .5)
 
 /* Relative values */
 oklch(from green l c h / 0.5)
-oklch(from #0000FF calc(l + 0.1) c h)
+oklch(from #123456 calc(l + 0.1) c h)
 oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)
 oklch(from var(--aColor) l c h / calc(alpha - 0.1))
 ```

files/en-us/web/css/color_value/rgb/index.md

@@ -55,7 +55,7 @@ rgb(255 255 255 / 50%)
 
 /* Relative values */
 rgb(from green r g b / 0.5)
-rgb(from #0000FF calc(r + 40) calc(g + 40) b)
+rgb(from #123456 calc(r + 40) calc(g + 40) b)
 rgb(from hwb(120deg 10% 20%) r g calc(b + 200))
 
 /* Legacy 'rgba()' alias */
@@ -210,7 +210,7 @@ body {
 
 ```css
 body {
-  background: repeating-linear-gradient(-45deg, #eee 0 2px, #fff 2px 6px);
+  background: repeating-linear-gradient(-45deg, #eee 0 2px, white 2px 6px);
   padding: 10px;
 }
 

files/en-us/web/css/column-span/index.md

@@ -50,7 +50,7 @@ column-span: all;
 #example-element {
   background-color: rebeccapurple;
   padding: 10px;
-  color: #fff;
+  color: white;
 }
 ```
 

files/en-us/web/css/content-visibility/index.md

@@ -258,24 +258,24 @@ div {
 @keyframes show {
   0% {
     content-visibility: hidden;
-    color: rgb(0 0 0 / 0%);
+    color: transparent;
   }
 
   100% {
     content-visibility: visible;
-    color: rgb(0 0 0 / 100%);
+    color: black;
   }
 }
 
 @keyframes hide {
   0% {
     content-visibility: visible;
-    color: rgb(0 0 0 / 100%);
+    color: black;
   }
 
   100% {
     content-visibility: hidden;
-    color: rgb(0 0 0 / 0%);
+    color: transparent;
   }
 }
 ```

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

@@ -214,13 +214,13 @@ This example inserts differently colored quotation marks around quotes.
 
 ```css
 q {
-  color: #00f;
+  color: blue;
 }
 
 q::before,
 q::after {
   font-size: larger;
-  color: #f00;
+  color: red;
   background: #ccc;
 }
 

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

@@ -56,7 +56,7 @@ transform: translateX(calc(cos(-45deg) * 140px))
   border: 2px solid #666;
   background-image:
     radial-gradient(black var(--dot-size), transparent var(--dot-size)),
-    linear-gradient(135deg, #0000ff, #00c9ff, #92fe9d, #e6e6fa, #f0fff0);
+    linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);
 }
 .dot {
   display: block;

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

@@ -145,7 +145,7 @@ i:nth-of-type(7n + 1) {
 .cloud {
   width: 100%;
   height: 150px;
-  background: #ffffff;
+  background: white;
   border-radius: 0 0 90px 33% / 0 0 45px 50px;
   box-shadow:
     5px 15px 15px white,
@@ -157,7 +157,7 @@ i:nth-of-type(7n + 1) {
 }
 .ground {
   bottom: 0;
-  background-image: linear-gradient(to top, #fff 97%, 99%, #bbb 100%);
+  background-image: linear-gradient(to top, white 97%, 99%, #bbb 100%);
   background-position: center 580px;
   animation: snowfall linear 300s forwards;
   border: 1px solid grey;

files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md

@@ -27,7 +27,7 @@ In this example, three backgrounds are stacked: the Firefox logo, an image of bu
   height: 400px;
   background-image:
     url("firefox.png"), url("bubbles.png"),
-    linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
+    linear-gradient(to right, rgb(30 75 115 / 100%), transparent);
   background-repeat: no-repeat, no-repeat, no-repeat;
   background-position:
     bottom right,

files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md

@@ -393,7 +393,7 @@ div {
 p {
   aspect-ratio: 1;
   text-align: center;
-  border: 10px solid #ffffff;
+  border: 10px solid white;
   background-color: #f4aab9;
 }
 ```
@@ -418,7 +418,7 @@ div {
 
 p {
   text-align: center;
-  border: 10px solid #ffffff;
+  border: 10px solid white;
   background-color: #f4aab9;
 }
 ```

files/en-us/web/css/css_cascade/shorthand_properties/index.md

@@ -66,7 +66,7 @@ Similarly, shorthands handling properties related to corners of a box, like {{cs
 Consider a background with the following properties
 
 ```css
-background-color: #000;
+background-color: black;
 background-image: url("images/bg.gif");
 background-repeat: no-repeat;
 background-position: left top;
@@ -75,7 +75,7 @@ background-position: left top;
 These four declarations can be shortened to just one:
 
 ```css
-background: #000 url("images/bg.gif") no-repeat left top;
+background: black url("images/bg.gif") no-repeat left top;
 ```
 
 (The shorthand form is actually the equivalent of the longhand properties above plus `background-attachment: scroll` and, in CSS3, some additional properties.)
@@ -111,13 +111,13 @@ With borders, the width, color, and style can be simplified into one declaration
 ```css
 border-width: 1px;
 border-style: solid;
-border-color: #000;
+border-color: black;
 ```
 
 It can be simplified as:
 
 ```css
-border: 1px solid #000;
+border: 1px solid black;
 ```
 
 ## Margin and padding properties

files/en-us/web/css/css_colors/applying_color/index.md

@@ -152,7 +152,7 @@ The `.boxLeft` class, used to style the box on the left, sets up the color of th
 .boxRight {
   background-color: hwb(270deg 63% 13%);
   outline: 4px dashed #6e1478;
-  color: hsl(0deg 100% 100%);
+  color: hsl(0deg 95% 95%);
   text-decoration-line: underline;
   text-decoration-style: wavy;
   text-decoration-color: #8f8;
@@ -168,7 +168,7 @@ Finally, the `.boxRight` class sets several styles on the box that's drawn to th
 
 - The `background-color` is set using {{CSSXref("color_value/hwb", "hwb()")}} functional notation — `hwb(270deg 63% 13%)`. This is a medium purple color.
 - The box's `outline` is used to specify that the box should be enclosed in a four-pixel thick dashed line whose color is a somewhat deeper purple using the six-digit {{cssxref("hex-color")}} `#6e1478`.
-- The foreground (text) color is specified by setting the {{cssxref("color")}} property using {{CSSXref("color_value/hsl", "hsl()")}} functional notation — `hsl(0deg 100% 100%)`. This is one of many ways to specify the color white.
+- The foreground (text) color is specified by setting the {{cssxref("color")}} property using {{CSSXref("color_value/hsl", "hsl()")}} functional notation — `hsl(0deg 95% 95%)`. This is a very light pinkish color.
 - We add a green wavy line under the text with the {{cssxref("text-decoration")}} shorthand, along with the longhand component for browser compatibility. We used the 3-digit {{cssxref("hex-color")}} `#8f8`, which is the equivalent of `#88ff88`.
 - Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its `color` parameter is set to `black`, a {{cssxref("named-color")}} value.
 

files/en-us/web/css/css_colors/relative_colors/index.md

@@ -489,7 +489,7 @@ fieldset {
 
 #container {
   /* Default value */
-  --base-color: #ff0000;
+  --base-color: red;
 
   display: flex;
   width: 100vw;

files/en-us/web/css/css_containment/container_size_and_style_queries/index.md

@@ -290,13 +290,13 @@ color.addEventListener("input", (e) => {
 });
 ```
 
-We use the `@property` at-rule to define a CSS variable `--theme` to be a {{cssxref("color_value", "<color>")}} value and set the `initial-value` to `#00F`, ensuring equivalent colors are a match regardless of what syntax is used (for example, `#F00` is equal to `rgb(255 0 0)`, `#ff0000`, and `red`).
+We use the `@property` at-rule to define a CSS variable `--theme` to be a {{cssxref("color_value", "<color>")}} value and set the `initial-value` to `red`, ensuring equivalent colors are a match regardless of what syntax is used (for example, `red` is equal to `rgb(255 0 0)`, `#ff0000`, and `#f00`).
 
 ```css
 @property --theme {
   syntax: "<color>";
   inherits: true;
-  initial-value: #f00;
+  initial-value: red;
 }
 ```
 
@@ -307,7 +307,7 @@ output {
 }
 ```
 
-The first style feature query is a custom property with no value. This query type returns true when the computed value for the custom property value is different from the `initial-value` for that property. In this case, it will be true when the value of `--theme` is any value other than any syntax equivalent value of `#f00` ( such as `red`). When true, the {{htmlelement("output")}} will have a 5px dotted outline. The outline color is the current value of `--theme`. The default text {{cssxref("color")}} is grey.
+The first style feature query is a custom property with no value. This query type returns true when the computed value for the custom property value is different from the `initial-value` for that property. In this case, it will be true when the value of `--theme` is any value other than any syntax equivalent value of `red` (such as `#f00`). When true, the {{htmlelement("output")}} will have a 5px dotted outline. The outline color is the current value of `--theme`. The default text {{cssxref("color")}} is grey.
 
 ```css
 @container style(--theme) {

files/en-us/web/css/css_display/in_flow_and_out_of_flow/index.md

@@ -147,7 +147,7 @@ p {
 .abspos {
   position: absolute;
   background-color: green;
-  color: #fff;
+  color: white;
   top: 30px;
   right: 30px;
   width: 400px;
@@ -198,7 +198,7 @@ p {
 .relative {
   position: relative;
   background-color: green;
-  color: #fff;
+  color: white;
   bottom: 50px;
   left: 50px;
   width: 400px;

files/en-us/web/css/css_display/multi-keyword_syntax_of_display/index.md

@@ -252,7 +252,7 @@ p {
 }
 .inline-block {
   background-color: rgb(0 0 0 / 0.4);
-  color: #fff;
+  color: white;
   padding: 10px;
   display: inline-block;
 }

files/en-us/web/css/css_display/visual_formatting_model/index.md

@@ -204,11 +204,11 @@ body {
 }
 .container {
   background-color: #333;
-  color: #fff;
+  color: white;
 }
 
 .item {
-  background-color: #fff;
+  background-color: white;
   border: 1px solid #999;
   color: #333;
   width: 100px;