novo-elements 6.0.0-next.7 → 6.0.0

package/elements/button/styles/button-icon.scss

@@ -5,7 +5,7 @@
   &[theme="icon"] {
     @include theme-text-colors("color");
     padding: $spacing-sm;
-    font-size: 1.6rem;
+    font-size: 1.4rem;
     height: 2.4rem;
     &[inverse] {
       color: #fff;

package/elements/button/styles/button-other.scss

@@ -7,7 +7,7 @@
     color: $dark;
     border: none;
     border-radius: 0;
-    border-bottom: 1px solid $dark;
+    border-bottom: 1px solid var(--border);
     margin-bottom: 4px;
     padding: $spacing-xs $spacing-sm;
     font-size: 1.2rem;
@@ -16,7 +16,7 @@
     &:hover,
     &:focus,
     &:active {
-      border-bottom: 1px solid $positive;
+      border-bottom: 1px solid var(--selection);
     }
   }
   // Select Themed Button
@@ -27,9 +27,9 @@
     align-items: center;
     background-color: transparent;
     border: none;
-    border-bottom: 1px solid lighten($dark, 45%);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
-    color: $dark;
+    color: var(--text-main);
     padding: 0;
     height: 2rem;
     min-height: 2rem;
@@ -43,7 +43,7 @@
     height: 1.8rem;
 
     &.empty {
-      color: #a9a9a9;
+      color: var(--text-muted);
     }
     &:focus,
     &:hover {
@@ -56,14 +56,14 @@
       }
     }
     &:focus {
-      border-bottom: 1px solid $positive;
+      border-bottom: 1px solid var(--selection);
       i {
         color: rgba(0, 0, 0, 0.73);
       }
     }
     i {
       font-size: 0.8rem;
-      color: $dark;
+      color: var(--text-main);
       opacity: 0.45;
     }
   }

package/elements/button/styles/button-secondary.scss

