Update JS Doc deps and fix some links

SASS updated with a massive deprecation of import

docs/src/markdown/about/changelog.md

@@ -228,7 +228,7 @@
 
 ## 9.0
 
-Please see [Migration Notes](./releases/9.0.md#9.0) for details on upgrading to 9.0.
+Please see [Migration Notes](./releases/9.0.md) for details on upgrading to 9.0.
 
 -   **NEW**: Arithmatex: Wrap MathJax "script" format (non-preview) with a container element just like all other
     Arithmatex output formats.
@@ -303,7 +303,7 @@ Please see [Migration Notes](./releases/9.0.md#9.0) for details on upgrading to
 
 ## 8.0
 
-Please see [Migration Notes](./releases/8.0.md#8.0) for details on upgrading to 8.0.
+Please see [Migration Notes](./releases/8.0.md) for details on upgrading to 8.0.
 
 -   **NEW**: Added SaneHeaders extension.
 -   **NEW**: SuperFences \& InlineHilite: gracefully handle failing custom formatters and/or validators. Users should
@@ -319,7 +319,7 @@ Please see [Migration Notes](./releases/8.0.md#8.0) for details on upgrading to
     attributes. JavaScript highlighter options should be defined in the brace header form with `attr_list` enabled in
     order to generate appropriate, compatible HTML with the chosen JavaScript highlighter.
 -   **NEW**: SuperFences: backwards incompatible changes where made to custom fence API. See
-    [Migration Notes](./releases/8.0.md#8.0) for instructions on how to migrate to the new API. Some temporary support
+    [Migration Notes](./releases/8.0.md) for instructions on how to migrate to the new API. Some temporary support
     for most of the old format is in place, but is deprecated.
 -   **NEW**: SuperFences: has removed legacy code tab feature. Associated `legacy_tab_classes` option has been removed.
     Please use the Tabbed extension to create general purpose tabs for code blocks or other content.
@@ -350,7 +350,7 @@ Please see [Migration Notes](./releases/8.0.md#8.0) for details on upgrading to
 
 ## 7.0
 
-Please see [Migration Notes](./releases/7.0.md#7.0) for details on upgrading to 7.0.
+Please see [Migration Notes](./releases/7.0.md) for details on upgrading to 7.0.
 
 -   **NEW**: MagicLink will now shorten user name and repository links when link shortening is enabled.
 -   **NEW**: Added MagicLink options `social_url_shortener` and `shortener_user_exclude` were added.
@@ -435,7 +435,7 @@ Please see [Migration Notes](./releases/7.0.md#7.0) for details on upgrading to
 
 ## 6.0
 
-Please see [Migration Notes](./releases/6.0.md#6.0) for details on upgrading to 6.0.0.
+Please see [Migration Notes](./releases/6.0.md) for details on upgrading to 6.0.0.
 
 -   **NEW**: Allow custom inline highlight code blocks. (!380)
 -   **NEW**: SuperFences now has one custom format convention which now also accepts the markdown class object to allow

docs/src/markdown/extensions/blocks/plugins/html.md

@@ -66,7 +66,7 @@ Markdown\ Modes | Description
 `block`         | Parsed block content will be handled by the Markdown parser as content under a block element.
 `inline`        | Parsed block content will be handled by the Markdown parser as content under an inline element.
 `raw`           | Parsed block content will be preserved. No additional Markdown parsing will be applied. Content will be HTML escaped to preserve the content as is.
-`auto`          | Depending on whether the wrapping parent is a block element, inline element, or something like a code element, Blocks will choose the best approach for the content. Decision is made based on the element returned by the [`on_add` event](#on_add-event).
+`auto`          | Depending on whether the wrapping parent is a block element, inline element, or something like a code element, Blocks will choose the best approach for the content. Decision is made based on the element returned by the [`on_add` event](../api.md#on_add-event).
 `html`          | Like `raw`, content will be preserved, but the content will _not_ be HTML escaped and will be passed through as unmodified HTML. Any required sanitizing should be provided by the user post Markdown processing.
 
 /// tip | Raw and HTML Mode

docs/src/markdown/extensions/caret.md

@@ -18,7 +18,7 @@ md = markdown.Markdown(extensions=['pymdownx.caret'])
 ## Insert
 
 To wrap content in an **insert** tag, simply surround the text with double `^`. You can also enable `smart_insert` in
-the [options](#options). Smart behavior of **insert** models that of [BetterEm](betterem.md#differences).
+the [options](#options). Smart behavior of **insert** models that of [BetterEm](betterem.md#rules).
 
 ```text title="Insert"
 ^^Insert me^^

docs/src/markdown/extensions/mark.md

@@ -6,7 +6,7 @@
 
 Mark adds the ability to insert `#!html <mark></mark>` tags.  The syntax requires the text to be surrounded by double
 equal signs. It can optionally be configured to use smart logic. Syntax behavior for smart and non-smart variants of
-**mark** models that of [BetterEm](betterem.md#differences).
+**mark** models that of [BetterEm](betterem.md#rules).
 
 To Mark some text, simply surround the text with double `=`.
 

docs/src/markdown/extensions/saneheaders.md

@@ -10,9 +10,9 @@ as long as no spaces follow the `#` at the beginning of a line.
 
 Currently, Pymdown Extensions has two extensions where SaneHeaders can help.
 
-1.  [MagicLink's issue syntax](./magiclink.md#issues-and-pull-requests) uses hashes followed by numbers (`#998`) to
-    represent issue links. There may be extensions that use names after hashes to provide tags (`#tag`). With
-    SaneHeaders, these syntaxes can coexist. Those familiar with CommonMark may recognize this behavior.
+1.  [MagicLink's issue syntax](./magiclink.md#issues-pull-requests-and-discussions) uses hashes followed by numbers
+    (`#998`) to represent issue links. There may be extensions that use names after hashes to provide tags (`#tag`).
+    With SaneHeaders, these syntaxes can coexist. Those familiar with CommonMark may recognize this behavior.
 
 2.  [FancyLists' syntax](./fancylists.md) exposes a generic ordered list style that doesn't require you to provide
     numbers. This syntax utilize the `#.` marker for list items.

docs/src/markdown/extensions/superfences.md

@@ -701,7 +701,7 @@ see the [FAQ](../faq.md#function-references-in-yaml) to see how to specify funct
 
 /// new | New 7.0
 The addition of the parameters `classes` and `id_value` is new in 7.0. If injecting additional classes or ids via
-[brace headers](#injecting-classes-and-ids), only then will `classes` and `id_value` be passed in to preserve
+[brace headers](#injecting-classes-ids-and-attributes), only then will `classes` and `id_value` be passed in to preserve
 backwards compatibility with old custom formatters. Users, moving forward, should at the very least update their
 formatters with `**kwargs` to future proof their custom formatters in case additional parameters are added in the
 future.

docs/src/markdown/extensions/tilde.md

@@ -17,7 +17,7 @@ md = markdown.Markdown(extensions=['pymdownx.tilde'])
 ## Delete
 
 To wrap content in a **delete** tag, simply surround the text with double `~`. You can also enable `smart_delete` in the
-[options](#options). Smart behavior of **delete** models that of [BetterEm](betterem.md#differences).
+[options](#options). Smart behavior of **delete** models that of [BetterEm](betterem.md#rules).
 
 ```text title="Delete"
 ~~Delete me~~

docs/src/scss/_general.scss

@@ -1,16 +1,21 @@
+@use "material-color";
+@use "palette/dracula";
+@use "utilities/break";
+@use "utilities/convert";
+
 /* Normal colors */
 :root {
-  --md-heart: #{$clr-red-a200};
-  --md-heart-big: #{$clr-red-a400};
+  --md-heart: #{material-color.$clr-red-a200};
+  --md-heart-big: #{material-color.$clr-red-a400};
 
   :focus-visible {
     outline-style: solid;
   }
 
   /* Dark mode colors */
   [data-md-color-scheme="dracula"] {
-    --md-heart: #{$drac-pink};
-    --md-heart-big: #{$drac-red};
+    --md-heart: #{dracula.$drac-pink};
+    --md-heart-big: #{dracula.$drac-red};
   }
 }
 
@@ -22,7 +27,7 @@
 
     a.source-link {
         position: relative;
-        top: px2rem(-12px);
+        top: convert.px2rem(-12px);
         float: right;
         color: var(--md-default-fg-color--lighter);
         transition: color 125ms;
@@ -32,17 +37,17 @@
         }
 
         .twemoji {
-            height: px2rem(24px);
+            height: convert.px2rem(24px);
 
             svg {
-                width: px2rem(24px);
-                height: px2rem(24px);
+                width: convert.px2rem(24px);
+                height: convert.px2rem(24px);
             }
         }
     }
 
     div.highlight.md-max-height pre > code {
-      max-height: px2rem(300px);
+      max-height: convert.px2rem(300px);
     }
 }
 
@@ -69,8 +74,8 @@ footer.sponsorship {
 
   hr {
     display: inline-block;
-    width: px2rem(32px);
-    margin: 0 px2rem(14px);
+    width: convert.px2rem(32px);
+    margin: 0 convert.px2rem(14px);
     vertical-align: middle;
     border-bottom: 2px solid var(--md-default-fg-color--lighter);
   }
@@ -128,7 +133,7 @@ body {
   z-index: 0;
 }
 
-@include break-to-device(tablet portrait) {
+@include break.break-to-device(tablet portrait) {
   .md-header-nav__scheme {
     padding-right: 0;
   }

docs/src/scss/_material.scss

@@ -1,3 +1,6 @@
+@use "utilities/break";
+@use "utilities/convert";
+
 html {
   background-color: transparent;
 }
@@ -24,11 +27,11 @@ html {
   .md-header {
     color: var(--md-text-color);
     background-color: var(--md-header-bg-color);
-    border-bottom: px2rem(1px) solid var(--md-primary-fg-color);
+    border-bottom: convert.px2rem(1px) solid var(--md-primary-fg-color);
 
     &[data-md-state=shadow] {
-        box-shadow: 0 0 px2rem(4px) rgba(0,0,0,.15),
-                    0 0 px2rem(4px) px2rem(8px) rgba(0,0,0,.2);
+        box-shadow: 0 0 convert.px2rem(4px) rgba(0,0,0,.15),
+                    0 0 convert.px2rem(4px) convert.px2rem(8px) rgba(0,0,0,.2);
     }
   }
 
@@ -80,7 +83,7 @@ html {
     }
   }
 
-  @include break-to-device(tablet) {
+  @include break.break-to-device(tablet) {
 
     .md-nav--primary .md-nav__item--active > .md-nav__link:not(:hover) {
       color: var(--md-primary-fg-color);
@@ -90,11 +93,11 @@ html {
     .md-nav--primary .md-nav__title {
       color: var(--md-text-color);
       background-color: var(--md-header-bg-color);
-      border-bottom: px2rem(1px) solid var(--md-primary-fg-color);
+      border-bottom: convert.px2rem(1px) solid var(--md-primary-fg-color);
     }
   }
 
-  @include break-to-device(tablet portrait) {
+  @include break.break-to-device(tablet portrait) {
 
     // Repository containing source
     .md-nav__source {
@@ -105,7 +108,7 @@ html {
     .md-nav .md-nav__title {
       color: var(--md-text-color);
       background-color: var(--md-header-bg-color);
-      border-bottom: px2rem(1px) solid var(--md-primary-fg-color);
+      border-bottom: convert.px2rem(1px) solid var(--md-primary-fg-color);
     }
   }
 
@@ -145,7 +148,7 @@ html {
     }
 
     &-meta {
-      border-top: px2rem(1px) solid var(--md-primary-fg-color);
+      border-top: convert.px2rem(1px) solid var(--md-primary-fg-color);
     }
   }
 
@@ -185,8 +188,8 @@ html {
 
   // Override native scrollbar styles
   &::-webkit-scrollbar {
-    width: px2rem(4px);
-    height: px2rem(4px);
+    width: convert.px2rem(4px);
+    height: convert.px2rem(4px);
   }
 
   &::-webkit-scrollbar-corner {

docs/src/scss/extensions/_admonition.scss

@@ -1,36 +1,39 @@
 @use "sass:color";
+@use "material-color";
+@use "../utilities/convert";
+@use "../palette/dracula";
 
 .md-typeset .admonition {
   border-width: 0;
   border-left-width: 4px;
 }
 
 $new-admonitions: (
-  settings config: $drac-pink $clr-purple-a700 "@mdi/svg/svg/cog.svg",
-  new: $drac-yellow $clr-yellow-a700 "@mdi/svg/svg/alert-decagram.svg"
+  settings config: dracula.$drac-pink material-color.$clr-purple-a700 "@mdi/svg/svg/cog.svg",
+  new: dracula.$drac-yellow material-color.$clr-yellow-a700 "@mdi/svg/svg/alert-decagram.svg"
 ) !default;
 
   $old-admonitions: (
-    note:                       $drac-dark-yellow,
-    abstract:                   $drac-cyan,
-    info:                       $drac-light-blue,
-    tip:                        $drac-teal,
-    success:                    $drac-green,
-    question:                   $drac-light-green,
-    warning:                    $drac-orange,
-    failure:                    $drac-dark-red,
-    danger:                     $drac-red,
-    bug:                        $drac-dark-pink,
-    example:                    $drac-purple,
-    quote:                      $drac-grey
+    note:                       dracula.$drac-dark-yellow,
+    abstract:                   dracula.$drac-cyan,
+    info:                       dracula.$drac-light-blue,
+    tip:                        dracula.$drac-teal,
+    success:                    dracula.$drac-green,
+    question:                   dracula.$drac-light-green,
+    warning:                    dracula.$drac-orange,
+    failure:                    dracula.$drac-dark-red,
+    danger:                     dracula.$drac-red,
+    bug:                        dracula.$drac-dark-pink,
+    example:                    dracula.$drac-purple,
+    quote:                      dracula.$drac-grey
   ) !default;
 
 /* Style new admonitions with dark or light colors */
 :root > * {
   --md-admonition-bg-color: transparent;
 
   &[data-md-color-scheme="dracula"] {
-    --md-admonition-icon-color: $drac-dark-yellow;
+    --md-admonition-icon-color: dracula.$drac-dark-yellow;
   }
 
   @each $names, $prop in $new-admonitions {
@@ -69,7 +72,7 @@ $new-admonitions: (
   box-shadow: var(--md-shadow-z2);
 
   &:focus-within {
-    box-shadow: 0 0 0 px2rem(4px) var(--md-admonition-shadow-color--note);
+    box-shadow: 0 0 0 convert.px2rem(4px) var(--md-admonition-shadow-color--note);
   }
 
   > .admonition-title {
@@ -95,7 +98,7 @@ $new-admonitions: (
       border-color: var(--md-admonition-icon-color--#{$name});
 
       &:focus-within {
-        box-shadow: 0 0 0 px2rem(4px) var(--md-admonition-shadow-color--#{$name});
+        box-shadow: 0 0 0 convert.px2rem(4px) var(--md-admonition-shadow-color--#{$name});
       }
 
       // Define base class
@@ -132,7 +135,7 @@ $new-admonitions: (
     border-color: var(--md-admonition-icon-color--#{$name});
 
     &:focus-within {
-      box-shadow: 0 0 0 px2rem(4px) var(--md-admonition-shadow-color--#{$name});
+      box-shadow: 0 0 0 convert.px2rem(4px) var(--md-admonition-shadow-color--#{$name});
     }
 
     > .admonition-title {
@@ -141,10 +144,10 @@ $new-admonitions: (
 
       // Icon
       &::before {
-        width: px2rem(20px);
-        height: px2rem(20px);
+        width: convert.px2rem(20px);
+        height: convert.px2rem(20px);
         background-color: var(--md-admonition-icon-color--#{$name});
-        background-size: px2rem(20px);
+        background-size: convert.px2rem(20px);
         mask-image: var(--md-admonition-icon--#{$name});
         content: "\a0";
       }