Merge pull request #1542 from gethinode/radius

markdumay · web-flow · commit a44e5dcafc0c · 2025-08-22T11:40:51.000+02:00
Radius
diff --git a/assets/scss/app-dart.scss b/assets/scss/app-dart.scss
@@ -24,8 +24,10 @@
 @import "components/carousel.scss";
 @import "components/clipboard.scss";
 @import "components/command.scss";
+@import "components/docs.scss";
 @import "components/feature.scss";
 @import "components/footer.scss";
+@import "components/kbd.scss";
 @import "components/nav.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
@@ -35,6 +37,7 @@
 @import "components/sidebar.scss";
 @import "components/syntax-dart.scss"; // note: modified for dart-sass
 @import "components/table.scss";
+@import "components/toast.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
 @import "components/video.scss";
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
@@ -22,8 +22,10 @@
 @import "components/carousel.scss";
 @import "components/clipboard.scss";
 @import "components/command.scss";
+@import "components/docs.scss";
 @import "components/feature.scss";
 @import "components/footer.scss";
+@import "components/kbd.scss";
 @import "components/nav.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
@@ -33,6 +35,7 @@
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
 @import "components/table.scss";
+@import "components/toast.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
 @import "components/video.scss";
diff --git a/assets/scss/common/_styles.scss b/assets/scss/common/_styles.scss
@@ -14,6 +14,10 @@ a:active {
     text-decoration: none;
 }
 
+div.rounded, img.rounded {
+    --bs-border-radius: #{$theme-border-radius};
+}
+
 //
 // Ensure main page is rendered to full viewport height
 //
diff --git a/assets/scss/common/_variables-dart.scss b/assets/scss/common/_variables-dart.scss
@@ -16,12 +16,12 @@ $font-weight-normal:            300 !default;
 $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;
 
-$theme-border-radius:           1rem;
-
 strong {
     font-weight:                600 if($enable-important-utilities, !important, null);
 }
 
+$theme-border-radius:           0.375rem;
+
 $navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
 $navbar-offset-xs:              h.$navbar-offset-xs;
diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss
@@ -17,13 +17,13 @@ $font-weight-normal:            300 !default;
 $font-weight-bold:              600 !default;
 $font-weight-bolder:            bolder !default;
 
-$theme-border-radius:           1rem;
-
 strong {
     font-weight:                600 if($enable-important-utilities, !important, null);
 }
 // scss-docs-end font
 
+$theme-border-radius:           0.375rem;
+
 $white:                       #fff !default;
 $black:                       #000 !default;
 $body-bg:                     #fff !default;
diff --git a/assets/scss/components/_button.scss b/assets/scss/components/_button.scss
@@ -52,3 +52,7 @@ a.btn {
 .btn-xs {
   @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-xs);
 }
+
+.btn {
+    --bs-border-radius: #{$theme-border-radius};
+}
diff --git a/assets/scss/components/_card.scss b/assets/scss/components/_card.scss
@@ -6,6 +6,9 @@
 }
 
 .card {
+    --bs-card-border-radius: #{$theme-border-radius};
+    --bs-card-inner-border-radius: #{$theme-border-radius};
+    --bs-border-radius: #{$theme-border-radius};
     --bs-card-bg: transparent;
 }
 
@@ -28,6 +31,13 @@
     cursor: pointer;
 }
 
