fix: convert rgba() to rgb() (mdn#195)

* fix: convert rgba() to rgb()

* convert hsla() to hsl()

* convert in gradients

* remove redundant opacity value `1`s

Author: OnkarRuikar

box-alignment/flexbox/auto-margins.html

@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96, 139, 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">

box-alignment/flexbox/gap.html

@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96, 139, 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">

box-alignment/overview/flex-align-items.html

@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96, 139, 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">

box-alignment/overview/grid-align-items.html

@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96, 139, 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">

box-alignment/overview/grid-gap.html

@@ -68,7 +68,7 @@
         padding: 20px;
         border: 2px solid rgb(96, 139, 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">

display/multi-keyword/inline-block.html

@@ -66,7 +66,7 @@
     </style>
     <style class="editable">
       .ib {
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: rgb(0 0 0 / 0.4);
         color: #fff;
         padding: 10px;
         display: inline-block;
@@ -84,7 +84,7 @@
     </section>
     <textarea class="playable-css" style="height: 180px">
 .ib {
-  background-color: rgba(0,0,0,.4);
+  background-color: rgb(0 0 0 / .4);
   color: #fff;
   padding: 10px;
   display: inline-block;

display/multi-keyword/inline-flex.html

@@ -62,7 +62,7 @@
       .flex > div {
         border: 2px solid rgb(96, 139, 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">

display/multi-keyword/multi-keyword-flex.html

@@ -67,7 +67,7 @@
       .flex > * {
         border: 2px solid rgb(96, 139, 168);
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
       }
     </style>
     <style class="editable">

editable-samples-2/css/editable.css

@@ -13,7 +13,7 @@ body {
   height: 200px;
   background-color: white;
   padding: 1em 0;
-  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 2px 5px -2px rgb(0 0 0 / 0.1);
 }
 
 #example-element {
@@ -49,7 +49,7 @@ body {
 .example-choice.selected {
   background-color: white;
   transition: background-color 0.2s ease-in;
-  box-shadow: inset 0px 2px 2px -2px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0px 2px 2px -2px rgb(0 0 0 / 0.2);
   cursor: text;
 }
 

editable-samples-2/pages/border-top-color/index.html

@@ -21,7 +21,7 @@
 
     <pre
       class="prettyprint lang-css"
-      id="example-choice-list"><div class=" example-choice">border-top-color: red;</div><div class=" example-choice">border-top-color: rgb(255, 128, 0);</div><div class=" example-choice">border-top-color: hsla(240, 50%, 25%, 0.75);</div><div class=" example-choice">border-top-color: #ffbb00;</div><div class=" example-choice">border-top-color: currentColor;</div><div class=" example-choice">border-top-color: transparent;</div></pre>
+      id="example-choice-list"><div class=" example-choice">border-top-color: red;</div><div class=" example-choice">border-top-color: rgb(255, 128, 0);</div><div class=" example-choice">border-top-color: hsl(240 50% 25% / 0.75);</div><div class=" example-choice">border-top-color: #ffbb00;</div><div class=" example-choice">border-top-color: currentColor;</div><div class=" example-choice">border-top-color: transparent;</div></pre>
 
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
     <script src="../../js/editable.js"></script>