@phillips/seldon 1.214.0 → 1.216.0

package/dist/scss/components/Navigation/NavigationItemTrigger/_navigationItemTrigger.scss

@@ -42,7 +42,7 @@
       position: fixed; // has to bust out of the box containing it on desktop
       right: 0;
       top: calc(
-        var(--banner-height) + #{$header-height} + 1px
+        var(--banner-height) + #{$header-height}
       ); // will be dynamically set again when notification banner is shown
 
       transition:
@@ -80,7 +80,7 @@
   }
 
   &__submenu--mobile.#{$px}-nav__list {
-    padding: 0;
+    padding: 0 0 $snowflake-menu-padding;
   }
 
   @include isHeaderDesktop {

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -19,7 +19,7 @@ $top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   @include isHeaderDesktop {
-    align-items: center;
+    align-items: flex-end;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -70,13 +70,14 @@ $top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
       }
     }
-    .#{$px}-link--snwHeaderLink {
+    .#{$px}-link--linkStylised {
       border-bottom: 1px solid $light-gray;
       flex-wrap: wrap;
       padding: $snowflake-menu-padding 0;
     }
-    .#{$px}-link--snwFlyoutLink {
-      padding: 0;
+
+    .#{$px}-accordion-item-label {
+      padding: $snowflake-menu-padding 0;
     }
   }
 }

package/dist/scss/components/NotificationBanner/_notificationBanner.scss

@@ -3,10 +3,7 @@
 .#{$px}-notification-banner {
   background: $light-gray;
   color: $pure-black;
-  font-size: $snowflake-note-size;
-  font-variation-settings: 'wght' 400;
   left: 0;
-  line-height: $snowflake-note-line-height;
   padding: $spacing-sm $spacing-md;
   position: fixed;
   text-align: center;
@@ -14,12 +11,12 @@
   width: 100%;
   z-index: $notification-banner-z-index;
 
