novo-elements 13.1.0 → 13.2.0

package/elements/calendar/calendar.component.scss

@@ -1,7 +1,7 @@
 @import "../../styles/variables.scss";
 
 :host(.layout-horizontal) {
-  font-size: 1.2rem;
+  font-size: var(--font-size-sm);
 
   .calendar-content {
     flex-flow: row nowrap;
@@ -9,9 +9,9 @@
 
   .month-view + .month-view {
     border-collapse: unset;
-    border-left: 1px solid $light;
-    margin-left: 0.5rem;
-    padding-left: 0.5rem;
+    border-left: 1px solid var(--color-border);
+    margin-left: var(--spacing-sm);
+    padding-left: var(--spacing-sm);
   }
 }
 :host(.layout-vertical) {
@@ -71,7 +71,7 @@
         width: 0;
       }
       &:hover:after {
-        border-right: 4px solid $positive;
+        border-right: 4px solid var(--color-positive);
         cursor: pointer;
       }
     }
@@ -79,23 +79,23 @@
       flex: 1;
       display: inline-block;
       vertical-align: middle;
-      color: $positive;
+      color: var(--color-positive);
       font-weight: 600;
       .month {
-        border-radius: 2px;
+        border-radius: var(--border-radius-xsm, 2px);
         padding: 3px 8px;
         &:hover {
-          background: $positive;
-          color: #fff;
+          background: var(--color-positive);
+          color: var(--color-contrast-positive);
           cursor: pointer;
         }
       }
       .year {
-        border-radius: 2px;
+        border-radius: var(--border-radius-xsm, 2px);
         padding: 3px 8px;
         &:hover {
-          background: $positive;
-          color: #fff;
+          background: var(--color-positive);
+          color: var(--color-contrast-positive);
           cursor: pointer;
         }
       }
@@ -117,7 +117,7 @@
       }
       &:hover:before {
         opacity: 1;
-        border-left: 4px solid $positive;
+        border-left: 4px solid var(--color-positive);
         cursor: pointer;
       }
     }

package/elements/calendar/month-select/month-select.component.scss

@@ -7,13 +7,13 @@
   .month {
     padding: 1rem;
     cursor: pointer;
-    border-radius: 0.4rem;
+    border-radius: var(--border-radius-round);
     &.selected {
-      background-color: $positive;
+      background-color: var(--color-positive);
       color: #fff;
     }
     &:hover {
-      background-color: $positive;
+      background-color: var(--color-positive);
       color: #fff;
     }
   }

package/elements/calendar/month-view/month-view.component.scss

@@ -30,7 +30,7 @@
       text-overflow: ellipsis;
       margin: 5px;
       font-weight: normal;
-      border-radius: 3px;
+      border-radius: var(--border-radius-sm, 3px);
       &.selected {
         background-color: var(--selection);
         color: #fff;
@@ -45,7 +45,7 @@
       height: 3.2rem;
       width: 3.2rem;
       line-height: 1;
-      font-size: 1.2rem;
+      font-size: var(--font-size-sm);
       padding: 1px;
       border: none;
       background-color: transparent;
@@ -151,7 +151,7 @@
           height: 100%;
           max-width: 3.2rem;
           margin: 0 auto;
-          box-shadow: inset 0 0 0 2px $light;
+          box-shadow: inset 0 0 0 2px var(--color-border);
         }
         &.inRange,
         &.selected {
@@ -163,8 +163,8 @@
 
       &.inPreview .day {
         border-radius: 0;
-        border-top: 1px dashed $positive;
-        border-bottom: 1px dashed $positive;
+        border-top: 1px dashed var(--color-positive);
+        border-bottom: 1px dashed var(--color-positive);
       }
 
       &.previewStart .day {
@@ -172,14 +172,14 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
         box-shadow: none !important;
-        border-left: 1px dashed $positive;
+        border-left: 1px dashed var(--color-positive);
       }
       &.previewEnd .day {
         border-radius: 50%;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         box-shadow: none !important;
-        border-right: 1px dashed $positive;
+        border-right: 1px dashed var(--color-positive);
       }
     }
   }

package/elements/calendar/year-select/year-select.component.scss

@@ -9,13 +9,13 @@
   .year {
     padding: 1rem;
     cursor: pointer;
-    border-radius: 0.4rem;
+    border-radius: var(--border-radius-round);
     &.selected {
-      background-color: $positive;
+      background-color: var(--color-positive);
       color: #fff;
     }
     &:hover {
-      background-color: $positive;
+      background-color: var(--color-positive);
       color: #fff;
     }
   }

package/elements/card/Card.scss

