@aquera/nile-elements 1.9.11 → 2.0.1

package/dist/src/nile-popup/nile-popup.css.js

@@ -10,7 +10,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));
@@ -52,7 +53,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/dist/src/nile-popup/nile-popup.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-popup.css.js","sourceRoot":"","sources":["../../../src/nile-popup/nile-popup.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Popup CSS\n */\nexport const styles = css`\n  :host {\n    --arrow-color: var(--nile-colors-dark-200);\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    --arrow-size: 6px;\n\n    /*\n     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant\n     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.\n     */\n    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);\n    --arrow-padding-offset: calc(\n      var(--arrow-size-diagonal) - var(--arrow-size)\n    );\n\n    display: contents;\n  }\n\n  .popup {\n    position: absolute;\n    isolation: isolate;\n    max-width: var(--auto-size-available-width, none);\n    max-height: var(--auto-size-available-height, none);\n    z-index: 800;\n  }\n\n  .popup--fixed {\n    position: fixed;\n  }\n\n  .popup:not(.popup--active) {\n    display: none;\n  }\n\n  .popup__arrow {\n    position: absolute;\n    width: calc(var(--arrow-size-diagonal) * 2);\n    height: calc(var(--arrow-size-diagonal) * 2);\n    rotate: 45deg;\n    background: var(--arrow-color);\n    z-index: -1;\n    /* Added border and box-shadow to arrow */\n    border: solid 1px var(--nile-colors-dark-200);\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-popup.css.js","sourceRoot":"","sources":["../../../src/nile-popup/nile-popup.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Popup CSS\n */\nexport const styles = css`\n  :host {\n    --arrow-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary));\n    --arrow-border-color: var(--nile-colors-dark-200, var(--ng-colors-border-primary));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    --arrow-size: 6px;\n\n    /*\n     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant\n     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.\n     */\n    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);\n    --arrow-padding-offset: calc(\n      var(--arrow-size-diagonal) - var(--arrow-size)\n    );\n\n    display: contents;\n  }\n\n  .popup {\n    position: absolute;\n    isolation: isolate;\n    max-width: var(--auto-size-available-width, none);\n    max-height: var(--auto-size-available-height, none);\n    z-index: 800;\n  }\n\n  .popup--fixed {\n    position: fixed;\n  }\n\n  .popup:not(.popup--active) {\n    display: none;\n  }\n\n  .popup__arrow {\n    position: absolute;\n    width: calc(var(--arrow-size-diagonal) * 2);\n    height: calc(var(--arrow-size-diagonal) * 2);\n    rotate: 45deg;\n    background: var(--arrow-color);\n    z-index: -1;\n    /* Added border and box-shadow to arrow */\n    border: solid 1px var(--arrow-border-color);\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.css.js

@@ -9,10 +9,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 {
@@ -29,7 +29,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/dist/src/nile-side-bar-footer/nile-side-bar-footer.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarFooter CSS\n */\nexport const styles = css`\n :host {\n  display: block;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n\tpadding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n\tpadding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  padding-top: var(--nile-spacing-xs);\n gap: var(--nile-spacing-md, var(--ng-spacing-xl));\n  bottom: 0;\n  background: var(--nile-colors-neutral-100);\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-side-bar-footer.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarFooter CSS\n */\nexport const styles = css`\n :host {\n  display: block;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n\tpadding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n\tpadding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n gap: var(--nile-spacing-md, var(--ng-spacing-xl));\n  bottom: 0;\n  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.js

@@ -14,7 +14,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));
@@ -26,7 +26,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 */
@@ -49,13 +52,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));
 
