How to use @pluralsight/ps-design-system-util - 10 common examples

},
  // __tag__text
  '.psds-card__tag__text': {
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap'
  },

  // __progress
  '.psds-card__progress': {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: '100%',
    height: 5,
    borderTop: `1px solid ${transparentize(0.8, core.colors.black)}`,
    backgroundColor: transparentize(0.6, core.colors.gray01),
    overflow: 'hidden'
  },

  // __progress__bar
  '.psds-card__progress__bar': {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '0%',
    height: '5px',
    backgroundColor: core.colors.white
  },
  '.psds-card__progress__bar--complete': {
    backgroundColor: core.colors.green
  },

strokeWidth: `${vars.style.strokeWidth}px`,
    transition: 'stroke-dashoffset 1s'
  },
  [`.psds-circularprogress__fg.psds-theme--${themeNames.light}`]: {
    stroke: core.colors.gray04
  },
  [`.psds-circularprogress__fg.psds-theme--${themeDefaultName}`]: {
    stroke: core.colors.white
  },
  // __bg
  [`.psds-circularprogress__bg`]: {
    fill: 'transparent',
    strokeWidth: `${vars.style.strokeWidth}px`
  },
  [`.psds-circularprogress__bg.psds-theme--${themeNames.light}`]: {
    stroke: transparentize(0.8, core.colors.gray04)
  },
  [`.psds-circularprogress__bg.psds-theme--${themeDefaultName}`]: {
    stroke: core.colors.gray04
  }
}

[`&:hover`]: {
      background: transparentize(0.9, core.colors.gray02)
    }
  },
  [`.psds-drawer__base--isOpen`]: {
    background: transparentize(0.8, core.colors.gray02),

    [`&:hover`]: {
      background: transparentize(0.8, core.colors.gray02)
    }
  },

  // __panel / __panel-content
  [`.psds-drawer__panel`]: {
    background: transparentize(0.94, core.colors.gray02),
    transition: `box-shadow ${core.motion.speedNormal}`
  },
  [`.psds-drawer__panel.psds-theme--${themeNames.light}`]: {
    boxShadow: 'inset 0 1px 3px 0 rgba(0,0,0,0.1)'
  },
  [`.psds-drawer__panel.psds-theme--${themeDefaultName}`]: {
    boxShadow: 'inset 0 1px 3px 0 rgba(0,0,0,0.5)'
  },
  [`.psds-drawer__panel-content`]: {
    marginRight: `calc(-1 * ${vars.toggleAreaWidth})`,
    paddingLeft: core.layout.spacingMedium,
    paddingRight: vars.toggleAreaWidth
  },

  // __toggle-button-container / __toggle-button
  [`.psds-drawer__toggle-button-container`]: {

'&:hover': {
      color: core.colors.gray02,
      background: core.colors.gray03
    }
  },

  // __progress
  '.psds-row__progress': {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: '100%',
    height: 5,
    borderTop: `1px solid ${transparentize(0.8, core.colors.black)}`,
    backgroundColor: transparentize(0.6, core.colors.gray01),
    overflow: 'hidden'
  },
  // __progress__bar
  '.psds-row__progress__bar': {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '0%',
    height: '5px',
    backgroundColor: core.colors.white
  },
  '.psds-row__progress__bar--complete': {
    backgroundColor: core.colors.green
  },

  // __words

background: core.colors.gray03,

    '&:hover': {
      color: core.colors.gray02,
      background: core.colors.gray03
    }
  },

  // __progress
  '.psds-row__progress': {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: '100%',
    height: 5,
    borderTop: `1px solid ${transparentize(0.8, core.colors.black)}`,
    backgroundColor: transparentize(0.6, core.colors.gray01),
    overflow: 'hidden'
  },
  // __progress__bar
  '.psds-row__progress__bar': {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '0%',
    height: '5px',
    backgroundColor: core.colors.white
  },
  '.psds-row__progress__bar--complete': {
    backgroundColor: core.colors.green
  },