@@ -5,7 +5,7 @@
   flex-flow: column;
   background-color: var(--background-bright, $color-white);
   box-shadow: $shadow-card;
-  border-radius: 0.4em;
+  border-radius: var(--border-radius-round);
   position: relative;
   overflow-x: hidden;
 
@@ -19,7 +19,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    border-radius: 0.4em;
+    border-radius: var(--border-radius-round);
     background-color: var(--background-bright, $color-white);
     display: flex;
     flex-direction: column;
@@ -39,14 +39,14 @@
       min-width: 0;
       flex: 1;
       ::ng-deep i.bhi-move {
-        color: $light;
+        color: var(--font-color-secondary);
         margin-right: 0.3em;
         cursor: pointer;
       }
       h1,
       h2,
       h3 {
-        font-size: $font-size-lg;
+        font-size: var(--font-size-lg);
         font-weight: 500;
         line-height: 1.5;
         color: var(--text-main, #3d464d);
@@ -64,7 +64,7 @@
       }
     }
     .actions {
-      color: lighten($dark, 15%);
+      color: brightenLive('--color-dark', 15);
       white-space: nowrap;
     }
   }
@@ -74,12 +74,12 @@
     max-width: inherit;
     text-align: center;
     line-height: 25px;
-    color: lighten($grey, 10%);
+    color: brightenLive('--color-grey', 10);
     i {
       display: block;
       font-size: 24px;
       margin: 0 0 0.5em;
-      color: lighten($grey, 20%);
+      color: brightenLive('--color-grey', 20);
     }
   }
 
@@ -97,22 +97,57 @@
     padding: 0;
   }
   &.novo-card-inset-small {
-    padding: $spacing-sm;
+    padding: var(--spacing-sm);
   }
   &.novo-card-inset-medium {
-    padding: $spacing-md;
+    padding: var(--spacing-md);
   }
   &.novo-card-inset-large {
-    padding: $spacing-lg;
+    padding: var(--spacing-lg);
   }
 
   ::ng-deep .novo-card-header + .novo-card-content.condensed,
   ::ng-deep .novo-card-header + :not(.novo-card-content) {
-    margin-top: $spacing-sm;
+    margin-top: var(--spacing-sm);
   }
 
   ::ng-deep [novo-card-image] {
     width: calc(100%);
-    margin: $spacing-md 0;
+    margin: var(--spacing-md) 0;
+  }
+}
+
+// bh2026: roomier, rounder card, larger title
+:host-context([data-theme='bh2026']) {
+  border-radius: var(--border-radius-md, 1.6rem);
+  border: 1px solid var(--color-border-default, #f0f5f9);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+  div.card-loading-container {
+    border-radius: var(--border-radius-md, 1.6rem);
+  }
+
+  header {
+    padding: var(--spacing-md, 1.6rem);
+    margin-left: var(--spacing-md);
+
+    .title {
+      ::ng-deep i.bhi-move {
+        display: none;
+      }
+
+      h1,
+      h2,
+      h3 {
+        font-size: 1.8rem;
+        font-weight: 500;
+      }
+    }
+
+    novo-button {
+      color: rgba(var(--text-secondary), 0.7);
+      margin-left: var(--spacing-sm);
+      margin-right: var(--spacing-sm);
+    }
   }
 }

package/elements/card/CardContent.scss

@@ -3,6 +3,6 @@
 :host {
   display: block;
   &:not(.condensed) {
-    padding: $spacing-md $spacing-md;
+    padding: var(--spacing-md);
   }
 }

package/elements/card/CardFooter.scss

@@ -2,9 +2,9 @@
 
 :host {
   @include theme-backgrounds();
-  padding: 0 $spacing-md $spacing-md $spacing-md;
+  padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: $spacing-md;
+  gap: var(--spacing-md);
 }

package/elements/card/CardHeader.scss