@@ -71,7 +77,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/dist/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .footer-item {\n    display: flex;\n    align-items: center;\n\t  justify-content: flex-start;\n    padding-top: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-lg));\n    transition: background 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .footer-item:hover {\n    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);\n  }\n\n  /* left: icon */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    margin-right: 0.5rem;\n  }\n\n  /* middle: text */\n  ::slotted([slot='text']) {\n    flex-grow: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* right: action */\n  ::slotted([slot='action']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    color: var(--nile-side-bar-footer-icon-color, #6b7280);\n    margin-left: auto;\n  }\n\n \n  :host([type='support']) .footer-item {\n    background: var(--nile-colors-neutral-400);\n    height: var(--nile-height-38px, var(--ng-spacing-5xl));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n\n  }\n \n  :host(:hover[type='support']) .footer-item {\n  background: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n  height: var(--nile-height-38px, var(--ng-spacing-5xl));\n  }\n\n :host([type='avatar']) .footer-item {\nborder: 1px solid var(--ng-colors-border-secondary);\nmin-height: var(--nile-radius-4xl, var(--ng-spacing-7xl));\n}\n:host([type='avatar'][active]) .footer-item {\nbackground: var(--nile-colors-neutral-400);\n}\n\n\n\n:host([collapsed][type='avatar']) .footer-item {\nborder: none;\n}\n  :host([collapsed][type='avatar']) .footer-item {\n  padding: 4px;\n \n}\n:host([collapsed]) .footer-item{\n  height: 38px;\n  width: 38px;\n}\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-side-bar-footer-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .footer-item {\n    display: flex;\n    align-items: center;\n\t  justify-content: flex-start;\n    padding-top: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-lg));\n    transition: background 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .footer-item:hover {\n    background: var(\n      --nile-side-bar-footer-hover-bg,\n      var(--ng-colors-bg-primary-hover)\n    );\n  }\n\n  /* left: icon */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    margin-right: 0.5rem;\n  }\n\n  /* middle: text */\n  ::slotted([slot='text']) {\n    flex-grow: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* right: action */\n  ::slotted([slot='action']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    color: var(\n      --nile-side-bar-footer-icon-color,\n      var(--ng-colors-fg-quaternary-400)\n    );\n    margin-left: auto;\n  }\n\n \n  :host([type='support']) .footer-item {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary));\n    height: var(--nile-height-38px, var(--ng-spacing-5xl));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n\n  }\n \n  :host(:hover[type='support']) .footer-item {\n  background: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n  height: var(--nile-height-38px, var(--ng-spacing-5xl));\n  }\n\n :host([type='avatar']) .footer-item {\nborder: 1px solid var(--ng-colors-border-secondary);\nmin-height: var(--nile-radius-4xl, var(--ng-spacing-7xl));\n}\n:host([type='avatar'][active]) .footer-item {\nbackground: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n}\n\n\n\n:host([collapsed][type='avatar']) .footer-item {\nborder: none;\n}\n  :host([collapsed][type='avatar']) .footer-item {\n  padding: 4px;\n \n}\n:host([collapsed]) .footer-item{\n  height: 38px;\n  width: 38px;\n}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-tooltip/nile-tooltip.css.js

@@ -22,6 +22,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) {
@@ -29,6 +30,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;
   }
@@ -55,7 +61,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));

package/dist/src/nile-tooltip/nile-tooltip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: var(--nile-height-6px, var(--ng-height-5px));\n    --arrow-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));\n  }\n\n  .tooltip::part(popup) {\n    pointer-events: none;\n    z-index: 1000;\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    background-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));\n    font-size: var(--nile-tooltip-font-size-sm, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-tooltip-font-weight-sm, var(--ng-font-weight-semibold));\n    line-height: var(--nile-tooltip-line-height-sm, var(--ng-line-height-text-xs));\n    padding: var(--nile-tooltip-padding-y, var(--ng-spacing-md)) var(--nile-tooltip-padding-x, var(--ng-spacing-md));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    pointer-events: none;\n    word-break: break-word;\n    font-family: var(--nile-font-family-inherit, var(--ng-font-family-body));\n    box-shadow:var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .tooltip__body--large {\n    font-size: var(--nile-tooltip-font-size-lg);\n    line-height: var(--nile-tooltip-line-height-lg);\n    font-weight: var(--nile-tooltip-font-weight-lg);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Tooltip CSS\n */\nexport const styles = css`\n  :host {\n    --max-width: 20rem;\n    --hide-delay: 0ms;\n    --show-delay: 150ms;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    display: contents;\n  }\n\n  .tooltip {\n    --arrow-size: var(--nile-height-6px, var(--ng-height-5px));\n    --arrow-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));\n    --arrow-border-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));\n  }\n\n  .tooltip::part(popup) {\n    pointer-events: none;\n    z-index: 1000;\n  }\n\n  .tooltip::part(arrow) {\n    z-index: 1;\n    box-shadow: none;\n  }\n\n  .tooltip[placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .tooltip[placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  .tooltip[placement^='left']::part(popup) {\n    transform-origin: right;\n  }\n\n  .tooltip[placement^='right']::part(popup) {\n    transform-origin: left;\n  }\n\n  .tooltip__body {\n    display: block;\n    width: max-content;\n    max-width: var(--max-width);\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    background-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));\n    font-size: var(--nile-tooltip-font-size-sm, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-tooltip-font-weight-sm, var(--ng-font-weight-semibold));\n    line-height: var(--nile-tooltip-line-height-sm, var(--ng-line-height-text-xs));\n    padding: var(--nile-tooltip-padding-y, var(--ng-spacing-md)) var(--nile-tooltip-padding-x, var(--ng-spacing-md));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-primary-on-brand));\n    pointer-events: none;\n    word-break: break-word;\n    font-family: var(--nile-font-family-inherit, var(--ng-font-family-body));\n    box-shadow:var(--nile-box-shadow-none, var(--ng-shadow-lg));\n  }\n\n  .tooltip__body--large {\n    font-size: var(--nile-tooltip-font-size-lg);\n    line-height: var(--nile-tooltip-line-height-lg);\n    font-weight: var(--nile-tooltip-font-weight-lg);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -18,7 +18,7 @@ export const styles = css `
     border: 1px solid
       var(
         --nile-wysiwyg-border-color,
-        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd))
+        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral))
       );
     border-radius: var(
       --nile-wysiwyg-radius,
@@ -26,7 +26,7 @@ export const styles = css `
     );
     background: var(
       --nile-wysiwyg-bg,
-      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
     );
     box-sizing: border-box;
   }
@@ -38,7 +38,7 @@ export const styles = css `
     z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);
     background: var(
       --nile-wysiwyg-bg,
-      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
     );
   }
 
