Lint: use named color if possible (2) (mdn#40621)

Author: Josh-Cena

files/en-us/web/accessibility/aria/reference/attributes/aria-label/index.md

@@ -27,7 +27,7 @@ The code below shows an example of how to use the `aria-label` attribute to prov
     xmlns="http://www.w3.org/2000/svg">
     <path
       d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
-      fill="#000" />
+      fill="black" />
   </svg>
 </button>
 ```

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

@@ -210,7 +210,7 @@ button,
 button:active,
 button:focus,
 [role="button"][aria-pressed="true"] {
-  border: 2px solid #000;
+  border: 2px solid black;
 }
 ```
 

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

@@ -211,13 +211,13 @@ tbody td {
 }
 
 tbody td {
-  border: 1px solid #000;
+  border: 1px solid black;
   text-align: right;
   color: #767676;
 }
 
 tbody td[role="gridcell"] {
-  color: #000;
+  color: black;
 }
 
 tbody td[role="gridcell"]:hover,

files/en-us/web/accessibility/guides/colors_and_luminance/index.md

@@ -130,7 +130,7 @@ Where accessibility is concerned, however, standards and guidelines are currentl
 
 ### Querying color values
 
-The {{domxref('Window.getComputedStyle()')}} method returns values using the RGB Decimal Reference scale or via `color(srgb...)`. For example, calling `Window.getComputedStyle()` on a `<div>` with `background-color: #ff0000` set on it returns the computed background color as `rgb(255 0 0)` — the RGB Decimal reference. However, when [using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) (for example `background-color: rgb(from blue 255 0 0)`), calling `Window.getComputedStyle()` returns the computed background color as `color(srgb 1 0 0)`. Being tied to computer hardware, `Window.getComputedStyle()` measures color in terms of RGB, not how the human eye perceives color.
+The {{domxref('Window.getComputedStyle()')}} method returns values using the RGB Decimal Reference scale or via `color(srgb...)`. For example, calling `Window.getComputedStyle()` on a `<div>` with `background-color: red` set on it returns the computed background color as `rgb(255, 0, 0)` — the RGB Decimal reference. However, when [using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) (for example `background-color: rgb(from blue 255 0 0)`), calling `Window.getComputedStyle()` returns the computed background color as `color(srgb 1 0 0)`. Being tied to computer hardware, `Window.getComputedStyle()` measures color in terms of RGB, not how the human eye perceives color.
 
 ### Red / green color blindness
 

files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

@@ -136,7 +136,7 @@ function draw() {
   ctx.fillRect(0, 75, 75, 75);
   ctx.fillStyle = "#F30";
   ctx.fillRect(75, 75, 75, 75);
-  ctx.fillStyle = "#FFF";
+  ctx.fillStyle = "white";
 
   // set transparency value
   ctx.globalAlpha = 0.2;
@@ -391,7 +391,7 @@ function draw() {
   ctx.strokeRect(-5, 50, 160, 50);
 
   // Set line styles
-  ctx.strokeStyle = "#000";
+  ctx.strokeStyle = "black";
   ctx.lineWidth = 10;
 
   // check input
@@ -517,13 +517,13 @@ function draw() {
   // Create gradients
   const linGrad = ctx.createLinearGradient(0, 0, 0, 150);
   linGrad.addColorStop(0, "#00ABEB");
-  linGrad.addColorStop(0.5, "#fff");
+  linGrad.addColorStop(0.5, "white");
   linGrad.addColorStop(0.5, "#26C000");
-  linGrad.addColorStop(1, "#fff");
+  linGrad.addColorStop(1, "white");
 
   const linGrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  linGrad2.addColorStop(0.5, "#000");
-  linGrad2.addColorStop(1, "rgb(0 0 0 / 0%)");
+  linGrad2.addColorStop(0.5, "black");
+  linGrad2.addColorStop(1, "transparent");
 
   // assign gradients to fill and stroke styles
   ctx.fillStyle = linGrad;
@@ -561,22 +561,22 @@ function draw() {
   const radGrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
   radGrad.addColorStop(0, "#A7D30C");
   radGrad.addColorStop(0.9, "#019F62");
-  radGrad.addColorStop(1, "rgb(1 159 98 / 0%)");
+  radGrad.addColorStop(1, "transparent");
 
   const radGrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
   radGrad2.addColorStop(0, "#FF5F98");
   radGrad2.addColorStop(0.75, "#FF0188");
-  radGrad2.addColorStop(1, "rgb(255 1 136 / 0%)");
+  radGrad2.addColorStop(1, "transparent");
 
   const radGrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
   radGrad3.addColorStop(0, "#00C9FF");
   radGrad3.addColorStop(0.8, "#00B5E2");
-  radGrad3.addColorStop(1, "rgb(0 201 255 / 0%)");
+  radGrad3.addColorStop(1, "transparent");
 
   const radGrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
   radGrad4.addColorStop(0, "#F4F201");
   radGrad4.addColorStop(0.8, "#E4C700");
-  radGrad4.addColorStop(1, "rgb(228 199 0 / 0%)");
+  radGrad4.addColorStop(1, "transparent");
 
   // draw shapes
   ctx.fillStyle = radGrad4;
@@ -615,7 +615,7 @@ function draw() {
   // Create gradients
   const conicGrad1 = ctx.createConicGradient(2, 62, 75);
   conicGrad1.addColorStop(0, "#A7D30C");
-  conicGrad1.addColorStop(1, "#fff");
+  conicGrad1.addColorStop(1, "white");
 
   const conicGrad2 = ctx.createConicGradient(0, 187, 75);
   // we multiply our values by Math.PI/180 to convert degrees to radians

files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md

@@ -218,7 +218,7 @@ function clock() {
   ctx.beginPath();
   ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
   ctx.stroke();
-  ctx.fillStyle = "rgb(0 0 0 / 0%)";
+  ctx.fillStyle = "transparent";
   ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
   ctx.fill();
   ctx.restore();

files/en-us/web/api/canvas_api/tutorial/compositing/index.md

@@ -61,7 +61,7 @@ function draw() {
 function generateStars(ctx) {
   for (let j = 1; j < 50; j++) {
     ctx.save();
-    ctx.fillStyle = "#fff";
+    ctx.fillStyle = "white";
     ctx.translate(
       75 - Math.floor(Math.random() * 150),
       75 - Math.floor(Math.random() * 150),
@@ -147,7 +147,7 @@ function draw() {
 function generateStars(ctx) {
   for (let j = 1; j < 50; j++) {
     ctx.save();
-    ctx.fillStyle = "#fff";
+    ctx.fillStyle = "white";
     ctx.translate(
       75 - Math.floor(Math.random() * 150),
       75 - Math.floor(Math.random() * 150),

files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md

@@ -60,7 +60,7 @@ To create a new, blank `ImageData` object, you should use the {{domxref("CanvasR
 const myImageData = ctx.createImageData(width, height);
 ```
 
-This creates a new `ImageData` object with the specified dimensions. All pixels are preset to transparent black (all zeroes, i.e., rgb(0 0 0 / 0%)).
+This creates a new `ImageData` object with the specified dimensions. All pixels are preset to transparent.
 
 You can also create a new `ImageData` object with the same dimensions as the object specified by `anotherImageData`. The new object's pixels are all preset to transparent black. **This does not copy the image data!**
 

files/en-us/web/api/canvas_api/tutorial/transformations/index.md

@@ -56,7 +56,7 @@ function draw() {
   ctx.fillRect(15, 15, 120, 120); // Draw a Blue rectangle with new settings
   ctx.save(); // Save the current state
 
-  ctx.fillStyle = "#FFF"; // Make changes to saved settings
+  ctx.fillStyle = "white"; // Make changes to saved settings
   ctx.globalAlpha = 0.5;
   ctx.fillRect(30, 30, 90, 90); // Draw a 50%-White rectangle with newest settings
 

files/en-us/web/api/canvasrenderingcontext2d/arcto/index.md

@@ -255,11 +255,11 @@ label {
   margin: 10px;
 }
 .input {
-  color: #00f;
+  color: blue;
   text-decoration: underline;
 }
 #canvas {
-  border: 1px solid #000;
+  border: 1px solid black;
 }
 ```
 
@@ -729,8 +729,8 @@ function moveActivePointAndUpdate(pointCursor) {
 
 function drawCanvas() {
   const rPoint = 4;
-  const colorConstruction = "#080";
-  const colorDraggable = "#00F";
+  const colorConstruction = "green";
+  const colorDraggable = "blue";
   const [P0, P1, P2] = state.controlPoints;
 
   ctx.font = "italic 14pt sans-serif";
@@ -765,7 +765,7 @@ function drawCanvas() {
     ctx.arc(state.C.x, state.C.y, state.radius, 0, 2 * Math.PI);
     ctx.stroke();
 
-    ctx.fillStyle = "#000";
+    ctx.fillStyle = "black";
     ctx.fillText("C", state.C.x, state.C.y - 15);
     ctx.fillText("T\u2081", state.T1.x, state.T1.y - 15);
     ctx.fillText("T\u2082", state.T2.x, state.T2.y - 15);
@@ -792,7 +792,7 @@ function drawCanvas() {
     ctx.fillStyle = colorDraggable;
     ctx.fill();
   });
-  ctx.fillStyle = "#000";
+  ctx.fillStyle = "black";
   ctx.fillText("P\u2080", P0.x, P0.y - 15);
   ctx.fillText("P\u2081", P1.x, P1.y - 15);
   ctx.fillText("P\u2082", P2.x, P2.y - 15);
@@ -803,7 +803,7 @@ function drawCanvas() {
   ctx.moveTo(P0.x, P0.y);
   ctx.setLineDash([]);
   ctx.arcTo(P1.x, P1.y, P2.x, P2.y, state.radius);
-  ctx.strokeStyle = "#000";
+  ctx.strokeStyle = "black";
   ctx.stroke();
 } /* end of function drawCanvas */