+.card-img-top {
+    --bs-border-radius: #{$theme-border-radius};
+
+    border-top-left-radius: var(--bs-border-radius) !important;
+    border-top-right-radius: var(--bs-border-radius) !important;
+}
+
 .card-img-wrap img {
     transition: transform 0.25s ease;
     width: 100%;
diff --git a/assets/scss/components/_carousel.scss b/assets/scss/components/_carousel.scss
@@ -1,3 +1,7 @@
+.carousel-inner {
+    border-radius: #{$theme-border-radius};
+}
+
 .gradient {
     width: 100%;
     height: 100%;
diff --git a/assets/scss/components/_docs.scss b/assets/scss/components/_docs.scss
@@ -0,0 +1,22 @@
+.docs-controls .nav-link,
+.file-controls .nav-link {
+    border-top-left-radius: #{$theme-border-radius};
+    border-top-right-radius: #{$theme-border-radius};
+    margin-left: #{$theme-border-radius};
+
+    &:hover,
+    &:focus {
+        border-bottom: 0;
+    }
+}
+
+.docs-panel,
+.file-panel {
+    border: 1px solid var(--#{$prefix}border-color);
+    overflow: hidden;
+}
+
+.docs-panel, .docs-panel .collapse,
+.file-panel, .file-panel .collapse {
+    border-radius: #{$theme-border-radius};
+}
diff --git a/assets/scss/components/_img.scss b/assets/scss/components/_img.scss
@@ -27,3 +27,7 @@
     width: 100vw;
     object-fit: cover;
 }
+
+.figure-caption {
+    margin-left: #{$theme-border-radius};
+}
diff --git a/assets/scss/components/_kbd.scss b/assets/scss/components/_kbd.scss
@@ -0,0 +1,3 @@
+kbd {
+    border-radius: #{$theme-border-radius};
+}
diff --git a/assets/scss/components/_nav.scss b/assets/scss/components/_nav.scss
@@ -84,6 +84,14 @@
     border-color: var(--#{$prefix}border-color);
 }
 
+.nav-callout, .pagination {
+    --bs-border-radius: #{$theme-border-radius};
+}
+
+.nav-callout .tab-content {
+    border-radius: #{$theme-border-radius};
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .nav-callout, .tab-content {
diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss
@@ -319,3 +319,7 @@
     position: absolute;
     z-index: $zindex-fixed;
 }
+
+.form-control.is-search {
+    border: 1px solid var(--bs-border-color) !important;
+}
diff --git a/assets/scss/components/_sidebar.scss b/assets/scss/components/_sidebar.scss
@@ -11,6 +11,12 @@
 }
 
 .sidebar-item {
+    --bs-border-radius: #{$theme-border-radius};
+    --bs-border-radius-sm: #{$theme-border-radius};
+    --bs-border-radius-lg: #{$theme-border-radius};
+    --bs-border-radius-xl: #{$theme-border-radius};
+    --bs-border-radius-xxl: #{$theme-border-radius};
+
     color: rgba(0, 0, 0, 0.65);
     margin-left: 0 !important;
     display: inline-block;
@@ -28,6 +34,8 @@
 }
 
 .sidebar-item-group {
+    border-radius: #{$theme-border-radius};
+
     &:hover,
     &:focus {
         color: $primary;
diff --git a/assets/scss/components/_syntax-dart.scss b/assets/scss/components/_syntax-dart.scss
@@ -16,6 +16,10 @@
     flex: 1;
 }
 
+.codeblock.syntax-highlight, .command.syntax-highlight {
+    border-radius: #{$theme-border-radius};
+}
+
 .syntax-highlight {
     background-color: var(--bs-light) if($enable-important-utilities, !important, null);
     overflow-x: auto;
diff --git a/assets/scss/components/_syntax.scss b/assets/scss/components/_syntax.scss
@@ -16,6 +16,10 @@
     flex: 1;
 }
 
+.codeblock.syntax-highlight, .command.syntax-highlight {
+    border-radius: #{$theme-border-radius};
+}
+
 .syntax-highlight {
     background-color: var(--bs-light) if($enable-important-utilities, !important, null);
     overflow-x: auto;
diff --git a/assets/scss/components/_timeline.scss b/assets/scss/components/_timeline.scss
@@ -26,6 +26,10 @@ $semi-circle-border: 0.2rem;
 
 // scss-docs-end timeline
 
+.timeline-container {
+    border-radius: #{$theme-border-radius}; 
+}
+
 .timeline, .timeline-sm {
     position: relative;
 }
diff --git a/assets/scss/components/_toast.scss b/assets/scss/components/_toast.scss
@@ -0,0 +1,4 @@
+.toast {
+    border-radius: #{$theme-border-radius};
+    overflow: hidden;
+}
diff --git a/assets/scss/components/_video.scss b/assets/scss/components/_video.scss
@@ -3,6 +3,7 @@
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
+    border-radius: #{$theme-border-radius};
 }
 
 .video-embedded > iframe {
@@ -11,7 +12,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    border:0;
+    border: 0;
 }
 
 // Adapted from https://github.com/gohugoio/hugo/tpl/tplimpl/embedded/templates/shortcodes/vimeo_simple.html
diff --git a/assets/scss/theme/fonts.scss b/assets/scss/theme/fonts.scss
@@ -10,7 +10,7 @@
 
 /* inter-200 - latin */
 @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Inter';
     font-style: normal;
     font-weight: 200;
@@ -23,7 +23,7 @@
   }
   /* inter-300 - latin */
   @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
@@ -36,7 +36,7 @@
   }
   /* inter-regular - latin */
   @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
@@ -49,7 +49,7 @@
   }
   /* inter-600 - latin */
   @font-face {
-    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
diff --git a/component-library/components/cta/cta.scss b/component-library/components/cta/cta.scss
@@ -2,6 +2,10 @@
     background-color: var(--#{$prefix}primary-bg-subtle);
 }
 
+.cta, .background-img-fluid  {
+    border-radius: #{$theme-border-radius} if($enable-important-utilities, !important, null);
+}
+
 .cta .contact-img {
     background-color: var(--#{$prefix}body-bg);
     border-radius: var(--bs-border-radius);
diff --git a/component-library/components/panels/panels.scss b/component-library/components/panels/panels.scss
@@ -1,3 +1,13 @@
 .panels .dropdown-toggle {
     text-decoration: none !important;
 }
+
+.panels .nav-tabs {
+    border-top-left-radius: #{$theme-border-radius};
+    border-top-right-radius: #{$theme-border-radius};
+    margin-left: #{$theme-border-radius};
+}
+
+.panels .tab-content {
+    border-radius: #{$theme-border-radius};
+}
diff --git a/component-library/components/video-message/video-message.bookshop.yml b/component-library/components/video-message/video-message.bookshop.yml
@@ -31,6 +31,7 @@ blueprint:
     media-id:
     autoplay:
     query-args:
+    color:
   cols:
   messages:
     - title:
diff --git a/component-library/components/video-message/video-message.hugo.html b/component-library/components/video-message/video-message.hugo.html
@@ -28,6 +28,7 @@
 	{{ $queryArgs := .queryArgs }}
 	{{ $border := .border }}
 	{{ $padding := .padding }}
+	{{ $color := .color }}
 
 	{{ if site.Params.env_bookshop_live }}
 		{{/* Define dummy content as we cannot retrieve video data in live mode */}}
@@ -36,7 +37,7 @@
 			"ratio" "21x9"
 			"wrapper" (printf "text-center mb-%d" $padding.y)) -}}
 	{{ else }}
