How to use the @arch-ui/color-utils.darken function in @arch-ui/color-utils
To help you get started, we’ve selected a few @arch-ui/color-utils 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.
keystonejs / keystone / packages / arch / packages / theme / src / colors.js View on Github 
darkenSource.forEach(n => (variants[`D${n}`] = darken(color, n)));
source.forEach(n => (variants[`A${n}`] = alpha(color, n / 100)));const { border, text } = ghostAppearance[appearance];
return {
border: '1px solid',
borderColor: border,
color: text,
fontWeight: 'normal',
opacity: isDisabled ? 0.5 : null,
':hover, :focus': {
backgroundColor: alpha(border, 0.1),
borderColor: darken(border, 10),
},
':active': {
color: darken(text, 10),
borderColor: darken(border, 20),
backgroundColor: alpha(border, 0.2),
},
};
}export function makeGhostVariant({ appearance, isDisabled }) {
const { border, text } = ghostAppearance[appearance];
return {
border: '1px solid',
borderColor: border,
color: text,
fontWeight: 'normal',
opacity: isDisabled ? 0.5 : null,
':hover, :focus': {
backgroundColor: alpha(border, 0.1),
borderColor: darken(border, 10),
},
':active': {
color: darken(text, 10),
borderColor: darken(border, 20),
backgroundColor: alpha(border, 0.2),
},
};
}export function makeGhostVariant({ appearance, isDisabled }) {
const { border, text } = ghostAppearance[appearance];
return {
border: '1px solid',
borderColor: border,
color: text,
fontWeight: 'normal',
opacity: isDisabled ? 0.5 : null,
':hover, :focus': {
backgroundColor: alpha(border, 0.1),
borderColor: darken(border, 10),
},
':active': {
color: darken(text, 10),
borderColor: darken(border, 20),
backgroundColor: alpha(border, 0.2),
},
};
}@arch-ui/color-utils
Color Utilities used throughout @arch-ui components & @keystonejs Admin UI.
