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

height: 100%;
    width: 100%;
  }

  /* this is the thumb */
  &::after {
    content: '';
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: ${props => (props.size === 'small' ? '2px' : '3px')};
    height: ${props =>
      props.size === 'small' ? thumbSmallSize : thumbBigSize};
    width: ${props => (props.size === 'small' ? thumbSmallSize : thumbBigSize)};
    background-color: ${vars.colorSurface};
    box-shadow: ${vars.shadow7};
    border-radius: 50%;
    z-index: 1;
    transition: transform 0.2s ease, background 0.2s ease;
  }
`;

const Input = styled.input`
  /* when checked */
  &:checked {
    + ${Span}::before {
      background: ${vars.colorPrimary};
    }
    & + ${Span}::after {
      transform: ${props =>
        props.size === 'small'
          ? 'translate(117%, -50%)'

height: ${vars.bigButtonHeight};
  `;
  if (isDisabled) {
    return [
      baseButtonStyles,
      css`
        box-shadow: none;
        background-color: ${vars.colorAccent98};
      `,
    ];
  }
  return [
    baseButtonStyles,
    css`
      background-color: ${vars.colorSurface};
      box-shadow: ${vars.shadow7};
      &:hover {
        box-shadow: ${vars.shadow8};
      }
      &:active {
        box-shadow: ${vars.shadow9};
        background-color: ${vars.colorNeutral95};
      }
    `,
  ];
};

menuLoader: props.DEV_ONLY__loadAppbarMenuConfig,
        menuKey: 'appBar',
      },
    },
  });

  const menuLinks = (applicationsMenu && applicationsMenu.appBar) || [];

  return (
    <div>
      <div>
        
          
            
            <div></div></div></div>

const shouldUseLinkTag = !props.isDisabled && Boolean(props.linkTo);

  const asProps = shouldUseLinkTag ? { as: Link } : { as: props.as };

  const buttonAttributes = {
    'data-track-component': 'SecondaryButton',
    ...filterInvalidAttributes(props),
    ...(shouldUseLinkTag ? { to: props.linkTo } : {}),
  };

  const containerStyles = [
    css`
      display: inline-flex;
      background-color: ${vars.colorSurface};
      border-radius: ${vars.borderRadius6};
      box-shadow: ${vars.shadow7};
      color: ${vars.colorSolid};
      font-size: ${vars.fontSizeDefault};
      transition: background-color ${vars.transitionLinear80Ms},
        box-shadow ${vars.transitionEaseinout150Ms};
    `,
    getStateStyles(props.isDisabled, isActive, props.theme),
    getThemeStyles(props.theme),
  ];

  return (

&:hover {
              background-color: ${vars.colorWarning};
            }
            &:active {
              background-color: ${vars.colorWarning};
            }
          `,
        ];
      default:
        return baseActiveStyles;
    }
  }
  const baseDefaultStyles = [
    baseStyles,
    css`
      box-shadow: ${vars.shadow7};
      &:hover,
      &:focus {
        box-shadow: ${vars.shadow8};
      }
      &:active {
        box-shadow: ${vars.shadow9};
      }
    `,
  ];
  switch (tone) {
    case 'primary':
      return [
        baseDefaultStyles,
        css`
          background-color: ${vars.colorPrimary};
          &:hover {

return (
    <div>
      {props.isClosed ? (
        </div>

type={props.type}
      label={props.label}
      onClick={props.onClick}
      isToggleButton={props.isToggleButton}
      isToggled={props.isToggled}
      isDisabled={props.isDisabled}
      css={[
        css`
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid ${vars.colorSurface};
          background-color: ${vars.colorSurface};
          box-shadow: ${vars.shadow7};
          color: ${vars.colorSolid};
          transition: background-color ${vars.transitionLinear80Ms},
            box-shadow 150ms ease-in-out;
        `,
        getStateStyles(props.isDisabled, isActive, props.theme),
        getShapeStyles(props.shape, props.size),
        getSizeStyles(props.size),
        getThemeStyles(props.theme),
        getHoverStyles(props.isDisabled, props.theme),
      ]}
    >
      {props.icon &&
        React.cloneElement(props.icon, {
          size: props.size,
          color: getIconThemeColor(props),
        })}