How does the fade function transfers to Feliz.MaterialUI?

[thomrad]

Hello!

I am just starting to use Fable/Feliz/MaterialUI and I play around with some ideas. To get comfortable, I try to replicate some examples from the material-ui webpage and now I am stuck with the fade function.

This is what I want to achieve:

    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },

This is part of the makeStyles function. How do I do this. I found some, probably, related stuff, but I can't make it work. Thing is, I never used react before, so I hope that is not a deal breaker.

Hope you can help me out or point me in the right direction.

Thank you. Thomas

[cmeeren]

I have never used that and I don't know how it works. Can you point me to the documentation for fade when used in this way? (I assume it has nothing to do with the fade component, which AFAIK is a different thing).

[thomrad]

I didn't find a documentation, so I downloaded the material-ui source and went searching. What I found was this:

1st of all, fade got renamed to alpha. Here is the source https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/styles/colorManipulator.js

Here is the alpha function

/**
 * Set the absolute transparency of a color.
 * Any existing alpha values are overwritten.
 * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
 * @param {number} value - value to set the alpha channel to in the range 0 - 1
 * @returns {string} A CSS color string. Hex input values are returned as rgb
 */
export function alpha(color, value) {
  color = decomposeColor(color);
  value = clamp(value);

  if (color.type === 'rgb' || color.type === 'hsl') {
    color.type += 'a';
  }
  if (color.type === 'color') {
    color.values[3] = `/${value}`;
  } else {
    color.values[3] = value;
  }

  return recomposeColor(color);
}

Not sure if that helps.

[cmeeren]

Thanks for digging this up!

I don't want to create bindings for something that is not publicly documented. I suggest you raise an issue on the MUI repo about documenting this.

That said, this seems to be just a normal JS function, so you can easily generate your own ad-hoc Fable binding for it and use it wherever you want. I don't use Fable anymore so I don't have this in my head, but the Fable docs should be able to help you with this.

[thomrad]

Makes sense and thank you for your time!