STYLE: style admonitions (#1043)

* change default admonition icon * align seealso on rtd * style todo * make secondary as yellow * make the bell the default icon * update the colors * refactor CSS color vars for admonitions Co-authored-by: Daniel McCloy <dan@mccloy.info>
pydata · Nov 8, 2022 · 92045be · 92045be
1 parent 7119c24
commit 92045be
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
@@ -60,14 +60,14 @@ div.admonition,
   }
 
   &.attention {
-    border-color: var(--pst-color-warning);
+    border-color: var(--pst-color-attention);
     > .admonition-title {
       &:before {
-        background-color: var(--pst-color-warning);
+        background-color: var(--pst-color-attention);
       }
 
       &:after {
-        color: var(--pst-color-warning);
+        color: var(--pst-color-attention);
         content: var(--pst-icon-admonition-attention);
       }
     }
@@ -158,14 +158,14 @@ div.admonition,
   }
 
   &.important {
-    border-color: var(--pst-color-success);
+    border-color: var(--pst-color-attention);
     > .admonition-title {
       &:before {
-        background-color: var(--pst-color-success);
+        background-color: var(--pst-color-attention);
       }
 
       &:after {
-        color: var(--pst-color-success);
+        color: var(--pst-color-attention);
         content: var(--pst-icon-admonition-important);
       }
     }
@@ -199,6 +199,20 @@ div.admonition,
     }
   }
 
+  &.admonition-todo {
+    border-color: var(--pst-color-border);
+    > .admonition-title {
+      &:before {
+        background-color: var(--pst-color-border);
+      }
+
+      &:after {
+        color: var(--pst-color-border);
+        content: var(--pst-icon-admonition-todo);
+      }
+    }
+  }
+
   /**
    * Special-case for a `sidebar` class that makes the admonition float to
    * the right like the {sidebar} directive.
@@ -216,6 +230,10 @@ div.admonition,
     // TODO: these semantic-color-names border-color rules might no longer be
     //       needed when we drop support for Sphinx 4 / docutils 0.17
     &.attention,
+    &.important {
+      border-color: var(--pst-color-attention);
+    }
+
     &.caution,
     &.warning {
       border-color: var(--pst-color-warning);
@@ -228,11 +246,12 @@ div.admonition,
 
     &.hint,
     &.tip,
-    &.important {
+    &.seealso {
       border-color: var(--pst-color-success);
     }
 
-    &.note {
+    &.note,
+    &.todo {
       border-color: var(--pst-color-info);
     }
 

diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_admonitions.scss b/src/pydata_sphinx_theme/assets/styles/variables/_admonitions.scss
@@ -3,7 +3,7 @@ html {
   * Admonitions
   **/
 
-  --pst-icon-admonition-default: var(--pst-icon-info-circle);
+  --pst-icon-admonition-default: var(--pst-icon-bell);
   --pst-icon-admonition-note: var(--pst-icon-info-circle);
   --pst-icon-admonition-attention: var(--pst-icon-exclamation-circle);
   --pst-icon-admonition-caution: var(--pst-icon-exclamation-triangle);
@@ -14,4 +14,5 @@ html {
   --pst-icon-admonition-tip: var(--pst-icon-lightbulb);
   --pst-icon-admonition-important: var(--pst-icon-exclamation-circle);
   --pst-icon-admonition-seealso: var(--pst-icon-share);
+  --pst-icon-admonition-todo: var(--pst-icon-pencil);
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss
@@ -13,21 +13,25 @@ $pst-semantic-colors: (
     "light": rgb(40, 167, 69),
     "dark": rgb(72, 135, 87),
   ),
+  "attention": (
+    "light": rgb(255, 193, 7),
+    "dark": rgb(220, 169, 15),
+  ),
   "danger": (
     "light": rgb(220, 53, 69),
     "dark": rgb(203, 70, 83),
   ),
   "text-base": (
-    // Black + 50
     "light": rgb(50, 50, 50),
-    // White - 50
+    // Black + 50
     "dark": rgb(206, 206, 206),
+    // White - 50
   ),
   "text-muted": (
-    // Twice as far from 0 as base
     "light": rgb(100, 100, 100),
-    // Twice as far from 256 as base
+    // Twice as far from 0 as base
     "dark": rgb(166, 166, 166),
+    // Twice as far from 256 as base
   ),
   "shadow": (
     "light": rgb(216, 216, 216),
@@ -93,7 +97,7 @@ $pst-semantic-colors: (
     }
     // assign the "duplicate" colors (ones that just reference other variables)
     --pst-color-link: var(--pst-color-primary);
-    --pst-color-link-hover: var(--pst-color-secondary);
+    --pst-color-link-hover: var(--pst-color-warning);
     // adapt to light/dark-specific content
     @if $mode == "light" {
       .only-dark {

diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss b/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss
@@ -21,4 +21,6 @@ html {
   --pst-icon-github: "\f09b"; // fa-brands fa-github
   --pst-icon-gitlab: "\f296"; // fa-brands fa-gitlab
   --pst-icon-share: "\f064"; // fa-solid fa-share
+  --pst-icon-bell: "\f0f3"; // fa-solid fa-bell
+  --pst-icon-pencil: "\f303"; // fa-solid fa-pencil
 }