Aggressively replacing a bunch of rgb/rgba rules.

assets/collage.css

@@ -114,7 +114,7 @@
   height: 100%;
   position: relative;
   border-radius: var(--border-radius);
-  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
+  border: var(--border-width) solid rgba(from var(--color-foreground) r g b / var(--border-opacity));
   padding: var(--image-padding);
 }
 
@@ -129,7 +129,7 @@
   z-index: -1;
   border-radius: var(--border-radius);
   box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
-    rgba(var(--color-shadow), var(--shadow-opacity));
+    rgba(from var(--color-shadow) r g b / var(--shadow-opacity));
   width: calc(var(--border-width) * 2 + 100%);
   height: calc(var(--border-width) * 2 + 100%);
   top: calc(var(--border-width) * -1);
@@ -181,13 +181,13 @@
 }
 
 .collage-card .deferred-media__poster:focus:after {
-  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
-  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  box-shadow: 0 0 0 0.3rem rgba(var(--color-background)), 0 0 0.5rem 0.4rem rgba(from var(--color-foreground) r g b / 0.3);
+  outline: 0.2rem solid rgba(from var(--color-foreground) r g b / 0.5);
 }
 
 .collage-card .deferred-media__poster:focus-visible:after {
-  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
-  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  box-shadow: 0 0 0 0.3rem rgba(var(--color-background)), 0 0 0.5rem 0.4rem rgba(from var(--color-foreground) r g b / 0.3);
+  outline: 0.2rem solid rgba(from var(--color-foreground) r g b / 0.5);
 }
 
 .collage-card .deferred-media__poster:focus:not(:focus-visible),

assets/collapsible-content.css

