vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
108 lines (107 loc) • 3.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.labelStyle = exports.checkboxStyle = void 0;
const checkmarkIcon = color => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none' %3E %3Cpath stroke='${encodeURIComponent(color)}' d='M1 6L4 9L11 1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' %3E %3C/path%3E %3C/svg%3E")`;
const checkboxStyle = _ref => {
let {
isValid
} = _ref;
return _ref2 => {
let {
theme
} = _ref2;
return {
alignItems: 'center',
appearance: 'none',
backgroundColor: theme.tokens.inputBackground,
borderColor: theme.tokens.inputControlBorder,
borderRadius: 4,
borderStyle: 'solid',
borderWidth: 1,
boxSizing: 'border-box',
cursor: 'pointer',
display: 'flex',
flexGrow: 0,
flexShrink: 0,
height: 20,
justifyContent: 'center',
margin: 0,
outlineWidth: 0,
padding: 0,
position: 'relative',
width: 20,
extend: [{
condition: !isValid,
style: {
borderColor: theme.color.foreground.alert,
borderWidth: 2,
':focus-visible': {
...theme.states.focus,
outlineColor: theme.color.ornament.alert
}
}
}, {
condition: isValid,
style: {
':active': {
color: 'pink'
}
}
}],
':checked': {
backgroundColor: theme.tokens.inputControlBackground,
backgroundImage: checkmarkIcon(theme.tokens.inputControlForeground),
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: '12px 10px',
borderColor: theme.tokens.inputControlBackground
},
':disabled': {
backgroundColor: theme.tokens.inputDisabledBackground,
borderColor: theme.tokens.inputDisabledBorder,
cursor: 'not-allowed',
':checked': {
backgroundColor: theme.tokens.inputDisabledBackground,
backgroundImage: checkmarkIcon(theme.tokens.inputDisabledControl),
borderColor: theme.tokens.inputDisabledBorder
}
},
':after': {
borderRadius: '4px',
borderWidth: 1,
bottom: 0,
content: '" "',
left: 0,
margin: 0,
position: 'absolute',
right: 0,
top: 0,
transformOrigin: 'center',
transition: 'box-shadow 150ms ease-out,transform 150ms ease-out'
},
':focus-visible': theme.states.focus
};
};
};
exports.checkboxStyle = checkboxStyle;
const labelStyle = _ref3 => {
let {
isValid
} = _ref3;
return _ref4 => {
let {
theme
} = _ref4;
return {
color: isValid ? theme.color.foreground.primary : theme.color.foreground.alert,
fontFamily: theme.fontTypes.NOVUM,
fontSize: 16,
lineHeight: 1.3,
fontWeight: 300,
letterSpacing: '0.02em'
};
};
};
exports.labelStyle = labelStyle;