polished#darken TypeScript Examples

The following examples show how to use polished#darken. 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: Button.ts    From twitch-clone with MIT License 6 votes vote down vote up 
Container = styled.button<ButtonProps>`
  color: #fff;
  font-weight: bold;
  padding: 0.5rem;
  margin: 0 0.5rem;
  border-radius: 4px;
  display: grid;
  place-content: center;
  font-size: 13px;

  ${(props) =>
    props.buttonType === 'primary'
      ? css`
          background-color: var(--primary);

          :hover {
            background-color: ${darken(0.1, 'rgb(145, 71, 255)')};
          }
        `
      : css`
          background-color: #3a3a3d;
          :hover {
            background-color: ${lighten(0.1, '#3a3a3d')};
          }
        `};
`
Example #2
Source File: index.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up 
ButtonPrimary = styled(Base)`
  background-color: ${({ theme }) => theme.primary1};
  color: white;
  &:focus {
    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.primary1)};
    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:hover {
    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:active {
    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary1)};
    background-color: ${({ theme }) => darken(0.1, theme.primary1)};
  }
  &:disabled {
    background-color: ${({ theme, altDisbaledStyle }) => (altDisbaledStyle ? theme.primary1 : theme.bg3)};
    color: ${({ theme, altDisbaledStyle }) => (altDisbaledStyle ? 'white' : theme.text3)};
    cursor: auto;
    box-shadow: none;
    border: 1px solid transparent;
    outline: none;
  }
`
Example #3
Source File: index.tsx    From metaflow-ui with Apache License 2.0 6 votes vote down vote up 
getButtonColors = (variant: ButtonColors) => css`
  background: ${variant.bg};
  color: ${variant.text};

  ${variant.border && `border: ${variant.border};`}

  &:hover {
    background: ${(p) => (variant.bg === 'transparent' ? p.theme.color.bg.light : darken(0.05, variant.bg))};
  }

  &:active {
    background: ${darken(0.1, variant.bg === 'transparent' ? '#fff' : variant.bg)};
  }

  &.active {
    background: ${variant.activeBg};
    color: ${variant.activeText};
  }
`
Example #4
Source File: index.tsx    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up 
ButtonPrimary = styled(Base)`
  background-color: ${({ theme }) => theme.primary1};
  color: white;
  font-size: 20px;
  &:focus {
    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.primary1)};
    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:hover {
    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:active {
    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary1)};
    background-color: ${({ theme }) => darken(0.1, theme.primary1)};
  }
  &:disabled {
    background-color: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? theme.primary1 : theme.bg3)};
    color: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? 'white' : theme.text3)};
    cursor: auto;
    box-shadow: none;
    border: 1px solid transparent;
    outline: none;
    opacity: ${({ altDisabledStyle }) => (altDisabledStyle ? '0.7' : '1')};
  }
`
Example #5
Source File: index.tsx    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
ButtonPrimary = styled(Base)`
  background: ${({ theme }) => theme.gradient};
  color: ${({ theme }) => theme.colors.buttonText};
  &:focus {
    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.colors.primary1)};
  }
  &:active {
    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.colors.primary1)};
  }
  &:disabled {
    background: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? theme.gradient : theme.colors.bg3)};
    color: ${({ theme, altDisabledStyle }) => (altDisabledStyle ? 'white' : theme.colors.text3)};
    cursor: auto;
    box-shadow: none;
    border: 2px solid transparent;
    outline: none;
    opacity: ${({ altDisabledStyle }) => (altDisabledStyle ? '0.7' : '1')};
  }
`
Example #6
Source File: index.tsx    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up 
Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
  background-color: ${({ theme }) => theme.primary4};
  border: none;
  color: ${({ theme }) => theme.primaryText1};
  font-weight: 500;

  :hover,
  :focus {
    border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
    color: ${({ theme }) => theme.primaryText1};
  }

  ${({ faded }) =>
    faded &&
    css`
      background-color: ${({ theme }) => theme.white};
      border: 1px solid ${({ theme }) => theme.red};
      color: ${({ theme }) => theme.black};

      :hover,
      :focus {
        background-color: ${({ theme }) => theme.red};
        border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
        color: ${({ theme }) => darken(0.05, theme.black)};
      }
    `}
`
Example #7
Source File: index.tsx    From limit-orders-lib with GNU General Public License v3.0 6 votes vote down vote up 
ButtonPrimary = styled(Base)`
  background-color: ${({ theme }) => theme.primary1};
  color: white;
  &:focus {
    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.primary1)};
    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:hover {
    background-color: ${({ theme }) => darken(0.05, theme.primary1)};
  }
  &:active {
    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary1)};
    background-color: ${({ theme }) => darken(0.1, theme.primary1)};
  }
  &:disabled {
    background-color: ${({ theme, altDisabledStyle, disabled }) =>
      altDisabledStyle
        ? disabled
          ? theme.primary1
          : theme.primary1
        : theme.primary1};
    color: white;
    cursor: auto;
    box-shadow: none;
    border: 1px solid transparent;
    outline: none;
    opacity: 0.4;
    opacity: ${({ altDisabledStyle }) => (altDisabledStyle ? "0.5" : "0.4")};
  }
