polished#shade TypeScript Examples

The following examples show how to use polished#shade. 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: styles.ts    From gobarber-project with MIT License 6 votes vote down vote up 
Container = styled.button`
  background: #ff9000;
  height: 56px;
  border-radius: 10px;
  border: 0;
  padding: 0 16px;
  color: #312e38;
  width: 100%;
  font-weight: 500;
  margin-top: 16px;
  transition: background-color 0.2s;
  &:hover {
    background: ${shade(0.2, '#ff9000')};
  }
`
Example #2
Source File: useColor.ts    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up 
async function getColorFromToken(token: Token): Promise<string | null> {
  if (token.chainId === ChainId.RINKEBY && token.address === '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735') {
    return Promise.resolve('#FAAB14')
  }

  const path = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${token.address}/logo.png`

  return Vibrant.from(path)
    .getPalette()
    .then((palette) => {
      if (palette?.Vibrant) {
        let detectedHex = palette.Vibrant.hex
        let AAscore = hex(detectedHex, '#FFF')
        while (AAscore < 3) {
          detectedHex = shade(0.005, detectedHex)
          AAscore = hex(detectedHex, '#FFF')
        }
        return detectedHex
      }
      return null
    })
    .catch(() => null)
}
Example #3
Source File: theme.ts    From rocketredis with MIT License 6 votes vote down vote up 
defaultTheme = {
  colors: {
    white: '#E1E1E6',
    grey: shade(0.3, '#E1E1E6'),
    opaque: '#41414D',
    purple: '#6633cc',
    purpleDark: '#5A4B81',
    green: '#67e480',
    orange: '#E89E64',
    pink: '#FF79C6',
    cyan: '#78D1E1',
    red: '#E96379',
    yellow: '#e7de79'
  },
  backgrounds: {
    lightest: '#252131',
    lighter: '#201B2D',
    dark: '#191622',
    darker: '#15121E',
    darkest: '#13111B'
  }
}
Example #4
Source File: styles.ts    From gobarber-web with MIT License 6 votes vote down vote up 
Container = styled.button<ContainerProps>`
  background: #ff9000;
  height: 56px;
  border-radius: 10px;
  border: 0;
  padding: 0 16px;
  color: #312e38;
  width: 100%;
  font-weight: 500;
  margin-top: 16px;
  transition: background-color 0.3s;

  &:hover {
    background: ${shade(0.2, '#ff9000')};
  }

  cursor: ${({ isLoading }) => (isLoading ? 'not-allowed' : 'pointer')};
`
Example #5
Source File: useColor.ts    From limit-orders-lib with GNU General Public License v3.0 6 votes vote down vote up 
async function getColorFromToken(token: Token): Promise<string | null> {
  if (token.chainId !== 1) {
    return Promise.resolve("#FAAB14");
  }

  const path = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${token.address}/logo.png`;

  return Vibrant.from(path)
    .getPalette()
    .then((palette) => {
      if (palette?.Vibrant) {
        let detectedHex = palette.Vibrant.hex;
        let AAscore = hex(detectedHex, "#FFF");
        while (AAscore < 3) {
          detectedHex = shade(0.005, detectedHex);
          AAscore = hex(detectedHex, "#FFF");
        }
        return detectedHex + "20";
      }
      return null;
    })
    .catch(() => null);
}
Example #6
Source File: styles.ts    From vagasExplorer with MIT License 6 votes vote down vote up 
Container = styled.button`
  background: #3a3a3a;
  border-radius: 10px;
  border: 0;
  padding: 16px;
  color: #f0f0f5;
  width: 240px;
  font-weight: 500;
  margin-top: 16px;
  transition: background-color 0.2s;
  &:hover {
    background: ${shade(0.2, '#3A3A3A')};
  }
`
Example #7
Source File: styles.ts    From vagasExplorer with MIT License 6 votes vote down vote up 
Footer = styled.footer`
  grid-area: footer;

  display: flex;
  align-items: center;
  justify-content: center;

  span {
    margin: 0 5px;
  }

  a {
    text-decoration: none;
    color: #3a3a3a;
    font-weight: bold;
    transition: all 0.2s ease-in-out;

    &:hover {
      color: ${shade(0.2, '#3A3A3A')};
    }
  }
`
Example #8
Source File: index.tsx    From vagasExplorer with MIT License 6 votes vote down vote up 
Header: React.FC<HeaderProps> = ({ isLink, toggleTheme }) => {
  const { colors, title } = useContext(ThemeContext);
  return (
    <S.Container>
      <S.LogoContainer>
        <S.LogoImage>
          <Logo isDark={title === 'dark'} />
        </S.LogoImage>
        <h1>vagasExplorer</h1>
      </S.LogoContainer>
      <Switch
        onChange={toggleTheme}
        checked={title === 'dark'}
        checkedIcon={false}
        uncheckedIcon={false}
        height={10}
        width={40}
        handleDiameter={20}
        offColor={shade(0.15, colors.primary)}
        onColor={colors.secundary}
      />
      <S.ActionContainer>
        {isLink && (
          <Link to={isLink}>
            <S.IconBack />
            Voltar
          </Link>
        )}
      </S.ActionContainer>
    </S.Container>
  );
}
Example #9
Source File: styles.ts    From vagasExplorer with MIT License 6 votes vote down vote up 
Footer = styled.footer`
  grid-area: footer;

  display: flex;
  align-items: center;
  justify-content: center;

  a {
    text-decoration: none;
    margin-left: 10px;
    color: #3a3a3a;
    font-weight: bold;
    transition: all 0.2s ease-in-out;

    &:hover {
      color: ${shade(0.2, '#3A3A3A')};
    }
  }
`
Example #10
Source File: useColor.ts    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up 
async function getColorFromToken(token: Token): Promise<string | null> {
  if (token.chainId === ChainId.RINKEBY && token.address === '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735') {
    return Promise.resolve('#FAAB14')
  }

  const path = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${token.address}/logo.png`

  return Vibrant.from(path)
    .getPalette()
    .then(palette => {
      if (palette?.Vibrant) {
        let detectedHex = palette.Vibrant.hex
        let AAscore = hex(detectedHex, '#FFF')
        while (AAscore < 3) {
          detectedHex = shade(0.005, detectedHex)
          AAscore = hex(detectedHex, '#FFF')
        }
        return detectedHex
      }
      return null
    })
    .catch(() => null)
}
Example #11
Source File: styles.ts    From gobarber-project with MIT License 6 votes vote down vote up 
Content = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -176px auto 0;
  width: 100%;
  form {
    margin: 80px 0;
    width: 340px;
    text-align: center;
    display: flex;
    flex-direction: column;
    h1 {
      margin-bottom: 24px;
      font-size: 20px;
      text-align: left;
    }
    a {
      color: #f4ede8;
      display: block;
      margin-top: 24px;
      text-decoration: none;
      transition: color 0.2s;
      &:hover {
        color: ${shade(0.2, '#f4ede8')};
      }
    }
    input[name='old_password'] {
      margin-top: 24px;
    }
  }
`
Example #12
Source File: styles.ts    From gobarber-project with MIT License 6 votes vote down vote up 
AvatarInput = styled.div`
  margin-bottom: 32px;
  position: relative;
  align-self: center;
  img {
    width: 186px;
    height: 186px;
    border-radius: 50%;
  }
  label {
    position: absolute;
    width: 48px;
    height: 48px;
    background: #ff9000;
    border-radius: 50%;
    right: 0;
    bottom: 0;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    input {
      display: none;
    }
    svg {
      width: 20px;
      height: 20px;
      color: #312e38;
    }
    &:hover {
      background: ${shade(0.2, '#ff9000')};
    }
  }
`
Example #13
Source File: styles.ts    From GoBarber with MIT License 6 votes vote down vote up 
Container = styled.button`
  background: #ff9000;
  color: #312e38;
  height: 56px;
  border-radius: 10px;
  border: 0;
  padding: 0 16px;
  width: 100%;
  font-weight: 500;
  margin-top: 16px;
  transition: background-color 0.2s;

  &:hover {
    background-color: ${shade(0.2, '#ff9000')};
  }
`
Example #14
Source File: MutationBadge.tsx    From nextclade with MIT License 6 votes vote down vote up 
export function NucleotideMutationBadge({ mutation }: NucleotideMutationBadgeProps) {
  const theme = useTheme()
  const { refNuc, pos, queryNuc } = mutation

  const refBg = shade(0.25)(getNucleotideColor(refNuc))
  const refFg = getTextColor(theme, refBg)
  const queryBg = shade(0.25)(getNucleotideColor(queryNuc))
  const queryFg = getTextColor(theme, queryBg)
  const posOneBased = pos + 1

  return (
    <MutationBadgeBox>
      <MutationWrapper>
        {refNuc && (
          <ColoredText $background={refBg} $color={refFg}>
            {refNuc}
          </ColoredText>
        )}
        {pos && <PositionText>{posOneBased}</PositionText>}
        {queryNuc && (
          <ColoredText $background={queryBg} $color={queryFg}>
            {queryNuc}
          </ColoredText>
        )}
      </MutationWrapper>
    </MutationBadgeBox>
  )
}
Example #15
Source File: ListOfInsertions.tsx    From nextclade with MIT License 6 votes vote down vote up 
export function InsertedCharacter({ letter, isAminoacid }: InsertedCharacterProps) {
  const { bg, fg } = useMemo(() => {
    const color = isAminoacid ? getAminoacidColor(letter as Aminoacid) : getNucleotideColor(letter as Nucleotide)
    const bg = shade(0.33)(color)
    const fg = getTextColor(theme, bg)
    return { bg, fg }
  }, [isAminoacid, letter])
  return (
    <InsertedLetterColored $bg={bg} $fg={fg}>
      {letter}
    </InsertedLetterColored>
  )
}
Example #16
Source File: useColor.ts    From forward.swaps with GNU General Public License v3.0 6 votes vote down vote up 
async function getColorFromToken(token: Token): Promise<string | null> {
  if (token.chainId === ChainId.RINKEBY && token.address === '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735') {
    return Promise.resolve('#FAAB14')
  }

  const path = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${token.address}/logo.png`

  return Vibrant.from(path)
    .getPalette()
    .then(palette => {
      if (palette?.Vibrant) {
        let detectedHex = palette.Vibrant.hex
        let AAscore = hex(detectedHex, '#FFF')
        while (AAscore < 3) {
          detectedHex = shade(0.005, detectedHex)
          AAscore = hex(detectedHex, '#FFF')
        }
        return detectedHex
      }
      return null
    })
    .catch(() => null)
}
Example #17
Source File: useColor.ts    From luaswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
async function getColorFromToken(token: Token): Promise<string | null> {
  if (token.chainId === ChainId.RINKEBY && token.address === '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735') {
    return Promise.resolve('#FAAB14')
  }
  const IsTomo = IsTomoChain(token.chainId)
  let path
  if (IsTomo) {
    path = `https://raw.githubusercontent.com/tomochain/luaswap-token-list/${commit_hash}/src/tokens/icons/tomochain/${token.address}.png`
  } else {
    path = `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${token.address}/logo.png`
  }

  return Vibrant.from(path)
    .getPalette()
    .then(palette => {
      if (palette?.Vibrant) {
        let detectedHex = palette.Vibrant.hex
        let AAscore = hex(detectedHex, '#FFF')
        while (AAscore < 3) {
          detectedHex = shade(0.005, detectedHex)
          AAscore = hex(detectedHex, '#FFF')
        }
        return detectedHex
      }
      return null
    })
    .catch(() => null)
}
Example #18
Source File: styles.ts    From front-entenda-direito with GNU General Public License v3.0 6 votes vote down vote up 
Content = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -174px auto 0;

  width: 100%;

  form {
    margin: 80px 0;
    width: 340px;
    text-align: center;
    display: flex;
    flex-direction: column;

    h1 {
      margin-bottom: 24px;
      font-size: 20px;
      text-align: left;
    }

    a {
      color: #f4ede8;
      display: block;
      margin-top: 24px;
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: ${shade(0.2, '#f4ede8')};
      }
    }
  }
