Fix rgb color notation (#836)

* The slash is for space-separated notation (can’t mix commas and slashes).
* Prefer rgba() for better backwards compatibility.
* Fix split image param name.
* Fix status dot class case.

assets/sass/protocol/base/elements/_links.scss

@@ -16,7 +16,7 @@
     }
 
     &:active {
-        background-color: rgb(0, 0, 0 / 0.05);
+        background-color: rgba(0, 0, 0, 0.05);
     }
 }
 

assets/sass/protocol/base/elements/_tables.scss

@@ -20,7 +20,7 @@
     th,
     td {
         @include bidi(((text-align, left, right),));
-        border-top: 1px solid rgb(0, 0, 0 / 0.2);
+        border-top: 1px solid rgba(0, 0, 0, 0.2);
         padding: 0.5em 10px;
         text-align: left;
     }

assets/sass/protocol/components/_menu-list.scss

@@ -15,8 +15,8 @@
 }
 
 .mzp-c-menu-list-list {
-    background-color: #fff;
-    box-shadow: 0 0 6px 0 rgb(0, 0, 0 / 0.3);
+    background-color: $color-white;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
     border-radius: $border-radius-sm;
 }
 

assets/sass/protocol/components/_menu.scss

@@ -267,7 +267,7 @@
 
     @media #{$mq-md} {
         border-top: 1px solid $color-marketing-gray-20;
-        box-shadow: 0 16px 16px -16px rgb(0, 0, 0 / 0.3);
+        box-shadow: 0 16px 16px -16px rgba(0, 0, 0, 0.3);
         left: 0;
         padding: $spacing-xl $spacing-xs;
         position: absolute;

assets/sass/protocol/components/_modal.scss

@@ -33,7 +33,7 @@ html.mzp-is-noscroll {
 .mzp-c-modal {
     @include animation(mzp-a-fade-in 300ms ease-in 0ms 1 normal both);
     background: $color-black;
-    background: rgb(0, 0, 0 / 0.85);
+    background: rgba(0, 0, 0, 0.85);
     bottom: 0;
     height: 101%;
     left: 0;
@@ -51,7 +51,7 @@ html.mzp-is-noscroll {
 
 .mzp-c-modal-inner {
     @include clearfix;
-    background: rgb(0, 0, 0 / 0.9);
+    background: rgba(0, 0, 0, 0.9);
     max-width: 1200px;
     padding: $spacing-xl;
     position: relative;

assets/sass/protocol/components/_navigation.scss

@@ -56,7 +56,7 @@
 
             &.mzp-is-scrolling {
                 // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90
-                box-shadow: 0 0 6px 1px rgb(29, 17, 51 / 0.04), 0 0 8px 2px rgb(9, 32, 77 / 0.12), 0 0 5px -3px rgb(29, 17, 51 / 0.12);
+                box-shadow: 0 0 6px 1px rgba(29, 17, 51, 0.04), 0 0 8px 2px rgba(9, 32, 77, 0.12), 0 0 5px -3px rgba(29, 17, 51, 0.12);
             }
 
             &.mzp-is-hidden {

assets/sass/protocol/components/_sidebar-menu.scss

@@ -66,7 +66,7 @@
         &:hover,
         &:focus,
         &:active {
-            background-color: rgb(0, 0, 0 / 0.05);
+            background-color: rgba(0, 0, 0, 0.05);
             text-decoration: underline;
         }
     }

components/split/split.config.yml

@@ -80,7 +80,7 @@ variants:
       media can overflow if the container is tall, causing part of the image to
       be hidden, so choose wisely.
     context:
-      img_src: '/img/image-1-1.jpg'
+      image: '/img/image-1-1.jpg'
       media_class: mzp-l-split-media-constrain-height
   - name: Pop-out Media
     notes: |
@@ -105,7 +105,7 @@ variants:
     context:
       block_class: mzp-l-split-pop
       background_class: mzp-t-background-tertiary
-      img_src: '/img/image-1-1.jpg'
+      image: '/img/image-1-1.jpg'
   - name: Body Alignment
     notes: |
       Align the body in different positions, horizontally and vertically (it’s
@@ -125,7 +125,7 @@ variants:
         than the media height.
     context:
       body_class: mzp-l-split-h-end mzp-l-split-v-end
-      img_src: '/img/image-portrait.jpg'
+      image: '/img/image-portrait.jpg'
   - name: Media Alignment
     notes: |
       Align the media in different positions, horizontally and vertically (it’s
@@ -146,4 +146,4 @@ variants:
         than the body height. Taller images will scale to fit.
     context:
       media_class: mzp-l-split-h-end mzp-l-split-v-end
-      img_src: '/img/image-1-1-sm.jpg'
+      image: '/img/image-1-1-sm.jpg'

docs/03-contributing/03-css-guide.md

@@ -107,12 +107,12 @@ declaration above it.
     // This is a comment
     background: #333 url('img/icon.png') center no-repeat;
     color: #bada55;
-    margin: 0 auto .75em;
+    margin: 0 auto 0.75em;
 }
 
 .selector-a,
 .selector-b {
-    background: rgba(255, 255, 255, .25);
+    background: rgba(255, 255, 255, 0.25);
     padding: 20px;
 }
 ```

theme/assets/sass/components/_browser.scss

@@ -1,13 +1,13 @@
 /* stylelint-disable selector-class-pattern */
 .Browser-tabs {
     background-color: white;
-    border-bottom: 1px solid rgb(70, 81, 94 / 0.25);
+    border-bottom: 1px solid rgba(70, 81, 94, 0.25);
 }
 
 .Browser-tab {
     a:hover {
         background: #f1f1f1;
-        border-bottom: 2px solid rgb(70, 81, 94 / 0.25);
+        border-bottom: 2px solid rgba(70, 81, 94, 0.25);
     }
 
     a:focus {
@@ -26,7 +26,7 @@
         background-color: #f8f8f8;
         border-radius: $border-radius-xs;
         color: #000080;
-        outline: 1px solid rgb(0, 0, 0 / 0.05);
+        outline: 1px solid rgba(0, 0, 0, 0.05);
         padding: 0 0.5ch;
     }
 }

theme/assets/sass/components/_prose.scss

@@ -18,7 +18,7 @@
         }
 
         &:active {
-            background-color: rgb(0, 0, 0 / 0.05);
+            background-color: rgba(0, 0, 0, 0.05);
         }
     }
 
@@ -71,7 +71,7 @@
         background-color: #f8f8f8;
         border-radius: $border-radius-xs;
         color: #000080;
-        outline: 1px solid rgb(0, 0, 0 / 0.05);
+        outline: 1px solid rgba(0, 0, 0, 0.05);
         padding: 0 0.5ch;
     }
 }

theme/assets/sass/components/_status.scss

@@ -1,9 +1,10 @@
-.status-dot {
+/* stylelint-disable selector-class-pattern */
+.Status-dot {
     width: 3px;
     height: 3px;
     border-width: 3px;
 }
 
-.status-label {
+.Status-label {
     font-weight: bold;
 }

theme/assets/sass/components/_tokens.scss

@@ -1,6 +1,6 @@
 .docs-token-border {
     background: gray;
-    border: 1px solid rgb(0, 0, 0 / 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     height: 3rem;
     margin: 0.5rem 0;
     width: 100%;