@material-ui/core/styles#alpha TypeScript Examples
The following examples show how to use
@material-ui/core/styles#alpha.
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: theme-provider.tsx From keycaplendar with MIT License | 5 votes |
|
ThemeProvider = ({ children }: { children: ReactNode }) => {
const currentThemeMap = useAppSelector(selectCurrentThemeMap) || blankTheme;
const theme = currentThemeMap.primary
? createTheme({
palette: {
action: {
active: currentThemeMap.onSurface,
disabled: alpha(currentThemeMap.onSurface, 0.3),
disabledBackground: alpha(currentThemeMap.onSurface, 0.12),
hover: alpha(currentThemeMap.onSurface, 0.08),
selected: alpha(currentThemeMap.onSurface, 0.16),
},
background: {
default: currentThemeMap.background,
paper: currentThemeMap.surface,
},
divider: alpha(currentThemeMap.onSurface, 0.12),
error: {
contrastText: currentThemeMap.onError,
main: currentThemeMap.error,
},
primary: {
contrastText: currentThemeMap.onPrimary,
main: currentThemeMap.primary,
},
secondary: {
contrastText: currentThemeMap.onSecondary,
main: currentThemeMap.secondary,
},
text: {
disabled: alpha(currentThemeMap.onSurface, 0.38),
primary: alpha(currentThemeMap.onSurface, 0.87),
secondary: alpha(currentThemeMap.onSurface, 0.6),
},
type: currentThemeMap.dark ? "dark" : "light",
},
})
: createTheme();
return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
}
Example #2
| Source File: styles.ts From backstage with Apache License 2.0 | 4 votes |
|
useStyles = makeStyles(
theme => ({
root: {
background: theme.palette.background.paper,
},
header: {
height: HEADER_SIZE,
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
},
log: {
fontFamily: '"Monaco", monospace',
fontSize: theme.typography.pxToRem(12),
},
line: {
position: 'relative',
whiteSpace: 'pre',
'&:hover': {
background: theme.palette.action.hover,
},
},
lineSelected: {
background: theme.palette.action.selected,
'&:hover': {
background: theme.palette.action.selected,
},
},
lineCopyButton: {
position: 'absolute',
paddingTop: 0,
paddingBottom: 0,
},
lineNumber: {
display: 'inline-block',
textAlign: 'end',
width: 60,
marginRight: theme.spacing(1),
cursor: 'pointer',
},
textHighlight: {
background: alpha(theme.palette.info.main, 0.15),
},
textSelectedHighlight: {
background: alpha(theme.palette.info.main, 0.4),
},
modifierBold: {
fontWeight: theme.typography.fontWeightBold,
},
modifierItalic: {
fontStyle: 'italic',
},
modifierUnderline: {
textDecoration: 'underline',
},
modifierForegroundBlack: {
color: colors.common.black,
},
modifierForegroundRed: {
color: colors.red[500],
},
modifierForegroundGreen: {
color: colors.green[500],
},
modifierForegroundYellow: {
color: colors.yellow[500],
},
modifierForegroundBlue: {
color: colors.blue[500],
},
modifierForegroundMagenta: {
color: colors.purple[500],
},
modifierForegroundCyan: {
color: colors.cyan[500],
},
modifierForegroundWhite: {
color: colors.common.white,
},
modifierForegroundGrey: {
color: colors.grey[500],
},
modifierBackgroundBlack: {
background: colors.common.black,
},
modifierBackgroundRed: {
background: colors.red[500],
},
modifierBackgroundGreen: {
background: colors.green[500],
},
modifierBackgroundYellow: {
background: colors.yellow[500],
},
modifierBackgroundBlue: {
background: colors.blue[500],
},
modifierBackgroundMagenta: {
background: colors.purple[500],
},
modifierBackgroundCyan: {
background: colors.cyan[500],
},
modifierBackgroundWhite: {
background: colors.common.white,
},
modifierBackgroundGrey: {
background: colors.grey[500],
},
}),
{ name: 'BackstageLogViewer' },
)
Example #3
| 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),
},
},
},
}))
