@aquera/nile-elements 1.9.11 → 2.0.1

package/package.json

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

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

@@ -48,7 +48,7 @@ export const styles = css`
     width: 100%;
     height: auto;
     text-align: center;
-    background: white;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));
   }
 

package/src/nile-calendar/nile-calendar.ts

@@ -575,7 +575,7 @@ private handleEndDateInput(event: CustomEvent): void {
             class="calendar-header__month-navigation"
             name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'}
+            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))'}
             role="button"
             tabindex="${this.disabled || this.isPrevDisabled() ? '-1' : '0'}"
             @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.prevMonth();}}"
@@ -594,7 +594,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
         part="trigger"
       >
         ${new Date(year, month).toLocaleString('default', { month: 'long' })}
-        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'} class="calendar-header__caret"></nile-icon>
+        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))'} class="calendar-header__caret"></nile-icon>
       </span>
       <nile-menu>
         <div class="month-scroll-wrapper">
@@ -624,7 +624,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
         part="trigger"
       >
         ${year}
-        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'} class="calendar-header__caret"></nile-icon>
+        <nile-icon name="arrowdropdown" color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))'} class="calendar-header__caret"></nile-icon>
       </span>
       <nile-menu>
         <div class="year-scroll-wrapper">
@@ -659,7 +659,7 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
             class="calendar-header__month-navigation"
             name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'black'}
+            color=${this.disabled ? 'var(--nile-colors-dark-500, var(--ng-colors-fg-disabled))' : 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))'}
             role="button"
             tabindex="${this.disabled || this.isNextDisabled() ? '-1' : '0'}"
             @keydown="${(e: KeyboardEvent) => {if (e.key === 'Enter' || e.key === ' ') this.nextMonth();}}"

package/src/nile-carousel/nile-carousel.ts

@@ -308,6 +308,8 @@ export class NileCarousel extends NileElement {
           <nile-icon
             library="system"
             name="${iconName}"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            color="var(--nile-colors-dark-500, var(--ng-colors-fg-secondary-700))"
           ></nile-icon>
         </slot>
       </nile-button>

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

@@ -15,7 +15,7 @@ import {
 import { customElement, query, property } from 'lit/decorators.js';
 import { styles } from './nile-code-editor.css';
 import { EditorView } from 'codemirror';
-import { ViewUpdate, placeholder, tooltips } from '@codemirror/view';
+import { ViewUpdate, placeholder, tooltips, highlightActiveLine } from '@codemirror/view';
 import { 
   Compartment,
   EditorState,
@@ -39,7 +39,7 @@ import { autocompletion,acceptCompletion, closeCompletion,CompletionContext,Comp
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme, customisedThemeCss, fontFamily, readOnlyTheme } from './theme';
+import { Theme as DefaultTheme, customisedThemeCss, fontFamily, readOnlyTheme, oneDarkTheme, oneDarkHighlightStyle } from './theme';
 import { keymap } from '@codemirror/view';
 
 // Choose the appropriate mode for your use case
@@ -126,8 +126,21 @@ export class NileCodeEditor extends NileElement {
   private themeComp = new Compartment();
   private autoCompletionComp = new Compartment();
   private autoCompleteStyleComp = new Compartment();
+  private darkThemeComp = new Compartment();
 
   private isSpacePressed:boolean = false;
+
+  // Swaps the One Dark theme in and out when the app switches between light and dark.
+  private themeObserver?: MutationObserver;
+  private colorSchemeQuery?: MediaQueryList;
+  private onThemeChange = () => {
+    this.view?.dispatch({
+      effects: [
+        this.darkThemeComp.reconfigure(this.getDarkThemeExtension()),
+        this.defaultSyntaxHighlightingComp.reconfigure(this.getDefaultSyntaxHighlightingExtension()),
+      ]
+    });
+  };
   /**
    * The styles for CodeEditor
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
@@ -138,12 +151,18 @@ export class NileCodeEditor extends NileElement {
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.themeObserver = new MutationObserver(this.onThemeChange);
+    this.themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    this.colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+    this.colorSchemeQuery?.addEventListener('change', this.onThemeChange);
     this.emit('nile-init',undefined,false);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
+    this.themeObserver?.disconnect();
+    this.colorSchemeQuery?.removeEventListener('change', this.onThemeChange);
     this.view.destroy()
     this.emit('nile-destroy',undefined,false);
   }
@@ -302,7 +321,7 @@ export class NileCodeEditor extends NileElement {
             name="${this.expandIcon}"
             method="var(--nile-svg-method-fill, var(--ng-svg-method-fill))"
             size="16"
-            color="black"
+            color="var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))"
           ></nile-glyph>
         </div>`
       : ''}
