feat(editor): group configuration of note styles to panel from toolbar (#12230)

Close [BS-3401](https://linear.app/affine-design/issue/BS-3401/note-style-需要合并同类项)

![CleanShot 2025-05-12 at 14.23.01.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/ddf8623f-aa9c-491e-a7bf-90419fb19848.png)

blocksuite/affine/components/src/color-picker/color-panel.ts

@@ -2,7 +2,7 @@ import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model';
 import { DefaultTheme, resolveColor } from '@blocksuite/affine-model';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { ColorEvent } from '@blocksuite/affine-shared/utils';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, type PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -115,12 +115,12 @@ export class EdgelessColorPanel extends LitElement {
     :host {
       display: grid;
       grid-gap: 4px;
-      grid-template-columns: repeat(9, 1fr);
+      grid-template-columns: repeat(var(--columns, 9), 1fr);
     }
 
     /* note */
     :host(.small) {
-      grid-template-columns: repeat(6, 1fr);
+      grid-template-columns: repeat(var(--columns, 6), 1fr);
       grid-gap: 8px;
     }
 
@@ -156,6 +156,16 @@ export class EdgelessColorPanel extends LitElement {
     return this.value && resolveColor(this.value, this.theme);
   }
 
+  override willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('columns')) {
+      if (this.columns) {
+        this.style.setProperty('--columns', this.columns.toString());
+      } else {
+        this.style.removeProperty('--columns');
+      }
+    }
+  }
+
   override render() {
     return html`
       ${repeat(
@@ -197,6 +207,9 @@ export class EdgelessColorPanel extends LitElement {
 
   @property({ attribute: false })
   accessor value: Color | null = null;
+
+  @property({ attribute: false })
+  accessor columns: number | undefined = undefined;
 }
 
 export class EdgelessTextColorIcon extends LitElement {

blocksuite/affine/components/src/color-picker/icons.ts

@@ -1,4 +1,5 @@
 import { isTransparent } from '@blocksuite/affine-model';
+import { cssVarV2 } from '@blocksuite/affine-shared/theme';
 import { html, svg, type TemplateResult } from 'lit';
 
 export function TransparentIcon(hollowCircle = false) {
@@ -18,7 +19,7 @@ export function TransparentIcon(hollowCircle = false) {
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M-1.17405 5.17857C-1.2241 5.5285 -1.25 5.88623 -1.25 6.25V8.39286H1.96429V11.6071H-1.25V13.75C-1.25 14.1138 -1.2241 14.4715 -1.17405 14.8214H1.96429V18.0357H0.0943102C0.602244 18.7639 1.23609 19.3978 1.96429 19.9057V18.0357L5.17857 18.0357V21.174C5.5285 21.2241 5.88623 21.25 6.25 21.25H8.39286V18.0357H11.6071V21.25H13.75C14.1138 21.25 14.4715 21.2241 14.8214 21.174V18.0357H18.0357L18.0357 19.9057C18.7639 19.3978 19.3978 18.7639 19.9057 18.0357L18.0357 18.0357V14.8214H21.174C21.2241 14.4715 21.25 14.1138 21.25 13.75V11.6071H18.0357V8.39286H21.25V6.25C21.25 5.88623 21.2241 5.5285 21.174 5.17857H18.0357V1.96429H19.9057C19.3978 1.23609 18.7639 0.602244 18.0357 0.09431L18.0357 1.96429H14.8214V-1.17405C14.4715 -1.2241 14.1138 -1.25 13.75 -1.25H11.6071V1.96429H8.39286V-1.25H6.25C5.88623 -1.25 5.5285 -1.2241 5.17857 -1.17405V1.96429H1.96429V0.0943099C1.23609 0.602244 0.602244 1.23609 0.0943099 1.96429H1.96429V5.17857H-1.17405ZM5.17857 5.17857V1.96429H8.39286V5.17857H5.17857ZM5.17857 8.39286H1.96429V5.17857H5.17857V8.39286ZM8.39286 8.39286V5.17857H11.6071V8.39286H8.39286ZM8.39286 11.6071V8.39286H5.17857V11.6071H1.96429V14.8214H5.17857V18.0357H8.39286V14.8214H11.6071V18.0357H14.8214V14.8214H18.0357V11.6071H14.8214V8.39286H18.0357V5.17857H14.8214V1.96429H11.6071V5.17857H14.8214V8.39286H11.6071V11.6071H8.39286ZM8.39286 11.6071V14.8214H5.17857V11.6071H8.39286ZM11.6071 11.6071H14.8214V14.8214H11.6071V11.6071Z"
-        fill="#D9D9D9"
+        fill="${cssVarV2('icon/tertiary')}"
       />
       ${CircleIcon}
     </svg>

blocksuite/affine/components/src/toolbar/icon-button.ts

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import type { Placement } from '@floating-ui/dom';
 import type { TemplateResult } from 'lit';
 import { css, html, LitElement, nothing } from 'lit';
@@ -19,7 +20,7 @@ export class EditorIconButton extends LitElement {
       display: flex;
       align-items: center;
       padding: var(--icon-container-padding);
-      color: var(--affine-icon-color);
+      color: ${unsafeCSSVarV2('icon/primary')};
       border-radius: 4px;
       cursor: pointer;
       white-space: nowrap;