@aquera/nile-elements 1.9.10 → 2.0.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.9.10",
+  "version": "2.0.0",
   "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.css.ts

@@ -28,6 +28,7 @@ export const styles = css`
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
     position: relative;
+    overflow: hidden;
   }
 
   .no-scroller .cm-scroller{
@@ -67,8 +68,7 @@ export const styles = css`
   }
 
   .cm-gutters{
-   border-top-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));
-   border-bottom-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));
+   border-radius: 0;
   }
 
   .expand__icon__container{

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

@@ -24,7 +24,6 @@ import {
 import { StyleSpec } from 'style-mod';
 import {
   syntaxHighlighting,
-  defaultHighlightStyle,
 } from '@codemirror/language';
 
 import { lineNumbers } from '@codemirror/view';
@@ -39,7 +38,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, nileEditorTheme, nileHighlightStyle } from './theme';
 import { keymap } from '@codemirror/view';
 
 // Choose the appropriate mode for your use case
@@ -384,6 +383,7 @@ export class NileCodeEditor extends NileElement {
           autocompletion({ aboveCursor: this.aboveCursor })
         ),
         language,
+        EditorView.theme(nileEditorTheme),
         customThemeExtension,
         autoCompleteStyleExtension,
         this.getTabCompletionKeymap(),
@@ -617,7 +617,7 @@ export class NileCodeEditor extends NileElement {
   }
   
   getDefaultSyntaxHighlightingExtension(){
-    return !this.disableSyntaxHighlighting ? syntaxHighlighting(defaultHighlightStyle, { fallback: true }):[]
+    return !this.disableSyntaxHighlighting ? syntaxHighlighting(nileHighlightStyle, { fallback: true }):[]
   }
 
   getCustomThemeExtension(): Extension {

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

@@ -1,3 +1,81 @@
+import { HighlightStyle } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+export const nileEditorTheme = {
+  '&': {
+    color: 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))',
+    backgroundColor: 'var(--nile-colors-white-base, var(--ng-colors-bg-primary))',
+  },
+  '.cm-content': {
+    caretColor: 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))',
+  },
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeftColor: 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))',
+  },
+  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-active))',
+  },
+  '.cm-gutters': {
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary))',
+    color: 'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))',
+    borderRight: '1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary))',
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-active))',
+    color: 'var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700))',
+  },
+  '.cm-activeLine': {
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-active))',
+  },
+  '.cm-selectionMatch': {
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-active))',
+  },
+  '.cm-placeholder': {
+    color: 'var(--nile-colors-dark-500, var(--ng-colors-text-placeholder))',
+  },
+  '.cm-foldPlaceholder': {
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-active))',
+    color: 'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))',
+    border: 'none',
+  },
+  '.cm-matchingBracket, .cm-nonmatchingBracket': {
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-active))',
+    outline: '1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary))',
+  },
+  '.cm-panels': {
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary))',
+    color: 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))',
+  },
+};
+
+export const nileHighlightStyle = HighlightStyle.define([
+  {
+    tag: [t.keyword, t.modifier, t.moduleKeyword, t.controlKeyword, t.operatorKeyword, t.definitionKeyword],
+    color: 'var(--nile-colors-primary-600, var(--ng-componentcolors-utility-purple-700))',
+  },
+  {
+    tag: [t.string, t.special(t.string), t.regexp, t.inserted],
+    color: 'var(--nile-colors-red-700, var(--ng-componentcolors-utility-green-700))',
+  },
+  {
+    tag: [t.number, t.bool, t.null, t.atom, t.literal, t.unit],
+    color: 'var(--nile-colors-blue-700, var(--ng-componentcolors-utility-pink-700))',
+  },
+  {
+    tag: [t.comment, t.lineComment, t.blockComment, t.docComment],
+    color: 'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))',
+    fontStyle: 'italic',
+  },
+  {
+    tag: [t.typeName, t.className, t.namespace, t.tagName, t.function(t.variableName)],
+    color: 'var(--nile-colors-blue-700, var(--ng-componentcolors-utility-brand-700))',
+  },
+  {
+    tag: t.invalid,
+    color: 'var(--nile-colors-red-700, var(--ng-componentcolors-utility-error-700))',
+  },
+]);
+
 export const Theme = {
   '&': {
     fontSize: '14px',
@@ -57,25 +135,24 @@ export const customisedThemeCss = {
   },
   '.cm-tooltip-autocomplete': {
     padding: '9px 12px',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: 'var(--nile-colors-white-base, var(--ng-colors-bg-primary))',
     display: 'block',
     fontSize: '14px',
-    background: 'white',
-    border: 'solid 1px #C7CED4',
+    border: 'solid 1px var(--nile-colors-neutral-400, var(--ng-colors-border-secondary))',
     borderRadius: '0.25rem',
     paddingBlock: '0',
     paddingInline: '0',
     overscrollBehavior: 'none',
-    color: 'hsl(240 5.3% 26.1%)',
+    color: 'var(--nile-colors-dark-900, 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(--nile-colors-white-base, var(--ng-colors-bg-primary))',
+    color: 'var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700))',
     padding: "6px 12px",
     borderTopRightRadius: "0.25rem",
     borderBottomRightRadius: "0.25rem",
-    border: 'solid 1px #C7CED4',
+    border: 'solid 1px var(--nile-colors-neutral-400, var(--ng-colors-border-secondary))',
     fontSize: '14px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
@@ -86,23 +163,33 @@ export const customisedThemeCss = {
     padding: '9px 12px'
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover': {
-    backgroundColor: '#005ea61a',
-    color: 'rgb(0, 0, 0)',
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-active))',
+    color: 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]': {
-    backgroundColor: '#005ea61a',
-    color: '#005EA6',
+    backgroundColor: 'var(--nile-colors-neutral-100, var(--ng-colors-bg-active))',
+    color: 'var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700))',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]:hover': {
-    color: '#005EA6',
+    color: 'var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700))',
   },
   '.cm-completionIcon': {
     display: 'block',
     position: 'relative'
   },
   '.cm-completionIcon::after': {
+    content: '""',
     display: 'block',
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjM2MDExIDYuMjVMNi45ODUxMSAxLjc1TDkuNjEwMTEgNi4yNUg0LjM2MDExWk01LjY5NTExIDUuNUg4LjMxMjYxTDcuMDAwMTEgMy4yNUw1LjY5NTExIDUuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi4yNSAxMi4yNUgxLjc1VjcuNzVINi4yNVYxMi4yNVpNMi41IDExLjVINS41VjguNUgyLjVWMTEuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC43NDk5NyAxMS44NzA4QzkuMTE5OTggMTIuMTE4IDkuNTU0OTkgMTIuMjUgMTAgMTIuMjVDMTAuNTk2NyAxMi4yNSAxMS4xNjkgMTIuMDEyOSAxMS41OTEgMTEuNTkxQzEyLjAxMjkgMTEuMTY5IDEyLjI1IDEwLjU5NjcgMTIuMjUgMTBDMTIuMjUgOS41NTQ5OSAxMi4xMTggOS4xMTk5OCAxMS44NzA4IDguNzQ5OTdDMTEuNjIzNiA4LjM3OTk2IDExLjI3MjIgOC4wOTE1NyAxMC44NjEgNy45MjEyN0MxMC40NDk5IDcuNzUwOTcgOS45OTc1MSA3LjcwNjQyIDkuNTYxMDUgNy43OTMyM0M5LjEyNDU5IDcuODgwMDUgOC43MjM2OCA4LjA5NDM0IDguNDA5MDEgOC40MDkwMUM4LjA5NDM0IDguNzIzNjggNy44ODAwNSA5LjEyNDU5IDcuNzkzMjMgOS41NjEwNUM3LjcwNjQyIDkuOTk3NTEgNy43NTA5NyAxMC40NDk5IDcuOTIxMjcgMTAuODYxQzguMDkxNTcgMTEuMjcyMiA4LjM3OTk2IDExLjYyMzYgOC43NDk5NyAxMS44NzA4Wk05LjE2NjY1IDguNzUyOEM5LjQxMzMyIDguNTg3OTggOS43MDMzMyA4LjUgMTAgOC41QzEwLjM5NzggOC41IDEwLjc3OTQgOC42NTgwNCAxMS4wNjA3IDguOTM5MzRDMTEuMzQyIDkuMjIwNjUgMTEuNSA5LjYwMjE4IDExLjUgMTBDMTEuNSAxMC4yOTY3IDExLjQxMiAxMC41ODY3IDExLjI0NzIgMTAuODMzNEMxMS4wODI0IDExLjA4IDEwLjg0ODEgMTEuMjcyMyAxMC41NzQgMTEuMzg1OEMxMC4yOTk5IDExLjQ5OTQgOS45OTgzNCAxMS41MjkxIDkuNzA3MzcgMTEuNDcxMkM5LjQxNjM5IDExLjQxMzMgOS4xNDkxMiAxMS4yNzA0IDguOTM5MzQgMTEuMDYwN0M4LjcyOTU2IDEwLjg1MDkgOC41ODY3IDEwLjU4MzYgOC41Mjg4MiAxMC4yOTI2QzguNDcwOTUgMTAuMDAxNyA4LjUwMDY1IDkuNzAwMDcgOC42MTQxOCA5LjQyNTk4QzguNzI3NzEgOS4xNTE4OSA4LjkxOTk3IDguOTE3NjIgOS4xNjY2NSA4Ljc1MjhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    width: '14px',
+    height: '14px',
+    // Masked rather than embedded, so the glyph takes a themed colour;
+    backgroundColor: 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))',
+    maskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjM2MDExIDYuMjVMNi45ODUxMSAxLjc1TDkuNjEwMTEgNi4yNUg0LjM2MDExWk01LjY5NTExIDUuNUg4LjMxMjYxTDcuMDAwMTEgMy4yNUw1LjY5NTExIDUuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi4yNSAxMi4yNUgxLjc1VjcuNzVINi4yNVYxMi4yNVpNMi41IDExLjVINS41VjguNUgyLjVWMTEuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC43NDk5NyAxMS44NzA4QzkuMTE5OTggMTIuMTE4IDkuNTU0OTkgMTIuMjUgMTAgMTIuMjVDMTAuNTk2NyAxMi4yNSAxMS4xNjkgMTIuMDEyOSAxMS41OTEgMTEuNTkxQzEyLjAxMjkgMTEuMTY5IDEyLjI1IDEwLjU5NjcgMTIuMjUgMTBDMTIuMjUgOS41NTQ5OSAxMi4xMTggOS4xMTk5OCAxMS44NzA4IDguNzQ5OTdDMTEuNjIzNiA4LjM3OTk2IDExLjI3MjIgOC4wOTE1NyAxMC44NjEgNy45MjEyN0MxMC40NDk5IDcuNzUwOTcgOS45OTc1MSA3LjcwNjQyIDkuNTYxMDUgNy43OTMyM0M5LjEyNDU5IDcuODgwMDUgOC43MjM2OCA4LjA5NDM0IDguNDA5MDEgOC40MDkwMUM4LjA5NDM0IDguNzIzNjggNy44ODAwNSA5LjEyNDU5IDcuNzkzMjMgOS41NjEwNUM3LjcwNjQyIDkuOTk3NTEgNy43NTA5NyAxMC40NDk5IDcuOTIxMjcgMTAuODYxQzguMDkxNTcgMTEuMjcyMiA4LjM3OTk2IDExLjYyMzYgOC43NDk5NyAxMS44NzA4Wk05LjE2NjY1IDguNzUyOEM5LjQxMzMyIDguNTg3OTggOS43MDMzMyA4LjUgMTAgOC41QzEwLjM5NzggOC41IDEwLjc3OTQgOC42NTgwNCAxMS4wNjA3IDguOTM5MzRDMTEuMzQyIDkuMjIwNjUgMTEuNSA5LjYwMjE4IDExLjUgMTBDMTEuNSAxMC4yOTY3IDExLjQxMiAxMC41ODY3IDExLjI0NzIgMTAuODMzNEMxMS4wODI0IDExLjA4IDEwLjg0ODEgMTEuMjcyMyAxMC41NzQgMTEuMzg1OEMxMC4yOTk5IDExLjQ5OTQgOS45OTgzNCAxMS41MjkxIDkuNzA3MzcgMTEuNDcxMkM5LjQxNjM5IDExLjQxMzMgOS4xNDkxMiAxMS4yNzA0IDguOTM5MzQgMTEuMDYwN0M4LjcyOTU2IDEwLjg1MDkgOC41ODY3IDEwLjU4MzYgOC41Mjg4MiAxMC4yOTI2QzguNDcwOTUgMTAuMDAxNyA4LjUwMDY1IDkuNzAwMDcgOC42MTQxOCA5LjQyNTk4QzguNzI3NzEgOS4xNTE4OSA4LjkxOTk3IDguOTE3NjIgOS4xNjY2NSA4Ljc1MjhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    maskSize: '14px 14px',
+    maskRepeat: 'no-repeat',
+    WebkitMaskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjM2MDExIDYuMjVMNi45ODUxMSAxLjc1TDkuNjEwMTEgNi4yNUg0LjM2MDExWk01LjY5NTExIDUuNUg4LjMxMjYxTDcuMDAwMTEgMy4yNUw1LjY5NTExIDUuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi4yNSAxMi4yNUgxLjc1VjcuNzVINi4yNVYxMi4yNVpNMi41IDExLjVINS41VjguNUgyLjVWMTEuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC43NDk5NyAxMS44NzA4QzkuMTE5OTggMTIuMTE4IDkuNTU0OTkgMTIuMjUgMTAgMTIuMjVDMTAuNTk2NyAxMi4yNSAxMS4xNjkgMTIuMDEyOSAxMS41OTEgMTEuNTkxQzEyLjAxMjkgMTEuMTY5IDEyLjI1IDEwLjU5NjcgMTIuMjUgMTBDMTIuMjUgOS41NTQ5OSAxMi4xMTggOS4xMTk5OCAxMS44NzA4IDguNzQ5OTdDMTEuNjIzNiA4LjM3OTk2IDExLjI3MjIgOC4wOTE1NyAxMC44NjEgNy45MjEyN0MxMC40NDk5IDcuNzUwOTcgOS45OTc1MSA3LjcwNjQyIDkuNTYxMDUgNy43OTMyM0M5LjEyNDU5IDcuODgwMDUgOC43MjM2OCA4LjA5NDM0IDguNDA5MDEgOC40MDkwMUM4LjA5NDM0IDguNzIzNjggNy44ODAwNSA5LjEyNDU5IDcuNzkzMjMgOS41NjEwNUM3LjcwNjQyIDkuOTk3NTEgNy43NTA5NyAxMC40NDk5IDcuOTIxMjcgMTAuODYxQzguMDkxNTcgMTEuMjcyMiA4LjM3OTk2IDExLjYyMzYgOC43NDk5NyAxMS44NzA4Wk05LjE2NjY1IDguNzUyOEM5LjQxMzMyIDguNTg3OTggOS43MDMzMyA4LjUgMTAgOC41QzEwLjM5NzggOC41IDEwLjc3OTQgOC42NTgwNCAxMS4wNjA3IDguOTM5MzRDMTEuMzQyIDkuMjIwNjUgMTEuNSA5LjYwMjE4IDExLjUgMTBDMTEuNSAxMC4yOTY3IDExLjQxMiAxMC41ODY3IDExLjI0NzIgMTAuODMzNEMxMS4wODI0IDExLjA4IDEwLjg0ODEgMTEuMjcyMyAxMC41NzQgMTEuMzg1OEMxMC4yOTk5IDExLjQ5OTQgOS45OTgzNCAxMS41MjkxIDkuNzA3MzcgMTEuNDcxMkM5LjQxNjM5IDExLjQxMzMgOS4xNDkxMiAxMS4yNzA0IDguOTM5MzQgMTEuMDYwN0M4LjcyOTU2IDEwLjg1MDkgOC41ODY3IDEwLjU4MzYgOC41Mjg4MiAxMC4yOTI2QzguNDcwOTUgMTAuMDAxNyA4LjUwMDY1IDkuNzAwMDcgOC42MTQxOCA5LjQyNTk4QzguNzI3NzEgOS4xNTE4OSA4LjkxOTk3IDguOTE3NjIgOS4xNjY2NSA4Ljc1MjhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    WebkitMaskSize: '14px 14px',
+    WebkitMaskRepeat: 'no-repeat',
     position: 'absolute',
     left: '0px',
     top: '2px',
