polished#lighten JavaScript 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: index.js    From pine-interface with GNU General Public License v3.0 6 votes vote down vote up 
Option = styled(FancyButton)`
  margin-right: 8px;
  margin-top: 6px;

  :hover {
    cursor: pointer;
  }

  ${({ active, theme }) =>
    active &&
    css`
      background-color: ${({ theme }) => theme.royalGreen};
      color: ${({ theme }) => theme.white};
      border: none;

      :hover {
        border: none;
        box-shadow: none;
        background-color: ${({ theme }) => darken(0.05, theme.royalGreen)};
      }

      :focus {
        border: none;
        box-shadow: none;
        background-color: ${({ theme }) => lighten(0.05, theme.royalGreen)};
      }

      :active {
        background-color: ${({ theme }) => darken(0.05, theme.royalGreen)};
      }

      :hover:focus {
        background-color: ${({ theme }) => theme.royalGreen};
      }
      :hover:focus:active {
        background-color: ${({ theme }) => darken(0.05, theme.royalGreen)};
      }
    `}
`
Example #2
Source File: index.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
Option = styled(FancyButton)`
  margin-right: 8px;
  margin-top: 6px;

  :hover {
    cursor: pointer;
  }

  ${({ active, theme }) =>
    active &&
    css`
      background-color: ${({ theme }) => theme.royalPurple};
      color: ${({ theme }) => theme.white};
      border: none;

      :hover {
        border: none;
        box-shadow: none;
        background-color: ${({ theme }) => darken(0.05, theme.royalPurple)};
      }

      :focus {
        border: none;
        box-shadow: none;
        background-color: ${({ theme }) => lighten(0.05, theme.royalPurple)};
      }

      :active {
        background-color: ${({ theme }) => darken(0.05, theme.royalPurple)};
      }

      :hover:focus {
        background-color: ${({ theme }) => theme.royalPurple};
      }
      :hover:focus:active {
        background-color: ${({ theme }) => darken(0.05, theme.royalPurple)};
      }
    `}
`
Example #3
Source File: index.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Option = styled(FancyButton)`
  margin-right: 8px;
  margin-top: 6px;

  :hover {
    cursor: pointer;
  }

  ${({ active, theme }) =>
    active &&
    css`
      background-color: ${({ theme }) => theme.royalBlue};
      color: ${({ theme }) => theme.white};
      border: none;

      :hover {
        border: none;
        box-shadow: none;
        background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
      }

      :focus {
        border: none;
        box-shadow: none;
        background-color: ${({ theme }) => lighten(0.05, theme.royalBlue)};
      }

      :active {
        background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
      }

      :hover:focus {
        background-color: ${({ theme }) => theme.royalBlue};
      }
      :hover:focus:active {
        background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
      }
    `}
`
Example #4
Source File: index.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnect = styled(Web3StatusGeneric)`
  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 #5
Source File: styles.js    From aglomerou with GNU General Public License v3.0 6 votes vote down vote up 
Container = styled.div`
  width: 300px;
  height: 48px;

  margin-top: 8px;
  margin-bottom: 8px;

  transition: 0.2s;

  color: #284f00;

  &:hover {
    transform: scaleX(1.04);
    color: ${lighten(0.2, "#284f00")};

    svg {
      color: ${lighten(0.2, "#284f00")};
    }
  }
`
Example #6
Source File: Sidebar.jsx    From MyHome-Web with Apache License 2.0 6 votes vote down vote up 
CSS = css`
  padding: 10px 10px 10px 20px;
  margin-right: 30px;
  display: flex;
  align-items: center;
  color: ${styles.colors.black};

  &.active {
    margin-right: 27px;
    border-left: 3px solid ${styles.colors.blue};
    color: ${styles.colors.blue};
    background-color: ${lighten(0.45, styles.colors.blue)};
  }

  &:not(.active) {
    margin-left: 3px
  }
