src/components/Button.js
function updatePseudoClassStyle(styleId, properties, preventFocusStyleForTouchAndClick) {
  const baseStyle = properties.primary ? buttonStyle.primaryStyle : buttonStyle.style;
  const baseDisabledStyle = properties.primary ? buttonStyle.primaryDisabledStyle : buttonStyle.disabledStyle;
  const disabledStyle = {
    ...baseStyle,
    ...properties.style,
    ...baseDisabledStyle,
    ...properties.disabledStyle,
  };
  const baseActiveStyle = properties.primary ? buttonStyle.primaryActiveStyle : buttonStyle.activeStyle;
  const activeStyle = {
    ...baseActiveStyle,
    ...properties.activeStyle,
  };

  let focusStyle;
  if (preventFocusStyleForTouchAndClick) {
    focusStyle = { outline: 0 };
  } else {
    const baseFocusStyle = properties.primary ? buttonStyle.primaryFocusStyle : buttonStyle.focusStyle;
    focusStyle = {
      ...baseFocusStyle,
      ...properties.focusStyle,
    };
  }

  const styles = [
    {
      id: styleId,
      style: activeStyle,
      pseudoClass: 'active',
    },
    {
      id: styleId,
      style: disabledStyle,
      pseudoClass: 'active',
      disabled: true,
    },
    {
      id: styleId,
      style: focusStyle,
      pseudoClass: 'focus',
    },
  ];

  injectStyles(styles);
}
function updatePseudoClassStyle(styleId, properties, preventFocusStyleForTouchAndClick) {
  const baseStyle = properties.primary ? buttonStyle.primaryStyle : buttonStyle.style;
  const baseDisabledStyle = properties.primary ? buttonStyle.primaryDisabledStyle : buttonStyle.disabledStyle;
  const disabledStyle = {
    ...baseStyle,
    ...properties.style,
    ...baseDisabledStyle,
    ...properties.disabledStyle,
  };
  const baseActiveStyle = properties.primary ? buttonStyle.primaryActiveStyle : buttonStyle.activeStyle;
  const activeStyle = {
    ...baseActiveStyle,
    ...properties.activeStyle,
  };

  let focusStyle;
  if (preventFocusStyleForTouchAndClick) {
    focusStyle = { outline: 0 };
  } else {
    const baseFocusStyle = properties.primary ? buttonStyle.primaryFocusStyle : buttonStyle.focusStyle;
    focusStyle = {
      ...baseFocusStyle,
      ...properties.focusStyle,
    };
  }

  const styles = [
    {
      id: styleId,
      style: activeStyle,
      pseudoClass: 'active',
    },
    {
      id: styleId,
      style: disabledStyle,
      pseudoClass: 'active',
      disabled: true,
    },
    {
      id: styleId,
      style: focusStyle,
      pseudoClass: 'focus',
    },
  ];

  injectStyles(styles);
}
function updatePseudoClassStyle ( styleId , properties , preventFocusStyleForTouchAndClick ) { const baseStyle = properties . primary ? buttonStyle . primaryStyle : buttonStyle . style ; const baseDisabledStyle = properties . primary ? buttonStyle . primaryDisabledStyle : buttonStyle . disabledStyle ; const disabledStyle = { ... baseStyle , ... properties . style , ... baseDisabledStyle , ... properties . disabledStyle , } ; const baseActiveStyle = properties . primary ? buttonStyle . primaryActiveStyle : buttonStyle . activeStyle ; const activeStyle = { ... baseActiveStyle , ... properties . activeStyle , } ; let focusStyle ; if ( preventFocusStyleForTouchAndClick ) { focusStyle = { outline : 0 } ; } else { const baseFocusStyle = properties . primary ? buttonStyle . primaryFocusStyle : buttonStyle . focusStyle ; focusStyle = { ... baseFocusStyle , ... properties . focusStyle , } ; } const styles = [ { id : styleId , style : activeStyle , pseudoClass : 'active' , } , { id : styleId , style : disabledStyle , pseudoClass : 'active' , disabled : true , } , { id : styleId , style : focusStyle , pseudoClass : 'focus' , } , ] ; injectStyles ( styles ) ; }
Update hover, focus & active style for the speficied styleId.

@param styleId {string} - a unique id that exists as class attribute in the DOM
@param properties {object} - the components properties optionally containing custom styles
Update hover focus & active style for the speficied styleId .