@@ -85,7 +85,7 @@
 }
 
 .collapsible-row-layout .accordion {
-  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
+  border: var(--text-boxes-border-width) solid rgba(from var(--color-foreground) r g b / var(--text-boxes-border-opacity));
   margin-bottom: 1.5rem;
   /* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
   transform: perspective(0);
@@ -101,7 +101,7 @@
 }
 
 .collapsible-content summary:hover {
-  background: rgba(var(--color-foreground), 0.04);
+  background: rgba(from var(--color-foreground) r g b / 0.04);
 }
 
 .collapsible-content summary:hover .accordion__title {

assets/component-accordion.css

@@ -22,8 +22,8 @@
 .accordion {
   margin-top: 2.5rem;
   margin-bottom: 0;
-  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
-  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  border-top: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.08);
+  border-bottom: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.08);
 }
 
 .accordion__title {
@@ -36,7 +36,7 @@
 
 .accordion .svg-wrapper {
   align-self: center;
-  fill: rgb(var(--color-foreground));
+  fill: rgba(var(--color-foreground));
   height: calc(var(--font-heading-scale) * 2rem);
   margin-right: calc(var(--font-heading-scale) * 1rem);
   width: calc(var(--font-heading-scale) * 2rem);

assets/component-card.css

@@ -45,7 +45,7 @@
   position: relative;
   box-sizing: border-box;
   border-radius: var(--border-radius);
-  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
+  border: var(--border-width) solid rgba(from var(--color-foreground) r g b / var(--border-opacity));
 }
 
 .card--card:after,
@@ -59,7 +59,7 @@
   left: calc(var(--border-width) * -1);
   border-radius: var(--border-radius);
   box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
-    rgba(var(--color-shadow), var(--shadow-opacity));
+    rgba(from var(--color-shadow) r g b / var(--shadow-opacity));
 }
 
 /* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
@@ -146,7 +146,7 @@
 .card-information .card__information-volume-pricing-note {
   margin-top: 0.6rem;
   line-height: calc(0.5 + 0.4 / var(--font-body-scale));
-  color: rgba(var(--color-foreground), 0.75);
+  color: rgba(from var(--color-foreground) r g b / 0.75);
 }
 
 .card__information-volume-pricing-note--button,
@@ -361,13 +361,13 @@
 }
 
 .card__heading a:focus:after {
-  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
-  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  box-shadow: 0 0 0 0.3rem rgba(var(--color-background)), 0 0 0.5rem 0.4rem rgba(from var(--color-foreground) r g b / 0.3);
+  outline: 0.2rem solid rgba(from var(--color-foreground) r g b / 0.5);
 }
 
 .card__heading a:focus-visible:after {
-  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
-  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
+  box-shadow: 0 0 0 0.3rem rgba(var(--color-background)), 0 0 0.5rem 0.4rem rgba(from var(--color-foreground) r g b / 0.3);
+  outline: 0.2rem solid rgba(from var(--color-foreground) r g b / 0.5);
 }
 
 .card__heading a:focus:not(:focus-visible):after {
@@ -471,15 +471,15 @@
 
 .card-information > * {
   line-height: calc(1 + 0.4 / var(--font-body-scale));
-  color: rgb(var(--color-foreground));
+  color: rgba(var(--color-foreground));
 }
 
 .card-information > .price {
-  color: rgb(var(--color-foreground));
+  color: rgba(var(--color-foreground));
 }
 
 .card--horizontal .card-information > .price {
-  color: rgba(var(--color-foreground), 0.75);
+  color: rgba(from var(--color-foreground) r g b / 0.75);
 }
 
 .card-information > .rating {
@@ -518,7 +518,7 @@
   background-color: transparent;
   filter: drop-shadow(
     var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
-      rgba(var(--color-shadow), var(--shadow-opacity))
+      rgba(from var(--color-shadow) r g b / var(--shadow-opacity))
   );
 }
 

assets/component-cart-drawer.css

@@ -7,7 +7,7 @@
   height: 100%;
   display: flex;
   justify-content: flex-end;
-  background-color: rgba(var(--color-foreground), 0.5);
+  background-color: rgba(from var(--color-foreground) r g b / 0.5);
   transition: visibility var(--duration-default) ease;
 }
 
@@ -20,7 +20,7 @@
   width: 40rem;
   max-width: calc(100vw - 3rem);
   padding: 0 1.5rem;
-  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  border: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.2);
   border-right: 0;
   overflow: hidden;
   display: flex;
@@ -85,11 +85,11 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {
   padding: 0;
   min-width: 4.4rem;
   min-height: 4.4rem;
-  box-shadow: 0 0 0 0.2rem rgba(var(--color-button), 0);
+  box-shadow: 0 0 0 0.2rem rgba(from var(--color-button) r g b / 0);
   position: absolute;
   top: 10px;
   right: -10px;
-  color: rgb(var(--color-foreground));
+  color: rgba(var(--color-foreground));
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -111,7 +111,7 @@ cart-drawer:not(.is-empty) .cart-drawer__collection {
 }
 
 .drawer__footer {
-  border-top: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  border-top: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.2);
   padding: 1.5rem 0;
 }
 
@@ -121,7 +121,7 @@ cart-drawer-items.is-empty + .drawer__footer {
 
 .drawer__footer > details {
   margin-top: -1.5rem;
-  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
+  border-bottom: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.2);
 }
 
 .drawer__footer > details[open] {
@@ -239,7 +239,7 @@ cart-drawer-items {
 }
 
 .cart-drawer .cart-items th {
-  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  border-bottom: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.08);
 }
 
 .cart-drawer .cart-item:last-child {
@@ -369,7 +369,7 @@ cart-drawer-items::-webkit-scrollbar {
 }
 
 cart-drawer-items::-webkit-scrollbar-thumb {
-  background-color: rgba(var(--color-foreground), 0.7);
+  background-color: rgba(from var(--color-foreground) r g b / 0.7);
   border-radius: 100px;
 }
 

assets/component-cart-items.css

@@ -140,7 +140,7 @@ cart-remove-button .button:after {
 }
 
 cart-remove-button .button:not([disabled]):hover {
-  color: rgb(var(--color-foreground));
+  color: rgba(var(--color-foreground));
 }
 
 @media screen and (min-width: 750px) {
@@ -226,7 +226,7 @@ cart-remove-button .icon-remove {
   .cart-items thead tr {
     display: flex;
     justify-content: space-between;
-    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
+    border-bottom: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.2);
     margin-bottom: 4rem;
   }
 
@@ -274,7 +274,7 @@ cart-remove-button .icon-remove {
   }
 
   .cart-items th {
-    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+    border-bottom: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.08);
   }
 
   .cart-items thead th:first-child {

assets/component-cart-notification.css

@@ -9,7 +9,7 @@
 .cart-notification {
   border-bottom-right-radius: var(--popup-corner-radius);
   border-bottom-left-radius: var(--popup-corner-radius);
-  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
+  border-color: rgba(from var(--color-foreground) r g b / var(--popup-border-opacity));
   border-style: solid;
   border-width: 0 0 var(--popup-border-width);
   padding: 2.5rem 3.5rem;
@@ -19,20 +19,20 @@
   visibility: hidden;
   width: 100%;
   box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
-    rgba(var(--color-shadow), var(--popup-shadow-opacity));
+    rgba(from var(--color-shadow) r g b / var(--popup-shadow-opacity));
   z-index: -1;
 }
 
 .cart-notification.focused {
   box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3),
     var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
-      rgba(var(--color-shadow), var(--popup-shadow-opacity));
+      rgba(from var(--color-shadow) r g b / var(--popup-shadow-opacity));
 }
 
 .cart-notification:focus-visible {
   box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3),
     var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
-      rgba(var(--color-shadow), var(--popup-shadow-opacity));
+      rgba(from var(--color-shadow) r g b / var(--popup-shadow-opacity));
 }
 
 @media screen and (min-width: 750px) {
@@ -77,7 +77,7 @@
 }
 
 .cart-notification__heading .icon-checkmark {
-  color: rgb(var(--color-foreground));
+  color: rgba(var(--color-foreground));
   margin-right: 1rem;
   width: 1.3rem;
 }

assets/component-cart.css

@@ -58,7 +58,7 @@ cart-items {
 .cart__items {
   position: relative;
   padding-bottom: 3rem;
-  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
+  border-bottom: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.08);
 }
 
 .cart__items--disabled {
@@ -93,7 +93,7 @@ cart-items {
   line-height: 1;
   height: 1.8rem;
   top: -3rem;
-  color: rgba(var(--color-foreground), 0.75);
+  color: rgba(from var(--color-foreground) r g b / 0.75);
 }
 
 .cart__note .field__input {

assets/component-collection-hero.css

@@ -71,10 +71,10 @@
 }
 
 .collection-hero__image-container {
-  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
+  border: var(--media-border-width) solid rgba(from var(--color-foreground) r g b / var(--media-border-opacity));
   border-radius: var(--media-radius);
   box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
-    rgba(var(--color-shadow), var(--media-shadow-opacity));
+    rgba(from var(--color-shadow) r g b / var(--media-shadow-opacity));
 }
 
 @media screen and (max-width: 749px) {

assets/component-complementary-products.css

@@ -69,7 +69,7 @@ product-recommendations.is-accordion + .accordion {
 }
 
 .complementary-products > .summary__title .icon-accordion {
-  fill: rgb(var(--color-foreground));
+  fill: rgba(var(--color-foreground));
   height: calc(var(--font-heading-scale) * 2rem);
   margin-right: calc(var(--font-heading-scale) * 1rem);
   width: calc(var(--font-heading-scale) * 2rem);

assets/component-deferred-media.css

@@ -36,17 +36,17 @@
 
 .deferred-media__poster:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)),
-    0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)),
-    0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground), 0.5);
+  box-shadow: 0 0 0 var(--media-border-width) rgba(from var(--color-foreground) r g b / var(--media-border-opacity)),
+    0 0 0 calc(var(--media-border-width) + 0.3rem) rgba(var(--color-background)),
+    0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(from var(--color-foreground) r g b / 0.5);
   border-radius: calc(var(--media-radius) - var(--media-border-width));
 }
 
 .deferred-media__poster:focus {
   outline: none;
   box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)),
-    0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)),
-    0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground), 0.5);
+    0 0 0 calc(var(--media-border-width) + 0.3rem) rgba(var(--color-background)),
+    0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(from var(--color-foreground) r g b / 0.5);
   border-radius: calc(var(--media-radius) - var(--media-border-width));
 }
 
@@ -67,10 +67,10 @@
 }
 
 .deferred-media__poster-button {
-  background-color: rgb(var(--color-background));
-  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
+  background-color: rgba(var(--color-background));
+  border: 0.1rem solid rgba(from var(--color-foreground) r g b / 0.1);
   border-radius: 50%;
-  color: rgb(var(--color-foreground));
+  color: rgba(var(--color-foreground));
   display: flex;
   align-items: center;
   justify-content: center;

assets/component-discounts.css

@@ -9,7 +9,7 @@
 }
 
 .discounts__discount svg {
-  color: rgba(var(--color-button), var(--alpha-button-background));
+  color: rgba(from var(--color-button) r g b / var(--alpha-button-background));
 }
 
 .discounts__discount--position {
@@ -23,7 +23,7 @@
 }
 
 .discounts__discount > .icon {
-  color: rgb(var(--color-foreground));
+  color: rgba(var(--color-foreground));
   width: 1.2rem;
   height: 1.2rem;
   margin-right: 0.7rem;