novo-elements 13.1.0 → 13.2.0-next.2

package/elements/list/list-item.scss

@@ -3,14 +3,14 @@
 @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
   $contrast: getContrastColor($name);
   :host-context([theme="#{$name}"]) {
-    background: $color;
-    color: $contrast;
+    background: getCssVarname($name);
+    color: getContrastColor($name);
     border: unset;
     border-bottom: 1px solid rgba(#fff, 0.1);
     outline: none;
     item-title h6,
     i {
-      color: $contrast;
+      color: getContrastColor($name);
     }
     item-content {
       > * {
@@ -19,7 +19,7 @@
     }
     &:hover,
     &:active {
-      background: lighten($color, 20%);
+      background: brightenLive('--color-#{$name}', 20);
     }
   }
 }
@@ -31,10 +31,10 @@
   flex-direction: row;
   outline: none;
   &:hover {
-    background: rgba($positive, 0.2);
+    background: rgb(from var(--color-positive) r g b / 0.2);
   }
   &.active {
-    background: rgba($positive, 0.3);
+    background: rgb(from var(--color-positive) r g b / 0.3);
   }
   &:last-child {
     border-bottom: none;

package/elements/loading/NovoSpinner.scss

@@ -62,7 +62,7 @@ $large-spinner-size: 2.1em;
   &.white,
   &[inverse] {
     .dot:before {
-      background-color: $white;
+      background-color: var(--background-body);
     }
   }
 

package/elements/menu/menu-content.component.scss

@@ -16,14 +16,15 @@
       cursor: default;
       list-style: none;
       background-color: var(--background-bright);
+      border-radius: var(--border-radius-sm);
       padding-inline-start: 0px !important;
       box-shadow: $shadow-multi;
       :hover {
-        background: rgba($ocean, 0.1);
-        color: $dark;
+        background: rgb(from var(--color-positive) r g b / 0.1);
+        color: var(--font-color-base);
       }
       :active {
-        background: rgba($ocean, 0.4);
+        background: rgb(from var(--color-positive) r g b / 0.4);
       }
       .menu-item-container {
         display: flex;
@@ -31,7 +32,7 @@
         position: relative;
         .sub-menu-caret {
           position: absolute;
-          right: $spacing-sm;
+          right: var(--spacing-sm);
         }
       }
 
@@ -39,7 +40,7 @@
         @include novo-body-text();
         cursor: pointer;
         margin: 0;
-        padding: $spacing-md $spacing-md $spacing-md $spacing-lg;
+        padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -49,11 +50,11 @@
       .divider {
         order: none;
         height: 1px;
-        background: $silver;
+        background: var(--background-dark);
       }
       a {
         &.disabled {
-          color: $disabled;
+          color: var(--color-disabled);
           cursor: not-allowed;
         }
       }

package/elements/modal/modal.component.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   background-color: var(--background-bright);
-  border-radius: 4px;
+  border-radius: var(--border-radius-md, 4px);
   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.2);
   z-index: z(modal);
   position: relative;
@@ -12,13 +12,13 @@
 
   > .novo-button.modal-close {
     position: absolute;
-    right: $spacing-xl;
-    top: $spacing-xl;
+    right: var(--spacing-xl);
+    top: var(--spacing-xl);
   }
 
   > ::ng-deep header {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+    border-top-left-radius: var(--border-radius-md, 4px);
+    border-top-right-radius: var(--border-radius-md, 4px);
     overflow: hidden;
 
     h1,
@@ -28,7 +28,7 @@
   }
 
   > ::ng-deep section {
-    padding: $spacing-md $spacing-xl;
+    padding: var(--spacing-md) var(--spacing-xl);
     max-height: 500px;
     overflow: auto;
   }
@@ -37,8 +37,8 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding: $spacing-md;
-    gap: $spacing-md;
+    padding: var(--spacing-md);
+    gap: var(--spacing-md);
     ::ng-deep button {
       min-width: 10rem;
     }

package/elements/modal/notification.component.scss

@@ -4,7 +4,7 @@
   text-align: center;
   display: block;
   background-color: var(--background-bright);
-  border-radius: 4px;
+  border-radius: var(--border-radius-md, 4px);
   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.2);
   z-index: z(modal);
   position: relative;
