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 00000000..f18ad545
--- /dev/null
+++ b/assets/components/atoms/button/button-tertiary-states.twig
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/assets/components/atoms/button/button-tertiary.twig b/assets/components/atoms/button/button-tertiary.twig
new file mode 100644
index 00000000..12e7af20
--- /dev/null
+++ b/assets/components/atoms/button/button-tertiary.twig
@@ -0,0 +1 @@
+
diff --git a/assets/components/atoms/button/button.scss b/assets/components/atoms/button/button.scss
index 87ce98b9..493dbe2e 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 e3ec2e73..0cf882fc 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 12e4f195..bc0d09a5 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((