@aquera/nile-elements 2.0.0 → 2.0.2

package/src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts

@@ -19,7 +19,7 @@ export const styles = css`
     border: 1px solid
       var(
         --nile-wysiwyg-border-color,
-        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd))
+        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral))
       );
     border-radius: var(
       --nile-wysiwyg-radius,
@@ -27,7 +27,7 @@ export const styles = css`
     );
     background: var(
       --nile-wysiwyg-bg,
-      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
     );
     box-sizing: border-box;
   }
@@ -39,7 +39,7 @@ export const styles = css`
     z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);
     background: var(
       --nile-wysiwyg-bg,
-      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
     );
   }
 
@@ -54,18 +54,18 @@ export const styles = css`
   }
 
   :host([disabled]) .nile-wysiwyg {
-    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled, #98a2b3));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
     background: var(
       --nile-wysiwyg-disabled-bg,
-      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7))
+      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle))
     );
     cursor: not-allowed;
     pointer-events: none;
   }
 
   :host([disabled]) .ProseMirror {
-    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled, #98a2b3));
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
   .nile-wysiwyg__surface {
@@ -93,7 +93,7 @@ export const styles = css`
     word-break: break-word;
     color: var(
       --nile-wysiwyg-color,
-      var(--nile-colors-dark-900, var(--ng-colors-text-primary, #101828))
+      var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))
     );
     box-sizing: border-box;
     border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))
@@ -118,7 +118,7 @@ export const styles = css`
 
   .ProseMirror-selectednode {
     outline: 2px solid
-      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb)));
+      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600)));
   }
 
   /* Gap cursor (inlined from prosemirror-gapcursor/style) */
@@ -158,7 +158,7 @@ export const styles = css`
     opacity: 0.7;
     color: var(
       --nile-wysiwyg-placeholder-color,
-      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3))
+      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary))
     );
   }
 
@@ -216,9 +216,12 @@ export const styles = css`
     border-left: 3px solid
       var(
         --nile-wysiwyg-blockquote-border,
-        var(--nile-colors-neutral-300, #d0d5dd)
+        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))
       );
-    color: var(--nile-wysiwyg-blockquote-color, var(--nile-colors-neutral-600, #475467));
+    color: var(
+      --nile-wysiwyg-blockquote-color,
+      var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600))
+    );
   }
 
   .ProseMirror ul,
@@ -229,7 +232,8 @@ export const styles = css`
 
   .ProseMirror hr {
     border: none;
-    border-top: 1px solid var(--nile-wysiwyg-border-color, #d0d5dd);
+    border-top: 1px solid
+      var(--nile-wysiwyg-border-color, var(--ng-colors-border-neutral));
     margin: 1em 0;
   }
 
@@ -237,7 +241,7 @@ export const styles = css`
   .ProseMirror a {
     color: var(
       --nile-wysiwyg-link-color,
-      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600, #2563eb))
+      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600))
     );
     text-decoration: none;
     cursor: pointer;
@@ -246,7 +250,10 @@ export const styles = css`
   .ProseMirror code.nile-wysiwyg__inline-code {
     font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
     font-size: 0.9em;
-    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));
+    background: var(
+      --nile-wysiwyg-code-bg,
+      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))
+    );
     border-radius: 4px;
     padding: 0.1em 0.35em;
   }
@@ -255,8 +262,11 @@ export const styles = css`
   .ProseMirror pre.nile-wysiwyg__code-block {
     font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
     font-size: 0.9em;
-    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));
-    border: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+    background: var(
+      --nile-wysiwyg-code-bg,
+      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))
+    );
+    border: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
     border-radius: 6px;
     padding: 12px 14px;
     margin: 0.5em 0;
