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
    },
  ]);

License

MPL-2.0