Bs5 Components

[glewe]

The current code includes a Forms => General Elements page that shows basic Bootstrap 5 form elements.
In this PR I added a Components => General Components page showing basic Bootstrap 5 components.
(I also used this branch to fix some minor things in the form elements page.)

[glewe]

I added the Bootstrap color loop into _toasts.scss. Never did that before. I had to add a function though to get the subtle bg color. Is there any easier way (e.g. build a variable from a variable)?

[glewe]

Close button color-contrast !
That was a bit tricky because the close button x is a hard coded black SVG URL. Text color style doesn't do anything to it. I added a function to _toasts.scss that either creates a white or a black SVG based on the given color.

[danny007in]

Make PR commit readable https://www.youtube.com/watch?v=gXCkYkLQ3To

[glewe]

#5312 (comment)

Sorry, but I don't know how or maybe I am misunderstanding. How do create a separate JS file and make sure it ends up in the dist/js folder when building the site? Then I could reference it as:

<!--begin::Bootstrap Toasts-->
<script src="js/bs-toasts.js" is:inline></script>
<!--end::Bootstrap Toasts-->

[danny007in]

@glewe I'm going to make some changes to the code. Please don't push anything

[glewe]

Ok. Thanks.

[danny007in]

In dark mode toast is not good, any idea @glewe

[danny007in]

I have pushed some code @glewe

[glewe]

In dark mode toast is not good, any idea @glewe

I think the colors are ok. They match the BS colors. The only thing that does not work well is the filter for the close button SVG. Therefore, the following changes need to be applied to the _toasts.scss file:

//
// Color variants
//
@each $name, $color in $theme-colors {
  .toast-#{$name} {
    --#{$prefix}toast-header-color: #{color-contrast($color)};
    --#{$prefix}toast-header-bg: #{$color};
    --#{$prefix}toast-header-border-color: #{$color};
    --#{$prefix}toast-border-color: #{$color};
    --#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle);
  }
  .toast-#{$name} .btn-close {
    --#{$prefix}btn-close-bg: #{get-btn-close-svg($name)};
    filter: none !important;
  }
}

[data-bs-theme="dark"] .toast-default .btn-close {
  filter: var(--bs-btn-close-white-filter);
}

In order for that to work, the default toast DOM object must get the class toast-default in file UI/general.astro (that would also allow to add more styles if so desired):

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="toastDefault" class="toast toast-default" role="alert" aria-live="assertive" aria-atomic="true">
  ...

[glewe]

I have pushed some code @glewe

Thanks. I pulled your changes and updated my local branch.

[danny007in]

pushed code, please upstream