width: '64px',
    color: core.colors.white,
    border: 0,
    zIndex: 1,
    cursor: 'pointer',
    outline: 'none',

    // __icon
    '&:hover > div': {
      background: core.colors.gray03
    }
  },
  '.psds-tab__overflow-button--left': {
    left: 0,
    justifyContent: 'flex-start',
    background: `linear-gradient(to left, transparent, ${transparentize(
      0.1,
      core.colors.gray05
    )} 50%)`,
    paddingLeft: core.layout.spacingMedium
  },
  '.psds-tab__overflow-button--right': {
    right: 0,
    justifyContent: 'flex-end',
    background: `linear-gradient(to right, transparent, ${transparentize(
      0.1,
      core.colors.gray05
    )} 50%)`,
    paddingRight: core.layout.spacingMedium
  },
  [`.psds-tab__overflow-button.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray06,

textDecoration: 'none',
      transition: `all ${core.motion.speedNormal}`
    }
  },

  // __full-overlay
  '.psds-card__full-overlay': {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
    height: '100%',
    width: '100%',
    background: transparentize(0.5, core.colors.black),
    transition: `opacity ${core.motion.speedNormal}`,
    pointerEvents: 'none',
    opacity: 0,

    '&:focus-within, &[focus-within]': {
      opacity: 1
    }
  },
  '.psds-card__full-overlay--fullOverlayVisible': {
    opacity: 1
  },

  // __full-overlay-link
  '.psds-card__full-overlay-link': {
    pointerEvents: 'all',
    color: core.colors.white,

// __base
  [`.psds-drawer__base`]: {
    position: 'relative',
    paddingRight: vars.toggleAreaWidth,
    cursor: 'pointer',
    transition: `background ${core.motion.speedNormal}`,

    [`&:hover`]: {
      background: transparentize(0.9, core.colors.gray02)
    }
  },
  [`.psds-drawer__base--isOpen`]: {
    background: transparentize(0.8, core.colors.gray02),

    [`&:hover`]: {
      background: transparentize(0.8, core.colors.gray02)
    }
  },

  // __panel / __panel-content
  [`.psds-drawer__panel`]: {
    background: transparentize(0.94, core.colors.gray02),
    transition: `box-shadow ${core.motion.speedNormal}`
  },
  [`.psds-drawer__panel.psds-theme--${themeNames.light}`]: {
    boxShadow: 'inset 0 1px 3px 0 rgba(0,0,0,0.1)'
  },
  [`.psds-drawer__panel.psds-theme--${themeDefaultName}`]: {
    boxShadow: 'inset 0 1px 3px 0 rgba(0,0,0,0.5)'
  },
  [`.psds-drawer__panel-content`]: {
    marginRight: `calc(-1 * ${vars.toggleAreaWidth})`,

[`.psds-tab__overflow-button.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray06,

    // __icon
    '&:hover > div': {
      background: core.colors.gray01
    }
  },
  [`.psds-tab__overflow-button--left.psds-theme--${themeNames.light}`]: {
    background: `linear-gradient(to left, transparent, ${transparentize(
      0.1,
      core.colors.white
    )} 50%)`
  },
  [`.psds-tab__overflow-button--right.psds-theme--${themeNames.light}`]: {
    background: `linear-gradient(to right, transparent, ${transparentize(
      0.1,
      core.colors.white
    )} 50%)`
  },

  '.psds-tab__overflow-button__icon': {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '32px',
    width: '32px',
    borderRadius: '50%',
    transition: `all ${core.motion.speedFast} ease-in-out`
  },

  // __list-item

padding: '0',
    position: 'absolute',
    right: core.layout.spacingXSmall,
    top: core.layout.spacingXSmall,

    '& > svg': {
      fill: core.colors.gray03,
      height: '24px',
      width: '24px'
    }
  },

  // __overlay
  '.psds-dialog__overlay': {
    alignItems: 'center',
    backgroundColor: transparentize(0.5, core.colors.black),
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
    left: 0,
    position: 'fixed',
    top: 0,
    width: '100%'
  }
}