Convert all Sass color functions to color.adjust

Author: thibaudcolas

src/api/_constants.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Namespace for all classes, reduces the risk of style clashes.
 $DRAFTAIL: "Draftail-";
 
@@ -22,9 +24,9 @@ $draftail-editor-readonly-opacity: 0.5 !default;
 $draftail-editor-chrome: $color-light-grey !default;
 $draftail-editor-chrome-text: $color-grey !default;
 $draftail-editor-chrome-active: $color-black !default;
-$draftail-editor-chrome-accent: darken(
+$draftail-editor-chrome-accent: color.adjust(
   $color: $draftail-editor-chrome,
-  $amount: 10%,
+  $lightness: -10%,
 ) !default;
 $draftail-tooltip-chrome: $color-grey !default;
 $draftail-tooltip-chrome-text: $color-white !default;

src/components/Toolbar/ToolbarButton.scss

@@ -1,10 +1,12 @@
-$button-active-color: transparentize(
+@use "sass:color";
+
+$button-active-color: color.adjust(
   $color: $draftail-editor-chrome-active,
-  $amount: 0.9,
+  $alpha: -0.9,
 );
-$button-active-border-color: transparentize(
+$button-active-border-color: color.adjust(
   $color: $draftail-editor-chrome-active,
-  $amount: 0.8,
+  $alpha: -0.8,
 );
 $button-font-size: 1rem;
 

src/components/Toolbar/ToolbarTooltip.scss

@@ -1,14 +1,15 @@
 @use "sass:math";
+@use "sass:color";
 
 // Code initially taken from Balloon.css
 // See https://github.com/kazzkiq/balloon.css.
 //
 // Variables
 // -----------------------------------------
 
-$balloon-bg: transparentize(
+$balloon-bg: color.adjust(
   $color: #111,
-  $amount: 0.1,
+  $alpha: -0.1,
 ) !default;
 $balloon-text-color: $color-white;
 $arrow-height: 6px;