polished#rgba JavaScript Examples

defaultColorStyles = css`
  ${({ bgColor, stroke, ckType, checked, theme }) =>
    ckType
      ? checked
        ? css`
            color: ${theme.color.main};
            & > svg > path {
              stroke: ${theme.color.white};
            }
          `
        : css`
            color: ${rgba(theme.color.black, 0.5)};
            & > svg > path {
              stroke: ${theme.color.white};
            }
          `
      : css`
          color: ${theme.color[bgColor]};
          & > svg > path {
            stroke: ${theme.color[stroke]};
          }
        `}
`

TripsNone = () => {
  console.log('blajkjbkajlds');
  return (
    <TripsNoneWrapper>
      <TripsNoneText>
        다시 여행을 떠나실 준비가 되면 에어비앤비가 도와드리겠습니다.{' '}
        <Link to="/help" target="_blank">
          <StButton btnType="underlined" padding="0" fontSize="1.5rem">
            자세히 알아보기
          </StButton>
        </Link>
      </TripsNoneText>
      <TripsNoneMainWrapper>
        <img src="https://etc-corporate.org/uploads/2019/05/Airbnb_Logo_B%C3%A9lo.svg_.png" />
      </TripsNoneMainWrapper>
      <TripsNoneButtonWrapper>
        <Link to="/">
          <Button
            color="black"
            padding="1.5rem 2.3rem"
            border="none"
            hover={`background: ${rgba(theme.color.black, 0.9)}`}
          >
            에어비엔비 둘러보기
          </Button>
        </Link>
      </TripsNoneButtonWrapper>
    </TripsNoneWrapper>
  );
}

colors = {
  active: rgba(102, 102, 102, 0.5),
  background: backgroundColor,
  black: '#000000',
  brand: '#FD6FFF',
  control: {
    dark: '#FFCA58',
    light: '#403216'
  },
  focus: '#FFCA58',
  icon: {
    dark: '#f8f8f8',
    light: '#666666'
  },
  placeholder: '#AAAAAA',
  text: {
    dark: '#eeeeee',
    light: '#444444'
  },
  white: '#FFFFFF'
}

dark = deepFreeze({
  global: {
    colors: colors,
    drop: {
      background: '#333333'
    },
    focus: {
      border: {
        color: css(["", ";"], function (props) {
          return normalizeColor('focus', props.theme);
        }),
        width: '2px'
      }
    },
    font: {
      family: 'Arial'
    },
    input: {
      weight: 700
    }
  },
  anchor: {
    color: 'control'
  },
  layer: {
    background: backgroundColor,
    overlay: {
      background: rgba(48, 48, 48, 0.5)
    }
  }
})