-        <div class="video-container{{ if $border }} video-container-border{{ end}}">
+        <div class="video-container{{ if $border }} video-container-border{{ end}} {{ with $color }}bg-{{ . }}{{ end }}">
 			{{ partial "assets/video.html" (dict
 				"page"       page
 				"provider"   $provider
@@ -117,6 +118,7 @@
 				"query-args" .queryArgs
 				"border"     $.border
 				"padding"    $padding
+				"color"      .color
 			) -}}
 		{{ end }}
 		</div>
@@ -142,6 +144,7 @@
 							"query-args" .queryArgs
 							"border"     $.border
 							"padding"    $padding
+							"color"      .color
 						) -}}
 					{{ end }}
 				</div>
diff --git a/component-library/components/video-message/video-message.scss b/component-library/components/video-message/video-message.scss
@@ -2,6 +2,7 @@
     --bs-video-border-color: var(--bs-primary);
     --bs-video-border-width: 1rem;
     
+    border-radius: $theme-border-radius;
     position: relative;
 }
 
diff --git a/exampleSite/content/en/blocks/video-message.md b/exampleSite/content/en/blocks/video-message.md
@@ -29,6 +29,7 @@ The `video` content block renders a horizontal line to separate sections. The se
     provider: vimeo
     media-id: "55073825"
     autoplay: true
+    color: black
   messages:
     - title: First Message
       icon: fas 1
diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json
diff --git a/layouts/_markup/render-codeblock.html b/layouts/_markup/render-codeblock.html
diff --git a/layouts/_partials/assets/timeline.html b/layouts/_partials/assets/timeline.html
diff --git a/layouts/_shortcodes/command.html b/layouts/_shortcodes/command.html
diff --git a/layouts/_shortcodes/docs.html b/layouts/_shortcodes/docs.html
diff --git a/layouts/_shortcodes/file.html b/layouts/_shortcodes/file.html

Original file line number	Diff line number	Diff line change
`@@ -52,3 +52,7 @@ a.btn {`
`52`	`52`	`.btn-xs {`
`53`	`53`	`@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-xs);`
`54`	`54`	`}`
	`55`	`+`
	`56`	`+.btn {`
	`57`	`+ --bs-border-radius: #{$theme-border-radius};`
	`58`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -27,3 +27,7 @@`
`27`	`27`	`width: 100vw;`
`28`	`28`	`object-fit: cover;`
`29`	`29`	`}`
	`30`	`+`
	`31`	`+.figure-caption {`
	`32`	`+ margin-left: #{$theme-border-radius};`
	`33`	`+}`