novo-elements 13.1.0 → 13.2.0-next.10

package/elements/button/styles/button.scss

@@ -5,16 +5,18 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 0 $spacing-md;
+  padding: var(--button-padding-y, 0) var(--button-padding-x, var(--spacing-md));
   font-size: var(--font-size-button);
-  height: 3rem;
+  font-weight: var(--button-font-weight, inherit);
+  letter-spacing: var(--button-letter-spacing, normal);
+  height: var(--button-height, 3rem);
   border: none;
-  color: var(--text-main, $dark);
+  color: var(--button-color, var(--text-main, $dark));
   background: transparent;
-  border-radius: 3px;
-  text-transform: uppercase;
+  border-radius: var(--button-radius, 3px);
+  text-transform: var(--button-text-transform, uppercase);
   transition: all 200ms ease-in-out;
-  gap: $spacing-md;
+  gap: var(--button-gap, var(--spacing-md));
   cursor: pointer;
   user-select: none;
   text-overflow: clip;
@@ -29,7 +31,7 @@
     line-height: 1;
     font-size: inherit;
     color: inherit;
-    text-transform: uppercase;
+    text-transform: var(--button-text-transform, uppercase);
   }
 
   i {
@@ -40,10 +42,10 @@
 
   &[size="small"],
   &[size="sm"] {
-    font-size: 1rem;
-    padding: 0 $spacing-md;
+    font-size: var(--font-size-xs);
+    padding: 0 var(--spacing-md);
     height: 2.4rem;
-    gap: $spacing-sm;
+    gap: var(--spacing-sm);
     .button-contents,
     i {
       height: 1rem;
@@ -53,9 +55,9 @@
   &[size="large"],
   &[size="lg"] {
     font-size: 1.6rem;
-    padding: 0 $spacing-lg;
+    padding: 0 var(--spacing-lg);
     height: 3.6rem;
-    gap: $spacing-lg;
+    gap: var(--spacing-lg);
     .button-contents,
     i {
       height: 1.6rem;
@@ -66,6 +68,10 @@
     outline: none;
   }
 
+  &:focus-visible {
+    box-shadow: var(--button-focus-ring, none);
+  }
+
   &[disabled],
   &.novo-button-disabled {
     opacity: 0.5;
@@ -109,3 +115,14 @@
     transform: rotate(360deg);
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  box-shadow: var(--button-shadow);
+
+  &:hover {
+    box-shadow: var(--button-shadow-hover);
+  }
+  &:active {
+    box-shadow: var(--button-shadow-active);
+  }
+}

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,9 +5,12 @@
   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;
+  :root[data-theme=bh2026] & {
+    --spacing-md: var(--spacing-padding-md);
+  }
 
   &.loading {
     min-height: 200px;
@@ -19,7 +22,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 +42,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);
@@ -57,14 +60,14 @@
         text-overflow: ellipsis;
         i {
           font-size: 1.2em;
-          &.bhi-info {
-            color: $light;
-          }
         }
       }
+      :root:not([data-theme='bh2026']) & i.bhi-info {
+        color: $light;
+      }
     }
     .actions {
-      color: lighten($dark, 15%);
+      color: brightenLive('--color-dark', 15);
       white-space: nowrap;
     }
   }
@@ -74,12 +77,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 +100,115 @@
     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: rounder card, grippy on hover
+:host-context([data-theme='bh2026']) {
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--color-border-default);
+  box-shadow: 0 1px 2px var(--color-transparency-black-10);
+
+  div.card-loading-container {
+    border-radius: var(--border-radius-md);
+  }
+
+  header {
+    padding: var(--spacing-padding-md) var(--spacing-padding-lg) var(--spacing-padding-md) 0;
+    border-bottom: 1px solid var(--color-border-default);
+
+    .title {
+      padding-inline: var(--spacing-gutter);
+      h1,
+      h2,
+      h3 {
+        font-size: var(--typography-card-header-font-size, var(--typography-font-size-18));
+        font-weight: var(--typography-card-header-font-weight, var(--typography-font-weight-500));
+        ::ng-deep .card-flag-icon {
+          font-size: var(--font-size-lg);
+          vertical-align: 10%;
+        }
+      }
+
+      ::ng-deep i {
+        margin: 0;
+      }
+    }
+
+    .card-move-handle {
+      position: absolute;
+      left: var(--spacing-padding-xxsm);
+      color: var(--color-content-icon, #89909A);
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-gap-sm);
+    }
+
+    novo-button {
+      color: var(--color-text-subtle);
+    }
+    ::ng-deep .novo-card-header-text {
+      padding-inline-start: var(--spacing-padding-sm);
+    }
+  }
+  :host {
+    ::ng-deep .card-flag-icon {
+      color: var(--color-content-subtle, #5d7798);
+    }
+    &.icon-color-auto header .title ::ng-deep .card-flag-icon {
+      color: var(--page-entity-color, var(--color-content-subtle, #5d7798));
+      @each $entity, $color in $entity-colors {
+        &.bhi-#{$entity} {
+          @if ($entity == 'person') {
+            color: var(--color-entity-contact);
+          } @else if ($entity == 'notes') {
+            color: var(--color-entity-note);
+          } @else {
+            color: var(--color-entity-#{$entity});
+          }
+        }
+      }
+    }
+    &.icon-color-parent ::ng-deep .card-flag-icon {
+      color: var(--page-entity-color);
+    }
+    .novo-card-header {
+      padding-inline-start: var(--spacing-gutter);
+    }
+    // ng-deep in case this is declared within title bar implementation.
+    ::ng-deep .card-move-handle {
+      position: absolute;
+      left: var(--spacing-padding-xxsm);
+      color: var(--color-content-icon, #89909A);
+      transition: color 0.3s ease-in-out;
+    }
+    header ::ng-deep, ::ng-deep .novo-card-header {
+      &:not(:hover) .card-move-handle {
+        color: transparent;
+      }
+      .novo-icon.card-move-handle i {
+        color: inherit;
+      }
+    }
   }
 }

package/elements/card/CardContent.scss

@@ -3,6 +3,9 @@
 :host {
   display: block;
   &:not(.condensed) {
-    padding: $spacing-md $spacing-md;
+    padding: var(--spacing-md);
+    :root[data-theme=bh2026] & {
+      padding-inline: var(--spacing-gutter);
+    }
   }
 }

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,13 +2,36 @@
 
 :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);
+  :root[data-theme=bh2026] & {
+    padding: var(--spacing-padding-md) var(--spacing-padding-md) 0 var(--spacing-gutter);
+    gap: 0;
+    .card-move-handle {
+      transition: color 0.3s ease-in-out;
+    }
+    &:not(:hover) {
+      .card-move-handle {
+        color: transparent;
+      }
+    }
+    .novo-card-header-text {
+      font-size: var(--typography-card-header-font-size, 1.8rem);
+      font-weight: var(--typography-card-header-font-weight, 500);
+      ::ng-deep novo-title {
+        font: inherit;
+      }
+    }
+  }
+  
 
   .novo-card-header-text {
     flex: 1 1 0px;
+    :root[data-theme=bh2026] & {
+      padding-inline-start: var(--spacing-padding-sm);
+    }
   }
 }

package/elements/card/index.d.ts

@@ -6,6 +6,7 @@ import * as i3 from 'novo-elements/elements/icon';
 import * as i4 from 'novo-elements/elements/button';
 import * as i5 from 'novo-elements/elements/loading';
 import * as i6 from 'novo-elements/elements/tooltip';
+import * as i7 from 'novo-elements/elements/common';
 
 declare class CardActionsElement {
     static ɵfac: i0.ɵɵFactoryDeclaration<CardActionsElement, never>;
@@ -37,6 +38,7 @@ declare class CardElement implements OnChanges, OnInit {
     message: string;
     messageIcon: string;
     icon: string;
+    iconColorClass: 'icon-color-auto' | 'icon-color-parent' | undefined;
     iconTooltip: string;
     refresh: boolean;
     close: boolean;
@@ -44,7 +46,7 @@ declare class CardElement implements OnChanges, OnInit {
     loading: boolean;
     inline: boolean;
     inset: string;
-    get hbInset(): string;
+    get cardClass(): string;
     onClose: EventEmitter<void>;
     onRefresh: EventEmitter<void>;
     cardAutomationId: string;
@@ -57,12 +59,12 @@ declare class CardElement implements OnChanges, OnInit {
     toggleClose(): void;
     toggleRefresh(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardElement, "novo-card", never, { "padding": { "alias": "padding"; "required": false; }; "config": { "alias": "config"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconTooltip": { "alias": "iconTooltip"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "close": { "alias": "close"; "required": false; }; "move": { "alias": "move"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; }, { "onClose": "onClose"; "onRefresh": "onRefresh"; }, never, ["novo-card-actions", "*", "footer,novo-card-footer,[novo-card-footer],[novoCardFooter]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardElement, "novo-card", never, { "padding": { "alias": "padding"; "required": false; }; "config": { "alias": "config"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColorClass": { "alias": "iconColorClass"; "required": false; }; "iconTooltip": { "alias": "iconTooltip"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "close": { "alias": "close"; "required": false; }; "move": { "alias": "move"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; }, { "onClose": "onClose"; "onRefresh": "onRefresh"; }, never, ["novo-card-actions", "*", "footer,novo-card-footer,[novo-card-footer],[novoCardFooter]"], false, never>;
 }
 
 declare class NovoCardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoCardModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCardModule, [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoButtonModule, typeof i5.NovoLoadingModule, typeof i6.NovoTooltipModule], [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCardModule, [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoButtonModule, typeof i5.NovoLoadingModule, typeof i6.NovoTooltipModule, typeof i7.NovoCommonModule], [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoCardModule>;
 }
 

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-sm, 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;