From 6d9753dfbd62cd4903a73484d47d2e238f26391b Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Mon, 9 Sep 2024 14:18:13 +0530
Subject: [PATCH] fix: convert rgba() to rgb() (#195)

* fix: convert rgba() to rgb()

* convert hsla() to hsl()

* convert in gradients

* remove redundant opacity value `1`s
---
 box-alignment/flexbox/auto-margins.html       |   2 +-
 box-alignment/flexbox/gap.html                |   2 +-
 box-alignment/overview/flex-align-items.html  |   2 +-
 box-alignment/overview/grid-align-items.html  |   2 +-
 box-alignment/overview/grid-gap.html          |   2 +-
 display/multi-keyword/inline-block.html       |   4 +-
 display/multi-keyword/inline-flex.html        |   2 +-
 display/multi-keyword/multi-keyword-flex.html |   2 +-
 editable-samples-2/css/editable.css           |   4 +-
 .../pages/border-top-color/index.html         |   2 +-
 .../codemirror/mode/css/less.html             |   2 +-
 editable-samples/css/editable.css             |  10 +-
 flexbox/alignment/align-content-column.html   |   2 +-
 flexbox/alignment/align-content.html          |   2 +-
 flexbox/alignment/align-items.html            |   2 +-
 flexbox/alignment/align-self-column.html      |   2 +-
 flexbox/alignment/align-self.html             |   2 +-
 flexbox/alignment/auto-margins.html           |   2 +-
 flexbox/alignment/intro.html                  |   2 +-
 flexbox/alignment/justify-content-column.html |   2 +-
 .../alignment/justify-content-reverse.html    |   2 +-
 .../justify-content-writing-mode.html         |   2 +-
 flexbox/alignment/justify-content.html        |   2 +-
 flexbox/basics/align-items.html               |   2 +-
 flexbox/basics/flex-direction.html            |   2 +-
 flexbox/basics/flex-flow.html                 |   2 +-
 flexbox/basics/flex-properties.html           |   2 +-
 flexbox/basics/flex-shorthands.html           |   2 +-
 flexbox/basics/flex-wrap.html                 |   2 +-
 flexbox/basics/justify-content.html           |   2 +-
 flexbox/basics/simple-example-anon.html       |   2 +-
 flexbox/basics/simple-example.html            |   2 +-
 flexbox/basics/the-flex-container.html        |   2 +-
 flexbox/browsers/float.html                   |   2 +-
 flexbox/browsers/inline-block.html            |   2 +-
 flexbox/browsers/table-cell.html              |   2 +-
 flexbox/browsers/vertical-align.html          |   2 +-
 flexbox/order/flex-direction.html             |   2 +-
 flexbox/order/negative-order.html             |   2 +-
 flexbox/order/order.html                      |   2 +-
 flexbox/order/usecase-order.html              |   2 +-
 flexbox/ratios/flex-basis.html                |   2 +-
 flexbox/ratios/flex-grow-ratios.html          |   2 +-
 flexbox/ratios/flex-grow.html                 |   2 +-
 flexbox/ratios/flex-shrink-min-content.html   |   2 +-
 flexbox/ratios/flex-shrink-ratios.html        |   2 +-
 flexbox/ratios/flex-shrink.html               |   2 +-
 flexbox/relationship/display-contents.html    |   2 +-
 flexbox/relationship/flex-layout.html         |   2 +-
 flexbox/relationship/floats.html              |   2 +-
 flexbox/relationship/grid-layout.html         |   2 +-
 flexbox/relationship/writing-modes.html       |   2 +-
 flexbox/use-cases/cards.html                  |   2 +-
 flexbox/use-cases/center.html                 |   2 +-
 flexbox/use-cases/input-button.html           |   4 +-
 flexbox/use-cases/label-input-button.html     |   4 +-
 flexbox/use-cases/navigation-flex.html        |   2 +-
 flexbox/use-cases/navigation.html             |   2 +-
 flexbox/use-cases/split-navigation.html       |   2 +-
 flexbox/wrapping/column-wrap.html             |   2 +-
 flexbox/wrapping/flex-grid.html               |   2 +-
 flexbox/wrapping/gaps.html                    |   2 +-
 flexbox/wrapping/grid-example.html            |   2 +-
 flexbox/wrapping/row-reverse-wrap.html        |   2 +-
 flexbox/wrapping/row-wrap.html                |   2 +-
 flexbox/wrapping/visibility-collapse.html     |   2 +-
 .../wrapping/wrapped-visibility-collapse.html |   2 +-
 grid/subgrid/adding-line-names.html           |   4 +-
 grid/subgrid/gap.html                         |   4 +-
 houdini/css_painting_api/example-boxbg.html   |   6 +-
 howto/box-shadow-button.html                  |   4 +-
 howto/opacity.html                            |   4 +-
 howto/text-shadow.html                        |   4 +-
 logical/border-longhands.html                 |   2 +-
 logical/float.html                            |   2 +-
 logical/intro-feature-queries.html            |   4 +-
 logical/intro-grid-example.html               |   4 +-
 logical/margin-longhands.html                 |   2 +-
 logical/padding-longhands.html                |   2 +-
 logical/positioning-inset.html                |   2 +-
 logical/size-inline-block.html                |   2 +-
 logical/size-max.html                         |   2 +-
 logical/size-min.html                         |   2 +-
 logical/size-resize.html                      |   2 +-
 modules/animation.html                        |   2 +-
 modules/backgrounds.html                      |   8 +-
 modules/transforms.html                       | 974 +++++++++---------
 .../overscroll-behavior-x.html                |  14 +-
 path/offset-path.html                         |   4 +-
 tools/border-image-generator/styles.css       |   6 +-
 tools/box-shadow-generator/styles.css         |  12 +-
 tools/color-mixer/index.html                  |  28 +-
 92 files changed, 625 insertions(+), 625 deletions(-)

diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html
index b1d9394a..6676fc54 100644
--- a/box-alignment/flexbox/auto-margins.html
+++ b/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">
diff --git a/box-alignment/flexbox/gap.html b/box-alignment/flexbox/gap.html
index 92521b3c..f01e5e4e 100644
--- a/box-alignment/flexbox/gap.html
+++ b/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">
diff --git a/box-alignment/overview/flex-align-items.html b/box-alignment/overview/flex-align-items.html
index 35b17061..5fe6f34c 100644
--- a/box-alignment/overview/flex-align-items.html
+++ b/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">
diff --git a/box-alignment/overview/grid-align-items.html b/box-alignment/overview/grid-align-items.html
index 5f8c0481..a8737d0f 100644
--- a/box-alignment/overview/grid-align-items.html
+++ b/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">
diff --git a/box-alignment/overview/grid-gap.html b/box-alignment/overview/grid-gap.html
index 4bfd1fa7..32f048be 100644
--- a/box-alignment/overview/grid-gap.html
+++ b/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">
diff --git a/display/multi-keyword/inline-block.html b/display/multi-keyword/inline-block.html
index 1f22b167..217de84c 100644
--- a/display/multi-keyword/inline-block.html
+++ b/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;
diff --git a/display/multi-keyword/inline-flex.html b/display/multi-keyword/inline-flex.html
index 702395ae..57ef7b6b 100644
--- a/display/multi-keyword/inline-flex.html
+++ b/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">
diff --git a/display/multi-keyword/multi-keyword-flex.html b/display/multi-keyword/multi-keyword-flex.html
index a7c4f126..e12f6c60 100644
--- a/display/multi-keyword/multi-keyword-flex.html
+++ b/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">
diff --git a/editable-samples-2/css/editable.css b/editable-samples-2/css/editable.css
index 85095d2a..1ca5c075 100644
--- a/editable-samples-2/css/editable.css
+++ b/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;
 }
 
diff --git a/editable-samples-2/pages/border-top-color/index.html b/editable-samples-2/pages/border-top-color/index.html
index 72d9a32d..cd1b9c34 100644
--- a/editable-samples-2/pages/border-top-color/index.html
+++ b/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>
diff --git a/editable-samples/codemirror/mode/css/less.html b/editable-samples/codemirror/mode/css/less.html
index 2298c662..8a740d8c 100644
--- a/editable-samples/codemirror/mode/css/less.html
+++ b/editable-samples/codemirror/mode/css/less.html
@@ -91,7 +91,7 @@ <h2>LESS mode</h2>
   .box-shadow(0, 1px, 8px, 0.6);
 
   &.docked {
-    background-color: hsla(210, 60%, 40%, 0.4);
+    background-color: hsl(210 60% 40% / 0.4);
   }
   &:hover {
     background-color: @blue;
diff --git a/editable-samples/css/editable.css b/editable-samples/css/editable.css
index eaeb94da..f6f7e6eb 100644
--- a/editable-samples/css/editable.css
+++ b/editable-samples/css/editable.css
@@ -13,10 +13,10 @@ body {
 }
 
 .CodeMirror {
-  box-shadow: inset 0px 2px 2px -2px rgba(0, 0, 0, 0.2);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0px 2px 2px -2px rgb(0 0 0 / 0.2);
+  border: 1px solid rgb(0 0 0 / 0.2);
+  border-top: 1px solid rgb(0 0 0 / 0.3);
+  border-bottom: 1px solid rgb(0 0 0 / 0.1);
 }
 
 #editor {
@@ -41,5 +41,5 @@ body {
   background-color: white;
   padding: 1em;
   box-sizing: border-box;
-  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 2px 5px -2px rgb(0 0 0 / 0.1);
 }
diff --git a/flexbox/alignment/align-content-column.html b/flexbox/alignment/align-content-column.html
index 76b7b039..3d73044b 100644
--- a/flexbox/alignment/align-content-column.html
+++ b/flexbox/alignment/align-content-column.html
@@ -69,7 +69,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);
         flex: 1 1 100px;
       }
     </style>