@@ -281,13 +291,20 @@ export const styles = css`
     vertical-align: top;
     box-sizing: border-box;
     position: relative;
-    border: 1px solid var(--nile-wysiwyg-table-border, var(--nile-colors-neutral-300, #d0d5dd));
+    border: 1px solid
+      var(
+        --nile-wysiwyg-table-border,
+        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))
+      );
     padding: 6px 8px;
     min-width: 1em;
   }
 
   .ProseMirror th {
-    background: var(--nile-wysiwyg-table-header-bg, var(--nile-colors-neutral-50, #f9fafb));
+    background: var(
+      --nile-wysiwyg-table-header-bg,
+      var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary))
+    );
     font-weight: 600;
     text-align: left;
   }
@@ -306,7 +323,7 @@ export const styles = css`
     bottom: 0;
     width: 4px;
     z-index: 20;
-    background-color: var(--nile-colors-primary-300, #b692f6);
+    background-color: var(--nile-colors-primary-300, var(--ng-componentcolors-utility-purple-300));
     pointer-events: none;
   }
 
@@ -319,7 +336,7 @@ export const styles = css`
      guides while editing so the structure stays visible. --- */
   .ProseMirror table[data-layout] td,
   .ProseMirror table[data-layout] th {
-    border: 1px dashed var(--nile-colors-neutral-300, #e4e7ec);
+    border: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
     background: transparent;
     font-weight: inherit;
     text-align: inherit;
@@ -338,7 +355,7 @@ export const styles = css`
     font-size: 12px;
     line-height: 1;
     padding: 0 1px;
-    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   .ProseMirror .selectedCell:after {
@@ -373,8 +390,8 @@ export const styles = css`
     position: absolute;
     width: 9px;
     height: 9px;
-    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
-    border: 1.5px solid #ffffff;
+    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
+    border: 1.5px solid var(--ng-colors-bg-primary);
     border-radius: 2px;
     z-index: 2;
   }
@@ -384,7 +401,7 @@ export const styles = css`
   }
 
   .ProseMirror .nile-wysiwyg__image-resizer--selected img {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
@@ -419,7 +436,7 @@ export const styles = css`
 
   .ProseMirror .nile-wysiwyg__figcaption {
     font-size: 0.85em;
-    color: var(--nile-colors-neutral-500, #667085);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
     text-align: center;
     padding: 4px 8px;
     line-height: 1.4;
@@ -430,7 +447,7 @@ export const styles = css`
     float: left;
     width: 100%;
     pointer-events: none;
-    color: var(--nile-colors-neutral-400, #98a2b3);
+    color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));
     margin-bottom: -1.4em;
   }
 
