Replace $timeline-image-border-radius with a CSS custom property (#10792)

* Use CSS custom property: --timeline-image-border-radius

Remove the same variable from _MImageBody.pcss

* Rename the property

The property is neither limited to a timeline nor image, but applied to M.*?Body components as well, such as MLocationBody and MVideoBody.

res/css/_common.pcss

@@ -27,7 +27,6 @@ $hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
 
 $selected-message-border-width: 4px;
 
-$timeline-image-border-radius: 8px;
 :root {
     font-size: 10px;
 
@@ -37,6 +36,7 @@ $timeline-image-border-radius: 8px;
     --transition-standard: 0.3s;
     --buttons-dialog-gap-row: $spacing-8;
     --buttons-dialog-gap-column: $spacing-8;
+    --MBody-border-radius: 8px;
 }
 
 @media only percy {

res/css/components/views/messages/_MBeaconBody.pcss

@@ -20,7 +20,7 @@ limitations under the License.
     max-width: 325px;
     width: 100%;
 
-    border-radius: $timeline-image-border-radius;
+    border-radius: var(--MBody-border-radius);
     overflow: hidden;
 }
 

res/css/views/messages/_MImageBody.pcss

@@ -15,14 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$timeline-image-border-radius: 8px;
-
 .mx_MImageBody_banner {
     position: absolute;
     bottom: $spacing-4;
     left: $spacing-4;
     padding: $spacing-4;
-    border-radius: $timeline-image-border-radius;
+    border-radius: var(--MBody-border-radius);
     font-size: $font-15px;
     user-select: none; /* prevent banner text from being selected */
     pointer-events: none; /* let the cursor go through to the media underneath */
@@ -55,7 +53,7 @@ $timeline-image-border-radius: 8px;
 }
 
 .mx_MImageBody_thumbnail_container {
-    border-radius: $timeline-image-border-radius;
+    border-radius: var(--MBody-border-radius);
 
     /* Necessary for the border radius to apply correctly to the placeholder */
     overflow: hidden;

res/css/views/messages/_MLocationBody.pcss

@@ -23,7 +23,7 @@ limitations under the License.
         height: 300px;
         z-index: 0; /* keeps the entire map under the message action bar */
 
-        border-radius: $timeline-image-border-radius;
+        border-radius: var(--MBody-border-radius);
         cursor: pointer;
     }
 }

res/css/views/messages/_MVideoBody.pcss

@@ -18,7 +18,7 @@ span.mx_MVideoBody {
     overflow: hidden;
 
     .mx_MVideoBody_container {
-        border-radius: $timeline-image-border-radius;
+        border-radius: var(--MBody-border-radius);
         overflow: hidden;
 
         video {

res/css/views/rooms/_EventBubbleTile.pcss

@@ -290,7 +290,7 @@ limitations under the License.
             /* we put the timestamps for media (other than stickers) atop the media */
             &.mx_EventTile_image {
                 .mx_MessageTimestamp {
-                    border-radius: $timeline-image-border-radius;
+                    border-radius: var(--MBody-border-radius);
                     /* Hardcoded colours because it's the same on all themes */
                     background-color: rgba(0, 0, 0, 0.6);
                     color: #ffffff;