diff --git a/flexbox/alignment/align-content.html b/flexbox/alignment/align-content.html
index 01d44a27..45962562 100644
--- a/flexbox/alignment/align-content.html
+++ b/flexbox/alignment/align-content.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);
         flex: 1 1 100px;
       }
     </style>
diff --git a/flexbox/alignment/align-items.html b/flexbox/alignment/align-items.html
index 64bfb2ba..156ad313 100644
--- a/flexbox/alignment/align-items.html
+++ b/flexbox/alignment/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">
diff --git a/flexbox/alignment/align-self-column.html b/flexbox/alignment/align-self-column.html
index ed51545d..a5889ac0 100644
--- a/flexbox/alignment/align-self-column.html
+++ b/flexbox/alignment/align-self-column.html
@@ -70,7 +70,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">
diff --git a/flexbox/alignment/align-self.html b/flexbox/alignment/align-self.html
index 8242c1af..a1f67d0f 100644
--- a/flexbox/alignment/align-self.html
+++ b/flexbox/alignment/align-self.html
@@ -70,7 +70,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">
diff --git a/flexbox/alignment/auto-margins.html b/flexbox/alignment/auto-margins.html
index b1d9394a..6676fc54 100644
--- a/flexbox/alignment/auto-margins.html
+++ b/flexbox/alignment/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">
diff --git a/flexbox/alignment/intro.html b/flexbox/alignment/intro.html
index daf59e71..45ac2ab4 100644
--- a/flexbox/alignment/intro.html
+++ b/flexbox/alignment/intro.html
@@ -68,7 +68,7 @@
       .box > * {
         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">
diff --git a/flexbox/alignment/justify-content-column.html b/flexbox/alignment/justify-content-column.html
index 77a58baa..75d07571 100644
--- a/flexbox/alignment/justify-content-column.html
+++ b/flexbox/alignment/justify-content-column.html
@@ -71,7 +71,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">
diff --git a/flexbox/alignment/justify-content-reverse.html b/flexbox/alignment/justify-content-reverse.html
index 0dfbca02..603ca61a 100644
--- a/flexbox/alignment/justify-content-reverse.html
+++ b/flexbox/alignment/justify-content-reverse.html
@@ -71,7 +71,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">
diff --git a/flexbox/alignment/justify-content-writing-mode.html b/flexbox/alignment/justify-content-writing-mode.html
index 0641bf04..2d65395b 100644
--- a/flexbox/alignment/justify-content-writing-mode.html
+++ b/flexbox/alignment/justify-content-writing-mode.html
@@ -70,7 +70,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">
diff --git a/flexbox/alignment/justify-content.html b/flexbox/alignment/justify-content.html
index d91fe21c..9561d576 100644
--- a/flexbox/alignment/justify-content.html
+++ b/flexbox/alignment/justify-content.html
@@ -70,7 +70,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">
diff --git a/flexbox/basics/align-items.html b/flexbox/basics/align-items.html
index ea069b37..a07bf7f2 100644
--- a/flexbox/basics/align-items.html
+++ b/flexbox/basics/align-items.html
@@ -68,7 +68,7 @@
       .box > * {
         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">
diff --git a/flexbox/basics/flex-direction.html b/flexbox/basics/flex-direction.html
index 32f201ae..1a8164b2 100644
--- a/flexbox/basics/flex-direction.html
+++ b/flexbox/basics/flex-direction.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/basics/flex-flow.html b/flexbox/basics/flex-flow.html
index 68d9eb4a..85617623 100644
--- a/flexbox/basics/flex-flow.html
+++ b/flexbox/basics/flex-flow.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
         width: 200px;
       }
 
diff --git a/flexbox/basics/flex-properties.html b/flexbox/basics/flex-properties.html
index d6a4776f..1e17927b 100644
--- a/flexbox/basics/flex-properties.html
+++ b/flexbox/basics/flex-properties.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/basics/flex-shorthands.html b/flexbox/basics/flex-shorthands.html
index 62e1899c..89b475dd 100644
--- a/flexbox/basics/flex-shorthands.html
+++ b/flexbox/basics/flex-shorthands.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/basics/flex-wrap.html b/flexbox/basics/flex-wrap.html
index 46f9c041..a4a6e280 100644
--- a/flexbox/basics/flex-wrap.html
+++ b/flexbox/basics/flex-wrap.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
         width: 200px;
       }
 
diff --git a/flexbox/basics/justify-content.html b/flexbox/basics/justify-content.html
index 1d09ba04..cbda9195 100644
--- a/flexbox/basics/justify-content.html
+++ b/flexbox/basics/justify-content.html
@@ -67,7 +67,7 @@
       .box > * {
         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">
diff --git a/flexbox/basics/simple-example-anon.html b/flexbox/basics/simple-example-anon.html
index c20959cd..0338ed7b 100644
--- a/flexbox/basics/simple-example-anon.html
+++ b/flexbox/basics/simple-example-anon.html
@@ -68,7 +68,7 @@
       .box > * {
         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);
         padding: 10px;
         margin: 0;
       }
diff --git a/flexbox/basics/simple-example.html b/flexbox/basics/simple-example.html
index 9b4eb8b8..41ef2080 100644
--- a/flexbox/basics/simple-example.html
+++ b/flexbox/basics/simple-example.html
@@ -68,7 +68,7 @@
       .box > * {
         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);
         padding: 10px;
       }
     </style>
diff --git a/flexbox/basics/the-flex-container.html b/flexbox/basics/the-flex-container.html
index 851c4441..78d3da23 100644
--- a/flexbox/basics/the-flex-container.html
+++ b/flexbox/basics/the-flex-container.html
@@ -68,7 +68,7 @@
       .box > * {
         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">
diff --git a/flexbox/browsers/float.html b/flexbox/browsers/float.html
index bb0b608f..56d0be88 100644
--- a/flexbox/browsers/float.html
+++ b/flexbox/browsers/float.html
@@ -73,7 +73,7 @@
       .box > * {
         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">
diff --git a/flexbox/browsers/inline-block.html b/flexbox/browsers/inline-block.html
index 7ba8aa85..04ec6d41 100644
--- a/flexbox/browsers/inline-block.html
+++ b/flexbox/browsers/inline-block.html
@@ -67,7 +67,7 @@
       .box > * {
         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">
diff --git a/flexbox/browsers/table-cell.html b/flexbox/browsers/table-cell.html
index 48053b09..3867c4a9 100644
--- a/flexbox/browsers/table-cell.html
+++ b/flexbox/browsers/table-cell.html
@@ -67,7 +67,7 @@
       .box > * {
         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">
diff --git a/flexbox/browsers/vertical-align.html b/flexbox/browsers/vertical-align.html
index 3fd94397..cc96393c 100644
--- a/flexbox/browsers/vertical-align.html
+++ b/flexbox/browsers/vertical-align.html
@@ -67,7 +67,7 @@
       .box > * {
         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">
diff --git a/flexbox/order/flex-direction.html b/flexbox/order/flex-direction.html
index 0d1227b8..0c0a7b58 100644
--- a/flexbox/order/flex-direction.html
+++ b/flexbox/order/flex-direction.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
         padding: 10px;
       }
 
diff --git a/flexbox/order/negative-order.html b/flexbox/order/negative-order.html
index 990d1f55..39060062 100644
--- a/flexbox/order/negative-order.html
+++ b/flexbox/order/negative-order.html
@@ -65,7 +65,7 @@
       .box > * {
         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);
         padding: 10px;
       }
 
diff --git a/flexbox/order/order.html b/flexbox/order/order.html
index f47d070c..03702528 100644
--- a/flexbox/order/order.html
+++ b/flexbox/order/order.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
         padding: 10px;
       }
 
diff --git a/flexbox/order/usecase-order.html b/flexbox/order/usecase-order.html
index 09b81a37..4bd5b2b9 100644
--- a/flexbox/order/usecase-order.html
+++ b/flexbox/order/usecase-order.html
@@ -70,7 +70,7 @@
       .card {
         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);
         padding: 10px;
       }
     </style>
diff --git a/flexbox/ratios/flex-basis.html b/flexbox/ratios/flex-basis.html
index 56e28fd0..5ba374d4 100644
--- a/flexbox/ratios/flex-basis.html
+++ b/flexbox/ratios/flex-basis.html
@@ -64,7 +64,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-grow-ratios.html b/flexbox/ratios/flex-grow-ratios.html
index 2a9806b2..36fad7ac 100644
--- a/flexbox/ratios/flex-grow-ratios.html
+++ b/flexbox/ratios/flex-grow-ratios.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-grow.html b/flexbox/ratios/flex-grow.html
index fddaef3a..0ad11f2e 100644
--- a/flexbox/ratios/flex-grow.html
+++ b/flexbox/ratios/flex-grow.html
@@ -64,7 +64,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-shrink-min-content.html b/flexbox/ratios/flex-shrink-min-content.html
index 8be690b7..bb3d485b 100644
--- a/flexbox/ratios/flex-shrink-min-content.html
+++ b/flexbox/ratios/flex-shrink-min-content.html
@@ -64,7 +64,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-shrink-ratios.html b/flexbox/ratios/flex-shrink-ratios.html
index 3c38f8d5..c780b1d5 100644
--- a/flexbox/ratios/flex-shrink-ratios.html
+++ b/flexbox/ratios/flex-shrink-ratios.html
@@ -64,7 +64,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/ratios/flex-shrink.html b/flexbox/ratios/flex-shrink.html
index 59f09660..ba86dc7b 100644
--- a/flexbox/ratios/flex-shrink.html
+++ b/flexbox/ratios/flex-shrink.html
@@ -64,7 +64,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/relationship/display-contents.html b/flexbox/relationship/display-contents.html
index cfb2d94f..dbddf736 100644
--- a/flexbox/relationship/display-contents.html
+++ b/flexbox/relationship/display-contents.html
@@ -66,7 +66,7 @@
       .box > * {
         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);
         padding: 20px;
       }
 