@@ -449,7 +466,7 @@ export const styles = css`
     max-width: 100%;
     margin: 0.75em 0;
     border-radius: 8px;
-    background: var(--nile-colors-neutral-100, #f2f4f7);
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
   }
 
   .ProseMirror div.nile-wysiwyg__embed iframe {
@@ -469,7 +486,7 @@ export const styles = css`
   }
 
   .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {
@@ -481,10 +498,13 @@ export const styles = css`
     pointer-events: none !important;
   }
 
-  /* --- Code highlighting (compact light theme for hljs tokens) --- */
+  /* --- Code highlighting (hljs tokens) ---
+     Each hue routes through an --ng-componentcolors-utility-* token, which the
+     token layer remaps to its lighter 400 step in the dark theme. Hardcoding the
+     one-light palette here left syntax unreadable on the dark code surface. --- */
   .ProseMirror .hljs-comment,
   .ProseMirror .hljs-quote {
-    color: #a0a1a7;
+    color: var(--ng-componentcolors-utility-gray-500);
     font-style: italic;
   }
 
@@ -492,7 +512,7 @@ export const styles = css`
   .ProseMirror .hljs-selector-tag,
   .ProseMirror .hljs-formula,
   .ProseMirror .hljs-doctag {
-    color: #a626a4;
+    color: var(--ng-componentcolors-utility-purple-600);
   }
 
   .ProseMirror .hljs-section,
@@ -502,13 +522,13 @@ export const styles = css`
   .ProseMirror .hljs-deletion,
   .ProseMirror .hljs-subst,
   .ProseMirror .hljs-tag {
-    color: #e45649;
+    color: var(--ng-componentcolors-utility-error-600);
   }
 
   .ProseMirror .hljs-literal,
   .ProseMirror .hljs-built_in,
   .ProseMirror .hljs-bullet {
-    color: #0184bb;
+    color: var(--ng-componentcolors-utility-blue-600);
   }
 
   .ProseMirror .hljs-string,
@@ -516,7 +536,7 @@ export const styles = css`
   .ProseMirror .hljs-addition,
   .ProseMirror .hljs-attribute,
   .ProseMirror .hljs-meta .hljs-string {
-    color: #50a14f;
+    color: var(--ng-componentcolors-utility-green-600);
   }
 
   .ProseMirror .hljs-attr,
@@ -526,7 +546,7 @@ export const styles = css`
   .ProseMirror .hljs-selector-attr,
   .ProseMirror .hljs-selector-pseudo,
   .ProseMirror .hljs-number {
-    color: #986801;
+    color: var(--ng-componentcolors-utility-orange-600);
   }
 
   .ProseMirror .hljs-symbol,
@@ -536,7 +556,7 @@ export const styles = css`
   .ProseMirror .hljs-title,
   .ProseMirror .hljs-title.class_,
   .ProseMirror .hljs-title.function_ {
-    color: #4078f2;
+    color: var(--ng-componentcolors-utility-indigo-600);
   }
 
   .ProseMirror .hljs-emphasis {
@@ -566,7 +586,10 @@ export const styles = css`
     height: 14px;
     flex: none;
     cursor: pointer;
-    accent-color: var(--nile-colors-primary-600, #2563eb);
+    accent-color: var(
+      --nile-colors-primary-600,
+      var(--ng-componentcolors-utility-blue-600)
+    );
   }
 
   .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {
@@ -589,7 +612,7 @@ export const styles = css`
   }
 
   .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {
-    color: var(--nile-colors-neutral-500, #98a2b3);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
     text-decoration: line-through;
   }
 
@@ -598,12 +621,12 @@ export const styles = css`
     padding: 4px 12px 6px;
     text-align: right;
     font-size: 12px;
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3));
-    border-top: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
   }
 
   .nile-wysiwyg__counter.over {
-    color: var(--nile-colors-error-600, #d92d20);
+    color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));
     font-weight: 600;
   }
 
@@ -627,7 +650,7 @@ export const styles = css`
     z-index: 12;
     background: var(
       --nile-wysiwyg-bg,
-      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
     );
   }
 
@@ -636,14 +659,14 @@ export const styles = css`
     display: inline-block;
     padding: 0 4px;
     border-radius: 4px;
-    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff)));
-    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8)));
+    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));
+    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));
     font-weight: 500;
     white-space: nowrap;
   }
 
   .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   /* --- Merge fields --- */
@@ -651,16 +674,22 @@ export const styles = css`
     display: inline-block;
     padding: 0 4px;
     border-radius: 4px;
-    background: var(--nile-wysiwyg-merge-bg, var(--nile-colors-neutral-100, #f2f4f7));
-    color: var(--nile-wysiwyg-merge-color, var(--nile-colors-neutral-700, #344054));
-    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);
+    background: var(
+      --nile-wysiwyg-merge-bg,
+      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))
+    );
+    color: var(
+      --nile-wysiwyg-merge-color,
+      var(--nile-colors-neutral-700, var(--ng-colors-text-primary-900))
+    );
+    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
     font-size: 0.9em;
     white-space: nowrap;
   }
 
   .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   /* --- Math --- */
@@ -677,7 +706,7 @@ export const styles = css`
   }
 
   .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
     border-radius: 3px;
   }
 
@@ -687,7 +716,7 @@ export const styles = css`
   }
 
   .ProseMirror .nile-wysiwyg__suggestion {
-    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
     border-radius: 3px;
   }
 
