@phillips/seldon 1.215.0 → 1.217.0

package/dist/scss/components/Button/_button.scss

@@ -1,20 +1,21 @@
 @use '../../allPartials' as *;
 
 .#{$px}-button {
-  @include bodyText;
-  @include labelText($button);
+  // we need this because we can't be sure that the Text component is being used as a child of the Button component
+  @include text($labelMedium);
 
   align-items: center;
   background-color: $pure-black;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
   border-radius: $radius-3xl;
   color: $pure-white;
   cursor: pointer;
   display: inline-flex;
   font-variation-settings: 'wght' 600;
   gap: $margin-xsm;
+  height: 44px; // TODO: this is temporary as we will revisit the button in a new ticket
   justify-content: center;
-  padding: $snw-button-padding $padding-sm;
+  padding: 0 $padding-sm;
   position: relative;
   transition:
     color 0.25s,
@@ -22,8 +23,13 @@
 
   svg {
     fill: $pure-white;
-    height: $button-label-line-height;
-    width: $button-label-line-height;
+    height: calc($font-size-label-small * 1.3);
+    width: calc($font-size-label-small * 1.3);
+
+    @include media($breakpoint-md) {
+      height: calc($font-size-label-small * 1.4);
+      width: calc($font-size-label-small * 1.4);
+    }
 
     path {
       fill: $pure-white;
@@ -31,6 +37,26 @@
     }
   }
 
+  &--primary,
+  &--secondary,
+  &--ghost,
+  &--tertiary {
+    &.#{$px}-link {
+      text-decoration: none;
+    }
+  }
+
+  &:not(.#{$px}-button--link) {
+    &.#{$px}-button--primary {
+      color: $white-100;
+    }
+
+    .#{$px}-text {
+      color: inherit;
+      font-variation-settings: inherit;
+    }
+  }
+
   &:hover {
     background-color: $button-hover;
 
@@ -55,17 +81,24 @@
     height: auto;
     padding: 0;
     text-decoration: underline;
+    .#{$px}-text {
+      font-variation-settings: 'wght' 400;
+    }
 
     &:hover {
       background-color: transparent;
       color: $pure-black;
+
+      .#{$px}-text {
+        cursor: pointer;
+      }
     }
   }
 
   &--secondary,
   &--ghost {
     background-color: $pure-white;
-    border: 1px solid $pure-black;
+    border: 2px solid $pure-black;
     color: $pure-black;
     transition: border 0.3s ease-out;
     z-index: 0;

package/dist/scss/components/ComboBox/_combobox.scss

@@ -23,7 +23,7 @@
   }
 
   &__input {
-    @include text($string2);
+    @include text($bodyMedium);
 
     accent-color: $black-100;
     border: 1px solid $black-100;
@@ -61,8 +61,6 @@
   }
 
   &__label {
-    @include text($string2);
-
     color: $pure-black;
     display: inline-block;
     font-variation-settings: 'wght' 600;
@@ -146,7 +144,7 @@
     padding: $padding-micro $padding-xsm;
     transition: background-color 0.1s ease;
 
-    @include text($string2);
+    @include text($bodyMedium);
 
     &:hover,
     &[data-selected='true'] {
@@ -168,8 +166,12 @@
     overflow: hidden;
   }
 
+  &__empty-validation {
+    line-height: $spacing-sm;
+  }
+
   &__item__invalid-text {
-    @include text($string2);
+    @include text($bodySmall);
 
     align-items: center;
     display: flex;

package/dist/scss/components/ComposedModal/_composedModal.scss

@@ -12,10 +12,6 @@ $breakpoint-mobile-small: 450px;
     padding-bottom: $spacing-lg;
   }
 
-  &__title {
-    margin: $spacing-md $spacing-lg $spacing-sm;
-  }
-
   &__body {
     margin: 0 $spacing-lg $spacing-md;
     max-height: var('--max-modal-body-height');

package/dist/scss/components/Countdown/_countdown.scss

@@ -1,8 +1,6 @@
 @use '../../allPartials' as *;
 
 .#{$px}-countdown {
-  @include text($body2);
-
   align-items: center;
   border-bottom: none;
   display: flex;
@@ -18,24 +16,25 @@
   }
 
   &__countdown-container {
-    @include text($heading5);
-
     align-items: center;
     display: flex;
     flex-shrink: 0;
     gap: $spacing-sm;
     justify-content: center;
     text-transform: inherit;
+
+    .#{$px}-text {
+      font-variation-settings: 'wght' 600;
+    }
+
+    .#{$px}-duration {
+      font-variation-settings: 'wght' 600;
+    }
   }
 
   &--compact {
     .#{$px}-countdown__countdown-container {
       gap: $spacing-xsm;
-
-      @include Montserrat;
-      .#{$px}-duration {
-        @include Montserrat;
-      }
     }
   }
 

