novo-elements 13.1.0 → 13.2.0-next.2

package/elements/form/Form.scss

@@ -36,7 +36,7 @@ novo-dynamic-form {
           height: auto;
           opacity: 1;
           input.ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
-            border-bottom: 1px solid $negative !important;
+            border-bottom: 1px solid var(--color-negative) !important;
             &.valid-number {
               border-bottom: none !important;
             }
@@ -47,7 +47,7 @@ novo-dynamic-form {
           novo-picker.ng-touched.ng-invalid:not(.ng-pristine) input,
           textarea.ng-touched.ng-invalid:not(.ng-pristine):not(.ng-valid),
           chips.ng-touched.ng-invalid:not(.ng-pristine) {
-            border-bottom: 1px solid $negative !important;
+            border-bottom: 1px solid var(--color-negative) !important;
           }
           &.checklist,
           &.file,
@@ -65,14 +65,14 @@ novo-dynamic-form {
             .ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
               border-bottom: none !important;
               > input {
-                border-bottom: 1px solid $negative !important;
+                border-bottom: 1px solid var(--color-negative) !important;
               }
             }
           }
           novo-date-time-picker-input.ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container) {
             border-bottom: none !important;
             input {
-              border-bottom: 1px solid $negative !important;
+              border-bottom: 1px solid var(--color-negative) !important;
             }
           }
           &.hidden {
@@ -90,7 +90,7 @@ novo-dynamic-form {
             }
             input:not(.picker-input):not(.tiles-input) {
               &::placeholder {
-                color: lighten($dark, 30%) !important;
+                color: brightenLive('--color-dark', 30) !important;
               }
               border-bottom-style: dashed !important;
             }
@@ -105,7 +105,7 @@ novo-dynamic-form {
               border-bottom-style: dashed !important;
               i.bhi-collapse {
                 top: auto;
-                color: lighten($dark, 30%) !important;
+                color: brightenLive('--color-dark', 30) !important;
               }
             }
             label {
@@ -114,7 +114,7 @@ novo-dynamic-form {
               }
             }
             chips {
-              border-bottom: 1px dashed lighten($dark, 30%) !important;
+              border-bottom: 1px dashed brightenLive('--color-dark', 30) !important;
               input {
                 border: none !important;
               }
@@ -175,14 +175,14 @@ novo-dynamic-form {
               margin-bottom: 0;
             }
             .character-count {
-              font-size: 12px;
+              font-size: var(--font-size-sm);
               color: $grey;
               &.error {
-                color: $negative;
+                color: var(--color-negative);
               }
             }
             .record-count {
-              font-size: 12px;
+              font-size: var(--font-size-sm);
               color: $grey;
               margin-right: 9em;
               &.zero-count {
@@ -195,7 +195,7 @@ novo-dynamic-form {
             .messages {
               flex: 1;
               span.error-text {
-                color: $negative;
+                color: var(--color-negative);
                 padding-bottom: 5px;
                 padding-right: 5px;
                 flex: 1;
@@ -208,12 +208,12 @@ novo-dynamic-form {
                 flex: 1;
               }
               .warning-text {
-                color: $warning;
+                color: var(--color-warning);
               }
             }
           }
           .error-message {
-            color: $negative;
+            color: var(--color-negative);
             font-size: var(--font-size-caption);
             padding: 5px 0;
             flex-basis: 100%;
@@ -228,10 +228,10 @@ novo-dynamic-form {
               visibility: hidden;
             }
             .character-count {
-              font-size: 12px;
+              font-size: var(--font-size-sm);
               color: $grey;
               &.error {
-                color: $negative;
+                color: var(--color-negative);
               }
             }
             span.error-text {
@@ -275,7 +275,7 @@ novo-dynamic-form {
                   max-width: 15px;
                   max-height: 15px;
                   .spinner {
-                    fill: $positive;
+                    fill: var(--color-positive);
                   }
                 }
               }
@@ -322,7 +322,7 @@ novo-dynamic-form {
                     input {
                       background: transparent !important;
                       border: none;
-                      border-bottom: 1px solid lighten($dark, 45%);
+                      border-bottom: 1px solid brightenLive('--color-dark', 45);
                       border-radius: 0;
                       outline: none;
                       height: 2rem;
@@ -334,29 +334,29 @@ novo-dynamic-form {
                       transition: all 300ms;
                       color: var(--text-main);
                       &:hover {
-                        border-bottom: 1px solid lighten($dark, 15%);
+                        border-bottom: 1px solid brightenLive('--color-dark', 15);
                       }
                       &:focus {
-                        border-bottom: 1px solid $positive;
+                        border-bottom: 1px solid var(--color-positive);
                       }
                       &:invalid {
                         border-bottom: 1px solid #da4453;
                       }
                       &.maxlength-error {
-                        border-bottom: 1px solid $negative !important;
+                        border-bottom: 1px solid var(--color-negative) !important;
                       }
                     }
                     &.highlighted {
                       input,
                       novo-select {
-                        background-color: lighten($ocean, 35%) !important;
+                        background-color: brightenLive('--color-ocean', 35) !important;
                       }
                     }
                     textarea {
                       height: 2rem;
                       background: transparent !important;
                       border: none;
-                      border-bottom: 1px solid lighten($dark, 45%);
+                      border-bottom: 1px solid brightenLive('--color-dark', 45);
                       border-radius: 0;
                       outline: none;
                       width: 100%;
@@ -370,17 +370,17 @@ novo-dynamic-form {
                       color: var(--text-main);
                       overflow-y: hidden;
                       &:hover {
-                        border-bottom: 1px solid lighten($dark, 15%);
+                        border-bottom: 1px solid brightenLive('--color-dark', 15);
                       }
                       &:focus {
-                        border-bottom: 1px solid $positive;
+                        border-bottom: 1px solid var(--color-positive);
                         overflow-y: auto !important;
                       }
                       &:invalid {
                         border-bottom: 1px solid #da4453;
                       }
                       &.maxlength-error {
-                        border-bottom: 1px solid $negative;
+                        border-bottom: 1px solid var(--color-negative);
                       }
                     }
                     textarea[autosize] {
@@ -408,7 +408,7 @@ novo-dynamic-form {
                       }
                       label.input-label {
                         padding-left: 5px;
-                        color: $dark;
+                        color: var(--font-color-base);
                       }
                     }
                     > div.novo-control-input-container {
@@ -421,7 +421,7 @@ novo-dynamic-form {
                         position: absolute;
                         right: 0;
                         top: 0;
-                        font-size: 1.2rem;
+                        font-size: var(--font-size-sm);
                       }
                       > i.bhi-times {
                         cursor: pointer;
@@ -439,7 +439,7 @@ novo-dynamic-form {
                         left: 0;
                         display: flex;
                         flex-direction: column;
-                        background: #fff;
+                        background: var(--background-bright);
                         z-index: z(above);
                         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                         border-bottom-right-radius: 3px;
@@ -450,7 +450,7 @@ novo-dynamic-form {
                           border-top-right-radius: 0;
                           border-bottom-right-radius: 0;
                           box-shadow: none;
-                          border-right: 1px solid rgba($light, 0.5);
+                          border-right: 1px solid rgb(from var(--color-border) r g b / 0.5);
                           > .calendar {
                             box-shadow: none;
                           }
@@ -489,12 +489,12 @@ novo-dynamic-form {
                     font-size: 13px;
                     margin-right: 10px;
                     &.bhi-circle {
-                      color: $grapefruit;
+                      color: var(--color-error);
                       text-align: center;
                       font-size: 7px;
                     }
                     &.bhi-check {
-                      color: $grass;
+                      color: var(--color-success);
                     }
                     &.address {
                       display: none;
@@ -539,20 +539,20 @@ novo-dynamic-form {
             time-input {
               input,
               textarea {
-                color: $light;
-                border-bottom: 1px solid rgba(lighten($dark, 12%), 0.25);
+                color: var(--font-color-secondary);
+                border-bottom: 1px solid color-mix(in srgb, brightenLive('--color-dark', 12) 25%, transparent);
                 background: transparent !important;
                 &:focus {
-                  border-bottom: 1px solid $ocean;
+                  border-bottom: 1px solid var(--color-positive);
                 }
               }
             }
             novo-select {
               > div[type="button"] {
-                color: $light;
-                border-bottom: 1px solid rgba(lighten($dark, 12%), 0.25);
+                color: var(--font-color-secondary);
+                border-bottom: 1px solid color-mix(in srgb, brightenLive('--color-dark', 12) 25%, transparent);
                 &:focus {
-                  border-bottom: 1px solid $ocean;
+                  border-bottom: 1px solid var(--color-positive);
                 }
               }
             }
@@ -597,7 +597,7 @@ novo-dynamic-form {
             &.disabled {
               input:not(.picker-input):not(.tiles-input) {
                 &::placeholder {
-                  color: lighten($dark, 30%) !important;
+                  color: brightenLive('--color-dark', 30) !important;
                 }
                 border-bottom-style: dashed !important;
               }
@@ -611,7 +611,7 @@ novo-dynamic-form {
                 border-bottom-style: dashed !important;
                 i.bhi-collapse {
                   top: auto;
-                  color: lighten($dark, 30%) !important;
+                  color: brightenLive('--color-dark', 30) !important;
                 }
               }
               label {
@@ -620,7 +620,7 @@ novo-dynamic-form {
                 }
               }
               chips {
-                border-bottom: 1px dashed lighten($dark, 30%) !important;
+                border-bottom: 1px dashed brightenLive('--color-dark', 30) !important;
                 input {
                   border: none !important;
                 }
@@ -819,3 +819,49 @@ control-prompt-modal {
     min-width: 110px;
   }
 }
+
+// bh2026: uppercase label + tighter value typography per Figma "Value - Finalized" spec
+// ViewEncapsulation.None: use plain selectors (not :host-context which is Shadow DOM only)
+:root[data-theme='bh2026'] {
+  label.novo-control-label {
+    &.novo-control-filled,
+    &.novo-control-focused,
+    &.novo-control-always-active {
+      font-weight: var(--typography-input-label-sm-font-weight) !important;
+      font-size: var(--typography-input-label-sm-font-size) !important;
+      letter-spacing: var(--typography-input-label-sm-letter-spacing);
+      text-transform: var(--typography-input-label-sm-text-transform);
+      color: var(--color-text-body) !important;
+    }
+  }
+  .novo-form-control-label {
+    font-weight: var(--typography-input-label-sm-font-weight) !important;
+    font-size: var(--typography-input-label-sm-font-size) !important;
+    letter-spacing: var(--typography-input-label-sm-letter-spacing);
+    text-transform: var(--typography-input-label-sm-text-transform);
+    color: var(--color-text-body) !important;
+  }
+  .novo-control-outer-container input:not([type='checkbox']):not([type='radio']) {
+    font-size: var(--typography-input-value-default-font-size) !important;
+    font-weight: var(--typography-input-value-default-font-weight) !important;
+  }
+  .field-message,
+  novo-tip-well.active {
+    font-size: var(--typography-input-value-sm-font-size);
+    font-weight: var(--typography-input-value-sm-font-weight);
+    color: var(--color-text-subtle);
+
+    // $grey is a compile-time SCSS variable — explicit selectors required to override
+    .character-count,
+    .record-count {
+      font-size: var(--typography-input-value-sm-font-size);
+      color: var(--color-text-subtle);
+    }
+  }
+  .error-message {
+    .character-count {
+      font-size: var(--typography-input-value-sm-font-size);
+      color: var(--color-text-subtle);
+    }
+  }
+}

package/elements/form/extras/address/Address.scss

@@ -14,7 +14,7 @@
       &.invalid {
         ::ng-deep input,
         ::ng-deep novo-select div[type="button"] {
-          border-bottom: 1px solid $negative !important;
+          border-bottom: 1px solid var(--color-negative) !important;
         }
       }
     }
@@ -36,7 +36,7 @@
     justify-content: space-between;
     align-items: flex-end;
     input.invalid {
-      border-bottom: 1px solid $negative;
+      border-bottom: 1px solid var(--color-negative);
     }
   }
   .street-address {
@@ -84,7 +84,7 @@
     pointer-events: none;
     input {
       &::placeholder {
-        color: lighten($dark, 30%) !important;
+        color: brightenLive('--color-dark', 30) !important;
       }
       border-bottom-style: dashed !important;
     }
@@ -123,11 +123,11 @@
     .country-name {
       &:hover:not(.invalid) i.required-indicator.bhi-circle,
       &:hover:not(.invalid) i.required-indicator.bhi-check {
-        border-bottom: 1px solid lighten($dark, 15%);
+        border-bottom: 1px solid brightenLive('--color-dark', 15);
       }
       &.focus:not(.invalid) i.required-indicator.bhi-circle,
       &.focus:not(.invalid) i.required-indicator.bhi-check {
-        border-bottom: 1px solid $positive;
+        border-bottom: 1px solid var(--color-positive);
       }
     }
     i.required-indicator {
@@ -144,7 +144,7 @@
     }
     .invalid i.required-indicator,
     .invalid i.required-indicator {
-      border-bottom: 1px solid $negative;
+      border-bottom: 1px solid var(--color-negative);
     }
   }
 }

package/elements/form/extras/file/FileInput.scss

@@ -1,7 +1,7 @@
 @import "../../../../styles/variables.scss";
 
 @mixin file-item-style() {
-  background-color: $white;
+  background-color: var(--background-body);
   box-shadow: 0 1px 4px rgba(#000, 0.15), 0 2px 10px rgba(#000, 0.09);
   padding: 4px 12px;
   display: flex;
@@ -51,7 +51,7 @@ novo-file-input {
       button:focus,
       button.active {
         background: none;
-        color: $positive;
+        color: var(--color-positive);
       }
       &.disabled {
         box-shadow: none;
@@ -79,7 +79,7 @@ novo-file-input {
     &:hover,
     &.active {
       label.boxed {
-        border: 2px dashed $positive;
+        border: 2px dashed var(--color-positive);
       }
     }
     &.disabled {
@@ -99,7 +99,7 @@ novo-file-input {
       pointer-events: none;
       /*This for FF*/
       strong {
-        color: $positive;
+        color: var(--color-positive);
       }
       small {
         margin-top: 7px;

package/elements/form/fieldset-header.scss

@@ -2,10 +2,10 @@
   background: var(--background-muted);
   box-sizing: content-box;
   padding: 1rem 1rem 1rem 0.5rem;
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-2xl);
   display: flex;
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
+  margin-left: calc(-1 * var(--spacing-xl));
+  margin-right: calc(-1 * var(--spacing-xl));
   font-size: 1.8rem;
   ::ng-deep i,
   ::ng-deep novo-icon {

package/elements/form/index.d.ts

@@ -946,7 +946,7 @@ declare class NovoFieldsetHeaderElement {
     title: string;
     icon: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoFieldsetHeaderElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFieldsetHeaderElement, "novo-fieldset-header", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFieldsetHeaderElement, "novo-fieldset-header", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 declare class NovoFieldsetElement {
     controls: Array<any>;

package/elements/header/Header.scss

@@ -29,8 +29,8 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0 $spacing-lg;
-    gap: $spacing-sm;
+    padding: 0 var(--spacing-lg);
+    gap: var(--spacing-sm);
     box-sizing: border-box;
     // line-height: 4rem;
 
@@ -40,7 +40,7 @@
     div.header-title {
       display: flex;
       align-items: center;
-      gap: $spacing-sm;
+      gap: var(--spacing-sm);
       // making room for ellipsis
       padding-inline-end: 2em;
       // prevent pushing other flex content
@@ -51,7 +51,7 @@
       }
 
       ::ng-deep novo-icon {
-        margin-right: 1rem;
+        margin-right: var(--spacing-md);
       }
     }
     .header-titles {
@@ -83,7 +83,7 @@
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      gap: $spacing-sm;
+      gap: var(--spacing-sm);
     }
 
     ::ng-deep .novo-action {
@@ -96,23 +96,23 @@
       .header-titles,
       .header-title {
         ::ng-deep .novo-icon {
-          color: $color;
+          color: getCssVarname($name);
         }
       }
       & > section:first-of-type {
-        border-bottom: 2px solid $color;
+        border-bottom: 2px solid getCssVarname($name);
       }
     }
     &.novo-theme-#{$name} {
       & > section:first-of-type {
-        background: $color;
-        color: $contrast;
+        background: getCssVarname($name);
+        color: getContrastColor($name);
         border-bottom: none;
       }
       ::ng-deep .novo-title {
         color: inherit;
         overflow: hidden;
-        padding-right: 0.5rem;
+        padding-right: var(--spacing-sm);
       }
       ::ng-deep .novo-action {
         button,
@@ -151,3 +151,51 @@
     flex-flow: row nowrap;
   }
 }
+
+// bh2026: frosted translucent header + entity squircle icon
+:host-context([data-theme='bh2026']) {
+  & > section {
+    gap: var(--spacing-gap-lg);
+  }
+
+  .header-actions {
+    gap: var(--spacing-gap-sm);
+  }
+
+  ::ng-deep utils,
+  ::ng-deep novo-utils {
+    gap: var(--spacing-gap-sm);
+  }
+
+  &[class*='novo-accent-'] {
+    background: var(--color-transparency-white-90);
+    backdrop-filter: blur(12px);
+    box-shadow: 0 1px 2px var(--color-transparency-black-10);
+    padding-top: var(--spacing-md);
+    padding-left: var(--spacing-lg);
+    padding-right: var(--spacing-lg);
+
+    & > section:first-of-type {
+      border-bottom: none;
+    }
+
+    utils {
+      color: var(--color-text-subtle);
+    }
+  }
+
+  @each $entity, $color in $entity-colors {
+    &.novo-accent-#{$entity} {
+      ::ng-deep .header-icon i {
+        color: var(--color-white);
+        background: $color;
+        border-radius: var(--border-radius-sm);
+        width: var(--typography-font-size-40);
+        height: var(--typography-font-size-40);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}

package/elements/icon/Icon.scss

@@ -38,7 +38,7 @@ $icon-border-radius: 0.3em;
     &[theme="#{$name}"] {
       i {
         color: $white;
-        background: $color;
+        background: getCssVarname($name);
         border-radius: $icon-border-radius;
         width: 1.6em;
         height: 1.6em;

package/elements/layout/collapsible-nav/collapsible-nav.component.scss

@@ -0,0 +1,20 @@
+.novo-collapsible-nav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--background-bright);
+
+  .novo-collapsible-nav-header {
+    flex: 0 0 auto;
+  }
+
+  .novo-collapsible-nav-body {
+    flex: 1 1 auto;
+    overflow: hidden auto;
+  }
+
+  .novo-collapsible-nav-footer {
+    flex: 0 0 auto;
+  }
+}

package/elements/layout/index.d.ts

@@ -1,13 +1,46 @@
+import * as i0 from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, NgZone, DestroyRef, InjectionToken, AfterContentChecked, OnDestroy, EventEmitter, DoCheck, QueryList } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/overlay';
-import * as i0 from '@angular/core';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, NgZone, DestroyRef, InjectionToken, AfterContentChecked, OnDestroy, EventEmitter, DoCheck, QueryList } from '@angular/core';
 import { Subject, Observable } from 'rxjs';
 import { AnimationEvent } from '@angular/animations';
 import { FocusTrapFactory, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { Platform } from '@angular/cdk/platform';
-import * as i5 from '@angular/common';
+import * as i6 from '@angular/common';
+
+/**
+ * A slide-out navigation panel that expands to a full-width panel or collapses to a narrow icon rail.
+ * Generic building block: consumers project their own header, body, and footer content.
+ */
+declare class NovoCollapsibleNavComponent {
+    /** Whether the panel is collapsed to the icon rail. Two-way bindable via `[(collapsed)]`. */
+    collapsed: i0.ModelSignal<boolean>;
+    /** Width of the panel when expanded. */
+    expandedWidth: i0.InputSignal<string>;
+    /** Width of the panel when collapsed to the icon rail. */
+    collapsedWidth: i0.InputSignal<string>;
+    /** When true, hovering a collapsed panel temporarily expands it as an overlay without affecting layout. */
+    overlayOnHover: i0.InputSignal<boolean>;
+    private readonly isHovered;
+    private readonly effectiveCollapsed;
+    constructor();
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    get expandCollapseState(): {
+        value: string;
+        params: {
+            expandedWidth: string;
+            collapsedWidth: string;
+        };
+    };
+    get isCollapsed(): boolean;
+    toggle(): void;
+    expand(): void;
+    collapse(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NovoCollapsibleNavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoCollapsibleNavComponent, "novo-collapsible-nav", ["novoCollapsibleNav"], { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "overlayOnHover": { "alias": "overlayOnHover"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[novo-collapsible-nav-header]", "[novo-collapsible-nav-body]", "[novo-collapsible-nav-footer]"], false, never>;
+}
 
 declare class NovoLayoutContent extends CdkScrollable implements AfterContentInit {
     private _changeDetectorRef;
@@ -298,9 +331,9 @@ declare class NovoLayoutContainer implements AfterContentInit, DoCheck, OnDestro
 
 declare class NovoLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoLayoutModule, [typeof NovoLayoutContainer, typeof NovoLayoutContent, typeof NovoSidenavComponent, typeof NovoRailComponent], [typeof i5.CommonModule], [typeof NovoLayoutContainer, typeof NovoLayoutContent, typeof NovoSidenavComponent, typeof NovoRailComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoLayoutModule, [typeof NovoLayoutContainer, typeof NovoLayoutContent, typeof NovoSidenavComponent, typeof NovoRailComponent, typeof NovoCollapsibleNavComponent], [typeof i6.CommonModule], [typeof NovoLayoutContainer, typeof NovoLayoutContent, typeof NovoSidenavComponent, typeof NovoRailComponent, typeof NovoCollapsibleNavComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoLayoutModule>;
 }
 
-export { NOVO_LAYOUT_CONTAINER, NOVO_LAYOUT_DEFAULT_AUTOSIZE, NOVO_LAYOUT_DEFAULT_AUTOSIZE_FACTORY, NovoLayoutContainer, NovoLayoutContent, NovoLayoutModule, NovoRailComponent, NovoSidenavComponent, throwNovoDuplicatedSidenavError };
+export { NOVO_LAYOUT_CONTAINER, NOVO_LAYOUT_DEFAULT_AUTOSIZE, NOVO_LAYOUT_DEFAULT_AUTOSIZE_FACTORY, NovoCollapsibleNavComponent, NovoLayoutContainer, NovoLayoutContent, NovoLayoutModule, NovoRailComponent, NovoSidenavComponent, throwNovoDuplicatedSidenavError };
 export type { NovoSidenavMode, NovoSidenavToggleResult };

package/elements/list/list-item-content.scss

@@ -21,7 +21,7 @@
   &.novo-item-content ::ng-deep i {
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &.#{$name} {
-        color: $color;
+        color: getCssVarname($name);
       }
     }
   }

package/elements/list/list-item-header-avatar.scss

@@ -5,7 +5,7 @@
   ::ng-deep i {
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &.#{$name} {
-        color: $color;
+        color: getCssVarname($name);
       }
     }
   }