How to use the @pluralsight/ps-design-system-util/color.js.transparentize function in @pluralsight/ps-design-system-util

To help you get started, we’ve selected a few @pluralsight/ps-design-system-util examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pluralsight / design-system / packages / button / src / css / index.js View on Github external
[`.psds-button--appearance-${vars.appearances.secondary}`]: {
    color: core.colors.gray01,
    background: transparentize(0.75, core.colors.gray02),

    '&:not([disabled]):hover': {
      color: core.colors.white,
      background: transparentize(0.65, core.colors.gray02)
    }
  },
  [`.psds-button--appearance-${vars.appearances.secondary}.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03,
    background: transparentize(0.65, core.colors.gray01),

    '&:not([disabled]):hover': {
      color: core.colors.gray06,
      background: transparentize(0.35, core.colors.gray01)
    }
  },
  [`.psds-button--appearance-${vars.appearances.stroke}`]: {
    border: `1px solid ${core.colors.orange}`,
    color: core.colors.orange,
    background: 'none',

    '&:not([disabled]):hover': {
      border: `1px solid ${core.colors.orangeLight}`,
      color: core.colors.orangeLight,
      background: 'none'
    }
  },
  [`.psds-button--appearance-${vars.appearances.flat}`]: {
    border: 'none',
    background: 'none',
github pluralsight / design-system / packages / site / pages / components / dialog.js View on Github external
<div>
    <div>
    <div>
    <style>{`
      .grid {
        display: grid;
        grid-gap: ${core.layout.spacingSmall};
        grid-template-columns: [left] 5fr [right] 1fr [end];
        grid-template-rows: [row1] 1fr [row2] 2fr [row3] 5fr [end];
        height: 100%;
        width: 100%;
        min-height: 400px;
      }
      .box {
        border-radius: 2px;
        background: ${transparentize(0.8, core.colors.gray03)};
      }
      .top {
        grid-column: left / end;
        grid-row: row1 / row2;
      }
      .hero {
        grid-column: left / right;
        grid-row: row2 / row3;
      }
      .body {
        grid-column: left / right;
        grid-row: row3 / end;
      }
      .side {
        grid-column: right / end;
        grid-row: row2 / end;</style></div></div></div>
github pluralsight / design-system / packages / badge / src / css / index.js View on Github external
borderColor: core.colors.yellow
  },

  [subtleThemeWithColor(themeNames.dark, colors.red)]: {
    color: core.colors.red,
    borderColor: core.colors.red
  },

  [subtleThemeWithColor(themeNames.dark, colors.blue)]: {
    color: core.colors.blue,
    borderColor: core.colors.blue
  },

  [subtleThemeWithColor(themeNames.light, colors.gray)]: {
    color: core.colors.gray04,
    backgroundColor: transparentize(0.85, core.colors.gray03)
  },
  [subtleThemeWithColor(themeNames.light, colors.green)]: {
    color: core.colors.gray04,
    backgroundColor: transparentize(0.85, core.colors.green)
  },
  [subtleThemeWithColor(themeNames.light, colors.yellow)]: {
    color: core.colors.gray04,
    backgroundColor: transparentize(0.85, core.colors.yellow)
  },
  [subtleThemeWithColor(themeNames.light, colors.red)]: {
    color: core.colors.gray04,
    backgroundColor: transparentize(0.85, core.colors.red)
  },
  [subtleThemeWithColor(themeNames.light, colors.blue)]: {
    color: core.colors.gray04,
    backgroundColor: transparentize(0.85, core.colors.blue)
github pluralsight / design-system / packages / button / src / css / index.js View on Github external
animation: `${spin || 'psds-button__keyframes__spin'} 1s linear infinite`
  }),
  [`.psds-button__loading--appearance-${vars.appearances.primary}`]: {
    borderColor: transparentize(0.8, core.colors.gray04),
    borderTopColor: core.colors.white
  },
  [`.psds-button__loading--appearance-${vars.appearances.secondary}`]: {
    borderColor: transparentize(0.8, core.colors.gray01),
    borderTopColor: core.colors.gray01
  },
  [`.psds-button__loading--appearance-${vars.appearances.secondary}.psds-button__loading--theme-${themeNames.light}`]: {
    borderColor: transparentize(0.8, core.colors.gray04),
    borderTopColor: core.colors.gray04
  },
  [`.psds-button__loading--appearance-${vars.appearances.stroke}`]: {
    borderColor: transparentize(0.8, core.colors.white),
    borderTopColor: core.colors.orange
  },
  [`.psds-button__loading--appearance-${vars.appearances.flat}.psds-button__loading--theme-${themeNames.light}`]: {
    borderColor: transparentize(0.8, core.colors.gray04),
    borderTopColor: core.colors.gray04
  },
  [`.psds-button__loading--appearance-${vars.appearances.flat}.psds-button__loading--theme-${themeDefaultName}`]: {
    borderColor: transparentize(0.8, core.colors.white),
    borderTopColor: core.colors.white
  },

  [`.psds-button__text`]: {
    alignItems: 'center',
    display: 'inline-flex',
    pointerEvents: 'none'
  }