@@ -113,7 +200,18 @@ export const customisedThemeCss = {
     textDecoration: 'none',
   },
   '.cm-completionIcon.cm-completionIcon-property::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    content: '""',
+    display: 'block',
+    width: '14px',
+    height: '14px',
+    // Masked rather than embedded, so the glyph takes a themed colour;
+    backgroundColor: 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))',
+    maskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    maskSize: '14px 14px',
+    maskRepeat: 'no-repeat',
+    WebkitMaskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    WebkitMaskSize: '14px 14px',
+    WebkitMaskRepeat: 'no-repeat',
     position: 'absolute',
     left: '0px',
     top: '2px',
@@ -121,7 +219,18 @@ export const customisedThemeCss = {
     verticalAlign: 'middle'
   },
   '.cm-completionIcon.cm-completionIcon-keyword::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
+    content: '""',
+    display: 'block',
+    width: '14px',
+    height: '14px',
+    // Masked rather than embedded, so the glyph takes a themed colour;
+    backgroundColor: 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))',
+    maskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
+    maskSize: '14px 14px',
+    maskRepeat: 'no-repeat',
+    WebkitMaskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
+    WebkitMaskSize: '14px 14px',
+    WebkitMaskRepeat: 'no-repeat',
     position: 'absolute',
     left: '0px',
     top: '2px',