@@ -13,55 +13,55 @@
 
   & > .novo-button.modal-close {
     position: absolute;
-    right: $spacing-xl;
-    top: $spacing-xl;
+    right: var(--spacing-xl);
+    top: var(--spacing-xl);
   }
 
   ::ng-deep .novo-notification-body {
     display: flex;
     flex-direction: column;
-    padding: 0 $spacing-xl;
-    margin: $spacing-lg 0 55px;
+    padding: 0 var(--spacing-xl);
+    margin: var(--spacing-lg) 0 55px;
 
     & > img {
       width: 100%;
     }
 
     h1 {
-      font-size: $font-size-2xl;
+      font-size: var(--font-size-2xl);
       margin: 10px auto 0;
     }
     h2 {
-      font-size: $font-size-xl;
+      font-size: var(--font-size-xl);
       color: var(--text-muted);
       margin: 0 auto;
       padding: 0;
     }
     h3 {
-      font-size: $font-size-lg;
+      font-size: var(--font-size-lg);
       margin: 0 auto;
     }
     h4 {
-      font-size: $font-size-lg;
+      font-size: var(--font-size-lg);
       color: var(--text-muted);
       margin: 0 auto;
       padding: 0;
     }
     h5 {
-      font-size: $font-size-md;
+      font-size: var(--font-size-md);
       margin: 0 auto;
     }
     h6 {
-      font-size: $font-size-md;
+      font-size: var(--font-size-md);
       margin: 0 auto;
     }
 
     i.indicator {
       color: var(--text-muted);
       border: 1px solid var(--text-muted);
-      font-size: $font-size-2xl;
+      font-size: var(--font-size-2xl);
       border-radius: 50%;
-      padding: $spacing-md;
+      padding: var(--spacing-md);
       margin: 2rem auto;
       align-self: center;
     }
@@ -70,8 +70,8 @@
   &[type="success"] {
     .novo-notification-body {
       i.indicator {
-        color: $success;
-        border-color: $success;
+        color: var(--color-success);
+        border-color: var(--color-success);
       }
     }
   }
@@ -79,8 +79,8 @@
   &[type="warning"] {
     .novo-notification-body {
       i.indicator {
-        color: $warning;
-        border-color: $warning;
+        color: var(--color-warning);
+        border-color: var(--color-warning);
       }
     }
   }
@@ -88,8 +88,8 @@
   &[type="error"] {
     .novo-notification-body {
       i.indicator {
-        color: $negative;
-        border-color: $negative;
+        color: var(--color-negative);
+        border-color: var(--color-negative);
       }
     }
   }
@@ -98,8 +98,8 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding: $spacing-md;
-    gap: $spacing-md;
+    padding: var(--spacing-md);
+    gap: var(--spacing-md);
 
     button {
       min-width: 10rem;

package/elements/multi-picker/_MultiPicker.scss

@@ -41,7 +41,7 @@
           i {
             &.bhi-checkbox-empty,
             &.bhi-checkbox-indeterminate {
-              color: $positive;
+              color: var(--color-positive);
             }
           }
         }
@@ -61,7 +61,7 @@
 
       &.bhi-checkbox-filled,
       &.bhi-checkbox-indeterminate {
-        color: $positive;
+        color: var(--color-positive);
       }
     }
   }

package/elements/picker/Picker.scss

@@ -12,7 +12,7 @@ novo-picker {
   &.selected,
   &.selected:hover {
     & + i {
-      color: $positive;
+      color: var(--color-positive);
     }
   }
   padding-bottom: 0;
@@ -27,7 +27,7 @@ novo-picker {
     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;
@@ -39,10 +39,10 @@ novo-picker {
     transition: all 300ms;
     color: #26282b;
     &: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;
@@ -52,19 +52,19 @@ novo-picker {
     }
     &.entity-selected {
       padding-left: 2.5em;
-      background: $off-white !important;
+      background: var(--background-main) !important;
     }
     &:disabled {
-      border-bottom: 1px dashed lighten($dark, 45%) !important;
+      border-bottom: 1px dashed brightenLive('--color-dark', 45) !important;
     }
   }
   i.bhi-more {
     position: absolute;
     left: 0;
     top: 2px;
-    background: $off-white;
+    background: var(--background-main);
     font-size: 1em;
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     padding: 3px;
   }
   i.entity-icon {
@@ -72,13 +72,13 @@ novo-picker {
     left: 5px;
     top: 3px;
     font-size: 1em;
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     padding: 3px;
     color: $white;
 
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &.#{$name} {
-        background: $color;
+        background: getCssVarname($name);
       }
     }
   }
@@ -86,18 +86,18 @@ novo-picker {
   i.bhi-times {
     position: absolute;
     right: 0;
-    color: $dark;
+    color: var(--font-color-base);
     &.entity-selected {
       right: 5px;
     }
   }
   i.bhi-search {
     top: 0px;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
   }
   i.bhi-times {
     top: 0px;
     cursor: pointer;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
   }
 }

package/elements/picker/extras/grouped-multi-picker-results/GroupedMultiPickerResults.scss

@@ -1,12 +1,12 @@
 @import "../../../../styles/variables.scss";
 
 :host {
-  background-color: $white;
+  background-color: var(--background-body);
   max-height: 300px;
   padding: 0;
   margin: 0;
   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);
-  border: 1px solid $positive;
+  border: 1px solid var(--color-positive);
   transform: translateY(0%);
   transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
   display: flex;
@@ -36,7 +36,7 @@
       height: 50px;
       display: flex;
       align-items: center;
-      border-top: 1px solid $off-white;
+      border-top: 1px solid var(--border-2);
       label {
         font-weight: 500;
       }
@@ -56,14 +56,14 @@
         color: #999999;
       }
       &.active {
-        color: $positive;
-        border-left-color: $positive;
+        color: var(--color-positive);
+        border-left-color: var(--color-positive);
         background-color: #e9e9e9;
         item-end {
-          color: $positive;
+          color: var(--color-positive);
         }
         ::ng-deep .list-item > item-content > * {
-          color: $positive !important;
+          color: var(--color-positive) !important;
         }
       }
     }
