@wwtdev/bsds-css 3.0.16 → 3.1.0

package/dist/wwt-bsds.css

@@ -313,224 +313,95 @@
   --bs-popover-z-index: 1100;
 }
 /* Themes */
-:root {
+.softchoice,
+[data-theme="softchoice-light"] {
   /* Ink */
-  --bs-ink-base: var(--bs-black);
-  --bs-ink-medium: var(--bs-gray-500);
-  --bs-ink-light: var(--bs-gray-400);
-  --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* gray-400 at 60% */
-  --bs-ink-invert-base: var(--bs-white);
-  --bs-ink-invert-medium: var(--bs-gray-100);
-  --bs-ink-invert-light: var(--bs-gray-200);
-  --bs-ink-primary: var(--bs-blue-500);
-  --bs-ink-secondary: var(--bs-plum-400);
-  --bs-ink-accent-1: var(--bs-royal-400);
-  --bs-ink-accent-2: var(--bs-violet-400);
-  --bs-ink-accent-3: var(--bs-pink-500);
-  --bs-ink-accent-4: var(--bs-purple-400);
+  --bs-ink-primary: var(--bs-cobalt-400);
+  --bs-ink-secondary: var(--bs-orange-500);
+  --bs-ink-accent-1: var(--bs-midnight-400);
+  --bs-ink-accent-4: var(--bs-orchid-400);
   --bs-ink-positive: var(--bs-green-500);
-  --bs-ink-warning: var(--bs-orange-500);
-  --bs-ink-negative: var(--bs-red-500);
-  --bs-ink-white: var(--bs-white);
+  --bs-ink-warning: var(--bs-yellow-500);
+  --bs-ink-negative: var(--bs-maroon-500);
 
   /* Primary */
-  --bs-primary-base-fixed: var(--bs-blue-400);
-  --bs-primary-base: var(--bs-blue-400);
-  --bs-primary-medium: var(--bs-blue-300);
-  --bs-primary-light: var(--bs-blue-200);
-  --bs-primary-lightest: var(--bs-blue-100);
-  --bs-primary-highlight: var(--bs-blue-10);
+  --bs-primary-base-fixed: var(--bs-cobalt-400);
+  --bs-primary-base: var(--bs-cobalt-400);
+  --bs-primary-medium: var(--bs-cobalt-300);
+  --bs-primary-light: var(--bs-cobalt-200);
+  --bs-primary-lightest: var(--bs-cobalt-100);
+  --bs-primary-highlight: var(--bs-cobalt-10);
 
   /* Secondary */
-  --bs-secondary-base-fixed: var(--bs-plum-400);
-  --bs-secondary-base: var(--bs-plum-400);
-  --bs-secondary-medium: var(--bs-plum-300);
-  --bs-secondary-light: var(--bs-plum-200);
-  --bs-secondary-lightest: var(--bs-plum-100);
-  --bs-secondary-highlight: var(--bs-plum-10);
+  --bs-secondary-base-fixed: var(--bs-orange-400);
+  --bs-secondary-base: var(--bs-orange-400);
+  --bs-secondary-medium: var(--bs-orange-300);
+  --bs-secondary-light: var(--bs-orange-200);
+  --bs-secondary-lightest: var(--bs-orange-100);
+  --bs-secondary-highlight: var(--bs-orange-10);
 
   /* Accent 1 */
-  --bs-accent-1-base-fixed: var(--bs-royal-400);
-  --bs-accent-1-base: var(--bs-royal-400);
-  --bs-accent-1-medium: var(--bs-royal-300);
-  --bs-accent-1-light: var(--bs-royal-200);
-  --bs-accent-1-lightest: var(--bs-royal-100);
-  --bs-accent-1-highlight: var(--bs-royal-10);
-
-  /* Accent 2 */
-  --bs-accent-2-base-fixed: var(--bs-violet-400);
-  --bs-accent-2-base: var(--bs-violet-400);
-  --bs-accent-2-medium: var(--bs-violet-300);
-  --bs-accent-2-light: var(--bs-violet-200);
-  --bs-accent-2-lightest: var(--bs-violet-100);
-  --bs-accent-2-highlight: var(--bs-violet-10);
-
-  /* Accent 3 */
-  --bs-accent-3-base-fixed: var(--bs-pink-400);
-  --bs-accent-3-base: var(--bs-pink-400);
-  --bs-accent-3-medium: var(--bs-pink-300);
-  --bs-accent-3-light: var(--bs-pink-200);
-  --bs-accent-3-lightest: var(--bs-pink-100);
-  --bs-accent-3-highlight: var(--bs-pink-10);
+  --bs-accent-1-base-fixed: var(--bs-midnight-400);
+  --bs-accent-1-base: var(--bs-midnight-400);
+  --bs-accent-1-medium: var(--bs-midnight-300);
+  --bs-accent-1-light: var(--bs-midnight-200);
+  --bs-accent-1-lightest: var(--bs-midnight-100);
+  --bs-accent-1-highlight: var(--bs-midnight-10);
 
   /* Accent 4 */
-  --bs-accent-4-base-fixed: var(--bs-purple-400);
-  --bs-accent-4-base: var(--bs-purple-400);
-  --bs-accent-4-medium: var(--bs-purple-300);
-  --bs-accent-4-light: var(--bs-purple-200);
-  --bs-accent-4-lightest: var(--bs-purple-100);
-  --bs-accent-4-highlight: var(--bs-purple-10);
+  --bs-accent-4-base-fixed: var(--bs-orchid-400);
+  --bs-accent-4-base: var(--bs-orchid-400);
+  --bs-accent-4-medium: var(--bs-orchid-300);
+  --bs-accent-4-light: var(--bs-orchid-200);
+  --bs-accent-4-lightest: var(--bs-orchid-100);
+  --bs-accent-4-highlight: var(--bs-orchid-10);
 
   /* Accent 5 */
-  --bs-accent-5-base: var(--bs-orange-400);
-  --bs-accent-5-medium: var(--bs-orange-300);
-  --bs-accent-5-light: var(--bs-orange-200);
-  --bs-accent-5-lightest: var(--bs-orange-100);
-  --bs-accent-5-highlight: var(--bs-orange-10);
-
-  /* Accent 6 */
-  --bs-accent-6-base: var(--bs-red-400);
-  --bs-accent-6-medium: var(--bs-red-300);
-  --bs-accent-6-light: var(--bs-red-200);
-  --bs-accent-6-lightest: var(--bs-red-100);
-  --bs-accent-6-highlight: var(--bs-red-10);
-
-  /* Accent 7 */
-  --bs-accent-7-base: var(--bs-navy-400);
-  --bs-accent-7-medium: var(--bs-navy-300);
-  --bs-accent-7-light: var(--bs-navy-200);
-  --bs-accent-7-lightest: var(--bs-navy-100);
-  --bs-accent-7-highlight: var(--bs-navy-10);
+  --bs-accent-5-base: var(--bs-gold-400);
+  --bs-accent-5-medium: var(--bs-gold-300);
+  --bs-accent-5-light: var(--bs-gold-200);
+  --bs-accent-5-lightest: var(--bs-gold-100);
+  --bs-accent-5-highlight: var(--bs-gold-10);
 
   /* Neutral */
-  --bs-neutral-dark: var(--bs-gray-500);
-  --bs-neutral-base: var(--bs-gray-400);
-  --bs-neutral-medium: var(--bs-gray-300);
-  --bs-neutral-light: var(--bs-gray-200);
-  --bs-neutral-lightest: var(--bs-gray-100);
-
-  /* Positive */
-  --bs-positive-base: var(--bs-green-400);
-  --bs-positive-medium: var(--bs-green-300);
-  --bs-positive-highlight: var(--bs-green-10);
+  --bs-neutral-dark: var(--bs-charcoal-500);
+  --bs-neutral-base: var(--bs-charcoal-400);
+  --bs-neutral-medium: var(--bs-charcoal-300);
+  --bs-neutral-light: var(--bs-charcoal-200);
+  --bs-neutral-lightest: var(--bs-charcoal-100);
 
   /* Warning */
-  --bs-warning-base: var(--bs-orange-500);
-  --bs-warning-medium: var(--bs-orange-300);
-  --bs-warning-highlight: var(--bs-orange-10);
+  --bs-warning-base: var(--bs-yellow-400);
+  --bs-warning-medium: var(--bs-yellow-300);
+  --bs-warning-highlight: var(--bs-yellow-10);
 
   /* Negative */
-  --bs-negative-base: var(--bs-red-500);
-  --bs-negative-medium: var(--bs-red-300);
-  --bs-negative-highlight: var(--bs-red-10);
+  --bs-negative-base: var(--bs-maroon-500);
+  --bs-negative-medium: var(--bs-maroon-300);
+  --bs-negative-highlight: var(--bs-maroon-10);
 
   /* Background */
-  --bs-bg-base: var(--bs-white);
-  --bs-bg-light: var(--bs-gray-50);
-  --bs-bg-medium: var(--bs-gray-100);
-  --bs-bg-disabled: var(--bs-gray-200);
-  --bs-bg-invert-base: var(--bs-slate-600);
-  --bs-bg-invert-light: var(--bs-slate-500);
-  --bs-bg-invert-medium: var(--bs-slate-400);
-  --bs-bg-base-to-light: var(--bs-white);
-  --bs-bg-base-to-medium: var(--bs-white);
-  --bs-bg-medium-to-base: var(--bs-gray-100);
-  --bs-bg-medium-to-light: var(--bs-gray-100);
-  --bs-bg-light-to-base: var(--bs-gray-50);
-  --bs-bg-light-to-medium: var(--bs-gray-50);
+  --bs-bg-light: var(--bs-charcoal-100);
+  --bs-bg-medium: var(--bs-charcoal-200);
+  --bs-bg-disabled: var(--bs-charcoal-300);
+  --bs-bg-medium-to-base: var(--bs-charcoal-200);
+  --bs-bg-medium-to-light: var(--bs-charcoal-200);
+  --bs-bg-light-to-base: var(--bs-charcoal-100);
+  --bs-bg-light-to-medium: var(--bs-charcoal-100);
 
   /* Borders */
-  --bs-border-dark: var(--bs-gray-300);
-  --bs-border-base: var(--bs-gray-200);
-  --bs-border-medium: var(--bs-gray-150);
-  --bs-border-light: var(--bs-gray-100);
-  --bs-border-medium-to-light: var(--bs-gray-150);
-  --bs-border-input: rgba(99, 66, 145, 0.75); /* violet-300 at 75% */
-  --bs-border-active: var(--bs-blue-400);
-  --bs-border-error: var(--bs-red-500);
-
-  /* -------------- Deprecated Color Tokens -------------- */
-  /* Ink */
-  --bs-ink-blue: var(--bs-blue-500); /* replaced by Ink Primary */
-  --bs-ink-orange: var(--bs-orange-500); /* replaced by Ink Warning */
-  --bs-ink-pink: var(--bs-pink-500); /* replaced by Ink Accent 3 */
-  --bs-ink-plum: var(--bs-plum-400); /* replaced by Ink Secondary */
-  --bs-ink-purple: var(--bs-purple-400); /* replaced by Ink Accent 4 */
-  --bs-ink-red: var(--bs-red-500); /* replaced by Ink Negative */
-  --bs-ink-royal: var(--bs-royal-400); /* replaced by Ink Accent 1 */
-  --bs-ink-violet: var(--bs-violet-400); /* replaced by Ink Accent 2 */
-  --bs-bg-invert-to-medium: var(--bs-slate-400); /* removed in v3 */
-  --bs-ink-accent: var(--bs-plum-400); /* removed in v3 */
-
-  /* Blue (replaced by Primary) */
-  --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);
-
-  /* Gray (replaced by Neutral) */
-  --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);
-
-  /* Navy (replaced by Accent 7) */
-  --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);
-
-  /* Orange (replaced by Warning) */
-  --bs-warning: var(--bs-orange-500);
-  --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);
-
-  /* Pink (replaced by Accent 3) */
-  --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);
-
-  /* Plum (replaced by Secondary) */
-  --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);
-
-  /* Purple (replaced by Accent 4) */
-  --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);
-
-  /* Red (replaced by Negative) */
-  --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);
-
-  /* Royal Blue (replaced by Accent 1) */
-  --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);
-
-  /* Violet (replaced by Accent 2) */
-  --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-border-active: var(--bs-cobalt-400);
+  --bs-border-error: var(--bs-maroon-500);
 }
 /* put browser scrollbars into dark mode */
