New leman button

An additional colour for the buttons, based on the graphic charter of the EPFL; red is sometimes perceived as "too aggressive".

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>

assets/components/atoms/button/button-tertiary.twig

@@ -0,0 +1 @@
+<button class="btn btn-tertiary">Tertiary action</button>

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 {

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.
 

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((