novo-elements 13.1.0 → 13.2.0-next.2

package/elements/date-picker/DatePicker.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   .date-picker-container {
-    border-radius: 4px;
+    border-radius: var(--border-radius-sm, 4px);
     width: min-content;
     text-align: center;
     background: var(--background-main);
@@ -15,23 +15,23 @@
 
     .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(--border);
+      margin-left: var(--spacing-sm);
+      padding-left: var(--spacing-sm);
     }
 
     .calendar-top {
       display: flex;
       flex-flow: column;
-      background: $positive;
-      color: #fff;
+      background: var(--color-positive);
+      color: var(--color-contrast-positive);
       font-size: 14px;
       border-top-right-radius: 4px;
       border-top-left-radius: 4px;
       h1 {
         font-weight: 600;
         font-size: 4.2em;
-        color: #fff;
+        color: var(--color-contrast-positive);
         margin: 0;
         padding: 0;
       }
@@ -55,7 +55,7 @@
       }
     }
     .date-range-tabs {
-      border-bottom: 1px solid $off-white;
+      border-bottom: 1px solid var(--border-2);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -73,7 +73,7 @@
         }
       }
       & > span {
-        color: $positive;
+        color: var(--color-positive);
         text-align: center;
         flex: 1;
         cursor: pointer;
@@ -90,7 +90,7 @@
         height: 2px;
         bottom: 0;
         left: 0;
-        background: $positive;
+        background: var(--color-positive);
         transition: transform 200ms ease-in-out;
       }
     }
@@ -103,7 +103,7 @@
       -webkit-user-select: none;
       justify-content: space-between;
       cursor: default;
-      border-bottom: 1px solid $off-white;
+      border-bottom: 1px solid var(--border-2);
       .previous {
         width: 30px;
         height: 15px;
@@ -120,7 +120,7 @@
           width: 0;
         }
         &:hover:after {
-          border-right: 4px solid $positive;
+          border-right: 4px solid var(--color-positive);
           cursor: pointer;
         }
       }
@@ -128,22 +128,22 @@
         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;
+            background: var(--color-positive);
             color: #fff;
             cursor: pointer;
           }
         }
         .year {
-          border-radius: 2px;
+          border-radius: var(--border-radius-xsm, 2px);
           padding: 3px 8px;
           &:hover {
-            background: $positive;
+            background: var(--color-positive);
             color: #fff;
             cursor: pointer;
           }
@@ -166,7 +166,7 @@
         }
         &:hover:before {
           opacity: 1;
-          border-left: 4px solid $positive;
+          border-left: 4px solid var(--color-positive);
           cursor: pointer;
         }
       }

package/elements/date-picker/DatePickerInput.scss

@@ -11,7 +11,7 @@
   input {
     font-size: 1em;
     border: none;
-    border-bottom: 1px solid $light;
+    border-bottom: 1px solid var(--color-border);
     background: transparent !important;
     border-radius: 0;
     outline: none;
@@ -22,13 +22,13 @@
     box-shadow: none;
     box-sizing: content-box;
     transition: all 300ms;
-    color: $dark;
+    color: var(--font-color-base);
     &:focus {
-      border-bottom: 1px solid $ocean;
+      border-bottom: 1px solid var(--color-positive);
     }
   }
   span.error-text {
-    color: $negative;
+    color: var(--color-negative);
     padding-top: 10px;
     flex: 1;
     display: flex;
@@ -40,7 +40,7 @@
     position: absolute;
     right: 0;
     top: 0px;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
     cursor: pointer;
   }
 }

package/elements/date-picker/DateRangeInput.scss

@@ -38,7 +38,7 @@
     transition: all 300ms;
     color: var(--text-main);
     &:focus {
-      border-bottom: 1px solid $ocean;
+      border-bottom: 1px solid var(--color-positive);
     }
   }
   novo-icon {

package/elements/date-picker/MultiDateInput.scss

@@ -14,7 +14,7 @@
       margin: 0px;
     }
     &.selected {
-      background: $light;
+      background: var(--background-main, $light);
       border-radius: 50%;
     }
   }
