@wwtdev/bsds-css 2.3.1 → 2.3.3

package/dist/components/_banner.scss

@@ -35,10 +35,6 @@
 
 .bs-banner :where(.bs-banner-content p a) {
   color: var(--bs-pink-light);
-  text-decoration: none;
-}
-
-.bs-banner :where(.bs-banner-content p a:hover) {
   text-decoration: underline;
 }
 

package/dist/components/_buttons.scss

@@ -1,15 +1,17 @@
 @mixin buttons() {
   .bs-button {
-  --btn-main: var(--bs-blue-base);
+  --btn-main: var(--bs-blue-400);
   --btn-secondary: var(--bs-blue-medium);
   --btn-highlight: var(--bs-blue-100);
   --btn-padding: .25rem .75rem;
   --btn-focus-pseudo-width: calc(100% + 0.5rem);
+  --btn-ghost-ink: var(--bs-ink-blue);
+  --btn-ink: var(--bs-white);
   align-items: center;
   background-color: var(--btn-main);
   border: none;
   border-radius: 0.25rem;
-  color: var(--bs-white);
+  color: var(--btn-ink);
   cursor: pointer;
   display: inline-flex;
   font-size: var(--btn-text-size, var(--bs-text-md));
@@ -68,11 +70,11 @@
 
 /* ------------ 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);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--btn-main);
-  color: var(--btn-main);
 }
 .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
   border-radius: 0.4375rem;
@@ -87,12 +89,13 @@
     inset 0px 0px 4px 1px var(--btn-highlight);
 }
 
-/* ------------ Button type ------------ */
+/* ------------ VARIANTS ------------ */
 .bs-button:where([data-variant^='secondary']) {
   --btn-main: var(--bs-plum-400);
-  --btn-secondary: var(--bs-plum-300);
+  --btn-secondary: var(--bs-plum-medium);
   --btn-light: var(--bs-plum-10);
   --btn-highlight: var(--bs-plum-100);
+  --btn-ghost-ink: var(--bs-ink-plum);
 }
 .dark .bs-button:where([data-variant^='secondary']) {
   --btn-main: var(--bs-plum-200);
@@ -102,37 +105,40 @@
 }
 .bs-button:where([data-variant^='positive']) {
   --btn-main: var(--bs-purple-400);
-  --btn-secondary: var(--bs-purple-300);
+  --btn-secondary: var(--bs-purple-medium);
   --btn-light: var(--bs-purple-10);
   --btn-highlight: var(--bs-purple-100);
+  --btn-ghost-ink: var(--bs-ink-purple);
 }
 .bs-button:where([data-variant^='warning']) {
   --btn-main: var(--bs-orange-warning);
-  --btn-secondary: var(--bs-orange-300);
+  --btn-secondary: var(--bs-orange-base);
   --btn-light: var(--bs-orange-10);
   --btn-highlight: var(--bs-orange-100);
+  --btn-ghost-ink: var(--bs-ink-orange);
 }
 .bs-button:where([data-variant^='negative']) {
   --btn-main: var(--bs-red-400);
-  --btn-secondary: var(--bs-red-300);
+  --btn-secondary: var(--bs-red-medium);
   --btn-light: var(--bs-red-10);
   --btn-highlight: var(--bs-red-100);
+  --btn-ghost-ink: var(--bs-ink-red);
 }
 
 /* ------------ Text Button ------------ */
 .bs-button:where([data-text]:not([data-text="false"])) {
   --btn-height: auto;
+  --btn-ink: var(--bs-ink-blue);
   --btn-padding: 0;
   --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   --btn-text-size: var(--bs-text-md);
   --btn-weight: 400;
   background-color: transparent;
-  color: var(--bs-blue-500);
   cursor: pointer;
   line-height: 150%;
 }
 .bs-button:where([data-text]:not([data-text="false"])):hover {
-  color: var(--bs-blue-base);
+  --btn-ink: var(--bs-blue-base);
   background-color: transparent;
   text-decoration: underline;
 }
@@ -193,8 +199,8 @@
 }
 .bs-button:where(:disabled),
 .bs-button:where([aria-disabled="true"]) {
-  color: var(--bs-gray-400);
-  background-color: var(--bs-gray-200);
+  --btn-ink: var(--bs-ink-disabled);
+  --btn-main: var(--bs-bg-disabled);
 }
 
 .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
@@ -204,7 +210,7 @@
 
 .bs-button:where([data-text]:not([data-text="false"])):disabled,
 .bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
-  background-color: transparent;
+  --btn-main: transparent;
 }
 
 /* ------------ links as buttons ------------ */

