From bf5ff0bf0b32d0c0bffd7c14b144a49b1164c8cc Mon Sep 17 00:00:00 2001
From: Patrice Chalin <pchalin@gmail.com>
Date: Tue, 31 Jan 2023 10:08:45 -0500
Subject: [PATCH 1/2] [BSv5] lighten to tint-color and drop $primary-light

- Drops $primary-light (breaking change)
- Drops `color-diff()` (breaking change)
- Replaces custom coloring of Draw.io edit button by outline-primary
---
 CHANGELOG.md                        | 11 ++++++++++-
 assets/scss/_drawio.scss            |  8 ++++----
 assets/scss/_search.scss            |  4 ++--
 assets/scss/_variables.scss         |  3 +--
 assets/scss/support/_functions.scss |  2 +-
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cfa075a931..d5cbe0cf14 100644
--- a/CHANGELOG.md
+++ b/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][]
 
diff --git a/assets/scss/_drawio.scss b/assets/scss/_drawio.scss
index 3dea447d8e..0fd6d4bd6d 100644
--- a/assets/scss/_drawio.scss
+++ b/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;
diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
index 481ec5ddb6..6b91373838 100644
--- a/assets/scss/_search.scss
+++ b/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;
         }
 
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index ff70ad16db..1d6a325e8b 100644
--- a/assets/scss/_variables.scss
+++ b/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;
diff --git a/assets/scss/support/_functions.scss b/assets/scss/support/_functions.scss
index bb75c49673..8c27da9629 100644
--- a/assets/scss/support/_functions.scss
+++ b/assets/scss/support/_functions.scss
@@ -17,4 +17,4 @@
     #{$fn-sat}: abs($sat),
     #{$fn-lig}: abs($lig)
   );
-}
\ No newline at end of file
+}

From f397627c9c8183af07ea8193ff9b44c448fea47d Mon Sep 17 00:00:00 2001
From: Patrice Chalin <pchalin@gmail.com>
Date: Tue, 31 Jan 2023 11:24:21 -0500
Subject: [PATCH 2/2] Actually drop color-diff()

---
 assets/scss/support/_functions.scss | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/assets/scss/support/_functions.scss b/assets/scss/support/_functions.scss
index 8c27da9629..e0d0b6b87f 100644
--- a/assets/scss/support/_functions.scss
+++ b/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)
-  );
-}