@devseed-ui/theme-provider/src/math.d.ts

devseed UI Kit Theme

declare module '@devseed-ui/theme-provider' {

  type MathFnTypeOut = number | string;
  type MathFnTypeIn = MathFnTypeOut | ThemeValReturn;

  /**
   * Creates a math function to add values. It takes into account
   * only the unit of the first value. Eg: 2rem + 2 = 4rem | 2 + 2rem = 4
   * This function is ready to work with styled-components so that any function
   * passed as an argument will receive the component props.
   *
   * @param {string} a First value
   * @param {string} b Second value
   */
  function add(a: MathFnTypeIn, b: MathFnTypeIn): MathFnTypeOut;

  /**
   * Creates a math function to subtract values. It takes into account
   * only the unit of the first value. Eg: 4rem - 2 = 2rem | 4 - 2rem = 2
   * This function is ready to work with styled-components so that any function
   * passed as an argument will receive the component props.
   *
   * @param {string} a First value
   * @param {string} b Second value
   */
  function subtract(a: MathFnTypeIn, b: MathFnTypeIn): MathFnTypeOut;

  /**
   * Creates a math function to divide values. It takes into account
   * only the unit of the first value. Eg: 4rem / 2 = 2rem | 4 / 2rem = 2
   * This function is ready to work with styled-components so that any function
   * passed as an argument will receive the component props.
   *
   * @param {string} a First value
   * @param {string} b Second value
   */
  function divide(a: MathFnTypeIn, b: MathFnTypeIn): MathFnTypeOut;

  /**
   * Creates a math function to multiply values. It takes into account
   * only the unit of the first value. Eg: 2rem * 2 = 4rem | 2 * 2rem = 4
   * This function is ready to work with styled-components so that any function
   * passed as an argument will receive the component props.
   *
   * @param {string} a First value
   * @param {string} b Second value
   */
  function multiply(a: MathFnTypeIn, b: MathFnTypeIn): MathFnTypeOut;

  /**
   * Creates a math function that returns the minimum of two values. Units are
   * discarded when doing the comparison, but the value is returned with a unit
   * if both arguments has the same one or if only one has it.
   * Eg: 10px, 3px => 3px
   * Eg: 10px, 3 => 3px
   * Eg: 1rem, 3px => 1
   *
   * This function is ready to work with styled-components
   * so that any function passed as an argument will receive the component props.
   *
   * @param {string} a First value
   * @param {string} b Second value
   */
  function min(a: MathFnTypeIn, b: MathFnTypeIn): MathFnTypeOut;

  /**
   * Creates a math function that returns the maximum of two values. Units are
   * discarded when doing the comparison, but the value is returned with a unit
   * if both arguments has the same one or if only one has it.
   * Eg: 10px, 3px => 10px
   * Eg: 10px, 3 => 10px
   * Eg: 1rem, 3px => 3
   *
   * This function is ready to work with styled-components
   * so that any function passed as an argument will receive the component props.
   *
   * @param {string} a First value
   * @param {string} b Second value
   */
  function max(a: MathFnTypeIn, b: MathFnTypeIn): MathFnTypeOut;
}