@@ -2,11 +2,11 @@
 
 :host {
   @include theme-backgrounds();
-  padding: $spacing-md $spacing-md 0 $spacing-md;
+  padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: $spacing-md;
+  gap: var(--spacing-md);
 
   .novo-card-header-text {
     flex: 1 1 0px;

package/elements/category-dropdown/CategoryDropdown.scss

@@ -15,7 +15,7 @@
       min-width: 400px;
       display: block;
       z-index: z("max");
-      border-radius: 2px;
+      border-radius: var(--border-radius-xsm, 2px);
       top: 100%;
       margin-top: 5px;
     }
@@ -42,7 +42,7 @@
         font-size: 1em;
         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;
@@ -55,10 +55,10 @@
         color: #26282b;
         margin-left: 10px;
         &: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);
         }
         &::placeholder {
           color: var(--form-placeholder);
@@ -70,12 +70,12 @@
         bottom: 15px;
         right: 5px;
         color: #aaaaaa;
-        font-size: 1.2rem;
+        font-size: var(--font-size-sm);
         margin-right: 10px;
       }
       i.bhi-times {
         cursor: pointer;
-        font-size: 1.2rem;
+        font-size: var(--font-size-sm);
       }
     }
     footer {
@@ -124,15 +124,15 @@
       font-size: 0.9em;
       &:focus,
       &:hover {
-        background: lighten($light, 10%);
-        color: darken($light, 55%);
+        background: brightenLive('--color-light', 10);
+        color: darkenLive('--color-light', 55);
         .novo-category-dropdown-hover {
           display: block;
         }
       }
       .novo-category-dropdown-hover {
         display: none;
-        color: $positive;
+        color: var(--color-positive);
         font-size: 0.9em;
         > i {
           font-size: 0.9em;

package/elements/checkbox/CheckList.scss

@@ -18,7 +18,7 @@
           i {
             &.bhi-checkbox-empty,
             &.bhi-radio-empty {
-              color: $color-positive;
+              color: var(--color-positive);
             }
           }
         }
@@ -48,7 +48,7 @@
         i {
           &.bhi-checkbox-empty,
           &.bhi-checkbox-filled {
-            color: $color-positive;
+            color: var(--color-positive);
           }
         }
       }
@@ -79,7 +79,7 @@
         }
         &.bhi-checkbox-filled,
         &.bhi-radio-filled {
-          color: $color-positive;
+          color: var(--color-positive);
         }
       }
       span {

package/elements/checkbox/Checkbox.scss

@@ -21,7 +21,7 @@
           i {
             &.bhi-checkbox-empty,
             &.bhi-radio-empty {
-              color: $color-positive;
+              color: var(--color-positive);
             }
           }
         }
@@ -51,7 +51,7 @@
         i {
           &.bhi-checkbox-empty,
           &.bhi-checkbox-filled {
-            color: $color-positive;
+            color: var(--color-positive);
           }
         }
       }
