vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
102 lines (101 loc) • 2.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.wrapperStyle = exports.labelStyle = exports.defaultStyles = void 0;
const wrapperStyle = exports.wrapperStyle = {
flexDirection: 'column',
width: '100%',
':focus-within label': {
transform: 'translateY(8px)',
fontSize: 12
}
};
const defaultStyles = _ref => {
let {
theme,
disabled,
loading,
isValid
} = _ref;
return {
...theme.typeScale.columbus.standard.styles,
appearance: 'none',
borderWidth: 1,
borderStyle: 'solid',
borderRadius: 4,
boxSizing: 'border-box',
display: 'block',
width: '100%',
margin: 0,
outlineWidth: 0,
paddingTop: theme.tokens.inputPaddingVertical * 2,
paddingBottom: theme.tokens.inputPaddingVertical / 2,
paddingLeft: theme.tokens.inputPaddingHorizontal - 1,
paddingRight: theme.tokens.inputPaddingHorizontal - 1,
borderColor: theme.tokens.inputBorder,
color: theme.tokens.inputForeground,
background: theme.tokens.inputBackground,
'::placeholder': {
color: 'transparent'
},
':focus': {
borderColor: theme.tokens.inputBorderFocus,
'::placeholder': {
color: theme.tokens.inputPlaceholder
}
},
extend: [{
condition: loading,
style: {
userSelect: 'none'
}
}, {
condition: disabled,
style: {
':disabled': {
cursor: 'not-allowed',
borderColor: theme.tokens.inputDisabledBorder,
backgroundColor: theme.tokens.inputDisabledBackground,
color: theme.tokens.inputForeground
}
}
}, {
condition: !isValid,
style: {
':not(:focus)': {
borderWidth: 2,
borderColor: theme.color.foreground.alert,
paddingTop: theme.tokens.inputPaddingVertical * 2 - 1,
paddingBottom: theme.tokens.inputPaddingVertical / 2 - 1,
paddingLeft: theme.tokens.inputPaddingHorizontal - 2,
paddingRight: theme.tokens.inputPaddingHorizontal - 2
}
}
}]
};
};
exports.defaultStyles = defaultStyles;
const labelStyle = _ref2 => {
let {
isEmpty,
isValid,
theme
} = _ref2;
return {
paddingLeft: theme.tokens.inputPaddingHorizontal,
paddingRight: theme.tokens.inputPaddingHorizontal,
color: isValid ? theme.color.foreground.secondary : theme.color.foreground.alert,
transitionProperty: 'font-size, transform',
transitionDuration: '60ms',
transitionTimingFunction: 'ease-out',
transform: 'translateY(' + (isEmpty ? 17 : 8) + 'px)',
fontSize: isEmpty ? 16 : 12,
letterSpacing: '0.02em',
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 300,
position: 'absolute',
pointerEvents: 'none'
};
};
exports.labelStyle = labelStyle;