35 lines
944 B
TypeScript
35 lines
944 B
TypeScript
|
import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
|
||
|
|
import Typography from '@mui/joy/Typography';
|
||
|
|
|
||
|
|
declare module '@mui/joy/styles' {
|
||
|
|
interface TypographySystemOverrides {
|
||
|
|
kbd: true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const customTheme = extendTheme({
|
||
|
|
typography: {
|
||
|
|
kbd: {
|
||
|
|
background:
|
||
|
|
'linear-gradient(to top, var(--joy-palette-background-level2), var(--joy-palette-background-surface))',
|
||
|
|
border: '1px solid var(--joy-palette-neutral-outlinedBorder)',
|
||
|
|
borderRadius: 'var(--joy-radius-xs)',
|
||
|
|
boxShadow: 'var(--joy-shadow-sm)',
|
||
|
|
padding: '0.125em 0.375em',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default function NewTypographyLevel() {
|
||
|
|
return (
|
||
|
|
<CssVarsProvider theme={customTheme}>
|
||
|
|
<div>
|
||
|
|
<Typography>
|
||
|
|
Press <Typography level="kbd">⌘</Typography> +{' '}
|
||
|
|
<Typography level="kbd">k</Typography> to search the documentation.
|
||
|
|
</Typography>
|
||
|
|
</div>
|
||
|
|
</CssVarsProvider>
|
||
|
|
);
|
||
|
|
}
|