From 6ab7aa037a528bace7464b763562b87515776857 Mon Sep 17 00:00:00 2001
From: Caroline Desprat <cdesprat@icij.org>
Date: Tue, 2 Jul 2024 15:45:52 +0000
Subject: [PATCH] feat: update btn colors

---
 src/main.scss                        | 12 ++++++++++++
 src/stories/basics/Button.stories.js | 18 +++++++++---------
 src/utils/settings.scss              |  2 +-
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/main.scss b/src/main.scss
index 387f5e2656..598587dbd3 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -13,6 +13,18 @@
 @import '~node_modules/bootstrap-vue-next/dist/bootstrap-vue-next.css';
 // @TODO bundle Murmur so the import is easier
 @import '~node_modules/@icij/murmur-next/dist/lib/murmur.css';
+.btn-outline-secondary {
+  --#{$prefix}btn-color:  var(--bs-body-color);
+  --#{$prefix}btn-hover-bg: #{tint-color($secondary, 90%)};
+  --#{$prefix}btn-hover-color: var(--bs-body-color);
+  --#{$prefix}btn-active-bg: #{tint-color($secondary, 90%)};
+}
+.btn-outline-tertiary {
+  --#{$prefix}btn-color:  var(--bs-body-color);
+  --#{$prefix}btn-hover-bg: #{tint-color($tertiary, 60%)};
+  --#{$prefix}btn-hover-color: var(--bs-body-color);
+  --#{$prefix}btn-active-bg: #{tint-color($tertiary, 60%)};
+}
 
 
 html {
diff --git a/src/stories/basics/Button.stories.js b/src/stories/basics/Button.stories.js
index fc0056a3d0..5af81fd5d9 100644
--- a/src/stories/basics/Button.stories.js
+++ b/src/stories/basics/Button.stories.js
@@ -9,7 +9,7 @@ export default {
     size: { control: { type: 'select' }, options: ['sm', 'md', 'lg'] },
     variant: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'outline-secondary', 'tertiary', 'light']
+      options: ['primary', 'secondary', 'outline-secondary', 'outline-tertiary', 'light']
     }
   },
   render: (args) => ({
@@ -42,56 +42,56 @@ export default {
         <td><b-button v-bind="args" >{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="primary" >{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="outline-secondary" >{{args.label}}</b-button></td>
-        <td><b-button v-bind="args" variant="tertiary" >{{args.label}}</b-button></td>
+        <td><b-button v-bind="args" variant="outline-tertiary" >{{args.label}}</b-button></td>
       </tr>
       <tr>
         <td>Hover </td>
         <td><b-button v-bind="args" id="hover" >{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="primary" id="hover">{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="outline-secondary" id="hover">{{args.label}}</b-button></td>
-        <td><b-button v-bind="args" variant="tertiary" id="hover">{{args.label}}</b-button></td>
+        <td><b-button v-bind="args" variant="outline-tertiary" id="hover">{{args.label}}</b-button></td>
       </tr>
       <tr>
         <td>Focus </td>
         <td><b-button v-bind="args" id="focus">{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="primary" id="focus">{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="outline-secondary" id="focus">{{args.label}}</b-button></td>
-        <td><b-button v-bind="args" variant="tertiary" id="focus">{{args.label}}</b-button></td>
+        <td><b-button v-bind="args" variant="outline-tertiary" id="focus">{{args.label}}</b-button></td>
       </tr>
       <tr>
         <td>Active </td>
         <td><b-button v-bind="args" id="active">{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="primary" id="active">{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="outline-secondary" id="active">{{args.label}}</b-button></td>
-        <td><b-button v-bind="args" variant="tertiary" id="active">{{args.label}}</b-button></td>
+        <td><b-button v-bind="args" variant="outline-tertiary" id="active">{{args.label}}</b-button></td>
       </tr>
       <tr>
         <td>Pressed </td>
         <td><b-button v-bind="args" pressed>{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="primary" pressed>{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="outline-secondary" pressed>{{args.label}}</b-button></td>
-        <td><b-button v-bind="args" variant="tertiary" pressed>{{args.label}}</b-button></td>
+        <td><b-button v-bind="args" variant="outline-tertiary" pressed>{{args.label}}</b-button></td>
       </tr>
       <tr>
         <td>Disabled </td>
         <td><b-button v-bind="args" disabled>{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="primary" disabled>{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="outline-secondary" disabled>{{args.label}}</b-button></td>
-        <td><b-button v-bind="args" variant="tertiary" disabled>{{args.label}}</b-button></td>
+        <td><b-button v-bind="args" variant="outline-tertiary" disabled>{{args.label}}</b-button></td>
       </tr>
       <tr>
         <td>Loading </td>
         <td><b-button v-bind="args" loading>{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="primary" loading>{{args.label}}</b-button></td>
         <td><b-button v-bind="args" variant="outline-secondary" loading>{{args.label}}</b-button></td>
-        <td><b-button v-bind="args" variant="tertiary" loading>{{args.label}}</b-button></td>
+        <td><b-button v-bind="args" variant="outline-tertiary" loading>{{args.label}}</b-button></td>
       </tr>
       <tr>
         <td>BCloseButton </td>
         <td><BCloseButton v-bind="args">{{args.label}}</BCloseButton></td>
         <td><BCloseButton v-bind="args" variant="primary">{{args.label}}</BCloseButton></td>
         <td><BCloseButton v-bind="args" variant="outline-secondary">{{args.label}}</BCloseButton></td>
-        <td><BCloseButton v-bind="args" variant="tertiary">{{args.label}}</BCloseButton></td>
+        <td><BCloseButton v-bind="args" variant="outline-tertiary">{{args.label}}</BCloseButton></td>
       </tr>
     </tbody>
     </table>
diff --git a/src/utils/settings.scss b/src/utils/settings.scss
index d6f616dc03..a3fbf6059f 100644
--- a/src/utils/settings.scss
+++ b/src/utils/settings.scss
@@ -2,7 +2,7 @@ $prefix: bs-;
 
 $primary: #112A5C;
 $secondary: #FA4070;
-$tertiary: #FFBF57;
+$tertiary: #C7C7C7;
 $danger: #dc3545;
 
 $warning: #FFBF57;