Custom Variants

In addition to the default variables this package also detects hex colors (e.g. #FFFFFF) and auto calculates complementary transparent versions for use throughout your project.

That behavior can now be overridden by passing a custom function to the calculate_variants prop.

The function will be provided the name and value of each variable in the current theme. The ThemeProvider expects an object returned which contains the variants of the key/value pairs that make up the css variables you want added to the root element of the dom.

E.g.

const calculate_variants = (name: string, value: string) => {
  // if the current value is a hex color
  // add complementary transparencies
  let pattern = /^#[0-9A-F]{6}$/i;
  if (value.match(pattern)) {
    return {
      [name + "-alpha_primary"]: value + "f2", // 95%
      [name + "-alpha_secondary"]: value + "99", // 60%
      [name + "-alpha_tertiary"]: value + "4d", // 30%
      [name + "-alpha_quaternary"]: value + "17", // 9%
    };
  }
  return {};
};