[BSv5] replace lighten() by tint-color(), and var/func clean up

CHANGELOG.md

@@ -14,11 +14,20 @@ For a list of issues targeted for the next release, see the [23Q1][] milestone.
 
 **Breaking changes**:
 
-- **[Upgraded Bootstrap (#470)][470]** to v5. Details TBC.
+- **[Upgraded Bootstrap (#470)][470]** to v5. For a list of Bootstrap breaking
+  changes, see the [Bootstrap migration guide][bsv5mig]. Other, Docsy-specific
+  changes are listed below:
+  - Clean up of unused, or rarely used, variables and functions:
+    - Dropped `$primary-light`.
+    - Dropped `color-diff()`.
 
 **Other changes**:
 
+- Non-breaking changes that result from the Bootstrap v5 upgrade:
+  - Draw.io diagram edit button: replace custom colors by BS's outline primary.
+
 [470]: https://github.com/google/docsy/issues/470
+[bsv5mig]: https://getbootstrap.com/docs/5.2/migration/
 
 ## [0.6.0][]
 

assets/scss/_drawio.scss

@@ -3,20 +3,20 @@ div.drawio {
     position: relative;
 
     button {
+        @extend .btn;
+        @extend .btn-outline-primary;
         position: absolute;
-        font-size: 0.8em;
         bottom: 5px;
         right: 5px;
-        background-color: rgba($secondary, .8);
-        color: $primary-light;
         padding: 0.4em 0.5em;
+        font-size: 0.8em;
         display: none;
     }
 
     &:hover button {
         display: inline;
     }
-} 
+}
 
 div.drawioframe {
     position: fixed;

assets/scss/_search.scss

@@ -46,8 +46,8 @@
         }
 
         &.form-control:focus {
-            border-color: lighten($primary, 60%);
-            box-shadow: 0 0 0 2px lighten($primary, 30%);
+            border-color: tint-color($primary, 95%);
+            box-shadow: 0 0 0 2px tint-color($primary, 40%);
             color: inherit;
         }
 

assets/scss/_variables.scss

@@ -16,7 +16,6 @@ $td-enable-google-fonts: true !default;
 // Theme colors
 
 $primary: #30638E !default;
-$primary-light: lighten($primary, 75%) !default;
 $secondary: #FFA630 !default;
 $success: #3772FF !default;
 $info: #C0E0DE !default;
@@ -51,7 +50,7 @@ $td-sidebar-border-color: $border-color !default;
 // Background colors for the sections on home page etc. It is a paint by number system, starting at 0, where the number is taken from the shortcode's ordinal
 // if not provided by the user.
 // These colors are all part of the theme palette, but the mix is fairly random to create variation. This can be overridden by the project if needed.
-$td-box-colors: $dark, $primary, $secondary, $info, $primary-light, $gray-600, $success, $warning, $dark, $danger, $primary, $secondary, $primary-light, $info !default;
+$td-box-colors: $dark, $primary, $secondary, $info, $gray-600, $success, $warning, $dark, $danger, $primary, $secondary, $info !default;
 
 $link-color: darken($blue, 15%) !default;
 $link-decoration: none !default;