refactor: unify the border radius of blocks

scope: code blocks, prompts, images, and videos

Author: cotes2020

_sass/addon/commons.scss

@@ -134,10 +134,11 @@ blockquote {
   &[class^="prompt-"] {
     display: flex;
     border-left: 0;
-    border-radius: 6px;
     padding: 1rem;
     color: var(--prompt-text-color);
 
+    @extend %rounded;
+
     &::before {
       text-align: center;
       width: 1.25rem;
@@ -543,11 +544,13 @@ i { /* fontawesome icons */
   }
 }
 
+.rounded-10 {
+  border-radius: 10px !important;
+}
+
 .img-link {
   color: transparent;
   display: inline-flex;
-
-  @extend %img-rounded;
 }
 
 .shimmer {
@@ -579,9 +582,10 @@ i { /* fontawesome icons */
 .embed-video {
   width: 100%;
   height: 100%;
-  border-radius: 4px;
   margin-bottom: 1rem;
 
+  @extend %rounded;
+
   &.youtube {
     aspect-ratio: 16 / 9;
   }

_sass/addon/module.scss

@@ -90,8 +90,8 @@
   font-style: normal;
 }
 
-%img-rounded {
-  border-radius: 10px;
+%rounded {
+  border-radius: 6px;
 }
 
 %img-caption {

_sass/addon/syntax.scss

@@ -29,34 +29,28 @@ html {
   }
 }
 
-/* -- Codes Snippet -- */
-
-$code-radius: 6px;
+/* -- code snippets -- */
 
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
-%code-snippet-radius {
-  border-radius: $code-radius;
-}
-
 %code-snippet-padding {
   padding-left: 1rem;
   padding-right: 1.5rem;
 }
 
 .highlighter-rouge {
   @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
+  @extend %rounded;
 
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
 .highlight {
-  @extend %code-snippet-radius;
+  @extend %rounded;
   @extend %code-snippet-bg;
 
   @at-root figure#{&} {
@@ -173,8 +167,6 @@ div {
 
   $code-header-height: 2.25rem;
 
-  border-top-left-radius: $code-radius;
-  border-top-right-radius: $code-radius;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -226,9 +218,9 @@ div {
   /* clipboard */
   button {
     @extend %cursor-pointer;
+    @extend %rounded;
 
     border: 1px solid transparent;
-    border-radius: $code-radius;
     height: $code-header-height;
     width: $code-header-height;
     padding: 0;

_sass/layout/post.scss

@@ -33,6 +33,7 @@
 .preview-img {
   @include align-center;
   @extend %preview-margin;
+  @extend %rounded;
 
   max-width: 100%;
 
@@ -48,7 +49,7 @@
     object-fit: cover;
 
     @extend %preview-margin;
-    @extend %img-rounded;
+    @extend %rounded;
   }
 }