`
Example #7
Source File: cta-box.js    From semana-hacktoberfest with MIT License 6 votes vote down vote up 
Wrapper = styled.div`
  padding: 7.5rem 3rem 3rem;
  background-color: ${({ theme }) => lighten(0.07, theme.colors.background)};
  width: 100%;
  text-align: center;

  > a {
    display: block;
    width: 100%;
  }

  ${media.greaterThan('sm')`
    max-width: 30rem;
  `}

  ${media.lessThan('sm')`
    &:not(:first-child) {
      margin-top: 5rem;
    }
  `}
`
Example #8
Source File: index.js    From swap-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Option = styled(FancyButton)`
  margin-right: 8px;
  margin-top: 6px;

  :hover {
    cursor: pointer;
  }

  ${({ active, theme }) =>
    active &&
    css`
      background-color: ${({ theme }) => theme.royalBlue};
      color: ${({ theme }) => theme.white};
      border: none;

      :hover {
        border: none;
        box-shadow: none;
        background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
      }

      :focus {
        border: none;
        box-shadow: none;
        background-color: ${({ theme }) => lighten(0.05, theme.royalBlue)};
      }

      :active {
        background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
      }

      :hover:focus {
        background-color: ${({ theme }) => theme.royalBlue};
      }
      :hover:focus:active {
        background-color: ${({ theme }) => darken(0.05, theme.royalBlue)};
      }
    `}
`
Example #9
Source File: index.js    From pine-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 #10
Source File: index.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnected = styled(Web3StatusGeneric)`
  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 #11
Source File: index.js    From pine-interface with GNU General Public License v3.0 6 votes vote down vote up 
Web3StatusConnect = styled(Web3StatusGeneric)`
  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 #12
Source File: Modal.styles.js    From covidcg with MIT License 6 votes vote down vote up 
ApplyButton = styled(Button)`
  background-image: none;
  font-size: 1rem;
  font-weight: normal;

  background-color: ${({ invalid }) => (invalid ? '#DDD' : '#28a745')};
  color: ${({ invalid }) => (invalid ? '#888' : '#FFF')};

  transition: 0.1s all ease-in-out;

  &:hover {
    background-color: ${({ invalid }) =>
      invalid ? '#DDD' : lighten(0.1, '#28a745')};
  }