@@ -129,7 +238,18 @@ export const customisedThemeCss = {
     verticalAlign: 'middle'
   },
   '.cm-completionIcon.cm-completionIcon-variable::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    content: '""',
+    display: 'block',
+    width: '14px',
+    height: '14px',
+    // Masked rather than embedded, so the glyph takes a themed colour;
+    backgroundColor: 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))',
+    maskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    maskSize: '14px 14px',
+    maskRepeat: 'no-repeat',
+    WebkitMaskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    WebkitMaskSize: '14px 14px',
+    WebkitMaskRepeat: 'no-repeat',
     position: 'absolute',
     left: '0px',
     top: '2px',
@@ -137,7 +257,18 @@ export const customisedThemeCss = {
     verticalAlign: 'middle'
   },
   '.cm-completionIcon.cm-completionIcon-text::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    content: '""',
+    display: 'block',
+    width: '14px',
+    height: '14px',
+    // Masked rather than embedded, so the glyph takes a themed colour;
+    backgroundColor: 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))',
+    maskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    maskSize: '14px 14px',
+    maskRepeat: 'no-repeat',
+    WebkitMaskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    WebkitMaskSize: '14px 14px',
+    WebkitMaskRepeat: 'no-repeat',
     position: 'absolute',
     left: '0px',
     top: '2px',
