@aquera/nile-elements 0.1.57-beta-1.2 → 0.1.57-beta-1.3

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

@@ -39,7 +39,9 @@ import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/a
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme } from './theme';
+import { Theme as DefaultTheme, customisedThemeCss } from './theme';
+import { keymap } from '@codemirror/view';
+import { acceptCompletion } from '@codemirror/autocomplete';
 
 // Choose the appropriate mode for your use case
 
@@ -84,7 +86,7 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: false }) disableSyntaxHighlighting: boolean = false;
 
-  @property({ type: Object,  attribute: false }) customThemeCSS: object | null = null;
+  @property({ type: Object,  attribute: false }) customThemeCSS: object | null = customisedThemeCss;
 
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbersMultiline: boolean = true;
 
@@ -100,6 +102,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true}) aboveCursor: boolean = false;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = false;
+
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -141,6 +145,17 @@ export class NileCodeEditor extends NileElement {
     }, false )
   }
 
+  getTabCompletionKeymap() {
+    return this.tabCompletion
+      ? keymap.of([
+          {
+            key: 'Tab',
+            run: acceptCompletion,
+          }
+        ])
+      : [];
+  }
+
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
     super.updated(changedProperties);
     if (changedProperties.has('value') && this.view.state.doc.toString()!=this.value) {
@@ -277,6 +292,7 @@ export class NileCodeEditor extends NileElement {
         autocompletion({aboveCursor: this.aboveCursor}),
         language,
         customThemeExtension,
+        this.getTabCompletionKeymap(),
         EditorView.updateListener.of((v: ViewUpdate) => {
           if (v.docChanged) {
             this.debounce ? this.emitAfterTimeout({ value: this.view.state.doc.toString() }) : this.emit('nile-change', { value: this.view.state.doc.toString() })
@@ -362,7 +378,39 @@ export class NileCodeEditor extends NileElement {
    */
   getTopLevelSuggestions(context: CompletionContext,textBeforeCursor:string){
     const baseMatch: any = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
-    if (!baseMatch) return null;
+    
+    if (!baseMatch) {
+      const trimmedText = textBeforeCursor.trim();
+      if (trimmedText === '') {
+        const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
+          Object.keys(this.customAutoCompletions[key]).length
+        );
+        
+        const options = optionsList.map((key) => ({
+          label: key,
+          type: 'property',
+          apply: key,
+          boost: 999
+        }));
+        
+        if(this.customCompletionsPaths.length){
+          this.customCompletionsPaths.forEach(path => {
+            options.push({
+              label: ''+path,
+              type: 'property',
+              apply: ''+path,
+              boost: 998
+            });
+          });
+        }
+        
+        return {
+          from: context.pos,
+          options: options
+        };
+      }
+      return null;
+    }
   
     const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
       Object.keys(this.customAutoCompletions[key]).length && 
@@ -378,7 +426,7 @@ export class NileCodeEditor extends NileElement {
     if(this.customCompletionsPaths.length){
       this.customCompletionsPaths
       .filter(path=>path.toLocaleLowerCase().includes(textBeforeCursor.toLocaleLowerCase()))
-      .map(path=>{
+      .forEach(path=>{
         options.push({
           label: ''+path,
           type: 'property',
@@ -465,9 +513,9 @@ export class NileCodeEditor extends NileElement {
 
   getCustomThemeExtension(): Extension {
     if (this.customThemeCSS) {
-      return EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec });
+      return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss)];
     }
-    return EditorView.theme(DefaultTheme);
+    return [EditorView.theme(customisedThemeCss), EditorView.theme(DefaultTheme)];
   }
 
   restrictSingleLine() {
@@ -571,3 +619,4 @@ function convertToSingleLine(code: string) {
   // Remove line breaks and unnecessary whitespace
   return code.replace(/\s+/g, ' ').trim();
 }
+

package/src/nile-code-editor/theme.ts

@@ -36,4 +36,115 @@ export const CustomTheme = {
   ".cm-gutters": {
     fontFamily: 'inherit', // Ensure the gutter font matches
   },
+};
+
+export const customisedThemeCss = {
+  '.cm-tooltip-autocomplete': {
+    padding: '9px 12px',
+    backgroundColor: '#FFFFFF',
+    display: 'block',
+    fontSize: '14px',
+    background: 'white',
+    border: 'solid 1px #C7CED4',
+    borderRadius: '0.25rem',
+    paddingBlock: '0',
+    paddingInline: '0',
+    overscrollBehavior: 'none',
+    color: 'hsl(240 5.3% 26.1%)',
+  },
+  '.cm-tooltip.cm-completionInfo.cm-completionInfo-right': {
+    fontFamily: 'colfax-regular',
+    backgroundColor: '#FFFFFF',
+    color: 'hsl(240 5.3% 26.1%)',
+    padding: "6px 12px",
+    borderTopRightRadius: "0.25rem",
+    borderBottomRightRadius: "0.25rem",
+    border: 'solid 1px #C7CED4',
+    fontSize: '14px',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+    fontFamily: 'colfax-regular',
+    fontWeight: '400',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
+    padding: '9px 12px'
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover': {
+    backgroundColor: '#005ea61a',
+    color: 'rgb(0, 0, 0)',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]': {
+    backgroundColor: '#005ea61a',
+    color: '#005EA6',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]:hover': {
+    color: '#005EA6',
+  },
+  '.cm-completionIcon': {
+    display: 'block',
+    position: 'relative'
+  },
+  '.cm-completionIcon::after': {
+    display: 'block',
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjM2MDExIDYuMjVMNi45ODUxMSAxLjc1TDkuNjEwMTEgNi4yNUg0LjM2MDExWk01LjY5NTExIDUuNUg4LjMxMjYxTDcuMDAwMTEgMy4yNUw1LjY5NTExIDUuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi4yNSAxMi4yNUgxLjc1VjcuNzVINi4yNVYxMi4yNVpNMi41IDExLjVINS41VjguNUgyLjVWMTEuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC43NDk5NyAxMS44NzA4QzkuMTE5OTggMTIuMTE4IDkuNTU0OTkgMTIuMjUgMTAgMTIuMjVDMTAuNTk2NyAxMi4yNSAxMS4xNjkgMTIuMDEyOSAxMS41OTEgMTEuNTkxQzEyLjAxMjkgMTEuMTY5IDEyLjI1IDEwLjU5NjcgMTIuMjUgMTBDMTIuMjUgOS41NTQ5OSAxMi4xMTggOS4xMTk5OCAxMS44NzA4IDguNzQ5OTdDMTEuNjIzNiA4LjM3OTk2IDExLjI3MjIgOC4wOTE1NyAxMC44NjEgNy45MjEyN0MxMC40NDk5IDcuNzUwOTcgOS45OTc1MSA3LjcwNjQyIDkuNTYxMDUgNy43OTMyM0M5LjEyNDU5IDcuODgwMDUgOC43MjM2OCA4LjA5NDM0IDguNDA5MDEgOC40MDkwMUM4LjA5NDM0IDguNzIzNjggNy44ODAwNSA5LjEyNDU5IDcuNzkzMjMgOS41NjEwNUM3LjcwNjQyIDkuOTk3NTEgNy43NTA5NyAxMC40NDk5IDcuOTIxMjcgMTAuODYxQzguMDkxNTcgMTEuMjcyMiA4LjM3OTk2IDExLjYyMzYgOC43NDk5NyAxMS44NzA4Wk05LjE2NjY1IDguNzUyOEM5LjQxMzMyIDguNTg3OTggOS43MDMzMyA4LjUgMTAgOC41QzEwLjM5NzggOC41IDEwLjc3OTQgOC42NTgwNCAxMS4wNjA3IDguOTM5MzRDMTEuMzQyIDkuMjIwNjUgMTEuNSA5LjYwMjE4IDExLjUgMTBDMTEuNSAxMC4yOTY3IDExLjQxMiAxMC41ODY3IDExLjI0NzIgMTAuODMzNEMxMS4wODI0IDExLjA4IDEwLjg0ODEgMTEuMjcyMyAxMC41NzQgMTEuMzg1OEMxMC4yOTk5IDExLjQ5OTQgOS45OTgzNCAxMS41MjkxIDkuNzA3MzcgMTEuNDcxMkM5LjQxNjM5IDExLjQxMzMgOS4xNDkxMiAxMS4yNzA0IDguOTM5MzQgMTEuMDYwN0M4LjcyOTU2IDEwLjg1MDkgOC41ODY3IDEwLjU4MzYgOC41Mjg4MiAxMC4yOTI2QzguNDcwOTUgMTAuMDAxNyA4LjUwMDY1IDkuNzAwMDcgOC42MTQxOCA5LjQyNTk4QzguNzI3NzEgOS4xNTE4OSA4LjkxOTk3IDguOTE3NjIgOS4xNjY2NSA4Ljc1MjhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionMatchedText' : {
+    textDecoration: 'none',
+  },
+  '.cm-completionIcon.cm-completionIcon-property::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-keyword::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-variable::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-text::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-function::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzE5ODMgNC4zNTY0NUwzLjMxODk0IDQuODA1NjZMMy4zNTgzNCA0Ljk3NTU5SDQuMzkwNjJDNC4xNzk4MyA2LjE4NDU3IDQuMDIyMjMgNy4yNzQ0MSAzLjcxOTgzIDguOTU0MUMzLjM1ODM0IDExLjA5NjcgMy4xNTA1IDExLjYyMyAzLjAyNzM4IDExLjgxNTRDMi45MTkwMyAxMi4wMDU5IDIuNzYzNCAxMi4xMDQ1IDIuNTUyNjEgMTIuMTA0NUMyLjMyMTEzIDEyLjEwNDUgMS45MDI1IDExLjkyMjkgMS42Nzc5MiAxMS43MTY4QzEuNTk3MTUgMTEuNjYyMSAxLjUwMTYxIDExLjY3NTggMS40MDAxNSAxMS43NDIyQzEuMTk3MjQgMTEuOTEyMSAxLjAwMDI0IDEyLjE3MzggMS4wMDAyNCAxMi40MDgyQzAuOTg4NDIgMTIuNzI0NiAxLjQxNDkzIDEzIDEuODIxNzMgMTNDMi4xODAyNyAxMyAyLjcwODI0IDEyLjc3NzMgMy4yNjM3OCAxMi4yNTM5QzQuMDIzMjIgMTEuNTQgNC41OTE1NiAxMC41NjA1IDUuMDY2MzMgOC40NDMzNkM1LjM3MTY5IDcuMDkxOCA1LjUxNTUgNi4yMTI4OSA1LjczMDIzIDQuOTc2NTZMNy4wMTI3IDQuODYxMzNMNy4yOTA0NyA0LjM1NjQ1SDUuODQ2NDZDNi4yMTk3NyAyLjAyODMyIDYuNTExMzMgMS42ODM1OSA2Ljg2OTg4IDEuNjgzNTlDNy4xMDgyNSAxLjY4MzU5IDcuMzg2MDIgMS44NjUyMyA3LjcwNTE2IDIuMjIyNjZDNy43OTk3MiAyLjM1MTU2IDcuOTQxNTYgMi4zMzc4OSA4LjA0OTkxIDIuMjVDOC4yMzIxNCAyLjE0MjU4IDguNDU2NzIgMS44NjcxOSA4LjQ3MTQ5IDEuNjE3MTlDOC40ODIzMyAxLjM0MTggOC4xNTEzNyAxIDcuNTgyMDMgMUM3LjA2NTg5IDEgNi4yNzQ5MyAxLjM0MTggNS42MTAwNiAyLjAxMzY3QzUuMDI2OTMgMi42MjU5OCA0LjcyMTU4IDMuMzkwNjIgNC41MTA3OSA0LjM1NjQ1SDMuNzE5ODNaTTcuODIzMzYgNS45MTUwNEM4LjIyMTMgNS4zODk2NSA4LjQ1OTY3IDUuMjE0ODQgOC41ODI4IDUuMjE0ODRDOC43MDk4NiA1LjIxNDg0IDguODExMzIgNS4zMzg4NyA5LjAyOSA2LjAzNjEzTDkuNDAxMzMgNy4yMjY1NkM4LjY4MTMgOC4zMTgzNiA4LjE1NDMyIDguOTI2NzYgNy44MzQxOSA4LjkyNjc2QzcuNzI3ODEgOC45MjY3NiA3LjYyMDQ1IDguODkzNTUgNy41NDQ2IDguODE5MzRDNy40Njk3NCA4Ljc0NTEyIDcuMzg3IDguNjgzNTkgNy4zMDYyMyA4LjY4MzU5QzcuMDQyMjUgOC42ODM1OSA2LjcxNTIzIDkuMDAwOTggNi43MDkzMiA5LjM5NDUzQzYuNzAzNDEgOS43OTU5IDYuOTg3MDkgMTAuMDgzIDcuMzU5NDIgMTAuMDgzQzcuOTk4NjkgMTAuMDgzIDguNTM5NDYgOS40NjA5NCA5LjU4MzU2IDcuODExNTJMOS44ODg5MSA4LjgzMjAzQzEwLjE1MDkgOS43MDg5OCAxMC40NTgyIDEwLjA4MyAxMC44NDI0IDEwLjA4M0MxMS4zMTcyIDEwLjA4MyAxMS45NTU0IDkuNjgxNjQgMTIuNjUxOCA4LjU5NjY4TDEyLjM2MDMgOC4yNjY2QzExLjk0MTcgOC43NjY2IDExLjY2MzkgOS4wMDA5OCAxMS40OTk0IDkuMDAwOThDMTEuMzE2MiA5LjAwMDk4IDExLjE1NTYgOC43MjM2MyAxMC45NDM4IDguMDQxOTlMMTAuNDk3NiA2LjYwMzUyQzEwLjc2MTYgNi4yMTc3NyAxMS4wMjE3IDUuODkzNTUgMTEuMjUwMiA1LjYzNDc3QzExLjUyMiA1LjMyNzE1IDExLjczMTkgNS4xOTYyOSAxMS44NzQ3IDUuMTk2MjlDMTEuOTk0OCA1LjE5NjI5IDEyLjA5OTMgNS4yNDcwNyAxMi4xNjQzIDUuMzE4MzZDMTIuMjUgNS40MTIxMSAxMi4zMDEyIDUuNDU2MDUgMTIuNDAyNiA1LjQ1NjA1QzEyLjYzMjEgNS40NTYwNSAxMi45ODY3IDUuMTY2OTkgMTIuOTk5NiA0Ljc4NDE4QzEzLjAxMTQgNC40Mjg3MSAxMi43ODg4IDQuMTI1OTggMTIuNDAyNiA0LjEyNTk4QzExLjgxOTUgNC4xMjU5OCAxMS4zMDUzIDQuNjI0MDIgMTAuMzE1NCA2LjA4MzAxTDEwLjExMTUgNS40NTcwM0M5LjgyNTg3IDQuNTc4MTIgOS42MzY3NSA0LjEyNTk4IDkuMjM4ODEgNC4xMjU5OEM4Ljc3NTg2IDQuMTI1OTggOC4xMzk1NSA0LjY5MDQzIDcuNTE3MDIgNS41ODQ5Nkw3LjgyMzM2IDUuOTE1MDRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-class::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTA2NjUgMTNMMS41IDEwVjRMNi45MDY2NSAxTDEyLjMxMzMgNFYxMEw2LjkwNjY1IDEzWk01LjE0ODk3IDUuNTA3MzJDNS4zNjUzNSA1LjI1NzQyIDUuNjI5MTQgNS4wNTkxOCA1Ljk0MDM0IDQuOTEyNTlDNi4yNTE2NSA0Ljc2NiA2LjU3Mzc1IDQuNjkyNzEgNi45MDY2NSA0LjY5MjcxQzcuMjM5NTQgNC42OTI3MSA3LjU2MTY0IDQuNzY2IDcuODcyOTYgNC45MTI1OUM4LjE4NDE1IDUuMDU5MTggOC40NDc5NCA1LjI1NzQyIDguNjY0MzIgNS41MDczMkwxMC45MjUzIDQuMjYyMjRMNi45MDY2NSAyLjAzMTc0TDIuODg3OTkgNC4yNjIyNEw1LjE0ODk3IDUuNTA3MzJaTTYuNDU4OTYgMTEuNzMzN1Y5LjI3ODJDNS45MjExNyA5LjE2Njg1IDUuNDc2ODEgOC44OTg0MSA1LjEyNTkgOC40NzI4OEM0Ljc3NDg3IDguMDQ3MjQgNC41OTkzNSA3LjU1NjI4IDQuNTk5MzUgN0M0LjU5OTM1IDYuODgzNDkgNC42MDU1NSA2Ljc2NDA1IDQuNjE3OTUgNi42NDE2OEM0LjYzMDIzIDYuNTE5NDMgNC42NjM3NSA2LjQwNTczIDQuNzE4NSA2LjMwMDU4TDIuMzk1MzcgNS4wMDQwMlY5LjQ3NTUyTDYuNDU4OTYgMTEuNzMzN1pNNi45MDY2NSA4LjQxMTkzQzcuMzA0MDUgOC40MTE5MyA3LjYzODcyIDguMjc1OTYgNy45MTA2NiA4LjAwNDAyQzguMTgyNiA3LjczMjA4IDguMzE4NTcgNy4zOTc0MSA4LjMxODU3IDdDOC4zMTg1NyA2LjYwMjU5IDguMTgyNiA2LjI2NzkyIDcuOTEwNjYgNS45OTU5OEM3LjYzODcyIDUuNzI0MDQgNy4zMDQwNSA1LjU4ODA3IDYuOTA2NjUgNS41ODgwN0M2LjUwOTI0IDUuNTg4MDcgNi4xNzQ1NyA1LjcyNDA0IDUuOTAyNjMgNS45OTU5OEM1LjYzMDY5IDYuMjY3OTIgNS40OTQ3MiA2LjYwMjU5IDUuNDk0NzIgN0M1LjQ5NDcyIDcuMzk3NDEgNS42MzA2OSA3LjczMjA4IDUuOTAyNjMgOC4wMDQwMkM2LjE3NDU3IDguMjc1OTYgNi41MDkyNCA4LjQxMTkzIDYuOTA2NjUgOC40MTE5M1pNNy4zNTQzMyAxMS43MzM3TDExLjQxNzkgOS40NzU1MlY1LjAwNDAyTDkuMDk0NzkgNi4zMDA1OEM5LjEzODA3IDYuNDA1NzMgOS4xNjg3MSA2LjUxOTQzIDkuMTg2NzQgNi42NDE2OEM5LjIwNDg3IDYuNzY0MDUgOS4yMTM5NCA2Ljg4MzQ5IDkuMjEzOTQgN0M5LjIxMzk0IDcuNTU2MjggOS4wMzg0MyA4LjA0NzI0IDguNjg3NCA4LjQ3Mjg4QzguMzM2NDggOC44OTg0MSA3Ljg5MjEzIDkuMTY2ODUgNy4zNTQzMyA5LjI3ODJWMTEuNzMzN1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo= ")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionLabel': {
+    marginLeft: '18px',
+  }
 };

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

@@ -13,8 +13,11 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    font-size: 14px;
+    font-size: var(--nile-type-scale-3);
     overflow: hidden;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .content-editable-wrapper {
@@ -30,9 +33,9 @@ export const styles = css`
   .content-editable-input {
     box-sizing: border-box;
     width: 100%;
-    padding: 9px;
+    padding: var(--nile-spacing-9px);
     border: 1px solid var(--nile-colors-neutral-500);
-    border-radius: 4px;
+    border-radius: var(--nile-radius-radius-xs);
     overflow: auto;
     overflow-x: auto;
     overflow-anchor: none;
@@ -52,7 +55,7 @@ export const styles = css`
   }
 
   .read-only {
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: var(--nile-colors-dark-200);
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -61,22 +64,22 @@ export const styles = css`
     display: inline;
     background: var(--nile-colors-neutral-400);
     color: var(--nile-colors-dark-900);
-    border-radius: 4px;
-    padding: 6px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: var(--nile-spacing-sm);
     height: 24px;
     line-height: 10px;
-    margin-left: 3px;
+    margin-left: var(--nile-height-26px);
     letter-spacing: 0.2px;
   }
 
   .text-area {
     height: 120px;
     overflow: scroll;
-    line-height: 26px;
+    line-height: var(--nile-line-height-medium);
   }
 
   .text-area .chips {
-    padding: 4px 8px;
+    padding: var(--nile-spacing-xs) var(--nile-spacing-md);
   }
 
   .chip-error {
@@ -92,8 +95,8 @@ export const styles = css`
 
   label {
     display: inline-block;
-    margin-bottom: 6px;
-    font-family: 'colfax-medium';
+    margin-bottom: var(--nile-spacing-sm);
+    font-family: var(--nile-font-family-serif-colfax-medium);
   }
 
   .asterik {

package/src/nile-date-picker/nile-date-picker.css.ts

@@ -12,6 +12,9 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
   nile-dropdown{
     display:block;

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

@@ -13,11 +13,15 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --width: 31rem;
-    --header-spacing: 1.25rem;
-    --body-spacing: 1.25rem;
-    --footer-spacing: 1.25rem;
+    --header-spacing: var(--nile-spacing-small, var(--ng-spacing-3xl));
+    --body-spacing: var(--nile-spacing-small, var(--ng-spacing-3xl));
+    --footer-spacing: var(--nile-spacing-small, var(--ng-spacing-3xl));
     --nile-dialog-remove-icon-color: var(--nile-colors-dark-900);
+    --nile-border: 1px solid var(--nile-colors-neutral-400);
     display: contents;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -49,9 +53,9 @@ export const styles = css`
     width: var(--width);
     max-width: calc(100% - 2.25rem);
     max-height: calc(100% - 2.25rem);
-    background-color: hsl(0, 0%, 100%);
-    border-radius: 4px;
-    box-shadow: 0 4px 16px rgb(0 0 0 / 24%);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-2xl));
+    box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-xl));
   }
 
   .dialog__panel:focus {
@@ -72,39 +76,39 @@ export const styles = css`
   .dialog__header {
     flex: 0 0 auto;
     display: flex;
-    padding: 12px 20px;
-    background-color: var(--nile-colors-neutral-100);
-    border-radius: 4px 4px 0 0;
-    border: 1px solid var(--nile-colors-neutral-400);
+    padding: var(--nile-spacing-lg, var(--ng-spacing-3xl)) var(--nile-spacing-2xl, var(--ng-spacing-3xl)) var(--nile-spacing-lg, var(--ng-spacing-none)) var(--nile-spacing-2xl, var(--ng-spacing-3xl)) ;
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-radius-xs, var(--ng-radius-2xl)) 0 0;
+    border: var(--nile-border, var(--ng-border-width-0));
   }
 
   .dialog__header__text {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
-    gap: 5px;
+    gap: var(--nile-spacing-5px, var(--ng-spacing-sm));
     justify-content: center;
-    margin: 0;
-    color: var(--nile-colors-dark-900);
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   slot[name="label"] {
-    font-family: Colfax-regular;
-    font-size: 16px;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-spacing-xl, var(--ng-font-size-text-md));
     font-style: normal;
-    font-weight: 500;
-    line-height: 16px;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));
     letter-spacing: 0.2px;
     display:block;
   }
 
   slot[name="sublabel"] {
-    color:var(--nile-colors-dark-500);
-    font-family: Colfax-regular;
-    font-size: 14px;
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
     display:block;
   }
@@ -114,7 +118,7 @@ export const styles = css`
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
-    gap: 24px;
+    gap: var(--nile-spacing-3-x, var(--ng-spacing-none));
   }
 
   .dialog__header-actions nile-icon-button,
@@ -122,29 +126,29 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: 1rem;
+    font-size: var(--nile-type-scale-4);
   }
 
   .dialog__body {
     flex: 1 1 auto;
     display: block;
-    padding: 1.25rem;
+    padding: var(--nile-spacing-small, var(--ng-spacing-3xl));
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: var(--nile-border, var(--ng-border-width-0));
   }
 
   .dialog__body-noheader {
-    border-radius: 4px 4px 0px 0px;
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-none, var(--ng-radius-2xl)) var(--nile-radius-none, var(--ng-radius-2xl));
   }
 
   .dialog__footer {
     flex: 0 0 auto;
     text-align: right;
-    padding: 12px 24px;
-    background-color: var(--nile-colors-neutral-100);
-    border-radius: 0 0 4px 4px;
-    border: 1px solid var(--nile-colors-neutral-400);
+    padding: var(--nile-spacing-lg, var(--ng-spacing-none)) var(--nile-spacing-3-x, var(--ng-spacing-3xl))  var(--nile-spacing-lg, var(--ng-spacing-3xl)) var(--nile-spacing-3-x, var(--ng-spacing-3xl));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+    border-radius: 0 0 var(--nile-radius-radius-xs, var(--ng-radius-2xl)) var(--nile-radius-radius-xs, var(--ng-radius-2xl));
+    border: var(--nile-border, var(--ng-border-width-0));
   }
 
   .dialog__footer ::slotted(nile-button:not(:first-of-type)) {
@@ -161,7 +165,7 @@ export const styles = css`
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: hsl(0 0% 0% / 43%);
+    background-color: var(--nile-bg-color-dialog, var(--ng-componentcolors-alpha-black-70));
   }
   .dialog__close {
     cursor: pointer;

package/src/nile-dialog/nile-dialog.ts

@@ -321,7 +321,7 @@ export class NileDialog extends NileElement {
                       class="dialog__close"
                       name="close"
                       label="close"
-                      color="var(--nile-dialog-remove-icon-color)"
+                      color="var(--nile-dialog-remove-icon-color, var(--ng-colors-fg-quaternary-400))"
                       @click="${() => this.requestClose('close-button')}"
                     ></nile-icon>
                   </div>

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

@@ -14,29 +14,51 @@ export const styles = css`
 	:host {
 		display: block;
 		height: 100%;
+	-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
 	}
 
 	.divider {
-		background-color: var(--nile-colors-neutral-400);;
+		background-color: var(--nile-colors-neutral-400 , var(--ng-colors-border-secondary));
+		display: flex;
+    	align-items: center;
+    	justify-content: center;
 	}
 	
 	.horizontal {
-		height: 2px;
+		height: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));
 		/* width: 100%; */
 		margin: 8px 0;
 	}
 
 	.vertical {
 		height: 100%;
-		width: 2px;
+		width: var(--nile-radius-radius-xxs , var(--ng-stroke-width-1));
 		margin: 0 8px;
-		display: inline-block;
-		vertical-align: middle;
+		/* display: inline-block;
+		vertical-align: middle; */
 	}
 
 	.inset.horizontal {
 		margin-left: 72px;
 	}
+	.background-white{
+		background: var(--nile-colors-white-base , var(--ng-colors-fg-white));
+		font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+		font-size: var(--nile-type-scale-5 , var(--ng-font-size-text-lg));
+		font-weight: var(--nile-hero-text-font-weight , var(--ng-font-weight-semibold)) ;
+		max-width: var(--nile-sizes-width-xxs , var(--ng-spacing-80));
+		text-overflow: ellipsis;
+	}
+	.horizontal-content-padding{
+		padding: var(--nile-spacing-spacing-none , var(--ng-spacing-none)) var(--nile-type-scale-2 , var(--ng-spacing-md));
+		overflow: auto;
+	}
+	.vertical-content-padding{
+		padding: var(--nile-type-scale-2 , var(--ng-spacing-md)) var(--nile-spacing-spacing-none , var(--ng-spacing-none))
+	}
+
 `;
 
 export default [styles];

package/src/nile-divider/nile-divider.ts

@@ -29,6 +29,7 @@ export class NileDivider extends NileElement {
 	}
 	@property({ type: Boolean, reflect:true }) inset = false;
 	@property({ type: Boolean, reflect:true }) vertical = false;
+	@property({ reflect: true }) label = '';
 
 	/* #endregion */
 
@@ -40,8 +41,9 @@ export class NileDivider extends NileElement {
 	 */
 	public render(): TemplateResult {
 		return html`
-			<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}"></div>
-			`;
+		<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}">
+			<span part="dividier-label" class="background-white ${this.vertical ? 'vertical-content-padding' : 'horizontal-content-padding'}">${this.label}</span>
+		</div>`;
 	}
 
 	/* #endregion */

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

@@ -13,7 +13,10 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900);
+    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -28,9 +31,9 @@ export const styles = css`
 
   :host {
     --size: 25rem;
-    --header-spacing: 1.25rem;
-    --body-spacing: 1.25rem;
-    --footer-spacing: 1.25rem;
+    --header-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --body-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
+    --footer-spacing: var(--nile-line-height-small, var(--ng-spacing-2xl));
 
     display: contents;
   }
@@ -61,8 +64,8 @@ export const styles = css`
     z-index: 2;
     max-width: 100%;
     max-height: 100%;
-    background-color: hsl(0, 0%, 100%);
-    box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    box-shadow: var(--nile-box-shadow-2,  0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01), 0px 8px 8px -4px var(--ng-colors-effects-shadow-xl-02), 0px 3px 3px -1.5px var(--ng-colors-effects-shadow-xl-03));
     overflow: auto;
     pointer-events: all;
   }
@@ -113,8 +116,9 @@ export const styles = css`
 
   .drawer__title {
     flex: 1 1 auto;
-    font: inherit;
-    font-size: 1.25rem;
+    font-family: var(--nile-font-family-body, var(--ng-font-family-body));
+    font-size: var(--nile-font-size-rem-small, var(--ng-font-size-text-lg));
+    font-weight: inherit;
     line-height: 1.4;
     padding: var(--header-spacing);
     margin: 0;
@@ -134,7 +138,7 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: 1rem;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
   }
 
   .drawer__body {
@@ -147,7 +151,7 @@ export const styles = css`
 
   .drawer__footer {
     text-align: right;
-    padding: var(--footer-spacing);
+    padding: var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl)) var(--footer-spacing, var(--ng-spacing-xl)) var(--footer-spacing, var(--ng-spacing-3xl));
   }
 
   .drawer__footer ::slotted(nile-button:not(:last-of-type)) {
@@ -179,7 +183,7 @@ export const styles = css`
 
   @media (forced-colors: active) {
     .drawer__panel {
-      border: solid 1px hsl(0, 0%, 100%);
+      border: solid 1px var(--nile-colors-white-base, var(--ng-colors-border-tertiary));
     }
   }
 `;

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

@@ -13,6 +13,9 @@ import {css} from 'lit';
 export const styles = css`
 :host {
     display: inline-block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .dropdown::part(popup) {
@@ -40,10 +43,10 @@ export const styles = css`
   }
 
   .dropdown__panel {
-    font-size: 1rem;
-    font-weight: 400;
-    box-shadow: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
-    border-radius: 0.25rem;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    box-shadow: var(--nile-box-shadow-9, var(--ng-shadow-lg));
+    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
     pointer-events: none;
   }