How to use the @artsy/palette.color function in @artsy/palette

onPress,
}) => {
  const [isActive, setIsActive] = useState(false)

  // Animated.useCode(() => Animated.call([active], ([val]) => setIsActive(Boolean(val))), [])

  return (
    
      
        
          
            {label}
          
        
      
    
  )
}

{!!exhibition_period && (
                
                  {exhibition_period}
                
              )}
            
          
        
      
    )
  }
}

const BackgroundImage = styled(OpaqueImageView)`
  background: ${color("black60")};
  position: absolute;
  height: 100%;
  width: 100%;
`

const Container = styled(Box)`
  width: ${Dimensions.get("window").width / 2 + 50};
  height: 310;
  position: relative;
  overflow: hidden;
  background: ${color("black60")};
`

// Set background color of overlay based on logo color
const Overlay = styled.View`
  background-color: rgba(0, 0, 0, 0.3);

description
          price_guidance: priceGuidance
          thumbnail
        }
      }
    `,
  }
)

const Container = styled(Box)`
  border: 1px solid ${color("black10")};
  border-radius: 2px;

  &:hover {
    text-decoration: none;
    border: 1px solid ${color("black60")};
  }
`

const FeaturedCollectionsContainer = styled(Box)`
  border-top: 1px solid ${color("black10")};

  ${Container} {
    &:first-of-type {
      margin-left: 2px;
    }
  }
`

const ExtendedSerif = styled(Serif)`
  div span {
    span p {

const ItemContainer = styled(Flex)`
  cursor: default;
  border-bottom: 1px solid ${color("black10")};

  button {
    align-self: center;
  }

  a {
    text-decoration: none;
  }
`

const ArticleImage = styled(Flex)<{ imageUrl?: string }>`
  background-color: ${color("black10")};
  margin-right: ${space(2)}px;
  width: 145px;
  height: 90px;

  ${props =>
    props.imageUrl &&
    `
    background: url(${props.imageUrl});
    background-size: cover;
    background-positon: center;
  `};
`

const CircleSeparator = styled.span`
  display: inline-block;
  content: "";

`

const BreadcrumbContainer = styled(Sans)`
  a {
    text-decoration: none;
  }
`

const ImageCaption = styled(Box)`
  ${unica("s12")};
  position: absolute;
  bottom: 10px;
  left: 20px;
  right: 20px;
  text-align: right;
  color: ${color("white100")};
  z-index: 7;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
`

const ExtendedSerif = styled(Serif)`
  div span {
    span p {
      display: inline;
    }

    div p {
      display: inline;
      ${unica("s12")};
    }
  }
`

import { Link, LinkProps } from "found"
import React from "react"
import styled from "styled-components"
import { left, right } from "styled-system"
import { Media } from "Utils/Responsive"

export const RouteTabs = styled(TabsContainer)`
  width: 100%;

  a {
    ${sharedTabsStyles.tabContainer};

    :not(:last-child) {
      margin-right: ${space(3)}px;
    }
    color: ${color("black60")};
    text-decoration: none;

    &.active {
      color: ${color("black100")};
      ${sharedTabsStyles.activeTabContainer};
    }
  }
`

export const RouteTab: React.FC> = ({
  children,
  ...props
}) => {
  return (

export const IconLayoutFullscreen: React.SFC<{ fill?: string }> = ({
  fill,
}) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 30" height="30px" width="45px">
      <g fill="none" stroke="none">
        <g fill="{fill">
          <path d="M0,0 L45,0 L45,30 L0,30 L0,0 Z M3,22 L37,22 L37,20 L3,20 L3,22 Z M3,27 L29,27 L29,25 L3,25 L3,27 Z"></path>
        </g>
      </g>
    </svg>
  )
}

margin-bottom: -1px;
    white-space: nowrap;
    ${borders};

    ${media.xs`
      &:last-child {
        padding-right: ${space(4)}px;
      }
    `};
  `,
  activeTabContainer: css`
    pointer-events: none;
    padding-bottom: 13px;
    margin-bottom: -1px;
    white-space: nowrap;
    border-bottom: 1px solid ${color("black60")};
  `,
}

const TabsContainer = styled(Flex)`
  ${styles.tabsContainer};
`

const TabContainer = styled.div`
  ${styles.tabContainer};
`

export const ActiveTabContainer = styled.div`
  ${styles.activeTabContainer};
`

const SupWrapper = styled.sup`

src={section.cover_image_url || ""}
              onChange={(key, value) => onChange(key, value)}
            />

<spacer>
          
        )
      }}
    
  )
}

const CollectionSingleImageHeader = styled(Box)&lt;{
  headerImageUrl: string
  height: number
}&gt;`
  position: relative;
  background: ${color("black30")};
  height: ${props =&gt; props.height}px;
  background-image: url(${props =&gt; props.headerImageUrl});
  background-size: cover;
  background-position: center;

  ${media.xs`
    margin-left: -20px;
    margin-right: -20px;
  `};
`
export const Overlay = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;</spacer>