@@ -53,18 +53,18 @@ export const styles = css `
   }
 
   :host([disabled]) .nile-wysiwyg {
-    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled, #98a2b3));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
     background: var(
       --nile-wysiwyg-disabled-bg,
-      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7))
+      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle))
     );
     cursor: not-allowed;
     pointer-events: none;
   }
 
   :host([disabled]) .ProseMirror {
-    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled, #98a2b3));
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
   .nile-wysiwyg__surface {
@@ -92,7 +92,7 @@ export const styles = css `
     word-break: break-word;
     color: var(
       --nile-wysiwyg-color,
-      var(--nile-colors-dark-900, var(--ng-colors-text-primary, #101828))
+      var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))
     );
     box-sizing: border-box;
     border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))
@@ -117,7 +117,7 @@ export const styles = css `
 
   .ProseMirror-selectednode {
     outline: 2px solid
-      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb)));
+      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600)));
   }
 
   /* Gap cursor (inlined from prosemirror-gapcursor/style) */
@@ -157,7 +157,7 @@ export const styles = css `
     opacity: 0.7;
     color: var(
       --nile-wysiwyg-placeholder-color,
-      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3))
+      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary))
     );
   }
 
@@ -215,9 +215,12 @@ export const styles = css `
     border-left: 3px solid
       var(
         --nile-wysiwyg-blockquote-border,
-        var(--nile-colors-neutral-300, #d0d5dd)
+        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))
       );
-    color: var(--nile-wysiwyg-blockquote-color, var(--nile-colors-neutral-600, #475467));
+    color: var(
+      --nile-wysiwyg-blockquote-color,
+      var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600))
+    );
   }
 
   .ProseMirror ul,
@@ -228,7 +231,8 @@ export const styles = css `
 
   .ProseMirror hr {
     border: none;
-    border-top: 1px solid var(--nile-wysiwyg-border-color, #d0d5dd);
+    border-top: 1px solid
+      var(--nile-wysiwyg-border-color, var(--ng-colors-border-neutral));
     margin: 1em 0;
   }
 
@@ -236,7 +240,7 @@ export const styles = css `
   .ProseMirror a {
     color: var(
       --nile-wysiwyg-link-color,
-      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600, #2563eb))
+      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600))
     );
     text-decoration: none;
     cursor: pointer;
@@ -245,7 +249,10 @@ export const styles = css `
   .ProseMirror code.nile-wysiwyg__inline-code {
     font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
     font-size: 0.9em;
-    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));
+    background: var(
+      --nile-wysiwyg-code-bg,
+      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))
+    );
     border-radius: 4px;
     padding: 0.1em 0.35em;
   }
@@ -254,8 +261,11 @@ export const styles = css `
   .ProseMirror pre.nile-wysiwyg__code-block {
     font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
     font-size: 0.9em;
-    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));
-    border: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+    background: var(
+      --nile-wysiwyg-code-bg,
+      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))
+    );
+    border: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
     border-radius: 6px;
     padding: 12px 14px;
     margin: 0.5em 0;
@@ -280,13 +290,20 @@ export const styles = css `
     vertical-align: top;
     box-sizing: border-box;
     position: relative;