`
Example #13
Source File: DragNDrop.jsx    From ResoBin with MIT License 6 votes vote down vote up 
UploadBox = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 16rem;
  margin-bottom: 1rem;
  padding: 3rem 1rem;
  color: ${({ theme, error }) => (error ? '#f34a4a' : theme.textColorInactive)};
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  outline: 3px dashed ${({ theme }) => rgba(theme.textColorInactive, 0.4)};
  outline-offset: -0.75rem;
  cursor: pointer;

  h2 {
    font-size: ${fontSize.responsive.md};
  }

  &:hover {
    color: ${({ theme }) => theme.textColor};
    background: ${({ theme }) => lighten(0.1, theme.secondary)};
    outline-color: ${({ theme }) => theme.textColorInactive};
  }
`
Example #14
Source File: ModeSelector.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
LiquidityContainer = styled.div`
  ${({ theme }) => theme.flexRowNoWrap};
  align-items: center;
  padding: 1rem 1rem;
  font-size: 1rem;
  color: ${({ theme }) => theme.royalBlue};
  font-weight: 500;
  cursor: pointer;

  :hover {
    color: ${({ theme }) => lighten(0.1, theme.royalBlue)};
  }

  img {
    height: 0.75rem;
    width: 0.75rem;
  }
`
Example #15
Source File: index.js    From spooky-info with GNU General Public License v3.0 6 votes vote down vote up 
CustomLink = styled(RouterLink)`
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: ${({ color, theme }) => (color ? color : theme.link)};

  &:visited {
    color: ${({ color, theme }) => (color ? lighten(0.1, color) : lighten(0.1, theme.link))};
  }

  &:hover {
    cursor: pointer;
    text-decoration: none;
    underline: none;
    color: ${({ color, theme }) => (color ? darken(0.1, color) : darken(0.1, theme.link))};
  }
`
Example #16
Source File: TripsUpcomingCardItem.js    From airdnd-frontend with MIT License 6 votes vote down vote up 
StMoreButton = styled(Button)`
  width: 100%;
  height: 5.6rem;
  border-top: 1px solid ${({ theme }) => lighten(0.2, theme.color.gray)};
  border-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-size: 1.5rem;
`
Example #17
Source File: index.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
ButtonConfirmedStyle = styled(Base)`
  background-color: ${({ theme }) => lighten(0.5, theme.purple1)};
  color: ${({ theme }) => theme.purple1};
  border: 1px solid ${({ theme }) => theme.purple1};

  &:disabled {
    opacity: 50%;
    cursor: auto;
  }
`
Example #18
Source File: MsgFlagModal.js    From airdnd-frontend with MIT License 6 votes vote down vote up 
StFlagModalLabel = styled.label`
  display: flex;
  justify-content: space-between;
  padding: 3rem 0rem;
  border-bottom: 1px solid ${({ theme }) => lighten(0.1, theme.color.gray)};
  & + label {
    border-bottom: 1px solid ${({ theme }) => lighten(0.1, theme.color.gray)};
  }
  cursor: pointer;
`
Example #19
Source File: styles.js    From r3f-website with MIT License 5 votes vote down vote up 
Item = styled.li`
  font-size: 15px;
  width: 100%;
  transition: all 200ms ease-in-out;
  padding: 0 20px;

  a,
  span {
    display: block;
    font-size: 15px;
    color: ${({ theme }) => theme.colors.sidebar.link};
    background-color: #1f1f1f;
    padding: 4px 10px;
    margin: 4px 0;
    border-radius: 4px;
    font-weight: normal;

    text-decoration: none;
    width: 100%;
    height: 100%;

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

    cursor: pointer;
    margin: 0 auto;

    transition: background-color 0.2s, color 0.2s, padding-left 0.2s;

    svg {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    &:not(.active-link):hover {
      padding-left: 20px;
      color: ${({ theme }) =>
        darken("0.2", theme.colors.sidebar.link)} !important;
    }

    &.active-link {
      color: ${({ theme }) => darken("0.2", theme.colors.sidebar.link)};
      background-color: ${lighten("0.1", "#1f1f1f")};
    }
  }
`
Example #20
Source File: MsgDetailSubInfoBox.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
MsgDetailSiButtonWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  padding: 1.8rem 0rem;
  width: calc(100% - 4rem);
  border-top: 1px solid ${({ theme }) => lighten(0.1, theme.color.gray)};
