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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UnkownAnimation = (theme: DefaultTheme) => keyframes`
  0%, 100% { background: ${lighten(0.4, theme.color.bg.dark)} }
  50% { background: ${theme.color.bg.dark} }
`