diff --git a/flexbox/relationship/flex-layout.html b/flexbox/relationship/flex-layout.html
index 884c7cf1..a35b1852 100644
--- a/flexbox/relationship/flex-layout.html
+++ b/flexbox/relationship/flex-layout.html
@@ -66,7 +66,7 @@
       .box > * {
         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);
         padding: 20px;
       }
 
diff --git a/flexbox/relationship/floats.html b/flexbox/relationship/floats.html
index b00a5ac1..6e79ba87 100644
--- a/flexbox/relationship/floats.html
+++ b/flexbox/relationship/floats.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/relationship/grid-layout.html b/flexbox/relationship/grid-layout.html
index dba7808a..bbf71f78 100644
--- a/flexbox/relationship/grid-layout.html
+++ b/flexbox/relationship/grid-layout.html
@@ -66,7 +66,7 @@
       .box > * {
         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);
         padding: 20px;
       }
 
diff --git a/flexbox/relationship/writing-modes.html b/flexbox/relationship/writing-modes.html
index fbc7fe7a..021ddb9d 100644
--- a/flexbox/relationship/writing-modes.html
+++ b/flexbox/relationship/writing-modes.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/use-cases/cards.html b/flexbox/use-cases/cards.html
index 4e4de262..aade8a63 100644
--- a/flexbox/use-cases/cards.html
+++ b/flexbox/use-cases/cards.html
@@ -75,7 +75,7 @@
       }
 
       .card footer {
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
     </style>
diff --git a/flexbox/use-cases/center.html b/flexbox/use-cases/center.html
index 2e1a99ba..3fe53a89 100644
--- a/flexbox/use-cases/center.html
+++ b/flexbox/use-cases/center.html
@@ -68,7 +68,7 @@
       .box > * {
         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">
diff --git a/flexbox/use-cases/input-button.html b/flexbox/use-cases/input-button.html
index 21019198..8007551a 100644
--- a/flexbox/use-cases/input-button.html
+++ b/flexbox/use-cases/input-button.html
@@ -75,11 +75,11 @@
         line-height: 1;
       }
       .wrapper input[type="text"] {
-        background-color: rgba(96, 139, 168, 0.5);
+        background-color: rgb(96 139 168 / 0.5);
         border-right: 1px solid rgb(96, 139, 168);
       }
       .wrapper input[type="submit"] {
-        background-color: rgba(96, 139, 168, 1);
+        background-color: rgb(96 139 168);
         color: #fff;
       }
     </style>
diff --git a/flexbox/use-cases/label-input-button.html b/flexbox/use-cases/label-input-button.html
index 53592c1a..3bf06a1e 100644
--- a/flexbox/use-cases/label-input-button.html
+++ b/flexbox/use-cases/label-input-button.html
@@ -76,11 +76,11 @@
         line-height: 1;
       }
       .wrapper > input[type="text"] {
-        background-color: rgba(96, 139, 168, 0.5);
+        background-color: rgb(96 139 168 / 0.5);
         border-right: 1px solid rgb(96, 139, 168);
       }
       .wrapper input[type="submit"] {
-        background-color: rgba(96, 139, 168, 1);
+        background-color: rgb(96 139 168);
         color: #fff;
       }
       .wrapper label {
diff --git a/flexbox/use-cases/navigation-flex.html b/flexbox/use-cases/navigation-flex.html
index 36428c93..f8d7e414 100644
--- a/flexbox/use-cases/navigation-flex.html
+++ b/flexbox/use-cases/navigation-flex.html
@@ -74,7 +74,7 @@
         color: #000;
         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);
         padding: 10px;
         display: block;
       }
diff --git a/flexbox/use-cases/navigation.html b/flexbox/use-cases/navigation.html
index 2f18ae10..84614a9a 100644
--- a/flexbox/use-cases/navigation.html
+++ b/flexbox/use-cases/navigation.html
@@ -74,7 +74,7 @@
         color: #000;
         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);
         padding: 10px;
         display: block;
       }
diff --git a/flexbox/use-cases/split-navigation.html b/flexbox/use-cases/split-navigation.html
index d18985b3..db0139d4 100644
--- a/flexbox/use-cases/split-navigation.html
+++ b/flexbox/use-cases/split-navigation.html
@@ -74,7 +74,7 @@
         color: #000;
         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);
         padding: 10px;
         display: block;
       }
diff --git a/flexbox/wrapping/column-wrap.html b/flexbox/wrapping/column-wrap.html
index e1216279..2b92aafa 100644
--- a/flexbox/wrapping/column-wrap.html
+++ b/flexbox/wrapping/column-wrap.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/wrapping/flex-grid.html b/flexbox/wrapping/flex-grid.html
index bbc33d5f..6eca9f5b 100644
--- a/flexbox/wrapping/flex-grid.html
+++ b/flexbox/wrapping/flex-grid.html
@@ -65,7 +65,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/wrapping/gaps.html b/flexbox/wrapping/gaps.html
index 0b67a55b..7e8bd23b 100644
--- a/flexbox/wrapping/gaps.html
+++ b/flexbox/wrapping/gaps.html
@@ -65,7 +65,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/wrapping/grid-example.html b/flexbox/wrapping/grid-example.html
index d2887560..28adcd64 100644
--- a/flexbox/wrapping/grid-example.html
+++ b/flexbox/wrapping/grid-example.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/wrapping/row-reverse-wrap.html b/flexbox/wrapping/row-reverse-wrap.html
index 106deb64..4d72279e 100644
--- a/flexbox/wrapping/row-reverse-wrap.html
+++ b/flexbox/wrapping/row-reverse-wrap.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/wrapping/row-wrap.html b/flexbox/wrapping/row-wrap.html
index 3d7912ea..c8de825f 100644
--- a/flexbox/wrapping/row-wrap.html
+++ b/flexbox/wrapping/row-wrap.html
@@ -62,7 +62,7 @@
       .box > * {
         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);
       }
 
       .box {
diff --git a/flexbox/wrapping/visibility-collapse.html b/flexbox/wrapping/visibility-collapse.html
index 3922494f..a904357c 100644
--- a/flexbox/wrapping/visibility-collapse.html
+++ b/flexbox/wrapping/visibility-collapse.html
@@ -68,7 +68,7 @@
       .box > * {
         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);
         padding: 10px;
       }
     </style>
diff --git a/flexbox/wrapping/wrapped-visibility-collapse.html b/flexbox/wrapping/wrapped-visibility-collapse.html
index 02ce04af..1be1c97b 100644
--- a/flexbox/wrapping/wrapped-visibility-collapse.html
+++ b/flexbox/wrapping/wrapped-visibility-collapse.html
@@ -68,7 +68,7 @@
       .box > * {
         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);
         padding: 10px;
       }
     </style>
diff --git a/grid/subgrid/adding-line-names.html b/grid/subgrid/adding-line-names.html
index 5ca5502d..74557db4 100644
--- a/grid/subgrid/adding-line-names.html
+++ b/grid/subgrid/adding-line-names.html
@@ -49,7 +49,7 @@
       }
 
       .subitem2 {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgb(0 0 0 / 0.5);
         grid-column: sub-b / sub-d;
         grid-row: 1;
       }
@@ -88,7 +88,7 @@
 }
 
 .subitem2 {
-  background-color: rgba(0,0,0,.5);
+  background-color: rgb(0 0 0 / .5);
   grid-column: sub-b / sub-d;
   grid-row: 1;
 }</textarea