@@ -24,6 +24,7 @@
     &:hover,
     &:focus {
       box-shadow: $shadow-2, $shadow-1;
+      background: $white;
     }
     &:active {
       box-shadow: $shadow-1;

package/elements/button/styles/button-standard.scss

@@ -4,8 +4,8 @@
   // Standard Themed Icon
   &[theme="standard"] {
     @include theme-backgrounds("color", false);
-    color: $dark;
-    background: $light;
+    color: var(--button-text);
+    background: var(--button-background);
     &:hover,
     &:focus {
       box-shadow: $shadow-2, $shadow-1;

package/elements/card/Card.scss

@@ -20,7 +20,7 @@
     right: 0;
     bottom: 0;
     border-radius: 0.4em;
-    background: $white;
+    background-color: var(--background-bright, $color-white);
     display: flex;
     flex-direction: column;
     justify-content: center;

package/elements/category-dropdown/CategoryDropdown.scss

@@ -65,7 +65,7 @@ novo-category-dropdown {
       i.bhi-search,
       i.bhi-times {
         position: absolute;
-        bottom: 8px;
+        bottom: 15px;
         right: 5px;
         color: #aaaaaa;
         font-size: 1.2rem;

package/elements/chips/Chip.scss

@@ -174,12 +174,17 @@ $chip-spacing: (
       border-radius: 0.4rem;
       padding: $spacing-none $spacing;
       min-height: $height;
+      gap: $spacing;
+
       &.novo-chip-with-avatar {
         padding-left: $spacing / 2;
       }
       &.novo-chip-with-trailing-icon {
         padding-right: $spacing / 2;
       }
+      .novo-text {
+        font-size: inherit;
+      }
     }
   }
 

package/elements/chips/Chips.scss

@@ -265,6 +265,9 @@ novo-row-chips {
         min-height: 1em;
       }
     }
+    i.bhi-delete-o {
+      color: $negative;
+    }
   }
   .novo-chip.novo-row-chip {
     padding: 0;

package/elements/ckeditor/CKEditor.scss

@@ -2,11 +2,11 @@ novo-editor {
   .cke {
     font: inherit !important;
     box-shadow: none;
-    border-color: $background-dark;
+    border-color: var(--background-muted);
 
     .cke_top,
     .cke_bottom {
-      background: $background-dark none;
+      background: var(--background-muted) none;
       box-shadow: none;
     }
 
@@ -23,15 +23,38 @@ novo-editor {
 .cke_dialog {
   .cke_dialog_title {
     text-shadow: none;
-    background: $background-dark none;
+    background: var(--background-muted) none;
     box-shadow: none;
     border-bottom: none;
   }
 
   .cke_dialog_footer {
     text-shadow: none;
-    background: $background-dark none;
+    background: var(--background-muted) none;
     box-shadow: none;
     border-top: none;
   }
 }
+
+.theme-dark {
+  .cke_button {
+    filter: invert(1);
+  }
+  .cke_combo {
+    a.cke_combo_button {
+      &:hover,
+      &:active,
+      &:focus,
+      &.cke_combo_on {
+        background: var(--background-main);
+        border: 1px solid var(--border);
+      }
+      .cke_combo_text {
+        color: white;
+      }
+      .cke_combo_arrow {
+        border-top-color: white;
+      }
+    }
+  }
+}

package/elements/common/typography/caption/caption.scss

@@ -4,9 +4,4 @@
 :host {
   display: inline;
   @include novo-caption-text();
-
-  novo-icon {
-    vertical-align: top;
-    font-size: 1em;
-  }
 }

package/elements/common/typography/label/label.scss

@@ -4,11 +4,4 @@
 :host {
   display: inline-block;
   @include novo-label-text();
-
-  &::ng-deep {
-    novo-icon {
-      vertical-align: top;
-      font-size: 1em;
-    }
-  }
 }

package/elements/common/typography/link/link.scss

@@ -7,8 +7,10 @@
 
   &::ng-deep {
     novo-icon {
-      vertical-align: top;
       font-size: 1em;
     }
   }
+  novo-icon {
+    font-size: 1em;
+  }
 }

package/elements/common/typography/text/text.scss

@@ -11,11 +11,4 @@
     min-width: 55ch;
     max-width: 75ch;
   }
-
-  &::ng-deep {
-    novo-icon {
-      vertical-align: top;
-      font-size: inherit;
-    }
-  }
 }

package/elements/common/typography/text.mixins.scss

@@ -6,7 +6,9 @@
 }
 
 @mixin base-text-rules() {
+  transition-property: color, opacity;
   transition: 0.2s ease-out;
+  vertical-align: middle;
 
   &.text-nowrap {
     white-space: nowrap;
@@ -137,7 +139,7 @@
 }
 
 @mixin novo-title-text() {
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.5;
   color: var(--text-main, $dark);
   white-space: nowrap;
@@ -148,7 +150,7 @@
 
 @mixin novo-label-text() {
   font-weight: 500;
-  text-transform: uppercase;
+  // text-transform: uppercase;
   word-break: word-break;
   overflow-wrap: break-word;
   line-height: 1.375;

package/elements/common/typography/title/title.scss

@@ -4,11 +4,4 @@
 :host {
   display: block;
   @include novo-title-text();
-
-  &::ng-deep {
-    novo-icon {
-      vertical-align: top;
-      font-size: 1em;
-    }
-  }
 }

package/elements/data-table/data-table.component.scss

@@ -152,17 +152,17 @@ cdk-table {
     display: inline-block;
   }
   .filter-button {
-    color: $light;
+    color: var(--text-muted);
     background: transparent;
     pointer-events: all;
     margin-left: 0.5rem;
     line-height: 1em;
 
     &:hover {
-      color: $dark;
+      color: var(--text-main);
     }
     &.filter-active {
-      color: $positive;
+      color: var(--selection);
     }
   }
 
@@ -635,7 +635,7 @@ novo-data-table-pagination {
   max-width: 230px;
   max-height: 500px;
   overflow-x: hidden;
-  overflow-y: auto;
+  overflow-y: hidden;
   &.right {
     margin-left: -150px !important;
   }
@@ -651,6 +651,11 @@ novo-data-table-pagination {
     //   }
     // }
   }
+  .optgroup-container {
+    max-height: 346px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
   .dropdown-list-options {
     max-height: 346px;
     overflow-y: auto;

package/elements/data-table/sort-filter/sort-button.component.scss

@@ -9,7 +9,7 @@
   novo-icon {
     position: absolute;
     opacity: 0;
-    color: $light;
+    color: var(--text-muted);
     &:hover {
       color: var(--selection);
     }

package/elements/date-picker/DatePicker.scss

@@ -276,6 +276,7 @@ novo-date-range-input {
   // display: block;
   display: flex;
   flex-flow: row nowrap;
+  height: min-content;
 
   &.disabled {
     pointer-events: none;
@@ -283,17 +284,19 @@ novo-date-range-input {
   }
   .date-range-input-container {
     position: relative;
+    height: min-content;
   }
   .date-range-input-divider {
     font-weight: 800;
     margin: 0 0.5em;
     align-self: center;
+    height: min-content;
   }
 
   input {
     font-size: 1em;
     border: none;
-    border-bottom: 1px solid rgba(lighten($dark, 12%), 0.25);
+    border-bottom: 1px solid var(--border);
     background: transparent !important;
     border-radius: 0;
     outline: none;
@@ -304,7 +307,7 @@ novo-date-range-input {
     box-shadow: none;
     box-sizing: content-box;
     transition: all 300ms;
-    color: $dark;
+    color: var(--text-main);
     &:focus {
       border-bottom: 1px solid $ocean;
     }

package/elements/field/field.scss

@@ -91,5 +91,6 @@
 
   .novo-field-hint-wrapper {
     display: flex;
+    flex-direction: column;
   }
 }

package/elements/form/ControlGroup.scss

@@ -128,7 +128,7 @@ novo-control-group {
         }
       }
     }
-    > .novo-control-group-row {
+    .novo-control-group-row {
       .novo-control-group-control {
         display: flex;
       }
@@ -159,7 +159,8 @@ novo-control-group {
           align-items: center;
         }
       }
-      button.control-group-action[theme="icon"] {
+      button[theme="icon"],
+      novo-button[theme="icon"] {
         padding: 3px;
         height: 3rem;
         width: 3rem;

package/elements/form/Form.scss

@@ -2,18 +2,20 @@
 @import "./extras/file/FileInput";
 @import "./ControlGroup";
 .novo-form-control-label {
-  color: var(--text-main);
-  font-size: 1.1rem;
+  font-weight: 500;
+  word-break: word-break;
+  overflow-wrap: break-word;
+  line-height: 1.375;
+  color: var(--text-muted);
+  font-size: var(--font-size-label);
+  // original
   flex: 1;
   max-width: 130px;
   min-width: 130px;
-  font-weight: 500;
   transition: 200ms ease-out;
   margin-right: 35px;
-  text-transform: uppercase;
   padding-top: 8px;
-  word-break: word-break;
-  overflow-wrap: break-word;
+
   &.encrypted {
     max-width: 110px;
     min-width: 110px;
@@ -36,24 +38,6 @@ novo-form {
     form {
       width: 100%;
 
-      .novo-fieldset-header {
-        background: $off-white;
-        box-sizing: content-box;
-        padding: 1rem 1rem 1rem 2rem;
-        margin-bottom: 2rem;
-        display: flex;
-        margin-left: -1.5rem;
-        margin-right: -1.5rem;
-        font-size: 1.8rem;
-        i,
-        novo-icon {
-          margin: 1px 10px 1px 6px;
-        }
-        &.hidden {
-          display: none;
-        }
-      }
-
       div.novo-form-row,
       div.novo-control-group-control,
       td.novo-form-row {
@@ -204,7 +188,7 @@ novo-form {
           }
           .field-message,
           novo-tip-well.active {
-            font-size: 0.8em;
+            font-size: var(--font-size-caption);
             padding: 5px 0;
             margin-left: 22px;
             margin-bottom: 5px;
@@ -246,6 +230,7 @@ novo-form {
                 display: flex;
               }
               .description {
+                color: var(--text-muted);
                 display: flex;
                 padding-bottom: 5px;
                 flex: 1;
@@ -257,7 +242,7 @@ novo-form {
           }
           .error-message {
             color: $negative;
-            font-size: 0.8em;
+            font-size: var(--font-size-caption);
             padding: 5px 0;
             flex-basis: 100%;
             margin-left: 185px;
@@ -410,7 +395,7 @@ novo-form {
                       box-sizing: content-box;
                       transition: all 300ms;
                       transition: height 0ms;
-                      color: #26282b;
+                      color: var(--text-main);
                       overflow-y: hidden;
                       &:hover {
                         border-bottom: 1px solid lighten($dark, 15%);
@@ -736,12 +721,15 @@ novo-form {
                   }
                 }
                 > label.novo-control-label {
-                  bottom: 20px;
-                  color: var(--text-main);
-                  font-size: 1.1rem;
                   font-weight: 500;
-                  text-transform: uppercase;
+                  word-break: word-break;
+                  overflow-wrap: break-word;
+                  line-height: 1.375;
+                  color: var(--text-muted);
+                  font-size: var(--font-size-label);
+                  // original
                   position: absolute;
+                  bottom: 20px;
                   left: 22px;
                   pointer-events: none;
                   z-index: z(default);
@@ -839,13 +827,14 @@ control-prompt-modal {
 
 // Isolate styles
 .novo-fieldset-header {
-  background: $off-white;
+  background: var(--background-muted);
   box-sizing: content-box;
-  padding: 1rem 1rem 1rem 2rem;
+  padding: 1rem 1rem 1rem 0.5rem;
   margin-bottom: 2rem;
   display: flex;
   margin-left: -1.5rem;
   margin-right: -1.5rem;
+  font-size: 1.8rem;
   i,
   novo-icon {
     margin: 1px 10px 1px 6px;

package/elements/header/Header.scss

@@ -1,5 +1,6 @@
 .novo-header {
   display: block;
+  background-color: var(--background-bright, $white);
 
   .spacer {
     flex: 1 1 0%;
@@ -14,7 +15,6 @@
   &.header-size-small > section {
     height: 3.2rem;
   }
-
   &.header-size-default > section {
     height: 5rem;
   }
@@ -31,8 +31,8 @@
     box-sizing: border-box;
     // line-height: 4rem;
 
-    i.header-icon {
-      padding: 12px;
+    .header-icon {
+      font-size: var(--font-size-2xl);
     }
     div.header-title {
       display: flex;
@@ -48,25 +48,21 @@
       display: flex;
       flex-direction: column;
       max-width: 100%;
+      .novo-title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
       h1 {
-        font-size: 1.8rem;
-        // line-height: 1.5;
+        @include novo-title-text();
         margin: 0;
         padding: 0;
         display: inline-block;
-        font-weight: 500;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         padding-right: 20px;
       }
-      header-spacer {
-        display: inline-block;
-        height: 1.8em;
-        width: 2px;
-        margin: 0 0.6em;
-        background-color: rgba(0, 0, 0, 0.25);
-      }
     }
     > section {
       flex: 2 2 250px;
@@ -80,13 +76,19 @@
       gap: $spacing-sm;
     }
 
-    novo-action {
+    .novo-action {
       display: flex;
     }
   }
 
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.novo-accent-#{$name} {
+      .header-titles,
+      .header-title {
+        .novo-icon {
+          color: $color;
+        }
+      }
       & > section:first-of-type {
         border-bottom: 2px solid $color;
       }
@@ -119,22 +121,16 @@
     }
   }
   &.condensed {
+    .header-title,
+    .header-titles {
+      line-height: 1.375;
+    }
     > section {
-      padding: 0.2rem 1rem;
-      i {
-        font-size: 1.2rem;
-      }
+      height: 3.6rem;
     }
-    novo-icon {
+    .novo-icon {
       margin-right: 0.5rem !important;
-      > i {
-        font-size: 1.4rem;
-      }
-    }
-    button[theme][theme="icon"] {
-      width: 30px !important;
-      height: 30px !important;
-      padding: 5px;
+      font-size: 1.8rem;
     }
   }
 
@@ -143,3 +139,11 @@
     flex-flow: row nowrap;
   }
 }
+
+header-spacer {
+  display: inline-block;
+  height: 1.8em;
+  width: 2px;
+  margin: 0 0.6em;
+  background-color: rgba(0, 0, 0, 0.25);
+}

package/elements/icon/Icon.scss

@@ -13,6 +13,8 @@ novo-icon {
   align-items: center;
   justify-content: center;
   font-size: 1.2em;
+  line-height: inherit;
+  vertical-align: middle;
   i {
     display: flex;
     justify-content: center;
@@ -26,7 +28,7 @@ novo-icon {
       color: inherit;
     }
     * {
-      display: none;
+      display: none !important;
     }
   }
 

package/elements/list/List.scss

@@ -63,7 +63,7 @@ button[list-item] {
   .list-item {
     display: flex;
     flex-direction: column;
-    flex: 1 0 auto;
+    flex: 1 0 100%;
   }
   .novo-item-header {
     .novo-item-header-container {