@@ -705,10 +734,10 @@ export const styles = css`
   .nile-wysiwyg__upload-placeholder {
     display: inline-block;
     padding: 6px 12px;
-    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);
+    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     border-radius: 6px;
-    background: var(--nile-colors-neutral-50, #f9fafb);
-    color: var(--nile-colors-neutral-600, #475467);
+    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
     font-size: 0.85em;
   }
 
@@ -748,7 +777,11 @@ export const styles = css`
   .nile-wysiwyg--show-blocks .ProseMirror ol,
   .nile-wysiwyg--show-blocks .ProseMirror li,
   .nile-wysiwyg--show-blocks .ProseMirror table {
-    outline: 1px dashed var(--nile-wysiwyg-block-outline, var(--nile-colors-neutral-400, #d0d5dd));
+    outline: 1px dashed
+      var(
+        --nile-wysiwyg-block-outline,
+        var(--nile-colors-neutral-400, var(--ng-colors-border-primary))
+      );
     outline-offset: -1px;
   }
 
@@ -783,8 +816,8 @@ export const styles = css`
     font-style: normal;
     line-height: 14px;
     letter-spacing: 0.5px;
-    color: var(--nile-colors-neutral-500, #667085);
-    background: var(--nile-colors-neutral-100, #f2f4f7);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
     border-radius: 0 0 4px 0;
     pointer-events: none;
   }

package/src/nile-wysiwyg-editor/nile-wysiwyg-editor.ts

@@ -164,7 +164,7 @@ const CHANGE_DEBOUNCE_MS = 250;
  * @csspart base - Outer container.
  * @csspart toolbar - The toolbar element.
  * @csspart surface - The scrollable editing surface.
- */
+  */
 @customElement('nile-wysiwyg-editor')
 export class NileWysiwygEditor extends NileElement {
   static formAssociated = true;
@@ -459,6 +459,18 @@ export class NileWysiwygEditor extends NileElement {
 
   /** Body overflow value before fullscreen locked it; null = not locked. */
   private previousBodyOverflow: string | null = null;
+  private readonly onAnyScroll = (): void => {
+    if (!this.bubbleMenuEl) return;
+    [
+      this.bubbleMenuEl,
+      this.tableMenuEl,
+      this.codeMenuEl,
+      this.imageMenuEl,
+      this.embedMenuEl,
+    ].forEach(menu => {
+      if (menu?.open) menu.open = false;
+    });
+  };
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -482,6 +494,11 @@ export class NileWysiwygEditor extends NileElement {
     // Format painter applies on pointer release so a drag-selection is painted
     // whole, not on the first mid-drag selection change.
     document.addEventListener('mouseup', this.onPainterPointerUp);
+    // Floating menus can't track their anchor through a scroll, so dismiss them.
+    document.addEventListener('scroll', this.onAnyScroll, {
+      capture: true,
+      passive: true,
+    });
 
     // Discover an author-supplied toolbar / bubble menu (light-DOM
     // <nile-wysiwyg-toolbar-item> / <nile-wysiwyg-bubble-item> children) and
@@ -506,6 +523,8 @@ export class NileWysiwygEditor extends NileElement {
     super.disconnectedCallback();
     document.removeEventListener('pointerdown', this.onOutsidePointerDown, true);
     document.removeEventListener('mouseup', this.onPainterPointerUp);
+    document.removeEventListener('scroll', this.onAnyScroll, { capture: true });
+    this.surfaceEl?.removeEventListener('scroll', this.onAnyScroll);
     this.toolbarObserver?.disconnect();
     if (this.changeTimer) clearTimeout(this.changeTimer);
     if (this.autosaveTimer) clearInterval(this.autosaveTimer);
@@ -751,6 +770,7 @@ export class NileWysiwygEditor extends NileElement {
     });
 
     this.view.dom.addEventListener('mousedown', this.onPainterPointerDown);
+    this.surfaceEl.addEventListener('scroll', this.onAnyScroll, { passive: true });
 
     this.toolbarState = this.snapshotToolbar(this.view.state);
     this.counter = countWords(this.view.state.doc);

package/src/nile-wysiwyg-editor/nile-wysiwyg-toolbar/nile-wysiwyg-toolbar.css.ts

@@ -22,8 +22,8 @@ export const styles = css`
     gap: 6px;
     padding: 8px;
     border-bottom: 1px solid
-      var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+      var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border-radius: 8px 8px 0 0;
     box-sizing: border-box;
   }
@@ -32,7 +32,7 @@ export const styles = css`
     width: 1px;
     height: 24px;
     margin: 0 4px;
-    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
   }
 
   button.toolbar__button {
@@ -47,18 +47,18 @@ export const styles = css`
     background: transparent;
     border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
     cursor: pointer;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     font-family: inherit;
     font-size: 14px;
     font-weight: 600;
   }
 
   button.toolbar__button:hover:not(:disabled) {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   button.toolbar__button[data-active] {
-    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
   }
 
   button.toolbar__button:disabled {
@@ -84,14 +84,14 @@ export const styles = css`
     background: transparent;
     border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
     cursor: pointer;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     font-family: inherit;
     font-size: 13px;
     white-space: nowrap;
   }
 
   button.toolbar__dd-trigger:hover:not(:disabled) {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   button.toolbar__dd-trigger:disabled {
@@ -108,9 +108,9 @@ export const styles = css`
     max-height: 260px;
     overflow-y: auto;
     padding: 4px;
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: 1px solid
-      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
     box-sizing: border-box;
@@ -123,20 +123,20 @@ export const styles = css`
     border-radius: 6px;
     cursor: pointer;
     font-size: 13px;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     white-space: nowrap;
   }
 
   .toolbar__dd-item:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary, #f2f4f7));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   .toolbar__dd-item[data-active] {
     background: var(
       --nile-colors-primary-50,
-      var(--ng-componentcolors-utility-blue-50, #eff4ff)
+      var(--ng-componentcolors-utility-blue-50)
     );
-    color: var(--nile-colors-primary-700, #1d4ed8);
+    color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
   }
 
   /* --- Color pickers, nile-rte-color style --- */
@@ -180,9 +180,9 @@ export const styles = css`
     top: calc(100% + 6px);
     left: 0;
     z-index: 30;
-    background: var(--nile-colors-white-base, #ffffff);
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: 1px solid
-      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
     box-sizing: border-box;
@@ -213,9 +213,9 @@ export const styles = css`
     align-items: center;
     gap: 6px;
     padding: 8px;
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border: 1px solid
-      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary, #e4e7ec));
+      var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
     box-sizing: border-box;
@@ -225,6 +225,6 @@ export const styles = css`
     width: 1px;
     height: 24px;
     margin: 0 4px;
-    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd));
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
   }
 `;

package/src/nile-wysiwyg-editor/ui/bookmark-panel.ts

@@ -37,8 +37,8 @@ export class NileWysiwygBookmarkPanel extends NileElement {
           gap: 8px;
           min-width: 280px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: var(--nile-wysiwyg-radius, 8px);
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
           font-size: 13px;
@@ -48,29 +48,29 @@ export class NileWysiwygBookmarkPanel extends NileElement {
           display: flex;
           flex-direction: column;
           gap: 4px;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         input {
           font: inherit;
           padding: 6px 8px;
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 6px;
           outline: none;
         }
 
         input:focus {
-          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
         }
 
         .hint {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
 
         .error {
           font-size: 12px;
-          color: var(--nile-colors-error-600, #d92d20);
+          color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));
         }
 
         .actions {
@@ -86,12 +86,12 @@ export class NileWysiwygBookmarkPanel extends NileElement {
           border: 1px solid transparent;
           cursor: pointer;
           background: transparent;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         button.primary {
-          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
-          color: #ffffff;
+          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
+          color: var(--ng-colors-text-white);
         }
       `,
     ];