package/dist/components/_form-booleans.scss

@@ -38,11 +38,11 @@
 /* Checkbox & Radio Input */
 
 :where(input[type='checkbox'], input[type='radio']),
-.bs-boolean :where(input) {
+:is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
   --box-shadow: var(--bs-ink-base);
 
   appearance: none;
-  background-color: var(--bg-base);
+  background-color: var(--bs-bg-base);
   box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
   cursor: pointer;
   display: grid;
@@ -54,7 +54,7 @@
 }
 
 :where(input[type='checkbox'], input[type='radio']):focus-visible,
-.bs-boolean :where(input):focus-visible {
+:is(.bs-boolean :where(input), .bs-checkbox):focus-visible {
   box-shadow: inset 0 0 0 0.125rem var(--box-shadow),
     0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-base));
@@ -62,7 +62,7 @@
 }
 
 :where(input[type='checkbox']),
-.bs-boolean :where([type='checkbox']) {
+:is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
   border-radius: 0.125rem;
 }
 
@@ -73,7 +73,7 @@
 
 /* Checkbox's checkmark  */
 input:where([type='checkbox'])::before,
-.bs-boolean :where([type="checkbox"])::before {
+:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
   --filled-size: 1rem;
   --check-fill-color: var(--bs-blue-base);
 
@@ -86,7 +86,7 @@ input:where([type='checkbox'])::before,
 }
 
 input:where([type='checkbox'])::after,
-.bs-boolean :where([type="checkbox"])::after {
+:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
   border: solid var(--bs-white);
   border-width: 0 0.125rem 0.125rem 0;
   content: '';
@@ -101,7 +101,8 @@ input:where([type='checkbox'])::after,
 }
 
 input:where([type='checkbox']):where(:indeterminate)::after,
-.bs-boolean :where([type="checkbox"]):where(:indeterminate)::after {
+.bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
+.bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
   border: none;
   background-color: var(--bs-white);
   height: 0.125rem;
@@ -142,6 +143,9 @@ input:where([type='radio'])::after,
   width: var(--inner-size);
 }
 
+/* Show checkmark, indeterminate mark, or radio dot */
+.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
+.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
 input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
 input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after,
 .bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
@@ -149,16 +153,19 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
   visibility: visible;
 }
 
