{defaultTheme.typography[level].color || '-'}
@@ -170,14 +164,13 @@ export default function TypographyThemeViewer() {
{defaultTheme.typography[level].fontSize || '-'}
- {['fontWeight', 'lineHeight', 'letterSpacing'].map((field) => (
+ {['fontWeight', 'lineHeight'].map((field) => (
diff --git a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx
index adecfe200def30..2f561fba32f8a0 100644
--- a/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx
+++ b/docs/data/joy/customization/theme-typography/TypographyThemeViewer.tsx
@@ -91,11 +91,6 @@ export default function TypographyThemeViewer() {
Line height
- |
-
- Letter spacing
-
- |
@@ -147,7 +142,6 @@ export default function TypographyThemeViewer() {
{defaultTheme.typography[level].color || '-'}
@@ -171,42 +165,38 @@ export default function TypographyThemeViewer() {
{defaultTheme.typography[level].fontSize || '-'}
- {(['fontWeight', 'lineHeight', 'letterSpacing'] as const).map(
- (field) => (
-
- )[
- extractFromVar(
- defaultTheme.typography[level][field] as string,
- field,
- )
- ] || ''
- }
- sx={{ pointerEvents: 'none' }}
+ {(['fontWeight', 'lineHeight'] as const).map((field) => (
+ |
+ )[
+ extractFromVar(
+ defaultTheme.typography[level][field] as string,
+ field,
+ )
+ ] || ''
+ }
+ sx={{ pointerEvents: 'none' }}
+ >
+
-
- {defaultTheme.typography[level][field] || '-'}
-
-
- |
- ),
- )}
+ {defaultTheme.typography[level][field] || '-'}
+
+
+ |
+ ))}
))}
diff --git a/docs/data/joy/customization/theme-typography/theme-typography.md b/docs/data/joy/customization/theme-typography/theme-typography.md
index f566c5ec3fa8e8..cf8a8aaa5f06f3 100644
--- a/docs/data/joy/customization/theme-typography/theme-typography.md
+++ b/docs/data/joy/customization/theme-typography/theme-typography.md
@@ -8,7 +8,7 @@ Joy UI includes a typography system within the theme to help you create consiste
The default system consists of 13 built-in levels:
-- `body1` - the baseline typography for the application, used as the default configuration in the [Typography](/joy-ui/react-typography/) and [CssBaseline](/joy-ui/react-css-baseline/) components.
+- `body-md` - the baseline typography for the application, used as the default configuration in the [Typography](/joy-ui/react-typography/) and [CssBaseline](/joy-ui/react-css-baseline/) components.
- `body2` through `body5` - can be used for secondary and tertiary information.
- The `h1` to `h6` levels follow the semantic HTML headings.
- The `display1` and `display2` usually appear as taglines for marketing and landing pages.
@@ -40,10 +40,8 @@ Use `undefined` as a value to remove any unneeded levels:
```js
const customTheme = extendTheme({
typography: {
- h5: undefined,
- h6: undefined,
- body4: undefined,
- body5: undefined,
+ 'title-sm': undefined,
+ 'title-xs': undefined,
},
});
```
@@ -54,10 +52,8 @@ For TypeScript, you must augment the theme structure to exclude the default leve
// You can put this to any file that's included in your tsconfig
declare module '@mui/joy/styles' {
interface TypographySystemOverrides {
- h5: false;
- h6: false;
- body4: false;
- body5: false;
+ 'title-sm': false;
+ 'title-xs': false;
}
}
```
@@ -87,8 +83,8 @@ There are several ways that you can use the theme typography in your application
- [Typography](/joy-ui/react-typography/) component: use the `level` prop to change between theme typography levels:
```jsx
- // use the `theme.typography.body2` styles
- Secondary info
+ // use the `theme.typography['body-sm']` styles
+ Secondary info
```
- [CSS Baseline](/joy-ui/react-css-baseline/) component: by default, it applies the `body1` level to the global stylesheet:
@@ -96,15 +92,15 @@ There are several ways that you can use the theme typography in your application
```jsx
- // inherits the `theme.typography.body1` styles
+ // inherits the `theme.typography['body-md']` styles
Hello World
```
- [`sx`](/joy-ui/customization/approaches/#sx-prop) prop: use `typography: $level` to get the specific theme typography level:
```jsx
- // to apply the `theme.typography.body2` styles:
- Small text
+ // to apply the `theme.typography['body-sm']` styles:
+ Small text
```
- [`styled`](/joy-ui/customization/approaches/#reusable-component): create a custom component and apply the style from `theme.typography.*` directly:
@@ -113,7 +109,7 @@ There are several ways that you can use the theme typography in your application
import { styled } from '@mui/joy/styles';
const Tag = styled('span')((theme) => ({
- ...theme.typography.body2,
+ ...theme.typography['body-sm'],
color: 'inherit',
borderRadius: theme.vars.radius.xs,
boxShadow: theme.vars.shadow.sm,
diff --git a/docs/data/joy/getting-started/installation/installation.md b/docs/data/joy/getting-started/installation/installation.md
index 9bbd95c1e44877..b88b8f76572a7d 100644
--- a/docs/data/joy/getting-started/installation/installation.md
+++ b/docs/data/joy/getting-started/installation/installation.md
@@ -32,20 +32,19 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
},
```
-## Public Sans font
+## Inter font
-Joy UI is designed to use the [Public Sans](https://fonts.google.com/specimen/Public+Sans)
+Joy UI is designed to use the [Inter](https://fonts.google.com/specimen/Inter)
font by default.
You may add it to your project with npm via [Fontsource](https://fontsource.org/), or with the Google Fonts CDN.
-
```bash npm
-npm install @fontsource/public-sans
+npm install @fontsource/inter
```
```bash yarn
-yarn add @fontsource/public-sans
+yarn add @fontsource/inter
```
```bash pnpm
@@ -57,16 +56,18 @@ yarn add @fontsource/public-sans
Then you can import it in your entry point like this:
```tsx
-import '@fontsource/public-sans';
+import '@fontsource/inter';
```
### Google Web Fonts
-To install the Public Sans font in your project using the Google Web Fonts CDN, add the following code snippet inside your project's `` tag:
+To install the Inter font in your project using the Google Web Fonts CDN, add the following code snippet inside your project's `` tag:
```html
+
+
```
diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js
index 2e3b27cb5140f9..60966f7d820c29 100644
--- a/docs/data/joy/getting-started/templates/TemplateCollection.js
+++ b/docs/data/joy/getting-started/templates/TemplateCollection.js
@@ -263,7 +263,7 @@ export default function TemplateCollection() {
}}
>
{author && (
-
+
Built by{' '}
β’
-
+
Designed by{' '}
{
if (mode === 'light') {
setMode('dark');
@@ -55,7 +54,7 @@ function ColorSchemeToggle() {
export default function EmailExample() {
const [drawerOpen, setDrawerOpen] = React.useState(false);
return (
-
+
{drawerOpen && (
setDrawerOpen(false)}>
@@ -89,7 +88,7 @@ export default function EmailExample() {
@@ -100,12 +99,13 @@ export default function EmailExample() {
}
endDecorator={
-
-
- /
+
+
+ β + k
}
@@ -115,21 +115,23 @@ export default function EmailExample() {
xs: 'none',
sm: 'flex',
},
+ boxShadow: 'sm',
}}
/>
+
@@ -140,8 +142,8 @@ export default function EmailExample() {
control={
@@ -180,30 +182,17 @@ export default function EmailExample() {
justifyContent: 'space-between',
}}
>
-
+
Unread
-
+
You've read all messages in your inbox.
@@ -217,23 +206,10 @@ export default function EmailExample() {
justifyContent: 'space-between',
}}
>
-
+
Everything else
-
+
diff --git a/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx b/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
index 32824c5aa5c430..8f2d8c62d6936c 100644
--- a/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
@@ -43,10 +43,10 @@ export default function EmailContent() {
sx={{ borderRadius: 'sm' }}
/>
-
+
Alex Jonnold
-
+
21 Oct 2022
@@ -54,13 +54,13 @@ export default function EmailContent() {
-
@@ -69,7 +69,7 @@ export default function EmailContent() {
-
+
Details for our Yosemite Park hike
From
- {}}>
+ {}}>
alex.jonnold@hike.com
to
- {}}>
+ {}}>
steve@mail.com
-
+
Hello, my friend!
@@ -133,7 +133,7 @@ export default function EmailContent() {
See you soon, Alex Jonnold
-
+
Attachments
-
-
+
+
videos-hike.zip
- 100 MB
+ 100 MB
diff --git a/docs/data/joy/getting-started/templates/email/components/Mails.tsx b/docs/data/joy/getting-started/templates/email/components/Mails.tsx
index 5653e768f7e606..9647d9d190c65c 100644
--- a/docs/data/joy/getting-started/templates/email/components/Mails.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Mails.tsx
@@ -42,7 +42,7 @@ export default function EmailList() {
@@ -61,14 +61,14 @@ export default function EmailList() {
mb: 0.5,
}}
>
- {item.name}
-
+ {item.name}
+
{item.date}
{item.title}
- {item.body}
+ {item.body}
diff --git a/docs/data/joy/getting-started/templates/email/components/Navigation.tsx b/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
index d32f3f0838cbbc..b0122d2d2cb575 100644
--- a/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
@@ -22,12 +22,7 @@ export default function EmailNav() {
Browse
-
+
@@ -38,8 +33,8 @@ export default function EmailNav() {
}}
>
-
-
+
+
Inbox
@@ -47,7 +42,7 @@ export default function EmailNav() {
-
+
Sent
@@ -55,7 +50,7 @@ export default function EmailNav() {
-
+
Draft
@@ -63,7 +58,7 @@ export default function EmailNav() {
-
+
Flagged
@@ -71,7 +66,7 @@ export default function EmailNav() {
-
+
Trash
@@ -82,12 +77,7 @@ export default function EmailNav() {
Tags
-
+
@@ -137,7 +127,7 @@ export default function EmailNav() {
width: '10px',
height: '10px',
borderRadius: '99px',
- bgcolor: 'warning.200',
+ bgcolor: 'warning.300',
}}
/>
diff --git a/docs/data/joy/getting-started/templates/email/theme.tsx b/docs/data/joy/getting-started/templates/email/theme.tsx
deleted file mode 100644
index 02de5b0186517d..00000000000000
--- a/docs/data/joy/getting-started/templates/email/theme.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { extendTheme } from '@mui/joy/styles';
-
-export default extendTheme({
- colorSchemes: {
- light: {
- palette: {
- background: {
- body: 'var(--joy-palette-neutral-50)',
- },
- },
- },
- dark: {
- palette: {
- background: {
- body: 'var(--joy-palette-common-black)',
- surface: 'var(--joy-palette-neutral-900)',
- },
- },
- },
- },
- fontFamily: {
- // display: "'Inter', var(--joy-fontFamily-fallback)",
- // body: "'Inter', var(--joy-fontFamily-fallback)",
- },
-});
diff --git a/docs/data/joy/getting-started/templates/files/App.tsx b/docs/data/joy/getting-started/templates/files/App.tsx
index 0505f1b19298e2..366cbb893f489e 100644
--- a/docs/data/joy/getting-started/templates/files/App.tsx
+++ b/docs/data/joy/getting-started/templates/files/App.tsx
@@ -15,6 +15,10 @@ import Input from '@mui/joy/Input';
import IconButton from '@mui/joy/IconButton';
import Divider from '@mui/joy/Divider';
import Sheet from '@mui/joy/Sheet';
+import Table from '@mui/joy/Table';
+import Tabs from '@mui/joy/Tabs';
+import TabList from '@mui/joy/TabList';
+import Tab from '@mui/joy/Tab';
import List from '@mui/joy/List';
import ListItem from '@mui/joy/ListItem';
import ListItemButton from '@mui/joy/ListItemButton';
@@ -33,7 +37,6 @@ import CloseIcon from '@mui/icons-material/Close';
import BookRoundedIcon from '@mui/icons-material/BookRounded';
// custom
-import filesTheme from './theme';
import Menu from './components/Menu';
import Layout from './components/Layout';
import Navigation from './components/Navigation';
@@ -45,14 +48,14 @@ function ColorSchemeToggle() {
setMounted(true);
}, []);
if (!mounted) {
- return ;
+ return ;
}
return (
{
if (mode === 'light') {
setMode('dark');
@@ -69,7 +72,7 @@ function ColorSchemeToggle() {
export default function FilesExample() {
const [drawerOpen, setDrawerOpen] = React.useState(false);
return (
-
+
{drawerOpen && (
setDrawerOpen(false)}>
@@ -108,7 +111,7 @@ export default function FilesExample() {
@@ -119,12 +122,13 @@ export default function FilesExample() {
}
endDecorator={
-
- /
+
+ β + k
}
@@ -134,21 +138,23 @@ export default function FilesExample() {
xs: 'none',
sm: 'flex',
},
+ boxShadow: 'sm',
}}
/>
+
@@ -159,8 +165,8 @@ export default function FilesExample() {
control={
@@ -178,8 +184,8 @@ export default function FilesExample() {
{
label: 'Files',
active: true,
- href: '/joy-ui/getting-started/templates/files/',
'aria-current': 'page',
+ href: '/joy-ui/getting-started/templates/files/',
},
]}
/>
@@ -199,102 +205,107 @@ export default function FilesExample() {
>
*': {
- p: 2,
- '&:nth-child(n):not(:nth-last-child(-n+4))': {
- borderBottom: '1px solid',
- borderColor: 'divider',
- },
- },
- }}
+ sx={{ borderRadius: 'sm', gridColumn: '1/-1' }}
>
-
- Folder name
-
-
- Date modified
-
-
- Size
-
-
- Users
-
-
- }
- sx={{ alignItems: 'flex-start' }}
- >
- Travel pictures
-
- 21 October 2011, 3PM
-
- 987.5MB
-
-
-
-
-
-
-
-
-
- }
- sx={{ alignItems: 'flex-start' }}
+
- Important documents
-
- 26 May 2010, 7PM
-
- 123.3KB
-
-
-
-
-
-
-
-
-
+
+
+ | Folder name |
+ Date modified |
+ Size |
+ Users |
+
+
+
+
+ |
+ }
+ sx={{ alignItems: 'flex-start' }}
+ >
+ Travel pictures
+
+ |
+ 21 October 2011, 3PM |
+
+
+ 987.5MB
+
+ |
+
+
+
+
+
+
+
+ |
+
+
+ |
+ }
+ sx={{ alignItems: 'flex-start' }}
+ >
+ Important documents
+
+ |
+ 26 May 2010, 7PM |
+
+
+ 123.3KB
+
+ |
+
+
+
+
+
+
+
+ |
+
+
+
+
}
sx={{ alignItems: 'flex-start' }}
>
Travel pictures
-
+
987.5MB
@@ -369,7 +380,7 @@ export default function FilesExample() {
/>
- 21 October 2011, 3PM
+ 21 October 2011, 3PM
@@ -386,13 +397,13 @@ export default function FilesExample() {
}}
>
}
sx={{ alignItems: 'flex-start' }}
>
Important documents
-
+
123.3KB
@@ -429,7 +440,7 @@ export default function FilesExample() {
/>
- 26 May 2010, 7PM
+ 26 May 2010, 7PM
@@ -465,7 +476,7 @@ export default function FilesExample() {
photos-travel.zip
-
+
Added 25 May 2011
@@ -475,6 +486,8 @@ export default function FilesExample() {
theme.vars.radius.sm,
boxShadow: 'none',
@@ -501,16 +514,12 @@ export default function FilesExample() {
}}
>
- torres-del-paine.png
-
+ torres-del-paine.png
+
Added 5 Aug 2016
-
+
@@ -544,7 +553,7 @@ export default function FilesExample() {
platform_ios.zip
-
+
Added 26 May 2011
@@ -569,27 +578,16 @@ export default function FilesExample() {
-
-
-
-
+
+
+
+ Details
+
+
+ Activity
+
+
+
![]()
-
+
Shared with
@@ -629,38 +627,38 @@ export default function FilesExample() {
'& > *:nth-child(odd)': { color: 'text.secondary' },
}}
>
- Type
-
+ Type
+
Image
- Size
-
+ Size
+
3,6 MB (3,258,385 bytes)
- Storage used
-
+ Storage used
+
3,6 MB (3,258,385 bytes)
- Location
-
+ Location
+
Travel pictures
- Owner
-
+ Owner
+
Michael Scott
- Modified
-
+ Modified
+
26 October 2016
- Created
-
+ Created
+
5 August 2016
diff --git a/docs/data/joy/getting-started/templates/files/components/Navigation.tsx b/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
index bfecd94035107f..2295a88ec3cb54 100644
--- a/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
@@ -36,8 +36,8 @@ export default function Navigation() {
}}
>
-
-
+
+
My files
diff --git a/docs/data/joy/getting-started/templates/files/theme.tsx b/docs/data/joy/getting-started/templates/files/theme.tsx
deleted file mode 100644
index 02de5b0186517d..00000000000000
--- a/docs/data/joy/getting-started/templates/files/theme.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { extendTheme } from '@mui/joy/styles';
-
-export default extendTheme({
- colorSchemes: {
- light: {
- palette: {
- background: {
- body: 'var(--joy-palette-neutral-50)',
- },
- },
- },
- dark: {
- palette: {
- background: {
- body: 'var(--joy-palette-common-black)',
- surface: 'var(--joy-palette-neutral-900)',
- },
- },
- },
- },
- fontFamily: {
- // display: "'Inter', var(--joy-fontFamily-fallback)",
- // body: "'Inter', var(--joy-fontFamily-fallback)",
- },
-});
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx
index 8a4b02aaea2301..7d9c8539d0979c 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx
@@ -31,7 +31,7 @@ export default function HeroLeft01() {
-
+
The new version is out.
-
+
This is where a notification message will appear.
Enter text into this container.
@@ -40,7 +40,7 @@ export default function HeroLeft07() {
+
({
'[data-feather], .feather': {
- color: 'var(--Icon-color)',
+ color: `var(--Icon-color, ${theme.vars.palette.text.icon})`,
margin: 'var(--Icon-margin)',
- fontSize: 'var(--Icon-fontSize, 20px)',
+ fontSize: `var(--Icon-fontSize, ${theme.vars.fontSize.xl})`,
width: '1em',
height: '1em',
},
- }}
+ })}
/>
diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx
index e53b3cb44543be..53afcfbf33a804 100644
--- a/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx
@@ -32,10 +32,10 @@ export default function ChatBubble({
spacing={2}
sx={{ mb: 0.25 }}
>
-
+
{sender === 'You' ? sender : sender.name}
- {timestamp}
+ {timestamp}
{attachment ? (
{attachment.fileName}
- {attachment.size}
+ {attachment.size}
diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx
index 2a5afdbe8f2f2c..fd7ab359b1bdb3 100644
--- a/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx
@@ -36,7 +36,6 @@ export default function ChatListItem({
setSelectedChat({ id, sender, messages });
}}
selected={selected}
- variant={selected ? 'soft' : 'plain'}
color="neutral"
sx={{
flexDirection: 'column',
@@ -51,10 +50,14 @@ export default function ChatListItem({
{sender.name}
- {sender.username}
+ {sender.username}
-
+
5 mins ago
{messages[0].unread && (
@@ -63,7 +66,7 @@ export default function ChatListItem({
{sender.name}
- {sender.username}
+
+ {sender.username}
diff --git a/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx b/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
index 28d996bed53ed0..b984a8e4dbf7e5 100644
--- a/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/MyMessages.tsx
@@ -10,7 +10,6 @@ export default function MyProfile() {
return (
({
- color: theme.vars.palette.text.tertiary,
-}));
-
export default function Sidebar() {
return (
Home
-
+
@@ -116,7 +111,7 @@ export default function Sidebar() {
Dashboard
-
+
@@ -125,7 +120,7 @@ export default function Sidebar() {
Projects
-
+
@@ -134,7 +129,7 @@ export default function Sidebar() {
Tasks
-
+
@@ -143,7 +138,7 @@ export default function Sidebar() {
Reporting
-
+
@@ -156,7 +151,7 @@ export default function Sidebar() {
-
+
View all
@@ -203,7 +198,7 @@ export default function Sidebar() {
Used space
-
+
Your team has used 80% of your available space. Need more?
@@ -223,7 +218,7 @@ export default function Sidebar() {
Steve E.
- @steveEberger
+ @steveEberger
diff --git a/docs/data/joy/getting-started/templates/messages/theme.ts b/docs/data/joy/getting-started/templates/messages/theme.ts
deleted file mode 100644
index c63a488573e1f3..00000000000000
--- a/docs/data/joy/getting-started/templates/messages/theme.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { extendTheme } from '@mui/joy/styles';
-
-export default extendTheme({
- colorSchemes: {
- light: {
- palette: {
- background: {
- body: 'var(--joy-palette-neutral-50)',
- },
- },
- },
- dark: {
- palette: {
- neutral: {
- outlinedBorder: 'var(--joy-palette-neutral-700)',
- },
- },
- },
- },
- components: {
- JoyAutocomplete: {
- styleOverrides: {
- root: {
- boxShadow: 'var(--joy-shadow-xs)',
- },
- },
- },
- JoyButton: {
- styleOverrides: {
- root: {
- boxShadow: 'var(--joy-shadow-xs)',
- },
- },
- },
- JoyInput: {
- styleOverrides: {
- root: {
- boxShadow: 'var(--joy-shadow-xs)',
- },
- },
- },
- JoyTextarea: {
- styleOverrides: {
- root: {
- boxShadow: 'var(--joy-shadow-xs)',
- },
- },
- },
- JoySelect: {
- styleOverrides: {
- root: {
- boxShadow: 'var(--joy-shadow-xs)',
- },
- },
- },
- JoyStack: {
- defaultProps: {
- useFlexGap: true,
- },
- },
- },
- fontFamily: {
- display: "'Inter', var(--joy-fontFamily-fallback)",
- body: "'Inter', var(--joy-fontFamily-fallback)",
- },
-});
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/App.tsx b/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
index e5d92e90b20782..45afc87d7319fe 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
@@ -13,7 +13,6 @@ import SecondSidebar from './components/SecondSidebar';
import OrderTable from './components/OrderTable';
import Header from './components/Header';
import ColorSchemeToggle from './components/ColorSchemeToggle';
-import customTheme from './theme';
const useEnhancedEffect =
typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -31,17 +30,17 @@ export default function JoyOrderDashboardTemplate() {
}, [status]);
return (
-
+
({
'[data-feather], .feather': {
- color: 'var(--Icon-color)',
+ color: `var(--Icon-color, ${theme.vars.palette.text.icon})`,
margin: 'var(--Icon-margin)',
- fontSize: 'var(--Icon-fontSize, 20px)',
+ fontSize: `var(--Icon-fontSize, ${theme.vars.fontSize.xl})`,
width: '1em',
height: '1em',
},
- }}
+ })}
/>
@@ -104,7 +103,7 @@ export default function JoyOrderDashboardTemplate() {
>
Dashboard
-
+
Orders
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/FirstSidebar.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/FirstSidebar.tsx
index a2c908a6e3c448..4b7564f2ef7d7d 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/FirstSidebar.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/FirstSidebar.tsx
@@ -13,8 +13,8 @@ export default function FirstSidebar() {
return (
Status
|