From 626bf6f0cb6a52c569635ae491f12e87d707f1ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n?= <41774881+xentenza@users.noreply.github.com>
Date: Mon, 21 Oct 2024 10:18:01 +0200
Subject: [PATCH 1/3] New leman button

An additional colour for the buttons, based on the graphic charter of the EPFL; red is sometimes perceived as "too aggressive".
---
 .../atoms/button/button-tertiary-states.twig  |  4 ++
 .../atoms/button/button-tertiary.twig         |  1 +
 assets/components/atoms/button/button.scss    | 41 +++++++++++++++++++
 assets/components/atoms/button/button.yml     |  8 ++++
 assets/config/bootstrap-variables.scss        |  2 +
 5 files changed, 56 insertions(+)
 create mode 100644 assets/components/atoms/button/button-tertiary-states.twig
 create mode 100644 assets/components/atoms/button/button-tertiary.twig

diff --git a/assets/components/atoms/button/button-tertiary-states.twig b/assets/components/atoms/button/button-tertiary-states.twig
new file mode 100644
index 000000000..f18ad545f
--- /dev/null
+++ b/assets/components/atoms/button/button-tertiary-states.twig
@@ -0,0 +1,4 @@
+<button class="btn btn-tertiary hover">Tertiary hover</button>
+<button class="btn btn-tertiary active">Tertiary active</button>
+<button class="btn btn-tertiary focus">Tertiary focus</button>
+<button class="btn btn-tertiary" disabled>Tertiary disabled</button>
diff --git a/assets/components/atoms/button/button-tertiary.twig b/assets/components/atoms/button/button-tertiary.twig
new file mode 100644
index 000000000..12e7af205
--- /dev/null
+++ b/assets/components/atoms/button/button-tertiary.twig
@@ -0,0 +1 @@
+<button class="btn btn-tertiary">Tertiary action</button>
diff --git a/assets/components/atoms/button/button.scss b/assets/components/atoms/button/button.scss
index 87ce98b97..493dbe2e9 100644
--- a/assets/components/atoms/button/button.scss
+++ b/assets/components/atoms/button/button.scss
@@ -123,6 +123,47 @@ input[type="button"] {
   }
 }
 
