diff --git a/docs/data/base/components/transitions/AllTransitionsDemo.js b/docs/data/base/components/transitions/AllTransitionsDemo.js new file mode 100644 index 00000000000000..67290e1288843e --- /dev/null +++ b/docs/data/base/components/transitions/AllTransitionsDemo.js @@ -0,0 +1,216 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { styled } from '@mui/system'; +import { Unstable_Popup as PopupBase } from '@mui/base/Unstable_Popup'; +import { Button as ButtonBase } from '@mui/base/Button'; +import { CssAnimation, CssTransition } from '@mui/base/Transitions'; + +const styles = ` + @keyframes open-animation { + 0% { + opacity: 0; + transform: translateY(-8px) scale(0.95); + } + + 50% { + opacity: 1; + transform: translateY(4px) scale(1.05); + } + + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } + } + + @keyframes close-animation { + 0% { + opacity: 1; + transform: scale(1) rotate(0deg); + filter: blur(0); + } + + 100% { + opacity: 0; + transform: scale(1.5) rotate(8deg); + filter: blur(4px); + } + } + + .anim-open { + animation: open-animation 1s ease-out both; + } + + .anim-close { + animation: close-animation 1s ease-out forwards; + } + + .open { + opacity: 1; + transform: translateY(0) scale(1) + filter: blur(0); + transition: transform 0.2s cubic-bezier(0.345, 0.275, 0.505, 1.625), opacity 0.2s ease-out; + } + + .close { + opacity: 0; + transform: translateY(-8px) scale(0.95); + filter: blur(3px); + transition: transform 0.4s ease-out, opacity 0.4s ease-out, filter 0.2s ease-out; + } +`; + +const grey = { + 200: '#DAE2ED', + 700: '#434D5B', + 900: '#1C2025', +}; + +const blue = { + 200: '#99CCFF', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0066CC', +}; + +const Button = styled(ButtonBase)( + ({ theme }) => ` + min-width: 175px; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 600; + font-size: 0.875rem; + line-height: 1.5; + background-color: ${blue[500]}; + padding: 8px 16px; + border-radius: 8px; + color: white; + transition: background-color, box-shadow, 120ms ease; + cursor: pointer; + border: 1px solid ${blue[500]}; + box-shadow: 0 1px 1px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.1)' + }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]}; + + &:hover { + background-color: ${blue[600]}; + } + + &:active { + background-color: ${blue[700]}; + box-shadow: none; + } + + &:focus-visible { + box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; + outline: none; + } +`, +); + +const Popup = styled(PopupBase)` + width: max-content; +`; + +const PopupBody = styled('div')( + ({ theme }) => ` + width: max-content; + padding: 12px 16px; + margin: 8px; + border-radius: 8px; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + box-shadow: ${ + theme.palette.mode === 'dark' + ? `0px 4px 8px rgb(0 0 0 / 0.7)` + : `0px 4px 8px rgb(0 0 0 / 0.1)` + }; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 0.875rem; + z-index: 1; +`, +); + +const Section = styled('div')` + display: flex; + gap: 12px; + padding: 8px; + + @media (max-width: 700px) { + flex-direction: column; + } +`; + +export default function AllTransitionsDemo() { + return ( +
+ +
+ + + Animated with the CSS Transition component. + + + + + Animated with the CSS Animation component. + + +
+
+ ); +} + +function PopupWithTrigger(props) { + const [anchor, setAnchor] = React.useState(null); + const [open, setOpen] = React.useState(false); + + const { children, ...other } = props; + + return ( + + + + {children} + + + ); +} + +PopupWithTrigger.propTypes = { + children: PropTypes.node, +}; + +function PopupWithTrigger2(props) { + const [anchor, setAnchor] = React.useState(null); + const [open, setOpen] = React.useState(false); + + const { children, ...other } = props; + + return ( + + + + {children} + + + ); +} + +PopupWithTrigger2.propTypes = { + children: PropTypes.node, +}; diff --git a/docs/data/base/components/transitions/AllTransitionsDemo.tsx b/docs/data/base/components/transitions/AllTransitionsDemo.tsx new file mode 100644 index 00000000000000..acfa976e71cc4d --- /dev/null +++ b/docs/data/base/components/transitions/AllTransitionsDemo.tsx @@ -0,0 +1,206 @@ +import * as React from 'react'; +import { styled } from '@mui/system'; +import { Unstable_Popup as PopupBase, PopupProps } from '@mui/base/Unstable_Popup'; +import { Button as ButtonBase } from '@mui/base/Button'; +import { CssAnimation, CssTransition } from '@mui/base/Transitions'; + +const styles = ` + @keyframes open-animation { + 0% { + opacity: 0; + transform: translateY(-8px) scale(0.95); + } + + 50% { + opacity: 1; + transform: translateY(4px) scale(1.05); + } + + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } + } + + @keyframes close-animation { + 0% { + opacity: 1; + transform: scale(1) rotate(0deg); + filter: blur(0); + } + + 100% { + opacity: 0; + transform: scale(1.5) rotate(8deg); + filter: blur(4px); + } + } + + .anim-open { + animation: open-animation 1s ease-out both; + } + + .anim-close { + animation: close-animation 1s ease-out forwards; + } + + .open { + opacity: 1; + transform: translateY(0) scale(1) + filter: blur(0); + transition: transform 0.2s cubic-bezier(0.345, 0.275, 0.505, 1.625), opacity 0.2s ease-out; + } + + .close { + opacity: 0; + transform: translateY(-8px) scale(0.95); + filter: blur(3px); + transition: transform 0.4s ease-out, opacity 0.4s ease-out, filter 0.2s ease-out; + } +`; + +const grey = { + 200: '#DAE2ED', + 700: '#434D5B', + 900: '#1C2025', +}; + +const blue = { + 200: '#99CCFF', + 300: '#66B2FF', + 400: '#3399FF', + 500: '#007FFF', + 600: '#0072E5', + 700: '#0066CC', +}; + +const Button = styled(ButtonBase)( + ({ theme }) => ` + min-width: 175px; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 600; + font-size: 0.875rem; + line-height: 1.5; + background-color: ${blue[500]}; + padding: 8px 16px; + border-radius: 8px; + color: white; + transition: background-color, box-shadow, 120ms ease; + cursor: pointer; + border: 1px solid ${blue[500]}; + box-shadow: 0 1px 1px ${ + theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.1)' + }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]}; + + &:hover { + background-color: ${blue[600]}; + } + + &:active { + background-color: ${blue[700]}; + box-shadow: none; + } + + &:focus-visible { + box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]}; + outline: none; + } +`, +); + +const Popup = styled(PopupBase)` + width: max-content; +`; + +const PopupBody = styled('div')( + ({ theme }) => ` + width: max-content; + padding: 12px 16px; + margin: 8px; + border-radius: 8px; + border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]}; + background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'}; + box-shadow: ${ + theme.palette.mode === 'dark' + ? `0px 4px 8px rgb(0 0 0 / 0.7)` + : `0px 4px 8px rgb(0 0 0 / 0.1)` + }; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 0.875rem; + z-index: 1; +`, +); + +const Section = styled('div')` + display: flex; + gap: 12px; + padding: 8px; + + @media (max-width: 700px) { + flex-direction: column; + } +`; + +export default function AllTransitionsDemo() { + return ( +
+ +
+ + + Animated with the CSS Transition component. + + + + + Animated with the CSS Animation component. + + +
+
+ ); +} + +function PopupWithTrigger(props: PopupProps) { + const [anchor, setAnchor] = React.useState(null); + const [open, setOpen] = React.useState(false); + + const { children, ...other } = props; + + return ( + + + + {children} + + + ); +} +function PopupWithTrigger2(props: PopupProps) { + const [anchor, setAnchor] = React.useState(null); + const [open, setOpen] = React.useState(false); + + const { children, ...other } = props; + + return ( + + + + {children} + + + ); +} diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index c79ca948fdf376..bfc99888323a0d 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -32,7 +32,15 @@ export function getBlogPost(filePath: string): BlogPost { // Avoid typos in the blog markdown pages. // https://www.notion.so/mui-org/Blog-247ec2bff5fa46e799ef06a693c94917 -const ALLOWED_TAGS = ['MUI Core', 'MUI X', 'News', 'Company', 'Developer Survey', 'Product']; +const ALLOWED_TAGS = [ + 'MUI Core', + 'MUI X', + 'News', + 'Company', + 'Developer Survey', + 'Product', + 'Base UI', +]; export const getAllBlogPosts = () => { const filePaths = getBlogFilePaths(); diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 65f3bd3718eb3c..a9e6825125a5e2 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -41,33 +41,21 @@ export const getStaticProps = () => { function PostPreview(props: BlogPost) { return ( - + {props.tags.map((tag) => ( ({ - fontWeight: 500, - color: (theme.vars || theme).palette.primary[600], - background: (theme.vars || theme).palette.primary[50], - border: '1px solid', - borderColor: (theme.vars || theme).palette.primary[100], - '&:hover': { - background: (theme.vars || theme).palette.primary[50], - }, + variant="outlined" + color="primary" + sx={(theme) => ({ + fontWeight: 'medium', + fontSize: theme.typography.pxToRem(12), + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.grey[200], }), - (theme) => - theme.applyDarkStyles({ - color: (theme.vars || theme).palette.primary[100], - background: alpha(theme.palette.primary[900], 0.4), - borderColor: alpha(theme.palette.primary[800], 0.5), - '&:hover': { - background: alpha(theme.palette.primary[900], 0.4), - }, - }), - ]} + })} /> ))} @@ -144,7 +132,7 @@ function PostPreview(props: BlogPost) { > {props.authors && ( - + {props.authors .slice(0, 3) .map((userId) => { @@ -163,7 +151,7 @@ function PostPreview(props: BlogPost) { )} {props.date && ( - + {new Date(props.date).toDateString()} )} @@ -319,11 +307,7 @@ export default function Blog(props: InferGetStaticPropsType theme.applyDarkStyles({ - '&:hover, &:focus-within': { - borderColor: 'primary.600', - boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)', - }, + boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)', }), ]} > diff --git a/docs/pages/blog/base-ui-2024-plans.js b/docs/pages/blog/base-ui-2024-plans.js new file mode 100644 index 00000000000000..8308c06b8f3ca3 --- /dev/null +++ b/docs/pages/blog/base-ui-2024-plans.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import * as pageProps from './base-ui-2024-plans.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/base-ui-2024-plans.md b/docs/pages/blog/base-ui-2024-plans.md new file mode 100644 index 00000000000000..a7cd7fd3f3bd47 --- /dev/null +++ b/docs/pages/blog/base-ui-2024-plans.md @@ -0,0 +1,102 @@ +--- +title: An exciting year ahead for Base UI +description: The unstyled component library will get a stable release, lots of new components, and even better DX in 2024. +date: 2024-02-13T00:00:00.000Z +authors: ['danilo-leal', 'michaldudak', 'colmtuite', 'oliviertassinari'] +tags: ['Base UI', 'Product'] +card: true +--- + +The [story of Base UI](/blog/introducing-base-ui/) began several years ago—long before headless React component libraries skyrocketed in popularity—when we started to imagine a world in which Material UI could exist without Material Design. + +We're super excited to share that this dream is becoming a reality! +This year will see a lot of investment in Base UI as we expand the team ([we're hiring!](/careers/staff-ui-engineer-base-ui/)) and focus hard on a [stable release](https://github.com/mui/material-ui/milestone/46) (tentatively planned for late 2024), which will come full of new components, features, and improvements. + +Let's walk through some of the things we're cooking up. + +## A larger set of components + +Base UI today offers a modest set of components and hooks, including some slightly more complex ones such as [Autocomplete](/base-ui/react-autocomplete/) and [Number Input](/base-ui/react-number-input/). +However, we're aware that the package is still missing many primitive components that developers would need in order to adopt it for real-world applications. +Fear not, because we're working hard to ship more components with the stable release, including: + +| Components to be added | | +| :--------------------- | ---------------------------------------------------------------------------------------------: | +| Accordion | [View the GitHub issue →](https://github.com/mui/material-ui/issues/38037) | +| Alert Dialog | [View the GitHub issue →](https://github.com/mui/material-ui/issues/40886) | +| Checkbox | [View the GitHub issue →](https://github.com/mui/material-ui/issues/38036) | +| Collapsible | [View the GitHub issue →](https://github.com/mui/material-ui/issues/40959) | +| Drawer | [View the GitHub issue →](https://github.com/mui/material-ui/issues/38181) | +| Radio Group | [View the GitHub issue →](https://github.com/mui/material-ui/issues/38038) | +| Tooltip | [View the GitHub issue →](https://github.com/mui/material-ui/issues/38045) | + +And potentially more! +We'd love for you to chime in and help us prioritize, so keep an eye on open issues marked with the [`package: base-ui` and `waiting for 👍`](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:%22package:+base-ui%22+label:%22waiting+for+%F0%9F%91%8D%22) labels. + +## Improved customization API + +Currently, Base UI components can be customized to your heart's content using the `slots` and `slotProps` props. +(Read more about them in the "[Overriding component structure](/base-ui/guides/overriding-component-structure/)" guide.) + +```tsx +// Example of the slots prop + + +// Example of the slotProps prop + +``` + +This API, while powerful, has proven to be less than ideal in some instances. +Most notably, it's too lengthy and complicated to write and read when used with libraries such as Tailwind CSS. +Additionally, since the `slots` and the corresponding `slotProps` are not related in terms of TypeScript types, it's possible to introduce bugs or have the compiler complain about valid code. + +To address these issues, we're considering adopting a new API that would assign a discrete subcomponent to each DOM node—the pattern favored by many other headless component libraries (think: ``, ``, etc.). +This pattern has the potential to radically improve the customization experience, both for styles and structure. + +We're still fleshing out the details and plan to release an RFC on GitHub in the coming days. +We'll update this blog post with the link when it's available. +We know that a significant number of projects depend on the existing API, and we want to assure you that one of our top priorities is to provide a smooth migration experience. + +## More thorough animation support + +Animation is a key element for adding delight to any application. +We've already kicked off work on animation support by releasing the [CSS Transition](/base-ui/react-transitions/#css-transition) and [CSS Animation](/base-ui/react-transitions/#css-animation) components, as well as the `useTransitionTrigger` and `useTransitionStateManager` hooks. +They're currently available for use with the Popup, Menu, and Select, and the plan is to extend support to more components while also adding more features. + +{{"demo": "../../data/base/components/transitions/AllTransitionsDemo.js"}} + +

