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

- Contributes to #470
- Replaces custom coloring of Draw.io edit button by outline-primary:
  - Reference: https://www.docsy.dev/docs/adding-content/diagrams-and-formulae/#diagrams-with-diagramsnet
- Drops (now) unused, elements (breaking changes). I've scanned all of the Docsy-based projects that I work on, and none use these elements:
  - `$primary-light`
  - `color-diff()`

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;

assets/scss/support/_functions.scss

@@ -3,18 +3,3 @@
 @function prepend($list, $value) {
   @return join($value, $list);
 }
-
-
-// See https://www.sitepoint.com/using-sass-build-color-palettes/
-@function color-diff($a, $b) {
-  $sat: saturation($a) - saturation($b);
-  $lig: lightness($a) - lightness($b);
-  $fn-sat: if($sat > 0, 'desaturate', 'saturate');
-  $fn-lig: if($lig > 0, 'darken', 'lighten');
-
-  @return (
-    adjust-hue: -(hue($a) - hue($b)),
-    #{$fn-sat}: abs($sat),
-    #{$fn-lig}: abs($lig)
-  );
-}