-.bs-boolean:where([data-size='sm']) input::before {
+.bs-boolean:where([data-size='sm']) input::before,
+.bs-checkbox:where([data-size="sm"])::before {
   --filled-size: var(--bs-text-xs);
 }
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']::after {
+.bs-boolean:where([data-size='sm']) input[type='checkbox']::after,
+.bs-checkbox:where([data-size="sm"])::after {
   height: 0.5625rem;
   width: 0.3125rem;
 }
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after  {
+.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
+.bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after  {
   height: 0.125rem;
   width: .75em;
 }
@@ -171,16 +178,23 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
 /* Disabled State */
 
 input:where([type='checkbox'], [type='radio']):disabled,
-.bs-boolean :where(input):disabled {
+.bs-boolean :where(input):disabled,
+.bs-checkbox:is([data-disabled="true"], :disabled) {
   --box-shadow: var(--bs-bg-disabled);
   background-color: transparent;
   cursor: default;
 }
 
+.bs-checkbox:where([data-disabled="true"]:not(input)) {
+  pointer-events: none;
+}
+
 input:where([type='checkbox']):checked:disabled::before,
 input:where([type='checkbox']):indeterminate:disabled::before,
 .bs-boolean :where(input[type="checkbox"]):checked:disabled::before,
-.bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before {
+.bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before,
+.bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
+.bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
   --check-fill-color: var(--bs-bg-disabled);
 }
 
@@ -193,7 +207,8 @@ input:where([type='radio']):checked:disabled::before,
 /* Error state */
 
 input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
-.bs-boolean :where(input[data-error="true"]) {
+.bs-boolean :where(input[data-error="true"]),
+.bs-checkbox:where([data-error="true"]) {
   --box-shadow: var(--bs-red-base);
   --outline-color: var(--bs-red-base);
 }

package/dist/components/_form-input-composite.scss

@@ -209,8 +209,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-red-400);
-  --input-border: var(--bs-red-400);
+  --focus-border: var(--bs-ink-red);
+  --input-border: var(--bs-ink-red);
 }
 
 .bs-input-addon:where([data-error]:not([data-error="false"]),[data-disabled]:not([data-disabled="false"])) > *::before,

package/dist/components/_pills.scss

@@ -2,7 +2,7 @@
   .bs-pill {
   --pill-background: var(--bs-bg-medium);
   --pill-border: transparent;
-  --pill-text: var(--bs-royal-base);
+  --pill-text: #162FB4; /* one-off component-specific */
   --pill-gap: var(--bs-space-2);
 
   align-items: center;
@@ -25,6 +25,11 @@
   width: 1rem;
 }
 
+/* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
+:where(.dark) .bs-pill {
+  --pill-text: #7585D1;
+}
+
 /* ------------------------------ Auto-truncation for content ------------------------------ */
 .bs-pill:has([data-truncate="true"]) {
   max-width: 100%;
@@ -218,6 +223,5 @@
   --pill-border: var(--bs-gray-400);
 }
 
-
   }
   

package/dist/components/banner.css

@@ -34,10 +34,6 @@
 
 .bs-banner :where(.bs-banner-content p a) {
   color: var(--bs-pink-light);
-  text-decoration: none;
-}
-
-.bs-banner :where(.bs-banner-content p a:hover) {
   text-decoration: underline;
 }
 

package/dist/components/buttons.css

@@ -1,14 +1,16 @@
 .bs-button {
-  --btn-main: var(--bs-blue-base);
+  --btn-main: var(--bs-blue-400);
   --btn-secondary: var(--bs-blue-medium);
   --btn-highlight: var(--bs-blue-100);
   --btn-padding: .25rem .75rem;
   --btn-focus-pseudo-width: calc(100% + 0.5rem);
+  --btn-ghost-ink: var(--bs-ink-blue);
+  --btn-ink: var(--bs-white);
   align-items: center;
   background-color: var(--btn-main);
   border: none;
   border-radius: 0.25rem;
-  color: var(--bs-white);
+  color: var(--btn-ink);
   cursor: pointer;
   display: inline-flex;
   font-size: var(--btn-text-size, var(--bs-text-md));
@@ -67,11 +69,11 @@
 
 /* ------------ 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);
   background-color: transparent;
   box-shadow: inset 0 0 0 1px var(--btn-main);
-  color: var(--btn-main);
 }
 .bs-button:where([data-ghost]:not([data-ghost="false"]))::before {
   border-radius: 0.4375rem;
@@ -86,12 +88,13 @@
     inset 0px 0px 4px 1px var(--btn-highlight);
 }
 
-/* ------------ Button type ------------ */
+/* ------------ VARIANTS ------------ */
 .bs-button:where([data-variant^='secondary']) {
   --btn-main: var(--bs-plum-400);
-  --btn-secondary: var(--bs-plum-300);
+  --btn-secondary: var(--bs-plum-medium);
   --btn-light: var(--bs-plum-10);
   --btn-highlight: var(--bs-plum-100);
+  --btn-ghost-ink: var(--bs-ink-plum);
 }
 .dark .bs-button:where([data-variant^='secondary']) {
   --btn-main: var(--bs-plum-200);
@@ -101,37 +104,40 @@
 }
 .bs-button:where([data-variant^='positive']) {
   --btn-main: var(--bs-purple-400);
-  --btn-secondary: var(--bs-purple-300);
+  --btn-secondary: var(--bs-purple-medium);
   --btn-light: var(--bs-purple-10);
   --btn-highlight: var(--bs-purple-100);
+  --btn-ghost-ink: var(--bs-ink-purple);
 }
 .bs-button:where([data-variant^='warning']) {
   --btn-main: var(--bs-orange-warning);
-  --btn-secondary: var(--bs-orange-300);
+  --btn-secondary: var(--bs-orange-base);
   --btn-light: var(--bs-orange-10);
   --btn-highlight: var(--bs-orange-100);
+  --btn-ghost-ink: var(--bs-ink-orange);
 }
 .bs-button:where([data-variant^='negative']) {
   --btn-main: var(--bs-red-400);
-  --btn-secondary: var(--bs-red-300);
+  --btn-secondary: var(--bs-red-medium);
   --btn-light: var(--bs-red-10);
   --btn-highlight: var(--bs-red-100);
+  --btn-ghost-ink: var(--bs-ink-red);
 }
 
 /* ------------ Text Button ------------ */
 .bs-button:where([data-text]:not([data-text="false"])) {
   --btn-height: auto;
+  --btn-ink: var(--bs-ink-blue);
   --btn-padding: 0;
   --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
   --btn-text-size: var(--bs-text-md);
   --btn-weight: 400;
   background-color: transparent;
-  color: var(--bs-blue-500);
   cursor: pointer;
   line-height: 150%;
 }
 .bs-button:where([data-text]:not([data-text="false"])):hover {
-  color: var(--bs-blue-base);
+  --btn-ink: var(--bs-blue-base);
   background-color: transparent;
   text-decoration: underline;
 }
@@ -192,8 +198,8 @@
 }
 .bs-button:where(:disabled),
 .bs-button:where([aria-disabled="true"]) {
-  color: var(--bs-gray-400);
-  background-color: var(--bs-gray-200);
+  --btn-ink: var(--bs-ink-disabled);
+  --btn-main: var(--bs-bg-disabled);
 }
 
 .bs-button:where([data-ghost]:not([data-ghost="false"])):disabled,
@@ -203,7 +209,7 @@
 
 .bs-button:where([data-text]:not([data-text="false"])):disabled,
 .bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
-  background-color: transparent;
+  --btn-main: transparent;
 }
 
 /* ------------ links as buttons ------------ */

