Sawmill

Graylog common design system. This package provides the mantine (SawmillMantine) and styled-components (SawmillSC) theme.

Using Sawmill

$3

``bash
$ yarn add @graylog/sawmill
`

$3

Once the package is installed, you need to adjust the styled-components type declaration @types/styled-components/index.d.ts, in case you need want to use the styled-components sawmill (SawmillSC):

`tsx
import 'styled-components';
import type { StyledComponentsTheme } from '@graylog/sawmill/styled-components';

declare module 'styled-components' {
export interface DefaultTheme extends StyledComponentsTheme {}
}
`

$3

Each sawmill provides a theme for the related theme provider:

`tsx
import SawmillMantine from '@graylog/sawmill/mantine';
import type { ColorScheme } from '@graylog/sawmill';

const AppThemeProvider = ({ children }: React.PropsWithChildren<{}>) => {
const [colorScheme, setColorScheme] = useState(DEFAULT_THEME_MODE);
const mantineTheme = useMemo(
() => SawmillMantine({ colorScheme }),
[colorScheme],
);

return {children}
}
`

$3


To import the fonts defined in the sawmill theme, just include import '@graylog/sawmill/fonts' in your project.

Making changes

The foundation of the styled-component and mantine sawmill is the THEME_BASE.ts file.
When you make a change to this theme base you need to run yarn generate-themes to generate the theme for each sawmill.

Building the library

To build the library you need to run:

`shell
$ yarn build # Compile source with tsc and generate dist files.
`

Testing changes locally


When you want to test changes locally, you need to add the local repository temporary as a dependency for you project:
`shell
yarn add file:/path/to/this/project
``