@@ -145,7 +276,18 @@ export const customisedThemeCss = {
     verticalAlign: 'middle'
   },
   '.cm-completionIcon.cm-completionIcon-function::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzE5ODMgNC4zNTY0NUwzLjMxODk0IDQuODA1NjZMMy4zNTgzNCA0Ljk3NTU5SDQuMzkwNjJDNC4xNzk4MyA2LjE4NDU3IDQuMDIyMjMgNy4yNzQ0MSAzLjcxOTgzIDguOTU0MUMzLjM1ODM0IDExLjA5NjcgMy4xNTA1IDExLjYyMyAzLjAyNzM4IDExLjgxNTRDMi45MTkwMyAxMi4wMDU5IDIuNzYzNCAxMi4xMDQ1IDIuNTUyNjEgMTIuMTA0NUMyLjMyMTEzIDEyLjEwNDUgMS45MDI1IDExLjkyMjkgMS42Nzc5MiAxMS43MTY4QzEuNTk3MTUgMTEuNjYyMSAxLjUwMTYxIDExLjY3NTggMS40MDAxNSAxMS43NDIyQzEuMTk3MjQgMTEuOTEyMSAxLjAwMDI0IDEyLjE3MzggMS4wMDAyNCAxMi40MDgyQzAuOTg4NDIgMTIuNzI0NiAxLjQxNDkzIDEzIDEuODIxNzMgMTNDMi4xODAyNyAxMyAyLjcwODI0IDEyLjc3NzMgMy4yNjM3OCAxMi4yNTM5QzQuMDIzMjIgMTEuNTQgNC41OTE1NiAxMC41NjA1IDUuMDY2MzMgOC40NDMzNkM1LjM3MTY5IDcuMDkxOCA1LjUxNTUgNi4yMTI4OSA1LjczMDIzIDQuOTc2NTZMNy4wMTI3IDQuODYxMzNMNy4yOTA0NyA0LjM1NjQ1SDUuODQ2NDZDNi4yMTk3NyAyLjAyODMyIDYuNTExMzMgMS42ODM1OSA2Ljg2OTg4IDEuNjgzNTlDNy4xMDgyNSAxLjY4MzU5IDcuMzg2MDIgMS44NjUyMyA3LjcwNTE2IDIuMjIyNjZDNy43OTk3MiAyLjM1MTU2IDcuOTQxNTYgMi4zMzc4OSA4LjA0OTkxIDIuMjVDOC4yMzIxNCAyLjE0MjU4IDguNDU2NzIgMS44NjcxOSA4LjQ3MTQ5IDEuNjE3MTlDOC40ODIzMyAxLjM0MTggOC4xNTEzNyAxIDcuNTgyMDMgMUM3LjA2NTg5IDEgNi4yNzQ5MyAxLjM0MTggNS42MTAwNiAyLjAxMzY3QzUuMDI2OTMgMi42MjU5OCA0LjcyMTU4IDMuMzkwNjIgNC41MTA3OSA0LjM1NjQ1SDMuNzE5ODNaTTcuODIzMzYgNS45MTUwNEM4LjIyMTMgNS4zODk2NSA4LjQ1OTY3IDUuMjE0ODQgOC41ODI4IDUuMjE0ODRDOC43MDk4NiA1LjIxNDg0IDguODExMzIgNS4zMzg4NyA5LjAyOSA2LjAzNjEzTDkuNDAxMzMgNy4yMjY1NkM4LjY4MTMgOC4zMTgzNiA4LjE1NDMyIDguOTI2NzYgNy44MzQxOSA4LjkyNjc2QzcuNzI3ODEgOC45MjY3NiA3LjYyMDQ1IDguODkzNTUgNy41NDQ2IDguODE5MzRDNy40Njk3NCA4Ljc0NTEyIDcuMzg3IDguNjgzNTkgNy4zMDYyMyA4LjY4MzU5QzcuMDQyMjUgOC42ODM1OSA2LjcxNTIzIDkuMDAwOTggNi43MDkzMiA5LjM5NDUzQzYuNzAzNDEgOS43OTU5IDYuOTg3MDkgMTAuMDgzIDcuMzU5NDIgMTAuMDgzQzcuOTk4NjkgMTAuMDgzIDguNTM5NDYgOS40NjA5NCA5LjU4MzU2IDcuODExNTJMOS44ODg5MSA4LjgzMjAzQzEwLjE1MDkgOS43MDg5OCAxMC40NTgyIDEwLjA4MyAxMC44NDI0IDEwLjA4M0MxMS4zMTcyIDEwLjA4MyAxMS45NTU0IDkuNjgxNjQgMTIuNjUxOCA4LjU5NjY4TDEyLjM2MDMgOC4yNjY2QzExLjk0MTcgOC43NjY2IDExLjY2MzkgOS4wMDA5OCAxMS40OTk0IDkuMDAwOThDMTEuMzE2MiA5LjAwMDk4IDExLjE1NTYgOC43MjM2MyAxMC45NDM4IDguMDQxOTlMMTAuNDk3NiA2LjYwMzUyQzEwLjc2MTYgNi4yMTc3NyAxMS4wMjE3IDUuODkzNTUgMTEuMjUwMiA1LjYzNDc3QzExLjUyMiA1LjMyNzE1IDExLjczMTkgNS4xOTYyOSAxMS44NzQ3IDUuMTk2MjlDMTEuOTk0OCA1LjE5NjI5IDEyLjA5OTMgNS4yNDcwNyAxMi4xNjQzIDUuMzE4MzZDMTIuMjUgNS40MTIxMSAxMi4zMDEyIDUuNDU2MDUgMTIuNDAyNiA1LjQ1NjA1QzEyLjYzMjEgNS40NTYwNSAxMi45ODY3IDUuMTY2OTkgMTIuOTk5NiA0Ljc4NDE4QzEzLjAxMTQgNC40Mjg3MSAxMi43ODg4IDQuMTI1OTggMTIuNDAyNiA0LjEyNTk4QzExLjgxOTUgNC4xMjU5OCAxMS4zMDUzIDQuNjI0MDIgMTAuMzE1NCA2LjA4MzAxTDEwLjExMTUgNS40NTcwM0M5LjgyNTg3IDQuNTc4MTIgOS42MzY3NSA0LjEyNTk4IDkuMjM4ODEgNC4xMjU5OEM4Ljc3NTg2IDQuMTI1OTggOC4xMzk1NSA0LjY5MDQzIDcuNTE3MDIgNS41ODQ5Nkw3LjgyMzM2IDUuOTE1MDRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    content: '""',