`
Example #19
Source File: styles.ts    From front-entenda-direito with GNU General Public License v3.0 6 votes vote down vote up 
Container = styled.div`
  height: 100vh;

  > header {
    height: 144px;
    background: ${shade(0.2, '#0d0c3b')};

    display: flex;
    align-items: center;

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

      svg {
        color: #ffbd4a;
        width: 24px;
        height: 24px;
      }
    }
  }
`
Example #20
Source File: styles.ts    From gobarber-web with MIT License 6 votes vote down vote up 
AnimationContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  animation: ${appearFromRight} 1s;

  form {
    margin: 80px 0;
    width: 340px;
    text-align: center;

    h1 {
      margin-bottom: 24px;
    }
  }

  > a {
    color: #ff9000;
    display: block;
    margin-top: 24px;
    text-decoration: none;
    transition: color 0.3s;

    display: flex;
    align-items: center;

    svg {
      margin-right: 16px;
    }

    &:hover {
      color: ${shade(0.2, '#ff9000')};
    }
  }
`
Example #21
Source File: styles.ts    From front-entenda-direito with GNU General Public License v3.0 6 votes vote down vote up 
Container = styled.button`
  background: #ffbd4a;
  height: 56px;
  border-radius: 10px;
  border: 0;
  padding: 16px;
  color: #0d0c3b;
  width: 100%;
  font-weight: 500;
  margin-top: 16px;
  transition: background-color 0.2s;

  &:hover {
    background: ${shade(0.2, '#ffbd4a')};
  }
`
Example #22
Source File: colors.tokens.ts    From design-system with Apache License 2.0 6 votes vote down vote up 
function getColorSwatch(color: string): ColorSwatch {
	return {
		900: shade(0.8, color),
		800: shade(0.6, color),
		700: shade(0.4, color),
		600: shade(0.2, color),
		500: color,
		400: tint(0.2, color),
		300: tint(0.4, color),
		200: tint(0.6, color),
		100: tint(0.8, color),
	};
}
Example #23
Source File: styles.ts    From rocketseat-gostack-11-desafios with MIT License 6 votes vote down vote up 
Footer = styled.section`
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  p {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 18px;
    color: #969cb3;

    img {
      margin-right: 5px;
    }
  }

  button {
    background: #ff872c;
    color: #fff;
    border-radius: 5px;
    padding: 15px 80px;
    border: 0;
    transition: background-color 0.2s;

    &:hover {
      background: ${shade(0.2, '#ff872c')};
    }
  }
`
Example #24
Source File: styles.ts    From github-explorer with MIT License 6 votes vote down vote up 
StyledButton = styled.button`
  ${({ theme }) => css`
    width: 210px;
    height: 70px;
    background: ${theme.colors.green};
    border: 0;
    color: ${theme.colors.white};
    font-weight: bold;
    transition: background-color 0.2s;

    ${media.lessThan("medium")`
      width: 100%;
    `}

    &:hover {
      background: ${shade(0.2, theme.colors.green)};
    }
  `}
`
Example #25
Source File: styles.ts    From gobarber-project with MIT License 5 votes vote down vote up 
Calender = styled.aside`
  width: 380px;
  .DayPicker {
    background: #28262e;
    border-radius: 10px;
  }
  .DayPicker-wrapper {
    padding-bottom: 0;
  }
  .DayPicker,
  .DayPicker-Month {
    width: 100%;
  }
  .DayPicker-Month {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 16px;
  }
  .DayPicker-Day {
    width: 40px;
    height: 40px;
  }
  .DayPicker-Day--available:not(.DayPicker-Day--outside) {
    background: #3e3b47;
    border-radius: 10px;
    color: #fff;
  }
  .DayPicker:not(.DayPicker--interactionDisabled)
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
    background: ${shade(0.2, '#3e3b47')};
  }
  .DayPicker-Day--today {
    font-weight: normal;
  }
  .DayPicker-Day--disabled {
    color: #666360 !important;
    background: transparent !important;
  }
  .DayPicker-Day--selected {
    background: #ff9000 !important;
    border-radius: 10px;
    color: #232129 !important;
  }
`
Example #26
Source File: styles.ts    From gobarber-web with MIT License 5 votes vote down vote up 
Calendar = styled.aside`
  width: 380px;

  .DayPicker {
    background: #28262e;
    border-radius: 10px;
  }

  .DayPicker-wrapper {
    padding-bottom: 0;
  }

  .DayPicker,
  .DayPicker-Month {
    width: 100%;
  }

  .DayPicker-Month {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 16px;
  }

  .DayPicker-Day {
    width: 40px;
    height: 40px;
  }

  .DayPicker-Day--available:not(.DayPicker-Day--outside) {
    background: #3e3b47;
    border-radius: 10px;
    color: #fff;
  }

  .DayPicker:not(.DayPicker--interactionDisabled)
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
    background: ${shade(0.2, '#3e3b47')};
  }

  .DayPicker-Day--today {
    font-weight: normal;
  }

  .DayPicker-Day--disabled {
    color: #666360 !important;
    background: transparent !important;
  }

  .DayPicker-Day--selected {
    background: #ff9000 !important;
    border-radius: 10px;
    color: #232129 !important;
  }
`
Example #27
Source File: styles.ts    From gobarber-web with MIT License 5 votes vote down vote up 
AnimationContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  animation: ${appearFromLeft} 1s;

  form {
    margin: 80px 0;
    width: 340px;
    text-align: center;

    h1 {
      margin-bottom: 24px;
    }

    a {
      color: #f4ede8;
      display: block;
      margin-top: 24px;
      text-decoration: none;
      transition: color 0.3s;

      &:hover {
        color: ${shade(0.2, '#f4ede8')};
      }
    }
  }

  > a {
    color: #ff9000;
    display: block;
    margin-top: 24px;
    text-decoration: none;
    transition: color 0.3s;

    display: flex;
    align-items: center;

    svg {
      margin-right: 16px;
    }

    &:hover {
      color: ${shade(0.2, '#ff9000')};
    }
  }