-  > * {
-    font-size: $snowflake-note-size;
-    font-variation-settings: 'wght' 400;
-    line-height: $snowflake-note-line-height;
+  & > *,
+  & .#{$px}-text {
     text-align: center;
 
+    @include text($bodySmall);
+
     a {
       cursor: pointer;
       text-decoration: underline;
@@ -33,9 +30,6 @@
 
   > .#{$px}-notification-banner-content {
     color: $pure-black;
-    font-size: $snowflake-note-size;
-    font-variation-settings: 'wght' 400;
-    line-height: $snowflake-note-line-height;
     text-align: center;
 
     a {

package/dist/scss/components/Pagination/_pagination.scss

@@ -6,7 +6,23 @@
   flex-direction: row;
   gap: $spacing-xsm;
 
-  .#{$px}-pagination__button {
+  &__button {
+    .#{$px}-icon-chevron-right {
+      color: $cta-blue;
+
+      svg {
+        height: 1rem;
+        width: 1rem;
+      }
+
+      @include media($breakpoint-md) {
+        svg {
+          height: 1.5rem;
+          width: 1.5rem;
+        }
+      }
+    }
+
     &:disabled {
       border: unset;
     }

package/dist/scss/components/ProgressIndicator/_progressIndicator.scss

@@ -44,12 +44,17 @@
 
   &__label {
     display: none;
+    margin-bottom: $spacing-micro;
 
     @media (min-width: $breakpoint-md) {
       display: inline-block;
       text-align: center;
       white-space: nowrap;
     }
+
+    @include media($breakpoint-lg) {
+      margin-bottom: 0;
+    }
   }
 
   &__connector {

package/dist/scss/components/Search/SearchResults/_searchResults.scss

@@ -42,6 +42,11 @@
 .#{$px}-search {
   &__result {
     display: flex;
+    &:not(.#{$px}-search__result--view-all) {
+      .#{$px}-link:not(:hover):not(:focus-visible) {
+        text-decoration: none;
+      }
+    }
 
     &__label {
       text-transform: initial;

package/dist/scss/components/Search/_search.scss

@@ -1,6 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-search {
+  bottom: 0;
   display: flex;
   gap: $spacing-md;
   height: $search-size;
@@ -8,7 +9,6 @@
   min-width: $search-size;
   position: absolute;
   right: 0;
-  top: $padding-md;
   transition: left 0.25s ease-in;
 
   &::after {
@@ -23,11 +23,8 @@
     width: 0;
   }
 
-  @include isHeaderDesktop {
-    top: 0;
-  }
-
   @include isHeaderMobile {
+    bottom: 1px;
     height: calc($search-size - 1px);
     left: calc(100% - $search-size - $spacing-md);
     right: $spacing-md;
@@ -94,17 +91,12 @@
         background: transparent;
         border: 0;
         border-radius: unset;
-        color: $pure-black;
-        font-size: $string-size1;
-        font-style: normal;
         font-variation-settings: 'wght' 600;
         height: $search-size;
-        letter-spacing: 0;
-        line-height: $string-line-height-size1;
         margin: 0;
         padding: $spacing-xsm 0 $spacing-xsm $spacing-sm;
 
-        @include Montserrat;
+        @include text($bodyLarge);
 
         @include isHeaderMobile {
           height: calc(var(--spacing-md) + var(--search-size));

package/dist/scss/components/Search/_searchButton.scss

@@ -9,7 +9,6 @@
   display: flex;
   height: $search-size;
   justify-content: center;
-  margin: 0;
   padding: 0;
   position: absolute;
   right: 0;

package/dist/scss/components/Select/_select.scss

@@ -1,22 +1,27 @@
 @use '../../allPartials' as *;
 
 .#{$px}-select-input {
+  margin-bottom: $spacing-sm;
   position: relative;
 
+  &__standalone {
+    margin-bottom: 0;
+  }
+
   .#{$px}-select-container {
     position: relative;
 
     &--show__icon {
       select {
         appearance: none;
-        padding-right: 1.55rem;
+        padding-right: 3rem;
 
         @media (min-width: $breakpoint-md) {
-          padding-right: 1.95rem;
+          padding-right: 3.25rem;
         }
 
         @media (min-width: $breakpoint-xl) {
-          padding-right: 2.25rem;
+          padding-right: 4.25rem;
         }
       }
     }

package/dist/scss/components/Tabs/_tabs.scss

@@ -1,8 +1,6 @@
 @use '../../allPartials' as *;
 
 .#{$px}-tabs-container {
-  @include text($body2);
-
   width: 100%;
 
   &__tabs-list {
@@ -16,7 +14,7 @@
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
-    padding-bottom: $snowflake-menu-padding;
+    padding-bottom: $spacing-sm;
     padding-inline: 0;
     transition:
       background 0.2s ease,
@@ -31,10 +29,7 @@
     .#{$px}-text {
       color: $button-hover;
       cursor: pointer;
-      font-size: $body-size2;
       font-variation-settings: 'wght' 600;
-      letter-spacing: normal;
-      line-height: $body-line-height-size2;
 
       &:hover {
         color: $pure-black;

package/dist/scss/components/Tags/_tags.scss

@@ -50,8 +50,6 @@
   }
 
   &--clear {
-    @include text($body3);
-
     align-items: center;
     border-color: $pure-white;
     border-style: solid;

package/dist/scss/components/TextArea/_textArea.scss

@@ -1,8 +1,6 @@
 @use '../../allPartials' as *;
 
 .#{$px}-text-area {
-  @include text($string2);
-
   accent-color: $black-100;
   border: 1px solid $black-100;
   border-radius: $radius-xs;
@@ -11,6 +9,8 @@
   resize: vertical;
   width: 100%;
 
+  @include text($bodyMedium);
+
   &__wrapper {
     display: flex;
     flex-direction: column;
@@ -38,8 +38,6 @@
   }
 
   &__label {
-    @include text($string2);
-
     color: $pure-black;
     font-variation-settings: 'wght' 600;
     margin-bottom: 0.5rem;

package/dist/scss/components/TextSymbol/_textSymbol.scss

@@ -1,14 +1,11 @@
 @use '../../allPartials' as *;
 
 .#{$px}-text-symbol {
-  @include text($heading4);
-
   display: inline-flex;
+  font-variation-settings: 'wght' 600;
   gap: $spacing-micro;
 
   &--estimation {
-    @include text($heading5);
-
     margin-left: 0.25rem;
   }
 

package/dist/scss/patterns/AccountPageHeader/_accountPageHeader.scss

@@ -13,6 +13,10 @@
     margin-top: $spacing-micro;
   }
 
+  &__button-label {
+    font-variation-settings: 'wght' 600;
+  }
+
   &__title-wrapper {
     align-items: center;
     display: flex;

package/dist/scss/patterns/BidSnapshot/_bidSnapshot.scss

@@ -3,10 +3,20 @@
 .#{$px}-bid-snapshot {
   position: relative;
 
-  &__text .#{$px}-has-separators .#{$px}-detail {
+  &__text .#{$px}-has-separators .#{$px}-detail.#{$px}-detail {
     flex-wrap: wrap;
     gap: 0 $spacing-sm;
-    padding-bottom: $spacing-xsm;
+  }
+
+  &__current-bid,
+  &__sold {
+    .#{$px}-detail__value .#{$px}-text.#{$px}-text {
+      font-variation-settings: 'wght' 600;
+    }
+  }
+
+  &:has(.#{$px}-bid-message) &__text .#{$px}-detail {
+    padding-bottom: 0;
   }
 
   .#{$px}-countdown {
@@ -16,20 +26,11 @@
     top: calc(100% + $spacing-xsm);
   }
 
-  .#{$px}-countdown__countdown-container,
-  .#{$px}-duration {
-    @include Montserrat;
-  }
-
   &--live:has(.#{$px}-countdown) {
     border-bottom: 1px solid $light-gray;
     margin-bottom: $spacing-md;
   }
 
-  &--has-bids .#{$px}-detail__value {
-    font-variation-settings: 'wght' 600;
-  }
-
   // styles that will apply to bid message inside bid snapshot only
   .#{$px}-bid-message {
     &.#{$px}-bid-message {

package/dist/scss/patterns/CountryPicker/_countryPickerModal.scss

@@ -25,6 +25,10 @@
     position: sticky;
     top: 0;
     z-index: 2;
+
+    &-text {
+      margin-bottom: $spacing-md;
+    }
   }
 
   &__list {

package/dist/scss/patterns/CountryPicker/_countryPickerOption.scss

@@ -36,6 +36,9 @@
       display: flex;
       flex: 1;
       justify-content: space-between;
+      .#{$px}-text {
+        font-variation-settings: 'wght' 600;
+      }
     }
 
     &-flag {

package/dist/scss/patterns/CountryPicker/_countryPickerTrigger.scss

@@ -7,9 +7,6 @@
     width: 100%;
 
     &-label {
-      @include text($string2);
-
-      color: $pure-black;
       font-variation-settings: 'wght' 600;
       margin-bottom: $spacing-xsm;
 
@@ -19,8 +16,6 @@
     }
 
     &-btn {
-      @include text($string2);
-
       align-items: center;
       appearance: none;
       background: $white;
@@ -32,7 +27,6 @@
       flex-direction: row;
       font-variation-settings: 'wght' 600;
       justify-content: space-between;
-      margin-bottom: $spacing-micro;
       padding: $spacing-xsm;
       width: 100%;
 
@@ -49,8 +43,8 @@
     }
 
     &-text {
-      color: $pure-black;
       flex: 1;
+      font-variation-settings: 'wght' 600;
       overflow: hidden;
       text-align: left;
       text-overflow: ellipsis;
@@ -98,6 +92,9 @@
 .#{$px}-input__validation {
   animation: reveal 0.45s linear forwards;
 }
+.#{$px}-input__empty-validation {
+  line-height: $spacing-sm;
+}
 
 @keyframes reveal {
   0% {

package/dist/scss/patterns/DetailList/_detailList.scss

@@ -38,9 +38,15 @@
 
   .#{$px}-has-separators {
     border-top: 1px solid $light-gray;
+  }
 
-    .#{$px}-detail {
-      padding: $spacing-sm 0;
+  .#{$px}-detail {
+    padding: $spacing-sm 0;
+  }
+
+  &--sm {
+    .#{$px}-detail.#{$px}-detail {
+      padding: $spacing-xsm 0;
     }
   }
 }

package/dist/scss/patterns/FavoritesCollectionTile/_favoritesCollectionTile.scss

@@ -20,6 +20,7 @@
 
   &__info {
     flex: 1;
+    min-height: calc($spacing-sm + $spacing-xsm + $font-size-label-medium + $font-size-body-medium);
     overflow: hidden;
   }
 
@@ -41,7 +42,8 @@
     line-clamp: 1;
     overflow: hidden;
 
-    h3.#{$px}-text {
+    &.#{$px}-text {
+      font-variation-settings: 'wght' 600;
       margin-bottom: 0;
     }
   }