+    display: 'block',
+    width: '14px',
+    height: '14px',
+    // Masked rather than embedded, so the glyph takes a themed colour;
+    backgroundColor: 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))',
+    maskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzE5ODMgNC4zNTY0NUwzLjMxODk0IDQuODA1NjZMMy4zNTgzNCA0Ljk3NTU5SDQuMzkwNjJDNC4xNzk4MyA2LjE4NDU3IDQuMDIyMjMgNy4yNzQ0MSAzLjcxOTgzIDguOTU0MUMzLjM1ODM0IDExLjA5NjcgMy4xNTA1IDExLjYyMyAzLjAyNzM4IDExLjgxNTRDMi45MTkwMyAxMi4wMDU5IDIuNzYzNCAxMi4xMDQ1IDIuNTUyNjEgMTIuMTA0NUMyLjMyMTEzIDEyLjEwNDUgMS45MDI1IDExLjkyMjkgMS42Nzc5MiAxMS43MTY4QzEuNTk3MTUgMTEuNjYyMSAxLjUwMTYxIDExLjY3NTggMS40MDAxNSAxMS43NDIyQzEuMTk3MjQgMTEuOTEyMSAxLjAwMDI0IDEyLjE3MzggMS4wMDAyNCAxMi40MDgyQzAuOTg4NDIgMTIuNzI0NiAxLjQxNDkzIDEzIDEuODIxNzMgMTNDMi4xODAyNyAxMyAyLjcwODI0IDEyLjc3NzMgMy4yNjM3OCAxMi4yNTM5QzQuMDIzMjIgMTEuNTQgNC41OTE1NiAxMC41NjA1IDUuMDY2MzMgOC40NDMzNkM1LjM3MTY5IDcuMDkxOCA1LjUxNTUgNi4yMTI4OSA1LjczMDIzIDQuOTc2NTZMNy4wMTI3IDQuODYxMzNMNy4yOTA0NyA0LjM1NjQ1SDUuODQ2NDZDNi4yMTk3NyAyLjAyODMyIDYuNTExMzMgMS42ODM1OSA2Ljg2OTg4IDEuNjgzNTlDNy4xMDgyNSAxLjY4MzU5IDcuMzg2MDIgMS44NjUyMyA3LjcwNTE2IDIuMjIyNjZDNy43OTk3MiAyLjM1MTU2IDcuOTQxNTYgMi4zMzc4OSA4LjA0OTkxIDIuMjVDOC4yMzIxNCAyLjE0MjU4IDguNDU2NzIgMS44NjcxOSA4LjQ3MTQ5IDEuNjE3MTlDOC40ODIzMyAxLjM0MTggOC4xNTEzNyAxIDcuNTgyMDMgMUM3LjA2NTg5IDEgNi4yNzQ5MyAxLjM0MTggNS42MTAwNiAyLjAxMzY3QzUuMDI2OTMgMi42MjU5OCA0LjcyMTU4IDMuMzkwNjIgNC41MTA3OSA0LjM1NjQ1SDMuNzE5ODNaTTcuODIzMzYgNS45MTUwNEM4LjIyMTMgNS4zODk2NSA4LjQ1OTY3IDUuMjE0ODQgOC41ODI4IDUuMjE0ODRDOC43MDk4NiA1LjIxNDg0IDguODExMzIgNS4zMzg4NyA5LjAyOSA2LjAzNjEzTDkuNDAxMzMgNy4yMjY1NkM4LjY4MTMgOC4zMTgzNiA4LjE1NDMyIDguOTI2NzYgNy44MzQxOSA4LjkyNjc2QzcuNzI3ODEgOC45MjY3NiA3LjYyMDQ1IDguODkzNTUgNy41NDQ2IDguODE5MzRDNy40Njk3NCA4Ljc0NTEyIDcuMzg3IDguNjgzNTkgNy4zMDYyMyA4LjY4MzU5QzcuMDQyMjUgOC42ODM1OSA2LjcxNTIzIDkuMDAwOTggNi43MDkzMiA5LjM5NDUzQzYuNzAzNDEgOS43OTU5IDYuOTg3MDkgMTAuMDgzIDcuMzU5NDIgMTAuMDgzQzcuOTk4NjkgMTAuMDgzIDguNTM5NDYgOS40NjA5NCA5LjU4MzU2IDcuODExNTJMOS44ODg5MSA4LjgzMjAzQzEwLjE1MDkgOS43MDg5OCAxMC40NTgyIDEwLjA4MyAxMC44NDI0IDEwLjA4M0MxMS4zMTcyIDEwLjA4MyAxMS45NTU0IDkuNjgxNjQgMTIuNjUxOCA4LjU5NjY4TDEyLjM2MDMgOC4yNjY2QzExLjk0MTcgOC43NjY2IDExLjY2MzkgOS4wMDA5OCAxMS40OTk0IDkuMDAwOThDMTEuMzE2MiA5LjAwMDk4IDExLjE1NTYgOC43MjM2MyAxMC45NDM4IDguMDQxOTlMMTAuNDk3NiA2LjYwMzUyQzEwLjc2MTYgNi4yMTc3NyAxMS4wMjE3IDUuODkzNTUgMTEuMjUwMiA1LjYzNDc3QzExLjUyMiA1LjMyNzE1IDExLjczMTkgNS4xOTYyOSAxMS44NzQ3IDUuMTk2MjlDMTEuOTk0OCA1LjE5NjI5IDEyLjA5OTMgNS4yNDcwNyAxMi4xNjQzIDUuMzE4MzZDMTIuMjUgNS40MTIxMSAxMi4zMDEyIDUuNDU2MDUgMTIuNDAyNiA1LjQ1NjA1QzEyLjYzMjEgNS40NTYwNSAxMi45ODY3IDUuMTY2OTkgMTIuOTk5NiA0Ljc4NDE4QzEzLjAxMTQgNC40Mjg3MSAxMi43ODg4IDQuMTI1OTggMTIuNDAyNiA0LjEyNTk4QzExLjgxOTUgNC4xMjU5OCAxMS4zMDUzIDQuNjI0MDIgMTAuMzE1NCA2LjA4MzAxTDEwLjExMTUgNS40NTcwM0M5LjgyNTg3IDQuNTc4MTIgOS42MzY3NSA0LjEyNTk4IDkuMjM4ODEgNC4xMjU5OEM4Ljc3NTg2IDQuMTI1OTggOC4xMzk1NSA0LjY5MDQzIDcuNTE3MDIgNS41ODQ5Nkw3LjgyMzM2IDUuOTE1MDRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    maskSize: '14px 14px',
+    maskRepeat: 'no-repeat',
+    WebkitMaskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzE5ODMgNC4zNTY0NUwzLjMxODk0IDQuODA1NjZMMy4zNTgzNCA0Ljk3NTU5SDQuMzkwNjJDNC4xNzk4MyA2LjE4NDU3IDQuMDIyMjMgNy4yNzQ0MSAzLjcxOTgzIDguOTU0MUMzLjM1ODM0IDExLjA5NjcgMy4xNTA1IDExLjYyMyAzLjAyNzM4IDExLjgxNTRDMi45MTkwMyAxMi4wMDU5IDIuNzYzNCAxMi4xMDQ1IDIuNTUyNjEgMTIuMTA0NUMyLjMyMTEzIDEyLjEwNDUgMS45MDI1IDExLjkyMjkgMS42Nzc5MiAxMS43MTY4QzEuNTk3MTUgMTEuNjYyMSAxLjUwMTYxIDExLjY3NTggMS40MDAxNSAxMS43NDIyQzEuMTk3MjQgMTEuOTEyMSAxLjAwMDI0IDEyLjE3MzggMS4wMDAyNCAxMi40MDgyQzAuOTg4NDIgMTIuNzI0NiAxLjQxNDkzIDEzIDEuODIxNzMgMTNDMi4xODAyNyAxMyAyLjcwODI0IDEyLjc3NzMgMy4yNjM3OCAxMi4yNTM5QzQuMDIzMjIgMTEuNTQgNC41OTE1NiAxMC41NjA1IDUuMDY2MzMgOC40NDMzNkM1LjM3MTY5IDcuMDkxOCA1LjUxNTUgNi4yMTI4OSA1LjczMDIzIDQuOTc2NTZMNy4wMTI3IDQuODYxMzNMNy4yOTA0NyA0LjM1NjQ1SDUuODQ2NDZDNi4yMTk3NyAyLjAyODMyIDYuNTExMzMgMS42ODM1OSA2Ljg2OTg4IDEuNjgzNTlDNy4xMDgyNSAxLjY4MzU5IDcuMzg2MDIgMS44NjUyMyA3LjcwNTE2IDIuMjIyNjZDNy43OTk3MiAyLjM1MTU2IDcuOTQxNTYgMi4zMzc4OSA4LjA0OTkxIDIuMjVDOC4yMzIxNCAyLjE0MjU4IDguNDU2NzIgMS44NjcxOSA4LjQ3MTQ5IDEuNjE3MTlDOC40ODIzMyAxLjM0MTggOC4xNTEzNyAxIDcuNTgyMDMgMUM3LjA2NTg5IDEgNi4yNzQ5MyAxLjM0MTggNS42MTAwNiAyLjAxMzY3QzUuMDI2OTMgMi42MjU5OCA0LjcyMTU4IDMuMzkwNjIgNC41MTA3OSA0LjM1NjQ1SDMuNzE5ODNaTTcuODIzMzYgNS45MTUwNEM4LjIyMTMgNS4zODk2NSA4LjQ1OTY3IDUuMjE0ODQgOC41ODI4IDUuMjE0ODRDOC43MDk4NiA1LjIxNDg0IDguODExMzIgNS4zMzg4NyA5LjAyOSA2LjAzNjEzTDkuNDAxMzMgNy4yMjY1NkM4LjY4MTMgOC4zMTgzNiA4LjE1NDMyIDguOTI2NzYgNy44MzQxOSA4LjkyNjc2QzcuNzI3ODEgOC45MjY3NiA3LjYyMDQ1IDguODkzNTUgNy41NDQ2IDguODE5MzRDNy40Njk3NCA4Ljc0NTEyIDcuMzg3IDguNjgzNTkgNy4zMDYyMyA4LjY4MzU5QzcuMDQyMjUgOC42ODM1OSA2LjcxNTIzIDkuMDAwOTggNi43MDkzMiA5LjM5NDUzQzYuNzAzNDEgOS43OTU5IDYuOTg3MDkgMTAuMDgzIDcuMzU5NDIgMTAuMDgzQzcuOTk4NjkgMTAuMDgzIDguNTM5NDYgOS40NjA5NCA5LjU4MzU2IDcuODExNTJMOS44ODg5MSA4LjgzMjAzQzEwLjE1MDkgOS43MDg5OCAxMC40NTgyIDEwLjA4MyAxMC44NDI0IDEwLjA4M0MxMS4zMTcyIDEwLjA4MyAxMS45NTU0IDkuNjgxNjQgMTIuNjUxOCA4LjU5NjY4TDEyLjM2MDMgOC4yNjY2QzExLjk0MTcgOC43NjY2IDExLjY2MzkgOS4wMDA5OCAxMS40OTk0IDkuMDAwOThDMTEuMzE2MiA5LjAwMDk4IDExLjE1NTYgOC43MjM2MyAxMC45NDM4IDguMDQxOTlMMTAuNDk3NiA2LjYwMzUyQzEwLjc2MTYgNi4yMTc3NyAxMS4wMjE3IDUuODkzNTUgMTEuMjUwMiA1LjYzNDc3QzExLjUyMiA1LjMyNzE1IDExLjczMTkgNS4xOTYyOSAxMS44NzQ3IDUuMTk2MjlDMTEuOTk0OCA1LjE5NjI5IDEyLjA5OTMgNS4yNDcwNyAxMi4xNjQzIDUuMzE4MzZDMTIuMjUgNS40MTIxMSAxMi4zMDEyIDUuNDU2MDUgMTIuNDAyNiA1LjQ1NjA1QzEyLjYzMjEgNS40NTYwNSAxMi45ODY3IDUuMTY2OTkgMTIuOTk5NiA0Ljc4NDE4QzEzLjAxMTQgNC40Mjg3MSAxMi43ODg4IDQuMTI1OTggMTIuNDAyNiA0LjEyNTk4QzExLjgxOTUgNC4xMjU5OCAxMS4zMDUzIDQuNjI0MDIgMTAuMzE1NCA2LjA4MzAxTDEwLjExMTUgNS40NTcwM0M5LjgyNTg3IDQuNTc4MTIgOS42MzY3NSA0LjEyNTk4IDkuMjM4ODEgNC4xMjU5OEM4Ljc3NTg2IDQuMTI1OTggOC4xMzk1NSA0LjY5MDQzIDcuNTE3MDIgNS41ODQ5Nkw3LjgyMzM2IDUuOTE1MDRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    WebkitMaskSize: '14px 14px',
+    WebkitMaskRepeat: 'no-repeat',
     position: 'absolute',
     left: '0px',
     top: '2px',
