feat: add froggit colors on admonitions

src/css/custom.css

@@ -30,7 +30,11 @@
   --ifm-color-tonic-one: #E07931;
   --ifm-color-tonic-two: #B3433B;
   --ifm-color-tonic-three: #805D93;
+  --ifm-color-tonic-three-light: #B39BBF;
   --ifm-color-primary-light: #ffffff;
+  --ifm-color-gray-100: #f5f6f7;
+  --ifm-color-gray-700: #646960;
+  --ifm-code-background: #f1f1f1;
   --ifm-link-color: #E07931;
   --ifm-button-color: var(--ifm-color-primary);
   --ifm-code-font-size: 95%; 
@@ -41,6 +45,35 @@
   --ifm-container-max-width: 950px;
   --ifm-navbar-shadow: none;
   --ifm-button-shadow: 1px 3px 4px #b6b6b6;
+  --ifm-color-success: var(--ifm-color-dark-green);
+  --ifm-color-info: var(--ifm-color-tonic-three);
+  --ifm-color-warning: var(--ifm-color-tonic-one);
+  --ifm-color-danger: var(--ifm-color-tonic-two);
+  --ifm-color-success-contrast-background: var(--ifm-color-dark-green);
+  --ifm-color-info-contrast-background: var(--ifm-color-tonic-three);
+  --ifm-color-warning-contrast-background: var(--ifm-color-tonic-one);
+  --ifm-color-danger-contrast-background: var(--ifm-color-tonic-two);
+  --ifm-alert-border-color:var(--ifm-color-tonic-two);
+  --ifm-alert--warning-border-color:var(--ifm-color-tonic-one);
+  --ifm-alert--danger-border-color:var(--ifm-color-tonic-two);
+  --ifm-pre-background: var(--prism-background-color);
+  --ifm-color-secondary-contrast-background: var(--ifm-color-gray-100);
+  --ifm-color-success-dark: var(--ifm-color-light-green);
+  --ifm-color-info-dark: var(--ifm-color-tonic-three-light);
+  --ifm-color-warning-dark: var(--ifm-color-frame);
+  --ifm-color-danger-dark: var(--ifm-color-tonic-one);
+  --ifm-color-success-contrast-foreground: var(--ifm-color-primary-light);
+  --ifm-color-info-contrast-foreground: var(--ifm-color-primary-light);
+  --ifm-color-warning-contrast-foreground: var(--ifm-color-primary-light);
+  --ifm-color-danger-contrast-foreground: var(--ifm-color-primary-light);
+}
+ 
+html[data-theme='dark'] {
+  --ifm-color-secondary-contrast-background: var(--ifm-color-gray-700);
+  --ifm-color-success-contrast-background: var(--ifm-color-dark-green);
+  --ifm-color-info-contrast-background: var(--ifm-color-tonic-three);
+  --ifm-color-warning-contrast-background: var(--ifm-color-tonic-one);
+  --ifm-color-danger-contrast-background: var(--ifm-color-tonic-two);
 }
 
 .docusaurus-highlight-code-line {
@@ -196,12 +229,16 @@ ul {
   border-style: none;
 }
 
-.button--warning:hover {
+.button--warning:hover, .button--warning:not(.button--outline):hover {
   color: var(--ifm-color-primary-light);
   background-color: var(--ifm-color-tonic-three);
   border-style: none;
 }
 
+.button--warning:not(.button--outline) {
+  background-color: var(--ifm-color-frame);
+}
+
 /***** dark theme button ******/
 html[data-theme='dark'] .button--beta:hover {
   color: var(--ifm-color-primary-light);

src/pages/dummy_page.md

@@ -6,3 +6,38 @@ description: "page factice"
 # Page factice
 
 Page factice penser à créer une vraie page !
+
+```bash
+#!/bin/bash
+echo "Hello World"
+```
+
+:::note
+
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+:::tip
+
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+:::info
+
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+:::caution
+
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+:::danger
+
+Some **content** with _markdown_ `syntax`. Check [this `api`](#).
+
+:::