Update miscellaneous rgb/hsl syntax in web

Including fixing a typo in css\color
FormularSumo · Jan 3, 2024 · 0dd6469 · 0dd6469
1 parent d488dd4
commit 0dd6469
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 82 deletions.
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
@@ -252,14 +252,14 @@ Let's examine a CSS example with several custom properties, transforms, `calc()`
 
 ```css
 :root {
-  --mainColor: hsl(198, 43%, 42%);
-  --black: hsl(0, 0%, 16%);
-  --white: hsl(0, 0%, 97%);
+  --mainColor: hsl(198 43% 42%);
+  --black: hsl(0 0% 16%);
+  --white: hsl(0 0% 97%);
   --unit: 1.2rem;
 }
 
 button {
-  --mainColor: hsl(198, 100%, 66%);
+  --mainColor: hsl(198 100% 66%);
   display: inline-block;
   padding: var(--unit) calc(var(--unit) * 2);
   width: calc(30% + 20px);

diff --git a/files/en-us/web/css/color/index.md b/files/en-us/web/css/color/index.md
@@ -37,7 +37,7 @@ color: rgba(34, 12, 64, 0.6);
 color: rgb(34 12 64 / 0.6);
 color: rgba(34 12 64 / 0.3);
 color: rgb(34 12 64 / 60%);
-color: rgba(34.6 12 64 / 30%);
+color: rgba(34 12 64 / 30%);
 
 /* <hsl()> values */
 color: hsl(30, 100%, 50%, 0.6);

diff --git a/files/en-us/web/css/css_colors/applying_color/index.md b/files/en-us/web/css/css_colors/applying_color/index.md
@@ -176,7 +176,7 @@ td {
 }
 
 th {
-  background-color: hsl(0, 0%, 75%);
+  background-color: hsl(0 0% 75%);
 }
 ```
 