-    border: 1px solid var(--nile-wysiwyg-table-border, var(--nile-colors-neutral-300, #d0d5dd));
+    border: 1px solid
+      var(
+        --nile-wysiwyg-table-border,
+        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))
+      );
     padding: 6px 8px;
     min-width: 1em;
   }
 
   .ProseMirror th {
-    background: var(--nile-wysiwyg-table-header-bg, var(--nile-colors-neutral-50, #f9fafb));
+    background: var(
+      --nile-wysiwyg-table-header-bg,
+      var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary))
+    );
     font-weight: 600;
     text-align: left;
   }
@@ -305,7 +322,7 @@ export const styles = css `
     bottom: 0;
     width: 4px;
     z-index: 20;
-    background-color: var(--nile-colors-primary-300, #b692f6);
+    background-color: var(--nile-colors-primary-300, var(--ng-componentcolors-utility-purple-300));
     pointer-events: none;
   }
 
@@ -318,7 +335,7 @@ export const styles = css `
      guides while editing so the structure stays visible. --- */
   .ProseMirror table[data-layout] td,
   .ProseMirror table[data-layout] th {
-    border: 1px dashed var(--nile-colors-neutral-300, #e4e7ec);
+    border: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
     background: transparent;
     font-weight: inherit;
     text-align: inherit;
@@ -337,7 +354,7 @@ export const styles = css `
     font-size: 12px;
     line-height: 1;
     padding: 0 1px;
-    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   .ProseMirror .selectedCell:after {
@@ -372,8 +389,8 @@ export const styles = css `
     position: absolute;
     width: 9px;
     height: 9px;
-    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
-    border: 1.5px solid #ffffff;
+    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
+    border: 1.5px solid var(--ng-colors-bg-primary);
     border-radius: 2px;
     z-index: 2;
   }
@@ -383,7 +400,7 @@ export const styles = css `
   }
 
   .ProseMirror .nile-wysiwyg__image-resizer--selected img {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
@@ -418,7 +435,7 @@ export const styles = css `
 
   .ProseMirror .nile-wysiwyg__figcaption {
     font-size: 0.85em;
-    color: var(--nile-colors-neutral-500, #667085);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
     text-align: center;
     padding: 4px 8px;
     line-height: 1.4;
@@ -429,7 +446,7 @@ export const styles = css `
     float: left;
     width: 100%;
     pointer-events: none;
-    color: var(--nile-colors-neutral-400, #98a2b3);
+    color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));
     margin-bottom: -1.4em;
   }
 
@@ -448,7 +465,7 @@ export const styles = css `
     max-width: 100%;
     margin: 0.75em 0;
     border-radius: 8px;
-    background: var(--nile-colors-neutral-100, #f2f4f7);
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
   }
 
   .ProseMirror div.nile-wysiwyg__embed iframe {
@@ -468,7 +485,7 @@ export const styles = css `
   }
 
   .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {
@@ -480,10 +497,13 @@ export const styles = css `
     pointer-events: none !important;
   }
 
-  /* --- Code highlighting (compact light theme for hljs tokens) --- */
+  /* --- Code highlighting (hljs tokens) ---
+     Each hue routes through an --ng-componentcolors-utility-* token, which the
+     token layer remaps to its lighter 400 step in the dark theme. Hardcoding the
+     one-light palette here left syntax unreadable on the dark code surface. --- */
   .ProseMirror .hljs-comment,
   .ProseMirror .hljs-quote {
-    color: #a0a1a7;
+    color: var(--ng-componentcolors-utility-gray-500);
     font-style: italic;
   }
 
@@ -491,7 +511,7 @@ export const styles = css `
   .ProseMirror .hljs-selector-tag,
   .ProseMirror .hljs-formula,
   .ProseMirror .hljs-doctag {
-    color: #a626a4;
+    color: var(--ng-componentcolors-utility-purple-600);
   }
 
   .ProseMirror .hljs-section,
@@ -501,13 +521,13 @@ export const styles = css `
   .ProseMirror .hljs-deletion,
   .ProseMirror .hljs-subst,
   .ProseMirror .hljs-tag {
-    color: #e45649;
+    color: var(--ng-componentcolors-utility-error-600);
   }
 
   .ProseMirror .hljs-literal,
   .ProseMirror .hljs-built_in,
   .ProseMirror .hljs-bullet {
-    color: #0184bb;
+    color: var(--ng-componentcolors-utility-blue-600);
   }
 
   .ProseMirror .hljs-string,
@@ -515,7 +535,7 @@ export const styles = css `
   .ProseMirror .hljs-addition,
   .ProseMirror .hljs-attribute,
   .ProseMirror .hljs-meta .hljs-string {
-    color: #50a14f;
+    color: var(--ng-componentcolors-utility-green-600);
   }
 
   .ProseMirror .hljs-attr,
@@ -525,7 +545,7 @@ export const styles = css `
   .ProseMirror .hljs-selector-attr,
   .ProseMirror .hljs-selector-pseudo,
   .ProseMirror .hljs-number {
-    color: #986801;
+    color: var(--ng-componentcolors-utility-orange-600);
   }
 
   .ProseMirror .hljs-symbol,
@@ -535,7 +555,7 @@ export const styles = css `
   .ProseMirror .hljs-title,
   .ProseMirror .hljs-title.class_,
   .ProseMirror .hljs-title.function_ {
-    color: #4078f2;
+    color: var(--ng-componentcolors-utility-indigo-600);
   }
 
   .ProseMirror .hljs-emphasis {
@@ -565,7 +585,10 @@ export const styles = css `
     height: 14px;
     flex: none;
     cursor: pointer;
-    accent-color: var(--nile-colors-primary-600, #2563eb);
+    accent-color: var(
+      --nile-colors-primary-600,
+      var(--ng-componentcolors-utility-blue-600)
+    );
   }
 
   .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {
@@ -588,7 +611,7 @@ export const styles = css `
   }
 
   .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {
-    color: var(--nile-colors-neutral-500, #98a2b3);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
     text-decoration: line-through;
   }
 
@@ -597,12 +620,12 @@ export const styles = css `
     padding: 4px 12px 6px;
     text-align: right;
     font-size: 12px;
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3));
-    border-top: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
   }
 
   .nile-wysiwyg__counter.over {
-    color: var(--nile-colors-error-600, #d92d20);
+    color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));
     font-weight: 600;
   }
 
