Blazored/Toast

Using CSS variables?

venelinn opened this issue · 2 comments

venelinn commented

Hello and thank you for that great plugin !
I'm wondering what will be the effort using CSS variables.
It will be so easy to overwrite some default values.
For example:
border-color: var(--blazored-border-color, var(--color-info))

Thank you!

BTW, I'm willing to help 😄

chrissainty commented

I think this would be a great addition. It's something I'd wanted to do a while ago and I kind of forgot about it.

I'd be happy to take a PR for this. Perhaps we should agree what custom properties we want to define and then you can start the PR.

taylorchasewhite commented

@venelinn @chrissainty I'd be willing to do this, I haven't looked too much into the CSS but if agree--if either of you have specific custom properties I can be sure to add them.

Otherwise, I will read through and pick out ones that make sense.

Other design considerations:

  1. In @venelinn's example, it looks like you're making the variable apply to all of Blazored (--blazored-border-color). I think this probably should be Blazored Toast specific, not generic to all of the Blazored repos. But open to other ideas.
  2. Need to define the prefix, I think --bt-{property-name} is decent, but could also make it more verbose (--blazored-toasts-{property-name}) if desired.
  3. I'm not exactly sure how "overwriting" the variables will work, e.g. if we define the value in the bundled CSS files from the RCL, will those definitions win out over the values defined by the consumer? Or were you both thinking these would be parameters to the BlazoredToasts component and applied to the css variables (this would work too).