@material-ui/core/styles#darken TypeScript Examples
The following examples show how to use
@material-ui/core/styles#darken.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From vscode-crossnote with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
card: {
padding: theme.spacing(2),
position: "relative",
},
actionButtons: {
position: "absolute",
top: "0",
right: "0",
},
section: {
marginTop: theme.spacing(2),
},
dropArea: {
textAlign: "center",
padding: "24px",
border: "4px dotted #c7c7c7",
backgroundColor: darken(theme.palette.background.paper, 0.01),
cursor: "pointer",
"&:hover": {
backgroundColor: darken(theme.palette.background.paper, 0.2),
},
},
disabled: {
cursor: "not-allowed",
},
})
)
Example #2
| Source File: index.tsx From vscode-crossnote with GNU Affero General Public License v3.0 | 6 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
card: {
padding: theme.spacing(2),
position: "relative",
},
actionButtons: {
position: "absolute",
top: "0",
right: "0",
},
section: {
marginTop: theme.spacing(2),
},
dropArea: {
textAlign: "center",
padding: "24px",
border: "4px dotted #c7c7c7",
backgroundColor: darken(theme.palette.background.paper, 0.01),
cursor: "pointer",
"&:hover": {
backgroundColor: darken(theme.palette.background.paper, 0.2),
},
},
canvasWrapper: {
marginTop: theme.spacing(2),
// height: 0,
// paddingTop: "56.25%" // 16:9
},
canvas: {
maxWidth: "100%",
},
disabled: {
cursor: "not-allowed",
},
})
)
Example #3
| Source File: InvoiceShow.tsx From ra-enterprise-demo with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
root: {
width: 600,
margin: 'auto',
borderStyle: 'solid',
borderWidth: 1,
borderColor:
theme.palette.type === 'light'
? lighten(fade(theme.palette.divider, 1), 0.88)
: darken(fade(theme.palette.divider, 1), 0.68),
},
spacer: { height: 20 },
invoices: { margin: '10px 0' },
}))
Example #4
| Source File: WarningPanel.tsx From backstage with Apache License 2.0 | 5 votes |
|
getWarningTextColor = (
severity: NonNullable<WarningProps['severity']>,
theme: BackstageTheme,
) => {
const getColor = theme.palette.type === 'light' ? darken : lighten;
return getColor(theme.palette[severity].light, 0.6);
}
Example #5
| Source File: WarningPanel.tsx From backstage with Apache License 2.0 | 5 votes |
|
getWarningBackgroundColor = (
severity: NonNullable<WarningProps['severity']>,
theme: BackstageTheme,
) => {
const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken;
return getBackgroundColor(theme.palette[severity].light, 0.9);
}
Example #6
| Source File: ProductPreview.tsx From ra-enterprise-demo with MIT License | 5 votes |
|
useStyles = makeStyles(theme => ({
container: {
display: 'flex',
flexDirection: 'column',
padding: '0 20px',
width: 350,
'& > p': {
fontSize: 12,
color: theme.palette.text.primary,
textAlign: 'right',
},
// Temporary until darkmode is correctly implemented in ra-markdown
'& .tui-editor-contents p': {
color:
theme.palette.type === 'light'
? lighten(theme.palette.text.primary, 0.38)
: darken(theme.palette.text.primary, 0.38),
},
},
info: {
padding: theme.spacing(2, 3),
'& h1': {
fontSize: 18,
color: theme.palette.text.primary,
fontWeight: 'normal',
},
'& h2': {
fontSize: 14,
color:
theme.palette.type === 'light'
? lighten(theme.palette.text.primary, 0.38)
: darken(theme.palette.text.primary, 0.38),
fontWeight: 'normal',
},
'& .MuiFormControl-root': {
margin: 0,
'& > div': {
padding: 0,
},
},
},
details: {
display: 'flex',
flexDirection: 'column',
},
preview: {
padding: theme.spacing(2),
},
frame: {
position: 'relative',
width: '100%',
paddingBottom: '82.5%',
background: theme.palette.common.black,
boxShadow: '0 10px 7px -5px rgba(0, 0, 0, 0.3)',
},
mat: {
position: 'absolute',
background: theme.palette.background.paper,
top: '3.0303%',
bottom: '3.0303%',
left: '2.5%',
right: '2.5%',
boxShadow: '0px 0px 20px 0px rgba(0,0,0,0.5) inset',
},
art: {
position: 'absolute',
top: '16.129%',
bottom: '16.129%',
left: '13.158%',
right: '13.158%',
'& img': {
width: '100%',
},
},
}))
Example #7
| Source File: AsyncApiDefinition.tsx From backstage with Apache License 2.0 | 4 votes |
|
useStyles = makeStyles((theme: BackstageTheme) => ({
root: {
fontFamily: 'inherit',
'& .bg-white': {
background: 'none',
},
'& .text-4xl': {
...theme.typography.h3,
},
' & h2': {
...theme.typography.h4,
},
'& .border': {
borderColor: alpha(theme.palette.border, 0.1),
},
'& .min-w-min': {
minWidth: 'fit-content',
},
'& .examples': {
padding: '1rem',
},
'& .bg-teal-500': {
backgroundColor: theme.palette.status.ok,
},
'& .bg-blue-500': {
backgroundColor: theme.palette.info.main,
},
'& .bg-blue-400': {
backgroundColor: theme.palette.info.light,
},
'& .bg-indigo-400': {
backgroundColor: theme.palette.warning.main,
},
'& .text-teal-50': {
color: theme.palette.status.ok,
},
'& .text-red-600': {
color: theme.palette.error.main,
},
'& .text-orange-600': {
color: theme.palette.warning.main,
},
'& .text-teal-500': {
color: theme.palette.status.ok,
},
'& .text-blue-500': {
color: theme.palette.info.main,
},
'& .-rotate-90': {
'--tw-rotate': '0deg',
},
'& button': {
...theme.typography.button,
borderRadius: theme.shape.borderRadius,
color: theme.palette.primary.main,
},
'& a': {
color: theme.palette.link,
},
'& a.no-underline': {
...theme.typography.button,
background: 'none',
boxSizing: 'border-box',
minWidth: 64,
borderRadius: theme.shape.borderRadius,
transition: theme.transitions.create(
['background-color', 'box-shadow', 'border'],
{
duration: theme.transitions.duration.short,
},
),
padding: '5px 15px',
color: theme.palette.primary.main,
border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`,
'&:hover': {
textDecoration: 'none',
border: `1px solid ${theme.palette.primary.main}`,
backgroundColor: alpha(
theme.palette.primary.main,
theme.palette.action.hoverOpacity,
),
},
},
'& li.no-underline': {
'& a': {
textDecoration: 'none',
color: theme.palette.getContrastText(theme.palette.primary.main),
},
},
},
dark: {
'& svg': {
fill: theme.palette.text.primary,
},
'& .prose': {
color: theme.palette.text.secondary,
'& h3': {
color: theme.palette.text.primary,
},
},
'& .bg-gray-100, .bg-gray-200': {
backgroundColor: theme.palette.background.default,
},
'& .text-gray-600': {
color: theme.palette.grey['50'],
},
'& .text-gray-700': {
color: theme.palette.grey['100'],
},
'& .panel--right': {
background: darken(theme.palette.navigation.background, 0.1),
},
'& .examples': {
backgroundColor: darken(theme.palette.navigation.background, 0.1),
'& pre': {
backgroundColor: darken(theme.palette.background.default, 0.2),
},
},
},
}))
Example #8
| Source File: AvatarDisplay.tsx From clearflask with Apache License 2.0 | 4 votes |
|
render() {
const userName = DisplayUserName(this.props.user);
const size = this.props.size || 25;
var avatar;
switch (this.props.user?.pic ? 'image' : this.props.type) {
default:
case 'beam':
avatar = (
<BoringAvatar
name={userName.replace(/ /g, '')}
variant='beam'
size={size}
colors={[
darken(this.props.theme.palette.primary.main, 0.6),
darken(this.props.theme.palette.primary.main, 0.3),
this.props.theme.palette.primary.main,
lighten(this.props.theme.palette.primary.main, 0.3),
lighten(this.props.theme.palette.primary.main, 0.6),
]}
/>
);
break;
case 'bauhaus':
avatar = (
<BoringAvatar
name={userName.replace(/ /g, '')}
variant='bauhaus'
size={size}
colors={[
this.props.theme.palette.primary.dark,
this.props.theme.palette.primary.light,
lighten(this.props.theme.palette.primary.main, 0.6),
lighten(this.props.theme.palette.primary.main, 0.8),
]}
/>
);
break;
case 'image':
case 'initials':
var backgroundColor;
if (!this.props.user?.pic) {
backgroundColor = DeterministicColorFromUser(this.props.user);
backgroundColor = !backgroundColor ? undefined
: (this.props.theme.palette.type === 'dark'
? darken(backgroundColor, 0.5)
: lighten(backgroundColor, 0.5));
}
avatar = (
<MuiAvatar
variant='circle'
className={classNames(this.props.classes.muiAvatar)}
style={{
width: size,
height: size,
backgroundColor: backgroundColor,
}}
alt={userName}
src={this.props.user?.pic}
>{Initial(this.props.user)}</MuiAvatar>
);
break;
}
if (this.props.user?.isMod) {
const modSize = size * 0.5;
const starSize = size * 0.6;
avatar = (
<Badge
classes={{
root: this.props.classes.backgroundColor,
badge: classNames(this.props.classes.badge, this.props.classes.backgroundColor),
}}
overlap='circle'
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
badgeContent={(
<MuiAvatar alt='Moderator' className={classNames(this.props.classes.backgroundColor)} style={{
width: modSize,
height: modSize,
fontSize: starSize,
}}>
<StarIcon className={this.props.classes.modAvatar} fontSize='inherit' color='primary' />
</MuiAvatar>
)}
>
{avatar}
</Badge>
);
}
return avatar;
}
Example #9
| Source File: Competitors.tsx From clearflask with Apache License 2.0 | 4 votes |
|
useStyles = makeStyles((theme: Theme) => createStyles({
pageContainer: {
display: 'flex',
'& h2': {
margin: theme.spacing(12, 0, 2),
},
'& h3': {
margin: theme.spacing(8, 0, 1),
},
'& h4': {
margin: theme.spacing(4, 0, 0),
},
'& p': {
marginTop: 7,
},
},
appBarSpacer: theme.mixins.toolbar,
heroBrandList: {
display: 'flex',
justifyContent: 'flex-end',
flexWrap: 'wrap',
margin: theme.spacing(2, 0),
},
heroBrandListBreak: {
width: '100%',
},
heroBrandImg: {
maxWidth: 14,
width: 14,
maxHeight: 14,
margin: theme.spacing(1),
},
stickyOuterContainer: {
marginTop: theme.spacing(20),
minHeight: '100%',
},
stickyContainerLeft: {
marginRight: theme.spacing(6),
},
stickyContainerRight: {
marginLeft: theme.spacing(6),
},
stickyContainer: {
position: 'sticky',
top: 0,
maxHeight: vh(100),
display: 'flex',
flexDirection: 'column',
},
stickyScroll: {
display: 'flex',
flexDirection: 'column',
...contentScrollApplyStyles({ theme, orientation: Orientation.Vertical }),
},
competitorSelectReset: {
alignSelf: 'flex-end',
margin: theme.spacing(3),
},
competitorSelectHeading: {
margin: theme.spacing(2, 1, 2, 6),
},
competitorSelectRow: {
display: 'flex',
alignItems: 'center',
},
pageContent: {
minWidth: 0,
marginBottom: theme.spacing(6),
},
emphasize: {
fontWeight: 'bolder',
},
tableHeading: {
verticalAlign: 'bottom',
textAlign: 'center',
[theme.breakpoints.down(dontHoverBelow)]: {
verticalAlign: 'baseline', // Align the filter icons
},
},
tableDivider: {
verticalAlign: 'bottom',
padding: theme.spacing(0, 1),
'& div': {
height: theme.spacing(5),
borderLeft: `1px solid ${
// From TableCell.js root
theme.palette.type === 'light'
? lighten(fade(theme.palette.divider, 1), 0.88)
: darken(fade(theme.palette.divider, 1), 0.68)
}`,
}
},
tableGrouping: {
textAlign: 'center',
color: theme.palette.text.hint,
},
check: {
margin: 'auto',
display: 'block',
color: theme.palette.primary.main,
},
table: {
maxWidth: '100%',
width: 'min-content',
...contentScrollApplyStyles({ theme, orientation: Orientation.Horizontal }),
},
hiddenPlatform: {
filter: 'grayscale(100%)',
opacity: 0.4,
},
sliderValueHorizontal: {
display: 'flex',
justifyContent: 'center',
alignItems: 'baseline',
},
sliderFloatingInfo: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
position: 'relative',
transition: theme.transitions.create(['bottom'], {
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.easeOut,
}),
transform: 'translateY(50%)',
flex: '1',
overflow: 'visible',
},
sliderOuterContainer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
height: 400,
width: 250,
},
sliderDisclaimer: {
marginTop: theme.spacing(1),
display: 'flex',
alignItems: 'baseline',
},
sliderContainer: {
flex: '1',
height: '100%',
width: '100%',
position: 'relative',
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'center',
padding: theme.spacing(4, 0),
},
filterButtonAlert: {
width: 'max-content',
},
tocHeading: {
alignSelf: 'flex-end',
margin: theme.spacing(2, 3, 2, 2),
},
tocIndicator: {
},
tocItem: {
height: 'auto',
minHeight: 40,
},
tocItemRead: {
opacity: 0.4,
},
tocItemIcon: {
margin: theme.spacing(0, 0, 0, 1),
},
tocItemWrapper: {
alignItems: 'flex-end',
flexDirection: 'row-reverse',
justifyContent: 'flex-start',
},
brandListSelected: {
'& $brandName': {
fontWeight: 'bold',
},
},
brandListSmall: {
margin: theme.spacing(1, 0, 0),
'& $brandCheckbox': {
padding: theme.spacing(0.5),
marginRight: theme.spacing(1),
},
'& $brandImg': {
width: 11,
},
'& div': {
fontSize: '0.8em',
},
'& svg': {
fontSize: 16,
},
},
brandListOther: {
padding: theme.spacing(0.5, 0, 0, 6),
},
brandListContainer: {
margin: theme.spacing(1, 0, 1, 2),
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
},
transparentTransition: {
opacity: 1,
transition: theme.transitions.create('opacity'),
},
transparent: {
opacity: '0!important',
transition: theme.transitions.create('opacity'),
},
brandContainer: {
display: 'inline-flex',
alignItems: 'center',
},
brandImg: {
width: 14,
marginRight: theme.spacing(1),
},
brandCheckbox: {
[theme.breakpoints.down(dontHoverBelow)]: {
opacity: 0.3,
},
},
brandName: {
// Used as a ref, don't delete
},
platformOther: {
textAlign: 'center',
minHeight: 38,
},
pricingContainer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-evenly',
flexWrap: 'wrap',
},
platformOpenButton: {
fontSize: '0.9em',
color: theme.palette.text.hint,
},
pricingCell: {
border: 'none',
},
pricingPriceCell: {
display: 'flex',
justifyContent: 'flex-end',
},
priceContainer: {
display: 'flex',
justifyContent: 'center',
alignItems: 'baseline',
},
designContainer: {
width: '100%',
maxWidth: 570,
margin: 'auto',
display: 'flex',
flexWrap: 'wrap',
alignItems: 'flex-start',
justifyContent: 'flex-end'
},
designBrandAndSwitcher: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
},
}))
Example #10
| Source File: theme.ts From log4brains with Apache License 2.0 | 4 votes |
|
theme: CustomTheme = {
...responsiveFontSizes(
createMuiTheme({
palette: {
primary: {
main: primary
},
secondary: {
main: "#FF007B"
},
error: {
main: red.A400
},
background: {
default: "#fff"
}
},
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
h1: {
fontFamily: titleFontFamily
},
h2: {
fontFamily: titleFontFamily
},
h3: {
fontFamily: titleFontFamily,
lineHeight: 1.1
},
h4: {
fontFamily: titleFontFamily
},
h5: {
fontFamily: titleFontFamily
},
h6: {
fontFamily: titleFontFamily
}
},
props: {
MuiLink: {
underline: "none"
}
},
overrides: {
MuiCssBaseline: {
"@global": {
html: {
maxWidth: "100%"
},
body: {
padding: "0 !important", // for storybook
maxWidth: "100%"
},
blockquote: {
margin: 0,
padding: "0 1em",
borderLeft: "0.25em solid #F8F8F8",
color: "#9e9e9e"
}
}
},
MuiLink: {
root: {
"&:hover": {
color: darken(primary, 0.3)
}
}
}
},
breakpoints: {
values: {
xs: 0,
sm: 900,
md: 1060,
lg: 1280,
xl: 1920
}
}
})
),
custom: {
layout: {
centerColBasis: 750 + 4 * 8,
centerColPadding: 4 * 8,
rightColBasis: 180
}
}
}
