https://github.com/graylog2/sawmill-sd
sd design system
https://github.com/graylog2/sawmill-sd
Last synced: 21 days ago
JSON representation
sd design system
- Host: GitHub
- URL: https://github.com/graylog2/sawmill-sd
- Owner: Graylog2
- Created: 2021-11-11T12:33:15.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-05T13:39:38.000Z (over 4 years ago)
- Last Synced: 2024-04-23T19:38:54.576Z (about 2 years ago)
- Language: TypeScript
- Homepage: https://backlight.dev/view/f8bLRusG6EujzpCzDM6X
- Size: 622 KB
- Stars: 1
- Watchers: 17
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sawmill 
#### a Design System by Graylog
### Implementation
`yarn add --dev @graylog/sawmill-sd`
_or_
`npm install --save-dev @graylog/sawmill-sd`
```tsx
import { theme as sawmillTheme } from '@graylog/sawmill-sd';
const SawmillStyles = createGlobalStyle`
${sawmillTheme.css.root}
${sawmillTheme.css.noir}
`;
function renderAppContainer(appContainer) {
ReactDOM.render(
,
appContainer,
);
}
window.onload = () => {
const appContainer = document.createElement('div');
appContainer.id = 'app-root';
document.body.appendChild(appContainer);
renderAppContainer(appContainer);
};
```
Currently the app will need to set the `data-sawmill-mode` on the `` tag manually.
_This could probably be a utility that Sawmill offers in the future._
```ts
document.body.dataset.sawmillMode = "teint";
// or
document.body.dataset.sawmillMode = "noir";
```
## Tokens
All theme mode color variables are generated in CSS. The generated JSON file only currently has the default colors.
A new [format](https://amzn.github.io/style-dictionary/#/api?id=registerformat)
or [filter](https://amzn.github.io/style-dictionary/#/api?id=registerfilter) will probably need to be built to properly
support Chakra on Mantine.
### [Colors](https://backlight.dev/doc/f8bLRusG6EujzpCzDM6X/colors/doc/index.mdx)
Contains all the base colors for brand and variants. You
can [reference](https://amzn.github.io/style-dictionary/#/tokens?id=referencing-aliasing) these colors via their alias
to have the library properly construct variables.
For each color, you will need a `value`, but you can also add a `modeNameValue` that will allow you to generate other
modes. You will notice some `noirValue` set with a different color to generate in the `variables-noir.css`. All these
options can be configured in the root of in the system in `sd.config.js`.
### [Elevations](https://backlight.dev/doc/f8bLRusG6EujzpCzDM6X/elevations/doc/index.mdx)
There is a bug in the docs where you can't click on the `underneath` variant. Need to resolve this in some way to allow
it to be clickable.
### [Opacity](https://backlight.dev/doc/f8bLRusG6EujzpCzDM6X/opacity/doc/index.mdx)
These can be used as the alpha values for `rgba`, `hsla`, and the `opacity` property.
### [Radii](https://backlight.dev/doc/f8bLRusG6EujzpCzDM6X/radii/doc/index.mdx)
Variables for border-radius.
> _I haven't done a full assessment of our usage here, so these options may need to be adjusted to better fit into the existing design._
### [Shadows](https://backlight.dev/doc/f8bLRusG6EujzpCzDM6X/shadows/doc/index.mdx)
Similiar to Radii, this will be for shadows, but have not done a full usage assessment of the different shadows in
production today
### [Spacings](https://backlight.dev/doc/f8bLRusG6EujzpCzDM6X/spacings/doc/index.mdx)
Spacings are based off of the font-size using `rem` and then I just converted it manually to pixels.
There are a lot of ways this could be automated, the existing one is based off of a Fibonacci sequence.
### Breakpoints
These are not yet integrated, we have a few defined in the current system as
```ts
const breakpointSizes: { [key: string]: number } = {
xs: 480,
sm: 768,
md: 992,
lg: 1200,
};
```
And they are in-use in a few different places of the app, such as the Header/Navigation bar.
I didn't implement anything here yet because I wanted to see what the requirements are going to be for using a
system like Mantine or other UI kit
---
## Stories
Stories are written in Storybook's [Component Story Format](https://backlight.dev/docs/component-story-format).
You can defined multiple stories for your components to visualize their variations:
```jsx
import { Button } from '../index';
import { layout } from '~/tui-utils';
export default layout;
export const primary = () => Primary;
export const secondary = () => Secondary;
export const disabled = () => Disabled;
export const secondary_disabled = () => (
Disabled
);
```
Stories for the components are located in their `stories/` folder.
## Documentation
Documentation pages are decorated by a React layout using the [@divriots/dockit-react](https://github.com/divriots/dockit-react) helpers. See the `layout` component.
### Pages
Each component embed its own documentation in its `doc/` folder. You can use any web format for your documentation but we recommend you to write it with the [mdx](https://backlight.dev/docs/mdx) format, allowing you to embed your components live in the documentation.