@@ -55,7 +57,7 @@
     height: 2.5rem;
     justify-content: center;
     position: relative;
-    top: $spacing-sm;
+    top: $spacing-micro;
     transition: background 0.8s;
     width: 2.5rem;
 
@@ -85,7 +87,7 @@
 
     &--item {
       all: unset;
-      background-color: $soft-gray;
+      background-color: $white-100;
       cursor: pointer;
       display: block;
       padding: 0.75rem 1rem;
@@ -148,6 +150,7 @@
 
   &__icon {
     justify-content: flex-start;
+    margin-bottom: $spacing-xsm;
     pointer-events: none;
 
     &-rotate {
@@ -169,10 +172,6 @@
 
   // will update font size with variable rem sizing after design takes a pass at it some point in the future
   &__text {
-    color: $dark-gray;
-    font-size: 0.75rem;
-    font-variation-settings: 'wght' 400;
-    padding-top: 5px;
     text-transform: none;
   }
 
@@ -184,7 +183,6 @@
     all: unset;
     background: none;
     height: 100%;
-    margin-top: calc($spacing-xsm + var(--body-line-height-size3) + var(--heading-line-height-size5));
     width: 100%;
 
     &:focus-visible {

package/dist/scss/patterns/FilterMenu/_filterMenu.scss

@@ -1,8 +1,9 @@
 @use '../../allPartials' as *;
 
 .#{$px}-filter-menu {
+  align-self: stretch;
   overflow-y: scroll;
-  width: 100%;
+  padding-bottom: $spacing-sm;
 
   &::-webkit-scrollbar {
     display: none;

package/dist/scss/patterns/FiltersInline/_filterButton.scss

@@ -3,6 +3,7 @@
 .#{$px}-filter-button {
   border: 1.5px solid $light-gray;
   gap: 4px;
+  height: inherit;
   padding: $spacing-xsm $spacing-sm;
 
   &--selected {
@@ -13,18 +14,27 @@
     border-radius: $radius-3xl;
   }
 
-  &--count {
+  &__label {
+    font-variation-settings: 'wght' 600;
+  }
+
+  &--count.#{$px}-filter-button--count.#{$px}-text {
     background: $black-100;
     border: 2px solid $white-100;
     border-radius: $radius-3xl;
     color: $white-100;
     display: inline-block;
-    font-size: var(--label-size3);
+    font-variation-settings: 'wght' 600;
     height: 1.5rem;
+    line-height: 1.2rem;
     position: absolute;
     right: 0;
     text-align: center;
     top: -15px;
     width: 1.5rem;
+
+    @include media($breakpoint-md) {
+      line-height: 1.3rem;
+    }
   }
 }

package/dist/scss/patterns/FiltersInline/_filterDropdownMenu.scss

@@ -47,16 +47,8 @@ $dropdown-height: 240px;
       flex-direction: row;
       gap: $spacing-sm;
       min-height: fit-content;
-      padding: $spacing-md;
+      padding: $spacing-md $spacing-sm;
       width: 100%;
-
-      @media (min-width: $breakpoint-md) {
-        gap: $spacing-xl;
-      }
-
-      @media (min-width: $breakpoint-xl) {
-        gap: 0;
-      }
     }
   }
 

package/dist/scss/patterns/FiltersInline/_filtersInline.scss

@@ -7,7 +7,12 @@
 }
 
 .#{$px}-filter-drawer {
+  max-width: 380px;
   padding: 0;
+
+  @include media($breakpoint-xl) {
+    max-width: 420px;
+  }
 }
 
 .#{$px}-filter-drawer-menu {

