@wwtdev/bsds-css 3.0.0-rc.26 → 3.0.0-rc.28

package/dist/wwt-bsds.css

@@ -868,11 +868,11 @@ body {
   scroll-margin-top: var(--bs-content-top);
 }
 ::-moz-selection {
-  background-color: var(--bs-royal-base);
+  background-color: var(--bs-accent-1-base);
   color: var(--bs-ink-white);
 }
 ::selection {
-  background-color: var(--bs-royal-base);
+  background-color: var(--bs-accent-1-base);
   color: var(--bs-ink-white);
 }
 *:where([data-scroll="false"]) {
@@ -888,7 +888,7 @@ hr {
 }
 blockquote {
   background-color: var(--bs-bg-medium);
-  border-left: 4px solid var(--bs-blue-base);
+  border-left: 4px solid var(--bs-primary-base);
   color: var(--bs-ink-light);
   font-style: italic;
   font-weight: var(--bs-font-normal);
@@ -896,9 +896,9 @@ blockquote {
 }
 a {
   border-radius: 0.25rem;
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   cursor: pointer;
-  outline-color: var(--bs-blue-base);
+  outline-color: var(--bs-primary-base);
   text-decoration: underline;
   text-underline-offset: 2px;
   transition: all var(--bs-transition-quick) var(--bs-transition-ease);
@@ -907,7 +907,7 @@ a:where(:hover) {
   text-decoration: underline;
 }
 a:where(:visited) {
-  color: var(--bs-ink-plum);
+  color: var(--bs-ink-secondary);
 }
 a:where(:focus-visible) {
   outline-offset: var(--bs-space-1);
@@ -1254,8 +1254,8 @@ h6 {
 .bs-dropdown-options-deprecated :where(li:not([role="separator"]):hover),
 .bs-dropdown-options-deprecated :where(li[data-selected]) {
   background-color: var(--bs-bg-medium-to-light);
-  border-left: 4px solid var(--bs-ink-blue);
-  color: var(--bs-ink-blue);
+  border-left: 4px solid var(--bs-ink-primary);
+  color: var(--bs-ink-primary);
   outline: none;
 }
 /* Variant: negative */
@@ -1264,8 +1264,8 @@ h6 {
 .bs-dropdown-options-deprecated :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-ink-red);
-  color: var(--bs-ink-red);
+  border-left: 4px solid var(--bs-ink-negative);
+  color: var(--bs-ink-negative);
 }
 /* Hover or data-selected for 2-col/3-col/description variants */
 .bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
@@ -1274,7 +1274,7 @@ h6 {
 .bs-dropdown-options-deprecated :where(li:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
 .bs-dropdown-options-deprecated :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
 .bs-dropdown-options-deprecated :where(li[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
 }
 /* Hover or data-selected for negative + 2-col/3-col/description variants */
 .bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"]:hover > :nth-child(2)),
@@ -1283,11 +1283,11 @@ h6 {
 .bs-dropdown-options-deprecated :where(li[data-variant~="negative"]:not([data-variant*="-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
 .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)),
 .bs-dropdown-options-deprecated :where(li[data-variant~="negative"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
-  color: var(--bs-ink-red);
+  color: var(--bs-ink-negative);
 }
 /* List option keyboard navigation focus */
 .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-active]) {
-  --focus-border-color: var(--bs-blue-base);
+  --focus-border-color: var(--bs-primary-base);
   border: 2px solid var(--focus-border-color);
   outline: none;
   padding-left: 1.375rem;
@@ -1299,7 +1299,7 @@ h6 {
 }
 /* data-variant="negative" list option keyboard navigation focus */
 .bs-dropdown-options-deprecated:where(:focus-visible) :where(li[data-variant~="negative"][data-active]) {
-  --focus-border-color: var(--bs-red-200);
+  --focus-border-color: var(--bs-negative-light);
 }
 /* Multi-select divider */
 .bs-dropdown-options-deprecated :where(li[role="separator"]) {
@@ -1604,7 +1604,7 @@ h6 {
   --toast-transform: translate(0, calc(100% + 1.5rem));
 
   background-color: var(--bs-bg-base-to-light);
-  border-top: 4px solid var(--bs-blue-base);
+  border-top: 4px solid var(--bs-primary-base);
   bottom: 1.5rem;
   box-shadow: var(--bs-shadow-contentMedium);
   left: 0;
@@ -1641,7 +1641,7 @@ h6 {
   padding: 1rem;
 }
 .bs-toast-header-deprecated :where(.bs-toast-header-icon-deprecated) {
-  color: var(--bs-blue-base);
+  color: var(--bs-primary-base);
 }
 .bs-toast-header-deprecated :where(h5) {
   font-weight: 400;
@@ -1669,30 +1669,30 @@ h6 {
 }
 /* Warning Toast Styles */
 .bs-toast-deprecated:where([data-variant^='warning']) {
-  border-top: 4px solid var(--bs-warning);
+  border-top: 4px solid var(--bs-warning-base);
 }
 .bs-toast-deprecated:where([data-variant^='warning']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-warning);
+  color: var(--bs-ink-warning);
 }
 /* Positive Toast Styles */
 .bs-toast-deprecated:where([data-variant^='positive']) {
-  border-top: 4px solid var(--bs-purple-400);
+  border-top: 4px solid var(--bs-positive-base);
 }
 .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-purple-400);
+  color: var(--bs-ink-positive);
 }
 :where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) {
-  border-top: 4px solid var(--bs-purple-200);
+  border-top: 4px solid var(--bs-positive-light);
 }
 :where(.dark) .bs-toast-deprecated:where([data-variant^='positive']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-purple-200);
+  color: var(--bs-positive-light);
 }
 /* Negative Toast Styles */
 .bs-toast-deprecated:where([data-variant^='negative']) {
-  border-top: 4px solid var(--bs-red-400);
+  border-top: 4px solid var(--bs-negative-dark);
 }
 .bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-icon-deprecated) {
-  color: var(--bs-red-400);
+  color: var(--bs-negative-dark);
 }
 @media (min-width: 440px) {
   .bs-toast-deprecated {
@@ -1914,8 +1914,8 @@ This must go last to properly override the other classes
   transform: translateY(-50%) scale(0.5);
 }
 .bs-accordion {
-  --accordion-link-color: var(--bs-purple-400);
-  --accordion-link-outline-color: var(--bs-blue-base);
+  --accordion-link-color: var(--bs-positive-base-fixed);
+  --accordion-link-outline-color: var(--bs-primary-base);
   --accordion-outline-color: transparent;
   --accordion-padding-inline: 0;
   --accordion-text-size: var(--bs-text-sm);
@@ -1952,7 +1952,7 @@ This must go last to properly override the other classes
 }
 .bs-accordion :where(.bs-accordion-toggle:focus-visible),
 .bs-accordion > :where(header) > :where(button:focus-visible) {
-  --accordion-outline-color: var(--bs-blue-base);
+  --accordion-outline-color: var(--bs-primary-base);
 }
 .bs-accordion :where(.bs-accordion-toggle) > *,
 .bs-accordion > :where(header) > :where(button) > * {
@@ -2015,10 +2015,9 @@ This must go last to properly override the other classes
   border-block-start-color: transparent;
 }
 .bs-alert {
-  /* bs-blue-100 @ 10% */
-  background-color: #99cff71a;
+  background-color: var(--bs-primary-highlight);
   border-radius: 8px;
-  border: 2px solid var(--bs-ink-blue);
+  border: 2px solid var(--bs-ink-primary);
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
   display: grid;
@@ -2047,7 +2046,7 @@ This must go last to properly override the other classes
 .bs-alert :where(.bs-alert-icon) {
   margin-top: 0.25rem;
   align-self: start;
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   grid-area: icon;
   height: 1.125rem;
   width: 1.125rem;
@@ -2108,28 +2107,25 @@ This must go last to properly override the other classes
 }
 /* COLOR VARIANTS */
 .bs-alert:where([data-variant="success"]) {
-  /* bs-purple-100 @ 10% */
-  background-color: #e0c5ef1a;
-  border-color: var(--bs-ink-purple);
+  background-color: var(--bs-positive-highlight);
+  border-color: var(--bs-ink-positive);
 }
 .bs-alert:where([data-variant="success"]) :where(.bs-alert-icon) {
-  color: var(--bs-ink-purple);
+  color: var(--bs-ink-positive);
 }
 .bs-alert:where([data-variant="warning"]) {
-  /* bs-orange-100 @ 10% */
-  background-color: #f3c4a81a;
-  border-color: var(--bs-ink-orange);
+  background-color: var(--bs-warning-highlight);
+  border-color: var(--bs-ink-warning);
 }
 .bs-alert:where([data-variant="warning"]) :where(.bs-alert-icon) {
-  color: var(--bs-ink-orange);
+  color: var(--bs-ink-warning);
 }
 .bs-alert:where([data-variant="negative"]) {
-  /* bs-red-100 @ 10% */
-  background-color: #f8a9aa1a;
-  border-color: var(--bs-ink-red);
+  background-color: var(--bs-negative-highlight);
+  border-color: var(--bs-ink-negative);
 }
 .bs-alert:where([data-variant="negative"]) :where(.bs-alert-icon) {
-  color: var(--bs-ink-red);
+  color: var(--bs-ink-negative);
 }
 /* DARK MODE SPECIAL CASE */
 .dark .bs-alert :where(.bs-alert-action) {
@@ -2152,7 +2148,7 @@ This must go last to properly override the other classes
   z-index: var(--bs-backdrop-z-index, var(--bs-popover-z-index));
 }
 .bs-badge {
-  --badge-bg: var(--bs-red-400);
+  --badge-bg: var(--bs-negative-dark);
   --badge-text: var(--bs-white);
   display: inline-block;
 }
@@ -2207,7 +2203,7 @@ This must go last to properly override the other classes
 }
 /* Badge COLORS */
 .bs-badge:where([data-badge-color^='blue']) {
-  --badge-bg: var(--bs-blue-base);
+  --badge-bg: var(--bs-primary-base);
 }
 .bs-badge:where([data-badge-color^='white']) {
   --badge-bg: var(--bs-white);
@@ -2228,7 +2224,7 @@ This must go last to properly override the other classes
   top: unset;
 }
 :where(.bs-banner) {
-  --banner-bg: var(--bs-royal-400);
+  --banner-bg: var(--bs-accent-1-base);
   --banner-icon-display: none;
   --banner-padding: var(--banner-padding-m);
   --banner-padding-m: 1rem 1.5rem;
@@ -2276,6 +2272,9 @@ This must go last to properly override the other classes
 .bs-banner:where([data-variant="negative"]) {
   --banner-bg: var(--bs-red-300);
 }
+:where(.softchoice) .bs-banner:where([data-variant="negative"]) {
+  --banner-bg: var(--bs-maroon-400);
+}
 @media (min-width: 957px) {
   .bs-banner {
     --banner-icon-display: inline-flex;
@@ -2306,12 +2305,12 @@ text color:
 .bs-button {
   --btn-focus-inset: -0.25rem;
   --btn-focus-pseudo-width: calc(100% + 0.5rem);
-  --btn-ghost-ink: var(--bs-ink-blue);
-  --btn-highlight: var(--bs-blue-100);
+  --btn-ghost-ink: var(--bs-ink-primary);
+  --btn-highlight: var(--bs-primary-lightest);
   --btn-ink: var(--bs-white);
-  --btn-main: var(--bs-blue-400);
+  --btn-main: var(--bs-primary-base-fixed);
   --btn-padding: .25rem .75rem;
-  --btn-secondary: var(--bs-blue-medium);
+  --btn-secondary: var(--bs-primary-medium);
   --btn-text-size: var(--bs-text-md);
   --btn-weight: 600;
   --btn-height: 2.5rem;
@@ -2373,8 +2372,8 @@ text color:
 /* ------------ Ghost Buttons ------------ */
 .bs-button:where([data-ghost]:not([data-ghost="false"])) {
   --btn-ink: var(--btn-ghost-ink);
-  --btn-light: var(--bs-blue-10);
-  --btn-secondary: var(--bs-blue-10);
+  --btn-light: var(--bs-primary-highlight);
+  --btn-secondary: var(--bs-primary-highlight);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--btn-ghost-ink);
 }
@@ -2392,52 +2391,52 @@ text color:
 }
 /* ------------ VARIANTS ------------ */
 .bs-button:where([data-variant^='secondary']) {
-  --btn-ghost-ink: var(--bs-ink-plum);
-  --btn-highlight: var(--bs-plum-100);
-  --btn-light: var(--bs-plum-10);
-  --btn-main: var(--bs-plum-base);
-  --btn-secondary: var(--bs-plum-medium);
+  --btn-ghost-ink: var(--bs-ink-secondary);
+  --btn-highlight: var(--bs-secondary-lightest);
+  --btn-light: var(--bs-secondary-highlight);
+  --btn-main: var(--bs-secondary-base-fixed);
+  --btn-secondary: var(--bs-secondary-medium);
 }
 .dark .bs-button:where([data-variant^='secondary']) {
-  --btn-highlight: var(--bs-plum-400);
+  --btn-highlight: var(--bs-secondary-base-fixed);
   --btn-light: var(--bs-navy-400);
 }
 .bs-button:where([data-variant^='positive']) {
-  --btn-ghost-ink: var(--bs-ink-purple);
-  --btn-highlight: var(--bs-purple-100);
-  --btn-light: var(--bs-purple-10);
-  --btn-main: var(--bs-purple-400);
-  --btn-secondary: var(--bs-purple-medium);
+  --btn-ghost-ink: var(--bs-ink-positive);
+  --btn-highlight: var(--bs-positive-lightest);
+  --btn-light: var(--bs-positive-highlight);
+  --btn-main: var(--bs-positive-base-fixed);
+  --btn-secondary: var(--bs-positive-medium);
 }
 .bs-button:where([data-variant^='warning']) {
-  --btn-ghost-ink: var(--bs-ink-orange);
-  --btn-highlight: var(--bs-orange-100);
-  --btn-light: var(--bs-orange-10);
-  --btn-main: var(--bs-warning);
-  --btn-secondary: var(--bs-orange-base);
+  --btn-ghost-ink: var(--bs-ink-warning);
+  --btn-highlight: var(--bs-warning-lightest);
+  --btn-light: var(--bs-warning-highlight);
+  --btn-main: var(--bs-warning-dark);
+  --btn-secondary: var(--bs-warning-medium);
 }
 .bs-button:where([data-variant^='negative']) {
-  --btn-ghost-ink: var(--bs-ink-red);
-  --btn-highlight: var(--bs-red-100);
-  --btn-light: var(--bs-red-10);
-  --btn-main: var(--bs-red-400);
-  --btn-secondary: var(--bs-red-medium);
+  --btn-ghost-ink: var(--bs-ink-negative);
+  --btn-highlight: var(--bs-negative-lightest);
+  --btn-light: var(--bs-negative-highlight);
+  --btn-main: var(--bs-negative-dark);
+  --btn-secondary: var(--bs-negative-medium);
 }
 /* pink variant */
 .bs-button:where([data-variant^='pink']) {
-  --btn-ghost-ink: var(--bs-ink-pink);
-  --btn-highlight: var(--bs-pink-400);
-  --btn-light: var(--bs-pink-10);
-  --btn-main: var(--bs-pink-400);
-  --btn-secondary: var(--bs-pink-300);
+  --btn-ghost-ink: var(--bs-ink-accent-3);
+  --btn-highlight: var(--bs-accent-3-base-fixed);
+  --btn-light: var(--bs-accent-3-highlight);
+  --btn-main: var(--bs-accent-3-base-fixed);
+  --btn-secondary: var(--bs-accent-3-medium);
 }
 /* royal blue variant */
 .bs-button:where([data-variant^='royal']) {
-  --btn-ghost-ink: var(--bs-ink-royal);
-  --btn-highlight: var(--bs-royal-400);
-  --btn-light: var(--bs-royal-10);
-  --btn-main: var(--bs-royal-400);
-  --btn-secondary: var(--bs-royal-300);
+  --btn-ghost-ink: var(--bs-ink-accent-1);
+  --btn-highlight: var(--bs-accent-1-base-fixed);
+  --btn-light: var(--bs-accent-1-highlight);
+  --btn-main: var(--bs-accent-1-base-fixed);
+  --btn-secondary: var(--bs-accent-1-medium);
 }
 /* white variant - for dark backgrounds + ghost btn or text btn only */
 .bs-button:where([data-variant^='white'][data-ghost]:not([data-ghost="false"])) {
@@ -2452,7 +2451,7 @@ text color:
   --btn-focus-inset: -0.25rem -0.5rem;
   --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   --btn-height: auto;
-  --btn-ink: var(--bs-ink-blue);
+  --btn-ink: var(--bs-ink-primary);
   --btn-padding: 0;
   --btn-secondary: transparent;
   --btn-text-size: var(--bs-text-md);
@@ -2463,7 +2462,7 @@ text color:
 }
 /* DEPRECATED */
 .bs-button:where([data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-blue-base);
+  --btn-ink: var(--bs-primary-base);
   background-color: transparent;
   text-decoration: underline;
 }
@@ -2479,7 +2478,7 @@ text color:
 /* DEPRECATED */
 .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"])),
 .bs-button:where([data-variant^='negative'][data-text]:not([data-text="false"]):not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-ink-red);
+  --btn-ink: var(--bs-ink-negative);
 }
 /* DEPRECATED */
 .bs-button:where([data-variant^='white'][data-text]:not([data-text="false"])),
@@ -2641,7 +2640,7 @@ a.bs-button {
   position: absolute;
 }
 .bs-chart :where(li:focus-visible) {
-  --focus-color: var(--bs-blue-base);
+  --focus-color: var(--bs-primary-base);
 }
 .bs-chart :where(li span) {
   background: var(--legend-item-box-fill);
@@ -2669,7 +2668,7 @@ If we want to make these responsive in the future, can wrap in media query.
 .bs-chart:where([data-layout="chart-right"], [data-layout="chart-left"]) {
   --chart-gridrows: minmax(0px, auto);
   --legend-bg-color: var(--bs-bg-base);
-  --legend-border-color: var(--bs-gray-light);
+  --legend-border-color: var(--bs-neutral-light);
   --legend-clip-path: border-box;
   --legend-flexalign: start;
   --legend-flexdir: column;
@@ -2717,13 +2716,13 @@ Properties : Defaults // Description
 --btn-icon-padding: .75rem; // padding around icon svg
 --btn-icon-size: 1.5rem; // svg width and height
 --btn-icon-stroke-color: var(--bs-white);
---btn-main: var(--bs-blue-base); // many things... should probably break this up
+--btn-main: var(--bs-primary-base); // many things... should probably break this up
 --btn-text-color: var(--bs-ink-base);
 --btn-text-size: var(--bs-text-md);
 
 --btn-border-color: transparent;  //  focus state outline color - transparent base state, --btn-main base focus state
 --btn-border-color-focused: var(--btn-main); // focus state ring color set on variants
---btn-secondary: var(--bs-blue-medium); // hover state icon bg
+--btn-secondary: var(--bs-primary-medium); // hover state icon bg
 --btn-shadow-color-active: var(--btn-main); // active state shadow color (icon bg)
 --btn-text-color-hovered: var(--bs-ink-base); // hover state text color
 */
@@ -2736,8 +2735,8 @@ Properties : Defaults // Description
   --btn-icon-padding: .75rem;
   --btn-icon-size: 1.5rem;
   --btn-icon-stroke-color: var(--bs-white);
-  --btn-main: var(--bs-blue-base);
-  --btn-secondary: var(--bs-blue-medium);
+  --btn-main: var(--bs-primary-base);
+  --btn-secondary: var(--bs-primary-medium);
   --btn-shadow-color-active: var(--btn-main);
   --btn-text-color-hovered: var(--bs-ink-base);
   --btn-text-color: var(--bs-ink-base);
@@ -2804,8 +2803,8 @@ a.bs-circle-button {
 .bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
   --btn-icon-bg-color: transparent;
   --btn-icon-stroke-color: var(--btn-main);
-  --btn-light: var(--bs-blue-10);
-  --btn-secondary: var(--bs-blue-10);
+  --btn-light: var(--bs-primary-10);
+  --btn-secondary: var(--bs-primary-10);
 }
 /* Active, Hover, Focus states */
 .bs-circle-button:active, .bs-circle-button:hover {
@@ -2867,34 +2866,34 @@ a.bs-circle-button {
   --btn-shadow-color-active: transparent;
 }
 .bs-circle-button:where([data-variant="color-blue"]) {
-  --btn-border-color-focused: var(--bs-ink-blue);
-  --btn-text-color: var(--bs-ink-blue);
-  --btn-text-color-hovered: var(--bs-blue-base);
+  --btn-border-color-focused: var(--bs-ink-primary);
+  --btn-text-color: var(--bs-ink-primary);
+  --btn-text-color-hovered: var(--bs-primary-base);
 }
 .bs-circle-button:where([data-variant="color-royal"]) {
-  --btn-border-color-focused: var(--bs-ink-royal);
-  --btn-text-color: var(--bs-ink-royal);
-  --btn-text-color-hovered: var(--bs-royal-medium);
+  --btn-border-color-focused: var(--bs-ink-accent-1);
+  --btn-text-color: var(--bs-ink-accent-1);
+  --btn-text-color-hovered: var(--bs-accent-1-medium);
 }
 .bs-circle-button:where([data-variant="color-purple"]) {
-  --btn-border-color-focused: var(--bs-purple-400);
-  --btn-text-color: var(--bs-ink-purple);
-  --btn-text-color-hovered: var(--bs-purple-medium);
+  --btn-border-color-focused: var(--bs-positive-base);
+  --btn-text-color: var(--bs-ink-positive);
+  --btn-text-color-hovered: var(--bs-positive-medium);
 }
 .bs-circle-button:where([data-variant="color-pink"]) {
-  --btn-border-color-focused: var(--bs-pink-400);
-  --btn-text-color: var(--bs-ink-pink);
-  --btn-text-color-hovered: var(--bs-pink-base);
+  --btn-border-color-focused: var(--bs-accent-3-base);
+  --btn-text-color: var(--bs-ink-accent-3);
+  --btn-text-color-hovered: var(--bs-accent-3-base);
 }
 .bs-circle-button:where([data-variant="color-orange"]) {
-  --btn-border-color-focused: var(--bs-ink-orange);
-  --btn-text-color: var(--bs-ink-orange);
-  --btn-text-color-hovered: var(--bs-orange-base);
+  --btn-border-color-focused: var(--bs-ink-warning);
+  --btn-text-color: var(--bs-ink-warning);
+  --btn-text-color-hovered: var(--bs-warning-base);
 }
 .bs-circle-button:where([data-variant="color-red"]) {
-  --btn-border-color-focused: var(--bs-ink-red);
-  --btn-text-color: var(--bs-ink-red);
-  --btn-text-color-hovered: var(--bs-red-base);
+  --btn-border-color-focused: var(--bs-ink-regative);
+  --btn-text-color: var(--bs-ink-negative);
+  --btn-text-color-hovered: var(--bs-negative-base);
 }
 .bs-circle-button:where([data-variant="color-white"]) {
   --btn-border-color-focused: var(--bs-ink-white);
@@ -2955,7 +2954,7 @@ a.bs-circle-button {
   line-height: var(--description-line-height);
 }
 .bs-empty-state :where(a) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   text-decoration: underline;
 }
 .bs-empty-state :where(a:hover) {
@@ -3008,7 +3007,7 @@ custom properties:
 button:where(.bs-filter-button) {
   --filterbtn-caret-size: 1rem;
   --filterbtn-caret-transform: rotate(0deg);
-  --filterbtn-color: var(--bs-ink-blue);
+  --filterbtn-color: var(--bs-ink-primary);
   --filterbtn-focus-color: transparent;
   --filterbtn-height: 1.5rem;
   --filterbtn-text-size: var(--bs-text-base);
@@ -3065,12 +3064,12 @@ button:where(.bs-filter-button) {
 }
 /* Hover state */
 .bs-filter-button:hover {
-  --filterbtn-color: var(--bs-blue-base);
+  --filterbtn-color: var(--bs-primary-base);
 }
 /* Focus state */
 .bs-filter-button:where(:focus-visible) {
   outline: none;
-  --filterbtn-focus-color: var(--bs-blue-base);
+  --filterbtn-focus-color: var(--bs-primary-base);
 }
 /* Filter open state */
 .bs-filter-button:where([aria-expanded="true"],[data-open="true"]) {
@@ -3078,10 +3077,10 @@ button:where(.bs-filter-button) {
 }
 /* Badge non-standard color */
 .bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-ink-blue);
+  --badge-bg: var(--bs-ink-primary);
 }
 :where(.dark) .bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-blue-medium);
+  --badge-bg: var(--bs-primary-medium);
 }
 .bs-filter-button:hover :where(.bs-badge) {
   --badge-bg: var(--filterbtn-color);
@@ -3143,7 +3142,7 @@ button:where(.bs-filter-button) {
 :is(.bs-boolean :where(input), .bs-checkbox):focus-visible {
   box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base)),
     0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-base));
+    0 0 0 4px var(--outline-color, var(--bs-primary-base));
     outline: 2px solid transparent;
 }
 :where(input[type='checkbox']),
@@ -3160,7 +3159,7 @@ input:where([type='checkbox'])::before,
   --cb-filled-size: var(--filled-size, 1rem);
   content: '';
   border-radius: 0.125rem;
-  box-shadow: inset var(--cb-filled-size) var(--cb-filled-size) var(--fill-bg-color, var(--bs-blue-base));
+  box-shadow: inset var(--cb-filled-size) var(--cb-filled-size) var(--fill-bg-color, var(--bs-primary-base));
   height: var(--cb-filled-size);
   visibility: hidden;
   width: var(--cb-filled-size);
@@ -3192,7 +3191,7 @@ input:where([type='checkbox']):where(:indeterminate)::after,
 input:where([type='radio'])::before,
 .bs-boolean :where([type="radio"])::before {
   --radio-filled-size: var(--filled-size, 1rem);
-  background-color: var(--fill-bg-color, var(--bs-blue-base));
+  background-color: var(--fill-bg-color, var(--bs-primary-base));
   border-radius: 50%;
   box-sizing: content-box;
   content: '';
@@ -3248,8 +3247,8 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 .bs-boolean :where(input[data-error="true"]), /* deprecate this one in favor of next line */
 .bs-boolean:where([data-error="true"]),
 .bs-checkbox:where([data-error="true"]) {
-  --box-shadow: var(--bs-red-base);
-  --outline-color: var(--bs-red-base);
+  --box-shadow: var(--bs-negative-base);
+  --outline-color: var(--bs-negative-base);
 }
 .bs-character-count {
   color: var(--bs-ink-base);
@@ -3264,7 +3263,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   visibility: hidden;
 }
 .bs-character-count:where([data-error="true"]) {
-  color: var(--bs-ink-red);
+  color: var(--bs-ink-negative);
 }
 .bs-form-container {
   background: var(--bs-bg-base-to-light);
@@ -3338,11 +3337,11 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   }
 
   &:where([data-component="bs-icon-edit"]):hover {
-    color: var(--bs-ink-blue);
+    color: var(--bs-ink-primary);
   }
 
   &:where([data-component="bs-icon-delete"]):hover {
-    color: var(--bs-ink-red);
+    color: var(--bs-ink-negative);
   }
 }
 .bs-form-container :where(.bs-form-container-header-actions):where([data-open="true"]) {
@@ -3361,7 +3360,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 }
 /* Generally applicable (all input types) */
 :where([data-required]:not([data-required="false"])) {
-  color: var(--bs-ink-red);
+  color: var(--bs-ink-negative);
   font-weight: var(--bs-font-semibold);
 }
 :where([data-disabled]:not([data-disabled="false"]), [data-disabled]:not([data-disabled="false"]) [data-required]:not([data-required="false"])) {
@@ -3378,7 +3377,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]:not([data-error="false"])),
 :is(.bs-input, .bs-select, .bs-textarea):where([data-error]:not([data-error="false"])) {
-  --input-border: var(--bs-ink-red);
+  --input-border: var(--bs-ink-negative);
 }
 /* Fieldset */
 :where(fieldset) {
@@ -3415,7 +3414,7 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   padding: 0;
 }
 .bs-hint:where([data-error]:not([data-error="false"])) {
-  --hint-color: var(--bs-ink-red);
+  --hint-color: var(--bs-ink-negative);
 }
 :where(:disabled, [data-disabled="true"]) .bs-hint {
   --hint-color: var(--bs-ink-disabled);
@@ -3581,7 +3580,7 @@ and issues with box-sizing
 }
 /* -------- Focus styles -------- */
 .bs-input-addon {
-  --focus-border: var(--bs-blue-base);
+  --focus-border: var(--bs-primary-base);
 }
 .bs-input-addon:where(:not([data-multifocus]):focus-within),
 .bs-input-addon:where([data-multifocus="false"]:focus-within),
@@ -3646,8 +3645,8 @@ and issues with box-sizing
 /* -------- Error styles -------- */
 .bs-input-addon:where([data-error]:not([data-error="false"])),
 .bs-input-addon:where([data-error]:not([data-error="false"])) :where(.bs-input-addon) {
-  --focus-border: var(--bs-ink-red);
-  --input-border: var(--bs-ink-red);
+  --focus-border: var(--bs-ink-negative);
+  --input-border: var(--bs-ink-negative);
 }
 .bs-input-addon:where([data-error]:not([data-error="false"]),[data-disabled]:not([data-disabled="false"])) > *::before,
 .bs-input-addon:where(.bs-input-addon[data-error]:not([data-error="false"]) .bs-input-addon, .bs-input-addon[data-disabled]:not([data-disabled="false"]) .bs-input-addon) > *::before {
@@ -3723,7 +3722,7 @@ data-autosize-icons="true" - see above
 .bs-input-search button:where(:active) {
   transform: scale(0.97);
   transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--bs-blue-base);
+  box-shadow: inset 0px 0px 4px 1px var(--bs-primary-base);
 }
 .bs-input-search button:where(:focus) {
   border-radius: .25rem;
@@ -3735,7 +3734,7 @@ data-autosize-icons="true" - see above
   --focus-border: transparent;
   --input-border: transparent;
   --input-addon-height: 1.5rem;
-  --input-caret: var(--bs-blue-base);
+  --input-caret: var(--bs-primary-base);
   --input-padding-block: 0 0.125rem;
   --input-padding-inline: 0.5rem;
   --input-placeholder: var(--bs-ink-light);
@@ -3777,7 +3776,7 @@ label:where(.bs-label) {
 /* Required asterisk */
 :where(label, legend) :where([data-required]:not([data-required="false"])),
 .bs-label :where([data-required="true"]) {
-  color: var(--label-asterisk-color, var(--bs-ink-red));
+  color: var(--label-asterisk-color, var(--bs-ink-negative));
 }
 /* Disabled state */
 :where(label[data-disabled]:not([data-disabled="false"])),
@@ -3846,7 +3845,7 @@ label:where(.bs-label) {
 }
 .bs-switch :where(input:checked) ~ :where(span),
 .bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span) {
-  --switch-background: var(--bs-blue-base);
+  --switch-background: var(--bs-primary-base);
 }
 /* Toggle "ball" */
 .bs-switch :where(span)::before {
@@ -3905,7 +3904,7 @@ label:where(.bs-label) {
 .bs-switch :where(input:focus-visible) + :where(span),
 .bs-switch:where(:focus-visible) :where(button span) {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-base));
+    0 0 0 4px var(--outline-color, var(--bs-primary-base));
   outline: 2px solid transparent;
 }
 :where(.bs-box) .bs-switch :where(input:focus-visible) + :where(span),
@@ -3953,7 +3952,7 @@ select,
   border-radius: 0.25rem;
   border-style: solid;
   border-width: var(--input-border-width, 1px);
-  caret-color: var(--input-caret, var(--bs-blue-base));
+  caret-color: var(--input-caret, var(--bs-primary-base));
   color: var(--bs-ink-base);
   font-size: var(--input-text-size, var(--bs-text-base));
   font-weight: 400;
@@ -4013,7 +4012,7 @@ textarea {
 :is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible),
 :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible),
 :is(select, .bs-select):where(:focus) {
-  --input-border: var(--bs-blue-base);
+  --input-border: var(--bs-primary-base);
   outline-style: none;
   outline-width: 0px;
 }
@@ -4038,7 +4037,7 @@ select:where(:disabled),
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]:not([data-error="false"])),
 :is(.bs-input, .bs-select, .bs-textarea):where([data-error="true"]) {
-  --input-border: var(--bs-ink-red);
+  --input-border: var(--bs-ink-negative);
 }
 /*
 Removes the built-in 'margin' on bottom of textarea
@@ -4154,7 +4153,7 @@ select[multiple],
   gap: 0.5rem;
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-title-icon) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   height: 1rem;
   width: 1rem;
 }
@@ -4219,7 +4218,7 @@ select[multiple],
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a:hover),
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]),
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]) {
@@ -4228,7 +4227,7 @@ select[multiple],
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]:hover),
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   text-decoration: none;
 }
 /* ===== Nested Nav Items ===== */
@@ -4249,11 +4248,11 @@ select[multiple],
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] > .bs-horizontal-nav-mobile-nested-toggle) {
   background-color: var(--bs-bg-medium);
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   font-weight: 600;
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   text-decoration: none;
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle-caret) {
@@ -4358,7 +4357,7 @@ select[multiple],
 }
 /* ===== Optional Title Icon ===== */
 .bs-horizontal-nav :where(.bs-horizontal-nav-title-icon) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   height: 1rem;
   margin-right: 0.5rem;
   width: 1rem;
@@ -4387,14 +4386,14 @@ select[multiple],
   width: 100%;
 }
 .bs-horizontal-nav :where(nav > ul > li > a:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
 }
 .bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]) {
   color: var(--bs-ink-base);
   font-weight: 600;
 }
 .bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   text-decoration: none;
 }
 /* ===== Nested Nav Items ===== */