package/dist/scss/components/Countdown/_duration.scss

@@ -1,8 +1,6 @@
 @use '../../allPartials' as *;
 
 .#{$px}-duration {
-  @include text($heading5);
-
   display: flex;
   gap: $spacing-micro;
 }

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -2,9 +2,11 @@
 @use '../../allPartials' as *;
 @import 'flatpickr/dist/flatpickr.css';
 
-.flatpickr-calendar {
-  @include DistinctText;
+.#{$px}-date-picker {
+  font-size: $font-size-body-medium;
+}
 
+.flatpickr-calendar {
   .flatpickr-day,
   .flatpickr-day.selected,
   .flatpickr-day:hover,
@@ -29,8 +31,6 @@
     font-variation-settings: 'wght' 700;
     position: relative;
 
-    @include DistinctDisplay;
-
     &::after {
       background-color: $pure-black;
       bottom: 2px;
@@ -55,19 +55,20 @@
   .flatpickr-current-month,
   .flatpickr-monthDropdown-months,
   .flatpickr-current-month input.cur-year {
-    @include DistinctDisplay;
-
-    font-size: 1rem;
     text-transform: uppercase;
   }
 
   .flatpickr-weekday {
-    @include DistinctDisplay;
-
     font-variation-settings: 'wght' 700;
   }
 
-  .flatpickr-current-month {
+  .flatpickr-current-month.flatpickr-current-month {
+    @include text($labelLarge);
+
+    .cur-year {
+      @include text($labelLarge);
+    }
+
     padding: 0.65rem 0 0;
   }
 

package/dist/scss/components/Detail/_detail.scss

@@ -8,15 +8,12 @@
   display: flex;
   gap: $spacing-md;
 
-  @include text($string2);
-
-  &__label {
+  &__label-section {
     flex-shrink: 0;
-    font-variation-settings: 'wght' 600;
     width: 160px;
 
-    @media (max-width: $breakpoint-lg) {
-      width: 128px;
+    &--label.#{$px}-text {
+      font-variation-settings: 'wght' 600;
     }
 
     @media (max-width: $breakpoint-md) {
@@ -27,6 +24,14 @@
       width: 96px;
     }
 
+    &--has-sub-label {
+      width: 240px;
+
+      @media (max-width: $breakpoint-sm) {
+        width: 120px;
+      }
+    }
+
     &--no-wrap {
       width: unset;
 
@@ -48,6 +53,10 @@
     }
   }
 
+  &__sub-label {
+    text-wrap: nowrap;
+  }
+
   &__value {
     font-variation-settings: 'wght' 400;
   }

package/dist/scss/components/Divider/_divider.scss

@@ -4,10 +4,10 @@
   margin: $spacing-sm 0;
 
   &-line {
-    background-color: $keyline-gray;
+    background-color: $bg-border;
     border: none;
-    border-top: 1px solid $keyline-gray;
-    color: $keyline-gray;
+    border-top: 1px solid $bg-border;
+    color: $bg-border;
     display: block;
     height: 1px;
     margin: 1em 0;

package/dist/scss/components/Drawer/_drawerHeader.scss

@@ -21,18 +21,11 @@
 
   &__hr {
     border-bottom: 2px solid $light-gray;
-    margin-bottom: $spacing-sm;
     width: 100%;
   }
 
   &__title {
-    @include DistinctDisplay;
-
-    color: $text-default;
-    font-size: $heading-size4;
     font-variation-settings: 'wght' 600;
-    line-height: $body-line-height-size1;
-    margin-top: 4px; // better visual align with the close icon
     overflow: hidden;
     text-align: center;
     text-overflow: ellipsis;

package/dist/scss/components/Dropdown/_dropdown.scss

@@ -1,7 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-dropdown {
-  @include text($body3);
+  @include text($bodySmall);
 
   &__trigger {
     align-items: center;
@@ -77,7 +77,7 @@
   }
 
   &__item {
-    @include text($body3);
+    @include text($bodySmall);
 
     align-items: center;
     display: flex;

package/dist/scss/components/FavoritingTileButton/_favoritingTileButton.scss

@@ -21,6 +21,11 @@
     gap: $spacing-micro;
     overflow: hidden;
 
+    &--action,
+    &--number {
+      font-variation-settings: 'wght' 600;
+    }
+
     span {
       color: inherit;
       overflow: hidden;

package/dist/scss/components/Filter/_filter.scss

@@ -30,16 +30,16 @@ $chevron-scale: 0.8;
 
 .#{$px}-filter {
   &-header {
-    margin-bottom: $spacing-md;
+    margin-bottom: $spacing-sm;
 
     legend {
       padding-inline: 0; // needed for default browser styles
     }
 
     &__back {
-      @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
-
-      margin-top: $spacing-sm;
+      .#{$px}-text.#{$px}-text--labelMedium {
+        font-variation-settings: 'wght' 600;
+      }
     }
   }
 
@@ -57,15 +57,12 @@ $chevron-scale: 0.8;
     display: flex;
     flex-direction: column;
     gap: $spacing-sm;
-    padding-bottom: $spacing-sm;
 
     .#{$px}-input {
       align-items: center;
       height: unset;
 
       &__label {
-        @include text($body2);
-
         color: inherit;
         margin-bottom: 0;
       }
@@ -77,14 +74,18 @@ $chevron-scale: 0.8;
         width: $body-line-height-size3;
       }
 
-      &__validation {
+      &__validation,
+      &__empty-validation {
         display: none;
       }
     }
   }
 
   &__view-all {
-    @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
   }
 
   &.is-opening {
@@ -101,8 +102,10 @@ $chevron-scale: 0.8;
     &__wrapper {
       display: flex;
       flex-direction: row;
-      height: 40px;
       justify-content: space-between;
+      .#{$px}-text {
+        font-variation-settings: 'wght' 600;
+      }
     }
   }
 }

package/dist/scss/components/Icon/_icon.stories.scss

@@ -19,7 +19,7 @@
     padding: 8px;
     text-align: center;
 
-    @include text($string2);
+    @include text($bodySmall);
   }
 
   .icon-wrapper {

package/dist/scss/components/IconButton/_iconButton.scss

@@ -95,15 +95,13 @@
     }
 
     &:hover {
-      background-color: $button-hover;
-
       & svg {
-        color: $pure-white;
-        fill: $pure-white;
+        color: $cta-hover;
+        fill: $cta-hover;
         margin-inline-end: unset;
 
         path {
-          fill: $pure-white;
+          fill: $cta-hover;
         }
       }
     }

package/dist/scss/components/Input/_input.scss

@@ -9,27 +9,19 @@ $lg: #{$px}-input--lg;
   flex-direction: column;
   width: 100%;
 
-  &--hidden {
+  &--hidden,
+  &__label--hidden {
     @include hidden;
   }
 
-  &__label {
-    @include text($string2);
-
-    color: $pure-black;
+  &__label.#{$px}-text {
     font-variation-settings: 'wght' 600;
-    margin-bottom: 0.5rem;
+    margin-bottom: $spacing-xsm;
     width: fit-content;
     word-break: break-word;
-
-    &--hidden {
-      @include hidden;
-    }
   }
 
   &__wrapper {
-    @include text($string2);
-
     accent-color: $black-100;
     align-items: center;
     border: 1px solid $black-100;
@@ -42,7 +34,8 @@ $lg: #{$px}-input--lg;
     position: relative;
 
     &::placeholder {
-      font-variation-settings: 'wght' 400;
+      color: $cta-inactive;
+      font-variation-settings: 'wght' 600;
     }
 
     &:focus-visible,
@@ -52,6 +45,8 @@ $lg: #{$px}-input--lg;
 
     .#{$px}-input__wrapper__input,
     .#{$px}-input__input {
+      @include text($bodyMedium);
+
       border: none;
       margin: 0;
       padding: 0;
@@ -72,7 +67,7 @@ $lg: #{$px}-input--lg;
   }
 
   &__input {
-    @include text($string2);
+    @include text($bodyMedium);
 
     accent-color: $black-100;
     border: 1px solid $black-100;
@@ -103,6 +98,10 @@ $lg: #{$px}-input--lg;
     overflow: hidden;
   }
 
+  &__empty-validation {
+    line-height: $spacing-sm;
+  }
+
   // Inline
   &--inline {
     align-items: center;
@@ -197,9 +196,18 @@ $lg: #{$px}-input--lg;
 
 .#{$px}-radio-input,
 .#{$px}-checkbox-input {
+  .#{$px}-input__label {
+    @include text($bodyMedium);
+
+    font-variation-settings: 'wght' 600;
+    margin-bottom: 0;
+  }
+
   .#{$px}-input__input {
     align-self: flex-start;
     cursor: pointer;
+    height: 16px;
+    width: 16px;
   }
 
   &.#{$px}-input--inline {

package/dist/scss/components/Link/_link.scss

@@ -4,23 +4,44 @@
   color: $pure-black;
   text-decoration: none;
 
-  &--email,
-  &--link {
-    @include underline;
+  &--email.#{$px}-link--email,
+  &--link.#{$px}-link--link,
+  &--linkSmall,
+  &--linkMedium,
+  &--linkLarge {
+    @include underline($offset: 1px);
+  }
+
+  &--linkLarge {
+    @include text($linkLarge);
+  }
+
+  &--linkMedium {
+    @include text($linkMedium);
+  }
+
+  &--linkSmall {
+    @include text($linkSmall);
+  }
+
+  &--linkStylised {
+    @include text($linkStylised);
   }
 
   &--email,
   &--link {
     &:hover,
     &:focus-visible {
-      @include underline($color: $dark-gray);
-
       color: $dark-gray;
     }
   }
 
   &--email {
-    @include text($email);
+    @include text($linkMedium);
+
+    .#{$px}-text {
+      font-variation-settings: 'wght' 600;
+    }
   }
 
   &--link {
@@ -28,7 +49,7 @@
   }
 
   &--snwHeaderLink {
-    @include text($snwHeaderLink);
+    @include text($linkStylised);
 
     padding: 0.5rem 0.625rem calc(0.5rem + 2px); // 1 px so that the bottom border of the nav counts as part of the button
     position: relative;
@@ -51,7 +72,7 @@
   &--snwFlyoutLink {
     border-bottom: 1px solid transparent;
 
-    @include text($snwFlyoutLink);
+    @include text($linkLarge);
 
     &:hover,
     &:focus-visible {

package/dist/scss/components/LinkBlock/_linkBlock.scss

@@ -4,9 +4,13 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: $spacing-xsm;
+  gap: $spacing-micro;
   text-align: center;
 
+  &__link .#{$px}-text {
+    font-variation-settings: 'wght' 400;
+  }
+
   &__description.#{$px}-text {
     margin-bottom: 0;
   }

package/dist/scss/components/LinkList/_linkList.scss

@@ -5,6 +5,12 @@
     max-width: 30rem;
   }
 
+  .#{$px}-link {
+    .seldon-text--link {
+      text-decoration: none;
+    }
+  }
+
   &--item {
     // mobile first
     grid-column: span 2;

package/dist/scss/components/Modal/_modal.scss

@@ -26,8 +26,8 @@
 
   &__close {
     position: absolute;
-    right: 0.4rem;
-    top: 0.4rem;
+    right: $spacing-sm;
+    top: $spacing-sm;
     z-index: 100;
   }
 }