function FailedThumbnail() {
  return (
    <Fill
      bg={rgba(89, 89, 89, 0.95)}
      borderRadius={['16px', '12px']}
      css={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <FiXCircle size={rem(20)} color={theme.colors.white} />
    </Fill>
  )
}

function ThumbnailOverlay({option, isQualified, hasIrrelevantWords}) {
  return (
    <Fill
      bg={
        // eslint-disable-next-line no-nested-ternary
        isQualified
          ? hasIrrelevantWords
            ? transparentize(0.1, theme.colors.danger)
            : rgba(87, 143, 255, 0.9)
          : rgba(89, 89, 89, 0.95)
      }
      borderRadius={['16px', '12px']}
    >
      {option && <FiCheck size={rem(20)} color={theme.colors.white} />}
    </Fill>
  )
}

Info = styled.span`
  font-size: 1.4rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  color: ${({ theme }) => rgba(theme.colors.text, 0.5)};

  &:not(:last-child) {
    margin-right: 2rem;
  }
`

export default function ThemeContext () {
  const [colorMode, setColorMode] = useState(getColorMode())
  const editorTheme = editorThemes[colorMode].colors

  const theme = useMemo(() => {
    const bg = editorTheme['editor.background']
    const color = editorTheme['editor.foreground']
    const contrast = editorTheme['editorCursor.foreground']
    const borderColor = rgba(color, 0.1)
    const iconColor = rgba(color, 0.75)
    return { bg, borderColor, color, contrast, iconColor }
  }, [colorMode])

  return { colorMode, changeTheme: () => nextTheme(setColorMode), theme }
}

UploadBox = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 16rem;
  margin-bottom: 1rem;
  padding: 3rem 1rem;
  color: ${({ theme, error }) => (error ? '#f34a4a' : theme.textColorInactive)};
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  outline: 3px dashed ${({ theme }) => rgba(theme.textColorInactive, 0.4)};
  outline-offset: -0.75rem;
  cursor: pointer;

  h2 {
    font-size: ${fontSize.responsive.md};
  }

  &:hover {
    color: ${({ theme }) => theme.textColor};
    background: ${({ theme }) => lighten(0.1, theme.secondary)};
    outline-color: ${({ theme }) => theme.textColorInactive};
  }
`

UploadBoxSub = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 15rem;
  height: initial;
  padding: 1.5rem 1rem;
  color: ${({ theme, error }) => (error ? '#f34a4a' : theme.textColorInactive)};
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  outline: 3px dashed ${({ theme }) => rgba(theme.textColorInactive, 0.4)};
  outline-offset: -0.75rem;
  cursor: pointer;

  h2 {
    font-size: ${fontSize.static.xs};
    text-align: center;
  }

  &:hover {
    color: ${({ theme }) => theme.textColor};
    background: ${({ theme }) => lighten(0.1, theme.secondary)};
    outline-color: ${({ theme }) => theme.textColorInactive};
  }

  @media ${device.max.xs} {
    width: 100%;
    height: 11rem;
    padding: 1rem;
  }
`

SearchContainer = styled.div`
  position: sticky;
  top: ${({ theme }) => theme.headerHeight};
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  background: linear-gradient(
    0deg,
    ${({ theme }) => rgba(theme.darksecondary, 0)} 0%,
    ${({ theme }) => rgba(theme.darksecondary, 0)} 30%,
    ${({ theme }) => rgba(theme.darksecondary, 1)} 50%
  );
`

ItemInfo = styled.figcaption`
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  padding: 0.5rem;
  color: ${({ theme }) => theme.textColorInactive};
  background: ${({ theme }) => rgba(theme.darksecondary, 0.95)};
`

Container = styled.div`
  display: grid;
  grid-template-rows:
    [tracks] 2rem
    ${rows.map(({ id, title }, index) => `[${id}] 1fr `)};
  grid-template-columns:
    [times] 2.5rem
    ${cols.map(({ id, title }, index) => `[${id}] 1fr `)};
  margin-bottom: 1rem;
  padding: 0.75rem;
  overflow-x: scroll;
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};

  > div {
    box-shadow: inset -1px -1px 0 ${({ theme }) => rgba(theme.primary, 0.1)};
  }
`

UrlContainer = styled(Input)`
  color: ${({ theme }) => theme.textColor};
  background: ${({ theme }) => theme.darksecondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  border: 1px solid ${({ theme }) => theme.placeholder};
  font-size: 1rem;
  font-weight: 500;
  overflow-x: scroll;
  white-space: nowrap;
  height: 2rem;

  &:hover,
  &:focus {
    border-color: ${({ theme }) => theme.logo};
    box-shadow: 0 0 1rem ${({ theme }) => rgba(theme.logo, 0.2)};
  }

  &.ant-input {
    width: 100%;
  }
`

StyledButton = styled(Button)`
  border: 1px solid ${({ theme }) => theme.placeholder};
  border-radius: ${({ theme }) => theme.borderRadius};
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: ${({ theme }) => theme.darksecondary};
  color: ${({ theme }) => theme.textColor};

  &:hover,
  &:focus {
    background: ${({ theme }) => theme.logo};
    color: ${({ theme }) => theme.darksecondary};
    border-color: ${({ theme }) => theme.logo};
    box-shadow: 0 0 1rem ${({ theme }) => rgba(theme.logo, 0.2)};
  }
`

ButtonSquare = styled(Button)`
  ${buttonStyles}

  background: ${({ theme }) => theme.secondary};

  &.ant-btn-primary {
    background: ${({ theme }) => theme.logo};
  }

  .anticon.anticon-loading.anticon-spin {
    padding: 0;
  }

  &:hover,
  &:active {
    opacity: 0.9;
  }

  &:active {
    box-shadow: inset 0 0 5px ${rgba('#000', 0.4)};
  }
`

ButtonSquareLink = styled(Link)`
  ${buttonStyles}

  padding: 0.25rem 0.75rem;
  background: ${({ type, theme }) =>
    type === 'primary' ? theme.logo : theme.darksecondary};

  &:hover,
  &:active {
    background: ${({ type, theme }) =>
      type === 'primary' ? theme.logoHover : theme.darksecondaryHover};
    box-shadow: inset 0 0 5px ${rgba('#000', 0.1)};
  }
`

baseStyles = css`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0.25rem;
  font-size: 1rem;
  background: transparent;
  border: none;
  border-radius: ${({ theme }) => theme.borderRadius};

  &:hover {
    background: ${({ theme }) => rgba(theme.primary, 0.1)};
  }
`

styles = ({ color }) => ({
  positioned: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  root: {
    composes: '$positioned',
    position: 'fixed',
    zIndex: 0,
    backgroundColor: color.background.dark
  },
  patterns: {
    composes: '$positioned',
    zIndex: 0
  },
  light1: {
    composes: '$positioned',
    zIndex: 0,
    backgroundImage: 'radial-gradient(' + rgba(color.secondary.main, 0.1) + ' 25%, transparent)',
    opacity: props => props.energy.entered ? 1 : 0
  },
  line1Container: {
    composes: '$positioned',
    zIndex: 1
  },
  line1: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: 1,
    backgroundColor: color.background.main,
    boxShadow: `0 0 1px ${rgba(color.background.main, color.alpha)}`,
    opacity: props => props.energy.entered ? 1 : 0
  },
  svgContainer: {
    composes: '$positioned',
    zIndex: 2,
    display: 'block',
    width: '100%',
    height: '100%'
  },
  dotLinesContainer: {
    opacity: props => props.energy.exited ? 0 : 1
  },
  dotLine: {
    stroke: color.background.light,
    strokeWidth: 1
  },
  line2: {},
  line3: {},
  circuitContainer: {},
  circuit: {
    opacity: props => props.energy.exited ? 0 : 1
  },
  circuitLine: {
    fill: 'none',
    stroke: color.background.light,
    strokeWidth: 1
  },
  circuitLineLight: {
    fill: 'none',
    stroke: color.secondary.main,
    strokeWidth: 1,
    opacity: 0
  },
  circuitDot: {
    fill: lighten(color.accent / 4, color.background.light),
    opacity: props => props.energy.entered ? 1 : 0
  },
  circuitDotStart: {},
  circuitDotEnd: {},
  content: {
    composes: '$positioned',
    zIndex: 1,
    display: 'flex'
  }
})

