polished#transparentize JavaScript Examples

The following examples show how to use polished#transparentize. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: components.js    From idena-web with MIT License 6 votes vote down vote up 
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>
  )
}
Example #2
Source File: Cursor.js    From ipad-cursor with MIT License 6 votes vote down vote up 
Cursor = styled.div`
    width: 24px;
    height: 24px;
    position: absolute;
    background: ${({theme}) => transparentize(.5, theme.colors.cursor)};
    border-radius: 12px;
    z-index: -1;

    transition: opacity .3s;
    &.block {
        border-radius: 4px;
    }
    &.text {
        height: 30px;
        width: 3px;
        border-radius: 1px;
    }
    &.pressing {
        opacity: .5;
        transition: opacity 0s;
    }
`
Example #3
Source File: index.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
StyledDialogContent = styled(FilteredDialogContent)`
  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
    border: 1px solid ${({ theme }) => theme.concreteGray};
    background-color: ${({ theme }) => theme.inputBackground};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)};
    ${({ theme }) => theme.mediaWidth.upToMedium`margin: 0;`};
    padding: 0px;
    width: 50vw;
    max-width: 650px;
    ${({ theme }) => theme.mediaWidth.upToMedium`width: 65vw;`}
    ${({ theme }) => theme.mediaWidth.upToSmall`width: 85vw;`}
    ${({ maxHeight }) =>
      maxHeight &&
      css`
        max-height: ${maxHeight}vh;
      `}
    ${({ minHeight }) =>
      minHeight &&
      css`
        min-height: ${minHeight}vh;
      `}
    ${({ theme }) => theme.mediaWidth.upToMedium`max-height: 65vh;`}
    ${({ theme }) => theme.mediaWidth.upToSmall`max-height: 80vh;`}
    display: flex;
    overflow: hidden;
    border-radius: 10px;
  }
`
Example #4
Source File: TextArea.js    From ipad-cursor with MIT License 6 votes vote down vote up 
Container = WithHover(styled.textarea`
  font-size: 32px;
  width: 100%;
  background: transparent;
  color: ${({ theme }) => theme.colors.body};
  font-family: ${({theme}) => theme.fonts.default};
  border: none;
  margin-bottom: 24px;
  resize: none; 
  &:focus {
      outline: none;
  }
  &::selection {
    background: ${({theme}) => transparentize(.6, theme.colors.highlight)};
  }
`, 'text')
Example #5
Source File: Info.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
TransactionState = styled.div`
  background-color: ${({ pending, theme }) =>
    pending ? transparentize(0.95, theme.royalPurple) : transparentize(0.95, theme.connectedPurple)};
  border-radius: 1.5rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.75rem;
  border: 1px solid;
  border-color: ${({ pending, theme }) =>
    pending ? transparentize(0.75, theme.royalPurple) : transparentize(0.75, theme.connectedPurple)};

  :hover {
    border-color: ${({ pending, theme }) =>
      pending ? transparentize(0, theme.royalPurple) : transparentize(0, theme.connectedPurple)};
  }
`
Example #6
Source File: Transaction.js    From pine-interface with GNU General Public License v3.0 6 votes vote down vote up 
TransactionState = styled.div`
  display: flex;
  background-color: ${({ pending, theme }) =>
    pending ? transparentize(0.95, theme.royalGreen) : transparentize(0.95, theme.connectedGreen)};
  border-radius: 1.5rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.75rem;
  border: 1px solid;
  border-color: ${({ pending, theme }) =>
    pending ? transparentize(0.75, theme.royalGreen) : transparentize(0.75, theme.connectedGreen)};

  #pending {
    animation: 2s ${rotate} linear infinite;
  }

  :hover {
    border-color: ${({ pending, theme }) =>
      pending ? transparentize(0, theme.royalGreen) : transparentize(0, theme.connectedGreen)};
  }
`
Example #7
Source File: components.js    From idena-web with MIT License 6 votes vote down vote up 
function FlipHolder({css, isZoomHovered = false, ...props}) {
  const windowHeight = use100vh()
  return (
    <Tooltip
      isOpen={isZoomHovered}
      label="Ctrl+Click to zoom"
      placement="top"
      zIndex="tooltip"
      bg="graphite.500"
    >
      <ChakraFlex
        justify="center"
        direction="column"
        position="relative"
        h={[`calc(${windowHeight}px - 290px)`, 'calc(100vh - 260px)']}
        w={['100%', 'calc((100vh - 240px) / 3)']}
        mx={['6px', '10px']}
        my={0}
        p={1}
        borderRadius={['16px', '8px']}
        border={`solid ${rem(2)} ${transparentize(
          0.95,
          theme.colors.primary2
        )}`}
        boxShadow={`0 0 ${rem(2)} 0 ${transparentize(
          0.95,
          theme.colors.primary2
        )}`}
        css={css}
        {...props}
      />
    </Tooltip>
  )
}
Example #8
Source File: index.js    From pine-interface with GNU General Public License v3.0 6 votes vote down vote up 
BetaMessage = styled.div`
  ${({ theme }) => theme.flexRowNoWrap}
  cursor: pointer;
  flex: 1 0 auto;
  align-items: center;
  position: relative;
  padding: 0.5rem 1rem;
  padding-right: 2rem;
  margin-bottom: 1rem;
  border: 1px solid ${({ theme }) => transparentize(0.6, theme.wisteriaPurple)};
  background-color: ${({ theme }) => transparentize(0.9, theme.wisteriaPurple)};
  border-radius: 2rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: ${({ theme }) => theme.wisteriaPurple};

  &:after {
    content: '✕';
    top: 0.5rem;
    right: 1rem;
    position: absolute;
    color: ${({ theme }) => theme.wisteriaPurple};
  }

  .how-it-works {
    text-decoration: underline;
    margin-left: 5px;
  }
`
Example #9
Source File: Transaction.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
TransactionState = styled.div`
  display: flex;
  background-color: ${({ pending, theme }) =>
    pending ? transparentize(0.95, theme.royalBlue) : transparentize(0.95, theme.connectedGreen)};
  border-radius: 1.5rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.75rem;
  border: 1px solid;
  border-color: ${({ pending, theme }) =>
    pending ? transparentize(0.75, theme.royalBlue) : transparentize(0.75, theme.connectedGreen)};

  #pending {
    animation: 2s ${rotate} linear infinite;
  }

  :hover {
    border-color: ${({ pending, theme }) =>
      pending ? transparentize(0, theme.royalBlue) : transparentize(0, theme.connectedGreen)};
  }
`
Example #10
Source File: drawer.js    From idena-web with MIT License 6 votes vote down vote up 
function Drawer({show, onHide, ...props}) {
  const ref = useRef()

  useClickOutside(ref, () => {
    onHide()
  })

  return show ? (
    <Box
      style={{
        ...backgrounds(transparentize(0.2, theme.colors.black)),
        ...cover(),
        position: 'fixed',
        zIndex: 1300,
      }}
    >
      <Absolute
        bg={theme.colors.white}
        zIndex={1301}
        top={0}
        bottom={0}
        right={0}
        width={rem(360)}
        ref={ref}
        {...props}
      />
      <Absolute top="1em" right="1em" zIndex={1301}>
        <FiX
          color={theme.colors.muted}
          fontSize={theme.fontSizes.large}
          onClick={onHide}
          cursor="pointer"
        />
      </Absolute>
    </Box>
  ) : null
}
Example #11
Source File: sidebar.js    From webrtc-tutorial with MIT License 6 votes vote down vote up 
ResponsiveContainer = styled(Container)(props => ({
  [breakpoints.md]: {
    height: '100%',
    backgroundColor: 'white',
    boxShadow: `0 0 48px ${transparentize(0.75, 'black')}`,
    position: 'fixed',
    zIndex: 2,
    opacity: props.open ? 1 : 0,
    visibility: props.open ? 'visible' : 'hidden',
    transform: props.open ? 'none' : 'translateX(-100%)',
    transitionProperty: 'transform, opacity, visibility',
    transitionDuration: '150ms',
    transitionTimingFunction: 'ease-in-out'
  }
}))
Example #12
Source File: Transaction.js    From swap-frontend with GNU General Public License v3.0 6 votes vote down vote up 
TransactionState = styled.div`
  display: flex;
  background-color: ${({ pending, theme }) =>
    pending ? transparentize(0.95, theme.royalBlue) : transparentize(0.95, theme.connectedGreen)};
  border-radius: 1.5rem;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.75rem;
  border: 1px solid;
  border-color: ${({ pending, theme }) =>
    pending ? transparentize(0.75, theme.royalBlue) : transparentize(0.75, theme.connectedGreen)};

  #pending {
    animation: 2s ${rotate} linear infinite;
  }

  :hover {
    border-color: ${({ pending, theme }) =>
      pending ? transparentize(0, theme.royalBlue) : transparentize(0, theme.connectedGreen)};
  }
`
Example #13
Source File: index.js    From pine-interface with GNU General Public License v3.0 6 votes vote down vote up 
StyledDialogContent = styled(FilteredDialogContent)`
  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
    border: 1px solid ${({ theme }) => theme.concreteGray};
    background-color: ${({ theme }) => theme.inputBackground};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)};
    ${({ theme }) => theme.mediaWidth.upToMedium`margin: 0;`};
    padding: 0px;
    width: 50vw;
    max-width: 650px;
    ${({ theme }) => theme.mediaWidth.upToMedium`width: 65vw;`}
    ${({ theme }) => theme.mediaWidth.upToSmall`width: 85vw;`}
    ${({ maxHeight }) =>
      maxHeight &&
      css`
        max-height: ${maxHeight}vh;
      `}
    ${({ minHeight }) =>
      minHeight &&
      css`
        min-height: ${minHeight}vh;
      `}
    ${({ theme }) => theme.mediaWidth.upToMedium`max-height: 65vh;`}
    ${({ theme }) => theme.mediaWidth.upToSmall`max-height: 80vh;`}
    display: flex;
    overflow: hidden;
    border-radius: 10px;
  }
`
Example #14
Source File: index.js    From swap-frontend with GNU General Public License v3.0 6 votes vote down vote up 
StyledToggle = styled(Toggle)`
  margin-right: 24px;

  .react-switch-bg[style] {
    background-color: ${({ theme }) => darken(0.05, theme.inputBackground)} !important;
    border: 1px solid ${({ theme }) => theme.concreteGray} !important;
  }

  .react-switch-handle[style] {
    background-color: ${({ theme }) => theme.inputBackground};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.shadowColor)};
    border: 1px solid ${({ theme }) => theme.mercuryGray};
    border-color: ${({ theme }) => theme.mercuryGray} !important;
    top: 2px !important;
  }
`
Example #15
Source File: index.js    From pancake-info-v1 with GNU General Public License v3.0 6 votes vote down vote up 
Wrapper = styled.div`
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border-radius: 12px;
  background: ${({ theme, small, open }) =>
    small ? (open ? transparentize(0.4, theme.bg1) : 'none') : transparentize(0.4, theme.bg6)};
  border-bottom-right-radius: ${({ open }) => (open ? '0px' : '12px')};
  border-bottom-left-radius: ${({ open }) => (open ? '0px' : '12px')};
  z-index: 9999;
  width: 100%;
  min-width: 300px;
  box-sizing: border-box;
  box-shadow: ${({ open, small }) =>
    !open && !small
      ? '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04) '
      : 'none'};
  @media screen and (max-width: 500px) {
    background: ${({ theme }) => transparentize(0.4, theme.bg1)};
    box-shadow: ${({ open }) =>
      !open
        ? '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04) '
        : 'none'};
  }
`
Example #16
Source File: index.js    From pine-interface with GNU General Public License v3.0 6 votes vote down vote up 
ErrorSpan = styled.span`
  margin-right: 12px;
  font-size: 0.75rem;
  line-height: 0.75rem;

  color: ${({ isError, theme }) => isError && theme.salmonRed};
  ${({ slippageWarning, highSlippageWarning, theme }) =>
    highSlippageWarning
      ? css`
          color: ${theme.salmonRed};
          font-weight: 600;
        `
      : slippageWarning &&
        css`
          background-color: ${transparentize(0.6, theme.warningYellow)};
          font-weight: 600;
          padding: 0.25rem;
        `}
`
Example #17
Source File: MutationList.styles.js    From covidcg with MIT License 6 votes vote down vote up 
MutationRowBar = styled.td`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  border-right: 10px solid ${({ barColor }) => barColor};

  grid-row: span ${({ rowSpan }) => rowSpan};

  cursor: pointer;
  transition: 0.1s all ease-in-out;

  &:hover,
  &:active {
    border-right-color: ${({ barColor }) => transparentize(0.4, barColor)};
  }
`
Example #18
Source File: index.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
ErrorSpan = styled.span`
  margin-right: 12px;
  font-size: 0.75rem;
  line-height: 0.75rem;

  color: ${({ isError, theme }) => isError && theme.salmonRed};
  ${({ slippageWarning, highSlippageWarning, theme }) =>
    highSlippageWarning
      ? css`
          color: ${theme.salmonRed};
          font-weight: 600;
        `
      : slippageWarning &&
        css`
          background-color: ${transparentize(0.6, theme.warningYellow)};
          font-weight: 600;
          padding: 0.25rem;
        `}
`
Example #19
Source File: index.js    From Smart-Swap-Protocol with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnected = styled(Web3StatusGeneric)`
  background-color: ${({ pending, theme }) => (pending ? theme.zumthorBlue : theme.inputBackground)};
  border: 1px solid ${({ pending, theme }) => (pending ? theme.royalBlue : theme.mercuryGray)};
  color: ${({ pending, theme }) => (pending ? theme.royalBlue : theme.doveGray)};
  font-weight: 400;
  :hover {
    background-color: ${({ pending, theme }) =>
      pending ? transparentize(0.9, theme.royalBlue) : darken(0.05, theme.inputBackground)};

    :focus {
      border: 1px solid
        ${({ pending, theme }) => (pending ? darken(0.1, theme.royalBlue) : darken(0.1, theme.mercuryGray))};
    }
  }
`
Example #20
Source File: index.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
StyledToggle = styled(Toggle)`
  margin-right: 24px;

  .react-switch-bg[style] {
    background-color: ${({ theme }) => darken(0.05, theme.inputBackground)} !important;
    border: 1px solid ${({ theme }) => theme.concreteGray} !important;
  }

  .react-switch-handle[style] {
    background-color: ${({ theme }) => theme.inputBackground};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.shadowColor)};
    border: 1px solid ${({ theme }) => theme.mercuryGray};
    border-color: ${({ theme }) => theme.mercuryGray} !important;
    top: 2px !important;
  }
`
Example #21
Source File: index.js    From Smart-Swap-Protocol with GNU General Public License v3.0 6 votes vote down vote up 
StyledNavLink = styled(NavLink).attrs({
  activeClassName
})`
  ${({ theme }) => theme.flexRowNoWrap}
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  border: 1px solid ${({ theme }) => transparentize(1, theme.mercuryGray)};
  flex: 1 0 auto;
  border-radius: 3rem;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  color: ${({ theme }) => theme.doveGray};
  font-size: 1rem;
  box-sizing: border-box;

  &.${activeClassName} {
    background-color: ${({ theme }) => theme.inputBackground};
    border-radius: 3rem;
    border: 1px solid ${({ theme }) => theme.mercuryGray};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadowColor)};
    box-sizing: border-box;
    font-weight: 500;
    color: ${({ theme }) => theme.royalBlue};
    :hover {
      /* border: 1px solid ${({ theme }) => darken(0.1, theme.mercuryGray)}; */
      background-color: ${({ theme }) => darken(0.01, theme.inputBackground)};
    }
  }

  :hover,
  :focus {
    color: ${({ theme }) => darken(0.1, theme.royalBlue)};
  }
`
Example #22
Source File: index.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
BetaMessage = styled.div`
  ${({ theme }) => theme.flexRowNoWrap}
  cursor: pointer;
  flex: 1 0 auto;
  align-items: center;
  position: relative;
  padding: 0.5rem 1rem;
  padding-right: 2rem;
  margin-bottom: 1rem;
  border: 1px solid ${({ theme }) => transparentize(0.6, theme.wisteriaPurple)};
  background-color: ${({ theme }) => transparentize(0.9, theme.wisteriaPurple)};
  border-radius: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: ${({ theme }) => theme.wisteriaPurple};

  &:after {
    content: '✕';
    top: 0.5rem;
    right: 1rem;
    position: absolute;
    color: ${({ theme }) => theme.wisteriaPurple};
  }
`
Example #23
Source File: docset-switcher.js    From guitar-book with MIT License 6 votes vote down vote up 
Wrapper = styled.div({
  width: '100%',
  height: '100%',
  backgroundColor: transparentize(0.5, colors.text2),
  overflow: 'auto',
  position: 'fixed',
  top: 0,
  left: 0,
  zIndex: 3,
  perspective: '1000px',
  transitionProperty: 'opacity, visibility',
  transitionDuration: '150ms',
  transitionTimingFunction: 'ease-in-out'
})
Example #24
Source File: index.js    From Smart-Swap-Protocol with GNU General Public License v3.0 6 votes vote down vote up 
BetaMessage = styled.div`
  ${({ theme }) => theme.flexRowNoWrap}
  cursor: pointer;
  flex: 1 0 auto;
  align-items: center;
  position: relative;
  padding: 0.5rem 1rem;
  padding-right: 2rem;
  margin-bottom: 1rem;
  border: 1px solid ${({ theme }) => transparentize(0.6, theme.wisteriaPurple)};
  background-color: ${({ theme }) => transparentize(0.9, theme.wisteriaPurple)};
  border-radius: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: ${({ theme }) => theme.wisteriaPurple};

  &:after {
    content: '✕';
    top: 0.5rem;
    right: 1rem;
    position: absolute;
    color: ${({ theme }) => theme.wisteriaPurple};
  }
`
Example #25
Source File: search.js    From guitar-book with MIT License 6 votes vote down vote up 
Suggestion = styled.div({
  color: 'inherit',
  background: 'none',
  textDecoration: 'none',
  padding: '20px 32px',
  borderBottom: `1px solid ${colors.divider}`,

  ':hover': {
    backgroundColor: transparentize(0.5, colors.divider),
    cursor: 'pointer'
  }
})
Example #26
Source File: index.js    From spooky-info with GNU General Public License v3.0 6 votes vote down vote up 
ButtonLight = styled(Base)`
  background-color: ${({ color, theme }) => (color ? transparentize(0.9, color) : transparentize(0.9, theme.primary1))};
  color: ${({ color, theme }) => (color ? darken(0.1, color) : theme.primary1)};

  min-width: fit-content;
  border-radius: 12px;
  white-space: nowrap;

  a {
    color: ${({ color, theme }) => (color ? darken(0.1, color) : theme.primary1)};
  }

  :hover {
    background-color: ${({ color, theme }) =>
      color ? transparentize(0.8, color) : transparentize(0.8, theme.primary1)};
  }
`
Example #27
Source File: index.js    From Smart-Swap-Protocol with GNU General Public License v3.0 6 votes vote down vote up 
StyledToggle = styled(Toggle)`
  margin-right: 24px;

  .react-switch-bg[style] {
    background-color: ${({ theme }) => darken(0.05, theme.inputBackground)} !important;
    border: 1px solid ${({ theme }) => theme.concreteGray} !important;
  }

  .react-switch-handle[style] {
    background-color: ${({ theme }) => theme.inputBackground};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.shadowColor)};
    border: 1px solid ${({ theme }) => theme.mercuryGray};
    border-color: ${({ theme }) => theme.mercuryGray} !important;
    top: 2px !important;
  }
`
Example #28
Source File: global-style.js    From ThreatMapper with Apache License 2.0 6 votes vote down vote up 
overlayWrapper = props => `
  align-items: center;
  background-color: ${transparentize(0.1, props.theme.colors.purple25)};
  border-radius: ${props.theme.borderRadius.soft};
  color: ${props.theme.scope.textTertiaryColor};
  display: flex;
  font-size: ${props.theme.fontSizes.tiny};
  justify-content: center;
  padding: 5px;
  position: fixed;
  bottom: 11px;

  button {
    ${btnOpacity(props)};
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: ${props.theme.borderRadius.soft};
    color: ${props.theme.scope.textSecondaryColor};
    cursor: pointer;
    line-height: 20px;
    padding: 1px 3px;
    outline: 0;

    i {
      font-size: ${props.theme.fontSizes.small};
      position: relative;
      top: 2px;
    }

    &:hover, &.selected {
      border: 1px solid ${props.theme.scope.textTertiaryColor};
    }

    &.active {
      & > * { ${blinkable(props)}; }
      border: 1px solid ${props.theme.scope.textTertiaryColor};
    }
  }
`
Example #29
Source File: index.js    From Smart-Swap-Protocol with GNU General Public License v3.0 6 votes vote down vote up 
ErrorSpan = styled.span`
  margin-right: 12px;
  font-size: 0.75rem;
  line-height: 0.75rem;

  color: ${({ isError, theme }) => isError && theme.salmonRed};
  ${({ slippageWarning, highSlippageWarning, theme }) =>
    highSlippageWarning
      ? css`
          color: ${theme.salmonRed};
          font-weight: 600;
        `
      : slippageWarning &&
        css`
          background-color: ${transparentize(0.6, theme.warningYellow)};
          font-weight: 600;
          padding: 0.25rem;
        `}
`