diff --git a/grid/subgrid/gap.html b/grid/subgrid/gap.html
index c6e49894..f5aea822 100644
--- a/grid/subgrid/gap.html
+++ b/grid/subgrid/gap.html
@@ -49,7 +49,7 @@
       }
 
       .subitem2 {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgb(0 0 0 / 0.5);
         grid-column: 2;
         grid-row: 1;
       }
@@ -89,7 +89,7 @@
 }
 
 .subitem2 {
-  background-color: rgba(0,0,0,.5);
+  background-color: rgb(0 0 0 / .5);
   grid-column: 2;
   grid-row: 1;
 }</textarea
diff --git a/houdini/css_painting_api/example-boxbg.html b/houdini/css_painting_api/example-boxbg.html
index 1adefa9f..3e83579e 100644
--- a/houdini/css_painting_api/example-boxbg.html
+++ b/houdini/css_painting_api/example-boxbg.html
@@ -7,16 +7,16 @@
     <style>
       li {
         background-image: paint(boxbg);
-        --boxColor: hsla(55, 90%, 60%, 1);
+        --boxColor: hsl(55 90% 60%);
       }
 
       li:nth-of-type(3n) {
-        --boxColor: hsla(155, 90%, 60%, 1);
+        --boxColor: hsl(155 90% 60%);
         --widthSubtractor: 20;
       }
 
       li:nth-of-type(3n + 1) {
-        --boxColor: hsla(255, 90%, 60%, 1);
+        --boxColor: hsl(255 90% 60%);
         --widthSubtractor: 40;
       }
     </style>
diff --git a/howto/box-shadow-button.html b/howto/box-shadow-button.html
index 0633fa96..73465746 100644
--- a/howto/box-shadow-button.html
+++ b/howto/box-shadow-button.html
@@ -26,7 +26,7 @@
 
     <style class="editable">
       .shadow {
-        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.8);
+        box-shadow: 5px 5px 10px 2px rgb(0 0 0 / 0.8);
       }
     </style>
   </head>
@@ -40,7 +40,7 @@
 
     <textarea class="playable playable-css" style="height: 100px">
 .shadow {
-  box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8);
+  box-shadow: 5px 5px 10px 2px rgb(0 0 0 / .8);
 }</textarea
     >
 
diff --git a/howto/opacity.html b/howto/opacity.html
index 5e30a397..79766576 100644
--- a/howto/opacity.html
+++ b/howto/opacity.html
@@ -35,7 +35,7 @@
       }
 
       .box2 {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgb(0 0 0 / 0.5);
         color: #fff;
       }
     </style>
@@ -59,7 +59,7 @@
 }
 
 .box2 {
-  background-color: rgba(0,0,0,.5);
+  background-color: rgb(0 0 0 / .5);
   color: #fff;
 }</textarea
     >
diff --git a/howto/text-shadow.html b/howto/text-shadow.html
index f41b61a6..8829e784 100644
--- a/howto/text-shadow.html
+++ b/howto/text-shadow.html
@@ -21,7 +21,7 @@
     <style class="editable">
       h1 {
         color: royalblue;
-        text-shadow: 2px 4px 4px rgba(46, 91, 173, 0.6);
+        text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
       }
     </style>
   </head>
@@ -36,7 +36,7 @@ <h1>Adding a shadow to text</h1>
     <textarea class="playable playable-css" style="height: 100px">
 h1 {
   color: royalblue;
-  text-shadow: 2px 4px 4px rgba(46,91,173,0.6);
+  text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
 }</textarea
     >
 
diff --git a/logical/border-longhands.html b/logical/border-longhands.html
index f2f77aaa..20cf6ac8 100644
--- a/logical/border-longhands.html
+++ b/logical/border-longhands.html
@@ -11,7 +11,7 @@
       }
       .box {
         border-radius: 5px;
-        background-color: rgba(96, 139, 168, 0.2);
+        background-color: rgb(96 139 168 / 0.2);
         margin: 10px;
         width: 220px;
         height: 220px;
diff --git a/logical/float.html b/logical/float.html
index b8327c1b..4a904fab 100644
--- a/logical/float.html
+++ b/logical/float.html
@@ -13,7 +13,7 @@
       .box {
         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);
         padding: 10px;
         margin: 10px;
         width: 100px;
diff --git a/logical/intro-feature-queries.html b/logical/intro-feature-queries.html
index 9b9cf0e3..45df599f 100644
--- a/logical/intro-feature-queries.html
+++ b/logical/intro-feature-queries.html
@@ -16,8 +16,8 @@
 
       .grid > * {
         border-radius: 5px;
-        border: 2px solid rgba(96, 139, 168, 0.4);
-        background-color: rgba(96, 139, 168, 0.2);
+        border: 2px solid rgb(96 139 168 / 0.4);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
 
diff --git a/logical/intro-grid-example.html b/logical/intro-grid-example.html
index efaf0fb4..698d1919 100644
--- a/logical/intro-grid-example.html
+++ b/logical/intro-grid-example.html
@@ -16,8 +16,8 @@
 
       .grid > * {
         border-radius: 5px;
-        border: 2px solid rgba(96, 139, 168, 0.4);
-        background-color: rgba(96, 139, 168, 0.2);
+        border: 2px solid rgb(96 139 168 / 0.4);
+        background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
       }
 
diff --git a/logical/margin-longhands.html b/logical/margin-longhands.html
index 99dea384..e76ca0a5 100644
--- a/logical/margin-longhands.html
+++ b/logical/margin-longhands.html
@@ -15,7 +15,7 @@
       .box {
         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);
         padding: 10px;
         width: 220px;
         height: 220px;
diff --git a/logical/padding-longhands.html b/logical/padding-longhands.html
index 1c482a96..8b96abcf 100644
--- a/logical/padding-longhands.html
+++ b/logical/padding-longhands.html
@@ -12,7 +12,7 @@
       .box {
         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);
         margin: 10px;
         width: 220px;
         height: 220px;
diff --git a/logical/positioning-inset.html b/logical/positioning-inset.html
index 8d09853c..1713872d 100644
--- a/logical/positioning-inset.html
+++ b/logical/positioning-inset.html
@@ -20,7 +20,7 @@
       .box {
         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);
         padding: 10px;
         width: 100px;
         height: 100px;
diff --git a/logical/size-inline-block.html b/logical/size-inline-block.html
index b98315f2..ead39b8a 100644
--- a/logical/size-inline-block.html
+++ b/logical/size-inline-block.html
@@ -12,7 +12,7 @@
       .box {
         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);
         padding: 10px;
         margin: 10px;
       }
diff --git a/logical/size-max.html b/logical/size-max.html
index fbdd2020..cf6ecdb3 100644
--- a/logical/size-max.html
+++ b/logical/size-max.html
@@ -12,7 +12,7 @@
       .box {
         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);
         padding: 10px;
         margin: 10px;
       }
diff --git a/logical/size-min.html b/logical/size-min.html
index 9b2c6955..de7925c2 100644
--- a/logical/size-min.html
+++ b/logical/size-min.html
@@ -12,7 +12,7 @@
       .box {
         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);
         padding: 10px;
         margin: 10px;
       }
diff --git a/logical/size-resize.html b/logical/size-resize.html
index a887d52d..752e4a8f 100644
--- a/logical/size-resize.html
+++ b/logical/size-resize.html
@@ -12,7 +12,7 @@
       .box {
         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);
         padding: 10px;
         margin: 10px;
         overflow: scroll;
diff --git a/modules/animation.html b/modules/animation.html
index 36611e87..be216cd2 100644
--- a/modules/animation.html
+++ b/modules/animation.html
@@ -141,7 +141,7 @@
         box-shadow:
           5px 15px 15px white,
           -5px 15px 15px white,
-          0 20px 20px rgba(125 125 125 / 0.5);
+          0 20px 20px rgb(125 125 125 / 0.5);
         animation:
           clouds ease 5s alternate infinite 0.2s,
           wind ease-out 4s alternate infinite;
diff --git a/modules/backgrounds.html b/modules/backgrounds.html
index 6f9923b0..8e74ac3d 100644
--- a/modules/backgrounds.html
+++ b/modules/backgrounds.html
@@ -33,10 +33,10 @@
           120px 120px;
         background-clip: content-box, content-box, padding-box;
         box-shadow:
