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

border: 1px solid ${color.grey(2)};
  margin: 0 0 -1px 0;
  overflow: visible;
  line-height: 1.35;
  padding: 0;
  font-size: ${font.size(2)};
  font-weight: 500;

  ${GroupLabel} {
    color: #282828;
    align-self: center;
    max-width: 100%;
  }

  svg {
    fill: ${color.grey(3)};
    width: 1.25rem;
    height: auto;
    transition: fill 85ms ease-out;
  }

  &:hover {
    svg {
      fill: ${color.grey(8)};
    }
    ${GroupLabel} {
      color: #0084ff;
    }
  }

  &:first-child {
    border-radius: 0.25rem 0.25rem 0 0;

fill: ${color.grey(8)};
    }
    color: #0084ff;
  }
`

export const PanelHeader = styled(Header)`
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
  background-color: white;
  justify-content: flex-start;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid ${color.grey(2)};
  margin: 0;
  padding: 0.75rem 1.25rem;

  span {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  svg {
    flex: 0 0 auto;
    transform: translate3d(-4px, 0, 0);
  }

  &:hover {

fill: ${color.primary()};
    }
    & ~ * {
      &:after {
        transform: translate3d(0, -100%, 0);
      }
    }
  }
  svg {
    position: absolute;
    left: ${padding()};
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: 2.25rem;
    height: auto;
    fill: ${color.grey(4)};
    transition: all ${timing('short')} ease-out;
  }
`

const SidebarHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1050;
  flex: 0 0 ${SIDEBAR_HEADER_HEIGHT}rem;
  height: ${SIDEBAR_HEADER_HEIGHT}rem;
  width: 100%;
  padding: 0 ${padding()};
`

const MenuToggle = styled.button<{ open: boolean }>`

const ResetButton = styled(Button)`
  flex: 0 0 6rem;
`

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

}

  &:hover {
    background-color: #f6f6f9;
    cursor: grab;

    ${ItemLabel} {
      color: #0084ff;
    }
    ${DeleteButton} {
      svg {
        fill: ${color.grey(4)};
      }
      &:hover {
        svg {
          fill: ${color.grey(8)};
        }
      }
    }
    ${DragHandle} {
      svg {
        fill: ${color.grey(8)};
      }
      svg:first-child {
        opacity: 0;
      }
      svg:last-child {
        opacity: 1;
      }
    }
  }

width: 2.5rem;
  background-color: transparent;
  background-position: center;
  background-size: auto 1.125rem;
  background-repeat: no-repeat;
  border: 0;
  margin: 0 -1rem 0 0.5rem;
  outline: none;
  cursor: pointer;
  transition: opacity 85ms ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    background-color: #f6f6f9;
    fill: ${color.grey(8)};
  }
`

const ActionsOverlay = styled.div<{ open: boolean }>`
  min-width: 12rem;
  border-radius: ${radius()};
  border: 1px solid #efefef;
  display: block;
  position: absolute;
  bottom: ${padding()};
  right: ${padding()};
  transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
  opacity: 0;
  pointer-events: none;
  transition: all 85ms ease-out;
  transform-origin: 100% 100%;

color: inherit;
  padding: 0;
  opacity: ${props => (props.disabled ? '0.4' : '1')};
  outline: none;
  width: 3rem;
  height: 1.75rem;
  pointer-events: ${props => (props.disabled ? 'none' : 'inherit')};
`

const ToggleSwitch = styled.div<{ checked: boolean }>`
  position: relative;
  width: 3rem;
  height: 1.75rem;
  border-radius: ${radius()};
  background-color: white;
  border: 1px solid ${color.grey(2)};
  pointer-events: none;
  margin-left: -2px;
  span {
    position: absolute;
    border-radius: ${radius()};
    left: 2px;
    top: 50%;
    width: calc(1.75rem - 6px);
    height: calc(1.75rem - 6px);
    background: ${p => (p.checked ? color.primary() : color.grey(3))};
    transform: translate3d(${p => (p.checked ? '1.25rem' : '0')}, -50%, 0);
    transition: all 150ms ease-out;
  }
`

const ToggleInput = styled.input`

width: 100%;
  margin: 0;
  outline: none;
  box-shadow: 0 0 0 2px ${p => (p.error ? color.error() : 'transparent')};

  &:hover {
    box-shadow: 0 0 0 2px ${color.grey(3)};
  }

  &:focus {
    box-shadow: 0 0 0 2px ${p => (p.error ? color.error() : color.primary())};
  }

  &::placeholder {
    font-size: ${font.size(2)};
    color: ${color.grey(3)};
  }

  ${p =>
    p.small &&
    css`
      font-size: ${font.size(1)};
      padding: 0.5rem ${padding('small')};
    `};
`

export const Input = styled.input`
  ${InputCss}
`

${p =>
    p.isDragging &&
    css`
      border-radius: ${radius('small')};
      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);

      svg {
        fill: ${color.grey(8)};
      }
      ${GroupLabel} {
        color: #0084ff;
      }

      ${DragHandle} {
        svg:first-child {
          opacity: 0;
        }
        svg:last-child {
          opacity: 1;
        }
      }
    `};
`

toggleOrderedList,
  OrderedListIcon,
  'Ordered List',
  'Ordered List'
)

const MenuContainer = styled.div`
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  width: 100%;
  background-color: white;
  border-radius: ${radius()};
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
  border: 1px solid ${color.grey(2)};
  overflow: visible;
  display: flex;
  flex: 0 0 auto;
  z-index: 10;
  margin: 0 0 0.75rem 0;
`

export const MenuButton = styled.button<{
  active?: boolean
  disabled?: boolean
  bottom?: boolean
}>`
  flex: 1 0 auto;
  background-color: ${p =>
    p.active ? 'rgba(53, 50, 50, 0.05)' : 'transparent'};
  color: ${p => (p.active ? '#0084ff' : color.grey(8))};