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

},

  // __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`]: {
    position: 'absolute',
    top: 0,
    right: core.layout.spacingMedium,
    bottom: 0,
    display: 'flex',
    alignItems: 'center'
  },
  [`.psds-drawer__toggle-button`]: {
    height: '24px',
    overflow: 'hidden',
    fontSize: core.type.fontSizeXSmall,

['.psds-emptystate' + themeClasses[themeDefaultName]]: {
    color: core.colors.white
  },
  ['.psds-emptystate' + themeClasses[themeNames.light]]: {
    color: core.colors.gray06
  },

  // __actions
  '.psds-emptystate__actions': {
    maxWidth: 500
  },

  // __caption
  '.psds-emptystate__caption': {
    marginBottom: core.layout.spacingLarge,
    fontSize: core.type.fontSizeSmall,
    letterSpacing: core.type.letterSpacingSmall,
    lineHeight: core.type.lineHeightStandard,
    maxWidth: 500
  },
  ['.psds-emptystate__caption' + themeClasses[themeDefaultName]]: {
    color: core.colors.gray01
  },
  ['.psds-emptystate__caption' + themeClasses[themeNames.light]]: {
    color: core.colors.gray04
  },

  // __heading,
  '.psds-emptystate__heading': {
    marginBottom: core.layout.spacingLarge,
    letterSpacing: core.type.letterSpacingLarge,
    fontWeight: core.type.fontWeightBook,

},

  // __tag
  '.psds-card__tag': {
    display: 'flex',
    alignItems: 'center',
    position: 'absolute',
    top: core.layout.spacingSmall,
    left: 0,
    padding: `${core.layout.spacingXXSmall} ${core.layout.spacingXSmall}`,
    background: transparentize(0.1, core.colors.white),
    borderRadius: '0 2px 2px 0',
    color: core.colors.gray06,
    textTransform: 'uppercase',
    fontSize: core.type.fontSizeXSmall,
    fontWeight: core.type.fontWeightBold,
    lineHeight: '16px',
    boxShadow: `0 1px 4px 0 ${transparentize(0.5, core.colors.black)}`,
    maxWidth: '75%'
  },

  // __tag__icon
  '.psds-card__tag__icon': {
    display: 'flex',
    alignItems: 'center',
    marginRight: core.layout.spacingXSmall
  },
  // __tag__text
  '.psds-card__tag__text': {
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap'

width: '100%',
    fill: core.colors.white
  },

  // __input
  '.psds-checkbox__input': {
    display: 'none'
  },

  // __label
  '.psds-checkbox__label': {
    marginLeft: core.layout.spacingSmall,
    color: core.colors.bone,
    fontSize: core.type.fontSizeSmall,
    lineHeight: core.type.lineHeightStandard,
    fontWeight: core.type.fontWeightMedium
  },
  [`.psds-checkbox__label.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray04
  }
}

.option {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: ${cssVars.innerHeight};
  line-height: calc(${cssVars.innerHeight} - 1px);
  font-size: 10px; /* TODO: size not in design system, ok? */
  color: ${core.colors.white};
  padding: 0 13px;
  border: none;
  background: none;
  border-radius: calc(${cssVars.innerHeight} / 2);
  cursor: pointer;
  transition: all .4s;
  font-weight: ${core.type.fontWeightMedium};
}
`

class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = { selectedOption: {} }
    this.handleSelect = this.handleSelect.bind(this)
  }
  setSelectedOption(node) {
    this.setState({
      selectedOption: node
    })
  }
  handleSelect(value, node) {
    this.setSelectedOption(node)

},
  [`.psds-tab__list.psds-theme--${themeNames.light}`]: {
    borderBottom: `1px solid ${core.colors.gray02}`
  },
  [`.psds-tab__list.psds-theme--${themeDefaultName}`]: {
    borderBottom: `1px solid ${core.colors.gray04}`
  },

  '.psds-tab__slider': {
    position: 'absolute',
    top: 0,
    left: 0,
    display: 'flex',
    height: '64px',
    transform: 'translateX(0)',
    transition: `transform ${core.motion.speedFast} ease-in-out`
  },

  '.psds-tab__overflow-button': {
    position: 'absolute',
    top: 0,
    display: 'flex',
    alignItems: 'center',
    height: 'calc(100% + 1px)',
    width: '64px',
    color: core.colors.white,
    border: 0,
    zIndex: 1,
    cursor: 'pointer',
    outline: 'none',

    // __icon

'.psds-card__action-bar--fullOverlay.psds-card__action-bar--no-actionBarVisible': {
    background: 'none'
  },
  '.psds-card__action-bar--actionBarVisible': {
    opacity: 1
  },

  // __action-bar__button
  '.psds-card__action-bar__button': {
    fontSize: core.type.fontSizeXSmall,
    padding: 0,
    cursor: 'pointer',
    border: 'none',
    color: transparentize(0.2, core.colors.white),
    background: 'none',
    transition: `all ${core.motion.speedNormal}`,

    '&:hover, &:active': {
      color: core.colors.white
    },
    '& + &': {
      marginLeft: core.layout.spacingSmall
    }
  },
  // __action-bar__button--disabled
  '.psds-card__action-bar__button--disabled': {
    color: core.colors.gray02,
    background: core.colors.gray03,

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

import {colors, layout, type, motion} from '@pluralsight/ps-design-system-core'
import { widths as iconWidths } from '@pluralsight/ps-design-system-icon'
import { names as themeNames } from '@pluralsight/ps-design-system-theme'
import { transparentize } from '@pluralsight/ps-design-system-util'

import * as vars from '../vars/index.js'

const dayDimensions = {
  height: '32px',
  width: '32px',
  margin: `0 2px ${layout.spacingXSmall} 0`,
  border: '3px solid transparent'
}

export default {
  '.psds-date-picker': {
    display: 'inline-block'
  },
  '.psds-date-picker--disabled': {
    opacity: 0.5
  },

  // __field
  '.psds-date-picker__field': {
    display: 'none'
  },

lineHeight: '16px',
    fontWeight: type.fontWeightMedium,
    paddingTop: layout.spacingXSmall
  },
  [`.psds-text-input__sub-label.psds-theme--${themeNames.light}`]: {
    color: colors.gray03
  },

  // __error
  '.psds-text-input__error': {
    position: 'absolute',
    right: `calc(-1 * (${iconWidths.medium} + ${layout.spacingXSmall}))`,
    display: 'flex',
    alignItems: 'center',
    color: colors.red,
    marginLeft: layout.spacingXSmall
  }
}

lineHeight: '16px',
    fontWeight: type.fontWeightMedium,
    paddingTop: layout.spacingXSmall
  },
  [`.psds-date-picker__sub-label.psds-theme--${themeNames.light}`]: {
    color: colors.gray03
  },

  // __error
  '.psds-date-picker__error': {
    position: 'absolute',
    right: `calc(-1 * (${iconWidths.medium} + ${layout.spacingXSmall}))`,
    display: 'flex',
    alignItems: 'center',
    color: colors.red,
    marginLeft: layout.spacingXSmall
  },

  // __calendar-container
  '.psds-date-picker__calendar-container': {
    position: 'absolute',
    zIndex: '1',
    marginTop: layout.spacingXXSmall
  },

  '@keyframes psds-date-picker__calendar__keyframes__slide': {
    '100%': {
      transform: 'translateY(0)',
      opacity: 1
    }
  },