package/dist/scss/patterns/HeroBanner/_heroBanner.scss

@@ -19,6 +19,10 @@ body:has(.seldon-header__toggle-btn--open) {
   text-transform: uppercase;
   width: 100%;
 
+  &__header-text {
+    text-align: center;
+  }
+
   @include media($size-md, $type: 'max') {
     align-items: center;
     align-self: stretch;
@@ -47,6 +51,7 @@ body:has(.seldon-header__toggle-btn--open) {
 
   & .#{$px}-hero-banner__content-wrapper {
     align-items: center;
+    color: $pure-white;
     display: flex;
     flex-direction: column;
     max-width: 1082px;
@@ -64,12 +69,6 @@ body:has(.seldon-header__toggle-btn--open) {
       line-height: 1;
       text-align: center;
     }
-
-    & .#{$px}-hero-banner__text-description {
-      text-transform: none;
-
-      @include text($body2);
-    }
   }
 
   & .#{$px}-hero-banner__pre-head {

package/dist/scss/patterns/LanguageSelector/_languageSelector.scss

@@ -26,11 +26,15 @@
     .#{$px}-accordion-item {
       border-top: 1px solid $light-gray;
       .#{$px}-nav__list {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-xsm;
         padding: 0;
       }
 
       &-label {
         opacity: 1;
+        padding: $snowflake-menu-padding 0;
       }
 
       &__border-bottom {