@@ -153,7 +295,18 @@ export const customisedThemeCss = {
     verticalAlign: 'middle'
   },
   '.cm-completionIcon.cm-completionIcon-class::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTA2NjUgMTNMMS41IDEwVjRMNi45MDY2NSAxTDEyLjMxMzMgNFYxMEw2LjkwNjY1IDEzWk01LjE0ODk3IDUuNTA3MzJDNS4zNjUzNSA1LjI1NzQyIDUuNjI5MTQgNS4wNTkxOCA1Ljk0MDM0IDQuOTEyNTlDNi4yNTE2NSA0Ljc2NiA2LjU3Mzc1IDQuNjkyNzEgNi45MDY2NSA0LjY5MjcxQzcuMjM5NTQgNC42OTI3MSA3LjU2MTY0IDQuNzY2IDcuODcyOTYgNC45MTI1OUM4LjE4NDE1IDUuMDU5MTggOC40NDc5NCA1LjI1NzQyIDguNjY0MzIgNS41MDczMkwxMC45MjUzIDQuMjYyMjRMNi45MDY2NSAyLjAzMTc0TDIuODg3OTkgNC4yNjIyNEw1LjE0ODk3IDUuNTA3MzJaTTYuNDU4OTYgMTEuNzMzN1Y5LjI3ODJDNS45MjExNyA5LjE2Njg1IDUuNDc2ODEgOC44OTg0MSA1LjEyNTkgOC40NzI4OEM0Ljc3NDg3IDguMDQ3MjQgNC41OTkzNSA3LjU1NjI4IDQuNTk5MzUgN0M0LjU5OTM1IDYuODgzNDkgNC42MDU1NSA2Ljc2NDA1IDQuNjE3OTUgNi42NDE2OEM0LjYzMDIzIDYuNTE5NDMgNC42NjM3NSA2LjQwNTczIDQuNzE4NSA2LjMwMDU4TDIuMzk1MzcgNS4wMDQwMlY5LjQ3NTUyTDYuNDU4OTYgMTEuNzMzN1pNNi45MDY2NSA4LjQxMTkzQzcuMzA0MDUgOC40MTE5MyA3LjYzODcyIDguMjc1OTYgNy45MTA2NiA4LjAwNDAyQzguMTgyNiA3LjczMjA4IDguMzE4NTcgNy4zOTc0MSA4LjMxODU3IDdDOC4zMTg1NyA2LjYwMjU5IDguMTgyNiA2LjI2NzkyIDcuOTEwNjYgNS45OTU5OEM3LjYzODcyIDUuNzI0MDQgNy4zMDQwNSA1LjU4ODA3IDYuOTA2NjUgNS41ODgwN0M2LjUwOTI0IDUuNTg4MDcgNi4xNzQ1NyA1LjcyNDA0IDUuOTAyNjMgNS45OTU5OEM1LjYzMDY5IDYuMjY3OTIgNS40OTQ3MiA2LjYwMjU5IDUuNDk0NzIgN0M1LjQ5NDcyIDcuMzk3NDEgNS42MzA2OSA3LjczMjA4IDUuOTAyNjMgOC4wMDQwMkM2LjE3NDU3IDguMjc1OTYgNi41MDkyNCA4LjQxMTkzIDYuOTA2NjUgOC40MTE5M1pNNy4zNTQzMyAxMS43MzM3TDExLjQxNzkgOS40NzU1MlY1LjAwNDAyTDkuMDk0NzkgNi4zMDA1OEM5LjEzODA3IDYuNDA1NzMgOS4xNjg3MSA2LjUxOTQzIDkuMTg2NzQgNi42NDE2OEM5LjIwNDg3IDYuNzY0MDUgOS4yMTM5NCA2Ljg4MzQ5IDkuMjEzOTQgN0M5LjIxMzk0IDcuNTU2MjggOS4wMzg0MyA4LjA0NzI0IDguNjg3NCA4LjQ3Mjg4QzguMzM2NDggOC44OTg0MSA3Ljg5MjEzIDkuMTY2ODUgNy4zNTQzMyA5LjI3ODJWMTEuNzMzN1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo= ")',
