Merge pull request #10433 from marmelab/nano-adjustments

Adjust Nano theme for better legibility
marmelab · Jan 6, 2025 · 5fc1098 · 5fc1098
2 parents 4d8b7bf + 71c9192
commit 5fc1098
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/docs/AppTheme.md b/docs/AppTheme.md
@@ -145,10 +145,10 @@ export const App = () => (
 );
 ```
 
-You must also import the Onest font in your `index.html` file:
+You must also import the Inter font in your `index.html` file:
 
 ```html
-<link href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
 ```
 
 ### Radiant

diff --git a/examples/demo/index.html b/examples/demo/index.html
@@ -106,7 +106,7 @@
             rel="stylesheet"
         />
         <link
-            href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;700&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap"
             rel="stylesheet"
         />
         <link

diff --git a/packages/ra-ui-materialui/src/theme/nanoTheme.ts b/packages/ra-ui-materialui/src/theme/nanoTheme.ts
@@ -56,6 +56,12 @@ const componentsOverrides = (theme: Theme) => ({
                 paddingBottom: theme.spacing(0.2),
             },
         },
+        variants: [
+            {
+                props: { size: 'small' as const },
+                style: { fontSize: '1em' },
+            },
+        ],
     },
     MuiCard: {
         defaultProps: {
@@ -150,9 +156,6 @@ const componentsOverrides = (theme: Theme) => ({
             elevation1: {
                 boxShadow: theme.shadows[1],
             },
-            root: {
-                backgroundColor: theme.palette.background.default,
-            },
         },
     },
     MuiSnackbar: {
@@ -340,7 +343,7 @@ const lightPalette: PaletteOptions = {
     mode: 'light' as 'light',
     primary: { main: '#00585C' },
     secondary: { main: '#64B4B8' },
-    background: { default: '#f9fafb' },
+    background: { default: '#f4f4f4' },
     text: { primary: '#212b36' },
     ...alert,
 };
@@ -355,13 +358,14 @@ const createNanoTheme = (palette: RaThemeOptions['palette']) => {
         },
         spacing: 8,
         typography: {
-            fontFamily: 'Onest, sans-serif',
+            fontFamily: 'Inter, sans-serif',
             fontSize: 12,
             h1: { fontSize: '7rem' },
             h2: { fontWeight: 400 },
             h3: { fontWeight: 500 },
             h4: { fontWeight: 700 },
             h5: { fontWeight: 700 },
+            button: { textTransform: undefined },
         },
     };
     const theme = createTheme(themeOptions);