https://github.com/toeverything/design

Design System for AFFiNE and BlockSuite
https://github.com/toeverything/design

Last synced: about 10 hours ago
JSON representation

Design System for AFFiNE and BlockSuite

• Host: GitHub
• URL: https://github.com/toeverything/design
• Owner: toeverything
• License: mpl-2.0
• Created: 2023-05-08T02:43:13.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-20T02:59:26.000Z (2 days ago)
• Last Synced: 2024-12-20T03:35:32.844Z (2 days ago)
• Language: TypeScript
• Homepage:
• Size: 19.9 MB
• Stars: 31
• Watchers: 2
• Forks: 13
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-affine - affine-design - Design System for the blocksuite/AFFiNE (Design)

README

        
# Design

> Design System for the BlockSuite/AFFiNE.

## Modules

- [`@toeverything/theme`](packages/theme): Theme for the [AFFiNE](https://github.com/toeverything/AFFiNE) and [Blocksuite](https://github.com/toeverything/blocksuite).

- [`@toeverything/components`](packages/components): Basic components for the [AFFiNE](https://github.com/toeverything/AFFiNE) and [Blocksuite](https://github.com/toeverything/blocksuite).

## Components doc

https://toeverything.github.io/design/

## Theme usage

### Import

import css in top level

- In css

  ```css

  @import '@toeverything/theme/style.css';

  ```

- In js

  ```js

  import '@toeverything/theme/style.css';

  ```

### Use variable in TypeScript

```ts

import { cssVar } from '@toeverything/theme';

import { cssVarV2 } from '@toeverything/theme/v2';

```

### Presets

- **Preset Typography**:

  Styles are included in `@toeverything/theme/style.css`.

  ```ts

  import { style } from '@vanilla-extract/css';

  import { headlineRegular } from '@toeverything/theme/typography';

  const myStyle = style([

    headlineRegular,

    {

      // ...others

    },

  ]);

  ```

## License

[MPL-2.0](LICENSE)