Commits on Jul 26, 2024

1. feat(blocks): impl color picker with signals (#7585) …

   Closes: [BS-610](https://linear.app/affine-design/issue/BS-610/edgeless-elements-color-picker-updated)
   
   ## 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`
   
     ```ts
     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`

   

   fundon committed Jul 26, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for e0aba03
   • Browse repository at this point

   Copy the full SHA

   e0aba03 View commit details

   Browse the repository at this point in the history