+    content: '""',
+    display: 'block',
+    width: '14px',
+    height: '14px',
+    // Masked rather than embedded, so the glyph takes a themed colour;
+    backgroundColor: 'var(--nile-colors-dark-900, var(--ng-colors-fg-primary-900))',
+    maskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTA2NjUgMTNMMS41IDEwVjRMNi45MDY2NSAxTDEyLjMxMzMgNFYxMEw2LjkwNjY1IDEzWk01LjE0ODk3IDUuNTA3MzJDNS4zNjUzNSA1LjI1NzQyIDUuNjI5MTQgNS4wNTkxOCA1Ljk0MDM0IDQuOTEyNTlDNi4yNTE2NSA0Ljc2NiA2LjU3Mzc1IDQuNjkyNzEgNi45MDY2NSA0LjY5MjcxQzcuMjM5NTQgNC42OTI3MSA3LjU2MTY0IDQuNzY2IDcuODcyOTYgNC45MTI1OUM4LjE4NDE1IDUuMDU5MTggOC40NDc5NCA1LjI1NzQyIDguNjY0MzIgNS41MDczMkwxMC45MjUzIDQuMjYyMjRMNi45MDY2NSAyLjAzMTc0TDIuODg3OTkgNC4yNjIyNEw1LjE0ODk3IDUuNTA3MzJaTTYuNDU4OTYgMTEuNzMzN1Y5LjI3ODJDNS45MjExNyA5LjE2Njg1IDUuNDc2ODEgOC44OTg0MSA1LjEyNTkgOC40NzI4OEM0Ljc3NDg3IDguMDQ3MjQgNC41OTkzNSA3LjU1NjI4IDQuNTk5MzUgN0M0LjU5OTM1IDYuODgzNDkgNC42MDU1NSA2Ljc2NDA1IDQuNjE3OTUgNi42NDE2OEM0LjYzMDIzIDYuNTE5NDMgNC42NjM3NSA2LjQwNTczIDQuNzE4NSA2LjMwMDU4TDIuMzk1MzcgNS4wMDQwMlY5LjQ3NTUyTDYuNDU4OTYgMTEuNzMzN1pNNi45MDY2NSA4LjQxMTkzQzcuMzA0MDUgOC40MTE5MyA3LjYzODcyIDguMjc1OTYgNy45MTA2NiA4LjAwNDAyQzguMTgyNiA3LjczMjA4IDguMzE4NTcgNy4zOTc0MSA4LjMxODU3IDdDOC4zMTg1NyA2LjYwMjU5IDguMTgyNiA2LjI2NzkyIDcuOTEwNjYgNS45OTU5OEM3LjYzODcyIDUuNzI0MDQgNy4zMDQwNSA1LjU4ODA3IDYuOTA2NjUgNS41ODgwN0M2LjUwOTI0IDUuNTg4MDcgNi4xNzQ1NyA1LjcyNDA0IDUuOTAyNjMgNS45OTU5OEM1LjYzMDY5IDYuMjY3OTIgNS40OTQ3MiA2LjYwMjU5IDUuNDk0NzIgN0M1LjQ5NDcyIDcuMzk3NDEgNS42MzA2OSA3LjczMjA4IDUuOTAyNjMgOC4wMDQwMkM2LjE3NDU3IDguMjc1OTYgNi41MDkyNCA4LjQxMTkzIDYuOTA2NjUgOC40MTE5M1pNNy4zNTQzMyAxMS43MzM3TDExLjQxNzkgOS40NzU1MlY1LjAwNDAyTDkuMDk0NzkgNi4zMDA1OEM5LjEzODA3IDYuNDA1NzMgOS4xNjg3MSA2LjUxOTQzIDkuMTg2NzQgNi42NDE2OEM5LjIwNDg3IDYuNzY0MDUgOS4yMTM5NCA2Ljg4MzQ5IDkuMjEzOTQgN0M5LjIxMzk0IDcuNTU2MjggOS4wMzg0MyA4LjA0NzI0IDguNjg3NCA4LjQ3Mjg4QzguMzM2NDggOC44OTg0MSA3Ljg5MjEzIDkuMTY2ODUgNy4zNTQzMyA5LjI3ODJWMTEuNzMzN1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=")',
+    maskSize: '14px 14px',
+    maskRepeat: 'no-repeat',
+    WebkitMaskImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTA2NjUgMTNMMS41IDEwVjRMNi45MDY2NSAxTDEyLjMxMzMgNFYxMEw2LjkwNjY1IDEzWk01LjE0ODk3IDUuNTA3MzJDNS4zNjUzNSA1LjI1NzQyIDUuNjI5MTQgNS4wNTkxOCA1Ljk0MDM0IDQuOTEyNTlDNi4yNTE2NSA0Ljc2NiA2LjU3Mzc1IDQuNjkyNzEgNi45MDY2NSA0LjY5MjcxQzcuMjM5NTQgNC42OTI3MSA3LjU2MTY0IDQuNzY2IDcuODcyOTYgNC45MTI1OUM4LjE4NDE1IDUuMDU5MTggOC40NDc5NCA1LjI1NzQyIDguNjY0MzIgNS41MDczMkwxMC45MjUzIDQuMjYyMjRMNi45MDY2NSAyLjAzMTc0TDIuODg3OTkgNC4yNjIyNEw1LjE0ODk3IDUuNTA3MzJaTTYuNDU4OTYgMTEuNzMzN1Y5LjI3ODJDNS45MjExNyA5LjE2Njg1IDUuNDc2ODEgOC44OTg0MSA1LjEyNTkgOC40NzI4OEM0Ljc3NDg3IDguMDQ3MjQgNC41OTkzNSA3LjU1NjI4IDQuNTk5MzUgN0M0LjU5OTM1IDYuODgzNDkgNC42MDU1NSA2Ljc2NDA1IDQuNjE3OTUgNi42NDE2OEM0LjYzMDIzIDYuNTE5NDMgNC42NjM3NSA2LjQwNTczIDQuNzE4NSA2LjMwMDU4TDIuMzk1MzcgNS4wMDQwMlY5LjQ3NTUyTDYuNDU4OTYgMTEuNzMzN1pNNi45MDY2NSA4LjQxMTkzQzcuMzA0MDUgOC40MTE5MyA3LjYzODcyIDguMjc1OTYgNy45MTA2NiA4LjAwNDAyQzguMTgyNiA3LjczMjA4IDguMzE4NTcgNy4zOTc0MSA4LjMxODU3IDdDOC4zMTg1NyA2LjYwMjU5IDguMTgyNiA2LjI2NzkyIDcuOTEwNjYgNS45OTU5OEM3LjYzODcyIDUuNzI0MDQgNy4zMDQwNSA1LjU4ODA3IDYuOTA2NjUgNS41ODgwN0M2LjUwOTI0IDUuNTg4MDcgNi4xNzQ1NyA1LjcyNDA0IDUuOTAyNjMgNS45OTU5OEM1LjYzMDY5IDYuMjY3OTIgNS40OTQ3MiA2LjYwMjU5IDUuNDk0NzIgN0M1LjQ5NDcyIDcuMzk3NDEgNS42MzA2OSA3LjczMjA4IDUuOTAyNjMgOC4wMDQwMkM2LjE3NDU3IDguMjc1OTYgNi41MDkyNCA4LjQxMTkzIDYuOTA2NjUgOC40MTE5M1pNNy4zNTQzMyAxMS43MzM3TDExLjQxNzkgOS40NzU1MlY1LjAwNDAyTDkuMDk0NzkgNi4zMDA1OEM5LjEzODA3IDYuNDA1NzMgOS4xNjg3MSA2LjUxOTQzIDkuMTg2NzQgNi42NDE2OEM5LjIwNDg3IDYuNzY0MDUgOS4yMTM5NCA2Ljg4MzQ5IDkuMjEzOTQgN0M5LjIxMzk0IDcuNTU2MjggOS4wMzg0MyA4LjA0NzI0IDguNjg3NCA4LjQ3Mjg4QzguMzM2NDggOC44OTg0MSA3Ljg5MjEzIDkuMTY2ODUgNy4zNTQzMyA5LjI3ODJWMTEuNzMzN1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=")',
+    WebkitMaskSize: '14px 14px',
+    WebkitMaskRepeat: 'no-repeat',
     position: 'absolute',
     left: '0px',
     top: '2px',

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-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));
@@ -57,6 +57,56 @@ export const styles = css`
     z-index: 700;
   }
 
+  .drawer--push {
+    position: relative;
+    z-index: initial;
+  }
+  :host([push]) {
+    display: block;
+    flex: 0 0 auto;
+    overflow: hidden;
+    transition: inline-size var(--push-duration, 250ms) var(--push-easing, ease),
+      block-size var(--push-duration, 250ms) var(--push-easing, ease);
+  }
+
+  :host([push][placement='start']),
+  :host([push][placement='end']) {
+    inline-size: 0;
+    max-inline-size: 100%;
+    align-self: stretch;
+  }
+
+  :host([push][placement='top']),
+  :host([push][placement='bottom']) {
+    block-size: 0;
+    max-block-size: 100%;
+  }
+
+  :host([push][open][placement='start']),
+  :host([push][open][placement='end']) {
+    inline-size: var(--size);
+  }
+
+  :host([push][open][placement='top']),
+  :host([push][open][placement='bottom']) {
+    block-size: var(--size);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([push]) {
+      transition: none;
+    }
+  }
+
+  .drawer--push .drawer__overlay {
+    display: none;
+  }
+
+  .drawer--push .drawer__panel {
+    max-inline-size: none;
+    max-block-size: none;
+  }
+
   .drawer__panel {
     position: absolute;
     display: flex;
@@ -65,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;
@@ -177,6 +228,10 @@ export const styles = css`
     display: none;
   }
 
+  :host([nooverlay]) .drawer__overlay {
+    background-color: transparent;
+  }
+
   .drawer__close:hover {
     cursor:pointer;
   }