@wwtdev/bsds-css 3.0.1 → 3.0.3

package/dist/wwt-bsds-components.css

@@ -767,7 +767,7 @@ Custom properties:
 .bs-toast-deprecated {
     --toast-transform: translate(0, calc(100% + 1.5rem));
 
-    background-color: var(--bs-bg-base-elevated);
+    background-color: var(--bs-bg-base-to-light);
     border-top: 4px solid var(--bs-primary-base);
     bottom: 1.5rem;
     box-shadow: var(--bs-shadow-contentMedium);
@@ -4097,13 +4097,13 @@ label:where(.bs-label) {
 }
 /* Deprecated; use "data-status positive" instead */
 .bs-pill:where([data-status^="complete"]) {
-  --status-color: var(--bs-purple-500);
+  --status-color: var(--bs-purple-400);
   --pill-background: var(--bs-purple-100);
 }
 /* Dark mode selector for complete */
 :where(.dark) .bs-pill:where([data-status^="complete"]) {
   --status-color: var(--bs-purple-100);
-  --pill-background: var(--bs-purple-500);
+  --pill-background: var(--bs-purple-400);
 }
 /* ------------------------------ Filter Styles ------------------------------ */
 .bs-pill:where([data-variant^="filter"]) {
@@ -5183,27 +5183,22 @@ a.bs-text-button {
   --toggle-color: var(--bs-white);
   --top-offset: 48px;
 }
-.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"]) {
+.dark :where(.bs-vertical-nav-wrapper) {
+  --bg-color: var(--bs-bg-base);
+  --border-color: var(--bs-border-medium);
+}
+.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"]),
+.dark :where(.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"])) {
   --active-color: var(--bs-blue-10);
   --bg-color: var(--bs-bg-base);
   --border-color: var(--bs-border-medium);
   --text-color: var(--bs-ink-medium);
   --link-color: var(--bs-ink-medium);
-  --link-hover-color: var(--bs-ink-blue);
-  --link-active-color: var(--bs-ink-blue);
+  --link-hover-color: var(--bs-ink-primary);
+  --link-active-color: var(--bs-ink-primary);
   --toggle-bg-color: var(--bs-bg-base);
   --toggle-color: var(--bs-ink-medium);
 }
-.dark :where(.bs-vertical-nav-wrapper),
-.dark :where(.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"])) {
-  --active-color: rgba(255, 255, 255, 0.25);
-  --bg-color: var(--bs-bg-base);
-  --border-color: var(--bs-border-medium);
-  --text-color: var(--bs-white);
-  --link-color: var(--bs-white);
-  --link-hover-color: var(--bs-white);
-  --link-active-color: var(--bs-white);
-}
 .bs-vertical-nav {
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   background-color: var(--bg-color);
@@ -5247,6 +5242,11 @@ a.bs-text-button {
     visibility: visible;
     pointer-events: auto;
     width: var(--bs-vertical-nav-width);
+    position: fixed;
+  }
+
+  .bs-vertical-nav:where([data-sticky="true"]) {
+    position: sticky;
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) {
@@ -5468,7 +5468,7 @@ a.bs-text-button {
   font-weight: 600;
 }
 .bs-vertical-nav-section:where([data-app-links="true"]) :where(ul li a:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
 }
 .bs-vertical-nav :where(ul li a[data-active="true"]) {
   background-color: var(--active-color);
@@ -6059,6 +6059,20 @@ a.bs-text-button {
   height: var(--bs-space-4);
   width: var(--bs-space-4);
 }
+/* turn off auto-added icon if consumer adds their own BsIcon to the html */
+.bs-toast :where(.bs-pop-header:has(.bs-icon), .bs-pop-title:has(.bs-icon)) {
+
+  &::before {
+    display: none;
+  }
+
+  :where(.bs-icon) {
+    color: var(--toast-icon-color);
+    flex-shrink: 0;
+    height: var(--bs-space-4);
+    width: var(--bs-space-4);
+  }
+}
 /* Toast Body */
 .bs-toast :where(.bs-pop-body) {
   color: var(--bs-ink-light);