package/dist/components/form-booleans.css

@@ -37,11 +37,11 @@
 /* Checkbox & Radio Input */
 
 :where(input[type='checkbox'], input[type='radio']),
-.bs-boolean :where(input) {
+:is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
   --box-shadow: var(--bs-ink-base);
 
   appearance: none;
-  background-color: var(--bg-base);
+  background-color: var(--bs-bg-base);
   box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
   cursor: pointer;
   display: grid;
@@ -53,7 +53,7 @@
 }
 
 :where(input[type='checkbox'], input[type='radio']):focus-visible,
-.bs-boolean :where(input):focus-visible {
+:is(.bs-boolean :where(input), .bs-checkbox):focus-visible {
   box-shadow: inset 0 0 0 0.125rem var(--box-shadow),
     0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-base));
@@ -61,7 +61,7 @@
 }
 
 :where(input[type='checkbox']),
-.bs-boolean :where([type='checkbox']) {
+:is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
   border-radius: 0.125rem;
 }
 
@@ -72,7 +72,7 @@
 
 /* Checkbox's checkmark  */
 input:where([type='checkbox'])::before,
-.bs-boolean :where([type="checkbox"])::before {
+:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
   --filled-size: 1rem;
   --check-fill-color: var(--bs-blue-base);
 
@@ -85,7 +85,7 @@ input:where([type='checkbox'])::before,
 }
 
 input:where([type='checkbox'])::after,
