Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
control: (provided, state) => ({
...provided,
...uniformHeight,
background: state.isFocused ? colors.N10 : colors.N05,
border: 0,
boxShadow: 'none',
cursor: 'text',
padding: 0,
minHeight: 34,
}),
menu: () => ({
...cropStyles,
...offset,
}}
{...props}
/>
);
};
Title.defaultProps = {
as: 'h3',
crop: false,
margin: 'none',
};
export const Kbd = styled.kbd({
backgroundColor: colors.N05,
border: `1px solid ${colors.N20}`,
borderRadius: 3,
boxShadow: '0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset',
display: 'inline-block',
fontFamily: 'Monaco, monospace',
fontSize: '0.85em',
fontWeight: 'bold',
lineHeight: 'inherit',
padding: '1px 5px',
position: 'relative',
top: '-1px',
verticalAlign: 'middle',
whiteSpace: 'nowrap',
});
export const A11yText = ({ tag: Tag, ...props }) => (
color: 'inherit',
width: '100%',
':hover': {
borderColor: colors.N30,
outline: 0,
},
':focus': {
borderColor: colors.primary,
outline: 0,
},
'&[disabled]': {
borderColor: colors.N15,
backgroundColor: colors.N05,
},
...(props.isMultiline
? {
lineHeight: 'inherit',
minHeight: 100,
resize: 'vertical',
whiteSpace: 'wrap',
}
: undefined),
});
const HeaderButton = props => (
<button type="button">
);
</button>
default: colors.N60,
primary: colors.primary,
danger: colors.danger,
create: colors.create,
warning: colors.warning,
};
const boldTextColor = {
default: 'white',
primary: 'white',
danger: 'white',
create: 'white',
warning: 'white',
};
const subtleBackgroundColor = {
default: colors.N05,
primary: colors.B.L90,
danger: colors.R.L90,
create: colors.G.L90,
warning: colors.Y.L90,
};
const subtleBorderColor = {
default: colors.N10,
primary: colors.B.L80,
danger: colors.R.L80,
create: colors.G.L80,
warning: colors.Y.L80,
};
const subtleTextColor = {
default: colors.N50,
primary: colors.B.L30,
danger: colors.R.L30,
let fg;
let border;
let size = 24;
if (isDisabled) {
bg = isSelected ? colors.N20 : colors.N10;
fg = isSelected ? 'white' : colors.N10;
border = isSelected ? colors.N20 : colors.N10;
} else if (isSelected) {
bg = isFocused ? 'white' : colors.B.base;
fg = isFocused ? colors.B.base : 'white';
border = colors.B.base;
} else {
border = isFocused ? colors.N15 : colors.N10;
bg = isFocused ? colors.N05 : 'white';
fg = isFocused ? colors.N05 : 'white';
}
return (
let bg;
let fg;
let border;
let size = 24;
if (isDisabled) {
bg = isSelected ? colors.N20 : colors.N10;
fg = isSelected ? 'white' : colors.N10;
border = isSelected ? colors.N20 : colors.N10;
} else if (isSelected) {
bg = isFocused ? 'white' : colors.B.base;
fg = isFocused ? colors.B.base : 'white';
border = colors.B.base;
} else {
border = isFocused ? colors.N15 : colors.N10;
bg = isFocused ? colors.N05 : 'white';
fg = isFocused ? colors.N05 : 'white';
}
return (
borderBottomColor: `rgba(0, 0, 0, 0.2) !important`,
borderRadius: borderRadius,
color: colors.text,
display: 'inline-block',
fontWeight: 500,
padding: `${gridSize * 0.75}px ${gridSize * 2}px`,
outline: 'none',
':hover, :focus': {
backgroundColor: 'white !important',
borderColor: `rgba(0, 0, 0, 0.15)`,
boxShadow: '0 2px 1px rgba(0,0,0,0.05)',
textDecoration: 'none',
},
':active': {
backgroundColor: `${colors.N05} !important`,
boxShadow: 'none',
},
}}
{...props}
/>
);
alignItems: 'center',
border: `1px solid ${colors.N10}`,
borderRadius,
display: 'flex',
fontSize: '0.75em',
fontWeight: 500,
lineHeight: 1,
transition: 'border-color 150ms linear',
width: '100%',
userSelect: 'none',
':hover, :focus': {
borderColor: colors.N20,
},
':active': {
backgroundColor: colors.N05,
},
}}
{...props}
/>
);
};
const StretchGroup = props => ;
borderBottomColor: `rgba(0, 0, 0, 0.2) !important`,
borderRadius: borderRadius,
color: colors.text,
display: 'inline-block',
fontWeight: 500,
padding: `${gridSize * 0.75}px ${gridSize * 2}px`,
outline: 'none',
':hover, :focus': {
backgroundColor: 'white !important',
borderColor: `rgba(0, 0, 0, 0.15)`,
boxShadow: '0 2px 1px rgba(0,0,0,0.05)',
textDecoration: 'none',
},
':active': {
backgroundColor: `${colors.N05} !important`,
boxShadow: 'none',
},
}}
{...props}
/>
);