Using bootstrap colors in WebPicture

Targets Web
1

In addition to my previous question Using bootstrap color in webstyle I also would like to use bootstrap colors in WebPicture combined with the BootstrapIcon method.

Me.Image = WebPicture.BootstrapIcon("Exclamation circle", <BootstrapColor>)

Is this possible?

2

Sorry, not possible directly.

The current design changes the fill property for the SVG used to display the Bootstrap Icon. Also is direct color (single color and not color group).

This is the icon without color definition:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>

this is the icon with color.red definition:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgba(255, 0, 0, 1)" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>
3

New issue: #76267

4

From the Issue:

It is possible to add a bootstrap color to a WebStyle by using e.g. “var(–bs-danger)”.

Xojo does not allow that with their properties, for example this doesn’t work:

me.style.backgroundcolor = "var(--bs-danger)"

Using style.value is outside of default Xojo behavior that allows us to do other things.

Another point is that var(–bs-danger) can be used in Bootstrap and we are talking about a ‘fill’ definition inside SVG code. I don’t think we can put ‘var(–bs-danger)’ on that fill as that is not part of the SVG specification.

Xojo will need to check the bootstrap every build time, extract the bootstrap variable color code and fill the specific color to the SVG fill section. I don’t know if that is an easy task.

And what happens when the color changes using Light/Dark mode? Bootstrap allows that and adjust the theme, I’m not sure if the SVG standard allows that.

I hope this information is clear.

For example, this code doesn’t make the icon red:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="var(--bs-red)" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>
5

@AlbertoD
That makes sense and I assume that the issue will be closed and not rewarded.
Another possibility.
Is it possible in Xojo to extract the color code from bootstrap colors?
If that can be done, I can use that code in BootstrapIcon.

6

Maybe implementing ColorGroup.NamedColor for Web will cover both scenarios (WebStyle and WebPicture)

It would be also nice to have them in the ColorGroup editor, like in Desktop and Mobile:

ColorGroup editor

3 Likes
7

@Ricardo_Cruz
That looks like a neat solution.
Would you be so kind to add this as a possible solution to issue #76267

1 Like