feat(blocks): impl color picker with signals

packages/blocks/src/_common/components/embed-card/modal/styles.ts

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-import { INPUT_FONT_BASE, PANEL_BASE } from '../../../styles.js';
+import { FONT_XS, PANEL_BASE } from '../../../styles.js';
 
 export const embedCardModalStyles = css`
   .embed-card-modal-mask {
@@ -14,7 +14,7 @@ export const embedCardModalStyles = css`
   }
 
   .embed-card-modal-wrapper {
-    ${PANEL_BASE}
+    ${PANEL_BASE};
     flex-direction: column;
     position: absolute;
     left: 0;
@@ -51,7 +51,7 @@ export const embedCardModalStyles = css`
     border: 1px solid var(--affine-border-color);
     background: var(--affine-white-10);
     color: var(--affine-text-primary-color);
-    ${INPUT_FONT_BASE}
+    ${FONT_XS};
   }
   input.embed-card-modal-input {
     padding-top: 4px;

packages/blocks/src/_common/components/filterable-list/styles.ts

@@ -5,7 +5,7 @@ import { scrollbarStyle } from '../utils.js';
 
 export const filterableListStyles = css`
   :host {
-    ${PANEL_BASE}
+    ${PANEL_BASE};
 
     flex-direction: column;
     padding: 0;

packages/blocks/src/_common/components/toolbar/menu-button.ts

@@ -1,5 +1,11 @@
 import { WithDisposable } from '@blocksuite/block-std';
-import { LitElement, type TemplateResult, css, html } from 'lit';
+import {
+  LitElement,
+  type PropertyValues,
+  type TemplateResult,
+  css,
+  html,
+} from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 
 import type { EditorIconButton } from './icon-button.js';
@@ -21,24 +27,21 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
     }
   `;
 
-  close() {
-    this._popper?.hide();
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.tabIndex = 0;
-    if (this.contentPadding) {
-      this.style.setProperty('--content-padding', this.contentPadding);
-    }
-  }
-
   override firstUpdated() {
     this._popper = createButtonPopper(
       this._trigger,
       this._content,
       ({ display }) => {
         this._trigger.showTooltip = display === 'hidden';
+
+        this.dispatchEvent(
+          new ToggleEvent('toggle', {
+            newState: display,
+            bubbles: false,
+            cancelable: false,
+            composed: true,
+          })
+        );
       },
       {
         mainAxis: 12,
@@ -60,6 +63,10 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
     this._disposables.add(this._popper);
   }
 
+  hide() {
+    this._popper?.hide();
+  }
+
   override render() {
     return html`
       ${this.button}
@@ -69,6 +76,16 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
     `;
   }
 
+  show(force = false) {
+    this._popper?.show(force);
+  }
+
+  override willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has('contentPadding')) {
+      this.style.setProperty('--content-padding', this.contentPadding ?? '');
+    }
+  }
+
   @query('editor-menu-content')
   private accessor _content!: EditorMenuContent;
 
@@ -110,7 +127,7 @@ export class EditorMenuContent extends LitElement {
     }
 
     :host([data-show]) {
-      ${PANEL_BASE}
+      ${PANEL_BASE};
       justify-content: center;
       padding: var(--content-padding, 0 6px);
     }

packages/blocks/src/_common/components/toolbar/toolbar.ts

@@ -9,7 +9,7 @@ import { stopPropagation } from '../../utils/event.js';
 export class EditorToolbar extends WithDisposable(LitElement) {
   static override styles = css`
     :host {
-      ${PANEL_BASE}
+      ${PANEL_BASE};
       height: 36px;
       box-sizing: content-box;
     }

packages/blocks/src/_common/edgeless/note/consts.ts

@@ -1,7 +1,6 @@
 import { createZodUnion } from '../../utils/index.js';
 
 export const NOTE_BACKGROUND_COLORS = [
-  '--affine-palette-transparent',
   '--affine-note-background-yellow',
   '--affine-note-background-orange',
   '--affine-note-background-red',
@@ -19,7 +18,7 @@ export const NoteBackgroundColorsSchema = createZodUnion(
   NOTE_BACKGROUND_COLORS
 );
 
-export const DEFAULT_NOTE_BACKGROUND_COLOR = NOTE_BACKGROUND_COLORS[6];
+export const DEFAULT_NOTE_BACKGROUND_COLOR = NOTE_BACKGROUND_COLORS[5];
 
 export const NOTE_SHADOWS = [
   '',

packages/blocks/src/_common/inline/presets/nodes/link-node/link-popup/styles.ts

@@ -1,10 +1,10 @@
 import { css } from 'lit';
 
-import { INPUT_FONT_BASE, PANEL_BASE } from '../../../../../styles.js';
+import { FONT_XS, PANEL_BASE } from '../../../../../styles.js';
 
 const editLinkStyle = css`
   .affine-link-edit-popover {
-    ${PANEL_BASE}
+    ${PANEL_BASE};
     display: grid;
     grid-template-columns: auto auto;
     grid-template-rows: repeat(2, 1fr);
@@ -22,7 +22,7 @@ const editLinkStyle = css`
   .affine-link-edit-popover label {
     box-sizing: border-box;
     color: var(--affine-icon-color);
-    ${INPUT_FONT_BASE}
+    ${FONT_XS};
     font-weight: 400;
   }
 
@@ -32,7 +32,7 @@ const editLinkStyle = css`
     border: none;
     background: transparent;
     color: var(--affine-text-primary-color);
-    ${INPUT_FONT_BASE}
+    ${FONT_XS};
   }
   .affine-link-edit-popover input::placeholder {
     color: var(--affine-placeholder-color);
@@ -160,7 +160,7 @@ export const linkPopupStyle = css`
   }
 
   .affine-link-popover.create {
-    ${PANEL_BASE}
+    ${PANEL_BASE};
     gap: 12px;
     padding: 12px;
 
@@ -178,7 +178,7 @@ export const linkPopupStyle = css`
     border-style: solid;
     border-color: transparent;
     color: var(--affine-text-primary-color);
-    ${INPUT_FONT_BASE}
+    ${FONT_XS};
   }
   .affine-link-popover-input::placeholder {
     color: var(--affine-placeholder-color);

packages/blocks/src/_common/styles.ts

@@ -1,13 +1,35 @@
 import { baseTheme } from '@toeverything/theme';
-import { css, unsafeCSS } from 'lit';
+import { unsafeCSS } from 'lit';
 
-export const PANEL_BASE_COLORS = css`
+export const FONT_BASE = unsafeCSS(`
+  font-family: ${baseTheme.fontSansFamily};
+  font-feature-settings:
+    'clig' off,
+    'liga' off;
+  font-style: normal;
+`);
+
+export const FONT_SM = unsafeCSS(`
+  ${FONT_BASE};
+  font-size: var(--affine-font-sm);
+  font-weight: 500;
+  line-height: 22px;
+`);
+
+export const FONT_XS = unsafeCSS(`
+  ${FONT_BASE};
+  font-size: var(--affine-font-xs);
+  font-weight: 500;
+  line-height: 20px;
+`);
+
+export const PANEL_BASE_COLORS = unsafeCSS(`
   color: var(--affine-icon-color);
   background: var(--affine-background-overlay-panel-color);
   box-shadow: var(--affine-shadow-4);
-`;
+`);
 
-export const PANEL_BASE = css`
+export const PANEL_BASE = unsafeCSS(`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -16,25 +38,6 @@ export const PANEL_BASE = css`
   border-radius: 4px;
   border: 0.5px solid var(--affine-border-color);
 
-  font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
-  font-feature-settings:
-    'clig' off,
-    'liga' off;
-  font-size: var(--affine-font-sm);
-  font-style: normal;
-  font-weight: 500;
-  line-height: 22px;
-
-  ${PANEL_BASE_COLORS}
-`;
-
-export const INPUT_FONT_BASE = css`
-  font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
-  font-feature-settings:
-    'clig' off,
-    'liga' off;
-  font-size: var(--affine-font-xs);
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-`;
+  ${PANEL_BASE_COLORS};
+  ${FONT_SM};
+`);

packages/blocks/src/_common/theme/css-variables.ts

@@ -1,5 +1,7 @@
 /* CSS variables. You need to handle all places where `CSS variables` are marked. */
 
+import type { CustomColor } from '../../surface-block/consts.js';
+
 export const ColorVariables = [
   '--affine-brand-color',
   '--affine-primary-color',
@@ -139,9 +141,14 @@ export type CssVariableName = Extract<
 export type CssVariablesMap = Record<CssVariableName, string>;
 
 export function isCssVariable(name: string): name is CssVariableName {
-  return StyleVariables.includes(name as CssVariableName);
+  return (
+    name.startsWith('--') && StyleVariables.includes(name as CssVariableName)
+  );
 }
 
-export function isTransparent(color: CssVariableName) {
-  return color.toLowerCase() === '--affine-palette-transparent';
+export function isTransparent(color: CssVariableName | CustomColor) {
+  return (
+    typeof color === 'string' &&
+    color.toLowerCase() === '--affine-palette-transparent'
+  );
 }