`
Example #21
Source File: Background.styles.js    From cybsec with GNU Affero General Public License v3.0 5 votes vote down vote up 
styles = ({ color }) => ({
  positioned: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  root: {
    composes: '$positioned',
    position: 'fixed',
    zIndex: 0,
    backgroundColor: color.background.dark
  },
  patterns: {
    composes: '$positioned',
    zIndex: 0
  },
  light1: {
    composes: '$positioned',
    zIndex: 0,
    backgroundImage: 'radial-gradient(' + rgba(color.secondary.main, 0.1) + ' 25%, transparent)',
    opacity: props => props.energy.entered ? 1 : 0
  },
  line1Container: {
    composes: '$positioned',
    zIndex: 1
  },
  line1: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: 1,
    backgroundColor: color.background.main,
    boxShadow: `0 0 1px ${rgba(color.background.main, color.alpha)}`,
    opacity: props => props.energy.entered ? 1 : 0
  },
  svgContainer: {
    composes: '$positioned',
    zIndex: 2,
    display: 'block',
    width: '100%',
    height: '100%'
  },
  dotLinesContainer: {
    opacity: props => props.energy.exited ? 0 : 1
  },
  dotLine: {
    stroke: color.background.light,
    strokeWidth: 1
  },
  line2: {},
  line3: {},
  circuitContainer: {},
  circuit: {
    opacity: props => props.energy.exited ? 0 : 1
  },
  circuitLine: {
    fill: 'none',
    stroke: color.background.light,
    strokeWidth: 1
  },
  circuitLineLight: {
    fill: 'none',
    stroke: color.secondary.main,
    strokeWidth: 1,
    opacity: 0
  },
  circuitDot: {
    fill: lighten(color.accent / 4, color.background.light),
    opacity: props => props.energy.entered ? 1 : 0
  },
  circuitDotStart: {},
  circuitDotEnd: {},
  content: {
    composes: '$positioned',
    zIndex: 1,
    display: 'flex'
  }
})
Example #22
Source File: MsgDetailReservedHomeBox.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
MsgDetailRhCheckOutWrapper = styled.div`
  flex-grow: 1;
  padding-left: 3rem;
  border-left: 1px solid ${({ theme }) => lighten(0.1, theme.color.gray)};
`
Example #23
Source File: searchable-select.js    From cards with MIT License 5 votes vote down vote up 
getStyles = ({ bg, color }) => {
  const secondaryColor = lighten(0.1, bg)

  const theme = () => {
    return {
      borderRadius: 4,
      colors: {
        primary: color,
        primary75: secondaryColor,
        primary50: secondaryColor,
        primary25: secondaryColor,
        danger: '#DE350B',
        dangerLight: '#FFBDAD',
        neutral0: bg,
        neutral5: color,
        neutral10: color,
        neutral20: color,
        neutral30: color,
        neutral40: color,
        neutral50: color,
        neutral60: color,
        neutral70: color,
        neutral80: color,
        neutral90: color
      },
      spacing: { baseUnit: 4, controlHeight: 38, menuGutter: 8 }
    }
  }

  const fontStyle = {
    fontFamily: themeBase.fonts.sans,
    fontSize: themeBase.fontSizes[1],
    fontWeight: themeBase.fontWeights.normal
  }

  const styles = {
    singleValue: provided => ({
      ...provided,
      ...fontStyle
    }),
    valueContainer: provided => ({
      ...provided,
      padding: '2px 8px'
    }),
    menu: provided => ({
      ...provided,
      ...fontStyle,
      minWidth: '300px',
      zIndex: 3
    }),
    option: (provided, { isFocused }) => ({
      ...provided,
      cursor: 'pointer',
      background: isFocused ? color : 'inherit',
      color: isFocused ? bg : 'inherit'
    }),
    indicatorSeparator: () => ({ display: 'none' }),
    control: (provided, { isFocused }) => ({
      ...provided,
      opacity: isFocused ? 1 : 0.75,
      cursor: 'pointer',
      boxShadow: 'none'
    })
  }

  return { theme, styles }
}
Example #24
Source File: TripsCanceledItem.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
TripsCanceledCkLc = styled.div`
  color: ${({ theme }) => lighten(0.1, theme.color.darkGray)};
  font-size: 1.4rem;
  font-weight: 400;