-          inset 5px 5px 5px rgba(0, 0, 0, 0.4),
-          inset -5px -5px 5px rgba(0, 0, 0, 0.4),
-          5px 5px 5px rgba(0, 0, 0, 0.4),
-          -5px -5px 5px rgba(0, 0, 0, 0.4);
+          inset 5px 5px 5px rgb(0 0 0 / 0.4),
+          inset -5px -5px 5px rgb(0 0 0 / 0.4),
+          5px 5px 5px rgb(0 0 0 / 0.4),
+          -5px -5px 5px rgb(0 0 0 / 0.4);
       }
       div:first-of-type {
         border-radius: 0;
diff --git a/modules/transforms.html b/modules/transforms.html
index 4e3b7fad..1bc26495 100644
--- a/modules/transforms.html
+++ b/modules/transforms.html
@@ -1,487 +1,487 @@
-<!doctype html>
-<html lang="en-us">
-
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>CSS Transforms</title>
-    <style>
-        #allTransformFieldset {
-            border: none;
-            padding: 0;
-            margin-bottom: 4px;
-            accent-color: blue; /* or any color */
-            font-family: Inter, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-        }
-
-        #allTransformFieldset>legend {
-            margin-bottom: 4px;
-        }
-
-        fieldset {
-            margin: 0;
-        }
-
-        legend {
-            font-weight: bold;
-            padding: 0;
-        }
-
-        #fieldsetSection {
-            display: flex;
-            flex-wrap: wrap;
-            align-items: start;
-            gap: 8px;
-        }
-
-        #outputSection {
-            width: 100%;
-            min-height: 400px;
-            background: linear-gradient(skyblue, khaki);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            overflow: clip;
-        }
-
-        #outputContainer {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            perspective: 200px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            transform-style: preserve-3d;
-            pointer-events: none;
-        }
-
-        #z0 {
-            width: 50px;
-            height: 50px;
-            background: linear-gradient(to right bottom, rgb(223, 223, 223), rgb(190, 190, 190));
-            transform: translateZ(0px);
-            position: absolute;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            color: black;
-            border-radius: 50%;
-            outline: 1px solid rgba(0, 0, 0, 0.35);
-            pointer-events: all;
-        }
-
-        #perspectiveDot {
-            width: 4px;
-            height: 4px;
-            border-radius: 50%;
-            background-color: rgba(240, 0, 0, 0.5);
-            transform: translate3d(-2px, -2px, 0px);
-            position: absolute;
-        }
-
-        #cube {
-            width: 100px;
-            height: 100px;
-            transform-style: preserve-3d;
-            transition: all 0.075s ease-out;
-            position: absolute;
-            pointer-events: all;
-        }
-
-        .face {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            backface-visibility: inherit;
-            font-size: 60px;
-            color: white;
-        }
-
-        .front {
-            background: rgba(90, 90, 90, 0.7);
-            transform: translateZ(50px);
-        }
-
-        .back {
-            background: rgba(0, 210, 0, 0.7);
-            transform: rotateY(180deg) translateZ(50px);
-        }
-
-        .right {
-            background: rgba(210, 0, 0, 0.7);
-            transform: rotateY(90deg) translateZ(50px);
-        }
-
-        .left {
-            background: rgba(0, 0, 210, 0.7);
-            transform: rotateY(-90deg) translateZ(50px);
-        }
-
-        .top {
-            background: rgba(210, 210, 0, 0.7);
-            transform: rotateX(90deg) translateZ(50px);
-        }
-
-        .bottom {
-            background: rgba(210, 0, 210, 0.7);
-            transform: rotateX(-90deg) translateZ(50px);
-        }
-
-        .transformFieldset {
-            margin: 0;
-        }
-
-        .controlsContainer {
-            display: flex;
-            flex-direction: column;
-            align-items: start;
-            gap: 4px;
-        }
-
-        .controlsContainer {
-            width: 100%;
-        }
-
-        .controlsContainer>div {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .controlsContainer>div>label {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            gap: 4px;
-        }
-
-        button {
-            font-size: 18px;
-            border-radius: 50%;
-            border: #ccc solid 1px;
-            padding: 0;
-            width: 26px;
-            height: 26px;
-            margin-left: 4px;
-        }
-
-        input[type='range'] {
-            width: 172px;
-        }
-
-        output {
-            width: 3em;
-        }
-    </style>
-</head>
-
-<body>
-    <article>
-        <fieldset id="allTransformFieldset">
-            <legend>Transform settings
-                <button id="resetAllButton" aria-label="Reset">↻</button>
-            </legend>
-            <section id="fieldsetSection">
-                <fieldset class="transformFieldset">
-                    <legend>
-                        <label>
-                            <span>Translation</span>
-                        </label>
-                        <button id="translateSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
-                    </legend>
-                    <div class="controlsContainer">
-                        <div>
-                            <label>
-                                <span id="translateXLabel">X</span>
-                                <input type="range" min="-100" max="100" value="0" data-default="0" id="translateXRange" aria-labelledby="translateXLabel" />
-                            </label>
-                            <output id="translateXOutput" for="translateXRange"></output>
-                        </div>
-                        <div>
-                            <label>
-                                <span id="translateYLabel">Y</span>
-                                <input type="range" min="-100" max="100" value="0" data-default="0" id="translateYRange" aria-labelledby="translateYLabel" />
-                            </label>
-                            <output id="translateYOutput" for="translateYRange"></output>
-                        </div>
-                        <div>
-                            <label>
-                                <span id="translateZLabel">Z</span>
-                                <input type="range" min="-100" max="100" value="0" data-default="0" id="translateZRange" aria-labelledby="translateZLabel" />
-                            </label>
-                            <output id="translateZOutput" for="translateZRange"></output>
-                        </div>
-                    </div>
-                </fieldset>
-
-                <fieldset class="transformFieldset">
-                    <legend>
-                        <label>
-                            <span>Rotation</span>
-                        </label>
-                        <button id="rotateSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
-                    </legend>
-                    <div class="controlsContainer">
-                        <div>
-                            <label>
-                                <span id="rotateXLabel">X</span>
-                                <input type="range" min="-360" max="360" value="0" data-default="0" id="rotateXRange" aria-labelledby="rotateXLabel" />
-                            </label>
-                            <output id="rotateXOutput" for="rotateXRange"></output>
-                        </div>
-                        <div>
-                            <label>
-                                <span id="rotateYLabel">Y</span>
-                                <input type="range" min="-360" max="360" value="0" data-default="0" id="rotateYRange" aria-labelledby="rotateYLabel" />
-                            </label>
-                            <output id="rotateYOutput" for="rotateYRange"></output>
-                        </div>
-                        <div>
-                            <label>
-                                <span id="rotateZLabel">Z</span>
-                                <input type="range" min="-360" max="360" value="0" data-default="0" id="rotateZRange" aria-labelledby="rotateZLabel" />
-                            </label>
-                            <output id="rotateZOutput" for="rotateZRange"></output>
-                        </div>
-                    </div>
-                </fieldset>
-
-                <fieldset class="transformFieldset">
-                    <legend>
-                        <label>
-                            <span>Scale</span>
-                        </label>
-                        <button id="scaleSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
-                    </legend>
-                    <div class="controlsContainer">
-                        <div>
-                            <label>
-                                <span id="scaleXLabel">X</span>
-                                <input type="range" min="0.1" max="2.5" value="1" data-default="1" step="0.1" id="scaleXRange" aria-labelledby="scaleXLabel" />
-                            </label>
-                            <output id="scaleXOutput" for="scaleXRange"></output>
-                        </div>
-                        <div>
-                            <label id="scaleYLabel">
-                                <span>Y</span>
-                                <input type="range" min="0.1" max="2.5" value="1" data-default="1" step="0.1" id="scaleYRange" aria-labelledby="scaleYLabel" />
-                            </label>
-                            <output id="scaleYOutput" for="scaleYRange"></output>
-                        </div>
-                        <div>
-                            <label id="scaleZLabel">
-                                <span>Z</span>
-                                <input type="range" min="0.1" max="2.5" value="1" data-default="1" step="0.1" id="scaleZRange" aria-labelledby="scaleZLabel" />
-                            </label>
-                            <output id="scaleZOutput" for="scaleZRange"></output>
-                        </div>
-                    </div>
-                </fieldset>
-
-                <fieldset class="transformFieldset">
-                    <legend>
-                        <label>
-                            <span>Skew</span>
-                        </label>
-                        <button id="skewSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
-                    </legend>
-                    <div class="controlsContainer">
-                        <div>
-                            <label>
-                                <span id="skewXLabel">X</span>
-                                <input type="range" min="-90" max="90" value="0" data-default="0" id="skewXRange" aria-labelledby="skewXLabel" />
-                            </label>
-                            <output id="skewXOutput" for="skewXRange"></output>
-                        </div>
-                        <div>
-                            <label>
-                                <span id="skewYLabel">Y</span>
-                                <input type="range" min="-90" max="90" value="0" data-default="0" id="skewYRange" aria-labelledby="skewYLabel" />
-                            </label>
-                            <output id="skewYOutput" for="skewYRange"></output>
-                        </div>
-                    </div>
-                </fieldset>
-                
-                <fieldset class="transformFieldset">
-                    <legend>
-                        <label>
-                            <span>Container Perspective</span>
-                        </label>
-                        <button id="containerPerspectiveSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
-                    </legend>
-                    <div class="controlsContainer">
-                        <div>
-                            <label>
-                                <span id="perspectiveLabel"><code>perspective</code></span>
-                                <input type="range" min="75" max="500" value="200" data-default="200" id="perspectiveRange" aria-labelledby="perspectiveLabel" />
-                            </label>
-                            <output id="perspectiveOutput" for="perspectiveRange"></output>
-                        </div>
-                        <div>
-                            <label>
-                                <span id="perspectiveOriginXLabel"><code>perspective-origin</code> X (%)</span>
-                                <input type="range" min="0" max="100" value="50" data-default="50" id="perspectiveOriginXRange" aria-labelledby="perspectiveOriginXLabel" />
-                            </label>
-                            <output id="perspectiveOriginXOutput" for="perspectiveOriginXRange"></output>
-                        </div>
-                        <div>
-                            <label>
-                                <span><code>perspective-origin</code> Y (%)</span>
-                                <input type="range" min="0" max="100" value="50" data-default="50" id="perspectiveOriginYRange" aria-labelledby="perspectiveOriginYLabel" />
-                            </label>
-                            <output id="perspectiveOriginYOutput" for="perspectiveOriginYRange"></output>
-                        </div>
-                    </div>
-                </fieldset>
-                
-                <fieldset class="transformFieldset">
-                    <legend>
-                        <label>
-                            <span>Other Properties</span>
-                        </label>
-                        <button id="otherSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
-                    </legend>
-                    <div class="controlsContainer">
-                        <div>
-                            <label>
-                                <span><code>backface-visibility</code></span>
-                                <input type="checkbox" checked="checked" data-default="checked" id="backfaceVisibilityCheckbox" />
-                            </label>
-                        </div>
-                    </div>
-                </fieldset>
-            </section>
-        </fieldset>
-        <section id="outputSection">
-            <div id="outputContainer">
-                <div id="cube">
-                    <div class="face front">1</div>
-                    <div class="face back">2</div>
-                    <div class="face right">3</div>
-                    <div class="face left">4</div>
-                    <div class="face top">5</div>
-                    <div class="face bottom">6</div>
-                </div>
-                <div id="z0"><code>z:0px</code></div>
-            </div>
-            <div id="perspectiveDot"></div>
-        </section>
-    </article>
-    <script>
-        allTransformFieldset.querySelectorAll("input[type='range']").forEach((rangeInput) => {
-            // Event listeners for when the range inputs change
-            rangeInput.addEventListener("input", (el) => {
-                updateTransform();
-            });
-
-            // Reset the relevant transform setting when the range input is double clicked
-            rangeInput.addEventListener("dblclick", (el) => {
-                resetInput(el.target);
-                updateTransform();
-            });
-        });
-
-        // Event listeners for when checkbox inputs change
-        allTransformFieldset.querySelectorAll("input[type='checkbox']").forEach((checkboxInput) => {
-            checkboxInput.addEventListener("input", (el) => {
-                updateTransform();
-            });
-        });
-        
-        // "Reset All" button event listener
-        resetAllButton.addEventListener("click", () => {
-            allTransformFieldset.querySelectorAll('input').forEach((input) => {
-                resetInput(input);
-            });
-            updateTransform();
-        });
-
-        // Section reset button event listeners
-        allTransformFieldset.querySelectorAll(".resetSectionButton").forEach((resetSectionButton) => {
-            resetSectionButton.addEventListener("click", (el) => {
-                let allRanges = el.target.parentElement.parentElement.querySelectorAll("input[type='range']");
-                allRanges.forEach((range) => {
-                    resetInput(range);
-                });
-
-                let allCheckboxes = el.target.parentElement.parentElement.querySelectorAll("input[type='checkbox']");
-                allCheckboxes.forEach((check) => {
-                    resetInput(check);
-                });
-
-                updateTransform();
-            });
-        });
-
-        const resetInput = (inputEl) => {
-            if (!inputEl) {
-                console.warn(`inputEl \`${inputEl}\` is falsey!`);
-                console.trace();
-                return;
-            }
-
-            const defaultValue = inputEl.getAttribute("data-default");
-            if (inputEl.getAttribute('type') === 'checkbox') {
-                inputEl.checked = defaultValue === "checked";
-            } else {
-                inputEl.value = defaultValue || "0";
-            }
-        }
-
-        const updateOutputs = () => {
-            translateXOutput.value = `${parseInt(translateXRange.value)}px`;
-            translateYOutput.value = `${parseInt(translateYRange.value)}px`;
-            translateZOutput.value = `${parseInt(translateZRange.value)}px`;
-            
-            rotateXOutput.value = `${parseInt(rotateXRange.value)}°`;
-            rotateYOutput.value = `${parseInt(rotateYRange.value)}°`;
-            rotateZOutput.value = `${parseInt(rotateZRange.value)}°`;
-            
-            scaleXOutput.value = `${parseFloat(scaleXRange.value)}x`;
-            scaleYOutput.value = `${parseFloat(scaleYRange.value)}x`;
-            scaleZOutput.value = `${parseFloat(scaleZRange.value)}x`;
-            
-            skewXOutput.value = `${parseFloat(skewXRange.value)}°`;
-            skewYOutput.value = `${parseFloat(skewYRange.value)}°`;
-
-            perspectiveOutput.value = `${parseInt(perspectiveRange.value)}px`;
-
-            perspectiveOriginXOutput.value = `${parseInt(perspectiveOriginXRange.value)}%`;
-            perspectiveOriginYOutput.value = `${parseInt(perspectiveOriginYRange.value)}%`;
-        }
-
-        const updateTransform = () => {
-            updateOutputs();
-
-            cube.style.transform = `translate3d(${translateXRange.value}px,
-                ${translateYRange.value}px,
-                ${translateZRange.value}px)
-                rotateX(${rotateXRange.value}deg)
-                rotateY(${rotateYRange.value}deg)
-                rotateZ(${rotateZRange.value}deg)
-                scale3d(${scaleXRange.value},
-                ${scaleYRange.value},
-                ${scaleZRange.value})
-                skewX(${skewXRange.value}deg)
-                skewY(${skewYRange.value}deg)`;
-            cube.style.backfaceVisibility = `${backfaceVisibilityCheckbox.checked ? 'visible' : 'hidden'}`;
-            
-            outputContainer.style.perspective = `${perspectiveRange.value}px`;
-            outputContainer.style.perspectiveOrigin = `${perspectiveOriginXRange.value}% ${perspectiveOriginYRange.value}%`;
-
-            perspectiveDot.style.top = `${perspectiveOriginYRange.value}%`;
-            perspectiveDot.style.left = `${perspectiveOriginXRange.value}%`;
-        }
-        updateTransform();
-    </script>
-</body>
-
-</html>
\ No newline at end of file
+<!doctype html>
+<html lang="en-us">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>CSS Transforms</title>
+    <style>
+        #allTransformFieldset {
+            border: none;
+            padding: 0;
+            margin-bottom: 4px;
+            accent-color: blue; /* or any color */
+            font-family: Inter, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+        }
+
+        #allTransformFieldset>legend {
+            margin-bottom: 4px;
+        }
+
+        fieldset {
+            margin: 0;
+        }
+
+        legend {
+            font-weight: bold;
+            padding: 0;
+        }
+
+        #fieldsetSection {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: start;
+            gap: 8px;
+        }
+
+        #outputSection {
+            width: 100%;
+            min-height: 400px;
+            background: linear-gradient(skyblue, khaki);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            overflow: clip;
+        }
+
+        #outputContainer {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            perspective: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transform-style: preserve-3d;
+            pointer-events: none;
+        }
+
+        #z0 {
+            width: 50px;
+            height: 50px;
+            background: linear-gradient(to right bottom, rgb(223, 223, 223), rgb(190, 190, 190));
+            transform: translateZ(0px);
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            color: black;
+            border-radius: 50%;
+            outline: 1px solid rgb(0 0 0 / 0.35);
+            pointer-events: all;
+        }
+
+        #perspectiveDot {
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background-color: rgb(240 0 0 / 0.5);
+            transform: translate3d(-2px, -2px, 0px);
+            position: absolute;
+        }
+
+        #cube {
+            width: 100px;
+            height: 100px;
+            transform-style: preserve-3d;
+            transition: all 0.075s ease-out;
+            position: absolute;
+            pointer-events: all;
+        }
+
+        .face {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            backface-visibility: inherit;
+            font-size: 60px;
+            color: white;
+        }
+
+        .front {
+            background: rgb(90 90 90 / 0.7);
+            transform: translateZ(50px);
+        }
+
+        .back {
+            background: rgb(0 210 0 / 0.7);
+            transform: rotateY(180deg) translateZ(50px);
+        }
+
+        .right {
+            background: rgb(210 0 0 / 0.7);
+            transform: rotateY(90deg) translateZ(50px);
+        }
+
+        .left {
+            background: rgb(0 0 210 / 0.7);
+            transform: rotateY(-90deg) translateZ(50px);
+        }
+
+        .top {
+            background: rgb(210 210 0 / 0.7);
+            transform: rotateX(90deg) translateZ(50px);
+        }
+
+        .bottom {
+            background: rgb(210 0 210 / 0.7);
+            transform: rotateX(-90deg) translateZ(50px);
+        }
+
+        .transformFieldset {
+            margin: 0;
+        }
+
+        .controlsContainer {
+            display: flex;
+            flex-direction: column;
+            align-items: start;
+            gap: 4px;
+        }
+
+        .controlsContainer {
+            width: 100%;
+        }
+
+        .controlsContainer>div {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .controlsContainer>div>label {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 4px;
+        }
+
+        button {
+            font-size: 18px;
+            border-radius: 50%;
+            border: #ccc solid 1px;
+            padding: 0;
+            width: 26px;
+            height: 26px;
+            margin-left: 4px;
+        }
+
+        input[type='range'] {
+            width: 172px;
+        }
+
+        output {
+            width: 3em;
+        }
+    </style>
+</head>
+
+<body>
+    <article>
+        <fieldset id="allTransformFieldset">
+            <legend>Transform settings
+                <button id="resetAllButton" aria-label="Reset">↻</button>
+            </legend>
+            <section id="fieldsetSection">
+                <fieldset class="transformFieldset">
+                    <legend>
+                        <label>
+                            <span>Translation</span>
+                        </label>
+                        <button id="translateSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
+                    </legend>
+                    <div class="controlsContainer">
+                        <div>
+                            <label>
+                                <span id="translateXLabel">X</span>
+                                <input type="range" min="-100" max="100" value="0" data-default="0" id="translateXRange" aria-labelledby="translateXLabel" />
+                            </label>
+                            <output id="translateXOutput" for="translateXRange"></output>
+                        </div>
+                        <div>
+                            <label>
+                                <span id="translateYLabel">Y</span>
+                                <input type="range" min="-100" max="100" value="0" data-default="0" id="translateYRange" aria-labelledby="translateYLabel" />
+                            </label>
+                            <output id="translateYOutput" for="translateYRange"></output>
+                        </div>
+                        <div>
+                            <label>
+                                <span id="translateZLabel">Z</span>
+                                <input type="range" min="-100" max="100" value="0" data-default="0" id="translateZRange" aria-labelledby="translateZLabel" />
+                            </label>
+                            <output id="translateZOutput" for="translateZRange"></output>
+                        </div>
+                    </div>
+                </fieldset>
+
+                <fieldset class="transformFieldset">
+                    <legend>
+                        <label>
+                            <span>Rotation</span>
+                        </label>
+                        <button id="rotateSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
+                    </legend>
+                    <div class="controlsContainer">
+                        <div>
+                            <label>
+                                <span id="rotateXLabel">X</span>
+                                <input type="range" min="-360" max="360" value="0" data-default="0" id="rotateXRange" aria-labelledby="rotateXLabel" />
+                            </label>
+                            <output id="rotateXOutput" for="rotateXRange"></output>
+                        </div>
+                        <div>
+                            <label>
+                                <span id="rotateYLabel">Y</span>
+                                <input type="range" min="-360" max="360" value="0" data-default="0" id="rotateYRange" aria-labelledby="rotateYLabel" />
+                            </label>
+                            <output id="rotateYOutput" for="rotateYRange"></output>
+                        </div>
+                        <div>
+                            <label>
+                                <span id="rotateZLabel">Z</span>
+                                <input type="range" min="-360" max="360" value="0" data-default="0" id="rotateZRange" aria-labelledby="rotateZLabel" />
+                            </label>
+                            <output id="rotateZOutput" for="rotateZRange"></output>
+                        </div>
+                    </div>
+                </fieldset>
+
+                <fieldset class="transformFieldset">
+                    <legend>
+                        <label>
+                            <span>Scale</span>
+                        </label>
+                        <button id="scaleSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
+                    </legend>
+                    <div class="controlsContainer">
+                        <div>
+                            <label>
+                                <span id="scaleXLabel">X</span>
+                                <input type="range" min="0.1" max="2.5" value="1" data-default="1" step="0.1" id="scaleXRange" aria-labelledby="scaleXLabel" />
+                            </label>
+                            <output id="scaleXOutput" for="scaleXRange"></output>
+                        </div>
+                        <div>
+                            <label id="scaleYLabel">
+                                <span>Y</span>
+                                <input type="range" min="0.1" max="2.5" value="1" data-default="1" step="0.1" id="scaleYRange" aria-labelledby="scaleYLabel" />
+                            </label>
+                            <output id="scaleYOutput" for="scaleYRange"></output>
+                        </div>
+                        <div>
+                            <label id="scaleZLabel">
+                                <span>Z</span>
+                                <input type="range" min="0.1" max="2.5" value="1" data-default="1" step="0.1" id="scaleZRange" aria-labelledby="scaleZLabel" />
+                            </label>
+                            <output id="scaleZOutput" for="scaleZRange"></output>
+                        </div>
+                    </div>
+                </fieldset>
+
+                <fieldset class="transformFieldset">
+                    <legend>
+                        <label>
+                            <span>Skew</span>
+                        </label>
+                        <button id="skewSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
+                    </legend>
+                    <div class="controlsContainer">
+                        <div>
+                            <label>
+                                <span id="skewXLabel">X</span>
+                                <input type="range" min="-90" max="90" value="0" data-default="0" id="skewXRange" aria-labelledby="skewXLabel" />
+                            </label>
+                            <output id="skewXOutput" for="skewXRange"></output>
+                        </div>
+                        <div>
+                            <label>
+                                <span id="skewYLabel">Y</span>
+                                <input type="range" min="-90" max="90" value="0" data-default="0" id="skewYRange" aria-labelledby="skewYLabel" />
+                            </label>
+                            <output id="skewYOutput" for="skewYRange"></output>
+                        </div>
+                    </div>
+                </fieldset>
+
+                <fieldset class="transformFieldset">
+                    <legend>
+                        <label>
+                            <span>Container Perspective</span>
+                        </label>
+                        <button id="containerPerspectiveSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
+                    </legend>
+                    <div class="controlsContainer">
+                        <div>
+                            <label>
+                                <span id="perspectiveLabel"><code>perspective</code></span>
+                                <input type="range" min="75" max="500" value="200" data-default="200" id="perspectiveRange" aria-labelledby="perspectiveLabel" />
+                            </label>
+                            <output id="perspectiveOutput" for="perspectiveRange"></output>
+                        </div>
+                        <div>
+                            <label>
+                                <span id="perspectiveOriginXLabel"><code>perspective-origin</code> X (%)</span>
+                                <input type="range" min="0" max="100" value="50" data-default="50" id="perspectiveOriginXRange" aria-labelledby="perspectiveOriginXLabel" />
+                            </label>
+                            <output id="perspectiveOriginXOutput" for="perspectiveOriginXRange"></output>
+                        </div>
+                        <div>
+                            <label>
+                                <span><code>perspective-origin</code> Y (%)</span>
+                                <input type="range" min="0" max="100" value="50" data-default="50" id="perspectiveOriginYRange" aria-labelledby="perspectiveOriginYLabel" />
+                            </label>
+                            <output id="perspectiveOriginYOutput" for="perspectiveOriginYRange"></output>
+                        </div>
+                    </div>
+                </fieldset>
+
+                <fieldset class="transformFieldset">
+                    <legend>
+                        <label>
+                            <span>Other Properties</span>
+                        </label>
+                        <button id="otherSectionReset" class="resetSectionButton" aria-label="Reset">↻</button>
+                    </legend>
+                    <div class="controlsContainer">
+                        <div>
+                            <label>
+                                <span><code>backface-visibility</code></span>
+                                <input type="checkbox" checked="checked" data-default="checked" id="backfaceVisibilityCheckbox" />
+                            </label>
+                        </div>
+                    </div>
+                </fieldset>
+            </section>
+        </fieldset>
+        <section id="outputSection">
+            <div id="outputContainer">
+                <div id="cube">
+                    <div class="face front">1</div>
+                    <div class="face back">2</div>
+                    <div class="face right">3</div>
+                    <div class="face left">4</div>
+                    <div class="face top">5</div>
+                    <div class="face bottom">6</div>
+                </div>
+                <div id="z0"><code>z:0px</code></div>
+            </div>
+            <div id="perspectiveDot"></div>
+        </section>
+    </article>
+    <script>
+        allTransformFieldset.querySelectorAll("input[type='range']").forEach((rangeInput) => {
+            // Event listeners for when the range inputs change
+            rangeInput.addEventListener("input", (el) => {
+                updateTransform();
+            });
+
+            // Reset the relevant transform setting when the range input is double clicked
+            rangeInput.addEventListener("dblclick", (el) => {
+                resetInput(el.target);
+                updateTransform();
+            });
+        });
+
+        // Event listeners for when checkbox inputs change
+        allTransformFieldset.querySelectorAll("input[type='checkbox']").forEach((checkboxInput) => {
+            checkboxInput.addEventListener("input", (el) => {
+                updateTransform();
+            });
+        });
+
+        // "Reset All" button event listener
+        resetAllButton.addEventListener("click", () => {
+            allTransformFieldset.querySelectorAll('input').forEach((input) => {
+                resetInput(input);
+            });
+            updateTransform();
+        });
+
+        // Section reset button event listeners
+        allTransformFieldset.querySelectorAll(".resetSectionButton").forEach((resetSectionButton) => {
+            resetSectionButton.addEventListener("click", (el) => {
+                let allRanges = el.target.parentElement.parentElement.querySelectorAll("input[type='range']");
+                allRanges.forEach((range) => {
+                    resetInput(range);
+                });
+
+                let allCheckboxes = el.target.parentElement.parentElement.querySelectorAll("input[type='checkbox']");
+                allCheckboxes.forEach((check) => {
+                    resetInput(check);
+                });
+
+                updateTransform();
+            });
+        });
+
+        const resetInput = (inputEl) => {
+            if (!inputEl) {
+                console.warn(`inputEl \`${inputEl}\` is falsey!`);
+                console.trace();
+                return;
+            }
+
+            const defaultValue = inputEl.getAttribute("data-default");
+            if (inputEl.getAttribute('type') === 'checkbox') {
+                inputEl.checked = defaultValue === "checked";
+            } else {
+                inputEl.value = defaultValue || "0";
+            }
+        }
+
+        const updateOutputs = () => {
+            translateXOutput.value = `${parseInt(translateXRange.value)}px`;
+            translateYOutput.value = `${parseInt(translateYRange.value)}px`;
+            translateZOutput.value = `${parseInt(translateZRange.value)}px`;
+
+            rotateXOutput.value = `${parseInt(rotateXRange.value)}°`;
+            rotateYOutput.value = `${parseInt(rotateYRange.value)}°`;
+            rotateZOutput.value = `${parseInt(rotateZRange.value)}°`;
+
+            scaleXOutput.value = `${parseFloat(scaleXRange.value)}x`;
+            scaleYOutput.value = `${parseFloat(scaleYRange.value)}x`;
+            scaleZOutput.value = `${parseFloat(scaleZRange.value)}x`;
+
+            skewXOutput.value = `${parseFloat(skewXRange.value)}°`;
+            skewYOutput.value = `${parseFloat(skewYRange.value)}°`;
+
+            perspectiveOutput.value = `${parseInt(perspectiveRange.value)}px`;
+
+            perspectiveOriginXOutput.value = `${parseInt(perspectiveOriginXRange.value)}%`;
+            perspectiveOriginYOutput.value = `${parseInt(perspectiveOriginYRange.value)}%`;
+        }
+
+        const updateTransform = () => {
+            updateOutputs();
+
+            cube.style.transform = `translate3d(${translateXRange.value}px,
+                ${translateYRange.value}px,
+                ${translateZRange.value}px)
+                rotateX(${rotateXRange.value}deg)
+                rotateY(${rotateYRange.value}deg)
+                rotateZ(${rotateZRange.value}deg)
+                scale3d(${scaleXRange.value},
+                ${scaleYRange.value},
+                ${scaleZRange.value})
+                skewX(${skewXRange.value}deg)
+                skewY(${skewYRange.value}deg)`;
+            cube.style.backfaceVisibility = `${backfaceVisibilityCheckbox.checked ? 'visible' : 'hidden'}`;
+
+            outputContainer.style.perspective = `${perspectiveRange.value}px`;
+            outputContainer.style.perspectiveOrigin = `${perspectiveOriginXRange.value}% ${perspectiveOriginYRange.value}%`;
+
+            perspectiveDot.style.top = `${perspectiveOriginYRange.value}%`;
+            perspectiveDot.style.left = `${perspectiveOriginXRange.value}%`;
+        }
+        updateTransform();
+    </script>
+</body>
+
+</html>
diff --git a/overscroll-behavior/overscroll-behavior-x.html b/overscroll-behavior/overscroll-behavior-x.html
index 4f504989..b87c70e1 100644
--- a/overscroll-behavior/overscroll-behavior-x.html
+++ b/overscroll-behavior/overscroll-behavior-x.html
@@ -11,9 +11,9 @@
         background-color: magenta;
         background-image: repeating-linear-gradient(
           to right,
-          rgba(0, 0, 0, 0) 0px,
-          rgba(0, 0, 0, 0) 19px,
-          rgba(0, 0, 0, 0.5) 20px
+          rgb(0 0 0 /  0) 0px,
+          rgb(0 0 0 /  0) 19px,
+          rgb(0 0 0 / 0.5) 20px
         );
       }
 