@@ -4408,7 +4407,7 @@ select[multiple],
   padding-top: 0.5rem;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   text-decoration: none;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-active="true"]) {
@@ -4416,7 +4415,7 @@ select[multiple],
   font-weight: 600;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-active="true"]:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   text-decoration: none;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle-caret) {
@@ -4428,10 +4427,10 @@ select[multiple],
   width: 0.75rem;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle:hover ~ .bs-horizontal-nav-caret) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-expanded="true"]) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   font-weight: 600;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-expanded="true"] .bs-horizontal-nav-nested-toggle-caret) {
@@ -4455,7 +4454,7 @@ select[multiple],
   font-size: 0.875rem;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   text-decoration: underline;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a[data-active="true"]) {
@@ -4463,7 +4462,7 @@ select[multiple],
   font-weight: 600;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a[data-active="true"]:hover) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
 }
 /* ===== End Items ===== */
 .bs-horizontal-nav :where(.bs-horizontal-nav-end-items) {
@@ -4501,7 +4500,7 @@ select[multiple],
   font-size: var(--bs-text-sm);
   font-weight: 600;
   line-height: 1.5;
-  color: var(--bs-ink-royal);
+  color: var(--bs-royal-400);
   text-align: center; /* needed for "as link" wrap cases */
   text-decoration: none;
   background-color: var(--bs-bg-medium);
@@ -4517,11 +4516,11 @@ select[multiple],
 }
 /* Hover */
 .bs-inline-tab:where(:not([data-selected]):hover) {
-  border-color: var(--bs-ink-royal); /* "ink-royal" instead of "royal-base", matches Figma design */
+  border-color: var(--bs-royal-400);
 }
 /* Keyboard Focus */
 .bs-inline-tab:where(:focus-visible) {
-  outline: 2px solid var(--bs-ink-royal);
+  outline: 2px solid var(--bs-royal-400);
 
   &:where([data-selected]) {
     outline-offset: 2px;
@@ -4530,26 +4529,26 @@ select[multiple],
 /* Selected */
 .bs-inline-tab:where([data-selected]) {
   color: var(--bs-ink-white);
-  background-color: var(--bs-royal-400); /* "400" instead of "base", matches Figma design */
+  background-color: var(--bs-accent-1-base);
 }
 /* Disabled (as button or link) */
 .bs-inline-tab:where(:disabled, [aria-disabled="true"]) {
-  color: var(--bs-ink-light);
-  background-color: var(--bs-gray-light);
+  color: var(--bs-ink-disabled);
+  background-color: var(--bs-bg-disabled);
   cursor: default;
   pointer-events: none;
 }
 /* Selected & Disabled */
 .bs-inline-tab:where([data-selected]):where(:disabled, [aria-disabled="true"]) {
   color: var(--bs-ink-white);
-  background-color: var(--bs-gray-base);
+  background-color: var(--bs-neutral-base);
 }
 /* -- Dark Mode Overrides -- */
 :where(.dark .bs-inline-tab) {
 
   /* Ink */
   &:not([data-selected], :disabled, [aria-disabled="true"]) {
-    color: var(--bs-ink-medium);
+    color: var(--bs-royal-200);
   }
 
   /* Selected & Disabled */
@@ -4558,13 +4557,37 @@ select[multiple],
   }
 
   /* Keyboard Focus */
-  &[data-selected]:where(:focus-visible) {
-    outline-offset: 0;
+  &:not([disabled]):where(:focus-visible) {
+    outline-color: var(--bs-royal-200);
+  }
+
+  /* Hover */
+  &:not([disabled]):where(:not([data-selected]):hover) {
+    border-color: var(--bs-royal-200);
+  }
+
+}
+/* -- Softchoice Mode Overrides -- */
+:where(.softchoice .bs-inline-tab) {
+  
+  /* Ink */
+  &:not([data-selected], :disabled, [aria-disabled="true"]) {
+    color: var(--bs-cobalt-400);
+  }
+
+  /* Keyboard Focus */
+  &:not([disabled]):where(:focus-visible) {
+    outline-color: var(--bs-cobalt-400);
+  }
+
+  /* Hover */
+  &:not([disabled]):where(:not([data-selected]):hover) {
+    border-color: var(--bs-cobalt-400);
   }
 
 }
 .bs-loader {
-  --loader-dot-bg: var(--bs-blue-500);
+  --loader-dot-bg: var(--bs-ink-primary);
   --loader-dot-size: .75rem;
   --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); */
@@ -4683,9 +4706,9 @@ select[multiple],
 /* -- SELECTED -- */
 .bs-option:where(:not([aria-disabled="true"])):hover,
 .bs-option:where([aria-selected="true"]) {
-  color: var(--bs-ink-blue);
+  color: var(--bs-ink-primary);
   background: var(--bs-bg-medium-to-light);
-  border-left-color: var(--bs-ink-blue);
+  border-left-color: var(--bs-ink-primary);
 }
 /* selected yet disabled...should be a very rare scenario, but need to handle it  */
 .bs-option:where([aria-disabled="true"]):where([aria-selected="true"]) {
@@ -4694,7 +4717,7 @@ select[multiple],
 }
 /* -- FOCUSED -- */
 .bs-option:where([data-active="true"]) {
-  border: 2px solid var(--bs-blue-base);
+  border: 2px solid var(--bs-primary-base);
   border-radius: 3px;
   outline: none;
 }
@@ -4788,7 +4811,7 @@ select[multiple],
 }
 .bs-pagination button:where(:focus),
 .bs-pagination button:where(:focus-visible) {
-  outline: 2px solid var(--bs-blue-base);
+  outline: 2px solid var(--bs-primary-base);
 }
 .bs-pagination button:where(:focus:not(:focus-visible)) {
   outline: 2px solid transparent;
@@ -4798,7 +4821,7 @@ select[multiple],
   cursor: default;
 }
 .bs-pagination button:where([data-selected]:not([data-selected="false"])) {
-  background-color: var(--bs-blue-base);
+  background-color: var(--bs-primary-base);
   color: var(--bs-gray-50);
 }
 .bs-pagination:where([data-fixed]:not([data-fixed="false"])) {
@@ -4834,7 +4857,7 @@ select[multiple],
 .bs-pill {
   --pill-background: var(--bs-bg-medium);
   --pill-border: transparent;
-  --pill-text: #162FB4; /* one-off component-specific */
+  --pill-text: var(--bs-royal-400);
   --pill-gap: var(--bs-space-2);
 
   align-items: center;
@@ -4859,7 +4882,11 @@ select[multiple],
 }
 /* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
 :where(.dark) .bs-pill {
-  --pill-text: #7585D1;
+  --pill-text: var(--bs-royal-200);
+}
+/* ------------------------------- Softchoice mode (basic & status types only) ------------------------------- */
+:where(.softchoice) .bs-pill {
+  --pill-text: var(--bs-cobalt-400);
 }
 /* ------------------------------ Auto-truncation for content ------------------------------ */
 .bs-pill:has([data-truncate="true"]) {
@@ -4884,7 +4911,7 @@ select[multiple],
   transition: all var(--bs-transition-moderate) var(--bs-transition-ease);
 }
 :is(a, button).bs-pill:is(:hover, :focus) {
-  --pill-border: var(--bs-royal-base);
+  --pill-border: var(--bs-accent-1-base);
 
   color: var(--pill-text);
   outline: transparent;
@@ -4898,10 +4925,10 @@ select[multiple],
   --pill-border: var(--bs-gray-100);
 }
 :where(.dark .bs-box[data-invert]) .bs-pill {
-  --pill-text: var(--bs-royal-400);
+  --pill-text: var(--bs-accent-1-base);
 }
 :where(.dark .bs-box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
-  --pill-border: var(--bs-royal-400);
+  --pill-border: var(--bs-accent-1-base);
 }
 /* ------------------ Generally Applicable ::Before Styles ------------------ */
 .bs-pill::before {
@@ -4909,7 +4936,7 @@ select[multiple],
 }
 /* ------------------------------ Status Styles ------------------------------ */
 .bs-pill:where([data-status]) {
-  --status-color: var(--bs-blue-base);
+  --status-color: var(--bs-primary-base-fixed);
 }
 .bs-pill:where([data-status])::before {
   background-color: var(--status-color);
@@ -4920,22 +4947,22 @@ select[multiple],
 }
 /* ----- Status Colors ----- */
 .bs-pill:where([data-status^="active"]) {
-  --status-color: var(--bs-blue-base);
+  --status-color: var(--bs-primary-base-fixed);
 }
 .bs-pill:where([data-status^="complete"]) {
-  --status-color: var(--bs-purple-400);
+  --status-color: var(--bs-positive-base-fixed);
 }
 .bs-pill:where([data-status^="disabled"]) {
-  --status-color: var(--bs-gray-300);
+  --status-color: var(--bs-ink-disabled);
 }
 .bs-pill:where([data-status^="error"]) {
-  --status-color: var(--bs-red-400);
+  --status-color: var(--bs-negative-dark);
 }
 .bs-pill:where([data-status^="positive"]) {
-  --status-color: #16986D;
+  --status-color:  var(--bs-ecomm-positive-base-fixed);
 }
 .bs-pill:where([data-status^="warning"]) {
-  --status-color: var(--bs-warning);
+  --status-color: var(--bs-warning-dark);
 }
 /* Deprecated; use "data-status disabled" instead */
 .bs-pill:where([data-status^="inactive"]) {
@@ -4973,7 +5000,7 @@ select[multiple],
 }
 /* ------------------------------ Variant: "Filter Active" Styles ------------------------------ */
 .bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])) {
-  --pill-background: var(--bs-blue-base);
+  --pill-background: var(--bs-primary-base-fixed);
   --pill-border: transparent;
   --pill-text: var(--bs-white);
 }
