Merge branch '82-change-buttons-colors' into 'master'

Resolve "Change buttons colors"

Closes #82

See merge request !65

src/css/buttons.css

+/***** BUTTON *****/
+.button {
+    margin: 10px;
+    border-color: var(--ifm-color-success);
+    color: var(--ifm-color-frame);
+    border-style: none;
+    white-space : initial;
+    font-family: var(--ifm-font-family-base);
+}
+
+.button--beta {
+    background-color: var(--ifm-color-success);
+    border-color: var(--ifm-color-success);
+    color: var(--ifm-color-frame);
+    border-style: none;
+}
+
+.button--beta:hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-info);
+    border-style: none;
+}
+
+/* btn note */
+.button--note {
+    background-color: var(--ifm-color-gray-300);
+    color: var(--ifm-color-gray-800);
+    border: 1px solid var(--ifm-color-gray-800);
+}
+
+.button--note:not(.button--outline) {
+    background-color: var(--ifm-color-gray-300);
+    color: var(--ifm-color-gray-800);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-gray-800);
+}
+
+.button--note:hover, .button--note:not(.button--outline):hover {
+    color: var(--ifm-color-gray-800);
+    background-color: var(--ifm-color-gray-100);
+    border-style: none;
+    border: 1px solid var(--ifm-color-gray-800);
+}
+
+/* btn success */
+.button--success {
+    background-color: var(--ifm-color-success-darkest);
+    color: var(--ifm-color-white);
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--success:not(.button--outline) {
+    background-color: var(--ifm-color-success-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--success:hover, .button--success:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-success);
+    border-style: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* btn info */
+.button--info {
+    background-color: var(--ifm-color-info-darkest);
+    color: var(--ifm-color-white);
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--info:not(.button--outline) {
+    background-color: var(--ifm-color-info-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--info:hover, .button--info:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-info-dark);
+    border-style: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* btn warning */
+.button--warning {
+    background-color: var(--ifm-color-warning-darkest);
+    color: var(--ifm-color-white);
+}
+
+.button--warning:not(.button--outline) {
+    background-color: var(--ifm-color-warning-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--warning:hover, .button--warning:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-warning-darker);
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* btn danger */
+.button--danger {
+    background-color: var(--ifm-color-danger-darkest);
+    color: var(--ifm-color-white);
+}
+
+.button--danger:not(.button--outline) {
+    background-color: var(--ifm-color-danger-darkest);
+    color: var(--ifm-color-white);
+    text-decoration: none;
+    border: 1px solid var(--ifm-color-white);
+}
+
+.button--danger:hover, .button--danger:not(.button--outline):hover {
+    color: var(--ifm-color-secondary);
+    background-color: var(--ifm-color-danger);
+    border: 1px solid var(--ifm-color-white);
+}
+
+/* button "La doc de Froggit" */
+.breadcrumbs__item--active .breadcrumbs__link {
+    background: var(--ifm-breadcrumb-item-background-active);
+    color: var(--ifm-color-warning);
+}

src/css/custom.css

 @import url("variables.css");
+@import url("buttons.css");
 @import url("fonts.css");
 @import url("footer.css");
 @import url("dark-theme.css");
@@ -126,48 +127,6 @@ ul {
   padding-bottom: 20px;
 }
 
-.btn-little-txt {
-  font-size: small;
-}
-
-/***** BUTTON *****/
-.button {
-  margin: 10px;
-  border-color: var(--ifm-color-success);
-  color: var(--ifm-color-frame);
-  border-style: none;
-  white-space : initial;
-  font-family: var(--ifm-font-family-base);
-}
-
-.button--beta {
-  border-color: var(--ifm-color-success);
-  border-style: none;
-  background-color: var(--ifm-color-frame);
-  color: var(--ifm-color-black);
-}
-
-.button--beta:hover {
-  color: var(--ifm-color-secondary);
-  background-color: var(--ifm-color-success);
-  border-style: none;
-}
-
-.button--warning {
-  color: var(--ifm-color-success);
-  border-style: none;
-}
-
-.button--warning:hover, .button--warning:not(.button--outline):hover {
-  color: var(--ifm-color-secondary);
-  background-color: var(--ifm-color-info);
-  border-style: none;
-}
-
-.button--warning:not(.button--outline) {
-  background-color: var(--ifm-color-frame);
-}
-
 /******* MAIN ELEM *******/
 .section-promises {
   padding: 4rem 0;
@@ -239,12 +198,6 @@ ul {
   color: var(--ifm-color-warning);
 }
 
-/* button "La doc de Froggit" */
-.breadcrumbs__item--active .breadcrumbs__link {
-  background: var(--ifm-breadcrumb-item-background-active);
-  color: var(--ifm-color-warning);
-}
-
 /****** MEDIA SCREEN *******/
 @media screen and (max-width:330px) {
   .navbar {

src/css/dark-theme.css

@@ -40,13 +40,6 @@ html[data-theme='dark'] .clean-btn :hover {
     color: var(--ifm-color-secondary);
 }
 
-/* dark theme button*/
-html[data-theme='dark'] .button--beta:hover {
-    color: var(--ifm-color-secondary);
-    background-color: var(--ifm-color-info);
-    border-style: none;
-}
-
 /* a & text */
 html[data-theme='dark'] .theme-doc-footer-edit-meta-row a {
    color: var(--ifm-color-warning);

src/pages/dummy_page.mdx

@@ -13,11 +13,32 @@ Page factice penser à créer une vraie page !
 echo "Hello World"
 ```
 
-## Hello mon carousel Libre !
+<button className="button button--note">button--note</button>
+<button className="button button--success">button--success</button>
+<button className="button button--info">button--info</button>
+<button className="button button--warning">button--warning</button>
+<button className="button button--danger">button--danger</button>
 
-<div>
-    <CarouselLibre />
-</div>
+
+:::note Encart note
+🔜 **Les tarifs arrivent !** <a class="button button--note" href="#">Bouton note !</a>
+:::
+
+:::success Encart success
+🔜 **Les tarifs arrivent !** <a class="button button--success" href="#">Bouton success !</a>
+:::
+
+:::info Encart info
+🔜 **Les tarifs arrivent !** <a class="button button--info" href="#">Bouton info !</a>
+:::
+
+:::caution Encart caution
+🔜 **Les tarifs arrivent !** <a class="button button--warning" href="#">Bouton caution !</a>
+:::
+
+:::danger Encart danger
+🔜 **Les tarifs arrivent !** <a class="button button--danger" href="#">Bouton danger !</a>
+:::
 
 :::note