`
Example #25
Source File: styles.js    From aglomerou with GNU General Public License v3.0 5 votes vote down vote up 
FormContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  grid-area: form;
  background-color: white;

  border-radius: 24px 0 0 24px;

  img {
    max-width: 340px;
    margin-bottom: 32px;
  }

  h3 {
    margin-bottom: 32px;
    color: #41414d;
  }

  button {
    width: 300px;
    height: 40px;
    margin-top: 32px;

    font-size: 22px;
    font-weight: 600;
    color: white;

    border-radius: 16px;

    background-color: #284f00;
    border: none;
    outline: none;

    transition: 0.2s;

    &:hover {
      background-color: ${lighten(0.05, "#284f00")};
    }
  }
`
Example #26
Source File: TripsUpcoming.js    From airdnd-frontend with MIT License 5 votes vote down vote up 
TripsUpcomingCardWrapper = styled.div`
  border-top: 1px solid ${({ theme }) => lighten(0.2, theme.color.gray)};
  border-bottom: 1px solid ${({ theme }) => lighten(0.2, theme.color.gray)};
  padding: 2.5rem 0rem 1rem 0rem;
`
Example #27
Source File: global.js    From r3f-website with MIT License 4 votes vote down vote up 
export default function GlobalStyle() {
  const theme = useTheme();

  return (
    <Global
      styles={css`
        @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
        @import url("https://fonts.googleapis.com/css?family=Inter&display=swap");

        *,
        *::after,
        *::before {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        *::selection {
          background: ${lighten("0.35", "#d6d6d6")}!important;
        }

        body {
          font-size: 16px;
          font-family: "Inter", sans-serif;
          background-color: #0e0e0e;
          text-rendering: optimizelegibility;
        }

        h1 {
          font-size: 32px;
          color: ${theme.colors.background};
          font-weight: normal;
          margin-bottom: 24px;
        }

        h2 {
          font-size: 24px;
        }

        h3 {
          font-size: 18px;
        }

        h4 {
          font-size: 16px;
        }

        h2,
        h3,
        h4,
        h5,
        h6 {
          color: #d6d6d6;
          margin: 24px 0 16px 0;
          font-weight: normal;
        }

        p {
          color: #d6d6d6;
          font-size: 16px;
          line-height: 28px;
          margin-bottom: 16px;
          font-weight: 400;
        }

        code.inline-code {
          display: inline-block;
          vertical-align: middle;
          line-height: 1;
          padding: 0.2em 0.2em 0.3em 0.2em;
          background-color: #44475a;
          color: rgba(248, 248, 242);
          font-size: 14px;
          border-radius: 3px;
          font-feature-settings: "clig" 0, "calt" 0;
          font-variant: no-common-ligatures no-discretionary-ligatures
            no-historical-ligatures no-contextual;
        }

        a {
          color: #d6d6d6;
          font-weight: bold;

          &:hover {
            color: #5991c1;
            transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
            opacity: 1;
          }
        }

        blockquote {
          margin: 0;

          p {
            padding: 1rem;
            background: #232323;
            border-radius: 5px;
          }
        }

        hr {
          border: 0;
          height: 0;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        table {
          border-collapse: collapse;
          border-spacing: 0;
          width: 100%;
          margin-bottom: 16px;
          color: #444;
        }

        th,
        td {
          text-align: left;
          padding: 12px;
        }

        tr:nth-of-type(2n) td {
          background-color: ${theme.colors.sidebar.itemActive};
        }

        tr {
          background-color: #ffffff;
        }

        iframe {
          margin-bottom: 16px;
        }

        img {
          max-width: 100%;
        }

        ul,
        ol {
          color: #d6d6d6;
          padding-left: 15px;
          margin-bottom: 16px;

          li {
            line-height: 28px;
          }
        }

        .gatsby-highlight {
          position: relative;

          .token {
            font-style: normal !important;
          }
        }

        pre[class*="language-"]::before {
          background: #d9d7e0;
          border-radius: 0 0 4px 4px;
          color: #232129;
          font-size: 12px;
          font-family: SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", "Courier New", monospace;
          letter-spacing: 0.075em;
          line-height: 1;
          padding: 0.25rem 0.5rem;
          position: absolute;
          left: 1rem;
          text-align: right;
          text-transform: uppercase;
          top: 0;
        }

        pre[class*="language-"] code {
          font-family: SFMono-Regular, Menlo, Monaco, Consolas,
            "Liberation Mono", "Courier New", monospace;
          font-variant: no-common-ligatures no-discretionary-ligatures
            no-historical-ligatures no-contextual;
        }

        pre[class~="language-js"]::before,
        pre[class~="language-javascript"]::before {
          content: "js";
          background: #f7df1e;
        }

        pre[class~="language-jsx"]::before {
          content: "jsx";
          background: #61dafb;
        }

        pre[class~="language-typescript"]::before,
        pre[class~="language-ts"]::before {
          content: "ts";
          background: #294e80;
          color: #fff;
        }

        pre[class~="language-tsx"]::before {
          content: "tsx";
          background: #294e80;
          color: #fff;
        }

        pre[class~="language-graphql"]::before {
          content: "GraphQL";
          background: #e10098;
          color: #fff;
        }

        pre[class~="language-html"]::before {
          content: "html";
          background: #005a9c;
          color: #fff;
        }

        pre[class~="language-css"]::before {
          content: "css";
          background: #ff9800;
          color: #fff;
        }

        pre[class~="language-mdx"]::before {
          content: "mdx";
          background: #f9ac00;
          color: #fff;
        }

        pre[class~="language-shell"]::before {
          content: "shell";
        }

        pre[class~="language-sh"]::before {
          content: "sh";
        }

        pre[class~="language-bash"]::before {
          content: "bash";
        }

        pre[class~="language-yaml"]::before {
          content: "yaml";
          background: #ffa8df;
        }

        pre[class~="language-markdown"]::before {
          content: "md";
        }

        pre[class~="language-json"]::before,
        pre[class~="language-json5"]::before {
          content: "json";
          background: linen;
        }

        pre[class~="language-diff"]::before {
          content: "diff";
          background: #e6ffed;
        }

        pre[class~="language-text"]::before {
          content: "text";
          background: #fff;
        }

        pre[class~="language-flow"]::before {
          content: "flow";
          background: #e8bd36;
        }
      `}
    />
  );
}
Example #28
Source File: theme.js    From web with MIT License 4 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  ${reset};

  body {
    font-family: ${theme.secondaryFontFamily};
    color: ${theme.textColor};
    letter-spacing: 0.03rem !important;
    font-size: 17px;
    line-height: 19px;
  }
  .section {
    padding: 3rem 1rem;
  }
  .title {
    font-family: ${theme.primaryFontFamily};
  }
  .button {
    font-family: ${theme.primaryFontFamily};
  }
  p {
    line-height: 1.5rem;
  }
  p, .title, .box {
    color: ${theme.textColor} !important;
  }
  .subtitle {
    color: ${lighten(0.06, theme.textColor)} !important;
  }
  .button.is-primary {
    background-color: ${theme.mainBrandColor};
    transition: background-color 0.2s ease;
    :hover {
      background-color: ${darken(0.06, theme.mainBrandColor)};
    }
  }
  .button.is-secondary {
    background-color: ${theme.lightAccent};
    transition: background-color 0.2s ease;
    color: #ffffff;
    :hover {
      background-color: ${darken(0.06, theme.lightAccent)};
    }
  }
  .button.is-link {
    background-color: ${theme.darkAccent};
    transition: background-color 0.2s ease;
    :hover {
      background-color: ${darken(0.06, theme.darkAccent)};
    }
  }
  .button, .input, .card {
    box-shadow: ${theme.boxShadow};
  }
  .has-text-warning {
    color: ${theme.lightAccent} !important;
  }
  .notification {
    background-color: #EEEEEE;
  }
  h1, h2, h3, h4, h5, h6 {
    color: ${theme.textColorDark};
  }
  .image.is-5by4 {
    padding-top: 0;
  }
  .markdown-container {
    h1, h2, h3, h4, h5, h6 {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      font-weight: bold;
    }
    p {
      margin-bottom: 1rem;
    }
  }
  .help.is-danger {
    color: #ff3860 !important;
  }
  input, textarea {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
`