@@ -4981,7 +5008,7 @@ select[multiple],
   --pill-border: transparent;
 }
 :is(a, button).bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])):is(:hover, :focus)  {
-  --pill-background: var(--bs-blue-500);
+  --pill-background: var(--bs-ink-primary);
   --pill-border: transparent;
 }
 /* White X */
@@ -4994,7 +5021,7 @@ select[multiple],
 }
 /* ------------------------------ Variant: "Live Now" Styles ------------------------------ */
 .bs-pill:where([data-variant^="live"]) {
-  --pill-background: var(--bs-plum-base);
+  --pill-background: var(--bs-secondary-base);
   --pill-text: var(--bs-white);
   --pill-gap: var(--bs-space-1);
   text-transform: uppercase;
@@ -5012,7 +5039,7 @@ select[multiple],
 }
 /* ------------------------------ Variant: "Inactive" Styles ------------------------------ */
 .bs-pill:where([data-variant^="inactive"]) {
-  --pill-background: var(--bs-gray-base);
+  --pill-background: var(--bs-neutral-base);
   --pill-text: var(--bs-ink-invert-base);
 }
 /* ------------------------------ Disabled Styles ------------------------------ */
@@ -5041,7 +5068,7 @@ select[multiple],
 }
 /* Action button aka Follow toggle. */
 .bs-profile-details > :where(button:first-child) {
-  color: var(--profile-action-color, var(--bs-warning));
+  color: var(--profile-action-color, var(--bs-ink-warning));
   font-size: inherit;
 }
 .bs-profile-details > :where(button:first-child:hover) {
@@ -5106,7 +5133,7 @@ select[multiple],
 .bs-profile-img:where([data-no-img]:not([data-no-img="false"]))::after {
   align-items: center;
   border: 1px solid currentColor;
-  color: var(--bs-blue-500);
+  color: var(--bs-ink-primary);
   content: attr(data-initials);
   display: flex;
   font-size: var(--profile-text);
@@ -5148,7 +5175,7 @@ a.bs-profile:where([data-layout]) {
   text-decoration: none;
 }
 a.bs-profile:where([data-layout]) {
-  --profile-name-color: var(--bs-ink-blue);
+  --profile-name-color: var(--bs-ink-primary);
 }
 a.bs-profile:where([data-layout]):hover {
   --profile-name-decoration: underline;
@@ -5183,21 +5210,21 @@ a.bs-profile:where([data-layout]):hover {
   animation: bs-spin 1s linear infinite, bs-stroke-change 2s linear infinite;
 }
 .bs-spinner :where(circle) {
-  --bs-spinner-color-1: var(--bs-blue-400);
-  --bs-spinner-color-2: var(--bs-blue-200);
+  --bs-spinner-color-1: var(--bs-primary-base-fixed);
+  --bs-spinner-color-2: var(--bs-primary-light);
 }
 .bs-spinner:where([data-variant="white"]) :where(circle) {
   --bs-spinner-color-1: white;
   --bs-spinner-color-2: white;
 }
 :where(#bs-spinner-gradient stop) {
-  stop-color: var(--bs-plum-400);
+  stop-color: var(--bs-secondary-base-fixed);
 }
 :where(#bs-spinner-gradient stop:first-child) {
-  stop-color: var(--bs-blue-400);
+  stop-color: var(--bs-primary-base-fixed);
 }
 :where(#bs-spinner-gradient stop:last-child) {
-  stop-color: var(--bs-red-400);
+  stop-color: var(--bs-negative-dark);
 }
 @keyframes bs-spin {
   0% {
@@ -5293,7 +5320,7 @@ a.bs-profile:where([data-layout]):hover {
   font-weight: var(--tab-weight, var(--bs-font-normal));
   height: 2.5rem;
   justify-content: var(--tab-justify-self, center);
-  outline-color: var(--bs-blue-base);
+  outline-color: var(--bs-primary-base);
   outline-offset: -1px;
   padding: 0.5rem;
   text-decoration: none;
@@ -5325,7 +5352,7 @@ a.bs-profile:where([data-layout]):hover {
 }
 /* ------------- Active line ------------- */
 .bs-tab-list::after {
-  background-color: var(--bs-blue-base);
+  background-color: var(--bs-primary-base);
   bottom: 0;
   content: '';
   height: 0.25rem;
@@ -5588,7 +5615,7 @@ a.bs-profile:where([data-layout]):hover {
     position: absolute;
     top: 0;
     left: 0;
-    background: var(--bs-table-col-resizer-color, var(--bs-blue-base));
+    background: var(--bs-table-col-resizer-color, var(--bs-primary-base));
   }
 
   /* resizer handle */
@@ -5763,47 +5790,47 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 /* ------------ Status colors ------------ */
 .bs-timeline :where(.bs-step-item[data-status="in-progress"]) {
   --step-color: var(--bs-ink-base);
-  --progress-step-bg: var(--bs-purple-light);
+  --progress-step-bg: var(--bs-positive-light);
 }
 .bs-progress-bar :where(.bs-step-item[data-status="not-started"]) {
   --step-color: var(--bs-ink-light);
-  --progress-step-bg: var(--bs-gray-light);
+  --progress-step-bg: var(--bs-neutral-light);
 }
 .bs-progress-bar :where(.bs-step-item[data-status="in-progress"]),
 .bs-progress-bar :where(.bs-step-item[data-status="complete"]),
 .bs-progress-bar :where(.bs-step-item[data-status="paused"]),
 .bs-progress-bar :where(.bs-step-item[data-status="ongoing"]) {
-  --step-color: var(--bs-ink-plum);
-  --progress-step-bg: var(--bs-plum-medium);
+  --step-color: var(--bs-ink-secondary);
+  --progress-step-bg: var(--bs-secondary-medium);
 }
 .bs-timeline :where(.bs-step-item[data-status="complete"]),
 .bs-timeline :where(.bs-step-item[data-status="paused"]),
 .bs-timeline :where(.bs-step-item[data-status="ongoing"]) {
-  --step-color: var(--bs-ink-purple);
-  --progress-step-bg: var(--bs-purple-medium);
+  --step-color: var(--bs-ink-positive);
+  --progress-step-bg: var(--bs-positive-medium);
 }
 :is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="base"]) {
-  --progress-step-bg: var(--bs-purple-base);
+  --progress-step-bg: var(--bs-positive-base);
 }
 .bs-timeline :where(.bs-step-item[data-status="warning"]) {
-  --step-color: var(--bs-ink-orange);
-  --progress-step-bg: var(--bs-orange-base);
+  --step-color: var(--bs-ink-warning);
+  --progress-step-bg: var(--bs-warning-base);
 }
 .bs-progress-bar :where(.bs-step-item[data-status="warning"]) {
-  --step-color: var(--bs-warning);
-  --progress-step-bg: var(--bs-warning);
+  --step-color: var(--bs-ink-warning);
+  --progress-step-bg: var(--bs-warning-base);
 }
 :is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="error"]),
 :is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="cancelled"]) {
-  --step-color: var(--bs-ink-red);
-  --progress-step-bg: var(--bs-red-base);
+  --step-color: var(--bs-ink-negative);
+  --progress-step-bg: var(--bs-negative-base);
 }
 /* ------------ Text Button ------------ */
 .bs-text-button {
   --btn-focus-inset: -0.25rem -0.5rem;
   --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   --btn-height: auto;
-  --btn-ink: var(--bs-ink-blue);
+  --btn-ink: var(--bs-ink-primary);
   --btn-padding: 0;
   --btn-text-size: var(--bs-text-base);
   --btn-weight: 400;
@@ -5854,14 +5881,14 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 /* ------------ VARIANTS ------------ */
 .bs-text-button:where([data-variant^='negative']) {
-  --btn-main: var(--bs-ink-red);
+  --btn-main: var(--bs-ink-negative);
 }
 /* white variant - for dark backgrounds only */
 .bs-text-button:where([data-variant^='white']) {
   --btn-main: var(--bs-ink-white);
 }
 .bs-text-button:where(:not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-blue-base);
+  --btn-ink: var(--bs-primary-base);
   background-color: transparent;
   text-decoration: underline;
 }
@@ -5876,7 +5903,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 .bs-text-button:where([data-variant^='negative']),
 .bs-text-button:where([data-variant^='negative']:not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-ink-red);
+  --btn-ink: var(--bs-ink-negative);
 }
 .bs-text-button:where([data-variant^='white']),
 .bs-text-button:where([data-variant^='white']:not(:disabled):not([aria-disabled="true"]):hover) {
@@ -5887,14 +5914,14 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
   --btn-ink: var(--bs-ink-light);
 }
 .bs-text-button:where([data-variant^='alt-base']:not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-ink-blue);
