How to use the @pluralsight/ps-design-system-core.colors.gray05 function in @pluralsight/ps-design-system-core

To help you get started, we’ve selected a few @pluralsight/ps-design-system-core 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 / textinput / src / css / index.js View on Github external
right: layout.spacingXSmall
  },
  [`.psds-text-input__icon--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray02
  },

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

  // __sub-label
  '.psds-text-input__sub-label': {
    color: colors.gray02,
    fontSize: type.fontSizeXSmall,
    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': {
github pluralsight / design-system / packages / datepicker / src / css / index.js View on Github external
'.psds-date-picker__sub-field': {
    border: 'none',
    display: 'inline-block',
    background: 'none',
    color: colors.gray05,

    '&:focus': { outline: 'none' }
  },
  [`.psds-date-picker__sub-field--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01
  },

  // __sub-field-divider
  '.psds-date-picker__sub-field-divider': {
    border: 'none',
    color: colors.gray05
  },
  [`.psds-date-picker__sub-field-divider--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01
  },

  // __field-container
  '.psds-date-picker__field-container': {
    position: 'relative',
    display: 'flex',
    borderRadius: '2px',
    alignItems: 'center',
    width: '100%',
    height: '40px',
    minWidth: `calc(192px + ${iconWidths.medium} + ${layout.spacingXSmall})`,
    padding: `0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall}) 0 ${layout.spacingMedium}`,
    background: colors.bone
github pluralsight / design-system / packages / datepicker / src / css / index.js View on Github external
},
  '.psds-date-picker--disabled': {
    opacity: 0.5
  },

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

  // __sub-field
  '.psds-date-picker__sub-field': {
    border: 'none',
    display: 'inline-block',
    background: 'none',
    color: colors.gray05,

    '&:focus': { outline: 'none' }
  },
  [`.psds-date-picker__sub-field--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01
  },

  // __sub-field-divider
  '.psds-date-picker__sub-field-divider': {
    border: 'none',
    color: colors.gray05
  },
  [`.psds-date-picker__sub-field-divider--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01
  },
github pluralsight / design-system / packages / textarea / src / css / index.js View on Github external
'.psds-text-area__field-container': {
    position: 'relative',
    display: 'flex',
    alignItems: 'center'
  },

  '.psds-text-area__label': {
    width: '100%',
    color: colors.bone,
    fontSize: type.fontSizeSmall,
    lineHeight: '16px',
    fontWeight: type.fontWeightMedium,
    paddingBottom: layout.spacingXSmall
  },
  [`.psds-text-area__label.psds-theme--${themeNames.light}`]: {
    color: colors.gray05
  },

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

  '.psds-text-area__error': {
    position: 'absolute',
    right: `calc(-1 * (${iconWidths.medium} + ${layout.spacingXSmall}))`,
github pluralsight / design-system / packages / textinput / src / css / index.js View on Github external
'&:focus': {
      border: '1px solid transparent'
    }
  },

  [`.psds-text-input__field--error.psds-theme--${themeNames.light}`]: {
    border: '1px solid transparent'
  },
  [`.psds-text-input__field--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01,
    background: colors.gray06,
    border: `1px solid ${colors.gray03}`
  },
  [`.psds-text-input__field--appearance-${vars.appearances.subtle}.psds-theme--${themeNames.light}`]: {
    color: colors.gray05
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.left}`]: {
    padding: `0 ${layout.spacingMedium} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.right}`]: {
    padding: `0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall}) 0 ${layout.spacingMedium}`
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.left}.psds-text-input--small`]: {
    padding: `0 ${layout.spacingXSmall} 0 ${parseInt(
      layout.spacingMedium,
      10
    ) + parseInt(iconWidths.medium, 10)}px`
  },
  [`.psds-text-input__field--icon-align-${vars.iconAligns.right}.psds-text-input--small`]: {
    padding: `0 ${parseInt(layout.spacingMedium, 10) +
      parseInt(iconWidths.medium, 10)}px 0 ${layout.spacingXSmall}`