@@ -384,6 +403,8 @@ export class NileCodeEditor extends NileElement {
           autocompletion({ aboveCursor: this.aboveCursor })
         ),
         language,
+        // Before customThemeExtension so the tokenised autocomplete popup styles still win.
+        this.darkThemeComp.of(this.getDarkThemeExtension()),
         customThemeExtension,
         autoCompleteStyleExtension,
         this.getTabCompletionKeymap(),
@@ -616,8 +637,50 @@ export class NileCodeEditor extends NileElement {
     return this.placeholder ? placeholder(this.placeholder) : [];
   }
   
+  /** Parses a token value (#rgb, #rrggbb, #rrggbbaa or rgb()/rgba()) into r/g/b. */
+  private parseColor(value: string): [number, number, number] | null {
+    const hex = value.match(/^#([0-9a-f]{3,8})$/i)?.[1];
+    if (hex) {
+      const full = hex.length <= 4 ? hex.slice(0, 3).replace(/./g, c => c + c) : hex.slice(0, 6);
+      if (full.length !== 6) return null;
+      return [0, 2, 4].map(i => parseInt(full.slice(i, i + 2), 16)) as [number, number, number];
+    }
+    const parts = value.match(/^rgba?\(([^)]+)\)$/i)?.[1].split(/[\s,/]+/).map(Number);
+    return parts && parts.length >= 3 && parts.slice(0, 3).every(n => !isNaN(n))
+      ? [parts[0], parts[1], parts[2]]
+      : null;
+  }
+
+  /**
+   * An explicit `data-theme` on the document root wins. Otherwise decide from the
+   * tokens the page actually resolved to, NOT from `prefers-color-scheme` — a page
+   * can load the light-only token sheet on a dark-mode OS, and trusting the OS there
+   * paints a dark editor theme over a light page.
+   */
+  private isDarkTheme(): boolean {
+    const theme = document.documentElement.getAttribute('data-theme');
+    if (theme === 'dark') return true;
+    if (theme === 'light') return false;
+
+    const bg = getComputedStyle(document.documentElement)
+      .getPropertyValue('--ng-colors-bg-primary')
+      .trim();
+    const rgb = this.parseColor(bg);
+    // No NxtGen tokens on the page (e.g. the enterprise sheet, which has no dark mode).
+    if (!rgb) return false;
+    // Rec. 601 luma; the surface is dark if the page background is dark.
+    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000 < 128;
+  }
+
+  /** Applied in dark only so light is untouched.*/
+  getDarkThemeExtension(): Extension {
+    return this.isDarkTheme() ? [oneDarkTheme, highlightActiveLine()] : [];
+  }
+
   getDefaultSyntaxHighlightingExtension(){
-    return !this.disableSyntaxHighlighting ? syntaxHighlighting(defaultHighlightStyle, { fallback: true }):[]
+    if (this.disableSyntaxHighlighting) return [];
+    const highlightStyle = this.isDarkTheme() ? oneDarkHighlightStyle : defaultHighlightStyle;
+    return syntaxHighlighting(highlightStyle, { fallback: true });
   }
 
   getCustomThemeExtension(): Extension {

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

@@ -1,3 +1,123 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+// One Dark, used for the editor's dark theme, with each colour mapped to the nearest NxtGen token. 
+const chalky = 'var(--ng-componentcolors-utility-yellow-700)', // #FDE272 <- #e5c07b
+  coral = 'var(--ng-componentcolors-utility-error-600)', // #F97066 <- #e06c75
+  cyan = 'var(--ng-componentcolors-utility-blue-light-700)', // #7CD4FD <- #56b6c2
+  invalid = 'var(--ng-colors-text-white)', // #FFFFFF <- #ffffff (exact)
+  ivory = 'var(--ng-colors-text-primary-900)', // #F7F7F7 <- #abb2bf
+  stone = 'var(--ng-colors-text-quaternary-500)', // #94979C <- #7d8799
+  malibu = 'var(--ng-componentcolors-utility-blue-600)', // #53B1FD <- #61afef
+  sage = 'var(--ng-componentcolors-utility-green-700)', // #73E2A3 <- #98c379
+  whiskey = 'var(--ng-componentcolors-utility-orange-700)', // #F7B27A <- #d19a66
+  violet = 'var(--ng-componentcolors-utility-fuchsia-600)', // #E478FA <- #c678dd
+  darkBackground = 'var(--ng-colors-bg-secondary)', // #13161B <- #21252b
+  highlightBackground = 'var(--ng-colors-bg-quaternary)', // #373A41 <- #2c313a
+  background = 'var(--ng-colors-bg-primary)', // #0C0E12 <- #282c34
+  tooltipBackground = 'var(--ng-colors-bg-secondary)', // #13161B <- #353a42
+  selection = 'var(--ng-colors-bg-quaternary-alt)', // #61656C <- #3E4451
+  cursor = 'var(--ng-colors-border-brand)'; // #528BFF <- #528bff (exact)
+
+/** The editor theme styles for One Dark. */
+export const oneDarkTheme = EditorView.theme(
+  {
+    '&': {
+      color: ivory,
+      backgroundColor: background,
+    },
+
+    '.cm-content': {
+      caretColor: cursor,
+    },
+
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
+      { backgroundColor: selection },
+
+    '.cm-panels': { backgroundColor: darkBackground, color: ivory },
+    '.cm-panels.cm-panels-top': { borderBottom: '2px solid var(--ng-colors-border-secondary)' },
+    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid var(--ng-colors-border-secondary)' },
+    '.cm-searchMatch': {
+      backgroundColor: 'var(--ng-componentcolors-alpha-white-30)',
+      outline: '1px solid var(--ng-colors-border-brand)',
+    },
+    '.cm-searchMatch.cm-searchMatch-selected': {
+      backgroundColor: 'var(--ng-componentcolors-alpha-white-20)',
+    },
+
+    '.cm-activeLine': { backgroundColor: 'var(--ng-componentcolors-alpha-white-10)' },
+    '.cm-selectionMatch': { backgroundColor: 'var(--ng-componentcolors-alpha-white-20)' },
+
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+      backgroundColor: 'var(--ng-componentcolors-alpha-white-30)',
+    },
+
+    '.cm-gutters': {
+      backgroundColor: background,
+      color: stone,
+      border: 'none',
+    },
+
+    '.cm-activeLineGutter': {
+      backgroundColor: highlightBackground,
+    },
+
+    '.cm-foldPlaceholder': {
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: 'var(--ng-colors-text-secondary-700)', // #CECFD2 <- #ddd
+    },
+
+    '.cm-tooltip': {
+      border: 'none',
+      backgroundColor: tooltipBackground,
+    },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent',
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+      borderTopColor: tooltipBackground,
+      borderBottomColor: tooltipBackground,
+    },
+    '.cm-tooltip-autocomplete': {
+      '& > ul > li[aria-selected]': {
+        backgroundColor: highlightBackground,
+        color: ivory,
+      },
+    },
+  },
+  { dark: true }
+);
+
+/** The highlighting style for code in the One Dark theme. */
+export const oneDarkHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: violet },
+  { tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: coral },
+  { tag: [t.function(t.variableName), t.labelName], color: malibu },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+  { tag: [t.definition(t.name), t.separator], color: ivory },
+  {
+    tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+    color: chalky,
+  },
+  {
+    tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
+    color: cyan,
+  },
+  { tag: [t.meta, t.comment], color: stone },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.link, color: stone, textDecoration: 'underline' },
+  { tag: t.heading, fontWeight: 'bold', color: coral },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+  { tag: t.invalid, color: invalid },
+]);
+
 export const Theme = {
   '&': {
     fontSize: '14px',
@@ -57,25 +177,25 @@ export const customisedThemeCss = {
   },
   '.cm-tooltip-autocomplete': {
     padding: '9px 12px',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: 'var(--ng-colors-bg-primary)',
     display: 'block',
     fontSize: '14px',
-    background: 'white',
-    border: 'solid 1px #C7CED4',
+    background: 'var(--ng-colors-bg-primary)',
+    border: 'solid 1px var(--ng-colors-border-primary)',
     borderRadius: '0.25rem',
     paddingBlock: '0',
     paddingInline: '0',
     overscrollBehavior: 'none',
-    color: 'hsl(240 5.3% 26.1%)',
+    color: 'var(--ng-colors-text-secondary-700)',
   },
   '.cm-tooltip.cm-completionInfo.cm-completionInfo-right': {
     fontFamily: 'inherit',
-    backgroundColor: '#FFFFFF',
-    color: 'hsl(240 5.3% 26.1%)',
+    backgroundColor: 'var(--ng-colors-bg-primary)',
+    color: 'var(--ng-colors-text-secondary-700)',
     padding: "6px 12px",
     borderTopRightRadius: "0.25rem",
     borderBottomRightRadius: "0.25rem",
-    border: 'solid 1px #C7CED4',
+    border: 'solid 1px var(--ng-colors-border-primary)',
     fontSize: '14px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
@@ -86,15 +206,15 @@ export const customisedThemeCss = {
     padding: '9px 12px'
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover': {
-    backgroundColor: '#005ea61a',
-    color: 'rgb(0, 0, 0)',
+    backgroundColor: 'var(--ng-colors-bg-brand-primary)',
+    color: 'var(--ng-colors-text-primary-900)',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]': {
-    backgroundColor: '#005ea61a',
-    color: '#005EA6',
+    backgroundColor: 'var(--ng-colors-bg-brand-primary)',
+    color: 'var(--ng-colors-text-brand-secondary-700)',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]:hover': {
-    color: '#005EA6',
+    color: 'var(--ng-colors-text-brand-secondary-700)',
   },
   '.cm-completionIcon': {
     display: 'block',

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

@@ -26,7 +26,7 @@ export function getCssText(): string { return `
   /* ── inline panel ────────────────────────────────────────────────── */
   .ncp-panel {
     padding: 8px;
-    background: #FFFFFF;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     box-sizing: border-box;
     width: 236px;
     border-radius: 8px;
@@ -64,20 +64,20 @@ export function getCssText(): string { return `
     padding: 8px 0;
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
     border-radius: 8px;
-    background: #FFFFFF;
-    color: #475467;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: background 0.15s ease;
   }
-  .ncp-no-fill:hover { background: #F9FAFB; }
+  .ncp-no-fill:hover { background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover)); }
 
   /* custom section */
   .ncp-custom-section {
     margin-top: 16px;
     padding-top: 8px;
-    border-top: 1px solid #EAECF0;
+    border-top: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
   }
   .ncp-custom-title {
     margin: 0 0 8px;
@@ -108,17 +108,17 @@ export function getCssText(): string { return `
     align-items: center;
     justify-content: center;
     border-radius: 6px;
-    border: 1.5px solid #CBD5E1;
-    background: #FFFFFF;
-    color: #111827;
+    border: 1.5px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     cursor: pointer;
     box-sizing: border-box;
     padding: 0;
     transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
   }
   .ncp-action-btn:hover {
-    border-color: #98A2B3;
-    background: #F8FAFC;
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
     transform: translateY(-1px);
   }
   .ncp-plus-icon {
@@ -194,9 +194,9 @@ export function getCssText(): string { return `
     width: 28px; height: 28px;
     display: flex; align-items: center; justify-content: center;
     border: none; background: none;
-    color: #475467; cursor: pointer; padding: 0; border-radius: 6px;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700)); cursor: pointer; padding: 0; border-radius: 6px;
   }
-  .ncp-eyedropper:hover { background: #F3F4F6; }
+  .ncp-eyedropper:hover { background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover)); }
 
   .ncp-input-row {
     display: flex;

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

@@ -454,7 +454,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     line-height: 14px;
     letter-spacing: 0.2px;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .combobox__show-toggle {

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

@@ -47,7 +47,7 @@ export const styles = css`
     background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
     font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));
     font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
-    color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary));
+    color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary-900));
     user-select: none;
     cursor: pointer;
     list-style: none;

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

@@ -13,7 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-componentcolors-alpha-black-100));
+    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900, var(--ng-colors-fg-secondary-700));
     -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));
@@ -115,6 +115,7 @@ export const styles = css`
     max-width: 100%;
     max-height: 100%;
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     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;

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

@@ -412,7 +412,7 @@ export class NileDrawer extends NileElement {
                       label="close"
                       part="close-button"
                       exportparts="base:close-button__base"
-                      color="var(--nile-drawer-remove-icon-color)"
+                      color="var(--nile-drawer-remove-icon-color, var(--ng-colors-bg-primary))"
                       @click=${() => this.requestClose('close-button')}
                     ></nile-icon>
                   </div>

package/src/nile-error-message/nile-error-message.css.ts

@@ -62,7 +62,8 @@ export const styles = css`
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     margin-top: var(--nile-spacing-lg, var(--ng-spacing-md));
     padding: var(--nile-spacing-lg, var(--ng-spacing-md));
-    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
     transition: max-height 0.3s ease-in-out;
     flex-shrink: 0;
   }

package/src/nile-error-notification/nile-error-notification.css.ts

@@ -29,7 +29,7 @@ export const styles = css`
     border-left: var(--nile-border-size-6, var(--ng-border-width-4)) solid var(--indication-color);
     border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     padding: var(--nile-spacing-md, var(--ng-spacing-md));
-    background: var(--nile-colors-neutral-100, var(--ng-colors-fg-white));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
     color: var(--indication-color);
     box-sizing: border-box;
   }

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

@@ -32,6 +32,7 @@ export const styles = css`
 		width:100%;
 		position:relative;
 		display:block;
+		color: var(--nile-hero-text-color, var(--ng-colors-text-primary-900));
   		transition: var(--nile-hero-transition-time);
 	}
 

package/src/nile-lite-tooltip/nile-lite-tooltip.css.ts

@@ -19,7 +19,7 @@ export const styles = css`
   .tippy-box {
     position: relative;
     background-color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary-solid));
-    color: var(--nile-colors-dark-200, var(--ng-colors-text-white));
+    color: var(--nile-colors-dark-200, var(--ng-colors-text-primary-on-brand));
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-xs));

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