-/* html selector needed since .dark class gets added to body, but scrolling may be on <html> */
-html:where(:has(.dark)),
-.dark {
+/* html selector needed since data-theme gets added to body, but scrolling may be on <html> */
+html:where(:has(.dark, [data-theme="wwt-dark"])),
+.dark,
+[data-theme="wwt-dark"] {
   color-scheme: dark;
 }
-.dark {
+.dark,
+[data-theme="wwt-dark"] {
   /* Ink */
   --bs-ink-base: var(--bs-white);
   --bs-ink-medium: var(--bs-gray-100);
@@ -643,131 +514,264 @@ html:where(:has(.dark)),
 
   /* -------------- Deprecated Color Tokens -------------- */
   /* Ink */
-  --bs-ink-blue: var(--bs-blue-200); /* replaced by Ink Primary */
-  --bs-ink-orange: var(--bs-orange-200); /* replaced by Ink Warning */
-  --bs-ink-pink: var(--bs-pink-200); /* replaced by Ink Accent 3 */
-  --bs-ink-plum: var(--bs-plum-100); /* replaced by Ink Secondary */
-  --bs-ink-purple: var(--bs-purple-200); /* replaced by Ink Accent 4 */
-  --bs-ink-red: var(--bs-red-200); /* replaced by Ink Negative */
-  --bs-ink-royal: var(--bs-royal-200); /* replaced by Ink Accent 1 */
-  --bs-ink-violet: var(--bs-violet-200); /* replaced by Ink Accent 2 */
-  --bs-bg-invert-to-medium: var(--bs-gray-100); /* removed in v3 */
-  --bs-ink-accent: var(--bs-gray-100); /* removed in v3 */
+  --bs-ink-blue: var(--bs-blue-200); /* replaced by Ink Primary */
+  --bs-ink-orange: var(--bs-orange-200); /* replaced by Ink Warning */
+  --bs-ink-pink: var(--bs-pink-200); /* replaced by Ink Accent 3 */
+  --bs-ink-plum: var(--bs-plum-100); /* replaced by Ink Secondary */
+  --bs-ink-purple: var(--bs-purple-200); /* replaced by Ink Accent 4 */
+  --bs-ink-red: var(--bs-red-200); /* replaced by Ink Negative */
+  --bs-ink-royal: var(--bs-royal-200); /* replaced by Ink Accent 1 */
+  --bs-ink-violet: var(--bs-violet-200); /* replaced by Ink Accent 2 */
+  --bs-bg-invert-to-medium: var(--bs-gray-100); /* removed in v3 */
+  --bs-ink-accent: var(--bs-gray-100); /* removed in v3 */
+
+  /* Blue (replaced by Primary) */
+  --bs-blue-base: var(--bs-blue-300);
+
+  /* Gray (replaced by Neutral) */
+  --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);
+
+  /* Navy (replaced by Accent 7) */
+  --bs-navy-base: var(--bs-navy-200);
+
+  /* Orange (replaced by Warning) */
+  --bs-warning: var(--bs-orange-400);
+  --bs-orange-base: var(--bs-orange-300);
+
+  /* Pink (replaced by Accent 3) */
+  --bs-pink-base: var(--bs-pink-300);
+
+  /* Plum (replaced by Secondary) */
+  --bs-plum-base: var(--bs-plum-300);
+  --bs-plum-medium: var(--bs-plum-200);
+
+  /* Purple (replaced by Accent 4) */
+  --bs-purple-base: var(--bs-purple-300);
+
+  /* Red (replaced by Negative) */
+  --bs-red-base: var(--bs-red-300);
+
+  /* Royal Blue (replaced by Accent 1) */
+  --bs-royal-base: var(--bs-royal-300);
+  --bs-royal-medium: var(--bs-royal-200);
+
+  /* Violet (replaced by Accent 2) */
+  --bs-violet-base: var(--bs-violet-300);
+}
+:root,
+[data-theme="wwt-light"] {
+  /* Ink */
+  --bs-ink-base: var(--bs-black);
+  --bs-ink-medium: var(--bs-gray-500);
+  --bs-ink-light: var(--bs-gray-400);
+  --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* gray-400 at 60% */
+  --bs-ink-invert-base: var(--bs-white);
+  --bs-ink-invert-medium: var(--bs-gray-100);
+  --bs-ink-invert-light: var(--bs-gray-200);
+  --bs-ink-primary: var(--bs-blue-500);
+  --bs-ink-secondary: var(--bs-plum-400);
+  --bs-ink-accent-1: var(--bs-royal-400);
+  --bs-ink-accent-2: var(--bs-violet-400);
+  --bs-ink-accent-3: var(--bs-pink-500);
+  --bs-ink-accent-4: var(--bs-purple-400);
+  --bs-ink-positive: var(--bs-green-500);
+  --bs-ink-warning: var(--bs-orange-500);
+  --bs-ink-negative: var(--bs-red-500);
+  --bs-ink-white: var(--bs-white);
+
+  /* Primary */
+  --bs-primary-base-fixed: var(--bs-blue-400);
+  --bs-primary-base: var(--bs-blue-400);
+  --bs-primary-medium: var(--bs-blue-300);
+  --bs-primary-light: var(--bs-blue-200);
+  --bs-primary-lightest: var(--bs-blue-100);
+  --bs-primary-highlight: var(--bs-blue-10);
+
+  /* Secondary */
+  --bs-secondary-base-fixed: var(--bs-plum-400);
+  --bs-secondary-base: var(--bs-plum-400);
+  --bs-secondary-medium: var(--bs-plum-300);
+  --bs-secondary-light: var(--bs-plum-200);
+  --bs-secondary-lightest: var(--bs-plum-100);
+  --bs-secondary-highlight: var(--bs-plum-10);
+
+  /* Accent 1 */
+  --bs-accent-1-base-fixed: var(--bs-royal-400);
+  --bs-accent-1-base: var(--bs-royal-400);
+  --bs-accent-1-medium: var(--bs-royal-300);
+  --bs-accent-1-light: var(--bs-royal-200);
+  --bs-accent-1-lightest: var(--bs-royal-100);
+  --bs-accent-1-highlight: var(--bs-royal-10);
+
+  /* Accent 2 */
+  --bs-accent-2-base-fixed: var(--bs-violet-400);
+  --bs-accent-2-base: var(--bs-violet-400);
+  --bs-accent-2-medium: var(--bs-violet-300);
+  --bs-accent-2-light: var(--bs-violet-200);
+  --bs-accent-2-lightest: var(--bs-violet-100);
+  --bs-accent-2-highlight: var(--bs-violet-10);
+
+  /* Accent 3 */
+  --bs-accent-3-base-fixed: var(--bs-pink-400);
+  --bs-accent-3-base: var(--bs-pink-400);
+  --bs-accent-3-medium: var(--bs-pink-300);
+  --bs-accent-3-light: var(--bs-pink-200);
+  --bs-accent-3-lightest: var(--bs-pink-100);
+  --bs-accent-3-highlight: var(--bs-pink-10);
+
+  /* Accent 4 */
+  --bs-accent-4-base-fixed: var(--bs-purple-400);
+  --bs-accent-4-base: var(--bs-purple-400);
+  --bs-accent-4-medium: var(--bs-purple-300);
+  --bs-accent-4-light: var(--bs-purple-200);
+  --bs-accent-4-lightest: var(--bs-purple-100);
+  --bs-accent-4-highlight: var(--bs-purple-10);
+
+  /* Accent 5 */
+  --bs-accent-5-base: var(--bs-orange-400);
+  --bs-accent-5-medium: var(--bs-orange-300);
+  --bs-accent-5-light: var(--bs-orange-200);
+  --bs-accent-5-lightest: var(--bs-orange-100);
+  --bs-accent-5-highlight: var(--bs-orange-10);
+
+  /* Accent 6 */
+  --bs-accent-6-base: var(--bs-red-400);
+  --bs-accent-6-medium: var(--bs-red-300);
+  --bs-accent-6-light: var(--bs-red-200);
+  --bs-accent-6-lightest: var(--bs-red-100);
+  --bs-accent-6-highlight: var(--bs-red-10);
+
+  /* Accent 7 */
+  --bs-accent-7-base: var(--bs-navy-400);
+  --bs-accent-7-medium: var(--bs-navy-300);
+  --bs-accent-7-light: var(--bs-navy-200);
+  --bs-accent-7-lightest: var(--bs-navy-100);
+  --bs-accent-7-highlight: var(--bs-navy-10);
+
+  /* Neutral */
+  --bs-neutral-dark: var(--bs-gray-500);
+  --bs-neutral-base: var(--bs-gray-400);
+  --bs-neutral-medium: var(--bs-gray-300);
+  --bs-neutral-light: var(--bs-gray-200);
+  --bs-neutral-lightest: var(--bs-gray-100);
+
+  /* Positive */
+  --bs-positive-base: var(--bs-green-400);
+  --bs-positive-medium: var(--bs-green-300);
+  --bs-positive-highlight: var(--bs-green-10);
+
+  /* Warning */
+  --bs-warning-base: var(--bs-orange-500);
+  --bs-warning-medium: var(--bs-orange-300);
+  --bs-warning-highlight: var(--bs-orange-10);
+
+  /* Negative */
+  --bs-negative-base: var(--bs-red-500);
+  --bs-negative-medium: var(--bs-red-300);
+  --bs-negative-highlight: var(--bs-red-10);
+
+  /* Background */
+  --bs-bg-base: var(--bs-white);
+  --bs-bg-light: var(--bs-gray-50);
+  --bs-bg-medium: var(--bs-gray-100);
+  --bs-bg-disabled: var(--bs-gray-200);
+  --bs-bg-invert-base: var(--bs-slate-600);
+  --bs-bg-invert-light: var(--bs-slate-500);
+  --bs-bg-invert-medium: var(--bs-slate-400);
+  --bs-bg-base-to-light: var(--bs-white);
+  --bs-bg-base-to-medium: var(--bs-white);
+  --bs-bg-medium-to-base: var(--bs-gray-100);
+  --bs-bg-medium-to-light: var(--bs-gray-100);
+  --bs-bg-light-to-base: var(--bs-gray-50);
+  --bs-bg-light-to-medium: var(--bs-gray-50);
+
+  /* Borders */
+  --bs-border-dark: var(--bs-gray-300);
+  --bs-border-base: var(--bs-gray-200);
+  --bs-border-medium: var(--bs-gray-150);
+  --bs-border-light: var(--bs-gray-100);
+  --bs-border-medium-to-light: var(--bs-gray-150);
+  --bs-border-input: rgba(99, 66, 145, 0.75); /* violet-300 at 75% */
+  --bs-border-active: var(--bs-blue-400);
+  --bs-border-error: var(--bs-red-500);
+
+  /* -------------- Deprecated Color Tokens -------------- */
+  /* Ink */
+  --bs-ink-blue: var(--bs-blue-500); /* replaced by Ink Primary */
+  --bs-ink-orange: var(--bs-orange-500); /* replaced by Ink Warning */
+  --bs-ink-pink: var(--bs-pink-500); /* replaced by Ink Accent 3 */
+  --bs-ink-plum: var(--bs-plum-400); /* replaced by Ink Secondary */
+  --bs-ink-purple: var(--bs-purple-400); /* replaced by Ink Accent 4 */
+  --bs-ink-red: var(--bs-red-500); /* replaced by Ink Negative */
+  --bs-ink-royal: var(--bs-royal-400); /* replaced by Ink Accent 1 */
+  --bs-ink-violet: var(--bs-violet-400); /* replaced by Ink Accent 2 */
+  --bs-bg-invert-to-medium: var(--bs-slate-400); /* removed in v3 */
+  --bs-ink-accent: var(--bs-plum-400); /* removed in v3 */
 
   /* Blue (replaced by Primary) */
-  --bs-blue-base: var(--bs-blue-300);
+  --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);
 
   /* Gray (replaced by Neutral) */
-  --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-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);
 
   /* Navy (replaced by Accent 7) */
