@wwtdev/bsds-css 1.6.5 → 1.8.0

package/dist/wwt-bsds.css

@@ -37,11 +37,13 @@
   --bs-navy-300: #555775;
   --bs-navy-400: #1d1e48;
   --bs-navy-500: #131431;
+  --bs-navy-600: #070822;
   --bs-orange-10: rgba(250, 70, 22, 0.1);
   --bs-orange-100: #fed1c5;
   --bs-orange-200: #fda58d;
   --bs-orange-300: #fc7755;
   --bs-orange-400: #fa4616;
+  --bs-orange-500: #ea6712;
   --bs-orange-warning: #ea6712;
   --bs-pink-100: #f6cbe0;
   --bs-pink-200: #eb7eaf;
@@ -53,6 +55,7 @@
   --bs-purple-200: #bf8adf;
   --bs-purple-300: #a154d0;
   --bs-purple-400: #8212c4;
+  --bs-gray-50: #f7f7fc;
   --bs-gray-100: #f0f0fa;
   --bs-gray-200: #c9cad9;
   --bs-gray-300: #a3a4b7;
@@ -256,15 +259,71 @@ button {
 :root,
 :host {
   --bs-bg-base: var(--bs-white);
-  --bs-bg-subtle: var(--bs-gray-100);
-  --bs-bg-invert: var(--bs-navy-500);
-  --bs-bg-invert-subtle: var(--bs-navy-400);
+  --bs-bg-base-elevated: var(--bs-white);
+  --bs-bg-light: var(--bs-gray-50);
+  --bs-bg-medium: var(--bs-gray-100);
+  --bs-bg-invert-base: var(--bs-navy-500);
+  --bs-bg-invert-medium: var(--bs-navy-400);
+  --bs-bg-disabled: var(--bs-gray-200);
+
   --bs-ink-base: var(--bs-black);
   --bs-ink-medium: var(--bs-gray-500);
   --bs-ink-light: var(--bs-gray-400);
   --bs-ink-accent: var(--bs-plum-400);
-  --bs-ink-invert: var(--bs-white);
-  --bs-border: var(--bs-gray-200);
+  --bs-ink-invert: var(--bs-gray-100);
+  --bs-ink-invert-medium: var(--bs-gray-200);
+  --bs-ink-blue: var(--bs-blue-500);
+  --bs-ink-red: var(--bs-red-500);
+  --bs-ink-pink: var(--bs-pink-500);
+  --bs-ink-orange: var(--bs-orange-500);
+  --bs-hyperlink: var(--bs-purple-400);
+  --bs-ink-disabled: var(--bs-gray-400);
+
+  --bs-blue-base: var(--bs-blue-400);
+  --bs-blue-medium: var(--bs-blue-300);
+  --bs-blue-light: var(--bs-blue-200);
+  --bs-blue-lightest: var(--bs-blue-100);
+  --bs-plum-base: var(--bs-plum-400);
+  --bs-plum-medium: var(--bs-plum-300);
+  --bs-plum-light: var(--bs-plum-200);
+  --bs-plum-lightest: var(--bs-plum-100);
+  --bs-red-base: var(--bs-red-400);
+  --bs-red-medium: var(--bs-red-300);
+  --bs-red-light: var(--bs-red-200);
+  --bs-red-lightest: var(--bs-red-100);
+  --bs-royal-base: var(--bs-royal-400);
+  --bs-royal-medium: var(--bs-royal-300);
+  --bs-royal-light: var(--bs-royal-200);
+  --bs-royal-lightest: var(--bs-royal-100);
+  --bs-navy-base: var(--bs-navy-400);
+  --bs-navy-medium: var(--bs-navy-300);
+  --bs-navy-light: var(--bs-navy-200);
+  --bs-navy-lightest: var(--bs-navy-100);
+  --bs-pink-base: var(--bs-pink-400);
+  --bs-pink-medium: var(--bs-pink-300);
+  --bs-pink-light: var(--bs-pink-200);
+  --bs-pink-lightest: var(--bs-pink-100);
+  --bs-violet-base: var(--bs-violet-400);
+  --bs-violet-medium: var(--bs-violet-300);
+  --bs-violet-light: var(--bs-violet-200);
+  --bs-violet-lightest: var(--bs-violet-100);
+  --bs-orange-base: var(--bs-orange-400);
+  --bs-orange-medium: var(--bs-orange-300);
+  --bs-orange-light: var(--bs-orange-200);
+  --bs-orange-lightest: var(--bs-orange-100);
+  --bs-purple-base: var(--bs-purple-400);
+  --bs-purple-medium: var(--bs-purple-300);
+  --bs-purple-light: var(--bs-purple-200);
+  --bs-purple-lightest: var(--bs-purple-100);
+  --bs-gray-dark: var(--bs-gray-500);
+  --bs-gray-base: var(--bs-gray-400);
+  --bs-gray-medium: var(--bs-gray-300);
+  --bs-gray-light: var(--bs-gray-200);
+  --bs-gray-lightest: var(--bs-gray-100);
+
+  --bs-border-dark: var(--bs-gray-400);
+  --bs-border-base: var(--bs-gray-200);
+  --bs-border-light: var(--bs-gray-100);
 
   /* Spacing */
   --bs-content-top: 4rem;
@@ -273,19 +332,49 @@ button {
   /* Type */
   --bs-font-normal: 400;
   --bs-font-bold: 600;
+
+  /* deprecate / phase out.. */
+  --bs-bg-subtle: var(--bs-gray-100);
+  --bs-bg-invert: var(--bs-navy-500);
+  --bs-bg-invert-subtle: var(--bs-navy-400);
+  --bs-border: var(--bs-gray-200);
 }
 .dark,
 .dark :where(:host) {
-  --bs-bg-base: var(--bs-navy-500);
-  --bs-bg-subtle: #2F2F51;
-  --bs-bg-invert: var(--bs-white);
-  --bs-bg-invert-subtle: var(--bs-gray-100);
-  --bs-ink-base: var(--bs-white);
-  --bs-ink-medium: var(--bs-gray-100);
-  --bs-ink-light: var(--bs-gray-200);
-  --bs-ink-accent: var(--bs-plum-100);
+  --bs-bg-base: var(--bs-navy-600);
+  --bs-bg-base-elevated: var(--bs-navy-500);
+  --bs-bg-light: var(--bs-navy-500);
+  --bs-bg-medium: var(--bs-navy-400);
+  --bs-bg-invert-base: var(--bs-gray-100);
+  --bs-bg-invert-medium: var(--bs-gray-50);
+  --bs-bg-disabled: var(--bs-gray-500);
+
+  --bs-ink-base: var(--bs-gray-100);
+  --bs-ink-medium: var(--bs-gray-200);
+  --bs-ink-light: var(--bs-gray-300);
+  --bs-ink-accent: var(--bs-gray-100);
   --bs-ink-invert: var(--bs-black);
-  --bs-border: var(--bs-gray-400);
+  --bs-ink-invert-medium: var(--bs-gray-500);
+  --bs-ink-blue: var(--bs-blue-200);
+  --bs-ink-red: var(--bs-red-100);
+  --bs-ink-pink: var(--bs-pink-200);
+  --bs-hyperlink: var(--bs-purple-200);
+  --bs-ink-disabled: var(--bs-gray-300);
+
+  --bs-navy-base: var(--bs-navy-200);
+  --bs-plum-base: var(--bs-plum-100);
+  --bs-purple-base: var(--bs-purple-200);
+  --bs-royal-base: var(--bs-royal-200);
+  --bs-violet-base: var(--bs-violet-200);
+  --bs-gray-dark: var(--bs-gray-100);
+  --bs-gray-base: var(--bs-gray-200);
+  --bs-gray-light: var(--bs-gray-400);
+  --bs-gray-lightest: var(--bs-gray-500);
+
+  --bs-border-dark: var(--bs-gray-400);
+  --bs-border-base: var(--bs-gray-200);
+  --bs-border-light: var(--bs-gray-100);
+
   --bs-shadow-base: rgba(0, 0, 0, 0.06);
   --bs-shadow-invert: rgba(10, 11, 25, 0.60);
   --bs-shadow: -4px 4px 12px var(--bs-shadow-base),
@@ -302,6 +391,12 @@ button {
     -16px 16px 32px var(--bs-shadow-invert);
   --bs-shadow-drawerRight: -12px 12px 24px var(--bs-shadow-base),
     16px 16px 32px var(--bs-shadow-invert);
+
+  /* deprecate / phase out.. */
+  --bs-bg-subtle: #2F2F51;
+  --bs-bg-invert: var(--bs-white);
+  --bs-bg-invert-subtle: var(--bs-gray-100);
+  --bs-border: var(--bs-gray-400);
 }
 body,
 :host {
@@ -683,11 +778,11 @@ h6,
 /* Component Styles */
 .bs-accordion {
   --accordion-link-color: var(--bs-purple-400);
-  --accordion-link-outline-color: var(--bs-blue-400);
+  --accordion-link-outline-color: var(--bs-blue-base);
   --accordion-outline-color: transparent;
   --accordion-padding-inline: 0;
   --accordion-text-size: var(--bs-text-sm);
-  border-block: 1px solid var(--bs-border);
+  border-block: 1px solid var(--bs-border-base);
   display: block;
 }
 @media (min-width: 957px) {
@@ -716,7 +811,7 @@ h6,
   width: 100%;
 }
 .bs-accordion :where(header button:focus-visible) {
-  --accordion-outline-color: var(--bs-blue-400);
+  --accordion-outline-color: var(--bs-blue-base);
 }
 .bs-accordion :where(header button) > * {
   font-size: inherit;
@@ -771,10 +866,14 @@ h6,
 :where(.bs-accordion[data-stacked]) + .bs-accordion:where([data-stacked]) {
   border-block-start-color: transparent;
 }
+.bs-badge {
+  --badge-bg: var(--bs-red-base);
+  --badge-text: var(--bs-white);
+}
 .bs-badge[data-position^='left']::before,
 .bs-badge:where(:not([data-position^='left']))::after {
   align-items: center;
-  background: var(--bs-red-500);
+  background: var(--badge-bg);
   border-radius: 0.5rem;
   content: '';
   display: inline-flex;
@@ -794,7 +893,7 @@ h6,
 }
 .bs-badge[data-count]:where([data-position^='left'])::before,
 .bs-badge[data-count]:where(:not([data-position^='left']))::after {
-  color: white;
+  color: var(--badge-text);
   content: attr(data-count);
   min-height: 1rem;
   min-width: 1rem;
@@ -817,17 +916,15 @@ h6,
 .bs-badge[data-show-zero]:where(:not([data-show-zero="false"]))::after {
   display: inline-flex;
 }
-.bs-badge[data-badge-color^='blue']::before,
-.bs-badge[data-badge-color^='blue']::after {
-  background: var(--bs-blue-500);
+.bs-badge[data-badge-color^='blue'] {
+  --badge-bg: var(--bs-blue-base);
 }
-.bs-badge[data-badge-color^='white']::before,
-.bs-badge[data-badge-color^='white']::after {
-  background: white;
-  color: var(--badge-text, var(--bs-black));
+.bs-badge[data-badge-color^='white'] {
+  --badge-bg: var(--bs-white);
+  --badge-text: var(--bs-black);
 }
 .bs-banner {
-  background-color: var(--bs-bg-invert-subtle);
+  background-color: var(--bs-royal-400);
   color: var(--bs-gray-100);
   display: flex;
   justify-content: center;
@@ -839,9 +936,6 @@ h6,
 .bs-banner:where([data-dismissed]) {
   display: none;
 }
-:where(.dark) .bs-banner {
-  color: var(--bs-black);
-}
 .bs-banner :where(.bs-banner-content) {
   align-items: center;
   display: flex;
@@ -859,12 +953,9 @@ h6,
   padding-right: 1.25rem;
 }
 .bs-banner :where(.bs-banner-content p a) {
-  color: var(--bs-pink-200);
+  color: var(--bs-pink-light);
   text-decoration: none;
 }
-:where(.dark) .bs-banner :where(.bs-banner-content p a) {
-  color: var(--bs-pink-500);
-}
 .bs-banner :where(.bs-banner-content p a:hover) {
   text-decoration: underline;
 }
@@ -879,9 +970,11 @@ h6,
   }
 }
 .bs-button {
-  --btn-main: var(--bs-blue-400);
-  --btn-secondary: var(--bs-blue-300);
+  --btn-main: var(--bs-blue-base);
+  --btn-secondary: var(--bs-blue-medium);
   --btn-highlight: var(--bs-blue-100);
+  --btn-padding: var(--bs-space-1) var(--bs-space-4) calc(var(--bs-space-1) * 1.5);
+  --btn-focus-pseudo-width: calc(100% + 0.5rem);
   align-items: center;
   background-color: var(--btn-main);
   border: none;
@@ -894,7 +987,7 @@ h6,
   justify-content: center;
   line-height: 1.5;
   outline: 2px solid transparent;
-  padding: var(--bs-space-1) var(--bs-space-4) calc(var(--bs-space-1) * 1.5);
+  padding: var(--btn-padding);
   position: relative;
   text-decoration: none;
   transition: all 100ms ease-in-out;
@@ -918,9 +1011,11 @@ h6,
   content: '';
   height: calc(100% + 0.5rem);
   inset: -0.25rem;
+  left: auto;
   position: absolute;
+  right: auto;
   transition: border-color 0.125s ease-in-out;
-  width: calc(100% + 0.5rem);
+  width: var(--btn-focus-pseudo-width);
 }
 .bs-button:focus::before {
   border-color: var(--btn-main);
@@ -986,6 +1081,8 @@ h6,
 }
 /* Text Button */
 .bs-button:where([data-text]) {
+  --btn-padding: 0 0;
+  --btn-focus-pseudo-width: calc(100% + 1.25rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   background-color: transparent;
   color: var(--bs-blue-500);
   cursor: pointer;
@@ -994,7 +1091,7 @@ h6,
   line-height: 150%;
 }
 .bs-button:where([data-text]):hover {
-  color: var(--bs-blue-400);
+  color: var(--bs-blue-base);
   background-color: transparent;
   text-decoration: underline;
 }
@@ -1044,9 +1141,9 @@ a.bs-button {
   vertical-align: middle;
 }
 .bs-circle-button {
-  --btn-main: var(--bs-blue-400);
-  --btn-secondary: var(--bs-blue-300);
-  --btn-highlight: var(--bs-blue-100);
+  --btn-main: var(--bs-blue-base);
+  --btn-secondary: var(--bs-blue-medium);
+  --btn-highlight: var(--bs-blue-lightest);
   --btn-border-color: transparent;
   --btn-border-radius: 50%;
   --btn-icon-bg-color: var(--btn-main);
@@ -1154,32 +1251,29 @@ a.bs-circle-button {
 }
 /* Disabled State */
 .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
-  --btn-icon-stroke-color: var(--bs-gray-400);
-  --btn-text-color: var(--bs-gray-400);
+  --btn-icon-stroke-color: var(--bs-ink-disabled);
+  --btn-text-color: var(--bs-ink-disabled);
   pointer-events: none;
 }
 .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) :where(.bs-circle-button-icon) {
-  background-color: var(--bs-gray-200);
+  background-color: var(--bs-bg-disabled);
 }
-/* Positioning the parent */
-.bs-dropdown {
+/* Parent */
+.bs-dropdown-parent {
   display: inline-block;
   position: relative;
 }
-/* Option list */
-.bs-dropdown :where(ul) {
-  background-color: var(--bs-white);
+/* Content */
+.bs-dropdown {
+  background-color: var(--bs-bg-base-elevated);
   border-radius: 4px;
   bottom: auto;
   box-shadow: var(--bs-shadow-contentMedium);
   line-height: 1.5rem;
-  list-style: none;
   margin: 0;
   max-height: 0;
-  max-width: 16.875rem;
   opacity: 0;
   overflow-y: auto;
-  padding: 0;
   position: absolute;
   top: calc(100% + 0.5rem);
   transition-duration: 75ms;
@@ -1187,28 +1281,48 @@ a.bs-circle-button {
   transition-timing-function: ease-in-out;
   z-index: 999;
 }
-/* (not) data-variant="fit" */
-.bs-dropdown:not([data-variant="fit"]) :where(ul) {
-  width: 16.875rem;
+/* Sizing */
+.bs-dropdown:where([data-width="sm"]) {
+  width: 10rem;
+}
+.bs-dropdown:where([data-width="md"]),
+.bs-dropdown:where(:not([data-width])) {
+  width: 20rem;
+}
+.bs-dropdown:where([data-width="lg"]) {
+  width: 40rem;
+}
+.bs-dropdown:where([data-width="content"]) {
+  width: auto;
+}
+.bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
+  width: 100%;
 }
 /* data-shown */
-.bs-dropdown:where([data-shown]) :where(ul) {
+.bs-dropdown:where([data-shown]) {
   max-height: 20rem;
   opacity: 1;
-  padding-top: 0.75rem;
 }
-/* data-position="top" */
-.bs-dropdown:where([data-position="top"]) :where(ul) {
+/* data-top */
+.bs-dropdown:where([data-top]) {
   bottom: calc(100% + 0.5rem);
   top: auto;
 }
 /* data-justify="center" */
-.bs-dropdown:where([data-justify="center"]) :where(ul) {
+.bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
   left: 50%;
   transform: translateX(-50%);
 }
+/* Option list */
+.bs-dropdown-options {
+  list-style: none;
+  padding: 0;
+}
+.bs-dropdown-options :where(li:first-child) {
+  margin-top: 0.5rem;
+}
 /* Option list item */
-.bs-dropdown :where(ul li) {
+.bs-dropdown-options :where(li) {
   align-items: center;
   border-bottom: 2px solid transparent;
   border-left: 4px solid transparent;
@@ -1227,104 +1341,78 @@ a.bs-circle-button {
   padding-top: 0.25rem;
   row-gap: 0.125rem;
 }
-/* data-variant="search" (search input) */
-.bs-dropdown :where(ul li[data-variant~="search"]) {
-  border-left: none;
-  cursor: default;
-  display: block;
-}
-/* data-variant="break" (list item) */
-.bs-dropdown :where(ul li[data-variant~="break"]) {
-  border-left: none;
-  cursor: default;
-  display: block;
-  padding: 0;
-}
-/* data-variant="break" (actual line break) */
-.bs-dropdown :where(ul li[data-variant~="break"] hr) {
-  background: var(--bs-navy-200);
-}
-/* data-variant="2-col" */
-.bs-dropdown :where(ul li[data-variant~="2-col"]) {
+/* Variant: 2-col */
+.bs-dropdown-options :where(li[data-variant~="2-col"]) {
   grid-template-columns: min-content 1fr;
 }
-/* data-variant="description" */
-/* Description will be the 2nd child in a 1-column item */
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
+/* Variant: description */
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   height: 1.125rem;
   line-height: 1.125rem;
 }
-/* data-variant="2-col description" */
-/* Description will be the 3rd child in a 2-column item */
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
+/* Variant: 2-col description */
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   grid-column-start: 2;
   height: 1.125rem;
   line-height: 1.125rem;
 }
-/* List item hover or data-selected */
-.bs-dropdown :where(ul li:hover),
-.bs-dropdown :where(ul li[data-selected]) {
-  background-color: var(--bs-bg-subtle);
-  border-left: 4px solid var(--bs-blue-400);
-  color: var(--bs-blue-400);
+/* Hover or data-selected */
+.bs-dropdown-options :where(li:hover),
+.bs-dropdown-options :where(li[data-selected]) {
+  background-color: var(--bs-bg-medium);
+  border-left: 4px solid var(--bs-blue-base);
+  color: var(--bs-blue-base);
   outline: none;
 }
-/* data-variant="search" or data-variant="break" hover */
-.bs-dropdown :where(ul li[data-variant~="search"]:hover),
-.bs-dropdown :where(ul li[data-variant~="break"]:hover) {
-  background-color: transparent;
-  border-left: none;
-  color: var(--bs-ink-base);
-}
-/* data-variant="negative" hover, data-selected, and both */
-.bs-dropdown :where(ul li[data-variant~="negative"]:hover),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-selected]),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-selected]:hover) {
+/* Variant: negative */
+.bs-dropdown-options :where(li[data-variant~="negative"]:hover),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
   /* 25% alpha version of --bs-red-400 */
   background-color: rgba(248, 169, 170, 0.25);
   border-left: 4px solid var(--bs-red-500);
   color: var(--bs-red-500);
 }
-/* data-variant="description" or data-variant="2-col description" hover or data-selected */
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
-  color: var(--bs-blue-400);
-}
-/* data-variant="negative description" or data-variant="2-col negative description" hover or data-selected */
-.bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+/* Hover or data-selected for 2-col/description variants */
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+  color: var(--bs-blue-base);
+}
+/* Hover or data-selected for negative + 2-col/description variants */
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
   color: var(--bs-red-500);
 }
 /* List option mouse click focus (do not show) */
-.bs-dropdown :where(ul li:focus:not(:focus-visible)){
+.bs-dropdown-options :where(li:focus:not(:focus-visible)){
   outline: none;
 }
 /* data-variant="negative" list option mouse click focus (do not show) */
-li[data-variant~="negative"]:focus:not(:focus-visible) {
+.bs-dropdown-options :where(li[data-variant~="negative"]:focus:not(:focus-visible)) {
   outline: none;
 }
 /* List option keyboard navigation focus */
-.bs-dropdown :where(ul li:focus-visible) {
-  --focus-border-color: var(--bs-blue-400);
+.bs-dropdown-options :where(li:focus-visible) {
+  --focus-border-color: var(--bs-blue-base);
   border: 2px solid var(--focus-border-color);
   outline: none;
   padding-left: 0.625rem;
 }
 /* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown :where(ul li[data-selected]:focus-visible) {
+.bs-dropdown-options :where(li[data-selected]:focus-visible) {
   border-left: 4px solid var(--focus-border-color);
   padding-left: 0.5rem;
 }
 /* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown :where(ul li[data-variant~="negative"]:focus-visible) {
+.bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
   --focus-border-color: var(--bs-red-200);
 }
 :where(label, legend) {
@@ -1338,28 +1426,28 @@ li[data-variant~="negative"]:focus:not(:focus-visible) {
   width: 100%;
 }
 :where([data-required]) {
-  color: var(--bs-red-500);
+  color: var(--bs-ink-red);
 }
 :where(label[data-disabled], [data-disabled] [data-required], [data-disabled] label) {
-  --label-color: var(--bs-ink-light);
+  --label-color: var(--bs-ink-disabled);
 }
 /* Generally applicable (all input types) */
 :where([data-required]) {
-  color: var(--bs-red-500);
+  color: var(--bs-ink-red);
   font-weight: var(--bs-font-bold, 600);
 }
 :where([data-disabled], [data-disabled] [data-required]) {
   color: var(--bs-gray-400);
 }
 :where(.box) :is(input, textarea, select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-subtle);
+  --offset-color: var(--bs-bg-medium);
 }
 :where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-invert);
+  --offset-color: var(--bs-bg-invert-base);
 }
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]) {
-  --input-border: var(--bs-red-500);
+  --input-border: var(--bs-ink-red);
 }
 /* Fieldset */
 :where(fieldset) {
@@ -1379,15 +1467,17 @@ li[data-variant~="negative"]:focus:not(:focus-visible) {
 }
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea, select {
+  --input-bg: var(--bs-bg-base);
+  --input-border: var(--bs-violet-medium);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background-color: var(--input-bg, var(--bs-bg-base));
-  border-color: var(--input-border, var(--bs-violet-300));
+  background-color: var(--input-bg);
+  border-color: var(--input-border);
   border-radius: 0.25rem;
   border-style: solid;
   border-width: var(--input-border-width, 1px);
-  caret-color: var(--bs-blue-400);
+  caret-color: var(--bs-blue-base);
   color: var(--bs-ink-base);
   font-size: var(--bs-text-base);
   font-weight: 400;
@@ -1407,10 +1497,10 @@ textarea {
   resize: vertical;
 }
 :is(input, textarea, select)::-moz-placeholder {
-  color: var(--bs-violet-200);
+  color: var(--bs-violet-lightest);
 }
 :is(input, textarea, select)::placeholder {
-  color: var(--bs-violet-200);
+  color: var(--bs-violet-lightest);
 }
 :is(input, textarea, select):where(:focus-visible)::-moz-placeholder {
   opacity: 0;
@@ -1419,17 +1509,17 @@ textarea {
   opacity: 0;
 }
 :is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible) {
-  --input-border: var(--bs-blue-400);
+  --input-border: var(--bs-blue-base);
   outline-width: 0px;
 }
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled) {
-  --input-border: var(--bs-gray-400);
-  background-color: var(--bs-gray-200);
-  color: var(--bs-gray-400);
+  --input-border: var(--bs-ink-disabled);
+  --input-bg: var(--bs-bg-disabled);
+  color: var(--bs-ink-disabled);
 }
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]) {
-  --input-border: var(--bs-red-500);
+  --input-border: var(--bs-ink-red);
 }
 /*
 Removes the built-in 'margin' on bottom of textarea
@@ -1445,12 +1535,12 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
   opacity: 1;
 }
 :is(input, textarea, select):disabled::-moz-placeholder, :is(input, textarea, select)[disabled]::-moz-placeholder {
-  color: var(--bs-gray-400);
+  color: var(--bs-ink-disabled);
   opacity: 1;
 }
 :is(input, textarea, select):disabled::placeholder,
 :is(input, textarea, select)[disabled]::placeholder {
-  color: var(--bs-gray-400);
+  color: var(--bs-ink-disabled);
   opacity: 1;
 }
 /* Select */
@@ -1584,7 +1674,7 @@ and issues with box-sizing
 }
 /* -------- Focus styles -------- */
 .bs-input-addon {
-  --focus-border: var(--bs-blue-400);
+  --focus-border: var(--bs-blue-base);
 }
 .bs-input-addon:where(:not([data-multifocus]):focus-within),
 .bs-input-addon:where([data-multifocus]) :where(input, select):where(:focus, :focus-within, :focus-visible),
@@ -1670,10 +1760,10 @@ and issues with box-sizing
 :where([disabled], [data-disabled]) + .bs-character-count,
 :where([disabled], [data-disabled]) .bs-character-count,
 .bs-character-count:where([data-disabled]) {
-  color: var(--bs-gray-400);
+  color: var(--bs-ink-disabled);
 }
 .bs-character-count:where([data-error]) {
-  color: var(--bs-red-400);
+  color: var(--bs-ink-red);
 }
 /* Containers and Labels for Checkbox/Radio */
 .bs-boolean {
@@ -1726,7 +1816,7 @@ and issues with box-sizing
 :where(input[type='checkbox'], input[type='radio']):focus-visible {
   box-shadow: inset 0 0 0 0.125rem var(--box-shadow),
     0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-400));
+    0 0 0 4px var(--outline-color, var(--bs-blue-base));
     outline: 2px solid transparent;
 }
 :where(input[type='checkbox']) {
@@ -1738,7 +1828,7 @@ and issues with box-sizing
 /* Checkbox's checkmark  */
 input:where([type='checkbox'])::before {
   --filled-size: 1rem;
-  --check-fill-color: var(--bs-blue-400);
+  --check-fill-color: var(--bs-blue-base);
 
   content: '';
   border-radius: 0.125rem;
@@ -1770,7 +1860,7 @@ input:where([type='checkbox']):where(:indeterminate)::after {
 /* Radio's dot */
 input:where([type='radio'])::before {
   --filled-size: 1rem;
-  --radio-fill-color: var(--bs-blue-400);
+  --radio-fill-color: var(--bs-blue-base);
 
   background-color: var(--radio-fill-color);
   border-radius: 50%;
@@ -1816,21 +1906,21 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
 }
 /* Disabled State */
 input:where([type='checkbox'], [type='radio']):disabled {
-  --box-shadow: var(--bs-gray-400);
+  --box-shadow: var(--bs-bg-disabled);
   background-color: transparent;
   cursor: default;
 }
 input:where([type='checkbox']):checked:disabled::before,
 input:where([type='checkbox']):indeterminate:disabled::before {
-  --check-fill-color: var(--bs-gray-400);
+  --check-fill-color: var(--bs-bg-disabled);
 }
 input:where([type='radio']):checked:disabled::before {
-  --radio-fill-color: var(--bs-gray-400);
+  --radio-fill-color: var(--bs-bg-disabled);
 }
 /* Error state */
 input:where([type='checkbox'], [type='radio'])[data-error] {
-  --box-shadow: var(--bs-red-500);
-  --outline-color: var(--bs-red-200);
+  --box-shadow: var(--bs-red-base);
+  --outline-color: var(--bs-red-base);
 }
 .bs-switch {
   --box-shadow: var(--bs-ink-base);
@@ -1875,7 +1965,7 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
 }
 .bs-switch input:where(:checked) ~ span,
 .bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span {
-  --switch-background: var(--bs-blue-400);
+  --switch-background: var(--bs-blue-base);
 }
 /* Toggle "ball" */
 .bs-switch span::before {
@@ -1931,26 +2021,27 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
 /* Focus state */
 .bs-switch :where(input:focus-visible) + span {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-400));
+    0 0 0 4px var(--outline-color, var(--bs-blue-base));
   outline: 2px solid transparent;
 }
 :where(.box) .bs-switch :where(input:focus-visible) + span {
-  --offset-color: var(--bs-bg-subtle);
+  --offset-color: var(--bs-bg-medium);
 }
 :where(.box[data-invert]) .bs-switch :where(input:focus-visible) + span {
-  --offset-color: var(--bs-bg-invert);
+  --offset-color: var(--bs-bg-invert-base);
 }
 /* Disabled state */
 .bs-switch:where([data-disabled]) {
-  --ball-background: var(--bs-gray-400);
-  --switch-background: var(--bs-gray-200);
+  --ball-background: var(--bs-ink-disabled);
+  --switch-background: var(--bs-bg-disabled);
 }
 .bs-switch input:where(:disabled) {
   cursor: default;
 }
 .bs-hint {
+  --hint-color: var(--bs-ink-light);
   min-width: 0;
-  color: var(--bs-ink-light);
+  color: var(--hint-color);
   font-size: var(--bs-text-xs);
   padding: 0;
   margin: 0;
@@ -1958,12 +2049,140 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
   overflow-wrap: break-word;
 }
 .bs-hint:where([data-error]) {
-  color: var(--bs-red-400);
+  --hint-color: var(--bs-ink-red);
+}
+.bs-modal {
+  background-color: var(--bs-bg-base-elevated);
+  border-radius: 4px;
+  box-shadow: var(--bs-shadow-contentHigh);
+  left: 1.5rem;
+  max-height: calc(100% - 3rem);
+  opacity: 0;
+  overflow: auto;
+  padding: 1.5rem;
+  position: fixed;
+  right: 1.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  transition-duration: 75ms;
+  transition-property: opacity;
+  transition-timing-function: ease-in-out;
+  z-index: 9999;
+}
+.bs-modal:where([data-shown]) {
+  opacity: 1;
+}
+@media (min-width: 752px) {
+  .bs-modal {
+    left: 50%;
+    margin: 0;
+    max-height: 40.625rem;
+    transform: translate(-50%, -50%);
+    width: 35rem;
+  }
+}
+.bs-overlay {
+  -webkit-backdrop-filter: blur(4px);
+          backdrop-filter: blur(4px);
+  background: rgba(29, 30, 72, 0.05);
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition-duration: 75ms;
+  transition-property: opacity;
+  transition-timing-function: ease-in-out;
+  z-index: 9998;
+}
+.bs-overlay:where([data-shown]) {
+  opacity: 1;
+}
+.bs-loader {
+  --loader-dot-bg: var(--bs-blue-500); /* possibly add variants if requested */
+  --loader-dot-size: .75rem;
+  --loader-dot-top: 18px;
+  --loader-dot-top: calc(50% - var(--loader-dot-size)/2);
+  --loader-dot-translate: 1.75rem; /* i.e., calc(var(--loader-width)/2 - var(--loader-dot-size)/2); */
+  --loader-height: 3rem;
+  --loader-width: 4rem;
+  display: block;
+  height: var(--loader-height);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  position: relative;
+  width: var(--loader-width);
+}
+.bs-loader:where([data-size="sm"]) {
+  --loader-dot-size: .5rem;
+  --loader-dot-top: 0;
+  --loader-dot-translate: 1.125rem;
+  --loader-height: .5rem;
+  --loader-width: 3rem;
+}
+.bs-loader:where([data-size="lg"]) {
+  --loader-dot-size: 1rem;
+  --loader-dot-translate: 2.375rem;
+  --loader-height: 4rem;
+  --loader-width: 6rem;
+}
+/* ----- loader dots ----- */
+.bs-loader > :where(div) {
+  background-color: var(--loader-dot-bg);
+  border-radius: 50%;
+  height: var(--loader-dot-size);
+  position: absolute;
+  top: var(--loader-dot-top);
+  width: var(--loader-dot-size);
+}
+.bs-loader > :where(div) {
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.bs-loader > :where(div:nth-child(1)) {
+  animation: loading-1 0.6s infinite;
+  left: 0%;
+}
+.bs-loader > :where(div:nth-child(2)) {
+  animation: loading-2 0.6s infinite;
+  left: 0%;
+}
+.bs-loader > :where(div:nth-child(3)) {
+  animation: loading-2 0.6s infinite;
+  left: 40%;
+}
+.bs-loader > :where(div:nth-child(4)) {
+  animation: loading-3 0.6s infinite;
+  left: 80%;
+}
+@keyframes loading-1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes loading-2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(var(--loader-dot-translate), 0);
+  }
+}
+@keyframes loading-3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
 }
 .bs-pill {
-  --pill-background: var(--bs-bg-subtle);
+  --pill-background: var(--bs-bg-medium);
   --pill-border: transparent;
-  --pill-text: var(--bs-royal-400);
+  --pill-text: var(--bs-royal-base);
   --pill-gap: var(--bs-space-2);
 
   align-items: center;
@@ -1982,9 +2201,6 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
   text-decoration: none;
   vertical-align: middle;
 }
-:where(.dark) .bs-pill {
-  --pill-text: var(--bs-royal-100);
-}
 :where(.bs-pill > svg) {
   height: 1rem;
 }
@@ -2008,7 +2224,7 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
   --pill-background: var(--bs-bg-base);
 }
 :where(.box[data-invert]) .bs-pill {
-  --pill-background: var(--bs-bg-invert-subtle);
+  --pill-background: var(--bs-bg-invert-base-subtle);
   --pill-text: var(--bs-gray-100);
 }
 :where(.box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
@@ -2022,7 +2238,7 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
 }
 /* ------------------------------ Status Styles ------------------------------ */
 .bs-pill:where([data-status]) {
-  --status-color: var(--bs-blue-400);
+  --status-color: var(--bs-blue-base);
 }
 .bs-pill:where([data-status])::before {
   background-color: var(--status-color);
@@ -2033,7 +2249,7 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
 }
 /* ----- Status Colors ----- */
 .bs-pill:where([data-status^="active"]) {
-  --status-color: var(--bs-blue-400);
+  --status-color: var(--bs-blue-base);
 }
 .bs-pill:where([data-status^="complete"]) {
   --status-color: var(--bs-purple-400);
@@ -2090,7 +2306,7 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
 }
 /* ----- Filter Active Styles ----- */
 .bs-pill:where([data-variant^="filter"][data-active]) {
-  --pill-background: var(--bs-blue-400);
+  --pill-background: var(--bs-blue-base);
   --pill-border: transparent;
   --pill-text: var(--bs-white);
 }
@@ -2130,8 +2346,8 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
 /* ----- Disabled Styles ----- */
 .bs-pill:is(:disabled, [aria-disabled="true"]) {
   pointer-events: none;
-  color: var(--bs-gray-400);
-  background-color: var(--bs-gray-200);
+  color: var(--bs-ink-disabled);
+  background-color: var(--bs-bg-disabled);
 }
 .bs-pill:where([data-variant^="filter"]):not([data-active]):is(:disabled, [aria-disabled="true"]) {
   --pill-border: var(--bs-gray-400);
@@ -2230,14 +2446,11 @@ a.bs-profile:where([data-layout]) {
   text-decoration: none;
 }
 a.bs-profile:where([data-layout]) .bs-profile-details > *:first-child {
-  --profile-name-color: var(--bs-blue-500);
+  --profile-name-color: var(--bs-ink-blue);
 }
 a.bs-profile:where([data-layout]):hover .bs-profile-details > *:first-child {
   text-decoration: underline;
 }
-.dark a.bs-profile:where([data-layout]) .bs-profile-details > *:first-child {
-  --profile-name-color: var(--bs-blue-200);
-}
 table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -2278,7 +2491,7 @@ table[data-borders^="all"] th {
 }
 /* Table Rows */
 table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
-  background-color: var(--bs-bg-subtle);
+  background-color: var(--bs-bg-medium);
 }
 /* Table Cells */
 table[data-cells^="fixed"] {
@@ -2317,8 +2530,8 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 /* Base Toast Styles */
 .bs-toast {
-    background-color: var(--bs-white);
-    border-top: 4px solid var(--bs-blue-400);
+    background-color: var(--bs-bg-base-elevated);
+    border-top: 4px solid var(--bs-blue-base);
     bottom: 1.5rem;
     box-shadow: var(--bs-shadow-contentMedium);
     left: 0;
@@ -2360,10 +2573,6 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
         transform: translateY(0);
     }
 }
-/* Dark mode toast */
-:where(.dark) .bs-toast {
-    background-color: var(--bs-navy-400);
-}
 .bs-toast:where([data-shown]) {
     /* Small delay on load to alow for HTML element to exist */
     animation-delay: 10ms;
@@ -2373,44 +2582,45 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     animation-timing-function: ease;
 }
 .bs-toast:where([data-dismissed]) {
-    animation-duration: 200ms; 
+    animation-duration: 200ms;
     animation-fill-mode: forwards;
     animation-name: slideDown;
     animation-timing-function: ease;
 }
-.bs-toast :where(.bs-toast-header) {
+.bs-toast-header {
     align-items: center;
     color: var(--bs-ink-base);
     display: flex;
     gap: 0.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 1rem;
+    padding: 1rem;
 }
-.bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
-    color: var(--bs-blue-400);
+.bs-toast-header :where(.bs-toast-header-icon) {
+    color: var(--bs-blue-base);
 }
-.bs-toast :where(h5) {
+.bs-toast-header :where(h5) {
     font-weight: 400;
 }
-.bs-toast :where(.bs-toast-content) {
+.bs-toast-body {
     border-bottom: 1px solid var(--bs-border);
     color: var(--bs-ink-light);
     padding-bottom: 1rem;
     padding-left: 1rem;
     padding-right: 1rem;
-    padding-top: 0.25rem;
 }
-.bs-toast :where(.bs-toast-actions) {
+.bs-toast-actions {
     /* Mobile - Buttons will be stacked */
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: row;
     gap: 1rem;
+    justify-content: flex-end;
     padding-bottom: 0.5rem;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.5rem;
 }
+.bs-toast-actions:where([data-stacked]) {
+    flex-direction: column-reverse;
+}
 /* Warning Toast Styles */
 .bs-toast:where([data-variant^='warning']) {
     border-top: 4px solid var(--bs-orange-warning);
@@ -2459,7 +2669,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     }
 
     .bs-toast:where([data-dismissed]) {
-        animation-duration: 200ms; 
+        animation-duration: 200ms;
         animation-fill-mode: forwards;
         animation-name: slideRight;
         animation-timing-function: ease;
@@ -2476,7 +2686,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
             transform: translateX(calc(100% + 1.5rem));
         }
     }
-    
+
     @keyframes slideLeft {
         0% {
             opacity: 0;
@@ -2488,12 +2698,9 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
         }
     }
 
-    .bs-toast :where(.bs-toast-actions) {
-        /* Non-mobile - Buttons will be side-by-side */
+    .bs-toast-actions:where([data-stacked]) {
         flex-direction: row;
-        justify-content: flex-end;
     }
-
 }
 /* Container for holding all toasts that will be visible */
 .bs-toaster {
@@ -2524,10 +2731,10 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 .bs-tooltip :where(.bs-tooltip-text) {
   align-items: center;
-  background-color: var(--bs-bg-base);
+  background-color: var(--bs-bg-base-elevated);
   border-radius: 4px;
   box-shadow: var(--bs-shadow-contentLowCenter);
-  color: var(--bs-violet-400);
+  color: var(--bs-violet-base);
   display: flex;
   font-size: var(--bs-text-sm);
   justify-content: center;