@@ -44,4 +44,4 @@
       text-transform: capitalize;
     }
   }
-}
+}

package/elements/date-time-picker/_DateTimePicker.scss

@@ -6,8 +6,8 @@ $time-select-height: 45px;
   display: block;
   width: min-content;
   overflow: hidden;
-  border-radius: 4px;
-  background-color: #fff;
+  border-radius: var(--border-radius-sm, 4px);
+  background-color: var(--background-bright);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 7px rgba(0, 0, 0, 0.1);
   z-index: z(max);
   .date-time-container {
@@ -19,7 +19,7 @@ $time-select-height: 45px;
       position: absolute;
       height: 100%;
       width: 100%;
-      background: #fff;
+      background: var(--background-bright);
       transform: translateX(100%);
       transition: transform 200ms ease-in-out;
       z-index: z(above);
@@ -43,7 +43,7 @@ $time-select-height: 45px;
       position: relative;
       height: 45px;
       & > span {
-        color: $positive;
+        color: var(--color-positive);
         text-align: center;
         flex: 1;
         cursor: pointer;
@@ -62,7 +62,7 @@ $time-select-height: 45px;
         height: 2px;
         bottom: 0;
         left: 0;
-        background: $positive;
+        background: var(--color-positive);
         transition: transform 200ms ease-in-out;
       }
     }

package/elements/divider/divider.component.scss

@@ -6,7 +6,7 @@ $novo-divider-inset-margin: 80px;
 .novo-divider {
   display: block;
   margin: 0;
-  border-top-width: $novo-divider-width;
+  border-top-width: var(--border-width-thin);
   border-top-style: solid;
   border-top-color: var(--border);
 
@@ -16,8 +16,8 @@ $novo-divider-inset-margin: 80px;
     border-right-width: $novo-divider-width;
     border-right-style: solid;
     border-right-color: var(--border);
-    margin-left: $spacing-md;
-    margin-right: $spacing-md;
+    margin-left: var(--spacing-md);
+    margin-right: var(--spacing-md);
   }
 
   &.novo-divider-inset {

package/elements/dropdown/Dropdown.scss

@@ -16,20 +16,37 @@
       font-size: 0.8em !important;
       width: 1em !important;
       height: 1em !important;
-      margin: 0 0.5em;
+      margin: 0 var(--button-icon-margin, 0.5em);
     }
   }
 }
 
