How to use @arch-ui/theme - 10 common examples

default: colors.N05,
  primary: colors.B.L90,
  danger: colors.R.L90,
  create: colors.G.L90,
  warning: colors.Y.L90,
};
const subtleBorderColor = {
  default: colors.N10,
  primary: colors.B.L80,
  danger: colors.R.L80,
  create: colors.G.L80,
  warning: colors.Y.L80,
};
const subtleTextColor = {
  default: colors.N50,
  primary: colors.B.L30,
  danger: colors.R.L30,
  create: colors.G.L30,
  warning: colors.Y.L30,
};

export const Lozenge = styled.div(({ appearance, variant, crop }) => {
  const isClipRight = crop === 'right';
  const cropStyles = crop
    ? {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',

        // clip from beginning of string
        direction: isClipRight ? 'rtl' : null,
        textAlign: isClipRight ? 'left' : null,

const GrabHandle = styled.div(({ isActive }) => ({
  backgroundColor: alpha(colors.text, 0.06),
  height: isActive ? '100%' : 0,
  cursor: 'col-resize',
  position: 'absolute',
  right: 0,
  top: 0,
  transition: `background-color ${TRANSITION_DURATION} linear, height ${TRANSITION_DURATION} ${TRANSITION_EASING}`,
  width: 1,

  ':hover': {
    transitionDelay: '100ms', // avoid inadvertent mouse passes
    backgroundColor: alpha(colors.text, 0.12),
  },
  ':active': {
    backgroundColor: alpha(colors.text, 0.24),
  },

  // increase hit-area
  ':before': {
    bottom: -gridSize,
    content: '" "',
    left: -gridSize,
    position: 'absolute',
    right: -gridSize,
    top: -gridSize,
  },
}));
const CollapseExpand = styled.button(({ isCollapsed, mouseIsOverNav }) => {

export const HeadFoot = styled.div({
  lineHeight: 1,
  margin: `0 ${innerGutter}px`,
  paddingBottom: innerGutter,
  paddingTop: innerGutter,

  // ensure that box-shadow covers body content
  position: 'relative',
  zIndex: 1,
});
export const Header = styled(HeadFoot)({
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Footer = styled(HeadFoot)({
  boxShadow: `0 -2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Title = styled.h3({
  fontSize: 18,
  fontWeight: 500,
  margin: 0,
});
export const Body = styled.div({
  lineHeight: 1.4,
  overflowY: 'auto',
  padding: innerGutter,
});

import React from 'react';
import styled from '@emotion/styled';
import { keyframes } from '@emotion/core';

import { colors } from '@arch-ui/theme';
import { A11yText } from '@arch-ui/typography';

// ==============================
// Dots
// ==============================

const fadeAnim = keyframes`0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; }`;
const appearanceColor = {
  default: colors.N20,
  dark: colors.text,
  primary: colors.primary,
  inverted: 'white',
};

const DotsContainer = styled.div(({ size }) => ({
  alignSelf: 'center',
  fontSize: size,
  lineHeight: 1,
  textAlign: 'center',
  verticalAlign: 'middle',
  display: 'inline-flex',
}));
const Dot = styled.span(({ appearance, delay = 0, isOffset }) => ({
  animation: `${fadeAnim} 1s infinite ${delay}ms`,
  animationTimingFunction: 'ease-in-out',
  backgroundColor: appearanceColor[appearance],

{...props}
  />
));

export const HeadFoot = styled.div({
  lineHeight: 1,
  margin: `0 ${innerGutter}px`,
  paddingBottom: innerGutter,
  paddingTop: innerGutter,

  // ensure that box-shadow covers body content
  position: 'relative',
  zIndex: 1,
});
export const Header = styled(HeadFoot)({
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Footer = styled(HeadFoot)({
  boxShadow: `0 -2px 0 ${alpha(colors.text, 0.12)}`,
});
export const Title = styled.h3({
  fontSize: 18,
  fontWeight: 500,
  margin: 0,
});
export const Body = styled.div({
  lineHeight: 1.4,
  overflowY: 'auto',
  padding: innerGutter,
});

const HeadFoot = styled.div({
  lineHeight: 1,
  margin: `0 ${innerGutter}px`,
  paddingBottom: innerGutter,
  paddingTop: innerGutter,

  // ensure that box-shadow covers body content
  position: 'relative',
  zIndex: 1,
});
const Header = styled(HeadFoot)({
  boxShadow: `0 2px 0 ${alpha(colors.text, 0.12)}`,
});
const Footer = styled(HeadFoot)({
  boxShadow: `0 -2px 0 ${alpha(colors.text, 0.12)}`,
});
const Body = styled.div({
  lineHeight: 1.4,
  overflowY: 'auto',
  padding: innerGutter,
});

function useKeydownHandler(handler) {
  let handlerRef = useRef(handler);
  useEffect(() => {
    handlerRef.current = handler;
  });
  useEffect(() => {
    function handle(event) {
      handlerRef.current(event);
    }

const Icon = styled.div(({ checked, isDisabled, isFocus, isActive, isHover }) => {
  // background
  let bg = colors.N10;
  if (isDisabled && checked) {
    bg = colors.N30;
  } else if (isActive) {
    bg = checked ? colors.B.D10 : colors.N20;
  } else if ((isFocus || isHover) && !checked) {
    bg = colors.N15;
  } else if (checked) {
    bg = colors.B.base;
  }

  // fill
  let fill = 'white';
  if (isDisabled && checked) {
    fill = colors.N70;
  } else if (!checked) {
    fill = 'transparent';

const StyledPreview = ({ preview, originalUrl, fieldPath, ...props }) => (
  
);

const Icon = styled.div(({ checked, isDisabled, isFocus, isActive, isHover }) => {
  // background
  let bg = colors.N10;
  if (isDisabled && checked) {
    bg = colors.N30;
  } else if (isActive) {
    bg = checked ? colors.B.D10 : colors.N20;
  } else if ((isFocus || isHover) && !checked) {
    bg = colors.N15;
  } else if (checked) {
    bg = colors.B.base;
  }

  // fill
  let fill = 'white';
  if (isDisabled && checked) {
    fill = colors.N70;
  } else if (!checked) {
    fill = 'transparent';
  }

  // stroke
  let innerStroke = isFocus ? colors.B.L20 : bg;

const Image = props => (
  <div>
    <img></div>