@aquera/nile-elements 1.6.5 → 1.6.7

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -3,7 +3,10 @@ import { css } from 'lit';
 
 export const styles = css`
   .editor { all: revert;
-  -webkit-user-modify: read-write; }
+  }
+  .rte-container .editor.safari {
+    -webkit-user-modify: read-write;
+  }
 
   nile-rich-text-editor {
     position: relative;
@@ -202,7 +205,7 @@ nile-rich-text-editor[disabled] .editor a {
   content: attr(data-placeholder);
   color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
   position: absolute;
-  font-family: var(var(--nile-font-family-sans-serif), var(--ng-font-family-body));
+  font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   pointer-events: none;
   user-select: none;
   padding-top: 16px;

package/src/nile-rich-text-editor/nile-rich-text-editor.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import './nile-rte-toolbar';
@@ -209,6 +209,17 @@ export class NileRichTextEditor extends LitElement {
     }
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+
+    if (this.editorEl) {
+      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+      if (isSafari) {
+        this.editorEl.classList.add('safari');
+      }
+    }
+}
+
   private updateContentWithMention(mentionDetail: any) {
     this.updateContent();
     this.dispatchEvent(

package/src/nile-tag/nile-tag.css.ts

@@ -61,13 +61,13 @@ export const styles = css`
   }
 
   .tag--success {
-    background: var(--nile-colors-green-400);
-    border: 2px solid var(--nile-colors-green-400, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-green-400,var(--ng-componentcolors-utility-success-50));
+    border: 2px solid var(--nile-colors-green-400, var(--ng-componentcolors-utility-success-200));
+    color: var(--nile-colors-dark-900,var(--ng--componentcolors-utility-success-700));
   }
 
   .tag--success:hover {
-    border: 2px solid var(--nile-colors-green-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-300));
   }
 
   .tag--success:active > nile-icon-button {
@@ -79,7 +79,7 @@ export const styles = css`
     border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
     color: var(--nile-colors-dark-900 , var(--ng-colors-text-secondary-700));
   }
-  
+
   .tag--normal:hover {
     border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));
   }
@@ -89,13 +89,13 @@ export const styles = css`
   }
 
   .tag--warning {
-    background: var(--nile-colors-yellow-400);
-    border: 2px solid var(--nile-colors-yellow-400, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-yellow-400, var(--ng-componentcolors-utility-warning-50));
+    border: 2px solid var(--nile-colors-yellow-400, var(--ng-componentcolors-utility-warning-200));
+    color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-warning-700));
   }
 
   .tag--warning:hover {
-    border: 2px solid var(--nile-colors-yellow-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-yellow-500, var(--ng-componentcolors-utility-warning-300));
   }
 
   .tag--warning:active > nile-icon-button {
@@ -104,13 +104,13 @@ export const styles = css`
 
 
   .tag--error {
-    background: var(--nile-colors-red-400);
-    border: 2px solid var(--nile-colors-red-400, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900);
+    background: var(--nile-colors-red-400, var(--ng-componentcolors-utility-error-50));
+    border: 2px solid var(--nile-colors-red-400, var(--ng-componentcolors-utility-error-200));
+    color: var(--nile-colors-dark-900, var(--ng-componentcolors-utility-error-700));
   }
 
   .tag--error:hover {
-    border: 2px solid var(--nile-colors-red-500, var(--ng-colors-border-primary));
+    border: 2px solid var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-300));
   }
 
   .tag--error:active > nile-icon-button {