styles = theme => ({
  root: {
    position: 'relative',
    display: 'inline-block',
    margin: 0,
    border: 'none',
    outline: 'none',
    padding: 0,
    textTransform: 'uppercase',
    textAlign: 'center',
    lineHeight: 1,
    fontSize: 14,
    color: theme.color.secondary.main,
    background: 'transparent',
    cursor: 'pointer',
    transition: 'color 250ms ease-out',

    '&:hover, &:focus': {
      color: theme.color.tertiary.main,

      '& $background': {
        backgroundColor: rgba(theme.color.tertiary.main, 0.125)
      },
      '& $path': {
        stroke: rgba(theme.color.tertiary.dark, 0.5)
      }
    }
  },
  background: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: rgba(theme.color.secondary.main, 0.125),
    transition: 'background 250ms ease-out',
    opacity: ({ energy }) => energy.animate ? 0 : 1
  },
  frame: {
    position: 'absolute',
    width: '100%',
    height: '100%'
  },
  svg: {
    display: 'block',
    width: '100%',
    height: '100%'
  },
  path: {
    fill: 'none',
    stroke: rgba(theme.color.secondary.dark, 0.5),
    strokeWidth: 2,
    vectorEffect: 'non-scaling-stroke',
    transition: 'stroke 250ms ease-out',
    opacity: ({ energy }) => energy.animate ? 0 : 1
  },
  main: {
    position: 'relative',
    padding: [8, 32]
  }
})