@@ -12,7 +12,8 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --arrow-color: var(--nile-colors-dark-200);
+    --arrow-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));
+    --arrow-border-color: var(--nile-colors-dark-200, var(--ng-colors-border-primary));
     -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));
@@ -54,7 +55,7 @@ export const styles = css`
     background: var(--arrow-color);
     z-index: -1;
     /* Added border and box-shadow to arrow */
-    border: solid 1px var(--nile-colors-dark-200);
+    border: solid 1px var(--arrow-border-color);
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
       0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }

package/src/nile-side-bar-footer/nile-side-bar-footer.css.ts

@@ -10,10 +10,10 @@ export const styles = css`
  padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));
 	padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));
 	padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));
-  padding-top: var(--nile-spacing-xs);
+  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
  gap: var(--nile-spacing-md, var(--ng-spacing-xl));
   bottom: 0;
-  background: var(--nile-colors-neutral-100);
+  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
 .footer {
@@ -30,7 +30,7 @@ export const styles = css`
   justify-content: center;
  
   font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));
+  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   cursor: pointer;
   border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   transition: background 0.2s ease;

package/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts

@@ -15,7 +15,7 @@ export const styles = css`
     padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
     padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     cursor: pointer;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     border-radius: var(--nile-radius-sm, var(--ng-radius-lg));
@@ -27,7 +27,10 @@ export const styles = css`
   }
 
   .footer-item:hover {
-    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);
+    background: var(
+      --nile-side-bar-footer-hover-bg,
+      var(--ng-colors-bg-primary-hover)
+    );
   }
 
   /* left: icon */
@@ -50,13 +53,16 @@ export const styles = css`
   ::slotted([slot='action']) {
     flex-shrink: 0;
     font-size: 1.25rem;
-    color: var(--nile-side-bar-footer-icon-color, #6b7280);
+    color: var(
+      --nile-side-bar-footer-icon-color,
+      var(--ng-colors-fg-quaternary-400)
+    );
     margin-left: auto;
   }
 
  
   :host([type='support']) .footer-item {
-    background: var(--nile-colors-neutral-400);
+    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary));
     height: var(--nile-height-38px, var(--ng-spacing-5xl));
     border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
 
@@ -72,7 +78,7 @@ border: 1px solid var(--ng-colors-border-secondary);
 min-height: var(--nile-radius-4xl, var(--ng-spacing-7xl));
 }
 :host([type='avatar'][active]) .footer-item {
-background: var(--nile-colors-neutral-400);
+background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));
 }
 
 

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

@@ -24,6 +24,7 @@ export const styles = css`
   .tooltip {
     --arrow-size: var(--nile-height-6px, var(--ng-height-5px));
     --arrow-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
+    --arrow-border-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
   }
 
   .tooltip::part(popup) {
@@ -31,6 +32,11 @@ export const styles = css`
     z-index: 1000;
   }
 
+  .tooltip::part(arrow) {
+    z-index: 1;
+    box-shadow: none;
+  }
+
   .tooltip[placement^='top']::part(popup) {
     transform-origin: bottom;
   }
@@ -57,7 +63,7 @@ export const styles = css`
     font-weight: var(--nile-tooltip-font-weight-sm, var(--ng-font-weight-semibold));
     line-height: var(--nile-tooltip-line-height-sm, var(--ng-line-height-text-xs));
     padding: var(--nile-tooltip-padding-y, var(--ng-spacing-md)) var(--nile-tooltip-padding-x, var(--ng-spacing-md));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    color: var(--nile-colors-white-base, var(--ng-colors-text-primary-on-brand));
     pointer-events: none;
     word-break: break-word;
     font-family: var(--nile-font-family-inherit, var(--ng-font-family-body));