Resolve "change admonitions colors"

Closes #49 (closed) #86 (closed)

src/css/custom.css

@@ -42,7 +42,21 @@
   --ifm-container-max-width: 950px;
   --ifm-navbar-shadow: none;
   --ifm-button-shadow: 1px 3px 4px #b6b6b6;
-  --ifm-table-cell-color : #f7f7f7;
+  --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);
+}
+ 
+html[data-theme='dark'] {
+  --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 {
@@ -104,70 +118,6 @@ input {
   padding-bottom: 2.5rem !important;
 }
 
-/******* ADMONITIONS COLORS ********/
-/* Note */
-.alert--secondary {
-  color: var(--ifm-color-dark-green);
-  border-color: 1px solid var(--ifm-color-dark-green);
-  background-color: var(--ifm-table-cell-color);
-}
-
-.alert--secondary a {
-  color: var(--ifm-color-dark-green);
-}
-
-/* Tip */
-.alert--success {
-  background-color: var(--ifm-color-light-green);
-  border-color: var(--ifm-color-dark-green);
-  color: var(--ifm-color-primary-light);
-}
-
-.alert--success a {
-  color: var(--ifm-color-primary-light);
-  text-decoration-color: var(--ifm-color-primary-light);
-}
-
-.admonition-icon path {
-  color: var(--ifm-color-frame);
-}
-
-/* Info */
-.alert--info {
-  background-color: var(--ifm-color-tonic-three);
-  border-color: var(--ifm-color-tonic-three-light);
-  color: var(--ifm-color-primary-light);
-}
-
-.alert--info a {
-  color: var(--ifm-color-primary-light);
-  text-decoration-color: var(--ifm-color-primary-light);
-}
-
-/* Alert */
-.alert--warning {
-  background-color: var(--ifm-color-tonic-one);
-  border-color: var(--ifm-color-frame);
-  color: var(--ifm-color-primary-light);
-}
-
-.alert--warning a {
-  color: var(--ifm-color-primary-light);
-  text-decoration-color: var(--ifm-color-primary-light);
-}
-
-/* Danger */
-.alert--danger {
-  background-color: var(--ifm-color-tonic-two);
-  border-color: var(--ifm-color-tonic-one);
-  color: var(--ifm-color-primary-light);
-}
-
-.alert--danger a {
-  color: var(--ifm-color-primary-light);
-  text-decoration-color: var(--ifm-color-primary-light);
-}
-
 /********* TABLE OF CONTENT ********/
 .table-of-contents__link:hover, .table-of-contents__link--active {
   color: var(--ifm-color-tonic-one);
@@ -262,12 +212,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);
@@ -297,6 +251,11 @@ html[data-theme='dark'] .button--beta:hover {
   flex-direction: row-reverse;
 }
 
+/********** Admonitions **********/
+.admonition-tip, .admonition-info, .admonition-caution, .admonition-danger, .admonition-tip a, .admonition-info a, .admonition-caution a, .admonition-danger a {
+  color: var(--ifm-color-primary-light);
+}
+
 /************ footer style ***********/
 a.footer__link-item:hover {
   color:  var(--ifm-color-frame);