draw () {
    const { theme } = this.props;
    const { small } = getViewportRange();
    const width = this.element.offsetWidth;
    const height = this.element.offsetHeight;

    this.svg.setAttribute('width', width);
    this.svg.setAttribute('height', height);

    const boxWidth = Math.min(1000, width);
    const offset = small ? 5 : 20;
    const pit = small ? 5 : 10;

    const x1 = ((width - boxWidth) / 2);
    const x2 = ((width - boxWidth) / 2) + offset;
    const x3 = x2 + (boxWidth / 2);
    const x4 = x2 + boxWidth - (offset * 2);
    const x5 = x4 + offset;

    const backgroundColor = rgba(theme.color.background.dark, theme.color.alpha);
    const lineColor = rgba(theme.color.primary.dark, 0.5);

    const ground = {
      d: `M0,0 L${x1},0 L${x2},${pit} L${x4},${pit} L${x5},0 L${width},0 L${width},${height} L0,${height} L0,0`,
      fill: backgroundColor,
      stroke: backgroundColor
    };
    const line1 = {
      d: `M0,0 L${x1},0`,
      stroke: lineColor
    };
    const slash1 = {
      d: `M${x1},0 L${x2},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line2 = {
      d: `M${x2},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const line3 = {
      d: `M${x4},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const slash2 = {
      d: `M${x5},0 L${x4},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line4 = {
      d: `M${width},0 L${x5},0`,
      stroke: lineColor
    };

    const shapes = [ground, line1, slash1, line2, line3, slash2, line4];

    this.setState({ shapes });
  }

draw () {
    const { theme } = this.props;
    const { small } = getViewportRange();
    const width = this.element.offsetWidth;
    const height = this.element.offsetHeight;

    this.svg.setAttribute('width', width);
    this.svg.setAttribute('height', height);

    const boxWidth = Math.min(1000, width);
    const offset = small ? 5 : 20;
    const pit = height - (small ? 5 : 10);
    const double = small ? 0 : 12;

    const x1 = ((width - boxWidth) / 2);
    const x2 = ((width - boxWidth) / 2) + offset;
    const x3 = x2 + (boxWidth / 2);
    const x4 = x2 + boxWidth - (offset * 2);
    const x5 = x4 + offset;

    const backgroundColor = rgba(theme.color.background.dark, theme.color.alpha);
    const lineColor = rgba(theme.color.primary.dark, 0.5);

    const ground = {
      d: `M0,0 L${width},0 L${width},${height} L${x5},${height} L${x4},${pit} L${x3},${pit} L${x2},${pit} L${x1},${height} L0,${height} L0,0`,
      fill: backgroundColor,
      stroke: backgroundColor
    };
    const line1 = {
      d: `M0,${height} L${x1},${height}`,
      stroke: lineColor
    };
    const slash1 = {
      d: `M${x1},${height} L${x2},${pit} M${x1 - double},${height} L${x2 - double},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line2 = {
      d: `M${x2 - double},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const line3 = {
      d: `M${x4 + double},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const slash2 = {
      d: `M${x5},${height} L${x4},${pit} M${x5 + double},${height} L${x4 + double},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line4 = {
      d: `M${width},${height} L${x5},${height}`,
      stroke: lineColor
    };

    const shapes = [ground, line1, slash1, line2, line3, slash2, line4];

    this.setState({ shapes });
  }

styles = theme => ({
  root: {
    flex: 1,
    position: 'relative',
    display: 'flex',
    margin: [0, 'auto'],
    maxWidth: 1000,
    width: '100%'
  },
  frame: {
    position: 'absolute',
    zIndex: 1,
    left: 10,
    right: 10,
    top: 0,
    bottom: 0,
    outline: `2px solid ${theme.color.background.dark}`,
    outlineOffset: 2,
    backgroundColor: rgba(theme.color.background.dark, theme.color.alpha)
  },
  content: {
    position: 'relative',
    zIndex: 2,
    flex: 1,
    margin: [10, 10, 10, 20],
    padding: [0, 10, 0, 0],

    '& > *:last-child, & > article > *:last-child': {
      marginBottom: 0
    }
  },

  '@media screen and (min-width: 768px)': {
    root: {
      minHeight: 1
    },
    frame: {
      left: 20,
      right: 20,
      top: 0,
      bottom: 0
    },
    content: {
      overflowX: 'hidden',
      overflowY: 'auto',
      margin: [30, 40, 30, 50],
      padding: [0, 10, 0, 0],

      '& img': {
        maxWidth: '80%'
      }
    }
  },

  '@media screen and (min-width: 1025px)': {
    content: {
      margin: [50, 60, 50, 70],
      padding: [0, 10, 0, 0]
    }
  }
})

styles = theme => ({
  root: {
    position: 'relative',
    display: 'inline-block',
    userSelect: 'none'
  },
  frame: {
    position: 'absolute',
    width: '100%',
    height: '100%'
  },
  svg: {
    display: 'block',
    width: '100%',
    height: '100%'
  },
  path: {
    fill: 'none',
    stroke: rgba(theme.color.primary.dark, 0.5),
    strokeWidth: 2,
    vectorEffect: 'non-scaling-stroke'
  },
  main: {
    position: 'relative',
    padding: 20
  },
  message: {
    marginBottom: 20,
    color: theme.color.text.main,
    textAlign: 'center'
  },
  options: {
    textAlign: 'center'
  },
  option: {
    display: 'inline-block'
  },

  '@media screen and (min-width: 480px)': {
    main: {
      position: 'relative',
      padding: [20, 40]
    }
  }
})

styles = theme => ({
  root: {
    position: 'relative',
    display: 'block',
    margin: 0
  },
  lineTop: {
    position: 'absolute',
    left: '50%',
    transform: 'translateX(-50%)',
    borderTop: '1px solid ' + rgba(theme.color.primary.dark, 0.25),
    width: ({ energy }) => energy.animate ? '0%' : '100%'
  },
  link: {
    display: 'flex',
    flexDirection: 'column',
    padding: [40, 20],
    transition: [
      'background 200ms ease-out',
      'color 200ms ease-out'
    ].join(','),

    '&:hover, &:focus': {
      backgroundColor: ({ energy }) => energy.entered && rgba(theme.color.secondary.main, 0.05)
    }
  },
  media: {
    display: 'flex',
    margin: [0, 'auto'],
    padding: [0, 0, 20, 0],
    width: '100%',
    height: 200
  },
  image: {
    flex: 1,
    border: '1px solid ' + rgba(theme.color.secondary.dark, 0.125),
    backgroundColor: '#000',
    backgroundImage: `url(${iconURL})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center'
  },
  info: {
    flex: 1,
    color: theme.color.text.main,
    wordBreak: 'break-word'
  },
  title: {
    fontSize: 20
  },
  message: {
    margin: 0
  },

  '@media screen and (min-width: 480px)': {
    link: {
      flexDirection: 'row',
      padding: 20
    },
    media: {
      padding: [0, 20, 0, 0],
      width: 180,
      height: 180
    }
  },

  '@media screen and (min-width: 768px)': {
    link: {
      padding: 40
    }
  }
})

MsgDetailLanguageModal = ({ modalState, onClickCloseModal }) => {
  return (
    <StPdfModal
      width="55rem"
      height="fit-content"
      modalState={modalState}
      setModalState={onClickCloseModal}
      header
    >
      <StPdfModalWrapper>
        <StPdfModalTitle>언어를 선택하세요</StPdfModalTitle>
        <StPdfModalSub>
          예약 세부정보가 저장되는 언어입니다. 나중에 인쇄할 수 있습니다.
        </StPdfModalSub>
        <StPdfModalRadioWrapper>
          <StPdfModalLabel>
            <StPdfModalText>선호하는 언어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" checked={true} />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>중국어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>영어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>프랑스어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>독일어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>이탈리아어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>일본어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>한국어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>포르투갈어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>러시아어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>스페인어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
        </StPdfModalRadioWrapper>
      </StPdfModalWrapper>
      <StModalFooter>
        <StForm method="get" action={scheduleDoc}>
          <Button
            type="submit"
            color="black"
            width="100%"
            height="4.5rem"
            hover={`background: ${rgba(theme.color.black, 0.9)}`}
            onClick={onClickCloseModal}
          >
            저장
          </Button>
        </StForm>
      </StModalFooter>
    </StPdfModal>
  );
}

MsgDetailPdfModal = ({
  modalState,
  onClickCloseModal,
  onClickOpenModal,
  onChangePdf,
}) => {
  return (
    <StPdfModal
      width="55rem"
      height="fit-content"
      modalState={modalState}
      setModalState={onClickCloseModal}
      header
    >
      <StPdfModalWrapper>
        <StPdfModalTitle>일행 정보</StPdfModalTitle>
        <StPdfModalSub>
          저장하기 전에 모든 게스트의 성명을 입력했는지 확인해주세요. 각 성명
          뒤에 쉼표를 찍어주세요.
        </StPdfModalSub>
        <StPdfModalTextarea
          placeholder="예: Gil Dong Hong, Yuna Kim"
          onChange={onChangePdf}
        />
      </StPdfModalWrapper>
      <StModalFooter>
        <Button
          btnType="underlined"
          hover="none"
          padding="none"
          onClick={onClickOpenModal}
        >
          건너뛰기
        </Button>
        <Button
          color="black"
          width="8rem"
          height="4.5rem"
          hover={`background: ${rgba(theme.color.black, 0.9)}`}
          onClick={onClickOpenModal}
        >
          다음
        </Button>
      </StModalFooter>
    </StPdfModal>
  );
}

function MatrixCell({
  width,
  height,
  color,
  backgroundColor,
  textStyle,
  isBold,
  text,
  minContrast,
  shouldPass,
}) {
  const theme = useTheme();
  const contrast = useMemo(
    () => colorContrast(theme.getColor(color), theme.getColor(backgroundColor)),
    [theme, color, backgroundColor]
  );
  const isVisible =
    minContrast === null ||
    (shouldPass && contrast >= minContrast) ||
    (!shouldPass && contrast < minContrast);

  return (
    <div
      css={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexShrink: 0,
        width,
        height,
        marginLeft: theme.space[1],
        border:
          backgroundColor === "white"
            ? `1px solid ${theme.colors.grey.t05}`
            : null,
        boxSizing: "border-box",
        backgroundColor: theme.getColor(backgroundColor),
        overflow: "hidden",
        position: "relative",
        opacity: isVisible ? 1 : 0,
        transition: "opacity .2s",
      }}
      aria-hidden={isVisible ? null : "true"}
    >
      <Text textStyle={textStyle} color={color}>
        {isBold ? <strong>{text}</strong> : text}
      </Text>
      <div
        css={{
          position: "absolute",
          right: 0,
          borderTopLeftRadius: "4px",
          bottom: 0,
          width: "36px",
          padding: `0 ${theme.space[1]}`,
          backgroundColor: rgba(theme.colors.black, 0.6),
        }}
      >
        <Text textStyle="body2" color="white" align="center">
          {contrast.toFixed(2)}
        </Text>
      </div>
    </div>
  );
}

theme = {
  global: {
    colors: {
      border: '#e0e0e0',
      focus: '#2196F3',
      gray: rgba(0, 0, 0, 0.54)
    },
    drop: {
      background: '#ffffff'
    },
    elevation: {
      light: {
        small: '0 2px 2px 0 rgba(0,0,0,0.19)',
        medium: '0 3px 3px 0 rgba(0,0,0,0.18)',
        large: '0 4px 4px 0 rgba(0,0,0,0.17)',
        xlarge: '0 24px 24px 0 rgba(0, 0, 0, 0.12)'
      }
    },
    font: {
      family: 'Arial'
    },
    size: {
      xxsmall: '24px'
    }
  },
  checkBox: {
    border: {
      color: {
        light: 'brand'
      },
      radius: '2px'
    },
    color: {
      light: 'brand'
    },
    check: {
      extend: function extend(_ref) {
        var extendTheme = _ref.theme,
            checked = _ref.checked;
        return "\n        " + (checked && "background-color: " + normalizeColor('brand', extendTheme) + ";") + "\n      ";
      }
    },
    hover: {
      border: {
        color: undefined
      }
    },
    icon: {
      size: '18px',
      extend: 'stroke: white;'
    },
    icons: {
      checked: FormCheckmark
    },
    gap: 'small',
    size: '18px',
    extend: "\n      color: #9C9C9C;\n    "
  },
  drop: {
    maxHeight: '384px'
  },
  select: {
    icons: {
      down: ArrowDown
    },
    searchInput: SearchInput,
    container: {
      text: {
        size: 'small'
      },
      extend: 'max-height: 250px;'
    }
  },
  textInput: {
    extend: function extend(props) {
      return "\n      color: " + normalizeColor('gray', props.theme) + ";\n      font-weight: 400;\n      font-size: 13px;\n      padding: 14px;\n    ";
    }
  }
}