How to use the netlify-cms-ui-default.colors.controlLabel function in netlify-cms-ui-default

props.collapsed &&
    css`
      background-color: ${colors.textFieldBorder};
      cursor: pointer;
    `};
`;

const ShortcodeTopBar = styled(ListItemTopBar)`
  background-color: ${colors.textFieldBorder};
  margin: -14px -14px 0;
  border-radius: 0;
`;

const ShortcodeTitle = styled.div`
  padding: 8px;
  color: ${colors.controlLabel};
`;

export default class Shortcode extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      /**
       * The `shortcodeNew` prop is set to `true` when creating a new Shortcode,
       * so that the form is immediately open for editing. Otherwise all
       * shortcodes are collapsed by default.
       */
      collapsed: !props.node.data.get('shortcodeNew'),
    };
  }

  handleChange = (fieldName, value) => {

color: ${props =>
    props.error ? colors.errorText : props.active ? colors.active : colors.controlLabel};
  transition: color ${transitions.main};