How to use the @pluralsight/ps-design-system-theme/vars.js.names.dark 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
}

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': {
    color: core.colors.gray02
  },
  '.psds-starrating__star--interactive': {
    cursor: 'pointer'
github pluralsight / design-system / packages / badge / src / css / index.js View on Github external
[subtleThemeWithColor(themeNames.dark, colors.gray)]: {
    color: core.colors.gray02,
    borderColor: core.colors.gray02
  },

  [subtleThemeWithColor(themeNames.dark, colors.green)]: {
    color: core.colors.green,
    borderColor: core.colors.green
  },

  [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)
github pluralsight / design-system / packages / note / src / css / index.js View on Github external
},

  '.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 }
  },
  [`.psds-note__contents.psds-theme--${themeNames.dark}`]: {
    color: core.colors.white
  },
  [`.psds-note__contents.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray06
  },

  '.psds-note__header': {
    alignItems: 'center',
    display: 'flex',
    marginBottom: core.layout.spacingSmall
  },

  '.psds-note__heading': {
    fontSize: core.type.fontSizeSmall,
    fontWeight: core.type.fontWeightBold,
    lineHeight: core.type.lineHeightTight,
github pluralsight / design-system / packages / carousel / src / css / index.js View on Github external
'.psds-carousel__controls__control': {
    ...resetButton,
    alignItems: 'center',
    borderRadius: '100%',
    boxShadow: '0px 4px 14px rgba(0, 0, 0, 0.25)',
    display: 'flex',
    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)' }
github pluralsight / design-system / packages / badge / src / css / index.js View on Github external
color: core.colors.black,
    backgroundColor: core.colors.yellow,
    borderColor: core.colors.yellow
  },
  [defaultWithColor(colors.red)]: {
    color: core.colors.white,
    backgroundColor: core.colors.red,
    borderColor: core.colors.red
  },
  [defaultWithColor(colors.blue)]: {
    color: core.colors.white,
    backgroundColor: core.colors.blue,
    borderColor: core.colors.blue
  },

  [subtleThemeWithColor(themeNames.dark, colors.gray)]: {
    color: core.colors.gray02,
    borderColor: core.colors.gray02
  },

  [subtleThemeWithColor(themeNames.dark, colors.green)]: {
    color: core.colors.green,
    borderColor: core.colors.green
  },

  [subtleThemeWithColor(themeNames.dark, colors.yellow)]: {
    color: core.colors.yellow,
    borderColor: core.colors.yellow
  },

  [subtleThemeWithColor(themeNames.dark, colors.red)]: {
    color: core.colors.red,