vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
96 lines (95 loc) • 2.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.iconButtonStyle = exports.commonStyles = void 0;
var _sizeToRem = require("../../utils/size-to-rem");
const commonStyles = _ref => {
let {
size,
bleed
} = _ref;
return () => ({
boxSizing: 'border-box',
height: (0, _sizeToRem.pxToRem)(size),
width: (0, _sizeToRem.pxToRem)(size),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '50%',
transitionProperty: 'background-color, transform',
transitionDuration: '0.25s',
transitionTimingFunction: 'ease-in-out',
'[aria-disabled=true]': {
opacity: '0.3'
},
':active:not([aria-disabled=true])': {
transform: 'scale(0.8)',
willChange: 'transform'
},
// Extends touch area outside IconButton dimensions
':after': {
content: '""',
position: 'absolute',
height: (0, _sizeToRem.pxToRem)(44),
width: (0, _sizeToRem.pxToRem)(44)
},
extend: [{
condition: bleed,
style: {
margin: (0, _sizeToRem.pxToRem)(-8)
}
}]
});
};
exports.commonStyles = commonStyles;
const iconButtonStyle = (variant, intent) => _ref2 => {
let {
theme: {
color: {
foreground,
ornament
}
}
} = _ref2;
if (variant === 'outline') {
if (intent === 'destructive') return {
borderColor: ornament.alert,
borderStyle: 'solid',
borderWidth: 1,
':hover:not([aria-disabled=true])': {
background: foreground.alert
}
};
return {
borderColor: foreground.primary,
borderStyle: 'solid',
borderWidth: 1,
':hover:not([aria-disabled=true])': {
background: foreground.primary
}
};
}
if (variant === 'media') {
if (intent === 'destructive') {
return {
background: ornament.alert,
':hover:not([aria-disabled=true])': {
background: foreground.primary
}
};
}
return {
background: foreground.primary,
':hover:not([aria-disabled=true])': {
background: ornament.divider
}
};
}
return {
':hover:not([aria-disabled=true])': {
background: ornament.divider
}
};
};
exports.iconButtonStyle = iconButtonStyle;