@@ -33,15 +33,15 @@
         background-color: yellow;
         background-image: repeating-linear-gradient(
           to right,
-          rgba(0, 0, 0, 0) 0px,
-          rgba(0, 0, 0, 0) 19px,
-          rgba(0, 0, 0, 0.5) 20px
+          rgb(0 0 0 /  0) 0px,
+          rgb(0 0 0 /  0) 19px,
+          rgb(0 0 0 / 0.5) 20px
         );
       }
 
       p {
         padding: 10px;
-        background-color: rgba(255, 0, 0, 0.5);
+        background-color: rgb(255 0 0 / 0.5);
         margin: 0;
         width: 300px;
         position: relative;
diff --git a/path/offset-path.html b/path/offset-path.html
index 454cf8b8..16e88be8 100644
--- a/path/offset-path.html
+++ b/path/offset-path.html
@@ -67,7 +67,7 @@
       .parent {
         width: 200px;
         height: 200px;
-        border: 4px solid rgba(0, 0, 0, 0.1);
+        border: 4px solid rgb(0 0 0 / 0.1);
         border-radius: 50%;
         margin: 40px;
       }
@@ -96,7 +96,7 @@
 .parent {
   width: 200px;
   height: 200px;
-  border: 4px solid rgba(0,0,0,0.1);
+  border: 4px solid rgb(0 0 0 / 0.1);
   border-radius: 50%;
   margin: 40px;
 }
diff --git a/tools/border-image-generator/styles.css b/tools/border-image-generator/styles.css
index df7c01f7..31e80ba9 100644
--- a/tools/border-image-generator/styles.css
+++ b/tools/border-image-generator/styles.css
@@ -477,7 +477,7 @@ body[data-move="Y"] {
 
 #remote-url:focus {
   box-shadow: 0px 0px 3px -1px #379b4a; /*#68ACE8; */
-  border-color: rgba(55, 155, 74, 0.5);
+  border-color: rgb(55 155 74 / 0.5);
   width: 450px;
 }
 
@@ -511,8 +511,8 @@ body[data-move="Y"] {
 }
 
 #subject .guideline {
-  background-color: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  background-color: rgb(255 255 255 / 0.7);
+  border: 1px solid rgb(0 0 0 / 0.3);
   position: absolute;
 }
 
