novo-elements 13.1.0-next.9 → 13.2.0-next.1

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

@@ -11,7 +11,6 @@
     background: var(--color-white);
     color: var(--button-secondary-text, var(--color-positive));
     border: var(--button-secondary-border, 1px solid $positive);
-    padding: 0 calc(#{var(--spacing-md)} - 1px);
 
     i.loading {
       margin-left: 0.8rem;

package/elements/card/Card.scss

@@ -117,7 +117,7 @@
   }
 }
 
-// bh2026: roomier, rounder card, larger title
+// bh2026: rounder card, grippy on hover
 :host-context([data-theme='bh2026']) {
   border-radius: var(--border-radius-md, 1.6rem);
   border: 1px solid var(--color-border-default, #f0f5f9);
@@ -128,26 +128,34 @@
   }
 
   header {
-    padding: var(--spacing-md, 1.6rem);
-    margin-left: var(--spacing-md);
+    padding: var(--spacing-16, 1.6rem) var(--spacing-24, 2.4rem) var(--spacing-16, 1.6rem) 0;
+    border-bottom: 1px solid var(--color-border-default, #f0f5f9);
 
     .title {
-      ::ng-deep i.bhi-move {
-        display: none;
-      }
-
       h1,
       h2,
       h3 {
-        font-size: 1.8rem;
-        font-weight: 500;
+        font-size: var(--typography-card-header-font-size, 1.8rem);
+        font-weight: var(--typography-card-header-font-weight, 500);
+      }
+
+      ::ng-deep i.bhi-move {
+        color: transparent;
       }
     }
 
+    &:hover .title ::ng-deep i.bhi-move {
+      color: var(--color-content-subtle, #5d7798);
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-8, 0.8rem);
+    }
+
     novo-button {
-      color: rgba(var(--text-secondary), 0.7);
-      margin-left: var(--spacing-sm);
-      margin-right: var(--spacing-sm);
+      color: var(--color-content-subtle, #5d7798);
     }
   }
 }

package/elements/category-dropdown/CategoryDropdown.scss

@@ -15,7 +15,7 @@
       min-width: 400px;
       display: block;
       z-index: z("max");
-      border-radius: var(--border-radius-xsm, 2px);
+      border-radius: var(--border-radius-sm, 2px);
       top: 100%;
       margin-top: 5px;
     }

package/elements/date-picker/DatePicker.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   .date-picker-container {
-    border-radius: var(--border-radius-default, 4px);
+    border-radius: var(--border-radius-sm, 4px);
     width: min-content;
     text-align: center;
     background: var(--background-main);
@@ -219,8 +219,3 @@
     display: block;
   }
 }
-
-// bh2026: rounder calendar
-:host-context([data-theme='bh2026']) .date-picker-container {
-  border-radius: var(--calendar-radius, 0.8rem);
-}

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

@@ -6,7 +6,7 @@ $time-select-height: 45px;
   display: block;
   width: min-content;
   overflow: hidden;
-  border-radius: var(--border-radius-default, 4px);
+  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);

package/elements/dropdown/Dropdown.scss

@@ -16,13 +16,15 @@
       font-size: 0.8em !important;
       width: 1em !important;
       height: 1em !important;
-      margin: 0 0.5em;
+      margin: 0 var(--button-icon-margin, 0.5em);
     }
   }
 }
 
 .dropdown-container {
   background-color: var(--background-bright, $color-bright);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
   list-style: none;
   margin: 0;
   padding: 0;

package/elements/header/Header.scss

@@ -152,9 +152,37 @@
   }
 }
 
-// bh2026: soften the entity-accent underline
+// bh2026: frosted translucent header + entity squircle icon
 :host-context([data-theme='bh2026']) {
-  &[class*='novo-accent-'] > section:first-of-type {
-    border-bottom: 1px solid var(--color-border-default, #f0f5f9);
+  &[class*='novo-accent-'] {
+    background: var(--color-transparency-white-90, rgba(255, 255, 255, 0.9));
+    backdrop-filter: blur(12px);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    padding-top: var(--spacing-md);
+    padding-left: var(--spacing-lg);
+    padding-right: var(--spacing-lg);
+
+    & > section:first-of-type {
+      border-bottom: none;
+    }
+
+    utils {
+      color: var(--color-transparency-black-60);
+    }
+  }
+
+  @each $entity, $color in $entity-colors {
+    &.novo-accent-#{$entity} {
+      ::ng-deep .header-icon i {
+        color: var(--color-white);
+        background: $color;
+        border-radius: var(--border-radius-sm);
+        width: var(--typography-font-size-40);
+        height: var(--typography-font-size-40);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
   }
 }

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

@@ -16,6 +16,7 @@
       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 {

package/elements/modal/modal.component.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   background-color: var(--background-bright);
-  border-radius: var(--border-radius-default, 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;
@@ -17,8 +17,8 @@
   }
 
   > ::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,
@@ -44,13 +44,3 @@
     }
   }
 }
-
-// bh2026: rounded modal and header top corners.
-:host-context([data-theme='bh2026']) {
-  border-radius: var(--border-radius-md, 1.6rem);
-
-  > ::ng-deep header {
-    border-top-left-radius: var(--border-radius-md, 1.6rem);
-    border-top-right-radius: var(--border-radius-md, 1.6rem);
-  }
-}

package/elements/modal/notification.component.scss

@@ -4,7 +4,7 @@
   text-align: center;
   display: block;
   background-color: var(--background-bright);
-  border-radius: var(--border-radius-default, 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;
@@ -106,8 +106,3 @@
     }
   }
 }
