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

const decorateCards = (sizes, props, state) => {
  const cardMaxWidths = {
    small: '140px',
    medium: '320px',
    large: '540px'
  }
  // NOTE: jsx-style classes evaluated in the context of Example.React
  let decorated = `<div>`

  state.codes.forEach((code, i) =&gt; {
    decorated += `<div style="{{">${code}</div>`
  })

  decorated += '</div>'

  return decorated
}
const decorateCardsSML = decorateCards.bind(null, Object.keys(Card.sizes))

}
  },

  [`.psds-table__cell.psds-theme--${themeNames.light}`]: {
    '& a': {
      '&:active, &:focus, &:hover': {
        color: core.colors.black
      }
    }
  },

  '.psds-table__cell--emphasis': {
    color: core.colors.white,
    fontWeight: core.type.fontWeightMedium
  },
  [`.psds-table__cell--emphasis.psds-theme--${themeNames.light}`]: {
    color: core.colors.black
  },
  [`.psds-table__cell--align-${vars.aligns.left}`]: {
    justifyContent: 'left',
    textAlign: 'left'
  },
  [`.psds-table__cell--align-${vars.aligns.right}`]: {
    justifyContent: 'flex-end',
    textAlign: 'right'
  },
  [`.psds-table__cell--align-${vars.aligns.center}`]: {
    justifyContent: 'center',
    textAlign: 'center'
  },

  // __column-header

padding: `${layout.spacingXLarge} ${layout.spacingLarge}`,
    textAlign: 'center',
    color: colors.white
  },
  [`.psds-error-page.psds-theme--${themeNames.light}`]: {
    color: colors.gray06
  },

  // __icon
  '.psds-error-page__icon': {
    margin: '0 auto',
    fill: 'currentColor',
    height: '128px',
    width: '128px'
  },
  [`.psds-error-page__icon.psds-theme--${themeNames.light}`]: {
    color: colors.gray04
  },

  // __code
  '.psds-error-page__code': {
    padding: `4px 0 ${layout.spacingSmall} 0`
  },

  // __search
  '.psds-error-page__search': {
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'center',
    color: colors.gray02
  },
  [`.psds-error-page__search.psds-theme--${themeNames.light}`]: {

margin: '0 auto',
    padding: `${core.layout.spacingXLarge} ${core.layout.spacingLarge}`,
    textAlign: 'center',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    transition: `opacity ${core.motion.speedXFast} ${core.motion.speedNormal}`
  },
  '.psds-emptystate--hidden': {
    opacity: 0
  },
  ['.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
  },

alignItems: 'center',
    width: '100%',
    maxWidth: '100%',
  },

  // __icon
  '.psds-dropdown__icon': {
    position: 'absolute',
    left: 'auto',
    right: core.layout.spacingXSmall,
    display: 'flex',
    alignItems: 'center',
    color: core.colors.gray03,
    cursor: 'pointer'
  },
  [`.psds-dropdown__icon.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03
  },
  [`.psds-dropdown__icon--appearance-${vars.appearances.subtle}`]: {
    color: core.colors.gray01
  },

  // __label
  '.psds-dropdown__label': {
    color: core.colors.bone,
    fontSize: core.type.fontSizeSmall,
    lineHeight: '16px',
    fontWeight: core.type.fontWeightMedium,
    paddingBottom: core.layout.spacingXSmall
  },
  [`.psds-dropdown__label.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray05

// __icon
  '.psds-date-picker__icon': {
    position: 'absolute',
    top: '0',
    left: 'auto',
    right: layout.spacingXSmall,
    display: 'flex',
    alignItems: 'center',
    height: '100%',
    color: colors.gray03,
    cursor: 'pointer',
    background: 'none',
    border: 'none'
  },
  [`.psds-date-picker__icon.psds-theme--${themeNames.light}`]: {
    color: colors.gray02
  },
  [`.psds-date-picker__icon--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray02
  },

  // __label
  '.psds-date-picker__label': {
    color: colors.bone,
    fontSize: type.fontSizeSmall,
    lineHeight: '16px',
    fontWeight: type.fontWeightMedium,
    paddingBottom: layout.spacingXSmall
  },
  [`.psds-date-picker__label.psds-theme--${themeNames.light}`]: {
    color: colors.gray05

'&::-moz-focus-inner': {
    border: 0,
    padding: 0
  }
}

export default {
  '.psds-starrating__star': {
    ...resetButton,
    lineHeight: 0
  },

  [`.psds-starrating__star--theme-${themeNames.dark}`]: {
    color: core.colors.gray04
  },
  [`.psds-starrating__star--theme-${themeNames.light}`]: {
    color: core.colors.gray01
  },

  [`.psds-starrating__star__half__secondary--theme-${themeNames.dark}`]: {
    color: core.colors.gray04,
    fill: core.colors.gray04 // safari needs this
  },
  [`.psds-starrating__star__half__secondary--theme-${themeNames.light}`]: {
    color: core.colors.gray01,
    fill: core.colors.gray01 // safari needs this
  },

  '.psds-starrating__star--active': {
    color: core.colors.yellow
  },
  '.psds-starrating__star--bright': {

flex: 1,
    flexDirection: 'column',
    alignSelf: 'center',
    minWidth: 0
  },

  // __title
  '.psds-row__title': {
    display: 'block',
    fontWeight: core.type.fontWeightMedium,
    textAlign: 'left'
  },
  [`.psds-row__title.psds-theme--${themeDefaultName}`]: {
    color: core.colors.white
  },
  [`.psds-row__title.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray06
  },
  [`.psds-row__title--size-${vars.sizes.small}`]: {
    fontSize: core.type.fontSizeSmall,
    lineHeight: core.type.lineHeightTight
  },
  [`.psds-row__title--size-${vars.sizes.medium}`]: {
    fontSize: core.type.fontSizeMedium,
    lineHeight: core.type.lineHeightStandard
  },

  // __image-link
  '.psds-row__image-link': {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',

color: 'inherit',
      cursor: 'pointer',
      textDecoration: 'none',

      '&:hover, &:active': {
        textDecoration: 'underline',
        transition: `all ${core.motion.speedNormal}`
      }
    }
  },
  [`.psds-card__text-link--theme-${themeNames.dark}`]: {
    '&:hover, &:active': {
      color: core.colors.white
    }
  },
  [`.psds-card__text-link--theme-${themeNames.light}`]: {
    '&:hover, &:active': {
      color: core.colors.gray03
    }
  },

  // __overlays
  '.psds-card__overlays': {
    position: 'relative',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    background: core.colors.gray05,

    // TODO: target child
    '&:hover div, &:active div': {
      opacity: 1

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,

    // __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,