@@ -82,7 +82,7 @@
         }
         &.bhi-checkbox-filled,
         &.bhi-radio-filled {
-          color: $color-positive;
+          color: var(--color-positive);
         }
       }
       span {

package/elements/chips/Chip.scss

@@ -29,11 +29,11 @@ $chip-height: (
   "xl": 3.6rem,
 );
 $chip-spacing: (
-  "xs": $spacing-xs,
-  "sm": $spacing-sm,
-  "md": $spacing-md,
-  "lg": $spacing-lg,
-  "xl": $spacing-xl,
+  "xs": var(--spacing-xs),
+  "sm": var(--spacing-sm),
+  "md": var(--spacing-md),
+  "lg": var(--spacing-lg),
+  "xl": var(--spacing-xl),
 );
 
 .novo-chip {
@@ -50,9 +50,9 @@ $chip-spacing: (
   display: inline-flex;
   align-items: center;
   cursor: default;
-  gap: 1rem;
-  border-radius: 0.4rem;
-  padding: $spacing-none $spacing-md;
+  gap: var(--spacing-md);
+  border-radius: var(--size-border-radius-round);
+  padding: var(--spacing-none) var(--spacing-md);
   min-height: 2.4rem;
   height: 1px;
   max-width: 100%;
@@ -76,7 +76,7 @@ $chip-spacing: (
 
     &:focus {
       outline: none;
-      border: 1px solid var(--selection);
+      border: var(--border-width-thin) solid var(--selection);
 
       &::after {
         opacity: 0.16;
@@ -84,7 +84,7 @@ $chip-spacing: (
     }
 
     &:hover {
-      border: 1px solid var(--selection);
+      border: var(--border-width-thin) solid var(--selection);
     }
   }
 
@@ -139,11 +139,11 @@ $chip-spacing: (
   }
 
   .novo-chip-remove {
-    color: $light;
+    color: var(--color-light);
   }
   &:not(.novo-chip-disabled) {
     .novo-chip-remove:hover {
-      color: darken($light, 30%);
+      color: darkenLive('--color-light', 30);
     }
   }
 
@@ -153,8 +153,8 @@ $chip-spacing: (
     $height: map-get($chip-height, $size);
     &.novo-size-#{$size} {
       font-size: map-get($chip-fontsize, $size);
-      border-radius: 0.4rem;
-      padding: $spacing-none $spacing;
+      border-radius: var(--border-radius-round);
+      padding: var(--spacing-none) $spacing;
       min-height: $height;
       gap: $spacing;
 
@@ -173,15 +173,15 @@ $chip-spacing: (
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.novo-color-#{$name} {
       color: getContrastColor($name);
-      background: $color;
+      background: getCssVarname($name);
       & > * {
         color: inherit;
       }
     }
 
     &.novo-accent-#{$name} {
-      border: 1px solid $color;
-      color: $color;
+      border: 1px solid getCssVarname($name);
+      color: getCssVarname($name);
     }
   }
 }

package/elements/chips/Chips.scss

@@ -6,7 +6,7 @@
   align-items: center;
   flex-wrap: wrap;
   justify-content: flex-start;
-  border-bottom: 1px solid lighten($dark, 45%);
+  border-bottom: 1px solid brightenLive('--color-dark', 45);
   transition: all 200ms ease-in-out;
   position: relative;
   padding: 2px 0;
@@ -21,13 +21,13 @@
     margin-bottom: 20px;
   }
   &:hover {
-    border-bottom: 1px solid lighten($dark, 15%);
+    border-bottom: 1px solid brightenLive('--color-dark', 15);
   }
   &.selected,
   &.selected:hover {
-    border-bottom: 1px solid $positive;
+    border-bottom: 1px solid var(--color-positive);
     & + i {
-      color: $positive;
+      color: var(--color-positive);
     }
   }
   &.disabled {
@@ -42,7 +42,7 @@
   }
   .chip-input-container {
     flex: 1 15rem;
-    padding-left: 1rem;
+    padding-left: var(--spacing-md);
     input {
       padding-top: 0;
       border: none;
@@ -64,7 +64,7 @@
     right: 0;
     bottom: -20px;
     font-size: 0.9rem;
-    color: $negative;
+    color: var(--color-negative);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -79,7 +79,7 @@
     bottom: 8px;
     right: 0;
     font-size: 1.1em;
-    color: $dark;
+    color: var(--font-color-base);
   }
 
   & + i {
@@ -122,10 +122,10 @@
           width: 100%;
         }
         &.active {
-          background-color: lighten($positive, 35%);
+          background-color: brightenLive('--color-positive', 35);
         }
         &:hover {
-          background-color: lighten($positive, 35%);
+          background-color: brightenLive('--color-positive', 35);
         }
         item-content {
           flex-flow: row wrap;

package/elements/chips/RowChips.scss

@@ -24,7 +24,7 @@
       align-items: center;
       background: transparent !important;
       border: none;
-      border-bottom: 1px dashed lighten($dark, 30%);
+      border-bottom: 1px dashed brightenLive('--color-dark', 30);
       border-radius: 0;
       outline: none;
       height: 2em;
@@ -62,7 +62,7 @@
       }
     }
     i.bhi-delete-o {
-      color: $negative;
+      color: var(--color-negative);
     }
   }
   .novo-chip.novo-row-chip {

package/elements/chips/index.d.ts

@@ -515,6 +515,8 @@ declare class NovoChipInput implements NovoChipTextControl, OnChanges, OnDestroy
     chipEnd: EventEmitter<NovoChipInputEvent>;
     /** The input's placeholder text. */
     placeholder: string;
+    /** Setting to false prevents input from being cleared when focus is lost. */
+    clearOnBlur: boolean;
     /** Unique id for the input. */
     id: string;
     /** Whether the input is disabled. */
@@ -548,7 +550,7 @@ declare class NovoChipInput implements NovoChipTextControl, OnChanges, OnDestroy
     static readonly ngAcceptInputType_addOnBlur: BooleanInput;
     static readonly ngAcceptInputType_disabled: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoChipInput, [null, null, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NovoChipInput, "input[novoChipInput]", ["novoChipInput", "novoChipInputFor"], { "addOnBlur": { "alias": "novoChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "novoChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "chipEnd": "novoChipInputTokenEnd"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NovoChipInput, "input[novoChipInput]", ["novoChipInput", "novoChipInputFor"], { "addOnBlur": { "alias": "novoChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "novoChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "clearOnBlur": { "alias": "clearOnBlur"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "chipEnd": "novoChipInputTokenEnd"; }, never, never, false, never>;
 }
 
 declare class NovoChipsElement implements OnInit, ControlValueAccessor {

package/elements/color-picker/color-picker.component.scss

@@ -9,7 +9,7 @@
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   transform: translateY(0%);
   transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
-  border-radius: 0.4rem;
+  border-radius: var(--border-radius-sm);
   width: 18rem;
 
   .novo-color-preview {