chore(learn): Remove legacy syntax for rgb()/rgba() (#149)

bsmth · web-flow · commit 3d6605646f74 · 2023-09-06T14:43:48.000+01:00
diff --git a/learn/values-units/color-rgb.html b/learn/values-units/color-rgb.html
@@ -17,47 +17,47 @@
 
     <style class="editable">
       .one {
-        background-color: rgb(2, 121, 139);
+        background-color: rgb(2 121 139);
       }
 
       .two {
-        background-color: rgb(197, 93, 161);
+        background-color: rgb(197 93 161);
       }
 
       .three {
-        background-color: rgb(18, 138, 125);
+        background-color: rgb(18 138 125);
       }
     </style>
   </head>
 
   <body>
     <section class="preview">
       <div class="wrapper">
-        <div class="box one">rgb(2,121,139)</div>
-        <div class="box two">rgb(197,93,161)</div>
-        <div class="box three">rgb(18,138,125)</div>
+        <div class="box one">rgb(2 121 139)</div>
+        <div class="box two">rgb(197 93 161)</div>
+        <div class="box three">rgb(18 138 125)</div>
       </div>
     </section>
 
-    <textarea class="playable playable-css" style="height: 240px;">
+    <textarea class="playable playable-css" style="height: 240px">
 .one {
-  background-color: rgb(2, 121, 139);
+  background-color: rgb(2 121 139);
 }
 
 .two {
-  background-color: rgb(197, 93, 161);
+  background-color: rgb(197 93 161);
 }
 
 .three {
-  background-color: rgb(18, 138, 125);
+  background-color: rgb(18 138 125);
 }
     </textarea>
 
-    <textarea class="playable playable-html" style="height: 130px;">
+    <textarea class="playable playable-html" style="height: 130px">
 <div class="wrapper">
-  <div class="box one">rgb(2, 121, 139)</div>
-  <div class="box two">rgb(197, 93, 161)</div>
-  <div class="box three">rgb(18, 138, 125)</div>
+  <div class="box one">rgb(2 121 139)</div>
+  <div class="box two">rgb(197 93 161)</div>
+  <div class="box three">rgb(18 138 125)</div>
 </div>
     </textarea>
 
diff --git a/learn/values-units/color-rgba.html b/learn/values-units/color-rgba.html
@@ -21,47 +21,47 @@
 
     <style class="editable">
       .one {
-        background-color: rgba(2, 121, 139, 0.3);
+        background-color: rgb(2 121 139 / 0.3);
       }
 
       .two {
-        background-color: rgba(197, 93, 161, 0.7);
+        background-color: rgb(197 93 161 / 0.7);
       }
 
       .three {
-        background-color: rgba(18, 138, 125, 0.9);
+        background-color: rgb(18 138 125 / 0.9);
       }
     </style>
   </head>
 
   <body>
     <section class="preview">
       <div class="wrapper">
-        <div class="box one">rgba(2, 121, 139, .3)</div>
-        <div class="box two">rgba(197, 93, 161, .7)</div>
-        <div class="box three">rgba(18, 138, 125, .9)</div>
+        <div class="box one">rgb(2 121 139 / .3)</div>
+        <div class="box two">rgb(197 93 161 / .7)</div>
+        <div class="box three">rgb(18 138 125 / .9)</div>
       </div>
     </section>
 
-    <textarea class="playable playable-css" style="height: 240px;">
+    <textarea class="playable playable-css" style="height: 240px">
 .one {
-  background-color: rgba(2, 121, 139, .3);
+  background-color: rgb(2 121 139 / .3);
 }
 
 .two {
-  background-color: rgba(197, 93, 161, .7);
+  background-color: rgb(197 93 161 / .7);
 }
 
 .three {
-  background-color: rgba(18, 138, 125, .9);
+  background-color: rgb(18 138 125 / .9);
 }
     </textarea>
 
-    <textarea class="playable playable-html" style="height: 130px;">
+    <textarea class="playable playable-html" style="height: 130px">
 <div class="wrapper">
-  <div class="box one">rgba(2, 121, 139, .3)</div>
-  <div class="box two">rgba(197, 93, 161, .7)</div>
-  <div class="box three">rgba(18, 138, 125, .9)</div>
+  <div class="box one">rgb(2 121 139 / .3)</div>
+  <div class="box two">rgb(197 93 161 / .7)</div>
+  <div class="box three">rgb(18 138 125 / .9)</div>
 </div>
     </textarea>
 
