bug: Fallback background-colors don't use opacity like oklch

[kriskratz]

What version of daisyUI are you using?

4.4.24

Which browsers are you seeing the problem on?

All old browsers

Reproduction URL

https://arobotcandream.com/wordpress-change-favicon-site-logo-with-full-site-editor-fse-theme/

Describe your issue

Fallback colors can't use opacity the way they are set, so they don't display correctly in older browsers. And the fallback color for code blocks (--fallback-bc) doesn't seem to work at all in Safari v12.5 on my old iPhone 6.

I upgraded to v4.4.24, but it doesn't seem to solve the issue.

Here is an example from the generated CSS. Browsers using fallback colors will see a nearly black background for code blocks, and modern browsers will see that color at 10% opacity. In this case its defined, --fallback-bc: #1f2937

.prose :where(code):not(:where([class~="not-prose"] *)){
  padding: 1px 8px;
  border-radius: var(--rounded-badge);
  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
  font-weight: initial;
}

This is what it looks like with the Light theme:

Would separating the fallback background onto another line work instead? And fallback colors can be defined in rgb instead --fallback-bc-rgb: 88, 0, 5;

.prose :where(code):not(:where([class~="not-prose"] *)){
  padding: 1px 8px;
  border-radius: var(--rounded-badge);
  background-color: rgb(var(--fallback-bc-rgb), 0.1);
  background-color: oklch(var(--bc)/0.1);
  font-weight: initial;
}

This is what I expect, and using background-color on two lines like that achieves this look for me:

[github-actions]

Thank you @kriskratz for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[kriskratz]

This is what I added into my tailwind css to fix it for now:

Also I defined --fallback-bc-rgb: 31, 41 , 55 in the light theme. I noticed some of the backgrounds were set to opacity 0, so I changed those to transparent. And a few of the fallbacks were located inside of @supports, so I pulled those out as well.

I may have missed some stuff... but this is a good starting point. Let me know if there's a better way.

@media (hover: hover){

  .btn-ghost:hover{
    background-color: rgb(var(--fallback-bc-rgb), 0.2);
    background-color: oklch(var(--bc)/0.2);
  }

  .btn-disabled:hover,
    .btn[disabled]:hover,
    .btn:disabled:hover{
    background-color: transparent;
  }

  :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover{
    background-color: rgb(var(--fallback-bc-rgb), 0.1);
    background-color: oklch(var(--bc)/0.1);
  }

}

.btn-ghost.btn-active{
  background-color: rgb(var(--fallback-bc-rgb), 0.2);
  background-color: oklch(var(--bc)/0.2);
}

.btn.btn-disabled,
  .btn[disabled],
  .btn:disabled{
  background-color: transparent;
}

:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
  :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
  :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
  :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
  :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
  :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible{
  background-color: rgb(var(--fallback-bc-rgb), 0.1);
  background-color: oklch(var(--bc)/0.1);
}

.prose :where(code):not(:where([class~="not-prose"] *, pre *)) {
  background-color: rgb(var(--fallback-bc-rgb), 0.1);
  background-color: oklch(var(--bc)/0.1);
}

.block-editor-iframe__body :where(code):not(:where([class~="not-prose"] *, pre *)),
div.editor-styles-wrapper :where(code):not(:where([class~="not-prose"] *, pre *)){
  background-color: rgb(var(--fallback-bc-rgb), 0.1);
  background-color: oklch(var(--bc)/0.1);
}