How to use @arch-ui/color-utils - 10 common examples
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 / app-admin-ui / client / components / Nav / index.js View on Github 
const GrabHandle = styled.div(({ isActive }) => ({
backgroundColor: alpha(colors.text, 0.06),
height: isActive ? '100%' : 0,
cursor: 'col-resize',
position: 'absolute',
right: 0,
top: 0,
transition: `background-color ${TRANSITION_DURATION} linear, height ${TRANSITION_DURATION} ${TRANSITION_EASING}`,
width: 1,
':hover': {
transitionDelay: '100ms', // avoid inadvertent mouse passes
backgroundColor: alpha(colors.text, 0.12),
},
':active': {
backgroundColor: alpha(colors.text, 0.24),
},position: 'absolute',
left: 0,
});
const HeaderRight = styled.div({
position: 'absolute',
left: 0,
});
const Body = styled.div({
maxHeight: 300,
overflowY: 'auto',
overflowX: 'hidden',
WebkitOverflowScroll: 'touch',
});
const Footer = styled(Bar)({
alignItems: 'center',
boxShadow: `0 -2px 0 ${alpha(colors.text, 0.1)}`,
display: 'flex',
justifyContent: 'space-between',
});
// Other
export const DisclosureArrow = styled.span(({ size = '0.3em' }) => ({
borderLeft: `${size} solid transparent`,
borderRight: `${size} solid transparent`,
borderTop: `${size} solid`,
display: 'inline-block',
height: 0,
marginLeft: '0.33em',
marginTop: '-0.125em',
verticalAlign: 'middle',
width: 0,
}));const GrabHandle = styled.div(({ isActive }) => ({
backgroundColor: alpha(colors.text, 0.06),
height: isActive ? '100%' : 0,
cursor: 'col-resize',
position: 'absolute',
right: 0,
top: 0,
transition: `background-color ${TRANSITION_DURATION} linear, height ${TRANSITION_DURATION} ${TRANSITION_EASING}`,
width: 1,
':hover': {
transitionDelay: '100ms', // avoid inadvertent mouse passes
backgroundColor: alpha(colors.text, 0.12),
},
':active': {
backgroundColor: alpha(colors.text, 0.24),
},
// increase hit-area
':before': {
bottom: -gridSize,
content: '" "',
left: -gridSize,
position: 'absolute',
right: -gridSize,
top: -gridSize,
},
}));
const CollapseExpand = styled.button(({ isCollapsed, mouseIsOverNav }) => {const GrabHandle = styled.div(({ isActive }) => ({
backgroundColor: alpha(colors.text, 0.06),
height: isActive ? '100%' : 0,
cursor: 'col-resize',
position: 'absolute',
right: 0,
top: 0,
transition: `background-color ${TRANSITION_DURATION} linear, height ${TRANSITION_DURATION} ${TRANSITION_EASING}`,
width: 1,
':hover': {
transitionDelay: '100ms', // avoid inadvertent mouse passes
backgroundColor: alpha(colors.text, 0.12),
},
':active': {
backgroundColor: alpha(colors.text, 0.24),
},
// increase hit-area
':before': {
bottom: -gridSize,
content: '" "',
left: -gridSize,
position: 'absolute',
right: -gridSize,
top: -gridSize,
},
}));
const CollapseExpand = styled.button(({ isCollapsed, mouseIsOverNav }) => {export const Blanket = ({ isTinted, isLight, ...props }) => {
let bg = 'transparent';
if (isTinted) {
bg = isLight ? 'rgba(255, 255, 255, 0.5)' : alpha(colors.N100, 0.2);
}
return (
<div>
);</div>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),
},
};
} source.forEach(n => (variants[`A${n}`] = alpha(color, n / 100)));
return variants;borderColor: border,
background: bg,
}
: null;
const hoverStyles = isHover
? {
...hoverAndFocus,
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.12)',
}
: null;
const focusStyles =
isFocus && !isDisabled
? {
...hoverAndFocus,
borderColor: focusRing,
boxShadow: `0 0 0 3px ${alpha(focusRing || bg, 0.2)}`,
}
: null;
const activeStyles =
isActive || isSelected
? {
background: activeBg,
borderColor: border,
}
: null;
return {
backgroundColor: bg,
backgroundRepeat: 'repeat-x',
borderColor: border,
color: text,
fontWeight: 'bold',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),
},
};
}{ref => (
{icon}
{label}
)}@arch-ui/color-utils
Color Utilities used throughout @arch-ui components & @keystonejs Admin UI.
