How to use the @tinacms/styles.color function in @tinacms/styles

opacity: 1;
  }
`

const CloseButton = styled.div`
  display: flex;
  align-items: center;
  fill: #e1ddec;
  cursor: pointer;
  transition: fill 85ms ease-out;
  svg {
    width: 1.5rem;
    height: auto;
  }
  &:hover {
    fill: ${color('dark')};
  }
`

    box-shadow: 0 0 0 2px ${p => (p.error ? color('error') : 'transparent')};
    overflow: auto;

}
  &:after {
    content: '';
    display: block;
    width: 100%;
    background-color: #edecf3;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: ${padding()}rem;
    transform-origin: 0 0;
    transform: scale3d(0.15, 1, 1) translate3d(0, 0, 0);
    transition: all 250ms ease-out;
  }
  &:hover {
    color: ${color('primary')};
    svg {
      transform: translate3d(3px, 0, 0);
      transition: transform 250ms ease;
      fill: #433e52;
    }
    &:after {
      transform: scale3d(1, 1, 1) translate3d(-${padding()}rem, 0, 0);
    }
  }
`

const slideIn = keyframes`
  from {
    transform: translate3d(-100%,0,0);
    opacity: 0;
  }

border-radius: 1.5rem;
    background-color: #363145;
    z-index: -1;
    transition: all 150ms ease;
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  &:hover {
    color: #2296fe;
    &:after {
      transform: translate3d(0, 0, 0);
      transition: transform ${p => p.theme.timing.short} ease-out, opacity 0ms;
      opacity: 1;
    }
    svg {
      fill: ${color('primary')};
    }
    & ~ * {
      &:after {
        transform: translate3d(0, -100%, 0);
      }
    }
  }
  svg {
    position: absolute;
    left: ${padding()}rem;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: 2.25rem;
    height: auto;
    fill: #b2adbe;
    transition: all ${p => p.theme.timing.short} ease-out;

`

const BlockOption = styled.button`
  position: relative;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.75rem;
  font-weight: 500;
  width: 100%;
  background: none;
  cursor: pointer;
  outline: none;
  border: 0;
  transition: all 85ms ease-out;
  &:hover {
    color: ${color('primary')};
    background-color: #f6f6f9;
  }
  &:not(:last-child) {
    border-bottom: 1px solid #efefef;
  }
`

const ItemClickTarget = styled.div`
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
`

open={sidebar.isOpen}
        >
          {sidebar.isOpen ?  : }
        
      
    
  )
}

const MenuList = styled.div`
  margin: 2rem -${padding()}rem 2rem -${padding()}rem;
  display: block;
`

const MenuLink = styled.div<{ value: string }>`
  color: ${color('light')};
  font-size: 1.125rem;
  font-weight: 500;
  padding: ${padding('small')}rem ${padding()}rem ${padding('small')}rem 4rem;
  position: relative;
  cursor: pointer;
  transition: all ${p => p.theme.timing.short} ease-out;
  overflow: hidden;
  margin-bottom: ${padding('small')}rem;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    border-radius: 1.5rem;

padding: ${padding('small')}rem ${padding('big')}rem ${padding('small')}rem
    3.5rem;
  position: relative;
  text-decoration: none;
  display: inline-block;
  ${Emoji} {
    font-size: 1.5rem;
    position: absolute;
    left: ${padding('big')}rem;
    top: 50%;
    transform-origin: 50% 50%;
    transform: translate3d(0, -50%, 0);
    transition: all ${p => p.theme.timing.short} ease-out;
  }
  &:hover {
    color: ${color('primary')};
    ${Emoji} {
      transform: translate3d(0, -50%, 0);
    }
  }
`

const NoFormsPlaceholder = () => (
  
    👋
    <h3>
      Welcome to <b>Tina</b>!
    </h3>
    <p>
      Let's get a form set up
      <br>
      so you can start editing.</p>

transform: translate3d(0, 2.75rem, 0) scale3d(1, 1, 1);
    `};
`

const CloseButton = styled.div`
  display: flex;
  align-items: center;
  fill: #e1ddec;
  cursor: pointer;
  transition: fill 85ms ease-out;
  svg {
    width: 1.5rem;
    height: auto;
  }
  &:hover {
    fill: ${color('dark')};
  }
`

const CreateButton = styled.button`
  position: relative;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  width: 100%;
  background: none;
  cursor: pointer;
  outline: none;
  border: 0;
  transition: all 85ms ease-out;
  &:hover {

        ${p => (p.error ? color('error') : color('primary'))};
    }

top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: ${SIDEBAR_HEADER_HEIGHT}rem ${padding()}rem ${padding()}rem
    ${padding()}rem;
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
`

const MenuPanel = styled.div<{ visible: boolean }>`
  background: ${color('dark')};
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: ${SIDEBAR_WIDTH}px;
  transform: translate3d(${p => (p.visible ? '0' : '-100%')}, 0, 0);
  overflow: hidden;
  padding: ${padding()}rem;
  transition: all 250ms ease-out;
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }