Bootstrap 5 toast text-bg-primary (or any other colour) not displaying correct colour

Question

I'm implementing toasts in my web application but the colours are all washed out.

Using examples from https://getbootstrap.com/docs/5.2/components/toasts/ in particular this one:

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

In the doc it shows the toast looking like this:

However, when I use this same code my toast looks like this:

I can get it to look OK by changing this

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">

to this

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">

But that means I can't have a generic showToast function like this

function showToast(type, msg){
    toasticon.classList = `toast-icon-${type}`;
    toastAlert.classList = `toast align-items-center text-bg-${type} border-0`;
    toastBody.innerHTML = msg;
    let toast = new bootstrap.Toast(toastAlert);
    toast.show();
};

I had to add another variable for the text colour.

function showToast(icon, textcolour, bgcolour, msg){
    toasticon.classList = `toast-icon-${type}`;
    toastAlert.classList = `toast align-items-center text-${textcolour} bg-${bgcolour} border-0`;
    toastBody.innerHTML = msg;
    let toast = new bootstrap.Toast(toastAlert);
    toast.show();
};

So, yes this works but it would be much better if bootstrap just knew to use a contrasting text colour.

as requested here is the actual toast HTML I am using that the above javascript modifies:

<div id="toast-pos" class="toast-container position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 1099">
<div id="toastAlert" class="toast border" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      <div class="hstack gap-3">
        <span id="toasticon" class="toast-icon-danger"></span>
        <span id="toastBody" class="ms-auto h5 text-center align-middle" >Toast message here.</span>
      </div>
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>
</div>

I have not used CSS to change any colour. I only use CSS for the icon. e.g.

.toast-icon-question::before {
    font-size: 3rem;
    content: "\F505";
    font-family: 'bootstrap-icons';
}