+.btn-tertiary {
+  background: $leman;
+  font-weight: $font-weight-bold;
+  color: $white;
+
+  &:hover,
+  &.hover {
+    background: $canard;
+    border-color: $canard;
+    color: $white;
+  }
+  
+  &:focus,
+  &:focus-visible,
+  &.focus {
+    outline-color: $canard !important;
+    color: $white;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    // ugly ↓
+    // background: linear-gradient(to bottom, $canard 0%, $red 100%);
+    background: color.adjust($canard, $lightness: -10%);
+    border-color: color.adjust($canard, $lightness: -10%);
+  }
+
+  &:disabled,
+  &.disabled {
+    background: $gray-100;
+    border-color: $gray-300;
+    color: $gray-300;
+
+    .bg-dark & {
+      background: $black;
+      border-color: $gray-600;
+      color: $gray-600;
+    }
+  }
+}
+
 .btn-light {
   &,
   &:hover {
diff --git a/assets/components/atoms/button/button.yml b/assets/components/atoms/button/button.yml
index e3ec2e736..0cf882fc3 100644
--- a/assets/components/atoms/button/button.yml
+++ b/assets/components/atoms/button/button.yml
@@ -22,6 +22,14 @@ variants:
     title: Secondary states preview
     notes: |
       *For previewing purposes only. **Do not use in production!***
+  - name: tertiary
+    title: Button tertiary
+    notes: |
+      For less aggressive buttons that are still in line with the EPFL graphic charter.
+  - name: tertiary-states
+    title: Tertiary states preview
+    notes: |
+      *For previewing purposes only. **Do not use in production!***
 notes: |
   Button is your interaction friend when you want people to complete an action. By clicking a button, people expect to trigger an event, confirm a form or load a new page. Don't put many buttons on one single page. The primary action should be obvious for people.
 
diff --git a/assets/config/bootstrap-variables.scss b/assets/config/bootstrap-variables.scss
index 12e4f1951..bc0d09a57 100644
--- a/assets/config/bootstrap-variables.scss
+++ b/assets/config/bootstrap-variables.scss
@@ -17,6 +17,8 @@ $gray-300: #c1c1c1 !default;
 $gray-500: #8e8e8e !default;
 $gray-600: #707070 !default;
 $black:    #212121 !default;
+$leman:    #00A79F !default;
+$canard:   #007480 !default;
 
 $grays: () !default;
 $grays: map-merge((

From abbd85cde5c216d10e06f085644a451308965bcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n?= <41774881+xentenza@users.noreply.github.com>
Date: Wed, 30 Oct 2024 10:08:52 +0100
Subject: [PATCH 2/3] Accessible colors

- switched $leman to $canard
- added $canard-dark color
---
 assets/components/atoms/button/button.scss | 14 +++++++-------
 assets/config/bootstrap-variables.scss     | 19 ++++++++++---------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/assets/components/atoms/button/button.scss b/assets/components/atoms/button/button.scss
index 493dbe2e9..75acefae2 100644
--- a/assets/components/atoms/button/button.scss
+++ b/assets/components/atoms/button/button.scss
@@ -124,30 +124,30 @@ input[type="button"] {
 }
 
 .btn-tertiary {
-  background: $leman;
+  background: $canard;
   font-weight: $font-weight-bold;
   color: $white;
 
   &:hover,
   &.hover {
-    background: $canard;
-    border-color: $canard;
+    background: $canard-dark;
+    border-color: $canard-dark;
     color: $white;
   }
   
   &:focus,
   &:focus-visible,
   &.focus {
-    outline-color: $canard !important;
+    outline-color: $canard-dark !important;
     color: $white;
   }
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
     // ugly ↓
-    // background: linear-gradient(to bottom, $canard 0%, $red 100%);
-    background: color.adjust($canard, $lightness: -10%);
-    border-color: color.adjust($canard, $lightness: -10%);
+    // background: linear-gradient(to bottom, $canard-dark 0%, $red 100%);
+    background: color.adjust($canard-dark, $lightness: -10%);
+    border-color: color.adjust($canard-dark, $lightness: -10%);
   }
 
   &:disabled,
diff --git a/assets/config/bootstrap-variables.scss b/assets/config/bootstrap-variables.scss
index bc0d09a57..6b7848f97 100644
--- a/assets/config/bootstrap-variables.scss
+++ b/assets/config/bootstrap-variables.scss
@@ -10,15 +10,16 @@
 //
 
 // stylelint-disable
-$white:    #fff !default;
-$gray-100: #e6e6e6 !default;
-$gray-200: #d5d5d5 !default;
-$gray-300: #c1c1c1 !default;
-$gray-500: #8e8e8e !default;
-$gray-600: #707070 !default;
-$black:    #212121 !default;
-$leman:    #00A79F !default;
-$canard:   #007480 !default;
+$white:       #fff !default;
+$gray-100:    #e6e6e6 !default;
+$gray-200:    #d5d5d5 !default;
+$gray-300:    #c1c1c1 !default;
+$gray-500:    #8e8e8e !default;
+$gray-600:    #707070 !default;
+$black:       #212121 !default;
+$leman:       #00A79F !default;
+$canard:      #007480 !default;
+$canard-dark: #004248 !default;
 
 $grays: () !default;
 $grays: map-merge((

From 62ff987be67bc8899800f4ab45958ce3e1be1765 Mon Sep 17 00:00:00 2001
From: Aline <aline.keller@gmail.com>
Date: Wed, 30 Oct 2024 17:46:49 +0100
Subject: [PATCH 3/3] Add $canard-dark to the styleguide color list

---
 assets/config/colors.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/config/colors.json b/assets/config/colors.json
index 540933f64..eb48761e6 100644
--- a/assets/config/colors.json
+++ b/assets/config/colors.json
@@ -9,5 +9,6 @@
   "$gray-600": "#707070",
   "$black": "#212121",
   "$leman": "#00A79F",
-  "$canard": "#007480"
+  "$canard": "#007480",
+  "$canard-dark": "#004248"
 }