@aquera/nile-elements 2.0.0 → 2.0.1

package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.css.esm.js

@@ -17,7 +17,7 @@ import{css as r}from"lit";const e=r`
     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,
@@ -25,7 +25,7 @@ import{css as r}from"lit";const e=r`
     );
     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;
   }
@@ -37,7 +37,7 @@ import{css as r}from"lit";const e=r`
     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))
     );
   }
 
@@ -52,18 +52,18 @@ import{css as r}from"lit";const e=r`
   }
 
   :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 {
@@ -91,7 +91,7 @@ import{css as r}from"lit";const e=r`
     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))
@@ -116,7 +116,7 @@ import{css as r}from"lit";const e=r`
 
   .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) */
@@ -156,7 +156,7 @@ import{css as r}from"lit";const e=r`
     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))
     );
   }
 
@@ -214,9 +214,12 @@ import{css as r}from"lit";const e=r`
     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,
@@ -227,7 +230,8 @@ import{css as r}from"lit";const e=r`
 
   .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;
   }
 
@@ -235,7 +239,7 @@ import{css as r}from"lit";const e=r`
   .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;
@@ -244,7 +248,10 @@ import{css as r}from"lit";const e=r`
   .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;
   }
@@ -253,8 +260,11 @@ import{css as r}from"lit";const e=r`
   .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;
@@ -279,13 +289,20 @@ import{css as r}from"lit";const e=r`
     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;
   }
@@ -304,7 +321,7 @@ import{css as r}from"lit";const e=r`
     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;
   }
 
@@ -317,7 +334,7 @@ import{css as r}from"lit";const e=r`
      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;
@@ -336,7 +353,7 @@ import{css as r}from"lit";const e=r`
     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 {
@@ -371,8 +388,8 @@ import{css as r}from"lit";const e=r`
     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;
   }
@@ -382,7 +399,7 @@ import{css as r}from"lit";const e=r`
   }
 
   .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; }
@@ -417,7 +434,7 @@ import{css as r}from"lit";const e=r`
 
   .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;
@@ -428,7 +445,7 @@ import{css as r}from"lit";const e=r`
     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;
   }
 
@@ -447,7 +464,7 @@ import{css as r}from"lit";const e=r`
     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 {
@@ -467,7 +484,7 @@ import{css as r}from"lit";const e=r`
   }
 
   .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 {
@@ -479,10 +496,13 @@ import{css as r}from"lit";const e=r`
     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;
   }
 
@@ -490,7 +510,7 @@ import{css as r}from"lit";const e=r`
   .ProseMirror .hljs-selector-tag,
   .ProseMirror .hljs-formula,
   .ProseMirror .hljs-doctag {
-    color: #a626a4;
+    color: var(--ng-componentcolors-utility-purple-600);
   }
 
   .ProseMirror .hljs-section,
@@ -500,13 +520,13 @@ import{css as r}from"lit";const e=r`
   .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,
@@ -514,7 +534,7 @@ import{css as r}from"lit";const e=r`
   .ProseMirror .hljs-addition,
   .ProseMirror .hljs-attribute,
   .ProseMirror .hljs-meta .hljs-string {
-    color: #50a14f;
+    color: var(--ng-componentcolors-utility-green-600);
   }
 
   .ProseMirror .hljs-attr,
@@ -524,7 +544,7 @@ import{css as r}from"lit";const e=r`
   .ProseMirror .hljs-selector-attr,
   .ProseMirror .hljs-selector-pseudo,
   .ProseMirror .hljs-number {
-    color: #986801;
+    color: var(--ng-componentcolors-utility-orange-600);
   }
 
   .ProseMirror .hljs-symbol,
@@ -534,7 +554,7 @@ import{css as r}from"lit";const e=r`
   .ProseMirror .hljs-title,
   .ProseMirror .hljs-title.class_,
   .ProseMirror .hljs-title.function_ {
-    color: #4078f2;
+    color: var(--ng-componentcolors-utility-indigo-600);
   }
 
   .ProseMirror .hljs-emphasis {
@@ -564,7 +584,10 @@ import{css as r}from"lit";const e=r`
     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 {
@@ -587,7 +610,7 @@ import{css as r}from"lit";const e=r`
   }
 
   .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;
   }
 
@@ -596,12 +619,12 @@ import{css as r}from"lit";const e=r`
     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;
   }
 
@@ -625,7 +648,7 @@ import{css as r}from"lit";const e=r`
     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))
     );
   }
 
@@ -634,14 +657,14 @@ import{css as r}from"lit";const e=r`
     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 --- */
@@ -649,16 +672,22 @@ import{css as r}from"lit";const e=r`
     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 --- */
@@ -675,7 +704,7 @@ import{css as r}from"lit";const e=r`
   }
 
   .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;
   }
 
@@ -685,7 +714,7 @@ import{css as r}from"lit";const e=r`
   }
 
   .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;
   }
 
@@ -703,10 +732,10 @@ import{css as r}from"lit";const e=r`
   .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;
   }
 
@@ -746,7 +775,11 @@ import{css as r}from"lit";const e=r`
   .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;
   }
 
@@ -781,8 +814,8 @@ import{css as r}from"lit";const e=r`
     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;
   }