How to use the @crave/farmblocks-theme.fontTypes.SUBTLE function in @crave/farmblocks-theme

import linkTypes from "./linkTypes";
import { colors as colorConstants, fontTypes } from "@crave/farmblocks-theme";

export default {
  [linkTypes.PRIMARY]: {
    color: fontTypes.FEATURED,
    hoverColor: colorConstants.BLUE_CORN
  },
  [linkTypes.DISABLED]: {
    color: fontTypes.SUBTLE,
    hoverColor: fontTypes.SUBTLE
  },
  [linkTypes.NEUTRAL]: {
    color: fontTypes.NEUTRAL,
    hoverColor: fontTypes.FEATURED
  },
  [linkTypes.ROW_TITLE]: {
    color: fontTypes.NORMAL,
    hoverColor: colorConstants.BLUE_CORN
  },  
  [linkTypes.WHITE]: {
    color: fontTypes.WHITE,
    hoverColor: colorConstants.WHITE_56
  }
};

import linkTypes from "./linkTypes";
import { colors as colorConstants, fontTypes } from "@crave/farmblocks-theme";

export default {
  [linkTypes.PRIMARY]: {
    color: fontTypes.FEATURED,
    hoverColor: colorConstants.BLUE_CORN
  },
  [linkTypes.DISABLED]: {
    color: fontTypes.SUBTLE,
    hoverColor: fontTypes.SUBTLE
  },
  [linkTypes.NEUTRAL]: {
    color: fontTypes.NEUTRAL,
    hoverColor: fontTypes.FEATURED
  },
  [linkTypes.ROW_TITLE]: {
    color: fontTypes.NORMAL,
    hoverColor: colorConstants.BLUE_CORN
  },  
  [linkTypes.WHITE]: {
    color: fontTypes.WHITE,
    hoverColor: colorConstants.WHITE_56
  }
};

} = this.props;

      const labelProps = {
        onMouseUp: this.onMouseUp,
        switch: isSwitch,
        checked,
        disabled: inputProps.disabled || loading,
        hasText: !!label,
        className,
      };

      inputProps.checked = checked;
      inputProps.onChange = this.onChange;

      const fontColor = inputProps.disabled
        ? fontTypes.SUBTLE
        : fontTypes.NORMAL;

      return (
        
          <input type="checkbox">
          <div>
            
            {label &amp;&amp; (
              </div>

function colorStyle({ disabled, type }) {
  const color = disabled ? fontTypes.SUBTLE : type;
  const hoverColor = disabled ? fontTypes.SUBTLE : hoverColors[type];

  return css`
    color: ${color};

    > a {
      color: inherit;
    }

    &:hover {
      color: ${hoverColor};
    }
  `;
}

    withInfo()(() =&gt; <title type="{fontTypes.SUBTLE}">Awesome title</title>)
  )

.add("SUBTLE type", () => (
    <div style="{{">
      
    </div>
  ))
  .add("WHITE type", () =&gt; (

.add("custom line height", () => (
    <div style="{{">
      
    </div>
  ))
  .add("custom letter-spacing", () =&gt; (

function colorStyle({ disabled, type }) {
  const color = disabled ? fontTypes.SUBTLE : type;
  const hoverColor = disabled ? fontTypes.SUBTLE : hoverColors[type];

  return css`
    color: ${color};

    > a {
      color: inherit;
    }

    &:hover {
      color: ${hoverColor};
    }
  `;
}

.add("SUBTLE type", () => (
    
  ))
  .add("WHITE type", () => (