fix(learn): Update rgb() values to use latest syntax (mdn#30604)

update rgb values in prose

files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md

@@ -62,13 +62,13 @@ article {
   background-color: red;
   background-image: linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0.25)
+    rgb(0 0 0 / 0%),
+    rgb(0 0 0 / 25%)
   );
 }
 
 .simple {
-  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
+  box-shadow: 5px 5px 5px rgb(0 0 0 / 70%);
 }
 ```
 
@@ -109,8 +109,8 @@ article {
   background-color: red;
   background-image: linear-gradient(
     to bottom,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0.25)
+    rgb(0 0 0 / 0%),
+    rgb(0 0 0 / 25%)
   );
 }
 
@@ -150,8 +150,8 @@ button {
   background-image: linear-gradient(to bottom right, #777, #ddd);
   box-shadow:
     1px 1px 1px black,
-    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
-    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
+    inset 2px 3px 5px rgb(0 0 0 / 30%),
+    inset -2px -3px 5px rgb(255 255 255 / 50%);
 }
 
 button:focus,
@@ -162,8 +162,8 @@ button:hover {
 button:active {
   box-shadow:
     inset 2px 2px 1px black,
-    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
-    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
+    inset 2px 3px 5px rgb(0 0 0 / 30%),
+    inset -2px -3px 5px rgb(255 255 255 / 50%);
 }
 ```
 

files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md

@@ -44,8 +44,8 @@ The CSS {{cssxref("background")}} property is a shorthand for a number of backgr
   background:
     linear-gradient(
         105deg,
-        rgba(255, 255, 255, 0.2) 39%,
-        rgba(51, 56, 57, 1) 96%
+        rgb(255 255 255 / 20%) 39%,
+        rgb(51 56 57 / 100%) 96%
       ) center center / 400px 200px no-repeat,
     url(big-star.png) center no-repeat,
     rebeccapurple;

files/en-us/learn/css/building_blocks/styling_tables/index.md

@@ -221,11 +221,7 @@ tfoot {
 thead th,
 tfoot th,
 tfoot td {
-  background: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0.1),
-    rgba(0, 0, 0, 0.5)
-  );
+  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
   border: 3px solid purple;
 }
 ```

files/en-us/learn/css/building_blocks/values_and_units/index.md

@@ -57,7 +57,7 @@ In the following example, we have set the color of our heading using a keyword,
 ```css
 h1 {
   color: black;
-  background-color: rgb(197, 93, 161);
+  background-color: rgb(197 93 161);
 }
 ```
 
@@ -383,7 +383,7 @@ These values are less intuitive than keywords for defining colors, but they are
 
 **Again, try changing the values to see how the colors vary.**
 
-### RGB and RGBA values
+### RGB values
 
 To create RGB values directly, the `rgb()` function takes three parameters representing **red**, **green**, and **blue** channel values of the colors, with an optional fourth value separated by a slash ('/') representing opacity, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 or a percent between 0% and 100% inclusive (but not a mixture of the two).
 

files/en-us/learn/css/css_layout/floats/index.md

@@ -95,7 +95,7 @@ body {
   width: 150px;
   height: 100px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -145,7 +145,7 @@ To float the box, add the {{cssxref("float")}} and {{cssxref("margin-right")}} p
   width: 150px;
   height: 100px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -166,7 +166,7 @@ Add a class of `special` to the first paragraph of text, the one immediately fol
 
 ```css
 .special {
-  background-color: rgb(148, 255, 172);
+  background-color: rgb(148 255 172);
   padding: 10px;
   color: purple;
 }
@@ -223,7 +223,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 ```
@@ -293,12 +293,12 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
 }
 
 .special {
-  background-color: rgb(148, 255, 172);
+  background-color: rgb(148 255 172);
   padding: 10px;
   color: purple;
 }
@@ -341,7 +341,7 @@ In your CSS, add the following rule for the `.wrapper` class and then reload the
 
 ```css live-sample___the_problem
 .wrapper {
-  background-color: rgb(148, 255, 172);
+  background-color: rgb(148 255 172);
   padding: 10px;
   color: purple;
 }
@@ -395,7 +395,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
   color: black;
 }
@@ -411,7 +411,7 @@ To solve this problem is to use the value `flow-root` of the `display` property.
 
 ```css
 .wrapper {
-  background-color: rgb(148, 255, 172);
+  background-color: rgb(148 255 172);
   padding: 10px;
   color: purple;
   display: flow-root;
@@ -467,7 +467,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207, 232, 220);
+  background-color: rgb(207 232 220);
   padding: 1em;
   color: black;
 }

files/en-us/learn/css/css_layout/grids/index.md

@@ -85,8 +85,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -142,8 +142,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -195,8 +195,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -264,8 +264,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -329,8 +329,8 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -423,8 +423,8 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 
 aside {
@@ -525,8 +525,8 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 
 aside {
@@ -663,8 +663,8 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 header {
   grid-area: header;
@@ -700,7 +700,7 @@ footer {
 
 article {
   padding: 10px;
-  border: 2px solid rgb(79, 185, 227);
+  border: 2px solid rgb(79 185 227);
   border-radius: 5px;
 }
 ```
@@ -726,8 +726,8 @@ body {
 .container div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 ```
 
@@ -818,8 +818,8 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
+  background-color: rgb(207 232 220);
+  border: 2px solid rgb(79 185 227);
 }
 
 aside {