novo-elements 13.1.0 → 13.2.0

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-default, 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

@@ -27,9 +27,9 @@
   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 +40,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,16 @@
     }
   }
 }
+
+// bh2026: lighter label
+:host-context([data-theme='bh2026']) {
+  .novo-field-label {
+    font-weight: 600;
+    font-size: 1rem;
+    color: var(--color-content-subtle, #8ca1b9);
+  }
+  .novo-field-input ::ng-deep .novo-input-element {
+    font-size: 1.4rem;
+    font-weight: 500;
+  }
+}

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;
     }
@@ -100,7 +100,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 +118,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 +168,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;
         }
       }

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;
                 }

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);
     }
   }
 }