polished#lighten TypeScript Examples

The following examples show how to use polished#lighten. 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: utils.ts    From metaflow-ui with Apache License 2.0 7 votes vote down vote up 
export function lineColor(theme: DefaultTheme, grayed: boolean, state: string, isFirst: boolean): string {
  if (grayed) {
    return '#c7c7c7';
  } else {
    switch (state) {
      case 'completed':
      case 'ok':
        return !isFirst ? lighten(0.3, theme.color.bg.red) : theme.color.bg.green;
      case 'running':
        return theme.color.bg.greenLight;
      case 'pending':
        return theme.color.bg.yellow;
      case 'failed':
        return !isFirst ? lighten(0.3, theme.color.bg.red) : theme.color.bg.red;
      case 'unknown':
        return !isFirst ? lighten(0.3, theme.color.bg.dark) : theme.color.bg.dark;
      default:
        return lighten(0.5, theme.color.bg.dark);
    }
  }
}
Example #2
Source File: Main.ts    From twitch-clone with MIT License 6 votes vote down vote up 
Container = styled.main`
  margin-top: 50px;
  max-width: 1366px;

  div.loading-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;

    .loading {
      margin-top: 1rem;
      width: 50px;
      height: 50px;
      border: 5px solid var(--primary);
      border-top-color: ${lighten(0.1, 'rgb(145, 71, 255)')};
      border-radius: 50%;
      animation: ${spin} 1s linear infinite;
    }
  }
`
Example #3
Source File: index.tsx    From luaswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg2)};
  border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg3)};
  color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
  font-weight: 500;
  :hover,
  :focus {
    background-color: ${({ pending, theme }) => (pending ? darken(0.05, theme.primary1) : lighten(0.05, theme.bg2))};

    :focus {
      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg3))};
    }
  }
`
Example #4
Source File: index.tsx    From luaswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
ButtonConfirmedStyle = styled(Base)`
  background-color: ${({ theme }) => lighten(0.5, theme.green1)};
  color: ${({ theme }) => theme.green1};
  border: 1px solid ${({ theme }) => theme.green1};

  &:disabled {
    opacity: 50%;
    cursor: auto;
  }
`
Example #5
Source File: index.tsx    From sushiswap-exchange with GNU General Public License v3.0 6 votes vote down vote up 
ButtonConfirmedStyle = styled(Base)`
  background-color: ${({ theme }) => lighten(0.5, theme.green1)};
  color: ${({ theme }) => theme.green1};
  border: 1px solid ${({ theme }) => theme.green1};

  &:disabled {
    opacity: 50%;
    cursor: auto;
  }