`
Example #28
Source File: styles.ts    From gobarber-web with MIT License 5 votes vote down vote up 
AvatarInput = styled.div`
  position: relative;

  margin-bottom: 32px;
  align-self: center;

  img {
    width: 186px;
    height: 186px;
    border-radius: 50%;
  }

  label {
    position: absolute;
    width: 48px;
    height: 48px;
    background: #ff9000;
    border: none;
    border-radius: 50%;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: background-color 0.3s;
    cursor: pointer;

    input {
      display: none;
    }

    &:hover {
      background: ${shade(0.2, '#ff9000')};
    }

    svg {
      color: #312e38;
    }
  }
`
Example #29
Source File: styles.ts    From GoBarber with MIT License 5 votes vote down vote up 
AnimationContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: ${appearFromRight} 1s;

  form {
    margin: 80px 0;
    width: 340px;
    text-align: center;

    h1 {
      margin-bottom: 24px;
    }

    a {
      color: #f4ede8;
      display: block;
      margin-top: 24px;
      text-decoration: none;
      transition: color 0.2s;

      &:hover {
        color: ${shade(0.2, '#f4ede8')};
      }
    }
  }

  > a {
    color: #ff9000;
    display: block;
    margin-top: 24px;
    text-decoration: none;
    transition: color 0.2s;

    display: flex;
    align-items: center;
    transition: color 0.2s;

    svg {
      margin-right: 16px;
    }

    &:hover {
      color: ${shade(0.2, '#ff9000')};
    }
  }
`