+  --btn-ink: var(--bs-ink-primary);
   text-decoration: none;
 }
 .bs-text-button:where([data-variant^='alt-negative']) {
   --btn-ink: var(--bs-ink-light);
 }
 .bs-text-button:where([data-variant^='alt-negative']:not(:disabled):not([aria-disabled="true"]):hover) {
-  --btn-ink: var(--bs-ink-red);
+  --btn-ink: var(--bs-ink-negative);
   text-decoration: none;
 }
 .bs-text-button:where([data-size^='xs']) {
@@ -6179,6 +6206,10 @@ a.bs-text-button {
   POP SYSTEM COMPONENTS
   Components that are built on top of BsPopover. The popover.css must come first.
 */
+#bs-popover-teleport-target {
+  z-index: var(--bs-popover-z-index);
+  position: relative;
+}
 .bs-popover-wrap {
   position: fixed;
   inset: 0;
@@ -6232,51 +6263,51 @@ a.bs-text-button {
   position: relative;
   top: unset;
   left: unset;
-  margin: var(--bs-space-6) 2.25rem; 
+  margin: var(--bs-space-6) 2.25rem;
 }
 /* CENTER */
-.bs-popover:where([data-place-self="center"]) { 
-  place-self: center; 
+.bs-popover:where([data-place-self="center"]) {
+  place-self: center;
 }
 /* TOP OPTIONS... */
-.bs-popover:where([data-place-self="top-start"]) { 
-  place-self: start start; 
+.bs-popover:where([data-place-self="top-start"]) {
+  place-self: start start;
 }
-.bs-popover:where([data-place-self="top"]) { 
-  place-self: start center; 
+.bs-popover:where([data-place-self="top"]) {
+  place-self: start center;
 }
-.bs-popover:where([data-place-self="top-end"]) { 
-  place-self: start end; 
+.bs-popover:where([data-place-self="top-end"]) {
+  place-self: start end;
 }
 /* RIGHT OPTIONS... */
-.bs-popover:where([data-place-self="right-start"]) { 
+.bs-popover:where([data-place-self="right-start"]) {
   place-self: start end;
 }
 .bs-popover:where([data-place-self="right"]) {
-  place-self: center end; 
+  place-self: center end;
 }
-.bs-popover:where([data-place-self="right-end"]) { 
-  place-self: end end; 
+.bs-popover:where([data-place-self="right-end"]) {
+  place-self: end end;
 }
 /* BOTTOM OPTIONS... */
-.bs-popover:where([data-place-self="bottom-start"]) { 
-  place-self: end start; 
+.bs-popover:where([data-place-self="bottom-start"]) {
+  place-self: end start;
 }
-.bs-popover:where([data-place-self="bottom"]) { 
-  place-self: end center; 
+.bs-popover:where([data-place-self="bottom"]) {
+  place-self: end center;
 }
-.bs-popover:where([data-place-self="bottom-end"]) { 
-  place-self: end end; 
+.bs-popover:where([data-place-self="bottom-end"]) {
+  place-self: end end;
 }
 /* LEFT OPTIONS... */
-.bs-popover:where([data-place-self="left-start"]) { 
-  place-self: start start; 
+.bs-popover:where([data-place-self="left-start"]) {
+  place-self: start start;
 }
-.bs-popover:where([data-place-self="left"]) { 
-  place-self: center start; 
+.bs-popover:where([data-place-self="left"]) {
+  place-self: center start;
 }
-.bs-popover:where([data-place-self="left-end"]) { 
-  place-self: end start; 
+.bs-popover:where([data-place-self="left-end"]) {
+  place-self: end start;
 }
 /* -- TRANSITIONS -- */
 .bs-popover-enter-active,
@@ -6356,7 +6387,7 @@ a.bs-text-button {
 }
 .bs-dropdown-filter-button:where(:focus-visible) {
   border-radius: var(--bs-space-1);
-  box-shadow: 0px 0px 0px 1px inset var(--bs-blue-base);
+  box-shadow: 0px 0px 0px 1px inset var(--bs-primary-base);
 }
 /* -- SIZING -- */
 .bs-dropdown:where([data-size="sm"]) {
@@ -6688,6 +6719,7 @@ a.bs-text-button {
   position: fixed;
   right: 0;
   top: auto;
+  z-index: calc(var(--bs-popover-z-index) + 1);
 }
 #bs-toast-teleport-target .bs-popover-wrap {
   display: contents;
@@ -6702,7 +6734,7 @@ a.bs-text-button {
 /* Toast */
 .bs-toast {
   --toast-transform: translate(0, calc(100% + 1.5rem));
-  --toast-variant-color: var(--bs-blue-base);
+  --toast-variant-color: var(--bs-primary-base);
   background-color: var(--bs-bg-base-to-light);
   border-radius: 0;
   border-top: 4px solid var(--toast-variant-color);
@@ -6718,16 +6750,25 @@ a.bs-text-button {
   }
 }
 .bs-toast:where([data-variant="warning"]) {
-  --toast-variant-color: var(--bs-warning);
+  --toast-variant-color: var(--bs-warning-base);
+
+  .bs-toast-header-icon {
+    color: var(--bs-ink-warning);
+  }
 }
 .bs-toast:where([data-variant="positive"]) {
-  --toast-variant-color: var(--bs-purple-400);
-}
-:where(.dark) .bs-toast:where([data-variant="positive"]) {
-  --toast-variant-color: var(--bs-purple-200);
+  --toast-variant-color: var(--bs-positive-base);
+
+  .bs-toast-header-icon {
+    color: var(--bs-ink-positive);
+  }
 }
 .bs-toast:where([data-variant="negative"]) {
-  --toast-variant-color: var(--bs-red-400);
+  --toast-variant-color: var(--bs-negative-base);
+
+  .bs-toast-header-icon {
+    color: var(--bs-ink-negative);
+  }
 }
 /* Toast Header */
 .bs-toast :where(.bs-toast-header) {
@@ -6738,7 +6779,7 @@ a.bs-text-button {
   padding: 1rem;
 }
 .bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
-  color: var(--toast-variant-color);
+  color: var(--bs-ink-primary);
 }
 .bs-toast :where(.bs-toast-header .bs-toast-header-text) {
   font-size: var(--bs-text-md);