Awesome
Design
Design System for the BlockSuite/AFFiNE.
Modules
@toeverything/theme
: Theme for the AFFiNE and Blocksuite.@toeverything/components
: Basic components for the AFFiNE and Blocksuite.
Components doc
https://toeverything.github.io/design/
Theme usage
Import
import css in top level
- In css
@import '@toeverything/theme/style.css';
- In js
import '@toeverything/theme/style.css';
Use variable in TypeScript
import { cssVar } from '@toeverything/theme';
import { cssVarV2 } from '@toeverything/theme/v2';
Presets
-
Preset Typography: Styles are included in
@toeverything/theme/style.css
.import { style } from '@vanilla-extract/css'; import { headlineRegular } from '@toeverything/theme/typography'; const myStyle = style([ headlineRegular, { // ...others }, ]);