-  --bs-navy-base: var(--bs-navy-200);
+  --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);
 
   /* Orange (replaced by Warning) */
-  --bs-warning: var(--bs-orange-400);
-  --bs-orange-base: var(--bs-orange-300);
+  --bs-warning: var(--bs-orange-500);
+  --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);
 
   /* Pink (replaced by Accent 3) */
-  --bs-pink-base: var(--bs-pink-300);
+  --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);
 
   /* Plum (replaced by Secondary) */
-  --bs-plum-base: var(--bs-plum-300);
-  --bs-plum-medium: var(--bs-plum-200);
+  --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);
 
   /* Purple (replaced by Accent 4) */
-  --bs-purple-base: var(--bs-purple-300);
+  --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);
 
   /* Red (replaced by Negative) */
-  --bs-red-base: var(--bs-red-300);
+  --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);
 
   /* Royal Blue (replaced by Accent 1) */
-  --bs-royal-base: var(--bs-royal-300);
-  --bs-royal-medium: var(--bs-royal-200);
+  --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);
 
   /* Violet (replaced by Accent 2) */
-  --bs-violet-base: var(--bs-violet-300);
-}
-.softchoice {
-  /* Ink */
-  --bs-ink-primary: var(--bs-cobalt-400);
-  --bs-ink-secondary: var(--bs-orange-500);
-  --bs-ink-accent-1: var(--bs-midnight-400);
-  --bs-ink-accent-4: var(--bs-orchid-400);
-  --bs-ink-positive: var(--bs-green-500);
-  --bs-ink-warning: var(--bs-yellow-500);
-  --bs-ink-negative: var(--bs-maroon-500);
-
-  /* Primary */
-  --bs-primary-base-fixed: var(--bs-cobalt-400);
-  --bs-primary-base: var(--bs-cobalt-400);
-  --bs-primary-medium: var(--bs-cobalt-300);
-  --bs-primary-light: var(--bs-cobalt-200);
-  --bs-primary-lightest: var(--bs-cobalt-100);
-  --bs-primary-highlight: var(--bs-cobalt-10);
-
-  /* Secondary */
-  --bs-secondary-base-fixed: var(--bs-orange-400);
-  --bs-secondary-base: var(--bs-orange-400);
-  --bs-secondary-medium: var(--bs-orange-300);
-  --bs-secondary-light: var(--bs-orange-200);
-  --bs-secondary-lightest: var(--bs-orange-100);
-  --bs-secondary-highlight: var(--bs-orange-10);
-
-  /* Accent 1 */
-  --bs-accent-1-base-fixed: var(--bs-midnight-400);
-  --bs-accent-1-base: var(--bs-midnight-400);
-  --bs-accent-1-medium: var(--bs-midnight-300);
-  --bs-accent-1-light: var(--bs-midnight-200);
-  --bs-accent-1-lightest: var(--bs-midnight-100);
-  --bs-accent-1-highlight: var(--bs-midnight-10);
-
-  /* Accent 4 */
-  --bs-accent-4-base-fixed: var(--bs-orchid-400);
-  --bs-accent-4-base: var(--bs-orchid-400);
-  --bs-accent-4-medium: var(--bs-orchid-300);
-  --bs-accent-4-light: var(--bs-orchid-200);
-  --bs-accent-4-lightest: var(--bs-orchid-100);
-  --bs-accent-4-highlight: var(--bs-orchid-10);
-
-  /* Accent 5 */
-  --bs-accent-5-base: var(--bs-gold-400);
-  --bs-accent-5-medium: var(--bs-gold-300);
-  --bs-accent-5-light: var(--bs-gold-200);
-  --bs-accent-5-lightest: var(--bs-gold-100);
-  --bs-accent-5-highlight: var(--bs-gold-10);
-
-  /* Neutral */
-  --bs-neutral-dark: var(--bs-charcoal-500);
-  --bs-neutral-base: var(--bs-charcoal-400);
-  --bs-neutral-medium: var(--bs-charcoal-300);
-  --bs-neutral-light: var(--bs-charcoal-200);
-  --bs-neutral-lightest: var(--bs-charcoal-100);
-
-  /* Warning */
-  --bs-warning-base: var(--bs-yellow-400);
-  --bs-warning-medium: var(--bs-yellow-300);
-  --bs-warning-highlight: var(--bs-yellow-10);
-
-  /* Negative */
-  --bs-negative-base: var(--bs-maroon-500);
-  --bs-negative-medium: var(--bs-maroon-300);
-  --bs-negative-highlight: var(--bs-maroon-10);
-
-  /* Background */
-  --bs-bg-light: var(--bs-charcoal-100);
-  --bs-bg-medium: var(--bs-charcoal-200);
-  --bs-bg-disabled: var(--bs-charcoal-300);
-  --bs-bg-medium-to-base: var(--bs-charcoal-200);
-  --bs-bg-medium-to-light: var(--bs-charcoal-200);
-  --bs-bg-light-to-base: var(--bs-charcoal-100);
-  --bs-bg-light-to-medium: var(--bs-charcoal-100);
-
-  /* Borders */
-  --bs-border-active: var(--bs-cobalt-400);
-  --bs-border-error: var(--bs-maroon-500);
+  --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);
 }
 /* Reset */
 /* Provides the minimum reset needed for CSS components to function properly */