+// bh2026: swap out the collapse icon for the sort-desc icon and style to ensure proper placement
+:host-context([data-theme='bh2026']) {
+  ::ng-deep .novo-button-icon {
+    font-size: 1em !important;
+  }
+  ::ng-deep i.bhi-collapse {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+  ::ng-deep i.bhi-collapse::before {
+    content: "\f226"; // bhi-sort-desc - all code points are fixed in bullhorn-icons
+  }
+}
+
 .dropdown-container {
   background-color: var(--background-bright, $color-bright);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
   list-style: none;
   margin: 0;
   padding: 0;
   min-width: 180px;
-  margin-top: $spacing-sm;
-  margin-bottom: $spacing-sm;
-  box-shadow: $shadow-3;
+  margin-top: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+  box-shadow: var(--shadow-3);
   &.has-height {
     overflow: auto;
   }
@@ -40,7 +57,7 @@
       flex: 1;
       font-weight: 500;
       text-transform: uppercase;
-      padding: $spacing-sm $spacing-md;
+      padding: var(--spacing-sm) var(--spacing-md);
       display: block;
     }
     hr {

package/elements/expansion/_expansion-theme.scss

@@ -43,7 +43,7 @@
   .novo-expansion-panel.novo-expanded {
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &[theme="#{$name}"] {
-        border-top: 3px solid $color;
+        border-top: 3px solid getCssVarname($name);
       }
     }
   }

package/elements/expansion/expansion-panel.scss

@@ -13,6 +13,7 @@
   margin: 0;
   transition: margin 225ms ease-in-out;
   margin: 0px 16px;
+  border-radius: var(--border-radius-sm);
 
   &.novo-expanded {
     &:first-child {

package/elements/field/error/error.scss

@@ -5,5 +5,5 @@
   padding-bottom: 5px;
   flex: 1;
   font-size: 0.8em;
-  color: $negative;
+  color: var(--color-negative);
 }

package/elements/field/field-fill.scss

@@ -23,7 +23,7 @@
 
     &.novo-field-appearance-underlined {
       .novo-field-input {
-        border-bottom: 1px solid lighten($dark, 45%) !important;
+        border-bottom: 1px solid brightenLive('--border-hard', 45) !important;
       }
       &:not(.novo-focused):hover {
         .novo-field-input {
@@ -32,15 +32,15 @@
       }
       &.novo-focused {
         .novo-field-label {
-          color: $positive !important;
+          color: var(--color-positive) !important;
         }
         .novo-field-input {
-          border-bottom: 1px solid $positive !important;
+          border-bottom: 1px solid var(--color-positive) !important;
         }
       }
       &.novo-field-invalid {
         .novo-field-input {
-          border-bottom: 1px solid $negative !important;
+          border-bottom: 1px solid var(--color-negative) !important;
         }
       }
       &.novo-field-disabled {

package/elements/field/field-list.scss

@@ -4,7 +4,7 @@
 :host {
   &.novo-field-appearance-list {
     &.novo-field-layout-horizontal {
-      border-bottom: 1px solid $off-white !important;
+      border-bottom: 1px solid var(--border-2) !important;
       padding: 0.5rem 1.2rem;
       min-height: 4.2rem;
 
@@ -20,17 +20,17 @@
       &.novo-field-appearance-underlined {
         &:not(.novo-focused):hover {
           .novo-field-input {
-            background: rgba($positive, 0.15);
+            background: rgb(from var(--color-positive) r g b / 0.15);
           }
         }
         &.novo-focused {
           .novo-field-label {
-            color: $positive !important;
+            color: var(--color-positive) !important;
           }
         }
         &.novo-field-invalid {
           .novo-field-label {
-            color: $negative !important;
+            color: var(--color-negative) !important;
           }
         }
       }

package/elements/field/field-outline.scss

@@ -3,15 +3,15 @@
 
 :host {
   &.novo-field-appearance-outline {
-    border: 1px solid lighten($dark, 45%) !important;
-    border-radius: 0.4rem;
+    border: 1px solid brightenLive('--color-dark', 45) !important;
+    border-radius: var(--border-radius-round);
     padding: 0.5rem;
 
     &.novo-field-layout-vertical {
       .novo-field-label {
         background: white;
-        margin-top: -1.5rem;
-        margin-left: 0.5rem;
+        margin-top: calc(-1 * var(--spacing-xl));
+        margin-left: var(--spacing-sm);
         width: max-content;
         padding: 0.5rem;
       }
@@ -21,10 +21,10 @@
       border: 1px solid $dark !important;
     }
     &.novo-focused {
-      border: 1px solid $positive !important;
+      border: 1px solid var(--color-positive) !important;
     }
     &.novo-field-invalid {
-      border: 1px solid $negative !important;
+      border: 1px solid var(--color-negative) !important;
     }
   }
 }

package/elements/field/field-standard.scss

@@ -5,7 +5,7 @@
   &.novo-field-appearance-standard {
     &.novo-field-appearance-underlined {
       .novo-field-input {
-        border-bottom: 1px solid lighten($dark, 45%) !important;
+        border-bottom: 1px solid brightenLive('--color-dark', 45) !important;
       }
       &:not(.novo-focused):hover {
         .novo-field-input {
@@ -14,12 +14,12 @@
       }
       &.novo-focused {
         .novo-field-input {
-          border-bottom: 1px solid $positive !important;
+          border-bottom: 1px solid var(--color-positive) !important;
         }
       }
       &.novo-field-invalid {
         .novo-field-input {
-          border-bottom: 1px solid $negative !important;
+          border-bottom: 1px solid var(--color-negative) !important;
         }
       }
       &.novo-field-disabled {

package/elements/field/field.scss

@@ -39,7 +39,7 @@
 
   &.ng-invalid.ng-dirty.ng-touched {
     .novo-field-input {
-      border-bottom: 1px solid $negative !important;
+      border-bottom: 1px solid var(--color-negative) !important;
     }
   }
 
@@ -108,3 +108,20 @@
     }
   }
 }
+
+// bh2026: uppercase label + tighter value typography per Figma "Value - Finalized" spec
+:host-context([data-theme='bh2026']) {
+  .novo-field-label {
+      text-transform: var(--typography-input-label-sm-text-transform);
+    ::ng-deep novo-label {
+      font-weight: var(--typography-input-label-sm-font-weight);
+      font-size: var(--typography-input-label-sm-font-size);
+      letter-spacing: var(--typography-input-label-sm-letter-spacing);
+      color: var(--color-text-body);
+    }
+  }
+  .novo-field-input ::ng-deep .novo-input-element {
+    font-size: var(--typography-input-value-default-font-size);
+    font-weight: var(--typography-input-value-default-font-weight);
+  }
+}

package/elements/field/hint/hint.scss

@@ -16,3 +16,9 @@
     justify-content: flex-end;
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  font-size: var(--typography-input-value-sm-font-size);
+  font-weight: var(--typography-input-value-sm-font-weight);
+  color: var(--color-text-subtle);
+}

package/elements/form/ControlGroup.scss

@@ -6,7 +6,7 @@ novo-control-group {
   background: var(--background-bright, $color-white);
 
   &.novo-control-group-appearance-card {
-    border-radius: 0.4rem;
+    border-radius: var(--border-radius-round);
     box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 7px 0px, rgba(0, 0, 0, 0.2) 0px 1px 3px 0px;
   }
 
@@ -20,7 +20,7 @@ novo-control-group {
     align-items: center;
     justify-content: space-between;
     font-weight: 600;
-    border-radius: 0.4rem 0.4rem 0 0;
+    border-radius: var(--border-radius-round) 0.4rem 0 0;
 
     button {
       padding: 3px 15px;
@@ -30,7 +30,7 @@ novo-control-group {
       align-items: center;
     }
     label.novo-control-group-description {
-      font-size: 1rem;
+      font-size: var(--font-size-xs);
       font-weight: 500;
       padding-right: 10px;
     }
@@ -50,6 +50,19 @@ novo-control-group {
     }
   }
 
+  // bh2026: description text and column-header labels match decoration weight/size of hint and field-message
+  [data-theme='bh2026'] & {
+    .novo-section-header label.novo-control-group-description {
+      font-size: var(--typography-input-value-sm-font-size);
+      font-weight: var(--typography-input-value-sm-font-weight);
+      color: var(--color-text-subtle);
+    }
+    .novo-control-group-labels .novo-control-group-control-label > span {
+      font-size: var(--typography-input-value-sm-font-size);
+      font-weight: var(--typography-input-value-sm-font-weight);
+    }
+  }
+
   .novo-control-group-controls {
     display: flex;
     flex-wrap: nowrap;
@@ -100,7 +113,7 @@ novo-control-group {
       .novo-control-group-row {
         display: flex;
         align-items: center;
-        border-bottom: 1px solid lighten($dark, 45%);
+        border-bottom: 1px solid brightenLive('--color-dark', 45);
         padding: 0.4em;
         &:last-of-type {
           border-bottom: none;
@@ -118,7 +131,7 @@ novo-control-group {
         flex: 1;
         > span {
           color: var(--text-muted);
-          font-size: 1rem;
+          font-size: var(--font-size-xs);
           font-weight: 500;
           text-transform: uppercase;
           overflow: hidden;
@@ -168,9 +181,9 @@ novo-control-group {
         width: 3rem;
         min-height: 3rem;
         min-width: 3rem;
-        margin-left: 1rem;
+        margin-left: var(--spacing-md);
         i.bhi-delete-o {
-          color: $negative;
+          color: var(--color-negative);
           font-size: 1.2em;
         }
       }