Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import { darken, lighten } from "@material-ui/core/styles/colorManipulator";
// TODO: Don't use lighten / darken
const slateBlueColor = "#717CE5";
const slateBlue = {
50: lighten(slateBlueColor, 0.125),
100: lighten(slateBlueColor, 0.1),
200: lighten(slateBlueColor, 0.075),
300: lighten(slateBlueColor, 0.05),
400: lighten(slateBlueColor, 0.025),
500: slateBlueColor,
600: darken(slateBlueColor, 0.025),
700: darken(slateBlueColor, 0.05),
800: darken(slateBlueColor, 0.075),
900: darken(slateBlueColor, 0.1),
A100: slateBlueColor,
A200: slateBlueColor,
A400: slateBlueColor,
A700: slateBlueColor,
contrastDefaultColor: "light",
};
export default slateBlue;
background-color: ${props => darken(props.theme.palette.primary.main, 0.2)};
border-color: ${props => darken(props.theme.palette.primary.main, 0.3)};
export default theme => {
const dark = theme.palette.type === 'dark'
const highlight = theme.palette.primary.main
const background = darken(theme.palette.background.default, dark ? 0.5 : 0.1)
return {
drawer: {
width: theme.together.drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: theme.together.drawerWidth,
},
shortcuts: {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
outline: 'none',
'&:focus, &.is-focused': {
boxShadow: `0 0 4px inset ${highlight}`,
},
palette: {
primary: {
light: '#63ccff',
main: '#009be5',
dark: '#006db3'
},
secondary: {
light: lighten('#e51a90', 0.1),
main: '#e51a90',
dark: darken('#e51a90', 0.1)
},
error: {
light: lighten('#D8000C', 0.1),
main: '#D8000C',
dark: darken('#D8000C', 0.1)
},
warning: {
light: lighten('#ffae42', 0.1),
main: '#ffae42',
dark: darken('#ffae42', 0.1)
},
info: {
light: lighten('#88ffdd', 0.1),
main: '#88ffdd',
dark: darken('#88ffdd', 0.1)
},
success: {
light: lighten('#4caf50', 0.1),
main: '#4caf50',
dark: darken('#4caf50', 0.1)
}
getSliderColor() {
if (this.props.type === SmartDialogSlider.types.blinds) {
return undefined;
} else if (this.props.type === SmartDialogSlider.types.dimmer) {
const val = this.state.value;
return darken(Theme.palette.lampOn, 1 - (val / 70 + 0.3));
} else {
return Theme.slider.background;
}
}
backgroundColor: fade(colors.primary, 0.12)
},
"&:active": {
boxShadow: null
},
"&:hover": {
boxShadow: null
},
boxShadow: null
},
containedPrimary: {
"&:active": {
backgroundColor: darken(colors.primary, 0.4)
},
"&:hover": {
backgroundColor: darken(colors.primary, 0.1)
}
},
label: {
color: colors.font.button,
fontWeight: 600
},
root: {
"& svg": {
marginLeft: 8
},
borderRadius: 4
},
text: {
"& span": {
color: colors.font.default
}
...defaultFont,
fontSize: 20,
color: grayColor
},
labelMini: {
...defaultFont,
fontSize: 16,
color: grayColor
},
link: {
...defaultFont,
fontSize: 16,
color: grayColor,
textDecoration: 'none',
'&:hover': {
color: darken(grayColor, 0.4)
}
}
});
const styles = theme => ({
leftIcon: {
marginRight: theme.spacing.unit
},
root: {
backgroundColor: baseColor,
'&:hover': {
backgroundColor: darken(baseColor, 0.2),
}
}
});
...flexContainer,
paddingTop: theme.spacing(2),
flexDirection: 'column',
alignItems: 'center'
},
textHolder: {
...defaultFont,
paddingBottom: theme.spacing(1),
color: grayColor
},
table: {
width: '100%'
},
tableHead: {
...defaultFont,
color: darken(grayColor, 0.25),
fontSize: 20
},
avatar: {
backgroundColor: theme.palette.common.white
},
helperText: {
...defaultFont,
color: lighten(grayColor, 0.1),
fontSize: 16
},
noData: {
...defaultFont
},
withPadding: {
padding: theme.spacing(1) + 4
},