@aquera/nile-elements 2.0.0 → 2.0.1

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);
         }
       `,
     ];

package/src/nile-wysiwyg-editor/ui/bubble-menu.ts

@@ -134,9 +134,9 @@ export class NileWysiwygBubbleMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
           border: 1px solid
-            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));
+            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, var(--ng-colors-border-primary)));
           border-radius: var(--nile-wysiwyg-radius, 8px);
           box-shadow: var(
             --nile-wysiwyg-popover-shadow,
@@ -156,23 +156,23 @@ export class NileWysiwygBubbleMenu extends NileElement {
           cursor: pointer;
           font-size: 13px;
           font-weight: 600;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         button:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
 
         button[data-active] {
-          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
-          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
+          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
+          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
         }
 
         .divider {
           align-self: stretch;
           width: 1px;
           margin: 3px 2px;
-          background: var(--nile-colors-neutral-300, #e4e7ec);
+          background: var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
         }
       `,
     ];

package/src/nile-wysiwyg-editor/ui/code-block-menu.ts

@@ -36,15 +36,15 @@ export class NileWysiwygCodeMenu extends NileElement {
           align-items: center;
           gap: 6px;
           padding: 4px 4px 4px 10px;
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
-          background: var(--nile-colors-white-base, #ffffff);
+          background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
           box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
         }
 
         .label {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           white-space: nowrap;
         }
 
@@ -56,13 +56,13 @@ export class NileWysiwygCodeMenu extends NileElement {
           border: none;
           border-radius: 5px;
           background: transparent;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
           cursor: pointer;
           outline: none;
         }
 
         select:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
       `,
     ];

package/src/nile-wysiwyg-editor/ui/embed-menu.ts

@@ -70,8 +70,8 @@ export class NileWysiwygEmbedMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          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: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
         }
@@ -89,16 +89,16 @@ export class NileWysiwygEmbedMenu extends NileElement {
           cursor: pointer;
           font-size: 12px;
           font-weight: 600;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         button:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
 
         button[data-active] {
-          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
-          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
+          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
+          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
         }
       `,
     ];

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

@@ -42,8 +42,8 @@ export class NileWysiwygEmbedPanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           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: 8px;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
           font-size: 13px;
@@ -55,12 +55,12 @@ export class NileWysiwygEmbedPanel extends NileElement {
 
         .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-danger-600, #d92d20);
+          color: var(--nile-colors-danger-600, var(--ng-componentcolors-utility-error-600));
         }
 
         .actions {

package/src/nile-wysiwyg-editor/ui/emoji-picker.ts

@@ -36,8 +36,8 @@ export class NileWysiwygEmojiPicker extends NileElement {
         .panel {
           width: 316px;
           padding: 8px;
-          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: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
         }
@@ -49,13 +49,13 @@ export class NileWysiwygEmojiPicker extends NileElement {
           box-sizing: border-box;
           margin-bottom: 6px;
           padding: 5px 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));
         }
 
         .grid {
@@ -80,13 +80,13 @@ export class NileWysiwygEmojiPicker extends NileElement {
         }
 
         .emoji:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
 
         .empty {
           padding: 12px 4px;
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           text-align: center;
         }
       `,

package/src/nile-wysiwyg-editor/ui/find-replace.ts

@@ -47,8 +47,8 @@ export class NileWysiwygFindBar extends NileElement {
           align-items: center;
           gap: 6px;
           padding: 8px;
-          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: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
           font-size: 13px;
@@ -59,19 +59,19 @@ export class NileWysiwygFindBar extends NileElement {
           font-size: 13px;
           width: 160px;
           padding: 4px 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));
         }
 
         .count {
           min-width: 42px;
           text-align: center;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           font-variant-numeric: tabular-nums;
         }
 
@@ -83,11 +83,11 @@ export class NileWysiwygFindBar extends NileElement {
           border-radius: 5px;
           background: transparent;
           cursor: pointer;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         button:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
       `,
     ];

package/src/nile-wysiwyg-editor/ui/image-menu.ts

@@ -77,8 +77,8 @@ export class NileWysiwygImageMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          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: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
         }