@@ -626,7 +649,7 @@ export const styles = css `
     z-index: 12;
     background: var(
       --nile-wysiwyg-bg,
-      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
     );
   }
 
@@ -635,14 +658,14 @@ export const styles = css `
     display: inline-block;
     padding: 0 4px;
     border-radius: 4px;
-    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff)));
-    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8)));
+    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));
+    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));
     font-weight: 500;
     white-space: nowrap;
   }
 
   .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   /* --- Merge fields --- */
@@ -650,16 +673,22 @@ export const styles = css `
     display: inline-block;
     padding: 0 4px;
     border-radius: 4px;
-    background: var(--nile-wysiwyg-merge-bg, var(--nile-colors-neutral-100, #f2f4f7));
-    color: var(--nile-wysiwyg-merge-color, var(--nile-colors-neutral-700, #344054));
-    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);
+    background: var(
+      --nile-wysiwyg-merge-bg,
+      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))
+    );
+    color: var(
+      --nile-wysiwyg-merge-color,
+      var(--nile-colors-neutral-700, var(--ng-colors-text-primary-900))
+    );
+    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
     font-size: 0.9em;
     white-space: nowrap;
   }
 
   .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   /* --- Math --- */
@@ -676,7 +705,7 @@ export const styles = css `
   }
 
   .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
     border-radius: 3px;
   }
 
@@ -686,7 +715,7 @@ export const styles = css `
   }
 
   .ProseMirror .nile-wysiwyg__suggestion {
-    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
     border-radius: 3px;
   }
 
@@ -704,10 +733,10 @@ export const styles = css `
   .nile-wysiwyg__upload-placeholder {
     display: inline-block;
     padding: 6px 12px;
-    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);
+    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     border-radius: 6px;
-    background: var(--nile-colors-neutral-50, #f9fafb);
-    color: var(--nile-colors-neutral-600, #475467);
+    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
     font-size: 0.85em;
   }
 
@@ -747,7 +776,11 @@ export const styles = css `
   .nile-wysiwyg--show-blocks .ProseMirror ol,
   .nile-wysiwyg--show-blocks .ProseMirror li,
   .nile-wysiwyg--show-blocks .ProseMirror table {
-    outline: 1px dashed var(--nile-wysiwyg-block-outline, var(--nile-colors-neutral-400, #d0d5dd));
+    outline: 1px dashed
+      var(
+        --nile-wysiwyg-block-outline,
+        var(--nile-colors-neutral-400, var(--ng-colors-border-primary))
+      );
     outline-offset: -1px;
   }
 
@@ -782,8 +815,8 @@ export const styles = css `
     font-style: normal;
     line-height: 14px;
     letter-spacing: 0.5px;
-    color: var(--nile-colors-neutral-500, #667085);
-    background: var(--nile-colors-neutral-100, #f2f4f7);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
     border-radius: 0 0 4px 0;
     pointer-events: none;
   }