-
-// bh2026: rounded notifications
-:host-context([data-theme='bh2026']) {
-  border-radius: var(--border-radius-md, 1.6rem);
-}

package/elements/select/Select.scss

@@ -91,6 +91,7 @@
     opacity: 1;
   }
   background-color: var(--background-bright);
+  border-radius: var(--border-radius-sm);
   cursor: default;
   list-style: none;
   overflow: auto;

package/elements/tabs/tab.scss

@@ -157,7 +157,7 @@
   }
 }
 
-// bh2026: charcoal tabs, near-black active text + rounded neutral indicator
+// bh2026: charcoal tabs, navy active text, rounded indicator
 :host-context([data-theme='bh2026']) {
   margin-right: var(--spacing-gap-lg);
 
@@ -165,32 +165,29 @@
     color: var(--color-content-link, #282828);
     // Tabs are Title Case, not uppercase.
     text-transform: none;
-    font-weight: 400;
+    font-weight: var(--typography-font-weight-400, 400);
   }
 
   &.active,
   &.router-link-active {
-    color: var(--color-content-link-hover, #221f1f);
+    color: #1450a0;
     .novo-tab-link {
-      color: var(--color-content-link-hover, #221f1f);
-      font-weight: 500;
+      color: #1450a0;
+      font-weight: var(--typography-font-weight-600, 600);
     }
     .indicator {
-      background: var(--color-content-link-hover, #221f1f);
-      border-radius: 999px;
-      // Quarter round from the top, flat on bottom
-      border-radius: 3px 3px 0 0 / 100% 100% 0 0;
+      background: #1450a0;
+      border-radius: 999px 999px 0 0;
     }
   }
 
   &:hover {
     .novo-tab-link {
-      font-weight: 500;
+      color: #1450a0;
     }
   }
 }
 
-
 :host-context(novo-nav[theme="color"]),
 :host-context(novo-nav[theme="neutral"]) {
   .novo-tab-link {

package/elements/tiles/Tiles.scss

@@ -46,7 +46,21 @@
   }
 }
 
-// bh2026: neutral border
+// bh2026: pill container, muted bg, navy selected state
 :host-context([data-theme='bh2026']) > .tile-container {
-  border-color: var(--color-border-default, #f0f5f9);
+  border-color: #8ca1b9;
+  border-radius: 999px;
+
+  .tile {
+    border-radius: 999px;
+  }
+
+  .tile.defaultColor.active {
+    background: var(--button-primary-background, #1f57a1);
+  }
+
+  .tile:not(.active) {
+    color: var(--text-muted, #8ca1b9);
+    i { color: var(--text-muted, #8ca1b9); }
+  }
 }

package/elements/time-picker/TimePicker.scss

@@ -364,7 +364,7 @@
   }
 
   &.hasButtons {
-    border-radius: 4px 4px 0 0;
+    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
 
     &.military {
       .increments--hour,
@@ -379,7 +379,7 @@
       justify-content: flex-end;
       padding: 1rem;
       gap: .5rem;
-      border-radius: 0 0 4px 4px;
+      border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
       box-shadow: 0 1px 3px #00000026, 0 2px 7px #0000001a;
     }
   }

package/elements/toolbar/toolbar.component.scss

@@ -62,4 +62,19 @@
     flex-direction: column;
     width: 100%;
   }
+
+  // bh2026: frosted translucent toolbar, no entity accent border
+  :root[data-theme='bh2026'] & {
+    background: var(--color-transparency-white-90, rgba(255, 255, 255, 0.9));
+    backdrop-filter: blur(12px);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+
+    .novo-toolbar-row {
+      background: transparent;
+
+      &[class*='novo-accent-'] {
+        border-bottom: none;
+      }
+    }
+  }
 }

package/elements/tooltip/Tooltip.scss

@@ -27,7 +27,7 @@ $tooltip-success-color: var(--color-shade-success, #458746);
   div {
     background: $tooltip-background;
     color: var(--color-white, #fff);
-    border-radius: var(--tooltip-border-radius, 4px);
+    border-radius: var(--border-radius-sm, 4px);
     padding: 8px 10px;
     font-size: var(--font-size-sm);
     line-height: 12px;
@@ -160,8 +160,3 @@ $tooltip-success-color: var(--color-shade-success, #458746);
     }
   }
 }
-
-// bh2026: rounder tooltip
-:host-context([data-theme='bh2026']) div {
-  border-radius: var(--tooltip-radius, 0.8rem);
-}