@aquera/nile-elements 1.9.0 → 1.9.2

package/package.json

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

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

@@ -99,6 +99,7 @@ export const styles = css`
     font-style: normal;
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
     line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     text-align: center;
     width: 100%;
     height: var(--nile-width-32px, var(--ng-width-10));
@@ -432,6 +433,12 @@ export const styles = css`
     width: 125px;
   }
 
+  .time-input::part(input),
+  .manual-input::part(input) {
+    padding: var(--nile-spacing-lg, var(--ng-spacing-md))
+      var(--nile-spacing-lg, var(--ng-spacing-md));
+  }
+
   /* New Styles */
 
   nile-dropdown[open] > span[slot='trigger'] .calendar-header__caret {
@@ -453,6 +460,7 @@ export const styles = css`
     display: flex;
     align-items: center;
     gap: 6px;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     font-family: var(
       --nile-font-family-serif-colfax-medium,
       var(--ng-font-family-body)

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

@@ -81,7 +81,6 @@ export const styles = css`
 
  
 .card:active {
-  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
   background: var(--ng-colors-bg-brand-primary);
   box-shadow: var(--ng-shadow-xs);
 }  
@@ -92,13 +91,38 @@ export const styles = css`
   box-shadow: var(--ng-shadow-xs);
 }
 
+/* on a skipOn element, hover appearance - grey */
+.card--skip-active:active {
+  background-color: var(--ng-colors-bg-primary-hover);
+  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));
+  outline: solid 1px var(--border-color);
+}
+
+/* skipOn element  */
+.card--skip-active:active .card__footer {
+  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+  box-shadow: var(--ng-shadow-sm);
+}
+
+/* On active card, the skipOn elements will show active card color(blue) on card body*/
+.card--active.card--skip-active:active {
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+  outline: solid var(--nile-outline-0-5px) var(--border-color); 
+}
+
+/* On active card, the skipOn elements will show active card color(blue) card footer*/
+.card--active.card--skip-active:active .card__footer {
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}
+
 
 .card:not(.card--has-footer) .card__footer {
     display: none;
   }
 
 .card--active {
-  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
   background: var(--ng-colors-bg-brand-primary);
   box-shadow: var(--ng-shadow-xs);
 }
@@ -130,6 +154,41 @@ export const styles = css`
   pointer-events: none;
 }
 
+
+.card--container {
+  display: flex;
+  flex-direction: column;
+  justify-items: stretch;
+  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  outline: solid var(--nile-outline-0-5px, var(--ng-outline-0-5px)) var(--nile-card-color-border, var(--ng-colors-border-secondary));
+  border: solid  var(--nile-outline-1px, var(--ng-outline-1px)) var(--nile-card-color-border, var(--ng-colors-border-secondary));
+  border-radius: var(--border-radius);
+  min-width: 273px;
+  max-width: 350px;
+  overflow: hidden;
+  box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));
+}
+
+.container--hover {
+  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));
+  outline: solid 1px var(--nile-card-color-border, var(--ng-colors-border-secondary));
+  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+}
+
+.container--hover .card__footer {
+  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+  box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
+}
+
+.container--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.container--disabled .card__footer {
+  pointer-events: none;
+}
+
 `;
 
 export default [styles];

package/src/nile-card/nile-card.ts

@@ -10,8 +10,9 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './nile-card.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
@@ -30,18 +31,100 @@ export class NileCard extends NileElements {
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
 
+  private readonly _internals: ElementInternals = this.attachInternals();
+
   @property({ type: Boolean, reflect: true })active = false;
   @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String, reflect: true }) variant: 'default' | 'container' = 'default';
+  @property({ type: String, attribute: true, reflect: true }) skipOn = '';
+
+  /** Reactive states used by the `container` variant. */
+  @state() private _hover = false;
+  @state() private _active = false;
+  @state() private _disabled = false;
+
+  /** Set the `hover` state on pointer enter (container variant only). */
+  private handlePointerEnter = () => {
+    if (this.variant === 'container') {
+      this._hover = true;
+    }
+  };
+
+  private handlePointerLeave = () => {
+    this._hover = false;
+  };
+
+  private setCustomState(name: string, on: boolean) {
+    if (on) {
+      this._internals.states.add(name);
+    } else {
+      this._internals.states.delete(name);
+    }
+  }
+
+  private syncCustomStates() {
+    this.setCustomState('hover', this._hover);
+    this.setCustomState('active', this._active);
+    this.setCustomState('disabled', this._disabled);
+  }
+
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has('variant') ||
+      changedProperties.has('active') ||
+      changedProperties.has('disabled')
+    ) {
+      const isContainer = this.variant === 'container';
+      this._active = isContainer && this.active;
+      this._disabled = isContainer && this.disabled;
+      if (!isContainer) {
+        this._hover = false;
+      }
+    }
+    this.syncCustomStates();
+  }
+
+  private get base(): HTMLElement | null {
+    return this.renderRoot?.querySelector('.card') ?? null;
+  }
+
+  private handlePointerDown = (event: PointerEvent) => {
+    if (!this.skipOn) return;
+    let skip = false;
+    try {
+      skip = event
+        .composedPath()
+        .some(node => node instanceof Element && node.matches(this.skipOn));
+    } catch {
+      skip = false;
+    }
+    this.base?.classList.toggle('card--skip-active', skip);
+  };
+
+  private handlePointerEnd = () => {
+    this.base?.classList.remove('card--skip-active');
+  };
 
   render() {
     return html`
       <div
         part="base"
