How to use the @pluralsight/ps-design-system-theme/vars.js.names.light function in @pluralsight/ps-design-system-theme

To help you get started, we’ve selected a few @pluralsight/ps-design-system-theme 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 / starrating / src / css / index.js View on Github external
'&::-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': {
github pluralsight / design-system / packages / badge / src / css / index.js View on Github external
[subtleThemeWithColor(themeNames.dark, colors.yellow)]: {
    color: core.colors.yellow,
    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)]: {
github pluralsight / design-system / packages / radio / src / css / index.js View on Github external
margin: '2px',
    borderRadius: '50%',
    background: core.colors.blue
  },

  '.psds-radio-button__input': {
    display: 'none'
  },

  '.psds-radio-button__label': {
    color: core.colors.bone,
    fontSize: core.type.fontSizeSmall,
    lineHeight: core.type.lineHeightStandard,
    fontWeight: core.type.fontWeightMedium
  },
  [`.psds-radio-button__label.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray04
  }
}
github pluralsight / design-system / packages / carousel / src / css / index.js View on Github external
height: '36px',
    justifyContent: 'center',
    position: 'absolute',
    top: '50%',
    transition: `transform ${core.motion.speedFast} ease-in-out`,
    width: '36px',

    '&:hover': { cursor: 'pointer' }
  },
  [`.psds-carousel__controls__control.psds-theme--${themeNames.dark}`]: {
    background: core.colors.gray03,
    color: core.colors.white,

    '&:hover, &:focus': { background: core.colors.gray04 }
  },
  [`.psds-carousel__controls__control.psds-theme--${themeNames.light}`]: {
    background: core.colors.white,
    color: core.colors.gray04,

    '&:hover, &:focus': { background: core.colors.bone }
  },
  [`.psds-carousel__controls__control--${directions.prev}`]: {
    left: 0,
    transform: 'translate(-50%, -50%)',

    '&[hidden]': { transform: 'translate(-50%, -50%) scale(0)' }
  },
  [`.psds-carousel__controls__control--${directions.next}`]: {
    right: 0,
    transform: 'translate(50%, -50%)',

    '&[hidden]': { transform: 'translate(50%, -50%) scale(0)' }
github pluralsight / design-system / packages / button / src / css / index.js View on Github external
[`.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',

    '&:not([disabled]):hover': {
      border: `1px solid ${core.colors.orangeLight}`,
      color: core.colors.orangeLight,
github pluralsight / design-system / packages / form / src / css / index.js View on Github external
[`.psds-form-button-row--align-${vars.aligns.right}`]: {
    justifyContent: 'flex-end'
  },
  '.psds-form-button-row__button': {
    marginRight: core.layout.spacingLarge,
    '&:last-child': {
      marginRight: 0
    }
  },

  '.psds-form-divider': {
    height: '1px',
    width: '100%',
    backgroundColor: core.colors.gray04
  },
  [`.psds-form-divider.psds-theme--${themeNames.light}`]: {
    backgroundColor: core.colors.gray01
  },

  '.psds-form-vertical-layout': {
    ...newStackingContextForFocusRingVisibility,
    width: '100%'
  },
  '.psds-form-vertical-layout__child': {
    marginBottom: core.layout.spacingLarge,
    '&:last-child': {
      marginBottom: 0
    }
  }
}
github pluralsight / design-system / packages / badge / src / css / index.js View on Github external
[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 / note / src / css / index.js View on Github external
opacity: 1
  },
  '.psds-note__action-bar--meta-sibling': {
    marginLeft: core.layout.spacingMedium
  },

  '.psds-note__action': {
    ...resetButton,
    cursor: 'pointer',
    fontSize: core.type.fontSizeXSmall,
    transition: `all ${core.motion.speedNormal}`,

    '&:hover, &:active': { color: core.colors.white },
    '& + &': { marginLeft: core.layout.spacingSmall }
  },
  [`.psds-note__action.psds-theme--${themeNames.light}`]: {
    '&:hover, &:active': { color: core.colors.gray03 }
  },

  '.psds-note__aside': {
    marginRight: core.layout.spacingMedium
  },

  '.psds-note__contents': {
    flex: 1,
    paddingTop: core.layout.spacingXXSmall,
    maxWidth: '100%',
    minWidth: 0,

    '& :first-child': { marginTop: 0 },
    '& :last-child': { marginBottom: 0 }
  },