@@ -96,16 +96,16 @@ export class NileWysiwygImageMenu extends NileElement {
           cursor: pointer;
           font-size: 12px;
           font-weight: 600;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         button:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
 
         button[data-active] {
-          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
-          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
+          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
+          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
         }
       `,
     ];

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

@@ -64,8 +64,8 @@ export class NileWysiwygImagePanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           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: 8px;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
           font-size: 13px;
@@ -79,7 +79,7 @@ export class NileWysiwygImagePanel extends NileElement {
           display: flex;
           align-items: center;
           gap: 8px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           font-size: 12px;
         }
 
@@ -88,7 +88,7 @@ export class NileWysiwygImagePanel extends NileElement {
           content: '';
           flex: 1;
           height: 1px;
-          background: var(--nile-colors-neutral-300, #e4e7ec);
+          background: var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
         }
 
         .upload-row {
@@ -109,7 +109,7 @@ export class NileWysiwygImagePanel extends NileElement {
         }
 
         .upload-filename {
-          color: var(--nile-colors-neutral-600, #475467);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
           font-size: 12px;
           text-align: center;
           overflow: hidden;
@@ -122,7 +122,7 @@ export class NileWysiwygImagePanel extends NileElement {
         }
 
         .error {
-          color: var(--nile-colors-danger-600, #d92d20);
+          color: var(--nile-colors-danger-600, var(--ng-componentcolors-utility-error-600));
           font-size: 12px;
         }
 

package/src/nile-wysiwyg-editor/ui/insert-menu.ts

@@ -45,8 +45,8 @@ export class NileWysiwygInsertMenu extends NileElement {
           overflow-y: auto;
           overscroll-behavior: contain;
           padding: 6px;
-          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: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
         }
@@ -56,7 +56,7 @@ export class NileWysiwygInsertMenu extends NileElement {
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.04em;
-          color: var(--nile-colors-neutral-600, #667085);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
           padding: 4px 8px;
         }
 
@@ -70,11 +70,11 @@ export class NileWysiwygInsertMenu extends NileElement {
           border-radius: 6px;
           background: transparent;
           cursor: pointer;
-          color: var(--nile-colors-dark-900, #101828);
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
         }
 
         .item:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
 
         .item .label {
@@ -83,13 +83,13 @@ export class NileWysiwygInsertMenu extends NileElement {
 
         .item .desc {
           font-size: 11px;
-          color: var(--nile-colors-neutral-600, #667085);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
           margin-top: 1px;
         }
 
         .empty {
           font-size: 12px;
-          color: var(--nile-colors-neutral-600, #667085);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
           padding: 8px;
         }
       `,

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

@@ -48,9 +48,9 @@ export class NileWysiwygLinkEditor extends NileElement {
           gap: 8px;
           min-width: 280px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
           border: 1px solid
-            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));
+            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, var(--ng-colors-border-primary)));
           border-radius: var(--nile-wysiwyg-radius, 8px);
           box-shadow: var(
             --nile-wysiwyg-popover-shadow,
@@ -63,19 +63,19 @@ export class NileWysiwygLinkEditor 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));
         }
 
         .link-editor__actions {
@@ -91,16 +91,16 @@ export class NileWysiwygLinkEditor 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);
         }
 
         button.danger {
-          color: var(--nile-colors-error-600, #d92d20);
+          color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));
         }
       `,
     ];

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

@@ -39,8 +39,8 @@ export class NileWysiwygMarkdownPanel extends NileElement {
           width: 460px;
           max-width: 90vw;
           padding: 14px;
-          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: 8px;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
           font-size: 13px;
@@ -48,12 +48,12 @@ export class NileWysiwygMarkdownPanel extends NileElement {
 
         .heading {
           font-weight: 600;
-          color: var(--nile-colors-neutral-800, #1d2939);
+          color: var(--nile-colors-neutral-800, var(--ng-colors-text-primary-900));
         }
 
         .hint {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
 
         textarea {
@@ -63,15 +63,15 @@ export class NileWysiwygMarkdownPanel extends NileElement {
           min-height: 180px;
           resize: vertical;
           padding: 10px;
-          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;
-          color: var(--nile-colors-dark-900, #101828);
-          background: var(--nile-colors-neutral-50, #f9fafb);
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+          background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
         }
 
         textarea: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));
         }
 
         .actions {

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

@@ -43,8 +43,8 @@ export class NileWysiwygMathPanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           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: 8px;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
           font-size: 13px;
@@ -66,12 +66,12 @@ export class NileWysiwygMathPanel extends NileElement {
         }
 
         .display-label {
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         .hint {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
 
         .actions {

package/src/nile-wysiwyg-editor/ui/shortcut-help.ts

@@ -135,15 +135,15 @@ export class NileWysiwygShortcutHelp extends NileElement {
           overflow-y: auto;
           overscroll-behavior: contain;
           outline: none;
-          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: 10px;
           box-shadow: var(
             --nile-wysiwyg-popover-shadow,
             0 8px 24px rgba(16, 24, 40, 0.18)
           );
           font-size: 13px;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         .help__header {
@@ -156,7 +156,7 @@ export class NileWysiwygShortcutHelp extends NileElement {
         .help__title {
           font-size: 14px;
           font-weight: 600;
-          color: var(--nile-colors-dark-900, #101828);
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
         }
 
         .help__close {
@@ -166,11 +166,11 @@ export class NileWysiwygShortcutHelp extends NileElement {
           border-radius: 5px;
           padding: 4px 8px;
           cursor: pointer;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
 
         .help__close:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
 
         .help__columns {
@@ -185,7 +185,7 @@ export class NileWysiwygShortcutHelp extends NileElement {
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.04em;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
 
         .help__row {
@@ -206,8 +206,8 @@ export class NileWysiwygShortcutHelp extends NileElement {
           font-family: inherit;
           font-size: 12px;
           line-height: 1.5;
-          background: var(--nile-colors-neutral-100, #f2f4f7);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-bottom-width: 2px;
           border-radius: 5px;
         }