+        @mouseenter=${this.handlePointerEnter}
+        @mouseleave=${this.handlePointerLeave}
+        @pointerdown=${this.handlePointerDown}
+        @pointerup=${this.handlePointerEnd}
+        @pointerleave=${this.handlePointerEnd}
+        @pointercancel=${this.handlePointerEnd}
         class=${classMap({
-          card: true,
+          card: this.variant !== 'container',
           'card--has-footer': this.hasSlotController.test('footer'),
-          'card--active': this.active,
-          'card--disabled': this.disabled,
+          'card--active': this.variant !== 'container' && this.active,
+          'card--disabled': this.variant !== 'container' && this.disabled,
+          'card--container': this.variant === 'container',
+          'container--hover': this._hover,
+          'container--active': this._active,
+          'container--disabled': this._disabled,
         })}
       >
         <div class="body__wrapper" part="body__wrapper"

package/src/nile-file-preview/nile-file-preview.css.ts

@@ -44,14 +44,14 @@ export const styles = css`
     align-items: center;
     justify-content: space-between;
     gap: 6px;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px dashed var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
-    background-color: var(--nile-colors-white-base);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
   
   .hover-state {
-    border-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
   }
 
   .vertical-div {
@@ -65,20 +65,20 @@ export const styles = css`
     align-items: center;
     gap: 18px;
     padding: 12px;