@@ -190,28 +190,28 @@ th {
   </thead>
   <tbody>
     <tr>
-      <td><code>hsl(90deg, 100%, 50%)</code></td>
-      <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td>
+      <td><code>hsl(90deg 100% 50%)</code></td>
+      <td style="background-color: hsl(90deg 100% 50%);">&nbsp;</td>
     </tr>
     <tr>
-      <td><code>hsl(90, 100%, 50%)</code></td>
-      <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td>
+      <td><code>hsl(90 100% 50%)</code></td>
+      <td style="background-color: hsl(90 100% 50%);">&nbsp;</td>
     </tr>
     <tr>
-      <td><code>hsl(0.15turn, 50%, 75%)</code></td>
-      <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td>
+      <td><code>hsl(0.15turn 50% 75%)</code></td>
+      <td style="background-color: hsl(0.15turn 50% 75%);">&nbsp;</td>
     </tr>
     <tr>
-      <td><code>hsl(0.15turn, 90%, 75%)</code></td>
-      <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td>
+      <td><code>hsl(0.15turn 90% 75%)</code></td>
+      <td style="background-color: hsl(0.15turn 90% 75%);">&nbsp;</td>
     </tr>
     <tr>
-      <td><code>hsl(0.15turn, 90%, 50%)</code></td>
-      <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td>
+      <td><code>hsl(0.15turn 90% 50%)</code></td>
+      <td style="background-color: hsl(0.15turn 90% 50%);">&nbsp;</td>
     </tr>
     <tr>
-      <td><code>hsl(270deg, 90%, 50%)</code></td>
-      <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td>
+      <td><code>hsl(270deg 90% 50%)</code></td>
+      <td style="background-color: hsl(270deg 90% 50%);">&nbsp;</td>
     </tr>
   </tbody>
 </table>
@@ -483,9 +483,9 @@ The `.boxLeft` class—which, cleverly, is used to style the box on the left—f
 ```css
 .boxRight {
   float: right;
-  background-color: hsl(270deg, 50%, 75%);
+  background-color: hsl(270deg 50% 75%);
   outline: 4px dashed rgb(110 20 120);
-  color: hsl(0deg, 100%, 100%);
+  color: hsl(0deg 100% 100%);
   text-decoration: underline wavy #88ff88;
   text-shadow: 2px 2px 3px black;
 }
@@ -495,9 +495,9 @@ The `.boxLeft` class—which, cleverly, is used to style the box on the left—f
 
 Finally, the `.boxRight` class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:
 
-- The `background-color` is set using the HSL value specified using `hsl(270deg, 50%, 75%)`. This is a medium purple color.
+- The `background-color` is set using the HSL value specified using `hsl(270deg 50% 75%)`. 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 (`rgb(110 20 120)`).
-- The foreground (text) color is specified by setting the {{cssxref("color")}} property to `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 to `hsl(0deg 100% 100%)`. This is one of many ways to specify the color white.
 - We add a green wavy line under the text with {{cssxref("text-decoration")}}.
 - Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its `color` parameter is set to `black`.
 

diff --git a/files/en-us/web/css/css_images/using_css_gradients/index.md b/files/en-us/web/css/css_images/using_css_gradients/index.md
@@ -796,68 +796,68 @@ div {
       90deg,
       transparent,
       transparent 50px,
-      rgba(255, 127, 0, 0.25) 50px,
-      rgba(255, 127, 0, 0.25) 56px,
+      rgb(255 127 0 / 25%) 50px,
+      rgb(255 127 0 / 25%)  56px,
       transparent 56px,
       transparent 63px,
-      rgba(255, 127, 0, 0.25) 63px,
-      rgba(255, 127, 0, 0.25) 69px,
+      rgb(255 127 0 / 25%)  63px,
+      rgb(255 127 0 / 25%)  69px,
       transparent 69px,
       transparent 116px,
-      rgba(255, 206, 0, 0.25) 116px,
-      rgba(255, 206, 0, 0.25) 166px
+      rgb(255 206 0 / 25%)  116px,
+      rgb(255 206 0 / 25%) 166px
     ), repeating-linear-gradient(
       0deg,
       transparent,
       transparent 50px,
-      rgba(255, 127, 0, 0.25) 50px,
-      rgba(255, 127, 0, 0.25) 56px,
+      rgb(255 127 0 / 25%) 50px,
+      rgb(255 127 0 / 25%) 56px,
       transparent 56px,
       transparent 63px,
-      rgba(255, 127, 0, 0.25) 63px,
-      rgba(255, 127, 0, 0.25) 69px,
+      rgb(255 127 0 / 25%) 63px,
+      rgb(255 127 0 / 25%) 69px,
       transparent 69px,
       transparent 116px,
-      rgba(255, 206, 0, 0.25) 116px,
-      rgba(255, 206, 0, 0.25) 166px
+      rgb(255 206 0 / 25%) 116px,
+      rgb(255 206 0 / 25%) 166px
     ), repeating-linear-gradient(
       -45deg,
       transparent,
       transparent 5px,
-      rgba(143, 77, 63, 0.25) 5px,
-      rgba(143, 77, 63, 0.25) 10px
-    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(
-          143,
-          77,
-          63,
-          0.25
-        ) 5px, rgba(143, 77, 63, 0.25) 10px);
+      rgb(143 77 63 / 25%) 5px,
+      rgb(143 77 63 / 25%) 10px
+    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(
+          143
+          77
+          63 /
+          25%
+        ) 5px, rgb(143 77 63 / 25%) 10px);
 
   background: repeating-linear-gradient(
       90deg,
       transparent 0 50px,
-      rgba(255, 127, 0, 0.25) 50px 56px,
+      rgb(255 127 0 / 25%) 50px 56px,
       transparent 56px 63px,
-      rgba(255, 127, 0, 0.25) 63px 69px,
+      rgb(255 127 0 / 25%) 63px 69px,
       transparent 69px 116px,
-      rgba(255, 206, 0, 0.25) 116px 166px
+      rgb(255 206 0 / 25%) 116px 166px
     ), repeating-linear-gradient(
       0deg,
       transparent 0 50px,
-      rgba(255, 127, 0, 0.25) 50px 56px,
+      rgb(255 127 0 / 25%) 50px 56px,
       transparent 56px 63px,
-      rgba(255, 127, 0, 0.25) 63px 69px,
+      rgb(255 127 0 / 25%) 63px 69px,
       transparent 69px 116px,
-      rgba(255, 206, 0, 0.25) 116px 166px
+      rgb(255 206 0 / 25%) 116px 166px
     ), repeating-linear-gradient(
       -45deg,
       transparent 0 5px,
-      rgba(143, 77, 63, 0.25) 5px 10px
-    ), repeating-linear-gradient(45deg, transparent 0 5px, rgba(
-          143,
-          77,
-          63,
-          0.25
+      rgb(143 77 63 / 25%) 5px 10px
+    ), repeating-linear-gradient(45deg, transparent 0 5px, rgb(
+          143
+          77
+          63 /
+          25%
         ) 5px 10px);
 }
 ```
@@ -910,17 +910,17 @@ div {
   background:
     repeating-radial-gradient(
         ellipse at 80% 50%,
-        rgba(0, 0, 0, 0.5),
-        rgba(0, 0, 0, 0.5) 15px,
-        rgba(255, 255, 255, 0.5) 15px,
-        rgba(255, 255, 255, 0.5) 30px
+        rgb(0 0 0 / 50%),
+        rgb(0 0 0 / 50%) 15px,
+        rgb(255 255 255 / 50%) 15px,
+        rgb(255 255 255 / 50%) 30px
       ) top left no-repeat,
     repeating-radial-gradient(
         ellipse at 20% 50%,
-        rgba(0, 0, 0, 0.5),
-        rgba(0, 0, 0, 0.5) 10px,
-        rgba(255, 255, 255, 0.5) 10px,
-        rgba(255, 255, 255, 0.5) 20px
+        rgb(0 0 0 / 50%),
+        rgb(0 0 0 / 50%) 10px,
+        rgb(255 255 255 / 50%) 10px,
+        rgb(255 255 255 / 50%) 20px
       ) top left no-repeat yellow;
   background-size:
     200px 200px,

diff --git a/files/en-us/web/css/gradient/conic-gradient/index.md b/files/en-us/web/css/gradient/conic-gradient/index.md
@@ -29,15 +29,15 @@ conic-gradient(in hsl longer hue, red, blue, green, red)
 
 /* Color wheel */
 conic-gradient(
-  hsl(360, 100%, 50%),
-  hsl(315, 100%, 50%),
-  hsl(270, 100%, 50%),
-  hsl(225, 100%, 50%),
-  hsl(180, 100%, 50%),
-  hsl(135, 100%, 50%),
-  hsl(90, 100%, 50%),
-  hsl(45, 100%, 50%),
-  hsl(0, 100%, 50%)
+  hsl(360 100%, 50%),
+  hsl(315 100%, 50%),
+  hsl(270 100%, 50%),
+  hsl(225 100%, 50%),
+  hsl(180 100%, 50%),
+  hsl(135 100%, 50%),
+  hsl(90 100%, 50%),
+  hsl(45 100%, 50%),
+  hsl(0 100%, 50%)
 )
 ```
 

