Tokens:
- FAST Computing: fast_core, fast_argos, fast_atlas
- Simplifica: simplifica_core, simplifica_burlo
npm install @fast-computing/fast-graphics @mui/material @emotion/react @emotion/styled// components/ThemeProvider.tsx
'use client';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { createThemeFromTokens } from '@fast-computing/fast-graphics/mui-theme';
import type { BrandName } from '@fast-computing/fast-graphics/tokens';
type Props = { brand?: BrandName; children: React.ReactNode };
export function AppThemeProvider({ brand = 'fast_core', children }: Props) {
const theme = createThemeFromTokens(brand, { withComponentDefaults: true });
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
}// app/layout.tsx
import { AppThemeProvider } from '@/components/ThemeProvider';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="it">
<body>
<AppThemeProvider brand="fast_core">{children}</AppThemeProvider>
</body>
</html>
);
}'use client';
import { Box, Typography, Button } from '@mui/material';
export function MyCard() {
return (
<Box sx={{ bgcolor: 'background.default', p: 3, borderRadius: 2 }}>
<Typography variant="h6" sx={{ color: 'text.primary' }}>
Hello FAST
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
Secondary text
</Typography>
<Button variant="contained" color="primary">
Click
</Button>
</Box>
);
}'use client';
import { useTheme } from '@mui/material/styles';
export function MyCard() {
const theme = useTheme();
return (
<div style={{ background: theme.palette.background.default, padding: 24 }}>
<h2 style={{ color: theme.palette.text.primary }}>
Hello FAST
</h2>
<p style={{ color: theme.palette.text.secondary }}>
Secondary text
</p>
</div>
);
}
useThemeutile quando servono i valori puri (canvas, stili inline nativi, conditional logic). Per componenti MUI bastasx.
| Param | Type | Default | Description |
|---|---|---|---|
brand |
'fast_core' | 'fast_argos' | 'fast_atlas' | 'simplifica_core' | 'simplifica_burlo' |
— | Token name |
options.withComponentDefaults |
boolean |
false |
Adds default MUI (AppBar color primary, Button variant contained) |
packages/
tokens/ → design tokens + CSS vars generator
mui-theme/ → createThemeFromTokens()
Rebuild package:
npm install
npm run buildRebuild + generate .tgz for local use:
npm run build && cd ../tokens && npm pack && cd ../mui-theme && npm packTo publish a new version to GitHub Packages:
- Bump version in
package.json(root + packages). - Commit changes.
- Tag the commit with the version:
git tag v<version>
git push origin v<version>Versioning notes:
- Core package changes needs to be marked as major updates (ex. 1.1.5 -> 2.0.0) - update required in every app
- Low impact changes, such as adding new tokens, needs to be marked as minor updates (ex. 1.1.5 -> 1.2.0)
- Localized, small changes, such as fixing a token, needs to be marked as fix updates (ex. 1.1.5 -> 1.1.6 ) - only specific apps need to be updated