How to use the @pluralsight/ps-design-system-util/color.js.transparentize function in @pluralsight/ps-design-system-util
To help you get started, we’ve selected a few @pluralsight/ps-design-system-util 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.
pluralsight / design-system / packages / button / src / css / index.js View on Github 
[`.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,
background: 'none'
}
},
[`.psds-button--appearance-${vars.appearances.flat}`]: {
border: 'none',
background: 'none',<div>
<div>
<div>
<style>{`
.grid {
display: grid;
grid-gap: ${core.layout.spacingSmall};
grid-template-columns: [left] 5fr [right] 1fr [end];
grid-template-rows: [row1] 1fr [row2] 2fr [row3] 5fr [end];
height: 100%;
width: 100%;
min-height: 400px;
}
.box {
border-radius: 2px;
background: ${transparentize(0.8, core.colors.gray03)};
}
.top {
grid-column: left / end;
grid-row: row1 / row2;
}
.hero {
grid-column: left / right;
grid-row: row2 / row3;
}
.body {
grid-column: left / right;
grid-row: row3 / end;
}
.side {
grid-column: right / end;
grid-row: row2 / end;</style></div></div></div>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)]: {
color: core.colors.gray04,
backgroundColor: transparentize(0.85, core.colors.blue)animation: `${spin || 'psds-button__keyframes__spin'} 1s linear infinite`
}),
[`.psds-button__loading--appearance-${vars.appearances.primary}`]: {
borderColor: transparentize(0.8, core.colors.gray04),
borderTopColor: core.colors.white
},
[`.psds-button__loading--appearance-${vars.appearances.secondary}`]: {
borderColor: transparentize(0.8, core.colors.gray01),
borderTopColor: core.colors.gray01
},
[`.psds-button__loading--appearance-${vars.appearances.secondary}.psds-button__loading--theme-${themeNames.light}`]: {
borderColor: transparentize(0.8, core.colors.gray04),
borderTopColor: core.colors.gray04
},
[`.psds-button__loading--appearance-${vars.appearances.stroke}`]: {
borderColor: transparentize(0.8, core.colors.white),
borderTopColor: core.colors.orange
},
[`.psds-button__loading--appearance-${vars.appearances.flat}.psds-button__loading--theme-${themeNames.light}`]: {
borderColor: transparentize(0.8, core.colors.gray04),
borderTopColor: core.colors.gray04
},
[`.psds-button__loading--appearance-${vars.appearances.flat}.psds-button__loading--theme-${themeDefaultName}`]: {
borderColor: transparentize(0.8, core.colors.white),
borderTopColor: core.colors.white
},
[`.psds-button__text`]: {
alignItems: 'center',
display: 'inline-flex',
pointerEvents: 'none'
}padding: `${core.layout.spacingXXSmall} ${core.layout.spacingMedium}`,
height: '40px'
},
[`.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',height: '32px'
},
[`.psds-button--size-${vars.sizes.medium}`]: {
fontSize: core.type.fontSizeSmall,
padding: `${core.layout.spacingXXSmall} ${core.layout.spacingMedium}`,
height: '40px'
},
[`.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}`]: {},
[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)
}
}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,
background: 'none'
}[`.psds-button__loading`]: ({ spin }) => ({
display: 'inline-block',
height: 'calc(100% - 4px)',
width: 'calc(100% - 4px)',
margin: '2px',
borderStyle: 'solid',
borderWidth: '2px',
borderRadius: '100%',
animation: `${spin || 'psds-button__keyframes__spin'} 1s linear infinite`
}),
[`.psds-button__loading--appearance-${vars.appearances.primary}`]: {
borderColor: transparentize(0.8, core.colors.gray04),
borderTopColor: core.colors.white
},
[`.psds-button__loading--appearance-${vars.appearances.secondary}`]: {
borderColor: transparentize(0.8, core.colors.gray01),
borderTopColor: core.colors.gray01
},
[`.psds-button__loading--appearance-${vars.appearances.secondary}.psds-button__loading--theme-${themeNames.light}`]: {
borderColor: transparentize(0.8, core.colors.gray04),
borderTopColor: core.colors.gray04
},
[`.psds-button__loading--appearance-${vars.appearances.stroke}`]: {
borderColor: transparentize(0.8, core.colors.white),
borderTopColor: core.colors.orange
},
[`.psds-button__loading--appearance-${vars.appearances.flat}.psds-button__loading--theme-${themeNames.light}`]: {
borderColor: transparentize(0.8, core.colors.gray04),
borderTopColor: core.colors.gray04
},
[`.psds-button__loading--appearance-${vars.appearances.flat}.psds-button__loading--theme-${themeDefaultName}`]: {
borderColor: transparentize(0.8, core.colors.white),padding: '1px'
},
[`.psds-switch__track--checked.psds-switch__track--color-${vars.colors.blue}`]: {
backgroundColor: core.colors.blue
},
[`.psds-switch__track--checked.psds-switch__track--color-${vars.colors.green}`]: {
backgroundColor: core.colors.green
},
[`.psds-switch__track--checked.psds-switch__track--color-${vars.colors.orange}`]: {
backgroundColor: core.colors.orange
},
[`.psds-switch__thumb`]: {
backgroundColor: core.colors.white,
borderRadius: '50%',
boxShadow: `0 0 2px ${transparentize(0.5, core.colors.black)}`,
transition: `transform ${core.motion.speedFast} ease-in-out`
},
[`.psds-switch__thumb--size-${vars.sizes.small}`]: {
height: '12px',
width: '12px'
},
[`.psds-switch__thumb--size-${vars.sizes.large}`]: {
height: '22px',
width: '22px'
},
[`.psds-switch__thumb--checked.psds-switch__thumb--size-${vars.sizes.small}`]: {
transform: 'translateX(12px)'
},
[`.psds-switch__thumb--checked.psds-switch__thumb--size-${vars.sizes.large}`]: {
transform: 'translateX(24px)'
},@pluralsight/ps-design-system-util
Runtime dependencies for utilitarian tasks. Analogous to a lodash.
