novo-elements 13.1.0-next.7 → 13.1.0-next.8

package/elements/agenda/common/AgendaDateChange.scss

@@ -4,16 +4,16 @@
   display: inline-block;
 
   .cal-date-change {
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     border: 1px solid #e1e1e1;
-    background-color: $white;
+    background-color: var(--background-body);
     position: relative;
     padding: 10px 15px;
     text-align: center;
 
     > span {
       padding: 5px;
-      color: $black;
+      color: var(--form-text);
     }
 
     > i {

package/elements/agenda/common/AgendaHoursLayout.scss

@@ -11,10 +11,10 @@
     }
 
     .cal-hour:nth-child(even) {
-      background-color: $off-white;
+      background-color: var(--background-main);
     }
     .cal-hour:nth-child(odd) {
-      background-color: $white;
+      background-color: var(--background-body);
     }
 
     .cal-hour-segment {

package/elements/agenda/day/AgendaDayView.scss

@@ -11,13 +11,13 @@
 
       .cal-event {
         height: inherit;
-        font-size: 12px;
+        font-size: var(--font-size-sm);
         margin-left: 2px;
         margin-right: 2px;
         min-height: 30px;
         display: flex;
         flex-flow: row nowrap;
-        background-color: $off-white;
+        background-color: var(--background-main);
 
         .cal-event-ribbon {
           width: 4px;
@@ -34,7 +34,7 @@
           line-height: 26px;
         }
         .cal-event-description {
-          font-size: 10px;
+          font-size: var(--font-size-xs);
           line-height: 13px;
         }
       }

package/elements/agenda/month/AgendaMonthView.scss

@@ -2,14 +2,14 @@
 
 :host {
   ::ng-deep .agenda-month-view {
-    background-color: $white;
+    background-color: var(--background-body);
 
     .agenda-header {
       display: flex;
       flex-flow: column;
       text-align: center;
       font-weight: bolder;
-      border-bottom: 2px solid #e1e1e1;
+      border-bottom: 2px solid var(--border);
       .agenda-header-top {
         display: flex;
         flex-flow: row nowrap;
@@ -50,7 +50,7 @@
     }
 
     .agenda-days {
-      border: 1px solid #e1e1e1;
+      border: 1px solid var(--border, #e1e1e1);
       border-bottom: 0;
     }
 
@@ -92,7 +92,7 @@
       display: inline-block;
       min-width: 10px;
       padding: 3px 7px;
-      font-size: 12px;
+      font-size: var(--font-size-sm);
       font-weight: 700;
       line-height: 1;
       color: white;
@@ -112,14 +112,14 @@
     .agenda-event {
       width: 22px;
       height: 22px;
-      border-radius: 4px;
+      border-radius: var(--border-radius-default, 4px);
       display: inline-block;
       margin: 2px;
       vertical-align: middle;
       text-align: center;
       line-height: 22px;
-      font-size: 12px;
-      color: $white;
+      font-size: var(--font-size-sm);
+      color: var(--text-bg-contrast);
     }
 
     .agenda-day-cell.agenda-in-month.agenda-has-events {
@@ -140,7 +140,7 @@
     }
 
     .agenda-day-cell.agenda-today .agenda-day-number {
-      color: $dark;
+      color: var(--font-color-base);
     }
 
     .agenda-day-cell.agenda-drag-over {

package/elements/agenda/week/AgendaWeekView.scss

@@ -13,7 +13,7 @@
       flex: 1;
       text-align: center;
       padding: 5px;
-      background-color: $off-white;
+      background-color: var(--background-main);
     }
 
     .cal-day-headers .cal-header:not(:last-child) {
@@ -42,11 +42,11 @@
 
         .cal-event {
           height: inherit;
-          font-size: 12px;
+          font-size: var(--font-size-sm);
           min-height: 30px;
           display: flex;
           flex-flow: column;
-          background-color: $off-white;
+          background-color: var(--background-main);
 
           .cal-event-ribbon {
             min-height: 4px;
@@ -59,7 +59,7 @@
             text-overflow: ellipsis;
           }
           .cal-event-description {
-            font-size: 10px;
+            font-size: var(--font-size-xs);
             line-height: 13px;
             padding: 0px 0px 0px 10px;
             overflow: hidden;

package/elements/autocomplete/autocomplete.component.scss

@@ -1,6 +1,10 @@
 @import "../../styles/variables.scss";
 @import "../common/typography/text.mixins";
 
+:host {
+  border-radius: var(--border-radius-sm);
+}
+
 .novo-autocomplete-options {
   list-style: none;
   background-color: var(--background-bright);

package/elements/avatar/Avatar.scss

@@ -28,13 +28,13 @@
     border-radius: 2em;
   }
   &.avatar-shape-square {
-    border-radius: 0.4em;
+    border-radius: var(--border-radius-round);
   }
 
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.avatar-color-#{$name} {
       color: getContrastColor($name);
-      background-color: $color;
+      background-color: var(--color-#{$name});
     }
   }
 }

package/elements/breadcrumbs/Breadcrumb.scss

@@ -8,3 +8,8 @@
     }
   }
 }
+
+// bh2026: subtle breadcrumb text.
+:host-context([data-theme='bh2026']) {
+  color: var(--color-content-subtle, #8ca1b9);
+}

package/elements/breadcrumbs/breadcrumb-item/BreadcrumbItem.scss

@@ -23,7 +23,7 @@
 
     ::ng-deep a {
       @extend .novo-breadcrumb-font-style;
-      color: $ocean;
+      color: var(--links);
       cursor: pointer;
       &:focus {
         text-decoration: none;
@@ -77,7 +77,7 @@
 
     li {
       padding: 0 15px;
-      font-size: 12px;
+      font-size: var(--font-size-sm);
       line-height: 36px;
       width: 200px;
       overflow: hidden;
@@ -86,7 +86,7 @@
       cursor: pointer;
 
       a {
-        color: $dark;
+        color: var(--font-color-base);
         line-height: 36px;
         width: 170px;
         display: inline-block;

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

@@ -5,16 +5,17 @@
   &[theme="dialogue"] {
     @include theme-text-colors("color");
     background: transparent;
-    color: $positive;
+    color: var(--button-color, var(--color-positive));
     i {
       line-height: 1.2;
     }
-    &:hover,
-    &:focus {
-      background: lighten($light, 7%);
+    &[color=text] {
+      color: inherit;
     }
+    &:hover,
+    &:focus,
     &:active {
-      background: lighten($light, 2%);
+      background: var(--background-muted);
     }
     &[inverse] {
       &:hover,

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

@@ -6,7 +6,7 @@
     @include theme-backgrounds("color", false);
     border-radius: 50% !important;
     padding: 0;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
     width: 3.2rem;
     height: 3.2rem;
     display: inline-flex;

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

@@ -4,11 +4,11 @@
   // Icon Themed Button
   &[theme="icon"] {
     @include theme-text-colors("color");
-    padding: $spacing-sm;
+    padding: var(--spacing-sm);
     font-size: 1.4rem;
     height: 2.4rem;
     &[inverse] {
-      color: #fff;
+      color: var(--color-contrast-text);
     }
     i {
       display: contents;
@@ -25,8 +25,8 @@
       display: contents;
     }
     &[size="small"] {
-      padding: $spacing-sm;
-      font-size: 1.2rem;
+      padding: var(--spacing-sm);
+      font-size: var(--font-size-sm);
       height: 2rem;
     }
     &[size="medium"] {
@@ -35,7 +35,7 @@
     &[size="large"] {
       font-size: 2rem;
       height: 2.8rem;
-      padding: $spacing-md;
+      padding: var(--spacing-md);
     }
   }
 }

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

@@ -4,13 +4,13 @@
   // Field Themed Button
   &[theme="field"] {
     background: transparent;
-    color: $dark;
+    color: var(--font-color-base);
     border: none;
     border-radius: 0;
     border-bottom: 1px solid var(--border);
     margin-bottom: 4px;
-    padding: $spacing-xs $spacing-sm;
-    font-size: 1.2rem;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--font-size-sm);
     height: 1.8rem;
     text-align: left;
     &:hover,
@@ -39,7 +39,7 @@
     width: 100%;
     z-index: z("default");
     text-transform: none;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
     height: 1.8rem;
 
     &.empty {
@@ -50,7 +50,7 @@
       outline: none;
     }
     &:hover {
-      border-bottom: 1px solid lighten($dark, 15%);
+      border-bottom: 1px solid brightenLive('--color-dark', 15);
       i {
         opacity: 0.75;
       }

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

@@ -3,30 +3,32 @@
 :host {
   // Primary theme
   &[theme="primary"] {
-    @include theme-backgrounds("color");
-    background: $positive;
-    color: #fff;
+    @include theme-backgrounds-live();
+    background: var(--button-primary-background, var(--color-positive));
+    color: var(--button-primary-color, var(--color-contrast-positive));
+    border: var(--button-primary-border, none);
     text-align: left;
 
     &:hover,
     &:focus {
-      box-shadow: $shadow-2, $shadow-1;
+
       filter: brightness(1.15);
+      box-shadow: var(--shadow-2), var(--shadow-1);
     }
     &:active {
       filter: brightness(0.85);
-      box-shadow: $shadow-1;
+      box-shadow: var(--shadow-1);
     }
 
     &[color="white"] {
-      background: $white;
-      color: $ocean;
+      background: var(--background-main);
+      color: var(--color-positive);
       &:hover,
       &:focus {
-        background: $background;
+        background: var(--background-main);
       }
       &:active {
-        background: darken($background, 5%);
+        background: darkenLive('--theme-background-main', 5);
       }
       i {
         background: rgba(0, 0, 0, 0.05);

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

@@ -8,31 +8,31 @@
 
     text-align: left;
     align-items: center;
-    background: $white;
-    color: $positive;
-    border: 1px solid $positive;
-    padding: 0 calc(#{$spacing-md} - 1px);
+    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;
       svg {
         .spinner {
-          fill: $positive;
+          fill: var(--color-positive);
         }
       }
     }
     &:hover,
     &:focus {
-      box-shadow: $shadow-2, $shadow-1;
+      box-shadow: var(--shadow-2), var(--shadow-1);
       background: $white;
     }
     &:active {
-      box-shadow: $shadow-1;
+      box-shadow: var(--shadow-1);
     }
     &[inverse] {
       background: rgba(0, 0, 0, 0.25);
-      color: #fff;
-      border: 1px solid #fff;
+      color: var(--color-contrast-positive);
+      border: 1px solid var(--color-contrast-positive);
       &:hover,
       &:focus {
         background: rgba(0, 0, 0, 0.35);

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

@@ -8,10 +8,10 @@
     background: var(--button-background);
     &:hover,
     &:focus {
-      box-shadow: $shadow-2, $shadow-1;
+      box-shadow: var(--shadow-2), var(--shadow-1);
     }
     &:active {
-      box-shadow: $shadow-1;
+      box-shadow: var(--shadow-1);
     }
   }
 }

package/elements/button/styles/button.scss

@@ -5,16 +5,18 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 0 $spacing-md;
+  padding: var(--button-padding-y, 0) var(--button-padding-x, var(--spacing-md));
   font-size: var(--font-size-button);
-  height: 3rem;
+  font-weight: var(--button-font-weight, inherit);
+  letter-spacing: var(--button-letter-spacing, normal);
+  height: var(--button-height, 3rem);
   border: none;
-  color: var(--text-main, $dark);
+  color: var(--button-color, var(--text-main, $dark));
   background: transparent;
-  border-radius: 3px;
-  text-transform: uppercase;
+  border-radius: var(--button-radius, 3px);
+  text-transform: var(--button-text-transform, uppercase);
   transition: all 200ms ease-in-out;
-  gap: $spacing-md;
+  gap: var(--button-gap, var(--spacing-md));
   cursor: pointer;
   user-select: none;
   text-overflow: clip;
@@ -29,7 +31,7 @@
     line-height: 1;
     font-size: inherit;
     color: inherit;
-    text-transform: uppercase;
+    text-transform: var(--button-text-transform, uppercase);
   }
 
   i {
@@ -40,10 +42,10 @@
 
   &[size="small"],
   &[size="sm"] {
-    font-size: 1rem;
-    padding: 0 $spacing-md;
+    font-size: var(--font-size-xs);
+    padding: 0 var(--spacing-md);
     height: 2.4rem;
-    gap: $spacing-sm;
+    gap: var(--spacing-sm);
     .button-contents,
     i {
       height: 1rem;
@@ -53,9 +55,9 @@
   &[size="large"],
   &[size="lg"] {
     font-size: 1.6rem;
-    padding: 0 $spacing-lg;
+    padding: 0 var(--spacing-lg);
     height: 3.6rem;
-    gap: $spacing-lg;
+    gap: var(--spacing-lg);
     .button-contents,
     i {
       height: 1.6rem;
@@ -66,6 +68,10 @@
     outline: none;
   }
 
+  &:focus-visible {
+    box-shadow: var(--button-focus-ring, none);
+  }
+
   &[disabled],
   &.novo-button-disabled {
     opacity: 0.5;

package/elements/calendar/calendar.component.scss

@@ -1,7 +1,7 @@
 @import "../../styles/variables.scss";
 
 :host(.layout-horizontal) {
-  font-size: 1.2rem;
+  font-size: var(--font-size-sm);
 
   .calendar-content {
     flex-flow: row nowrap;
@@ -9,9 +9,9 @@
 
   .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(--color-border);
+    margin-left: var(--spacing-sm);
+    padding-left: var(--spacing-sm);
   }
 }
 :host(.layout-vertical) {
@@ -71,7 +71,7 @@
         width: 0;
       }
       &:hover:after {
-        border-right: 4px solid $positive;
+        border-right: 4px solid var(--color-positive);
         cursor: pointer;
       }
     }
@@ -79,23 +79,23 @@
       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;
-          color: #fff;
+          background: var(--color-positive);
+          color: var(--color-contrast-positive);
           cursor: pointer;
         }
       }
       .year {
-        border-radius: 2px;
+        border-radius: var(--border-radius-xsm, 2px);
         padding: 3px 8px;
         &:hover {
-          background: $positive;
-          color: #fff;
+          background: var(--color-positive);
+          color: var(--color-contrast-positive);
           cursor: pointer;
         }
       }
@@ -117,7 +117,7 @@
       }
       &:hover:before {
         opacity: 1;
-        border-left: 4px solid $positive;
+        border-left: 4px solid var(--color-positive);
         cursor: pointer;
       }
     }

package/elements/calendar/month-select/month-select.component.scss

@@ -7,13 +7,13 @@
   .month {
     padding: 1rem;
     cursor: pointer;
-    border-radius: 0.4rem;
+    border-radius: var(--border-radius-round);
     &.selected {
-      background-color: $positive;
+      background-color: var(--color-positive);
       color: #fff;
     }
     &:hover {
-      background-color: $positive;
+      background-color: var(--color-positive);
       color: #fff;
     }
   }

package/elements/calendar/month-view/month-view.component.scss

@@ -30,7 +30,7 @@
       text-overflow: ellipsis;
       margin: 5px;
       font-weight: normal;
-      border-radius: 3px;
+      border-radius: var(--border-radius-sm, 3px);
       &.selected {
         background-color: var(--selection);
         color: #fff;
@@ -45,7 +45,7 @@
       height: 3.2rem;
       width: 3.2rem;
       line-height: 1;
-      font-size: 1.2rem;
+      font-size: var(--font-size-sm);
       padding: 1px;
       border: none;
       background-color: transparent;
@@ -151,7 +151,7 @@
           height: 100%;
           max-width: 3.2rem;
           margin: 0 auto;
-          box-shadow: inset 0 0 0 2px $light;
+          box-shadow: inset 0 0 0 2px var(--color-border);
         }
         &.inRange,
         &.selected {
@@ -163,8 +163,8 @@
 
       &.inPreview .day {
         border-radius: 0;
-        border-top: 1px dashed $positive;
-        border-bottom: 1px dashed $positive;
+        border-top: 1px dashed var(--color-positive);
+        border-bottom: 1px dashed var(--color-positive);
       }
 
       &.previewStart .day {
@@ -172,14 +172,14 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
         box-shadow: none !important;
-        border-left: 1px dashed $positive;
+        border-left: 1px dashed var(--color-positive);
       }
       &.previewEnd .day {
         border-radius: 50%;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         box-shadow: none !important;
-        border-right: 1px dashed $positive;
+        border-right: 1px dashed var(--color-positive);
       }
     }
   }

package/elements/calendar/year-select/year-select.component.scss

@@ -9,13 +9,13 @@
   .year {
     padding: 1rem;
     cursor: pointer;
-    border-radius: 0.4rem;
+    border-radius: var(--border-radius-round);
     &.selected {
-      background-color: $positive;
+      background-color: var(--color-positive);
       color: #fff;
     }
     &:hover {
-      background-color: $positive;
+      background-color: var(--color-positive);
       color: #fff;
     }
   }