rename warning-orange in warning-light

Author: Haelle

index.html

@@ -399,19 +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-light">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-light">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-light">Modifier</button>
             <button class="button small warning">Annuler</button>
             <button class="button small secondary">¯\_(ツ)_/¯</button>
           </div>

src/css/elements/button.css

@@ -141,13 +141,13 @@ a.button.warning {
   background-color: var(--dark-red);
 }
 
-.button.warning-orange,
-a.button.warning-orange {
+.button.warning-light,
+a.button.warning-light {
   background-color: var(--orange);
 }
 
-.button.warning-orange:hover,
-.button.warning-orange:active {
+.button.warning-light:hover,
+.button.warning-light:active {
   background-color: var(--dark-orange);
 }