feat(blocks): impl color picker with signals

[fundon]

Closes: BS-610

Add Color Picker for custom colors

Supports

• note : background
• frame: background
• shape: fillColor strokeColor color
• connector: stroke labelStyle.color
• text: color
• brush: color

Features

• comporents: add color picker for custom colors

  • edgeless-color-picker-button
  • edgeless-color-picker
  • edgeless-color-custom-button

• models: add CustomColor type for color type

  • e.g. color: string => color: string | CustomColor

  type CustomColor = {
    normal?: string; // #ff00ff00
    light?: string; // #ff00ff00
    dark?: string; // #ff00ff00
  }

• utils: extand ThemeObserver

  • mode: current theme, light, dark or normal
  • getColor: gets a color without going through computed style
  • getRealColor: gets a real color with going through computed style

• color fallback rules:

  1. if a color is a CustomColor and includes light and dark fields, automatically take effect according to different themes
  2. if a color is a CustomColor and just includes normal field, consistent colors across themes
  3. if a color is a string and currently only represents a css variable, e.g. --affine-note-background-blue

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 26, 2024 7:44am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Jul 26, 2024 7:44am

[graphite-app]

Your org has enabled the Graphite merge queue for merging into master

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[fundon]

• feat(blocks): impl color picker with signals #7585 : 2 dependent PRs (#7721 , #7729 ) 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @fundon and the rest of your teammates on Graphite

[L-Sun]

This change will lead AFFiNE preloading page throw a error. May be there are some legacy data of shape do not contains color

[fundon]

Good catch. I will check that.

[fundon]

But it should return #000000.