Add button warning-orange

Author: Haelle

index.html

@@ -399,16 +399,19 @@ <h1>Buttons</h1>
           <h2 class="subtitle">Full</h2>
           <div class="form__group">
             <button class="button large">Valider</button>
+            <button class="button large warning-orange">Modifier</button>
             <button class="button large warning">Annuler</button>
             <button class="button large secondary">¯\_(ツ)_/¯</button>
           </div>
           <div class="form__group">
             <button class="button">Valider</button>
+            <button class="button warning-orange">Modifier</button>
             <button class="button warning">Annuler</button>
             <button class="button secondary">¯\_(ツ)_/¯</button>
           </div>
           <div class="form__group">
             <button class="button small">Valider</button>
+            <button class="button small warning-orange">Modifier</button>
             <button class="button small warning">Annuler</button>
             <button class="button small secondary">¯\_(ツ)_/¯</button>
           </div>

src/css/base/theme.css

@@ -18,6 +18,7 @@
   --green: #03bd5b;
   --light-green: #daf5e7;
   --orange: #ff9947;
+  --dark-orange: #cc5c00;
   --light-orange: #fff0e4;
   --red: #d63626;
   --dark-red: #ab2b1e;

src/css/elements/button.css

@@ -141,6 +141,16 @@ a.button.warning {
   background-color: var(--dark-red);
 }
 
+.button.warning-orange,
+a.button.warning-orange {
+  background-color: var(--orange);
+}
+
+.button.warning-orange:hover,
+.button.warning-orange:active {
+  background-color: var(--dark-orange);
+}
+
 .button.secondary,
 a.button.secondary {
   background-color: var(--darker-grey);