@@ -1136,8 +1140,8 @@ textarea {
   padding-block: var(--input-padding-block, 0.0625rem);
   padding-inline: var(--input-padding-inline, 0.75rem);
 }
-:where(.dark) input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-:where(.dark) textarea {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) textarea {
   --input-bg: transparent;
 }
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
@@ -1158,10 +1162,10 @@ textarea {
 :is(input, textarea)::placeholder {
   color: var(--input-placeholder, var(--bs-violet-100));
 }
-:where(.dark) :is(input, textarea)::-moz-placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(input, textarea)::-moz-placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
-:where(.dark) :is(input, textarea)::placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(input, textarea)::placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
 :is(input, textarea):where(:focus-visible)::-moz-placeholder {
@@ -1299,7 +1303,7 @@ select {
   padding-block: var(--input-padding-block, 0.0625rem);
   padding-inline: var(--input-padding-inline, 0.75rem);
 }
-:where(.dark) select {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) select {
   --input-bg: transparent;
 }
 select {
@@ -1314,10 +1318,10 @@ select::-moz-placeholder {
 select::placeholder {
   color: var(--input-placeholder, var(--bs-violet-100));
 }
-:where(.dark) select::-moz-placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) select::-moz-placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
-:where(.dark) select::placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) select::placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
 select:where(:focus-visible)::-moz-placeholder {
@@ -1374,11 +1378,11 @@ select[multiple] {
   background-image: none;
   height: auto;
 }
-:where(.dark) select {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) select {
   /* URL Encoded SVG dropdown caret so there is something there */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
-:where(.dark) select:where(:disabled) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) select:where(:disabled) {
   /* URL Encoded SVG dropdown caret so there is something there */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23555775' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
@@ -1674,7 +1678,6 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
 }
 /* Backdrop for mobile bottom sheet */
 .bs-dropdown-deprecated-backdrop {
-  -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   background: rgba(29, 30, 72, 0.05);
   bottom: 0;
@@ -2111,7 +2114,7 @@ Custom properties:
   padding-inline: var(--input-padding-inline, 0.75rem);
   text-overflow: ellipsis;
 }
-:where(.dark) .bs-select-deprecated {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated {
   --input-bg: transparent;
 }
 .bs-select-deprecated {
@@ -2124,11 +2127,11 @@ Custom properties:
 .bs-select-deprecated:where([data-placeholder="true"]) {
   color: var(--input-placeholder, var(--bs-violet-100));
 }
-:where(.dark) .bs-select-deprecated::-moz-placeholder {
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated::-moz-placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
-:where(.dark) .bs-select-deprecated::placeholder,
-:where(.dark) .bs-select-deprecated:where([data-placeholder="true"]) {
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated::placeholder,
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated:where([data-placeholder="true"]) {
   --input-placeholder: var(--bs-violet-200);
 }
 .bs-select-deprecated:where(:focus-visible)::-moz-placeholder {
@@ -2181,11 +2184,11 @@ Custom properties:
   background-image: none;
   height: auto;
 }
-:where(.dark) .bs-select-deprecated {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated {
   /* URL Encoded SVG dropdown caret so there is something there */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
-:where(.dark) .bs-select-deprecated:where(:disabled) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-select-deprecated:where(:disabled) {
   /* URL Encoded SVG dropdown caret so there is something there */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23555775' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
@@ -2198,8 +2201,8 @@ Custom properties:
   display: flex;
   padding-right: var(--input-padding-inline, 0.75rem);
 }
-:where(.dark) :where(button).bs-select-deprecated,
-:where(.dark) :where(button).bs-select-deprecated:where(:disabled) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :where(button).bs-select-deprecated,
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :where(button).bs-select-deprecated:where(:disabled) {
   background-image: none;
 }
 :where(button).bs-select-deprecated :where(*:first-child) {
@@ -2395,7 +2398,7 @@ Custom properties:
   width: max-content;
   z-index: 999;
 }
-:where(.dark) .bs-tooltip :where(.bs-tooltip-text) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-tooltip-deprecated :where(.bs-tooltip-deprecated-text) {
   color: var(--bs-ink-base);
 }
 /* -------------------- POSITION: UNDEFINED / TOP -------------------- */
@@ -2725,12 +2728,16 @@ This must go last to properly override the other classes
     margin-top: 0;
   }
 }
-/* COLOR VARIANTS */
-.bs-alert:where([data-variant="success"]) {
+/* COLOR VARIANTS
+'success' has been deprecated in favor of 'positive' naming convention.
+*/
+.bs-alert:where([data-variant="success"]),
+.bs-alert:where([data-variant="positive"]) {
   background-color: var(--bs-positive-highlight);
   border-color: var(--bs-ink-positive);
 }
-.bs-alert:where([data-variant="success"]) :where(.bs-alert-icon) {
+.bs-alert:where([data-variant="success"]) :where(.bs-alert-icon),
+.bs-alert:where([data-variant="positive"]) :where(.bs-alert-icon) {
   color: var(--bs-ink-positive);
 }
 .bs-alert:where([data-variant="warning"]) {
@@ -2748,16 +2755,15 @@ This must go last to properly override the other classes
   color: var(--bs-ink-negative);
 }
 /* DARK MODE SPECIAL CASE */
-.dark .bs-alert :where(.bs-alert-action) {
-  --btn-border-color-focused: var(--bs-text-base);
-  --btn-text-color: var(--bs-text-base);
-  --btn-text-color-hovered: var(--bs-text-base);
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-alert :where(.bs-alert-action) {
+  --btn-border-color-focused: var(--bs-ink-base);
+  --btn-text-color: var(--bs-ink-base);
+  --btn-text-color-hovered: var(--bs-ink-base);
 }
 .bs-backdrop {
   position: fixed;
   inset: 0;
-  -webkit-backdrop-filter: blur(4px);
-          backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
   background: rgba(29, 30, 72, 0.05);
   transition-property: opacity;
   transition-duration: var(--bs-backdrop-transition-duration);
@@ -2951,7 +2957,7 @@ This must go last to properly override the other classes
 }
 /*
 Workaround for BsPopover shifting issue on BsButton scale down
-See: https://github.wwt.com/custom-apps/wwt-blue-steel/pull/917
+See: https://github.com/wwt-custom-apps/wwt-blue-steel/pull/917
 */
 .bs-button:where(.bs-button-no-scale:active) {
   transform: scale(1);
@@ -3117,6 +3123,8 @@ See: https://github.wwt.com/custom-apps/wwt-blue-steel/pull/917
   --btn-padding: .25rem .75rem .375rem;
   /* Std button size="sm" text size is same across all media sizes */
   --btn-text-size: var(--bs-text-sm);
+  /* Override height to ensure consistent sizing */
+  height: var(--btn-height);
 }
 /* DEPRECATED */
 /* Text buttons: For now, text size not dependent on media size */
@@ -3610,11 +3618,11 @@ a.bs-circle-button {
   font-weight: var(--description-weight);
   line-height: var(--description-line-height);
 }
-.bs-empty-state :where(a) {
+.bs-empty-state :where(a:not(.bs-button)) {
   color: var(--bs-ink-primary);
   text-decoration: underline;
 }
-.bs-empty-state :where(a:hover) {
+.bs-empty-state :where(a:hover:not(.bs-button)) {
   cursor: pointer;
 }
 /* Call to Actions */
@@ -3755,7 +3763,7 @@ button:where(.bs-filter-button) {
 .bs-filter-button :where(.bs-badge) {
   --badge-bg: var(--bs-ink-primary);
 }
-:where(.dark) .bs-filter-button :where(.bs-badge) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-filter-button :where(.bs-badge) {
   --badge-bg: var(--bs-primary-medium);
 }
 .bs-filter-button:hover :where(.bs-badge) {
@@ -4338,8 +4346,12 @@ button:where(.bs-filter-button) {
   color: var(--bs-ink-white);
   background-color: var(--bs-neutral-base);
 }
+/* Size */
+.bs-inline-tab:where([data-size="sm"]) {
+  height: 1.75rem;
+}
 /* -- Dark Mode Overrides -- */
-:where(.dark .bs-inline-tab) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-inline-tab {
 
   /* Selected & Disabled */
   &[data-selected]:where(:disabled, [aria-disabled="true"]) {
@@ -4363,7 +4375,7 @@ button:where(.bs-filter-button) {
   pointer-events: none;
   position: relative;
 }
-:where(.dark) .bs-input-addon {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-addon {
   background-color: var(--input-bg, transparent);
 }
 .bs-input-addon * {
@@ -4608,6 +4620,10 @@ data-autosize-icons="true" - see above
 .bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible) {
   outline: 1px solid var(--focus-border);
 }
+/* -- Small size variant -- */
+.bs-input-addon:where([data-size="sm"]) {
+  --input-addon-height: 1.75rem;
+}
 /* !! Some styles duplicated to base/input-booleans.css !! */
 .bs-boolean {
   display: inline-flex;
@@ -4774,7 +4790,7 @@ data-autosize-icons="true" - see above
   overflow: hidden;
   white-space: nowrap;
 }
-:where(.dark) .bs-input-button-placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-button-placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
 /* -- Display Value -- */
@@ -4823,7 +4839,7 @@ data-autosize-icons="true" - see above
   --badge-bg: var(--bs-ink-disabled);
 }
 .bs-input-button:where([aria-disabled="true"]) :where(.bs-input-button-caret, .bs-input-button-placeholder) {
- display: none;
+  display: none;
 }
 .bs-input-phone :where(.bs-input-addon) > button {
   align-items: center;
@@ -4849,20 +4865,28 @@ data-autosize-icons="true" - see above
   min-width: 7.5rem;
 }
 .bs-input-search {
+  align-items: center;
+  background-color: var(--input-bg, var(--bs-bg-base));
   display: grid;
   grid-template-columns: 1fr 2.5rem;
-  align-items: center;
-  width: 100%;
   height: var(--input-search-height, 2.5rem);
+  width: 100%;
+
+  :where(:has(.bs-input-search-input:disabled)) {
+    --input-bg: var(--bs-bg-disabled);
+  }
+}
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-search {
+  --input-bg: transparent;
 }
 /* -- Icon -- */
 .bs-input-search-icon {
   --icon-size: var(--search-icon-size, 1.75rem);
-  position: relative;
   grid-area: 1 / 1;
-  padding: var(--search-icon-padding, 0 0 0 .75rem);
   height: 100%;
+  padding: var(--search-icon-padding, 0 0 0 .75rem);
   pointer-events: none;
+  position: relative;
   z-index: 1;
 }
 .bs-input-search-icon :where(svg) {
@@ -4870,6 +4894,7 @@ data-autosize-icons="true" - see above
 }
 /* -- Input -- */
 .bs-input-search-input {
+  --input-bg: transparent;
   --input-padding-inline: .75rem;
   grid-area: 1 / 1 / 1 / -1;
   pointer-events: auto;
@@ -4889,19 +4914,19 @@ data-autosize-icons="true" - see above
 }
 /* -- Button -- */
 .bs-input-search-button {
-  grid-area: 1 / 2 / 1 / -1;
-  display: flex;
   align-items: center;
-  justify-content: center;
-  height: 100%;
-  cursor: pointer;
   background-color: inherit;
+  cursor: pointer;
+  display: flex;
+  grid-area: 1 / 2 / 1 / -1;
+  height: 100%;
+  justify-content: center;
   transition: transform var(--bs-transition-fast) var(--bs-transition-ease);
 }
 .bs-input-search-button:where(:focus-visible) {
-  outline: none;
   border-radius: .25rem;
   box-shadow: var(--bs-blue-base) 0px 0px 0px 1px inset;
+  outline: none;
 }
 /* -- Disabled -- */
 .bs-input-search:where(:has(:disabled)) {
@@ -4910,30 +4935,41 @@ data-autosize-icons="true" - see above
 /* -- Filter Variant -- */
 .bs-input-search:where([data-variant="filter"]) :where(.bs-input-search-input) {
   --focus-border: transparent;
-  --input-border: transparent;
   --input-addon-height: 1.5rem;
+  --input-border: transparent;
   --input-caret: var(--bs-blue-base);
   --input-padding-block: 0 0.125rem;
   --input-padding-inline: 2.5rem 0.5rem;
   --input-placeholder: var(--bs-ink-light);
   --input-text-size: var(--bs-text-sm);
-  --search-icon-size: 1rem;
   --search-icon-padding: 0;
+  --search-icon-size: 1rem;
 }
 .bs-input-search:where([data-variant="filter"]):where(:focus-within) .bs-input-search-input {
   --input-border: transparent;
 }
-:where(.dark) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::-moz-placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::-moz-placeholder {
   --input-placeholder: var(--bs-ink-light);
 }
-:where(.dark) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-input-search:where([data-variant="filter"]) .bs-input-search-input::placeholder {
   --input-placeholder: var(--bs-ink-light);
 }
 .bs-input-search:where([data-variant="filter"]):where(:has(:disabled)) .bs-input-search-input {
   --input-bg: var(--bs-bg-base);
   --input-border: transparent;
 }
-/* !! Styles duplicated to base/input-general.css !! */
+/* -- Small size variant -- */
+.bs-input-search:where([data-size="sm"]) {
+  --input-search-height: 1.75rem;
+  --search-icon-size: 1.5rem;
+}
+.bs-input-search:where([data-size="sm"]) .bs-input-search-icon + .bs-input-search-input {
+  padding-inline-start: 2rem;
+}
+.bs-input-search:where([data-size="sm"]) .bs-input-search-input:has(+ .bs-input-search-button) {
+  padding-inline-end: 2rem;
+}
+/* !! Styles duplicated to base/input-text.css !! */
 /* Includes text inputs & textarea */
 /*
 Custom properties:
@@ -4959,12 +4995,12 @@ Custom properties:
   color: var(--bs-ink-base);
   font-size: var(--input-text-size, var(--bs-text-base));
   font-weight: 400;
-  height: 2.5rem;
+  height: var(--input-height, 2.5rem);
   line-height: var(--bs-leading-lg);
   padding-block: var(--input-padding-block, 0.0625rem);
   padding-inline: var(--input-padding-inline, 0.75rem);
 }
-:where(.dark) :is(.bs-input, .bs-textarea) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(.bs-input, .bs-textarea) {
   --input-bg: transparent;
 }
 :is(.bs-input, .bs-textarea) {
@@ -4986,11 +5022,11 @@ Custom properties:
 :is(.bs-input, .bs-textarea):where([data-placeholder="true"]) {
   color: var(--input-placeholder, var(--bs-violet-100));
 }
-:where(.dark) :is(.bs-input, .bs-textarea)::-moz-placeholder {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(.bs-input, .bs-textarea)::-moz-placeholder {
   --input-placeholder: var(--bs-violet-200);
 }
-:where(.dark) :is(.bs-input, .bs-textarea)::placeholder,
-:where(.dark) :is(.bs-input, .bs-textarea):where([data-placeholder="true"]) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(.bs-input, .bs-textarea)::placeholder,
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :is(.bs-input, .bs-textarea):where([data-placeholder="true"]) {
   --input-placeholder: var(--bs-violet-200);
 }
 :is(.bs-input, .bs-textarea):where(:focus-visible)::-moz-placeholder {
@@ -5034,6 +5070,14 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
 :is(.bs-input, .bs-textarea)[disabled]::placeholder {
   opacity: 0;
 }
+/* -- Small size variant -- */
+.bs-input:where([data-size="sm"]),
+:where([data-size="sm"]) .bs-input {
+  --input-height: 1.75rem;
+  --input-padding-block: 0.125rem;
+  --input-padding-inline: 0.5rem;
+  --input-text-size: var(--bs-text-sm);
+}
 /* !! Some styles duplicated to base/labels.css !! */
 label:where(.bs-label) {
   display: inline-block;
@@ -5257,7 +5301,7 @@ label:where(.bs-label) {
   box-shadow: inset 0 0 0 2px var(--bs-primary-base);
 }
 /* -- NEGATIVE -- */
-.bs-option:where([data-negative="true"]:hover),
+.bs-option:where(:not([aria-disabled="true"])[data-negative="true"]:hover),
 .bs-option:where(:not([data-multiple="true"])[data-negative="true"][aria-selected="true"]) {
   --description-color: var(--bs-ink-negative);
   background: var(--bs-negative-highlight);
@@ -5303,12 +5347,11 @@ label:where(.bs-label) {
 .bs-option-grid:where([data-icon-col="true"]) :where(:nth-child(3)),
 .bs-option-grid:where(:not([data-icon-col="true"])) :where(:nth-child(2)) {
   color: var(--description-color);
-  font-size: var(--bs-text-xs);
+  font-size: var(--bs-text-sm);
   grid-area: description;
   padding-top: 0.125rem;
 }
 .bs-overlay {
-  -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   background: rgba(29, 30, 72, 0.05);
   bottom: 0;
@@ -5506,7 +5549,7 @@ label:where(.bs-label) {
   --pill-background: var(--bs-purple-100);
 }
 /* Dark mode selector for complete */
-:where(.dark) .bs-pill:where([data-status^="complete"]) {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-pill:where([data-status^="complete"]) {
   --status-color: var(--bs-purple-100);
   --pill-background: var(--bs-purple-400);
 }
@@ -5532,7 +5575,7 @@ label:where(.bs-label) {
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%230A0B19'/%3E%3C/svg%3E");
 }
 /* White + */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="add"]):not(:disabled, [aria-disabled="true"])::after{
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-pill:where([data-variant^="filter"][data-variant*="add"]):not(:disabled, [aria-disabled="true"])::after{
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%23ffffff'/%3E%3C/svg%3E");
 }
 /* ------------------------------ Variant: "Filter Remove" Styles ------------------------------ */
@@ -5541,7 +5584,7 @@ label:where(.bs-label) {
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
 }
 /* White X */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):not(:disabled, [aria-disabled="true"])::after {
+:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):not(:disabled, [aria-disabled="true"])::after {
   content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
 }
 /* ------------------------------ Variant: "Filter Active" Styles DEPRECATED ------------------------------ */
@@ -5653,6 +5696,7 @@ label:where(.bs-label) {
 
   aspect-ratio: 1/1;
   border-radius: 50%;
+  color: var(--bs-ink-primary);
   height: var(--profile-size);
   overflow: hidden;
   position: relative;
@@ -5688,7 +5732,7 @@ label:where(.bs-label) {
 .bs-profile-img:where([data-no-img]:not([data-no-img="false"]))::after {
   align-items: center;
   border: 1px solid currentColor;
-  color: var(--bs-ink-primary);
+  color: currentColor;
   content: attr(data-initials);
   display: flex;
   font-size: var(--profile-text);
@@ -5939,6 +5983,79 @@ a.bs-profile:where([data-layout]):hover {
 .bs-switch input:where(:disabled) {
   cursor: default;
 }
+.bs-switch-button-group {
+  display: flex;
+  background-color: var(--bs-bg-base);
+  position: relative;
+  align-items: stretch;
+}
+.bs-switch-button {
+  display: flex;
+  flex: 1 0 0;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--bs-space-3);
+  border: 1px solid var(--bs-border-base);
+  font-weight: var(--bs-font-normal);
+  background: transparent;
+  font-size: var(--bs-text-sm);
+  line-height:var(--bs-leading-lg);
+  font-family: inherit;
+  color: var(--bs-ink-base);
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+}
+.bs-switch-button:where(:first-child) {
+  border-radius: 0.25rem 0 0 0.25rem;
+}
+.bs-switch-button:where(:last-child) {
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+.bs-switch-button:where(:not(:first-child)) {
+  border-left: none;
+}
+.bs-switch-button:where(:not([data-selected]):hover) {
+  color: var(--bs-ink-primary);
+}
+/* focus */
+.bs-switch-button:where(:focus-visible) {
+  border: 1px solid var(--bs-border-active);
+}
+.bs-switch-button:where(:last-child):where(:focus-visible) {
+  border-right: 1px solid var(--bs-border-active);
+}
+/* Selected state */
+.bs-switch-button:where([data-selected]) {
+  background-color: var(--bs-primary-highlight);
+  border: 1px solid var(--bs-border-active);
+  color: var(--bs-ink-primary);
+  font-weight: var(--bs-font-semibold);
+}
+.bs-switch-button:where(:has(+ .bs-switch-button:where([data-selected="true"]))) {
+  border-right-color: transparent;
+}
+/* Size variants */
+.bs-switch-button-group:where([data-size="sm"]) {
+  height: 28px;
+}
+.bs-switch-button-group:where([data-size="md"]) {
+  height: 40px;
+}
+/* disabled styling */
+/* .bs-switch-button-group[data-disabled] .bs-switch-button {  */
+.bs-switch-button:where(:disabled) {
+  cursor: default;
+  color: var(--bs-ink-disabled);
+  pointer-events: none;
+}
+/* .bs-switch-button-group[data-disabled] .bs-switch-button[data-selected] { */
+.bs-switch-button:where(:disabled):where([data-selected]) {
+  background-color: var(--bs-bg-disabled);
+  border: 1px solid var(--bs-ink-disabled);
+  color: var(--bs-ink-disabled);
+}
 .bs-tab-list {
   --active-line-max-width: 0;
   --active-line-offset: 0;
@@ -6570,7 +6687,11 @@ a.bs-text-button {
   --step-color: var(--bs-ink-warning);
   --progress-step-bg: var(--bs-warning-base);
 }
+/* 
+'error' status is deprecated, use 'negative' instead
+*/
 :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="negative"]),
 :is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="cancelled"]) {
   --step-color: var(--bs-ink-negative);
   --progress-step-bg: var(--bs-negative-base);
@@ -6587,12 +6708,12 @@ a.bs-text-button {
   --toggle-color: var(--bs-white);
   --top-offset: 48px;
 }
-.dark :where(.bs-vertical-nav-wrapper) {
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :where(.bs-vertical-nav-wrapper) {
   --bg-color: var(--bs-bg-base);
   --border-color: var(--bs-border-medium);
 }
 .bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"]),
-.dark :where(.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"])) {
+:is(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) :where(.bs-vertical-nav-wrapper:where([data-bg-variant="bg-base"])) {
   --active-color: var(--bs-blue-10);
   --bg-color: var(--bs-bg-base);
   --border-color: var(--bs-border-medium);
@@ -8223,10 +8344,10 @@ a.bs-text-button {
 :where(.bs-box[data-invert="true"]) :is(a, button).bs-pill:is(:hover, :focus) {
   --pill-border: var(--bs-gray-100);
 }
-:where(.dark .bs-box[data-invert="true"]) .bs-pill {
+:where(:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-box[data-invert="true"]) .bs-pill {
   --pill-text: var(--bs-accent-1-base);
 }
-:where(.dark .bs-box[data-invert="true"]) :is(a, button).bs-pill:is(:hover, :focus) {
+:where(:where(.dark, [data-theme="wwt-dark"], [data-theme="softchoice-dark"]) .bs-box[data-invert="true"]) :is(a, button).bs-pill:is(:hover, :focus) {
   --pill-border: var(--bs-accent-1-base);
 }
 /* Some switch overrides */