github pluralsight / design-system / packages / button / src / css / index.js View on Github external
padding: `${core.layout.spacingXXSmall} ${core.layout.spacingMedium}`,
    height: '40px'
  },
  [`.psds-button--size-${vars.sizes.large}`]: {
    fontSize: core.type.fontSizeMedium,
    padding: `${core.layout.spacingXXSmall} ${core.layout.spacingMedium}`,
    height: '48px'
  },

  [`.psds-button--appearance-${vars.appearances.secondary}`]: {
    color: core.colors.gray01,
    background: transparentize(0.75, core.colors.gray02),

    '&:not([disabled]):hover': {
      color: core.colors.white,
      background: transparentize(0.65, core.colors.gray02)
    }
  },
  [`.psds-button--appearance-${vars.appearances.secondary}.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03,
    background: transparentize(0.65, core.colors.gray01),

    '&:not([disabled]):hover': {
      color: core.colors.gray06,
      background: transparentize(0.35, core.colors.gray01)
    }
  },
  [`.psds-button--appearance-${vars.appearances.stroke}`]: {
    border: `1px solid ${core.colors.orange}`,
    color: core.colors.orange,
    background: 'none',
github pluralsight / design-system / packages / button / src / css / index.js View on Github external
height: '32px'
  },
  [`.psds-button--size-${vars.sizes.medium}`]: {
    fontSize: core.type.fontSizeSmall,
    padding: `${core.layout.spacingXXSmall} ${core.layout.spacingMedium}`,
    height: '40px'
  },
  [`.psds-button--size-${vars.sizes.large}`]: {
    fontSize: core.type.fontSizeMedium,
    padding: `${core.layout.spacingXXSmall} ${core.layout.spacingMedium}`,
    height: '48px'
  },

  [`.psds-button--appearance-${vars.appearances.secondary}`]: {
    color: core.colors.gray01,
    background: transparentize(0.75, core.colors.gray02),

    '&:not([disabled]):hover': {
      color: core.colors.white,
      background: transparentize(0.65, core.colors.gray02)
    }
  },
  [`.psds-button--appearance-${vars.appearances.secondary}.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03,
    background: transparentize(0.65, core.colors.gray01),

    '&:not([disabled]):hover': {
      color: core.colors.gray06,
      background: transparentize(0.35, core.colors.gray01)
    }
  },
  [`.psds-button--appearance-${vars.appearances.stroke}`]: {
github pluralsight / design-system / packages / badge / src / css / index.js View on Github external
},
  [subtleThemeWithColor(themeNames.light, colors.green)]: {
    color: core.colors.gray04,
    backgroundColor: transparentize(0.85, core.colors.green)
  },
  [subtleThemeWithColor(themeNames.light, colors.yellow)]: {
    color: core.colors.gray04,
    backgroundColor: transparentize(0.85, core.colors.yellow)
  },
  [subtleThemeWithColor(themeNames.light, colors.red)]: {
    color: core.colors.gray04,
    backgroundColor: transparentize(0.85, core.colors.red)
  },
  [subtleThemeWithColor(themeNames.light, colors.blue)]: {
    color: core.colors.gray04,
    backgroundColor: transparentize(0.85, core.colors.blue)
  }
}
github pluralsight / design-system / packages / button / src / css / index.js View on Github external
padding: `${core.layout.spacingXXSmall} ${core.layout.spacingMedium}`,
    height: '48px'
  },

  [`.psds-button--appearance-${vars.appearances.secondary}`]: {
    color: core.colors.gray01,
    background: transparentize(0.75, core.colors.gray02),

    '&:not([disabled]):hover': {
      color: core.colors.white,
      background: transparentize(0.65, core.colors.gray02)
    }
  },
  [`.psds-button--appearance-${vars.appearances.secondary}.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03,
    background: transparentize(0.65, core.colors.gray01),

    '&:not([disabled]):hover': {
      color: core.colors.gray06,
      background: transparentize(0.35, core.colors.gray01)
    }
  },
  [`.psds-button--appearance-${vars.appearances.stroke}`]: {
    border: `1px solid ${core.colors.orange}`,
    color: core.colors.orange,
    background: 'none',

    '&:not([disabled]):hover': {
      border: `1px solid ${core.colors.orangeLight}`,
      color: core.colors.orangeLight,
      background: 'none'
    }
github pluralsight / design-system / packages / button / src / css / index.js View on Github external
[`.psds-button__loading`]: ({ spin }) => ({
    display: 'inline-block',
    height: 'calc(100% - 4px)',
    width: 'calc(100% - 4px)',
    margin: '2px',
    borderStyle: 'solid',
    borderWidth: '2px',
    borderRadius: '100%',
    animation: `${spin || 'psds-button__keyframes__spin'} 1s linear infinite`
  }),
  [`.psds-button__loading--appearance-${vars.appearances.primary}`]: {
    borderColor: transparentize(0.8, core.colors.gray04),
    borderTopColor: core.colors.white
  },
  [`.psds-button__loading--appearance-${vars.appearances.secondary}`]: {
    borderColor: transparentize(0.8, core.colors.gray01),
    borderTopColor: core.colors.gray01
  },
  [`.psds-button__loading--appearance-${vars.appearances.secondary}.psds-button__loading--theme-${themeNames.light}`]: {
    borderColor: transparentize(0.8, core.colors.gray04),
    borderTopColor: core.colors.gray04
  },
  [`.psds-button__loading--appearance-${vars.appearances.stroke}`]: {
    borderColor: transparentize(0.8, core.colors.white),
    borderTopColor: core.colors.orange
  },
  [`.psds-button__loading--appearance-${vars.appearances.flat}.psds-button__loading--theme-${themeNames.light}`]: {
    borderColor: transparentize(0.8, core.colors.gray04),
    borderTopColor: core.colors.gray04
  },
  [`.psds-button__loading--appearance-${vars.appearances.flat}.psds-button__loading--theme-${themeDefaultName}`]: {
    borderColor: transparentize(0.8, core.colors.white),
github pluralsight / design-system / packages / switch / src / css / index.js View on Github external
padding: '1px'
  },
  [`.psds-switch__track--checked.psds-switch__track--color-${vars.colors.blue}`]: {
    backgroundColor: core.colors.blue
  },
  [`.psds-switch__track--checked.psds-switch__track--color-${vars.colors.green}`]: {
    backgroundColor: core.colors.green
  },
  [`.psds-switch__track--checked.psds-switch__track--color-${vars.colors.orange}`]: {
    backgroundColor: core.colors.orange
  },

  [`.psds-switch__thumb`]: {
    backgroundColor: core.colors.white,
    borderRadius: '50%',
    boxShadow: `0 0 2px ${transparentize(0.5, core.colors.black)}`,
    transition: `transform ${core.motion.speedFast} ease-in-out`
  },
  [`.psds-switch__thumb--size-${vars.sizes.small}`]: {
    height: '12px',
    width: '12px'
  },
  [`.psds-switch__thumb--size-${vars.sizes.large}`]: {
    height: '22px',
    width: '22px'
  },
  [`.psds-switch__thumb--checked.psds-switch__thumb--size-${vars.sizes.small}`]: {
    transform: 'translateX(12px)'
  },
  [`.psds-switch__thumb--checked.psds-switch__thumb--size-${vars.sizes.large}`]: {
    transform: 'translateX(24px)'
  },

@pluralsight/ps-design-system-util

Runtime dependencies for utilitarian tasks. Analogous to a lodash.

Apache-2.0
Latest version published 3 years ago

Package Health Score

54 / 100
Full package analysis

Similar packages