Update rgb & hsl to use new syntax

Including percentage instead of number for alpha value
FormularSumo · Jan 3, 2024 · e8aeffa · e8aeffa
1 parent 0d27253
commit e8aeffa
Show file tree

Hide file tree

Showing 44 changed files with 141 additions and 141 deletions.
diff --git a/files/en-us/web/api/analysernode/fftsize/index.md b/files/en-us/web/api/analysernode/fftsize/index.md
@@ -44,11 +44,11 @@ function draw() {
 
   analyser.getByteTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
 
   canvasCtx.beginPath();
 

diff --git a/files/en-us/web/api/analysernode/frequencybincount/index.md b/files/en-us/web/api/analysernode/frequencybincount/index.md
@@ -41,7 +41,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5 - 1;
@@ -51,7 +51,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth;

diff --git a/files/en-us/web/api/analysernode/getbytefrequencydata/index.md b/files/en-us/web/api/analysernode/getbytefrequencydata/index.md
@@ -54,7 +54,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5;
@@ -64,7 +64,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth + 1;

diff --git a/files/en-us/web/api/analysernode/getbytetimedomaindata/index.md b/files/en-us/web/api/analysernode/getbytetimedomaindata/index.md
@@ -49,11 +49,11 @@ function draw() {
   drawVisual = requestAnimationFrame(draw);
   analyser.getByteTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
 
   const sliceWidth = (WIDTH * 1.0) / bufferLength;
   let x = 0;

diff --git a/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md b/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md
@@ -90,7 +90,7 @@ For more complete applied examples/information, check out our [Voice-change-O-ma
       analyserNode.getFloatFrequencyData(dataArray);
 
       //Draw black background
-      canvasCtx.fillStyle = "rgb(0, 0, 0)";
+      canvasCtx.fillStyle = "rgb(0 0 0)";
       canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
 
       //Draw spectrum
@@ -99,7 +99,7 @@ For more complete applied examples/information, check out our [Voice-change-O-ma
       for (let i = 0; i < bufferLength; i++) {
         const barHeight = (dataArray[i] + 140) * 2;
         canvasCtx.fillStyle =
-          "rgb(" + Math.floor(barHeight + 100) + ", 50, 50)";
+          "rgb(" + Math.floor(barHeight + 100) + " 50 50)";
         canvasCtx.fillRect(
           posX,
           canvas.height - barHeight / 2,

diff --git a/files/en-us/web/api/analysernode/getfloattimedomaindata/index.md b/files/en-us/web/api/analysernode/getfloattimedomaindata/index.md
@@ -48,10 +48,10 @@ function draw() {
   drawVisual = requestAnimationFrame(draw);
   analyser.getFloatTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
   canvasCtx.beginPath();
 
   const sliceWidth = (WIDTH * 1.0) / bufferLength;

diff --git a/files/en-us/web/api/analysernode/index.md b/files/en-us/web/api/analysernode/index.md
@@ -108,11 +108,11 @@ function draw() {
 
   analyser.getByteTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
 
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
 
   canvasCtx.beginPath();
 

diff --git a/files/en-us/web/api/analysernode/maxdecibels/index.md b/files/en-us/web/api/analysernode/maxdecibels/index.md
@@ -46,7 +46,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5;
@@ -56,7 +56,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth + 1;

diff --git a/files/en-us/web/api/analysernode/mindecibels/index.md b/files/en-us/web/api/analysernode/mindecibels/index.md
@@ -43,7 +43,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5;
@@ -53,7 +53,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth + 1;

diff --git a/files/en-us/web/api/analysernode/smoothingtimeconstant/index.md b/files/en-us/web/api/analysernode/smoothingtimeconstant/index.md
@@ -48,7 +48,7 @@ function draw() {
 
   analyser.getByteFrequencyData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(0, 0, 0)";
+  canvasCtx.fillStyle = "rgb(0 0 0)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   const barWidth = (WIDTH / bufferLength) * 2.5;
@@ -58,7 +58,7 @@ function draw() {
   for (let i = 0; i < bufferLength; i++) {
     barHeight = dataArray[i];
 
-    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
+    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
     canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
 
     x += barWidth + 1;

diff --git a/files/en-us/web/api/baseaudiocontext/createanalyser/index.md b/files/en-us/web/api/baseaudiocontext/createanalyser/index.md
@@ -59,11 +59,11 @@ function draw() {
 
   analyser.getByteTimeDomainData(dataArray);
 
-  canvasCtx.fillStyle = "rgb(200, 200, 200)";
+  canvasCtx.fillStyle = "rgb(200 200 200)";
   canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
   canvasCtx.lineWidth = 2;
-  canvasCtx.strokeStyle = "rgb(0, 0, 0)";
+  canvasCtx.strokeStyle = "rgb(0 0 0)";
 
   canvasCtx.beginPath();
 

diff --git a/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
@@ -30,7 +30,7 @@ The valid strings you can enter should, according to the specification, be CSS {
 
 ctx.fillStyle = "orange";
 ctx.fillStyle = "#FFA500";
-ctx.fillStyle = "rgb(255, 165, 0)";
+ctx.fillStyle = "rgb(255 165 0)";
 ctx.fillStyle = "rgba(255, 165, 0, 1)";
 ```
 
@@ -43,9 +43,9 @@ function draw() {
   const ctx = document.getElementById("canvas").getContext("2d");
   for (let i = 0; i < 6; i++) {
     for (let j = 0; j < 6; j++) {
-      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(
+      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)} ${Math.floor(
         255 - 42.5 * j,
-      )}, 0)`;
+      )} 0)`;
       ctx.fillRect(j * 25, i * 25, 25, 25);
     }
   }
@@ -75,7 +75,7 @@ function draw() {
   const ctx = document.getElementById("canvas").getContext("2d");
   for (let i = 0; i < 6; i++) {
     for (let j = 0; j < 6; j++) {
-      ctx.strokeStyle = `rgb(0, ${Math.floor(255 - 42.5 * i)}, ${Math.floor(
+      ctx.strokeStyle = `rgb(0 ${Math.floor(255 - 42.5 * i)} ${Math.floor(
         255 - 42.5 * j,
       )})`;
       ctx.beginPath();
@@ -167,13 +167,13 @@ function draw() {
   const ctx = document.getElementById("canvas").getContext("2d");
 
   // Draw background
-  ctx.fillStyle = "rgb(255, 221, 0)";
+  ctx.fillStyle = "rgb(255 221 0)";
   ctx.fillRect(0, 0, 150, 37.5);
-  ctx.fillStyle = "rgb(102, 204, 0)";
+  ctx.fillStyle = "rgb(102 204 0)";
   ctx.fillRect(0, 37.5, 150, 37.5);
-  ctx.fillStyle = "rgb(0, 153, 255)";
+  ctx.fillStyle = "rgb(0 153 255)";
   ctx.fillRect(0, 75, 150, 37.5);
-  ctx.fillStyle = "rgb(255, 51, 0)";
+  ctx.fillStyle = "rgb(255 51 0)";
   ctx.fillRect(0, 112.5, 150, 37.5);
 
   // Draw semi transparent rectangles

diff --git a/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md b/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -134,7 +134,7 @@ To begin, let's take a look at a simple example that draws two intersecting rect
         if (canvas.getContext) {
           const ctx = canvas.getContext("2d");
 
-          ctx.fillStyle = "rgb(200, 0, 0)";
+          ctx.fillStyle = "rgb(200 0 0)";
           ctx.fillRect(10, 10, 50, 50);
 
           ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

diff --git a/files/en-us/web/api/canvas_api/tutorial/transformations/index.md b/files/en-us/web/api/canvas_api/tutorial/transformations/index.md
@@ -107,7 +107,7 @@ function draw() {
   for (let i = 0; i < 3; i++) {
     for (let j = 0; j < 3; j++) {
       ctx.save();
-      ctx.fillStyle = `rgb(${51 * i}, ${255 - 51 * i}, 255)`;
+      ctx.fillStyle = `rgb(${51 * i} ${255 - 51 * i} 255)`;
       ctx.translate(10 + j * 50, 10 + i * 50);
       ctx.fillRect(0, 0, 25, 25);
       ctx.restore();
@@ -272,7 +272,7 @@ function draw() {
   let c = 0;
   for (let i = 0; i <= 12; i++) {
     c = Math.floor((255 / 12) * i);
-    ctx.fillStyle = `rgb(${c}, ${c}, ${c})`;
+    ctx.fillStyle = `rgb(${c} ${c} ${c})`;
     ctx.fillRect(0, 0, 100, 10);
     ctx.transform(cos, sin, -sin, cos, 0, 0);
   }

diff --git a/files/en-us/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/en-us/web/api/canvasrenderingcontext2d/fillstyle/index.md
@@ -69,8 +69,8 @@ const ctx = canvas.getContext("2d");
 for (let i = 0; i < 6; i++) {
   for (let j = 0; j < 6; j++) {
     ctx.fillStyle = `rgb(
-        ${Math.floor(255 - 42.5 * i)},
-        ${Math.floor(255 - 42.5 * j)},
+        ${Math.floor(255 - 42.5 * i)}
+        ${Math.floor(255 - 42.5 * j)}
         0)`;
     ctx.fillRect(j * 25, i * 25, 25, 25);
   }

diff --git a/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md
@@ -70,8 +70,8 @@ const ctx = document.getElementById("canvas").getContext("2d");
 for (let i = 0; i < 6; i++) {
   for (let j = 0; j < 6; j++) {
     ctx.strokeStyle = `rgb(
-        0,
-        ${Math.floor(255 - 42.5 * i)},
+        0
+        ${Math.floor(255 - 42.5 * i)}
         ${Math.floor(255 - 42.5 * j)})`;
     ctx.beginPath();
     ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);

diff --git a/files/en-us/web/api/css_painting_api/guide/index.md b/files/en-us/web/api/css_painting_api/guide/index.md
@@ -41,7 +41,7 @@ registerPaint(
         a subset of the HTML Canvas API.
     */
     paint(ctx) {
-      ctx.fillStyle = "hsl(55 90% 60% / 1.0)";
+      ctx.fillStyle = "hsl(55 90% 60% / 100%)";
       ctx.fillRect(0, 15, 200, 20); /* order: x, y, w, h */
     }
   },
@@ -54,7 +54,7 @@ We have then used the `paint()` function to paint to our canvas.
 
 A `paint()` function can take three arguments. Here we have provided one argument: the rendering context (we'll look at more in due course), often referred to by the variable name `ctx`. The 2D Rendering Context is a subset of the [HTML Canvas API](/en-US/docs/Web/API/Canvas_API); the version available to Houdini (called the `PaintRenderingContext2D`) is a further subset containing most of the features available in the full Canvas API with the [exception](https://drafts.css-houdini.org/css-paint-api-1/#2d-rendering-context) of the `CanvasImageData`, `CanvasUserInterface`, `CanvasText`, and `CanvasTextDrawingStyles` APIs.
 
-We define the [`fillStyle`](/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) as being `hsl(55 90% 60% / 1.0)`, which is a shade of yellow, and then call `fillRect()` to create a rectangle of that color. The [`fillRect()`](/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect) parameters are, in order, x-axis origin, y-axis origin, width, and height. `fillRect(0, 15, 200, 20)` results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box.
+We define the [`fillStyle`](/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) as being `hsl(55 90% 60% / 100%)`, which is a shade of yellow, and then call `fillRect()` to create a rectangle of that color. The [`fillRect()`](/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect) parameters are, in order, x-axis origin, y-axis origin, width, and height. `fillRect(0, 15, 200, 20)` results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box.
 
 We can use the CSS [`background-size`](/en-US/docs/Web/CSS/background-size) and [`background-position`](/en-US/docs/Web/CSS/background-position) properties to re-size or relocate this background image, but this is the default size and placement of the yellow box we created in our paint worklet.
 
@@ -129,7 +129,7 @@ registerPaint(
     size is the paintSize, the dimensions (height and width) of the box being painted
   */
     paint(ctx, size) {
-      ctx.fillStyle = "hsl(55 90% 60% / 1.0)";
+      ctx.fillStyle = "hsl(55 90% 60% / 100%)";
       ctx.fillRect(0, size.height / 3, size.width * 0.4, size.height * 0.6);
     }
   },
@@ -288,16 +288,16 @@ In our CSS, we define the `--boxColor` and `--widthSubtractor` custom properties
 ```css
 li {
   background-image: paint(boxbg);
-  --boxColor: hsl(55 90% 60% / 1);
+  --boxColor: hsl(55 90% 60% / 100%);
 }
 
 li:nth-of-type(3n) {
-  --boxColor: hsl(155 90% 60% / 1);
+  --boxColor: hsl(155 90% 60% / 100%);
   --widthSubtractor: 20;
 }
 
 li:nth-of-type(3n + 1) {
-  --boxColor: hsl(255 90% 60% / 1);
+  --boxColor: hsl(255 90% 60% / 100%);
   --widthSubtractor: 40;
 }
 ```
@@ -393,13 +393,13 @@ We give each header a different value for the `--highColor` [custom property](/e
   background-image: paint(headerHighlight);
 }
 h1 {
-  --highColor: hsl(155 90% 60% / 0.7);
+  --highColor: hsl(155 90% 60% / 70%);
 }
 h3 {
-  --highColor: hsl(255 90% 60% / 0.5);
+  --highColor: hsl(255 90% 60% / 50%);
 }
 h6 {
-  --highColor: hsl(355 90% 60% / 0.3);
+  --highColor: hsl(355 90% 60% / 30%);
 }
 ```
 
@@ -582,17 +582,17 @@ We can set different colors, stroke widths, and pick whether the background imag
 
 ```css
 li {
-  --boxColor: hsl(155 90% 60% / 0.5);
+  --boxColor: hsl(155 90% 60% / 50%);
   background-image: paint(hollowHighlights, stroke, 5px);
 }
 
 li:nth-of-type(3n) {
-  --boxColor: hsl(255 90% 60% / 0.5);
+  --boxColor: hsl(255 90% 60% / 50%);
   background-image: paint(hollowHighlights, filled, 3px);
 }
 
 li:nth-of-type(3n + 1) {
-  --boxColor: hsl(355 90% 60% / 0.5);
+  --boxColor: hsl(355 90% 60% / 50%);
   background-image: paint(hollowHighlights, stroke, 1px);
 }
 ```

diff --git a/files/en-us/web/api/css_painting_api/index.md b/files/en-us/web/api/css_painting_api/index.md
@@ -117,16 +117,16 @@ In our CSS, we define the `--boxColor` and `--widthSubtractor` custom properties
 ```css
 li {
   background-image: paint(boxbg);
-  --boxColor: hsl(55 90% 60% / 1);
+  --boxColor: hsl(55 90% 60% / 100%);
 }
 
 li:nth-of-type(3n) {
-  --boxColor: hsl(155 90% 60% / 1);
+  --boxColor: hsl(155 90% 60% / 100%);
   --widthSubtractor: 20;
 }
 
 li:nth-of-type(3n + 1) {
-  --boxColor: hsl(255 90% 60% / 1);
+  --boxColor: hsl(255 90% 60% / 100%);
   --widthSubtractor: 40;
 }
 ```

diff --git a/files/en-us/web/api/css_typed_om_api/guide/index.md b/files/en-us/web/api/css_typed_om_api/guide/index.md
@@ -122,7 +122,7 @@ for (const value of ofInterest) {
 
 {{EmbedLiveSample(".get_method_custom_properties", 120, 300)}}
 
-We included {{cssxref('border-left-color')}} to demonstrate that, had we included all the properties, every value that defaults to [`currentcolor`](/en-US/docs/Web/CSS/color_value) (including {{cssxref('caret-color')}}, {{cssxref('outline-color')}}, {{cssxref('text-decoration-color')}}, {{cssxref('column-rule-color')}}, etc.) would return `rgb(255, 0, 0)`. The link has inherited `font-weight: bold;` from the paragraph's styles, listing it as `font-weight: 700`. Custom properties, like our `--color: red`, are properties. As such, they are accessible via `get()`.
+We included {{cssxref('border-left-color')}} to demonstrate that, had we included all the properties, every value that defaults to [`currentcolor`](/en-US/docs/Web/CSS/color_value) (including {{cssxref('caret-color')}}, {{cssxref('outline-color')}}, {{cssxref('text-decoration-color')}}, {{cssxref('column-rule-color')}}, etc.) would return `rgb(255 0 0)`. The link has inherited `font-weight: bold;` from the paragraph's styles, listing it as `font-weight: 700`. Custom properties, like our `--color: red`, are properties. As such, they are accessible via `get()`.
 
 You'll note that custom properties retain the value as written in the stylesheet, whereas computed styles will be listed as the computed value — {{cssxref('color')}} was listed as an [`rgb()`](/en-US/docs/Web/CSS/color_value) value and the {{cssxref('font-weight')}} returned was `700` even though we use a {{cssxref('&lt;color&gt;', 'named color')}} and the `bold` keyword.