-    border-radius: var(--nile-radius-radius-xs);
-    color: var(--nile-colors-dark-900);
-    border: 1px dashed var(--nile-colors-neutral-500);
-    background-color: var(--nile-colors-white-base);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     position: relative; 
     margin-bottom: 10px;
   }
 
   .vertical-div:hover {
-    border-color: var(--nile-colors-blue-500);
+    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
   }
 
   .outer-div-border {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .inner-div {
@@ -123,13 +123,13 @@ export const styles = css`
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     border-radius: 4px;
-    background-color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
   
   .uploading:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .progress-bar-container {
@@ -143,8 +143,8 @@ export const styles = css`
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .progress-bar-container p {
@@ -152,8 +152,8 @@ export const styles = css`
   }
 
   .progress-bar-container > p {
-    font-size: var(--nile-type-scale-1);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     text-align: left;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -162,9 +162,9 @@ export const styles = css`
   }
 
   .progress-bar-container .horizontal-file-name {
-    font-size: var(--nile-type-scale-1);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -173,9 +173,9 @@ export const styles = css`
   }
   
   .progress-bar-container .vertical-file-name {
-    font-size: var(--nile-type-scale-1);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -185,11 +185,11 @@ export const styles = css`
 
   /* PREVIEW STATE */
   .preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview-inner {
@@ -207,8 +207,8 @@ export const styles = css`
     height: 42px;
     width: 42px;
     object-fit: contain;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview nile-icon:hover {
@@ -217,11 +217,11 @@ export const styles = css`
 
   /* NO PREVIEW STATE */
   .no-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .no-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .no-preview-container {
@@ -233,13 +233,13 @@ export const styles = css`
   .document-icon {
     height: 40px;
     width: 40px;
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     padding: 2px 3px 2px 3px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 1px solid var(--nile-colors-blue-400);
-    background-color: var(--nile-colors-blue-100);
+    border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
   }
 
   .document-icon nile-icon {
@@ -258,8 +258,8 @@ export const styles = css`
 
   .preview-file-info p {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: left;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -268,9 +268,9 @@ export const styles = css`
   }
 
   .preview-file-info p:last-of-type{
-    color: var(--nile-colors-neutral-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: left;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -284,11 +284,11 @@ export const styles = css`
 
   /* ERROR STATE */
   .error {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .error:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .error-container {
@@ -301,13 +301,13 @@ export const styles = css`
   .error-icon {
     height: 40px;
     width: 40px;
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     padding: 2px 3px 2px 3px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 1px solid var(--nile-colors-red-400);
-    background-color: var(--nile-colors-red-100);
+    border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
   }
 
   .error-icon nile-icon {
@@ -326,8 +326,8 @@ export const styles = css`
 
   .file-info p {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -336,9 +336,9 @@ export const styles = css`
   }
   
   .file-info nile-tooltip span, .file-info span {
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     max-width: 90%;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -351,9 +351,9 @@ export const styles = css`
   }
 
   .file-info .horizontal-file-name {
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-900);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
@@ -381,7 +381,7 @@ export const styles = css`
   }
 
   .content-container h4 {
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -391,8 +391,8 @@ export const styles = css`
 
   .content-container p:first-child {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -402,9 +402,9 @@ export const styles = css`
 
   .content-container p:last-child {
     margin: 0px;
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -419,10 +419,10 @@ export const styles = css`
     justify-content: center;
     align-items: center;
     gap:18px;
-    font-size: var(--nile-type-scale-3);
-    color: var(--nile-colors-blue-700);
-    background-color: var(--nile-colors-blue-100);
-    border-color: var(--nile-colors-blue-500);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
+    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
   }
 
   /* Uploading State */
@@ -431,11 +431,11 @@ export const styles = css`
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-uploading:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .loading {
@@ -453,28 +453,28 @@ export const styles = css`
 
   /* Preview State */
   .vertical-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .image-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     object-fit: cover;
     width: 80px;
     height: 80px;
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
   }
 
   /* Vertical No Preview State */
   .vertical-no-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-no-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-document-icon {
@@ -484,23 +484,23 @@ export const styles = css`
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px solid var(--nile-colors-blue-400);
-    background-color: var(--nile-colors-blue-100);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
   }
 
   /* Veritcal Error State */
   .vertical-error {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-error:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .error-bg {
-    background-color: var(--nile-colors-red-100);
-    border: 1px solid var(--nile-colors-red-400);
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
+    border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
   }
 
   .file-info-vertical-state {
@@ -510,8 +510,8 @@ export const styles = css`
 
   .file-info-vertical-state p {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     padding-bottom: 6px;
     text-align: center;
     white-space: nowrap;
@@ -521,9 +521,9 @@ export const styles = css`
   }
   
   .file-info-vertical-state nile-tooltip span, .file-info-vertical-state span {
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -539,14 +539,14 @@ export const styles = css`
     align-items: center;
     gap: 8px;
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: center
   }
 
   .error-p {
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     width: 216px;
     white-space: nowrap;
     overflow: hidden;
@@ -572,8 +572,8 @@ export const styles = css`
     min-width: 230px;
     max-height: 200px;
     overflow-y: auto;
-    border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     scrollbar-width: none;
     padding: 12px;
   }