diff --git a/tools/box-shadow-generator/styles.css b/tools/box-shadow-generator/styles.css
index 9a77a67e..3cfffa96 100644
--- a/tools/box-shadow-generator/styles.css
+++ b/tools/box-shadow-generator/styles.css
@@ -671,11 +671,11 @@ body {
   margin: 5px;
   background: url("picker_mask_200.png");
   background:
-    -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-    -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    -moz-linear-gradient(bottom, #000 0%, rgb(0 0 0 / 0) 100%),
+    -moz-linear-gradient(left, #fff 0%, rgb(255 255 255 / 0) 100%);
   background:
-    -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-    -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    -webkit-linear-gradient(bottom, #000 0%, rgb(0 0 0 / 0) 100%),
+    -webkit-linear-gradient(left, #fff 0%, rgb(255 255 255 / 0) 100%);
   background-color: #f00;
   float: left;
 }
@@ -727,8 +727,8 @@ body {
   background: url("alpha_mask.png");
   background: -moz-linear-gradient(
     left,
-    rgba(255, 0, 0, 0) 0%,
-    rgba(255, 0, 0, 1) 100%
+    rgb(255 0 0 /  0) 0%,
+    rgb(255 0 0 /  1) 100%
   );
 }
 
diff --git a/tools/color-mixer/index.html b/tools/color-mixer/index.html
index d880f313..aa083eba 100644
--- a/tools/color-mixer/index.html
+++ b/tools/color-mixer/index.html
@@ -245,20 +245,20 @@ <h3>Color mixer</h3>
             },
           },
           swatches: [
-            "rgba(244, 67, 54, 1)",
-            "rgba(233, 30, 99, 1)",
-            "rgba(156, 39, 176, 1)",
-            "rgba(103, 58, 183, 1)",
-            "rgba(63, 81, 181, 1)",
-            "rgba(33, 150, 243, 1)",
-            "rgba(3, 169, 244, 1)",
-            "rgba(0, 188, 212, 1)",
-            "rgba(0, 150, 136, 1)",
-            "rgba(76, 175, 80, 1)",
-            "rgba(139, 195, 74, 1)",
-            "rgba(205, 220, 57, 1)",
-            "rgba(255, 235, 59, 1)",
-            "rgba(255, 193, 7, 1)",
+            "rgb(244 67 54)",
+            "rgb(233 30 99)",
+            "rgb(156 39 176)",
+            "rgb(103 58 183)",
+            "rgb(63 81 181)",
+            "rgb(33 150 243)",
+            "rgb(3 169 244)",
+            "rgb(0 188 212)",
+            "rgb(0 150 136)",
+            "rgb(76 175 80)",
+            "rgb(139 195 74)",
+            "rgb(205 220 57)",
+            "rgb(255 235 59)",
+            "rgb(255 193 7)",
           ],
         };