`
Example #6
Source File: index.tsx    From forward.swaps with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg2)};
  border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg3)};
  color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
  font-weight: 500;
  :hover,
  :focus {
    background-color: ${({ pending, theme }) => (pending ? darken(0.05, theme.primary1) : lighten(0.05, theme.bg2))};

    :focus {
      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg3))};
    }
  }
`
Example #7
Source File: index.tsx    From forward.swaps with GNU General Public License v3.0 6 votes vote down vote up 
ButtonConfirmedStyle = styled(Base)`
  background-color: ${({ theme }) => lighten(0.5, theme.green1)};
  color: ${({ theme }) => theme.green1};
  border: 1px solid ${({ theme }) => theme.green1};

  &:disabled {
    opacity: 50%;
    cursor: auto;
  }
`
Example #8
Source File: themes.ts    From datart with Apache License 2.0 6 votes vote down vote up 
lightTheme = {
  bodyBackground: G10,
  componentBackground: WHITE,
  emphasisBackground: G20,
  highlightBackground: G30,
  textColor: G90,
  textColorSnd: G80,
  textColorLight: G60,
  textColorDisabled: G50,
  iconColorHover: rgba(BLACK, 0.75),
  borderColorBase: G40,
  borderColorEmphasis: G30,
  borderColorSplit: G20,
  shadow1: `0 1px 3px 0 ${rgba(lighten(0.15, BLACK), 0.1)}`,
  shadow2: `0 4px 16px 0 ${rgba(lighten(0.15, BLACK), 0.12)}`,
  shadow3: `0 12px 32px 0 ${rgba(lighten(0.15, BLACK), 0.16)}`,
  shadowSider: `0px 0 32px 0px ${rgba(G70, 0.075)}`,
  shadowBlock: `0px 0 32px 0px ${rgba(G70, 0.025)}`,
  ...common,
}
Example #9
Source File: ResetBtnWidgetCore.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
Wrapper = styled.div<FontConfig & { background: string }>`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  font: ${p =>
    `${p.fontStyle} ${p.fontWeight} ${p.fontSize}px ${p.fontFamily}`};
  color: ${p => p.color};
  cursor: pointer;
  &:hover {
    background: ${p =>
      getLuminance(p.background) > 0.5
        ? darken(0.05, p.background)
        : lighten(0.05, p.background)};
  }
`
Example #10
Source File: QueryBtnWidgetCore.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
Wrapper = styled.div<FontConfig & { background: string }>`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  font: ${p =>
    `${p.fontStyle} ${p.fontWeight} ${p.fontSize}px ${p.fontFamily}`};
  color: ${p => p.color};
  cursor: pointer;
  &:hover {
    background: ${p =>
      getLuminance(p.background) > 0.5
        ? darken(0.05, p.background)
        : lighten(0.05, p.background)};
  }
`
Example #11
Source File: ToolbarButton.tsx    From datart with Apache License 2.0 6 votes vote down vote up 
Wrapper = styled.span<ToolbarButtonProps>`
  .btn {
    color: ${p =>
      p.disabled
        ? p.theme.textColorDisabled
        : p.color || p.theme.textColorLight};

    &:hover,
    &:focus {
      color: ${p =>
        p.disabled
          ? p.theme.textColorDisabled
          : p.color || p.theme.textColorLight};
      background-color: ${p => p.theme.bodyBackground};
    }

    &:active {
      color: ${p =>
        p.disabled
          ? p.theme.textColorDisabled
          : p.color
          ? lighten(0.1, p.color)
          : p.theme.textColorSnd};
      background-color: ${p => p.theme.emphasisBackground};
    }

    .anticon {
      font-size: ${p => p.iconSize}px;
    }
  }
`
Example #12
Source File: button.tsx    From ui with GNU Affero General Public License v3.0 6 votes vote down vote up 
Styled = styled(Button)`
  background: ${(props: Props) => props.background};
  color: ${(props: Props) => props.color};
  border-color: ${(props: Props) => darken(0.1, props.background)};

  :hover {
    color: ${(props: Props) => props.highlight};
    background-color: ${(props: Props) => lighten(0.1, props.background)};
    border-color: ${(props: Props) => darken(0.1, props.highlight)};
  }
`
Example #13
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 #14
Source File: FilesystemBrowser.tsx    From flood with GNU General Public License v3.0 6 votes vote down vote up 
headerStyle = css({
  borderBottom: `1px solid ${lighten(0.43, foregroundColor)}`,
  marginBottom: '3px',
  paddingBottom: '3px',
  opacity: 0.75,
  '&:last-child': {
    marginBottom: 0,
  },
})
Example #15
Source File: index.tsx    From skeleton-web3-interface with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg2)};
  border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg3)};
  color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
  font-weight: 500;
  :hover,
  :focus {
    background-color: ${({ pending, theme }) => (pending ? darken(0.05, theme.primary1) : lighten(0.05, theme.bg2))};

    :focus {
      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg3))};
    }
  }
`
Example #16
Source File: index.tsx    From goose-frontend-amm with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
  background-color: ${({ pending, theme }) => (pending ? theme.colors.primary : theme.colors.invertedContrast)};
  border: 1px solid ${({ pending, theme }) => (pending ? theme.colors.primary : theme.colors.tertiary)};
  color: ${({ pending, theme }) => (pending ? '#FFFFFF' : theme.colors.text)};
  font-weight: 500;
  :hover,
  :focus {
    background-color: ${({ pending, theme }) =>
      pending ? darken(0.05, theme.colors.primary) : lighten(0.05, theme.colors.invertedContrast)};

    :focus {
      border: 1px solid
        ${({ pending, theme }) => (pending ? darken(0.1, theme.colors.primary) : darken(0.1, theme.colors.tertiary))};
    }
  }
`
Example #17
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 #18
Source File: index.tsx    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up 
Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg2)};
  border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg3)};
  color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
  font-weight: 500;
  :hover,
  :focus {
    background-color: ${({ pending, theme }) => (pending ? darken(0.05, theme.primary1) : lighten(0.05, theme.bg2))};

    :focus {
      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg3))};
    }
  }
`
Example #19
Source File: index.tsx    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up 
ButtonConfirmedStyle = styled(Base)`
  background-color: ${({ theme }) => lighten(0.5, theme.green1)};
  color: ${({ theme }) => theme.green1};
  border: 1px solid ${({ theme }) => theme.green1};

  &:disabled {
    opacity: 50%;
    cursor: auto;
  }