-.bs-boolean :where([type="checkbox"])::after {
+:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
   border: solid var(--bs-white);
   border-width: 0 0.125rem 0.125rem 0;
   content: '';
@@ -100,7 +100,8 @@ input:where([type='checkbox'])::after,
 }
 
 input:where([type='checkbox']):where(:indeterminate)::after,
-.bs-boolean :where([type="checkbox"]):where(:indeterminate)::after {
+.bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
+.bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
   border: none;
   background-color: var(--bs-white);
   height: 0.125rem;
@@ -141,6 +142,9 @@ input:where([type='radio'])::after,
   width: var(--inner-size);
 }
 
+/* Show checkmark, indeterminate mark, or radio dot */
+.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
+.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
 input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
 input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after,
 .bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
@@ -148,16 +152,19 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
   visibility: visible;
 }
 
-.bs-boolean:where([data-size='sm']) input::before {
+.bs-boolean:where([data-size='sm']) input::before,
+.bs-checkbox:where([data-size="sm"])::before {
   --filled-size: var(--bs-text-xs);
 }
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']::after {
+.bs-boolean:where([data-size='sm']) input[type='checkbox']::after,
+.bs-checkbox:where([data-size="sm"])::after {
   height: 0.5625rem;
   width: 0.3125rem;
 }
 
-.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after  {
+.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after,
+.bs-checkbox:where([data-size="sm"][data-indeterminate="true"], [data-size="sm"]:indeterminate)::after  {
   height: 0.125rem;
   width: .75em;
 }
@@ -170,16 +177,23 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
 /* Disabled State */
 
 input:where([type='checkbox'], [type='radio']):disabled,
-.bs-boolean :where(input):disabled {
+.bs-boolean :where(input):disabled,
+.bs-checkbox:is([data-disabled="true"], :disabled) {
   --box-shadow: var(--bs-bg-disabled);
   background-color: transparent;
   cursor: default;
 }
 
+.bs-checkbox:where([data-disabled="true"]:not(input)) {
+  pointer-events: none;
+}
+
 input:where([type='checkbox']):checked:disabled::before,
 input:where([type='checkbox']):indeterminate:disabled::before,
 .bs-boolean :where(input[type="checkbox"]):checked:disabled::before,
-.bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before {
+.bs-boolean :where(input[type="checkbox"]):indeterminate:disabled::before,
+.bs-checkbox:where([data-checked="true"][data-disabled="true"], :checked:disabled)::before,
+.bs-checkbox:where([data-indeterminate="true"][data-disabled="true"], :indeterminate:disabled)::before {
   --check-fill-color: var(--bs-bg-disabled);
 }
 
@@ -192,7 +206,8 @@ input:where([type='radio']):checked:disabled::before,
 /* Error state */
 
 input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
-.bs-boolean :where(input[data-error="true"]) {
+.bs-boolean :where(input[data-error="true"]),
+.bs-checkbox:where([data-error="true"]) {
   --box-shadow: var(--bs-red-base);
   --outline-color: var(--bs-red-base);
 }

package/dist/components/form-input-composite.css

@@ -208,8 +208,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-red-400);
-  --input-border: var(--bs-red-400);
+  --focus-border: var(--bs-ink-red);
+  --input-border: var(--bs-ink-red);
 }
 
 .bs-input-addon:where([data-error]:not([data-error="false"]),[data-disabled]:not([data-disabled="false"])) > *::before,

package/dist/components/pills.css

@@ -1,7 +1,7 @@
 .bs-pill {
   --pill-background: var(--bs-bg-medium);
   --pill-border: transparent;
-  --pill-text: var(--bs-royal-base);
+  --pill-text: #162FB4; /* one-off component-specific */
   --pill-gap: var(--bs-space-2);
 
   align-items: center;
@@ -24,6 +24,11 @@
   width: 1rem;
 }
 
+/* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
+:where(.dark) .bs-pill {
+  --pill-text: #7585D1;
+}
+
 /* ------------------------------ Auto-truncation for content ------------------------------ */
 .bs-pill:has([data-truncate="true"]) {
   max-width: 100%;
@@ -216,4 +221,3 @@
 .bs-pill:where([data-variant^="filter"])[data-active="false"]:is(:disabled, [aria-disabled="true"]) {
   --pill-border: var(--bs-gray-400);
 }
-

package/dist/wwt-bsds-preset.js

@@ -62,12 +62,11 @@ module.exports = {
       },
       orange: {
         10: "rgba(250, 70, 22, 0.1)",
-        100: "#FED1C5",
-        200: "#FDA58D",
-        300: "#FC7755",
-        400: "#FA4616",
-        500: "#EA6712",
-        warning: "#EA6712" // leaving here for compatibility
+        100: "#F3C4A8",
+        200: "#F7A17B",
+        300: "#F97C4C",
+        400: "#FB550E",
+        500: "#C33D04"
       },
       pink: {
         100: "#F6CBE0",
@@ -146,8 +145,12 @@ module.exports = {
       backgroundColor: {
         "base": "var(--bs-bg-base)",
         "base-elevated": "var(--bs-bg-base-elevated)",
+        "base-to-light": "var(--bs-bg-base-to-light)",
+        "base-to-medium": "var(--bs-bg-base-to-medium)",
         "light": "var(--bs-bg-light)",
+        "light-to-medium": "var(--bs-bg-light-to-medium)",
         "medium": "var(--bs-bg-medium)",
+        "medium-to-light": "var(--bs-bg-medium-to-light)",
         "invert-base": "var(--bs-bg-invert-base)",
         "invert-medium": "var(--bs-bg-invert-medium)",
         "disabled": "var(--bs-bg-disabled)"
@@ -215,6 +218,8 @@ module.exports = {
         "orange-medium": "var(--bs-orange-medium)",
         "orange-light": "var(--bs-orange-light)",
         "orange-lightest": "var(--bs-orange-lightest)",
+        "orange-warning": "var(--bs-orange-warning)",
+        // 👆 leaving here for compatibility.  Map to / deprecate in favor of 'warning.'
         "purple-base": "var(--bs-purple-base)",
         "purple-medium": "var(--bs-purple-medium)",
         "purple-light": "var(--bs-purple-light)",
@@ -224,6 +229,7 @@ module.exports = {
         "gray-medium": "var(--bs-gray-medium)",
         "gray-light": "var(--bs-gray-light)",
         "gray-lightest": "var(--bs-gray-lightest)",
+        "warning": "var(--bs-warning)"
       },
       height: {
         18: "4.5rem",
@@ -255,6 +261,7 @@ module.exports = {
         "6xl": "100rem",
       },
       minHeight: {
+        ...defaultTheme.spacing,
         "half-screen": "50vh",
         "13": "3.25rem",
         "15": "3.75rem",
@@ -288,13 +295,20 @@ module.exports = {
         "ink-medium": "var(--bs-ink-medium)",
         "ink-light": "var(--bs-ink-light)",
         "ink-accent": "var(--bs-ink-accent)",
+        "ink-disabled": "var(--bs-ink-disabled)",
         "ink-invert": "var(--bs-ink-invert)",
+        "ink-invert-base": "var(--bs-ink-invert-base)",
+        "ink-invert-light": "var(--bs-ink-invert-light)",
         "ink-invert-medium": "var(--bs-ink-invert-medium)",
         "ink-blue": "var(--bs-ink-blue)",
-        "ink-red": "var(--bs-ink-red)",
-        "ink-pink": "var(--bs-ink-pink)",
         "ink-orange": "var(--bs-ink-orange)",
-        "ink-disabled": "var(--bs-ink-disabled)"
+        "ink-pink": "var(--bs-ink-pink)",
+        "ink-plum": "var(--bs-ink-plum)",
+        "ink-purple": "var(--bs-ink-purple)",
+        "ink-red": "var(--bs-ink-red)",
+        "ink-royal": "var(--bs-ink-royal)",
+        "ink-violet": "var(--bs-ink-violet)",
+        "ink-white": "var(--bs-ink-white)"
       },
       zIndex: {
         "-1": "-1",