How to use the @commercetools-uikit/design-system.customProperties.borderColorForInputWhenFocused function in @commercetools-uikit/design-system

render() {
    const { hasFooter, hasWarning, hasError, ...rest } = this.props;

    return (

import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { customProperties as vars } from '@commercetools-uikit/design-system';
import accessibleHiddenInputStyles from '../../internals/accessible-hidden-input.styles';

// accessible input :)
const Input = styled.input`
  &:focus + div > svg [id$='borderAndContent'] > [id$='border'] {
    stroke: ${vars.borderColorForInputWhenFocused};
  }
`;

const Checkbox = props => {
  const ref = React.useRef();
  React.useEffect(() => {
    if (props.isIndeterminate) {
      ref.current.indeterminate = true;
    }
  }, [props.isIndeterminate]);

  const { onChange } = props;

  const handleChange = React.useCallback(
    event => !props.isReadOnly && onChange && onChange(event),
    [props.isReadOnly, onChange]

props.isDisabled || props.isReadOnly ? 'none' : 'inherit'};
  position: relative;

  &:focus {
    outline: none;
  }

  ${Toolbar} {
    border-radius: ${vars.borderRadiusForInput};
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: ${vars.borderColorForInput};
  }

  &:focus-within {
    border-color: ${vars.borderColorForInputWhenFocused};
    ${Toolbar} {
      border-color: ${vars.borderColorForInputWhenFocused};
    }

    ${EditorContainer} {
      border-color: ${vars.borderColorForInputWhenFocused};
    }
  }
`;

const hoverStyles = props => {
  if (!props.hasError && !props.disabled) {
    return css`
      &:hover svg [id$='borderAndContent'] > [id$='border'] {
        stroke: ${vars.borderColorForInputWhenFocused};
      }
    `;
  }
  return css``;
};

import PropTypes from 'prop-types';
import { isValidElementType } from 'react-is';
import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { customProperties as vars } from '@commercetools-uikit/design-system';
import { filterDataAttributes } from '@commercetools-uikit/utils';
import {
  RadioOptionCheckedIcon,
  RadioOptionUncheckedIcon,
} from '../../internals/icons';
import accessibleHiddenInputStyles from '../../internals/accessible-hidden-input.styles';
import { getLabelStyles, getContainerStyles } from './radio-option.styles';

const Input = styled.input`
  &:focus + div > svg [id$='borderAndContent'] > [id$='border'] {
    stroke: ${vars.borderColorForInputWhenFocused};
  }
`;

const Option = props => {
  const labelProps = props.id ? { htmlFor: props.id } : {};
  return (
    <label aria-checked="{props.isChecked}" role="radio">
      </label>

const getContainerStyles = props => {
  const baseStyles = css`
    display: flex;
    align-items: center;

    svg {
      fill: ${vars.backgroundColorForInput};
    }

    svg [id$='borderAndContent'] > [id$='border'] {
      stroke: 1px ${vars.borderColorForInput} solid;
    }
    svg [id$='borderAndContent'] > [id$='content'] {
      fill: ${vars.borderColorForInputWhenFocused};
    }
  `;
  if (props.isDisabled) {
    return [
      baseStyles,
      css`
        svg {
          fill: ${vars.backgroundColorForInputWhenDisabled};
        }
        svg [id$='borderAndContent'] > [id$='content'] {
          fill: ${vars.fontColorForInputWhenDisabled};
        }
        svg [id$='borderAndContent'] > [id$='border'] {
          stroke: ${vars.borderColorForInputWhenDisabled};
        }
      `,

const baseIconStyles = css`
    align-items: center;
    box-sizing: border-box;
    background-color: ${vars.backgroundColorForInput};
    border: 1px solid ${vars.borderColorForInput};
    height: ${vars.sizeHeightInput};
    display: flex;
    padding: ${vars.spacingXs};
    border-top-right-radius: ${vars.borderRadiusForInput};
    border-bottom-right-radius: ${vars.borderRadiusForInput};
    outline: 0;
    transition: color ${vars.transitionStandard},
      border-color ${vars.transitionStandard};
    &:active,
    &:focus {
      border-color: ${vars.borderColorForInputWhenFocused};
    }
  `;
  if (props.isDisabled) {
    return [
      baseIconStyles,
      css`
        cursor: not-allowed;
        background-color: ${vars.backgroundColorForInputWhenDisabled};
        color: ${vars.fontColorForInputWhenDisabled};
        border-color: ${vars.borderColorForInputWhenDisabled};
      `,
    ];
  }
  if (props.hasError) {
    return [
      baseIconStyles,