`
Example #8
Source File: index.tsx    From goose-frontend-amm with GNU General Public License v3.0 6 votes vote down vote up 
CurrencySelect = styled.button<{ selected: boolean }>`
  align-items: center;
  height: 34px;
  font-size: 16px;
  font-weight: 500;
  background-color: transparent;
  color: ${({ selected, theme }) => (selected ? theme.colors.text : '#FFFFFF')};
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  user-select: none;
  border: none;
  padding: 0 0.5rem;

  :focus,
  :hover {
    background-color: ${({ theme }) => darken(0.05, theme.colors.input)};
  }
`
Example #9
Source File: index.tsx    From skeleton-web3-interface with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusError = styled(Web3StatusGeneric)`
  background-color: ${({ theme }) => theme.red1};
  border: 1px solid ${({ theme }) => theme.red1};
  color: ${({ theme }) => theme.white};
  font-weight: 500;
  :hover,
  :focus {
    background-color: ${({ theme }) => darken(0.1, theme.red1)};
  }
`
Example #10
Source File: Table.tsx    From design-system with MIT License 6 votes vote down vote up 
ResetButton = styled.button(({ theme }) => ({
  border: 0,
  borderRadius: '3em',
  cursor: 'pointer',
  display: 'inline-block',
  overflow: 'hidden',
  padding: '3px 8px',
  transition: 'all 150ms ease-out',
  verticalAlign: 'top',
  userSelect: 'none',
  margin: 0,

  backgroundColor:
    theme.base === 'light' ? '#EAF3FC' : theme.color.border,
  boxShadow:
    theme.base === 'light'
      ? `${theme.color.border} 0 0 0 1px inset`
      : `${theme.color.darker}  0 0 0 1px inset`,
  color: theme.color.secondary,

  '&:hover': {
    background:
      theme.base === 'light'
        ? darken(0.03, '#EAF3FC')
        : opacify(0.1, theme.color.border),
  },

  '&:focus': {
    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
    outline: 'none',
  },

  svg: {
    display: 'block',
    height: 14,
    width: 14,
  },
}))
Example #11
Source File: FilesystemBrowser.tsx    From flood with GNU General Public License v3.0 6 votes vote down vote up 
listItemActiveStyle = css({
  color: saturate(0.1, darken(0.15, foregroundColor)),
  background: rgba(foregroundColor, 0.1),
  button: {
    ':focus': {
      outline: 'none',
      WebkitTapHighlightColor: 'transparent',
    },
  },
})
Example #12
Source File: index.tsx    From mozartfinance-swap-interface with GNU General Public License v3.0 6 votes vote down vote up 
CurrencySelect = styled.button<{ selected: boolean }>`
  align-items: center;
  height: 34px;
  font-size: 16px;
  font-weight: 500;
  background-color: transparent;
  color: ${({ selected, theme }) => (selected ? theme.colors.text : '#FFFFFF')};
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  user-select: none;
  border: none;
  padding: 0 0.5rem;
  :focus,
  :hover {
    background-color: ${({ theme }) => darken(0.05, theme.colors.input)};
  }
`
Example #13
Source File: index.tsx    From pancake-swap-exchange-testnet with GNU General Public License v3.0 6 votes vote down vote up 
CurrencySelect = styled.button<{ selected: boolean }>`
  align-items: center;
  height: 34px;
  font-size: 16px;
  font-weight: 500;
  background-color: transparent;
  color: ${({ selected, theme }) => (selected ? theme.colors.text : '#FFFFFF')};
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  user-select: none;
  border: none;
  padding: 0 0.5rem;
  :focus,
  :hover {
    background-color: ${({ theme }) => darken(0.05, theme.colors.input)};
  }
`
Example #14
Source File: index.tsx    From pancake-swap-testnet with MIT License 6 votes vote down vote up 
CurrencySelect = styled.button<{ selected: boolean }>`
  align-items: center;
  height: 34px;
  font-size: 16px;
  font-weight: 500;
  background-color: transparent;
  color: ${({ selected, theme }) => (selected ? theme.colors.text : '#FFFFFF')};
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  user-select: none;
  border: none;
  padding: 0 0.5rem;
  :focus,
  :hover {
    background-color: ${({ theme }) => darken(0.05, theme.colors.input)};
  }
`
Example #15
Source File: index.tsx    From ui with GNU Affero General Public License v3.0 6 votes vote down vote up 
MyCard = styled.div<{ background: string }>`
  background: ${(props) => darken(0.1, props.background)};
  height: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);

  padding: 32px;

  .ant-card {
    background: ${(props) => props.background};
    border-color: ${(props) => lighten(0.4, props.background)};
    width: 800px;
    margin: auto;
    max-width: 90%;
  }
`
Example #16
Source File: index.tsx    From panther-frontend-dex with GNU General Public License v3.0 6 votes vote down vote up 
CurrencySelect = styled.button<{ selected: boolean }>`
  align-items: center;
  height: 34px;
  font-size: 16px;
  font-weight: 500;
  background-color: transparent;
  color: ${({ selected, theme }) => (selected ? theme.colors.text : '#FFFFFF')};
  border-radius: 12px;
  outline: none;
  cursor: pointer;
  user-select: none;
  border: none;
  padding: 0 0.5rem;

  :focus,
  :hover {
    background-color: ${({ theme }) => darken(0.05, theme.colors.input)};
  }
`