How to use @artsy/palette - 10 common examples

const MediaContextProvider: React.SFC> = ({
    onlyRenderAt,
    children,
  }) => {
    const { hover, ...breakpointMediaQueries } = themeProps.mediaQueries
    return (
      
        
          {matches => {
            const matchingBreakpoints = Object.keys(matches).filter(
              key => matches[key]
            )

            // FIXME: Remove
            // console.log(matchingBreakpoints)
            return (

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);

{showMobileMenu && (
        <>
           toggleMobileNav(false)} />
          
        
      )}
    
  )
})

export const NavBarHeight = space(6) - 1 // border offset

const NavSection = ({ children, ...props }) => (
  
    {children}
  
)

const NavBarContainer = styled(Flex)`
  background-color: ${color("white100")};
  border-bottom: 1px solid ${color("black10")};
  position: relative;
  z-index: 3;
  height: ${NavBarHeight}px;
`

// FIXME: This needs to be cleaned up once we get proper icons

}, (0, _isFunction2.default)(navItemLabel) ? // NavItem children can be called as renderProps so that contents
  // can operate on UI behaviors (such as changing the color of an
  // icon on hover).
  navItemLabel({
    hover: hover
  }) : navItemLabel))), showMenu && _react.default.createElement(_reactSpring.animated.div, {
    style: animatedStyle
  }, _react.default.createElement(MenuContainer, {
    top: (0, _palette.space)(6)
  }, _react.default.createElement(Menu, null))), showOverlay && _react.default.createElement(Overlay, {
    hover: hover
  }));
};

exports.NavItem = NavItem;
var MenuContainer = (0, _styledComponents.default)(_palette.Box).withConfig({
  displayName: "NavItem__MenuContainer",
  componentId: "sc-1ekz3i7-0"
})(["position:absolute;top:", "px;margin-top:-1px;transform:translateX(-78%);"], _NavBar.NavBarHeight);
//# sourceMappingURL=NavItem.js.map

py: 2,
    className: className,
    display: display,
    position: "relative",
    style: {
      cursor: "pointer"
    },
    onClick: function onClick() {
      trackClick();
      _onClick && _onClick();
    }
  }, _react.default.createElement(_palette.Sans, {
    size: "3",
    weight: "medium",
    color: hoverColor
  }, _react.default.createElement(_palette.Box, {
    height: 25
  }, (0, _isFunction2.default)(navItemLabel) ? // NavItem children can be called as renderProps so that contents
  // can operate on UI behaviors (such as changing the color of an
  // icon on hover).
  navItemLabel({
    hover: hover
  }) : navItemLabel))), showMenu && _react.default.createElement(_reactSpring.animated.div, {
    style: animatedStyle
  }, _react.default.createElement(MenuContainer, {
    top: (0, _palette.space)(6)
  }, _react.default.createElement(Menu, null))), showOverlay && _react.default.createElement(Overlay, {
    hover: hover
  }));
};

oneSlideVisible = _this$props3.oneSlideVisible,
          render = _this$props3.render; // FIXME: During SSR pass want to hide other images. Work around for lack
      // of SSR support in Flickity. This will only render the first 6 slides on SRR pass.

      var isServer = typeof window === "undefined";
      var carouselImages;

      if (isServer && oneSlideVisible) {
        carouselImages = [data[0]];
      } else if (isServer && data.length > 5) {
        carouselImages = data.slice(0, 6);
      } else {
        carouselImages = data;
      }

      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_palette.Flex, {
        flexDirection: "row",
        position: "relative",
        justifyContent: "space-around",
        alignItems: "center",
        height: height
      }, this.renderLeftArrow(), _react.default.createElement(CarouselContainer, {
        height: height,
        isMounted: isMounted
      }, _react.default.createElement(FlickityCarousel, {
        isMounted: isMounted,
        ref: function ref(c) {
          return _this3.carouselRef = c;
        }
      }, carouselImages.map(function (slide, slideIndex) {
        return _react.default.createElement(_react.Fragment, {
          key: slideIndex

href: href,
    color: hoverColor,
    underlineBehavior: "none",
    px: 1,
    py: 2,
    className: className,
    display: display,
    position: "relative",
    style: {
      cursor: "pointer"
    },
    onClick: function onClick() {
      trackClick();
      _onClick && _onClick();
    }
  }, _react.default.createElement(_palette.Sans, {
    size: "3",
    weight: "medium",
    color: hoverColor
  }, _react.default.createElement(_palette.Box, {
    height: 25
  }, (0, _isFunction2.default)(navItemLabel) ? // NavItem children can be called as renderProps so that contents
  // can operate on UI behaviors (such as changing the color of an
  // icon on hover).
  navItemLabel({
    hover: hover
  }) : navItemLabel))), showMenu && _react.default.createElement(_reactSpring.animated.div, {
    style: animatedStyle
  }, _react.default.createElement(MenuContainer, {
    top: (0, _palette.space)(6)
  }, _react.default.createElement(Menu, null))), showOverlay && _react.default.createElement(Overlay, {
    hover: hover

function getTypeSizes(type: T) {
  const typeSizes = themeProps.typeSizes[type] // as TypeSizes[T]
  return Object.keys(typeSizes) as Array
}

right: rightPosition,
          showArrow: showRightArrow
        }, _react.default.createElement(ArrowButton, {
          height: height,
          onClick: function onClick() {
            _this.flickity.next();

            if (onArrowClick) {
              onArrowClick({
                state: _this.state,
                props: _this.props,
                flickity: _this.flickity
              });
            }
          }
        }, _react.default.createElement(_palette.ChevronIcon, {
          height: 30,
          direction: "right",
          fill: "black100",
          width: 30
        })));
      }; // Override default arrow display if custom render callback has been passed