@kapeta/style

Kapeta design system

Converts tokens.json from Figma token studio into tokens for Material UI v5.

Uses token-transformer to create a light and a dark theme:

• tokens.json -> tokens/dark.json
• tokens.json -> tokens/light.json

Then uses style-dictionary to convert the light and dark tokens into a format that works with different platforms. Currently the following are supported:

• Material UI v5 (@mui/material@5)

Usage

Material UI

import { lightTheme, darkTheme } from '@kapeta/styles/themes/mui';
import { createTheme } from '@mui/material/styles';

const theme = createTheme(lightTheme);

export const ThemedApp = () => (
    <ThemeProvider theme={theme}>
        <App />
    </ThemeProvider>
);