diff --git a/files/en-us/web/css/gradient/repeating-conic-gradient/index.md b/files/en-us/web/css/gradient/repeating-conic-gradient/index.md
@@ -20,8 +20,8 @@ The **`repeating-conic-gradient()`** [CSS](/en-US/docs/Web/CSS) [function](/en-U
    offset by 3degrees so there is no up/down straight line */
 repeating-conic-gradient(
   from 3deg at 25% 25%,
-  hsl(200, 100%, 50%) 0deg 15deg,
-  hsl(200, 100%, 60%) 10deg 30deg
+  hsl(200 100% 50%) 0deg 15deg,
+  hsl(200 100% 60%) 10deg 30deg
 )
 
 /* Interpolation in polar color space

diff --git a/files/en-us/web/css/image/paint/index.md b/files/en-us/web/css/image/paint/index.md
@@ -90,17 +90,17 @@ CSS.paintWorklet.addModule(
 
 ```css
 li {
-  --boxColor: hsl(55 90% 60% / 1);
+  --boxColor: hsl(55 90% 60% / 100%);
   background-image: paint(hollowHighlights, stroke, 2px);
 }
 
 li:nth-of-type(3n) {
-  --boxColor: hsl(155 90% 60% / 1);
+  --boxColor: hsl(155 90% 60% / 100%);
   background-image: paint(hollowHighlights, filled, 3px);
 }
 
 li:nth-of-type(3n + 1) {
-  --boxColor: hsl(255 90% 60% / 1);
+  --boxColor: hsl(255 90% 60% / 100%);
   background-image: paint(hollowHighlights, stroke, 1px);
 }
 ```

diff --git a/files/en-us/web/css/mix-blend-mode/index.md b/files/en-us/web/css/mix-blend-mode/index.md
@@ -78,16 +78,16 @@ mix-blend-mode: unset;
             <svg class="item" viewBox="0 0 150 150">
               <defs>
                 <linearGradient id="red">
-                  <stop offset="0" stop-color="hsl(0,100%,50%)" />
-                  <stop offset="100%" stop-color="hsl(0,0%,100%)" />
+                  <stop offset="0" stop-color="hsl(0 100% 50%)" />
+                  <stop offset="100%" stop-color="hsl(0 0% 100%)" />
                 </linearGradient>
                 <linearGradient id="green">
-                  <stop offset="0" stop-color="hsl(120,100%,50%)" />
-                  <stop offset="100%" stop-color="hsl(120,0%,100%)" />
+                  <stop offset="0" stop-color="hsl(120 100% 50%)" />
+                  <stop offset="100%" stop-color="hsl(120 0% 100%)" />
                 </linearGradient>
                 <linearGradient id="blue">
-                  <stop offset="0" stop-color="hsl(240,100%,50%)" />
-                  <stop offset="100%" stop-color="hsl(240,0%,100%)" />
+                  <stop offset="0" stop-color="hsl(240 100% 50%)" />
+                  <stop offset="100%" stop-color="hsl(240 0% 100%)" />
                 </linearGradient>
               </defs>
               <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>