`
Example #20
Source File: styles.ts    From gobarber-web with MIT License 6 votes vote down vote up 
Container = styled.div`
  > header {
    height: 144px;
    background: #28262e;

    display: flex;
    align-items: center;

    div {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;

      svg {
        color: #999591;
        transition: color 0.3s;
      }

      a:hover {
        svg {
          color: ${lighten(0.2, '#999591')};
        }
      }
    }
  }
`
Example #21
Source File: index.tsx    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
  background-color: ${({ pending, theme }) => (pending ? theme.colors.primary1 : theme.colors.bg2)};
  border: 2px solid ${({ pending, theme }) => (pending ? theme.colors.primary1 : theme.colors.bg3)};
  color: ${({ pending, theme }) => (pending ? theme.colors.white : theme.colors.text1)};
  font-weight: 700;
  :hover,
  :focus {
    background-color: ${({ pending, theme }) =>
      pending ? darken(0.05, theme.colors.primary1) : lighten(0.05, theme.colors.bg2)};

    :focus {
      border: 2px solid
        ${({ pending, theme }) => (pending ? darken(0.1, theme.colors.primary1) : darken(0.1, theme.colors.bg3))};
    }
  }
`
Example #22
Source File: index.tsx    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
ButtonConfirmedStyle = styled(Base)`
  background-color: ${({ theme }) => lighten(0.5, theme.colors.green1)};
  color: ${({ theme }) => theme.colors.green1};
  border: 2px solid ${({ theme }) => theme.colors.green1};

  &:disabled {
    opacity: 50%;
    cursor: auto;
  }
`
Example #23
Source File: index.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up 
ButtonConfirmedStyle = styled(Base)`
  background-color: ${({ theme }) => lighten(0.5, theme.green1)};
  color: ${({ theme }) => theme.green1};
  border: 1px solid ${({ theme }) => theme.green1};

  &:disabled {
    opacity: 50%;
    cursor: auto;
  }
`
Example #24
Source File: styles.ts    From github-explorer with MIT License 6 votes vote down vote up 
StyledTab = styled(Tab)`
  ${({ theme }) => css`
    cursor: pointer;
    color: ${theme.colors["gray-dark"]};
    position: relative;
    font-size: 18px;

    &.selected-tab {
      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        margin-top: 10px;
        border-radius: 2px;
        background: ${theme.colors.dark};
      }
    }

    &:hover {
      color: ${lighten(0.20, theme.colors.dark)};
    }

    &:not(:last-of-type) {
      margin-right: 15px;
    }
  `};
`
Example #25
Source File: ScoreBar.tsx    From pola-web with MIT License 6 votes vote down vote up 
ValueBar = styled(BarComponent)<{ value?: number; animation?: IAnimation }>`
  text-align: right;

  .value-belt {
    position: absolute;
    background-color: ${lighten(0.1)(color.background.red)};
    height: 100%;
    z-index: 0;

    animation-name: ${(props) => progressValue(props.value)};
    animation-delay: ${({ animation }) => animation?.delay + 's' || 0};
    animation-duration: ${({ animation }) => animation?.duration + 's' || 0};
    animation-iteration-count: ${({ animation }) => animation?.iterations || 1};
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-play-state: running;
  }

  .label {
    right: ${padding.small};
  }
`
Example #26
Source File: index.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
  background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg2)};
  border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg3)};
  color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
  font-weight: 500;
  :hover,
  :focus {
    background-color: ${({ pending, theme }) => (pending ? darken(0.05, theme.primary1) : lighten(0.05, theme.bg2))};

    :focus {
      border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg3))};
    }
  }
`
Example #27
Source File: PeptideContext.tsx    From nextclade with MIT License 5 votes vote down vote up 
pastel = (c: string) => lighten(0.25)(desaturate(0.33)(c))
Example #28
Source File: markdown.tsx    From ui with GNU Affero General Public License v3.0 5 votes vote down vote up 
Markdown = styled(ReactMarkdown)`
  color: ${getColor};

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  div {
    color: ${getColor};
  }

  blockquote {
    color: ${(props: Props) => lighten(0.5, getColor(props))};
    padding-left: 20px;
    border-left: 10px rgba(0, 0, 0, 0.05) solid;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;

    tr {
      border-top: 1px solid ${getColor};

      th,
      td {
        padding: 6px 13px;
        border: 1px solid ${getColor};
      }
    }

    tr:nth-child(2n) {
      background: rgba(0, 0, 0, 0.05);
    }
  }
`
Example #29
Source File: LineElement.tsx    From metaflow-ui with Apache License 2.0 5 votes vote down vote up 
UnkownAnimation = (theme: DefaultTheme) => keyframes`
  0%, 100% { background: ${lighten(0.4, theme.color.bg.dark)} }
  50% { background: ${theme.color.bg.dark} }
`