@@ -82,8 +82,8 @@
         padding: 0.95em;
         background: transparent !important;
         border: none;
-        border-bottom: 1px solid $off-white;
-        border-left: 1px solid $off-white;
+        border-bottom: 1px solid var(--border-2);
+        border-left: 1px solid var(--border-2);
         border-radius: 0;
         border-radius: 0;
         outline: none;
@@ -93,11 +93,11 @@
         transition: all 300ms;
         color: #26282b;
         &:hover {
-          border-bottom: 1px solid $off-white;
+          border-bottom: 1px solid var(--border-2);
         }
         &:focus {
-          border-bottom: 1px solid $positive;
-          border-left: 1px solid $positive;
+          border-bottom: 1px solid var(--color-positive);
+          border-left: 1px solid var(--color-positive);
         }
         &[disabled] {
           pointer-events: none;
@@ -109,7 +109,7 @@
         position: absolute;
         right: 10px;
         top: 12px;
-        font-size: 1.2rem;
+        font-size: var(--font-size-sm);
         &.disabled {
           pointer-events: none;
           opacity: 0.4;
@@ -120,7 +120,7 @@
       }
     }
     .grouped-multi-picker-list-container {
-      border-left: 1px solid $off-white;
+      border-left: 1px solid var(--border-2);
       flex: 1;
       display: flex;
       flex-direction: column;

package/elements/picker/extras/mixed-multi-picker-results/MixedMultiPickerResults.scss

@@ -1,12 +1,12 @@
 @import "../../../../styles/variables.scss";
 
 :host {
-  background-color: $white;
+  background-color: var(--background-body);
   max-height: 300px;
   padding: 0;
   margin: 0;
   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);
-  border: 1px solid $positive;
+  border: 1px solid var(--color-positive);
   transform: translateY(0%);
   transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
   display: flex;
@@ -34,7 +34,7 @@
         width: 100%;
       }
       &:hover {
-        background-color: lighten($positive, 39%);
+        background-color: brightenLive('--color-positive', 39);
       }
       .list-item {
         justify-content: center;
@@ -43,14 +43,14 @@
         color: #999999;
       }
       &.active {
-        color: $positive;
-        border-left-color: $positive;
-        background-color: lighten($positive, 35%);
+        color: var(--color-positive);
+        border-left-color: var(--color-positive);
+        background-color: brightenLive('--color-positive', 35);
         item-end {
-          color: $positive;
+          color: var(--color-positive);
         }
         .list-item > item-content > * {
-          color: $positive !important;
+          color: var(--color-positive) !important;
         }
       }
       item-content {
@@ -76,10 +76,10 @@
           width: 100%;
         }
         &.active {
-          background-color: lighten($positive, 35%);
+          background-color: brightenLive('--color-positive', 35);
         }
         &:hover {
-          background-color: lighten($positive, 39%);
+          background-color: brightenLive('--color-positive', 39);
         }
         item-content {
           flex-flow: row wrap;
@@ -97,8 +97,8 @@
         padding: 0.95em;
         background: transparent !important;
         border: none;
-        border-bottom: 1px solid $off-white;
-        border-left: 1px solid $off-white;
+        border-bottom: 1px solid var(--border-2);
+        border-left: 1px solid var(--border-2);
         border-radius: 0;
         border-radius: 0;
         outline: none;
@@ -108,11 +108,11 @@
         transition: all 300ms;
         color: #26282b;
         &:hover {
-          border-bottom: 1px solid $off-white;
+          border-bottom: 1px solid var(--border-2);
         }
         &:focus {
-          border-bottom: 1px solid $positive;
-          border-left: 1px solid $positive;
+          border-bottom: 1px solid var(--color-positive);
+          border-left: 1px solid var(--color-positive);
         }
         &[disabled] {
           pointer-events: none;
@@ -124,7 +124,7 @@
         position: absolute;
         right: 10px;
         top: 12px;
-        font-size: 1.2rem;
+        font-size: var(--font-size-sm);
         &.disabled {
           pointer-events: none;
           opacity: 0.4;
@@ -135,7 +135,7 @@
       }
     }
     .mixed-multi-picker-list-container {
-      border-left: 1px solid $off-white;
+      border-left: 1px solid var(--border-2);
       flex: 1;
       display: flex;
       flex-direction: column;

package/elements/picker/extras/picker-results/PickerResult.scss

@@ -7,6 +7,6 @@
 
 :host(.active) {
   > novo-list-item {
-    background-color: lighten($positive, 35%);
+    background-color: brightenLive('--color-positive', 35);
   }
 }