polished#transparentize TypeScript 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: Option.tsx    From dxvote with GNU Affero General Public License v3.0 6 votes vote down vote up 
InfoCard = styled.button`
  background-color: ${({ theme, active }) =>
    active ? theme.activeGray : theme.backgroundColor};
  padding: 1rem;
  outline: none;
  border: 1px solid;
  border-radius: 12px;
  width: 100% !important;
  : 0 4px 8px 0 ${({ theme, clickable }) =>
    clickable ? transparentize(0.95, theme.shadowColor) : 'none'};
  &:focus {
    box-shadow: 0 0 0 1px ${({ theme }) => theme.royalBlue};
  }
  border-color: ${({ theme, active }) =>
    active ? 'transparent' : theme.placeholderGray};
`
Example #2
Source File: index.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up 
PopoverContainer = styled.div<{ show: boolean }>`
  z-index: 9999;

  visibility: ${props => (props.show ? 'visible' : 'hidden')};
  opacity: ${props => (props.show ? 1 : 0)};
  transition: visibility 150ms linear, opacity 150ms linear;

  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg3};
  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
  color: ${({ theme }) => theme.text2};
  border-radius: 8px;
`
Example #3
Source File: Menu.style.ts    From design-system with Apache License 2.0 6 votes vote down vote up 
MenuItem = styled(Link).attrs(({ active }: StyledLink & { active: boolean }) => ({
	'aria-current': active ? 'page' : null,
}))`
	display: flex;
	padding: 0.5rem 1rem;
	color: ${({ active }) => (active ? tokens.colors.deepBlue[500] : 'inherit')};
	background: ${({ active }) => (active ? tokens.colors.gray[0] : 'none')};
	border-radius: ${tokens.radii.rectRadius};
	min-width: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	cursor: pointer;

	.link__icon {
		height: 2rem;
		width: 2rem;
		margin-right: 1rem;
		overflow: visible;
	}

	.link__text {
		font-weight: ${tokens.fontWeights.semiBold};
		min-width: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		border: none !important;
	}

	&:hover {
		color: ${
			// @ts-ignore
			({ active, theme }) => (active ? theme.colors.primaryColor : 'inherit')
		};
		background: ${({ active }) => transparentize(active ? 0.12 : 0.88, tokens.colors.gray[0])};
	}
`
Example #4
Source File: index.tsx    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up 
PopoverContainer = styled.div<{ show: boolean }>`
  z-index: 9999;

  visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
  opacity: ${(props) => (props.show ? 1 : 0)};
  transition: visibility 150ms linear, opacity 150ms linear;

  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg3};
  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
  color: ${({ theme }) => theme.text2};
  border-radius: 8px;
`
Example #5
Source File: index.tsx    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
PopoverContainer = styled.div<{ show: boolean }>`
  z-index: 9999;

  visibility: ${props => (props.show ? 'visible' : 'hidden')};
  opacity: ${props => (props.show ? 1 : 0)};
  transition: visibility 150ms linear, opacity 150ms linear;

  background: ${({ theme }) => theme.colors.bg2};
  border: 2px solid ${({ theme }) => theme.colors.bg3};
  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.colors.shadow1)};
  color: ${({ theme }) => theme.colors.text2};
  border-radius: 8px;
`
Example #6
Source File: styles.ts    From rocketredis with MIT License 6 votes vote down vote up 
KeyTextContainer = styled.button<KeyTextContainerProps>`
  display: flex;
  flex-direction: row;
  align-items: center;
  color: ${props => props.theme.colors.white};

  ${props =>
    !props.selected &&
    css`
      &:hover {
        color: ${props => transparentize(0.2, props.theme.colors.pink)};
      }
    `}

  ${props =>
    props.selected &&
    css`
      color: ${props.theme.colors.pink};
    `}
`
Example #7
Source File: index.tsx    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up 
PopoverContainer = styled.div<{ show: boolean }>`
  z-index: 9999;

  visibility: ${props => (props.show ? 'visible' : 'hidden')};
  opacity: ${props => (props.show ? 1 : 0)};
  transition: visibility 150ms linear, opacity 150ms linear;

  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg3};
  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
  color: ${({ theme }) => theme.text2};
  border-radius: 8px;
`
Example #8
Source File: styled.ts    From substrate-api-explorer with Apache License 2.0 6 votes vote down vote up 
Content = styled.div`
  > div {
    color: ${Colors.Mint};

    &:not(:last-of-type) {
      margin-bottom: 16px;
    }

    > strong {
      color: ${Colors.Almond};
    }

    > small {
      color: ${transparentize(0.5, Colors.White)};
    }

    > span {
      color: ${Colors.Orange};
    }
  }
`
Example #9
Source File: index.tsx    From limit-orders-lib with GNU General Public License v3.0 6 votes vote down vote up 
PopoverContainer = styled.div<{ show: boolean }>`
  z-index: 9999;
  visibility: ${(props) => (props.show ? "visible" : "hidden")};
  opacity: ${(props) => (props.show ? 1 : 0)};
  transition: visibility 150ms linear, opacity 150ms linear;
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.bg3};
  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
  color: ${({ theme }) => theme.text2};
  border-radius: 8px;
`
Example #10
Source File: index.tsx    From goose-frontend-amm with GNU General Public License v3.0 6 votes vote down vote up 
StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...rest }) => (
  <AnimatedDialogContent {...rest} />
)).attrs({
  'aria-label': 'dialog',
})`
  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
    border: 1px solid ${({ theme }) => theme.colors.invertedContrast};
    background-color: ${({ theme }) => theme.colors.invertedContrast};
    box-shadow: 0 4px 8px 0 ${transparentize(0.95, '#191326')};
    padding: 0px;
    width: 80%;
    overflow: hidden;

    align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};

    max-width: 420px;
    ${({ maxHeight }) =>
      maxHeight &&
      css`
        max-height: ${maxHeight}vh;
      `}
    ${({ minHeight }) =>
      minHeight &&
      css`
        min-height: ${minHeight}vh;
      `}
    display: flex;
    border-radius: 20px;

    ${({ theme }) => theme.mediaQueries.lg} {
      width: 65vw;
    }
    ${({ theme }) => theme.mediaQueries.sm} {
      width: 85vw;
    }
  }
`
Example #11
Source File: index.tsx    From skeleton-web3-interface with GNU General Public License v3.0 6 votes vote down vote up 
ThemedGlobalStyle = createGlobalStyle`
html {
  color: ${({ theme }) => theme.text1};
  background-color: ${({ theme }) => theme.bg2};
}

body {
  min-height: 100vh;
  background-position: 0 -30vh;
  background-repeat: no-repeat;
  background-image: ${({ theme }) =>
    `radial-gradient(50% 50% at 50% 50%, ${transparentize(0.9, theme.primary1)} 0%, ${transparentize(
      1,
      theme.bg1
    )} 100%)`};
}
`
Example #12
Source File: ArgRow.tsx    From design-system with MIT License 6 votes vote down vote up 
Type = styled.div<{ hasDescription: boolean }>(
  ({ hasDescription }) => ({
    color:
      theme.base === 'light'
        ? transparentize(0.1, theme.color.defaultText)
        : transparentize(0.2, theme.color.defaultText),
    marginTop: hasDescription ? 4 : 0,
  })
)
Example #13
Source File: styleds.tsx    From mozartfinance-swap-interface with GNU General Public License v3.0 6 votes vote down vote up 
SwapCallbackErrorInner = styled.div`
  background-color: ${({ theme }) => transparentize(0.9, theme.colors.failure)};
  border-radius: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.825rem;
  width: 100%;
  padding: 3rem 1.25rem 1rem 1rem;
  margin-top: -2rem;
  color: ${({ theme }) => theme.colors.failure};
  z-index: -1;
  p {
    padding: 0;
    margin: 0;
    font-weight: 500;
  }
`
Example #14
Source File: styleds.tsx    From pancake-swap-exchange-testnet with GNU General Public License v3.0 6 votes vote down vote up 
SwapCallbackErrorInner = styled.div`
  background-color: ${({ theme }) => transparentize(0.9, theme.colors.failure)};
  border-radius: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.825rem;
  width: 100%;
  padding: 3rem 1.25rem 1rem 1rem;
  margin-top: -2rem;
  color: ${({ theme }) => theme.colors.failure};
  z-index: -1;
  p {
    padding: 0;
    margin: 0;
    font-weight: 500;
  }
`
Example #15
Source File: styleds.tsx    From pancake-swap-testnet with MIT License 6 votes vote down vote up 
SwapCallbackErrorInner = styled.div`
  background-color: ${({ theme }) => transparentize(0.9, theme.colors.failure)};
  border-radius: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.825rem;
  width: 100%;
  padding: 3rem 1.25rem 1rem 1rem;
  margin-top: -2rem;
  color: ${({ theme }) => theme.colors.failure};
  z-index: -1;
  p {
    padding: 0;
    margin: 0;
    font-weight: 500;
  }
`
Example #16
Source File: date.input.tsx    From ui with GNU Affero General Public License v3.0 6 votes vote down vote up 
Field = styled(DatePicker)`
  color: ${(props: Props) => props.design.colors.answer};
  border-color: ${(props: Props) => props.design.colors.answer};
  background: none !important;
  border-right: none;
  border-top: none;
  border-left: none;
  border-radius: 0;
  width: 100%;

  :hover,
  :active {
    border-color: ${(props: Props) => props.design.colors.answer};
  }

  &.ant-picker {
    box-shadow: none;
  }

  .ant-picker-clear {
    background: none;
  }

  input {
    color: ${(props: Props) => props.design.colors.answer};

    ::placeholder {
      color: ${(props: Props) => transparentize(0.6, props.design.colors.answer)};
    }
  }

  .anticon {
    color: ${(props: Props) => props.design.colors.answer};
  }
`
Example #17
Source File: styleds.tsx    From panther-frontend-dex with GNU General Public License v3.0 6 votes vote down vote up 
SwapCallbackErrorInner = styled.div`
  background-color: ${({ theme }) => transparentize(0.9, theme.colors.failure)};
  border-radius: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.825rem;
  width: 100%;
  padding: 3rem 1.25rem 1rem 1rem;
  margin-top: -2rem;
  color: ${({ theme }) => theme.colors.failure};
  z-index: -1;
  p {
    padding: 0;
    margin: 0;
    font-weight: 500;
  }
`
Example #18
Source File: index.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
LoadingMask = styled.div`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${p => transparentize(0.5, p.theme.componentBackground)};
`
Example #19
Source File: styleds.tsx    From forward.swaps with GNU General Public License v3.0 6 votes vote down vote up 
SwapCallbackErrorInner = styled.div`
  background-color: ${({ theme }) => transparentize(0.9, theme.red1)};
  border-radius: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.825rem;
  width: 100%;
  padding: 3rem 1.25rem 1rem 1rem;
  margin-top: -2rem;
  color: ${({ theme }) => theme.red1};
  z-index: -1;
  p {
    padding: 0;
    margin: 0;
    font-weight: 500;
  }
`
Example #20
Source File: index.tsx    From sushiswap-exchange with GNU General Public License v3.0 6 votes vote down vote up 
Connector = styled.div<{ prevConfirmed?: boolean }>`
  width: 100%;
  height: 2px;
  background-color: ;
  background: linear-gradient(
    90deg,
    ${({ theme, prevConfirmed }) => transparentize(0.5, prevConfirmed ? theme.green1 : theme.primary1)} 0%,
    ${({ theme, prevConfirmed }) => (prevConfirmed ? theme.primary1 : theme.bg4)} 80%
  );
  opacity: 0.6;
`
Example #21
Source File: styleds.tsx    From luaswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
SwapCallbackErrorInner = styled.div`
  background-color: ${({ theme }) => transparentize(0.9, theme.red1)};
  border-radius: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.825rem;
  width: 100%;
  padding: 3rem 1.25rem 1rem 1rem;
  margin-top: -2rem;
  color: ${({ theme }) => theme.red1};
  z-index: -1;
  p {
    padding: 0;
    margin: 0;
    font-weight: 500;
  }
`
Example #22
Source File: MenuBar.tsx    From dxvote with GNU Affero General Public License v3.0 5 votes vote down vote up 
Divider = styled.div`
  background-color: ${({ theme }) => transparentize(0.9, theme.colors.primary)};
  height: 1.25rem;
  margin-left: 0.5rem;
  margin-right: 0.75rem;
  width: 2px;
`
Example #23
Source File: index.tsx    From cuiswap with GNU General Public License v3.0 5 votes vote down vote up 
StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...rest }) => (
  <AnimatedDialogContent {...rest} />
)).attrs({
  'aria-label': 'dialog'
})`
  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
    border: 1px solid ${({ theme }) => theme.bg1};
    background-color: ${({ theme }) => theme.bg1};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
    padding: 0px;
    width: 50vw;

    align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};

    max-width: 420px;
    ${({ maxHeight }) =>
      maxHeight &&
      css`
        max-height: ${maxHeight}vh;
      `}
    ${({ minHeight }) =>
      minHeight &&
      css`
        min-height: ${minHeight}vh;
      `}
    display: flex;
    border-radius: 20px;
    ${({ theme }) => theme.mediaWidth.upToMedium`
      width: 65vw;
      margin: 0;
    `}
    ${({ theme, mobile }) => theme.mediaWidth.upToSmall`
      width:  85vw;
      ${mobile &&
        css`
          width: 100vw;
          border-radius: 20px;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        `}
    `}
  }
`
Example #24
Source File: HeaderBar.style.ts    From design-system with Apache License 2.0 5 votes vote down vote up 
Item = styled.span.attrs({
	className: 'header-bar__item',
})<{ freeze: boolean }>`
	padding: 0 1.5rem;
	transition: ${tokens.transitions.fast};

	&:hover {
		background: ${({ freeze }) => (freeze ? 'none' : transparentize(0.8, tokens.colors.gray[0]))};
	}

	&:active {
		background: ${({ freeze }) => (freeze ? 'none' : transparentize(0.9, tokens.colors.gray[0]))};
	}

	&,
	> .link,
	> .btn:not(.btn--small),
	> .text {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 4.8rem;
	}

	> .link,
	> .btn:not(.btn--small),
	> .text {
		padding: 0;

		&,
		&:hover,
		&:focus,
		&:active {
			color: ${tokens.colors.gray[0]};
		}
	}

	.btn:not(.btn--small) {
		border: none;
		border-radius: 0;
	}

	.link:hover {
		.link__text {
			text-decoration: none;
		}
	}

	[role='menuitem'] {
		display: flex;
		align-items: center;
		padding: 0.5rem 1rem;

		&:hover,
		&:focus,
		&:active {
			color: ${tokens.colors.gray[900]};
			background: ${tokens.colors.paleCyan[100]};
		}
	}

	@media only screen and (max-width: ${tokens.breakpoints.l}) {
		flex-direction: column;
		align-items: start;
	}
`
Example #25
Source File: index.tsx    From sybil-interface with GNU General Public License v3.0 5 votes vote down vote up 
StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...rest }) => (
  <AnimatedDialogContent {...rest} />
)).attrs({
  'aria-label': 'dialog',
})`
  overflow-y: ${({ mobile }) => (mobile ? 'scroll' : 'hidden')};

  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
    background-color: ${({ theme }) => theme.bg1};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
    padding: 0px;
    width: 50vw;
    border-radius: 12px;
    overflow-y: ${({ mobile }) => (mobile ? 'scroll' : 'hidden')};
    overflow-x: hidden;

    align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};

    max-width: 420px;
    ${({ maxHeight }) =>
      maxHeight &&
      css`
        max-height: ${maxHeight}vh;
      `}
    ${({ minHeight }) =>
      minHeight &&
      css`
        min-height: ${minHeight}vh;
      `}
    display: flex;
    ${({ theme }) => theme.mediaWidth.upToMedium`
      width: 65vw;
      margin: 0;
    `}
    ${({ theme, mobile }) => theme.mediaWidth.upToSmall`
      width:  85vw;
      ${
        mobile &&
        css`
          width: 100vw;
          border-radius: 20px;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        `
      }
    `}
  }
`
Example #26
Source File: index.tsx    From cheeseswap-interface with GNU General Public License v3.0 5 votes vote down vote up 
StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...rest }) => (
  <AnimatedDialogContent {...rest} />
)).attrs({
  'aria-label': 'dialog'
})`
  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
    border: 2px solid ${({ theme }) => theme.colors.bg1};
    background-color: ${({ theme }) => theme.colors.bg1};
    box-shadow: -2 4px 8px -1 ${({ theme }) => transparentize(0.95, theme.colors.shadow1)};
    padding: 0px;
    width: 50vw;
    overflow: hidden;

    align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};

    max-width: 420px;
    ${({ maxHeight }) =>
      maxHeight &&
      css`
        max-height: ${maxHeight}vh;
      `}
    ${({ minHeight }) =>
      minHeight &&
      css`
        min-height: ${minHeight}vh;
      `}
    display: flex;
    border-radius: 20px;
    ${({ theme }) => theme.mediaWidth.upToMedium`
      width: 65vw;
      margin: 0;
    `}
    ${({ theme, mobile }) => theme.mediaWidth.upToSmall`
      width:  85vw;
      ${mobile &&
        css`
          width: 100vw;
          border-radius: 20px;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        `}
    `}
  }
`
Example #27
Source File: index.tsx    From dyp with Do What The F*ck You Want To Public License 5 votes vote down vote up 
StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...rest }) => (
  <AnimatedDialogContent {...rest} />
)).attrs({
  'aria-label': 'dialog'
})`
  overflow-y: ${({ mobile }) => (mobile ? 'scroll' : 'hidden')};

  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
    background-color: ${({ theme }) => theme.bg1};
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
    padding: 0px;
    width: 50vw;
    overflow-y: ${({ mobile }) => (mobile ? 'scroll' : 'hidden')};
    overflow-x: hidden;

    align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};

    max-width: 420px;
    ${({ maxHeight }) =>
      maxHeight &&
      css`
        max-height: ${maxHeight}vh;
      `}
    ${({ minHeight }) =>
      minHeight &&
      css`
        min-height: ${minHeight}vh;
      `}
    display: flex;
    border-radius: 20px;
    ${({ theme }) => theme.mediaWidth.upToMedium`
      width: 65vw;
      margin: 0;
    `}
    ${({ theme, mobile }) => theme.mediaWidth.upToSmall`
      width:  85vw;
      ${mobile &&
        css`
          width: 100vw;
          border-radius: 20px;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        `}
    `}
  }
`
Example #28
Source File: styled.ts    From substrate-api-explorer with Apache License 2.0 5 votes vote down vote up 
JSONPath = styled.div`
  max-width: 100%;
  margin-bottom: 4px;
  font-family: 'Roboto Mono', sans-serif;
  color: ${transparentize(0.5, Colors.White)};
  overflow-wrap: break-word;
`
Example #29
Source File: index.tsx    From limit-orders-lib with GNU General Public License v3.0 5 votes vote down vote up 
StyledDialogContent = styled(({ ...rest }) => (
  <AnimatedDialogContent {...rest} />
)).attrs({
  "aria-label": "dialog",
})`
  overflow-y: ${({ mobile }) => (mobile ? "scroll" : "hidden")};

  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
    background-color: ${({ theme }) => theme.bg0};
    border: 1px solid ${({ theme }) => theme.bg1};
    box-shadow: 0 4px 8px 0
      ${({ theme }) => transparentize(0.95, theme.shadow1)};
    padding: 0px;
    width: 50vw;
    overflow-y: ${({ mobile }) => (mobile ? "scroll" : "hidden")};
    overflow-x: hidden;

    align-self: ${({ mobile }) => (mobile ? "flex-end" : "center")};

    max-width: 420px;
    ${({ maxHeight }) =>
      maxHeight &&
      css`
        max-height: ${maxHeight}vh;
      `}
    ${({ minHeight }) =>
      minHeight &&
      css`
        min-height: ${minHeight}vh;
      `}
    display: flex;
    border-radius: 20px;
    ${({ theme }) => theme.mediaWidth.upToMedium`
      width: 65vw;
      margin: 0;
    `}
    ${({ theme, mobile }) => theme.mediaWidth.upToSmall`
      width:  85vw;
      ${
        mobile &&
        css`
          width: 100vw;
          border-radius: 20px;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        `
      }
    `}
  }
`