The CSS Animation transition is exaggerated here for the sake of demonstration.

+ +## Getting many issues out of the way + +The core of what Base UI strives to deliver out of the box is first-class accessibility and an intuitive API for extensive customization. +We've earmarked several issues we want to tackle before the stable release in areas such as keyboard navigation, better ARIA support, focus styles, and more. + +A screenshot of the Base UI stable release milestone on GitHub as of January 2024. + +You can track our progress fixing any specific issues by checking out the list of [Base UI stable release milestones on GitHub](https://github.com/mui/material-ui/milestone/46). + +## A more independent product + +So far, all Base UI-related development has happened within the [Material UI GitHub repository](http://github.com/mui/material-ui). +That made a lot of sense in the beginning because we didn't intend for Base UI to be a standalone product at the time. +As a result of this early decision, we've seen that some developers are hesitant to try it out because of the apparent association with Material Design. +Rest assured that Base UI _is_ a standalone library, and it doesn't come packaged with _any_ default styles or themes. + +Material UI vs. Base UI: independent but related products. + +Base UI is no longer _merely_ "Material UI without the styles"—as we've seen with developer trends over the last few years, the potential for growth and adoption of headless components could actually dwarf Material UI in the near future. +To acknowledge that Base UI has the potential to outgrow Material UI, we plan to move it to its own dedicated GitHub repo for more focused communication and collaboration with the community that's growing around it. + +## Join us on the ride + +If you're passionate about extending the web platform with powerful, accessible, unstyled components, [we're hiring UI Engineers](/careers/staff-ui-engineer-base-ui/) to work on the Base UI team and help us accelerate its growth. + +Lastly, we'd love to hear your feedback. +The best place to share your ideas and requests is in [the GitHub repo](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:%22package:+base-ui%22). +Check out the existing issues and add your thoughts, and feel free to open your own issue if you don't see your concerns addressed elsewhere. + +Happy development! 👋 diff --git a/docs/pages/blog/introducing-base-ui.md b/docs/pages/blog/introducing-base-ui.md index b36df3d2bc1fbf..04c572555ef833 100644 --- a/docs/pages/blog/introducing-base-ui.md +++ b/docs/pages/blog/introducing-base-ui.md @@ -3,11 +3,11 @@ title: 'Introducing Base UI: the headless alternative to Material UI' description: The Base UI component library gives you complete control over the look and feel of your app. date: 2022-09-07T00:00:00.000Z authors: ['michaldudak', 'samuelsycamore'] -tags: ['News', 'MUI Core'] +tags: ['Base UI', 'Product'] card: true --- -Demo components built with Base UI, a newly introduced library of unstyled components and hooks +Demo components built with Base UI, a newly introduced library of unstyled components and hooks While Material UI is excellent for building sleek user interfaces that adhere closely to Material Design, it can become unwieldy when your design system diverges significantly from the defaults. We get it. @@ -52,7 +52,7 @@ Each unstyled component lets you modify or override its _slots_—smaller subcom For example, a `SwitchUnstyled` contains the root, thumb, input, and track slots. You can control props passed to each of these slots (including `className`) based on the component's state, and even replace the default slot components with your own. -Depiction of SwitchUnstyled components' slots +Depiction of SwitchUnstyled components' slots See how it works on the live demo: @@ -88,7 +88,7 @@ Check out the [Base UI documentation](/base-ui/getting-started/) for details. You can track our progress in adding new components—and comment to influence our priorities—in [this dedicated GitHub issue](https://github.com/mui/material-ui/issues/27170). -The @mui/base package is released as an alpha. +The `@mui/base` package is released as an alpha. This means the component APIs are subject to change—especially as we receive feedback from the community about room for improvement. However, we believe the library is solid enough at this point to start building design systems with it. In fact, we're using Base UI to create [Joy UI](/blog/first-look-at-joy/)—the next product we'll be launching in our line of Core component libraries that also includes Material UI. @@ -96,21 +96,27 @@ In the future, Base UI will also be used as the foundation for Material UI com ## Feedback needed -Give Base UI a try today by installing the package via npm: +Give Base UI a try today by running one of the following commands: -```bash + + +```bash npm npm install @mui/base ``` -or yarn: - -```bash +```bash yarn yarn add @mui/base ``` +```bash pnpm +pnpm add @mui/base +``` + + + Check out [the docs](/base-ui/getting-started/), play with the components, and be sure to let us know what you think! If you find any bugs or want to share ideas for improvements, please don't hesitate to open an issue in the [MUI Core repository on GitHub](https://github.com/mui/material-ui/issues/new/choose). -Be sure to include "[base]" in the issue title to help us keep things organized. +Be sure to include "[base-ui]" in the issue title to help us keep things organized. -**Happy creating!** +Happy creating! diff --git a/docs/public/static/blog/base-ui-2024-plans/base-ui-milestone.png b/docs/public/static/blog/base-ui-2024-plans/base-ui-milestone.png new file mode 100644 index 00000000000000..999dc2bbed0a05 Binary files /dev/null and b/docs/public/static/blog/base-ui-2024-plans/base-ui-milestone.png differ diff --git a/docs/public/static/blog/base-ui-2024-plans/card.png b/docs/public/static/blog/base-ui-2024-plans/card.png new file mode 100644 index 00000000000000..68d388a36987db Binary files /dev/null and b/docs/public/static/blog/base-ui-2024-plans/card.png differ diff --git a/docs/public/static/blog/base-ui-2024-plans/material-vs-base.png b/docs/public/static/blog/base-ui-2024-plans/material-vs-base.png new file mode 100644 index 00000000000000..4b7c5cd4275c63 Binary files /dev/null and b/docs/public/static/blog/base-ui-2024-plans/material-vs-base.png differ diff --git a/docs/public/static/blog/introducing-base-ui/card.png b/docs/public/static/blog/introducing-base-ui/card.png index ff3ac64b9130ce..c3f0f2358a4085 100644 Binary files a/docs/public/static/blog/introducing-base-ui/card.png and b/docs/public/static/blog/introducing-base-ui/card.png differ diff --git a/docs/public/static/blog/introducing-base-ui/hero-image.png b/docs/public/static/blog/introducing-base-ui/hero-image.png index 06cb08489f54d8..53df41f359ede0 100644 Binary files a/docs/public/static/blog/introducing-base-ui/hero-image.png and b/docs/public/static/blog/introducing-base-ui/hero-image.png differ diff --git a/docs/public/static/blog/introducing-base-ui/switch-slots.png b/docs/public/static/blog/introducing-base-ui/switch-slots.png index 4a672f154b26ee..03e559bb73939c 100644 Binary files a/docs/public/static/blog/introducing-base-ui/switch-slots.png and b/docs/public/static/blog/introducing-base-ui/switch-slots.png differ diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index 9db10c1a3e22ed..051709559f8871 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -949,12 +949,18 @@ export function getThemedComponents(): ThemeOptions { '&:hover': { backgroundColor: (theme.vars || theme).palette.primary[100], }, + '& .MuiChip-deleteIcon': { + color: (theme.vars || theme).palette.primary[600], + }, ...theme.applyDarkStyles({ color: (theme.vars || theme).palette.primary[100], backgroundColor: alpha(theme.palette.primary[800], 0.5), '&:hover': { backgroundColor: alpha(theme.palette.primary[900], 0.5), }, + '& .MuiChip-deleteIcon': { + color: (theme.vars || theme).palette.primary[100], + }, }), }), }), @@ -1228,9 +1234,10 @@ export function getThemedComponents(): ThemeOptions { root: ({ theme }) => [ { textTransform: 'none', - fontWeight: 700, + fontWeight: theme.typography.fontWeightSemiBold, color: theme.palette.grey[700], borderColor: theme.palette.grey[200], + borderRadius: '8px', '&.Mui-selected': { color: (theme.vars || theme).palette.primary[500], borderColor: `${(theme.vars || theme).palette.primary[500]} !important`, @@ -1241,14 +1248,14 @@ export function getThemedComponents(): ThemeOptions { }, } as const, theme.applyDarkStyles({ - color: theme.palette.grey[300], - borderColor: theme.palette.primaryDark[500], + color: theme.palette.grey[200], + borderColor: theme.palette.primaryDark[700], '&.Mui-selected': { - color: '#fff', + color: theme.palette.primary[100], borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, - backgroundColor: (theme.vars || theme).palette.primaryDark[700], + backgroundColor: alpha(theme.palette.primary[900], 0.5), '&:hover': { - backgroundColor: (theme.vars || theme).palette.primaryDark[600], + backgroundColor: alpha(theme.palette.primary[900], 0.8), }, }, }), diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 14d7628bb5e335..6967b303d03692 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { styled, alpha } from '@mui/material/styles'; +import { useTheme } from '@mui/system'; import { useRouter } from 'next/router'; import { exactProp } from '@mui/utils'; import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'; @@ -14,6 +15,7 @@ import AppContainer from 'docs/src/modules/components/AppContainer'; import AppFooter from 'docs/src/layouts/AppFooter'; import HeroEnd from 'docs/src/components/home/HeroEnd'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; +import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import ROUTES from 'docs/src/route'; import Link from 'docs/src/modules/components/Link'; @@ -104,6 +106,11 @@ export const authors = { avatar: 'https://avatars.githubusercontent.com/u/92274722', github: 'richbustos', }, + colmtuite: { + name: 'Colm Tuite', + avatar: 'https://avatars.githubusercontent.com/u/805073', + github: 'colmtuite', + }, }; const classes = { @@ -250,7 +257,8 @@ const Root = styled('div')( ); export default function TopLayoutBlog(props) { - const { className, docs } = props; + const theme = useTheme(); + const { className, docs, demos, demoComponents, srcComponents } = props; const { description, rendered, title, headers } = docs.en; const finalTitle = title || headers.title; const router = useRouter(); @@ -397,7 +405,20 @@ export default function TopLayoutBlog(props) { ) : null} {rendered.map((chunk, index) => { - return ; + return ( + + ); })} @@ -411,7 +432,10 @@ export default function TopLayoutBlog(props) { TopLayoutBlog.propTypes = { className: PropTypes.string, + demoComponents: PropTypes.object, + demos: PropTypes.object, docs: PropTypes.object.isRequired, + srcComponents: PropTypes.object, }; if (process.env.NODE_ENV !== 'production') {