@phillips/seldon 1.181.0 → 1.182.1

package/dist/scss/_vars.scss.js

@@ -1,41 +1,6 @@
-const n = `// prefix
+const e = `// prefix
 $px: seldon;
 
-@mixin font-size-vars--sm {
-  --font-size-micro: 0.25rem;
-  --font-size-xsm: 0.5rem;
-  --font-size-sm: 0.75rem;
-  --font-size-md: 1rem;
-  --font-size-lg: 1.25rem;
-  --font-size-xl: 1.5rem;
-  --font-size-xxl: 1.75rem;
-  --font-size-xxxl: 2rem;
-}
-
-@mixin font-size-vars--md {
-  @include font-size-vars--sm;
-}
-
-@mixin font-size-vars--lg {
-  --font-size-micro: 0.5rem;
-  --font-size-xsm: 0.75rem;
-  --font-size-sm: 1rem;
-  --font-size-md: 1.25rem;
-  --font-size-lg: 1.5rem;
-  --font-size-xl: 1.75rem;
-  --font-size-xxl: 2rem;
-  --font-size-xxxl: 2.25rem;
-}
-
-$font-size-micro: var(--font-size-micro);
-$font-size-xsm: var(--font-size-xsm);
-$font-size-sm: var(--font-size-sm);
-$font-size-md: var(--font-size-md);
-$font-size-lg: var(--font-size-lg);
-$font-size-xl: var(--font-size-xl);
-$font-size-xxl: var(--font-size-xxl);
-$font-size-xxxl: var(--font-size-xxxl);
-
 ////////////////////////
 /// COlORS:
 ///////////////////////
@@ -118,40 +83,19 @@ $text-family: $DistinctText;
 
 // Used with the labelText mixin
 // @include labelText($label)
-$labelLg: 'labelLg';
-$labelLgBold: 'labelLgBold';
-$labelMd: 'labelMd';
-$labelMdBold: 'labelMdBold';
-$labelSm: 'labelSm';
-$labelSmBold: 'labelSmBold';
 $button: 'button';
 $link: 'link';
-$linkBold: 'linkBold';
 $email: 'email';
 $label: 'label';
 $badge: 'badge';
 
-// Body styles
-$bodyLg: 'bodyLg';
-$bodyMd: 'bodyMd';
-$bodySm: 'bodySm';
-$bodyLgBold: 'bodyLgBold';
-$bodyMdBold: 'bodyMdBold';
-$bodySmBold: 'bodySmBold';
-
 // Used with the hText mixin
 $blockquote: 'blockquote';
 $heading1: 'heading1';
 $heading2: 'heading2';
 $heading3: 'heading3';
-$heading3Italic: 'heading3Italic';
 $heading4: 'heading4';
-$heading4Italic: 'heading4Italic';
 $heading5: 'heading5';
-
-// Eyebrow tokens
-$eyebrowLg: 'eyebrowLg';
-$eyebrowSm: 'eyebrowSm';
 $title1: 'title1';
 $title2: 'title2';
 $title3: 'title3';
@@ -166,11 +110,9 @@ $snwHeaderLink: 'snwHeaderLink';
 $snwFlyoutLink: 'snwFlyoutLink';
 $snwHeadingHero1: 'snwHeadingHero1';
 $snwHeadingHero2: 'snwHeadingHero2';
-$text-tokens: $labelLg, $labelLgBold, $labelMd, $labelMdBold, $labelSm, $labelSmBold, $button, $link, $linkBold, $email,
-  $label, $badge, $bodyLg, $bodyMd, $bodySm, $bodyLgBold, $bodyMdBold, $bodySmBold, $blockquote, $heading1, $heading2,
-  $heading3, $heading3Italic, $heading4, $heading4Italic, $heading5, $eyebrowLg, $eyebrowSm, $title1, $title2, $title3,
-  $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink, $snwHeaderLink, $snwHeadingHero1,
-  $snwHeadingHero2;
+$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
+  $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
+  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
@@ -185,14 +127,20 @@ $breakpoint-xl: 1801px;
 ///////////////////////
 // @TODO: These tokens need to be aligned with the new values from the design system https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=7263-1361&node-type=canvas&m=dev
 // Once we update ObjectTile and other components will need to be updated to match the new token.
-
-$line-height-default: 1.2;
-$line-height-body: 1.4;
-
 :root {
   --desktop-max-width: 120rem;
   --quote-size: 1.5rem;
   --quote-line-height: 2rem;
+  --heading-size1: 1.5rem;
+  --heading-line-height-size1: 1.75rem;
+  --heading-size2: 1.5rem;
+  --heading-line-height-size2: 1.75rem;
+  --heading-size3: 1.25rem;
+  --heading-line-height-size3: 1.5rem;
+  --heading-size4: 1rem;
+  --heading-line-height-size4: 1.25rem;
+  --heading-size5: 0.75rem;
+  --heading-line-height-size5: 1rem;
   --string-size1: 1rem;
   --string-line-height-size1: 1.25rem;
   --string-size2: 0.75rem;
@@ -224,16 +172,22 @@ $line-height-body: 1.4;
   --snw-heading-hero-line-height-size1: 2.375rem;
   --snw-heading-hero-size2: 1.625rem;
   --snw-heading-hero-line-height-size2: 1.9375rem;
-
-  // FONT SIZES
-  --font-size-step: 0.25rem;
-  --body-size-step: 0.5rem;
-
-  @include font-size-vars--sm;
+  --snw-note-size: 0.75rem;
+  --snw-note-line-height: 1rem;
 
   @media (min-width: $breakpoint-md) {
     --quote-size: 1.75rem;
     --quote-line-height: 2.25rem;
+    --heading-size1: 1.75rem;
+    --heading-line-height-size1: 2rem;
+    --heading-size2: 1.75rem;
+    --heading-line-height-size2: 2rem;
+    --heading-size3: 1.5rem;
+    --heading-line-height-size3: 1.75rem;
+    --heading-size4: 1.25rem;
+    --heading-line-height-size4: 1.5rem;
+    --heading-size5: 1rem;
+    --heading-line-height-size5: 1.25rem;
     --string-size1: 1.25rem;
     --string-line-height-size1: 1.5rem;
     --string-size2: 1rem;
@@ -272,6 +226,16 @@ $line-height-body: 1.4;
   @media (min-width: $breakpoint-xl) {
     --quote-size: 2rem;
     --quote-line-height: 2.5rem;
+    --heading-size1: 2rem;
+    --heading-line-height-size1: 2.25rem;
+    --heading-size2: 2rem;
+    --heading-line-height-size2: 2.25rem;
+    --heading-size3: 1.75rem;
+    --heading-line-height-size3: 2rem;
+    --heading-size4: 1.5rem;
+    --heading-line-height-size4: 1.75rem;
+    --heading-size5: 1.25rem;
+    --heading-line-height-size5: 1.5rem;
     --string-size1: 1.5rem;
     --string-line-height-size1: 1.75rem;
     --string-size2: 1.25rem;
@@ -297,9 +261,6 @@ $line-height-body: 1.4;
     --snw-header-link-line-height: 1.75rem;
     --snw-flyout-link-size: 1.125rem;
     --snw-flyout-link-line-height: 2.125rem;
-
-    // FONT SIZES
-    @include font-size-vars--lg;
   }
 }
 
@@ -309,6 +270,18 @@ $title-size2: var(--heading-size2);
 $title-size3: var(--heading-size3);
 $title-size4: var(--heading-size4);
 
+// HEADING
+$heading-size1: var(--heading-size1);
+$heading-line-height-size1: var(--heading-line-height-size1);
+$heading-size2: var(--heading-size2);
+$heading-line-height-size2: var(--heading-line-height-size2);
+$heading-size3: var(--heading-size3);
+$heading-line-height-size3: var(--heading-line-height-size3);
+$heading-size4: var(--heading-size4);
+$heading-line-height-size4: var(--heading-line-height-size4);
+$heading-size5: var(--heading-size5);
+$heading-line-height-size5: var(--heading-line-height-size5);
+
 // BODY
 $body-size1: var(--body-size1);
 $body-line-height-size1: var(--body-line-height-size1);
@@ -351,6 +324,8 @@ $snw-heading-hero-line-height2: var(--snw-heading-hero-line-height-size2);
 
 // SNOWFLAKES
 $snowflake-menu-padding: 1.25rem;
+$snowflake-note-size: var(--snw-note-size);
+$snowflake-note-line-height: var(--snw-note-line-height);
 
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
@@ -474,5 +449,5 @@ $search-size: var(--search-size);
 $header-height: var(--header-height);
 `;
 export {
-  n as default
+  e as default
 };

package/dist/scss/components/Accordion/_accordion.scss

@@ -34,7 +34,7 @@
   }
 
   &__content--lg {
-    @include text($bodyMd);
+    @include text($body2);
   }
 
   &--transition[data-state='open'] {
@@ -124,15 +124,15 @@
   }
 
   &__text {
-    @include text($labelMd);
-
     flex: auto;
     font-variation-settings: 'wght' 600;
     text-align: left;
+
+    @include text($string2);
   }
 
   &__text--lg {
-    @include text($bodyLgBold);
+    @include text($body1);
   }
 
   &__icon {

package/dist/scss/components/AddToCalendar/_addToCalendar.scss

@@ -45,7 +45,7 @@
   }
 
   &-atcb-item-link {
-    @include text($bodyMd);
+    @include text($body-size2);
 
     background: none;
     border: none;
@@ -66,7 +66,7 @@
     }
 
     span {
-      @include text($bodyMd);
+      @include text($body-size2);
 
       font-variation-settings: 'wght' 400;
       text-decoration: none;

package/dist/scss/components/Article/_article.scss

@@ -17,11 +17,6 @@
     flex-direction: column;
     justify-content: center;
 
-    &-title,
-    .#{$px}-article__content-title {
-      margin-bottom: $spacing-md;
-    }
-
     &-label,
     &-description {
       color: $soft-black;

package/dist/scss/components/Breadcrumb/_breadcrumb.scss

@@ -1,7 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-breadcrumb {
-  @include text($bodyLg);
+  @include text($body2);
 
   color: $pure-black;
 

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

@@ -2,7 +2,7 @@
 
 .#{$px}-button {
   @include bodyText;
-  @include text($labelMdBold);
+  @include labelText($button);
 
   align-items: center;
   background-color: $pure-black;

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

@@ -23,7 +23,7 @@
   }
 
   &__input {
-    @include text($labelMd);
+    @include text($string2);
 
     accent-color: $soft-black;
     border: 1px solid $keyline-gray;
@@ -61,7 +61,7 @@
   }
 
   &__label {
-    @include text($labelMd);
+    @include text($string2);
 
     color: $pure-black;
     display: inline-block;
@@ -146,7 +146,7 @@
     padding: $padding-micro $padding-xsm;
     transition: background-color 0.1s ease;
 
-    @include text($labelMd);
+    @include text($string2);
 
     &:hover,
     &[data-selected='true'] {
@@ -169,7 +169,7 @@
   }
 
   &__item__invalid-text {
-    @include text($labelMd);
+    @include text($string2);
 
     align-items: center;
     display: flex;

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

@@ -1,7 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-countdown {
-  @include text($bodyMd);
+  @include text($body2);
 
   align-items: center;
   border-bottom: none;
@@ -18,7 +18,7 @@
   }
 
   &__countdown-container {
-    @include text($heading4);
+    @include text($heading5);
 
     align-items: center;
     display: flex;

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

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

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

@@ -8,7 +8,7 @@
   display: flex;
   gap: $spacing-md;
 
-  @include text($labelMd);
+  @include text($string2);
 
   &__label {
     flex-shrink: 0;

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

@@ -29,9 +29,9 @@
     @include DistinctDisplay;
 
     color: $primary-black;
-    font-size: $font-size-sm;
+    font-size: $heading-size4;
     font-variation-settings: 'wght' 600;
-    line-height: $line-height-default;
+    line-height: $body-line-height-size1;
     margin-top: 4px; // better visual align with the close icon
     overflow: hidden;
     text-align: center;

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

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

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

@@ -37,7 +37,7 @@ $chevron-scale: 0.8;
     }
 
     &__back {
-      @include text($bodyMd); // workaround where the tertiary button text is not scaling at different breakpoints
+      @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
 
       margin-top: $spacing-sm;
     }
@@ -64,7 +64,7 @@ $chevron-scale: 0.8;
       height: unset;
 
       &__label {
-        @include text($labelMdBold);
+        @include text($body2);
 
         color: inherit;
         margin-bottom: 0;
@@ -84,7 +84,7 @@ $chevron-scale: 0.8;
   }
 
   &__view-all {
-    @include text($bodyMd); // workaround where the tertiary button text is not scaling at different breakpoints
+    @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
   }
 
   &.is-opening {

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

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

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

@@ -14,7 +14,7 @@ $lg: #{$px}-input--lg;
   }
 
   &__label {
-    @include text($labelMd);
+    @include text($string2);
 
     color: $pure-black;
     font-variation-settings: 'wght' 600;
@@ -28,7 +28,7 @@ $lg: #{$px}-input--lg;
   }
 
   &__wrapper {
-    @include text($labelMd);
+    @include text($string2);
 
     accent-color: $soft-black;
     align-items: center;
@@ -72,7 +72,7 @@ $lg: #{$px}-input--lg;
   }
 
   &__input {
-    @include text($labelMd);
+    @include text($string2);
 
     accent-color: $soft-black;
     border: 1px solid $keyline-gray;

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

@@ -20,15 +20,15 @@
   }
 
   &--email {
-    @include text($labelMdBold);
+    @include text($email);
   }
 
   &--link {
-    @include text($labelMdBold);
+    @include text($link);
   }
 
   &--snwHeaderLink {
-    @include text($title2);
+    @include text($snwHeaderLink);
 
     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 +51,7 @@
   &--snwFlyoutLink {
     border-bottom: 1px solid transparent;
 
-    @include text($labelLg);
+    @include text($snwFlyoutLink);
 
     &:hover,
     &:focus-visible {

package/dist/scss/components/Navigation/_navigation.scss

@@ -5,7 +5,6 @@
   display: flex;
   height: fit-content;
   justify-content: center;
-  width: 100vw;
 
   &__list-container {
     display: flex;
@@ -22,6 +21,10 @@
         border-top: unset;
       }
 
+      @include isHeaderMobile {
+        padding: 0 $spacing-md;
+      }
+
       .#{$px}-nav__item + .#{$px}-accordion {
         border-top: 0;
       }

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

@@ -2,10 +2,45 @@
 
 .#{$px}-notification-banner {
   background: $light-gray;
+  color: $pure-black;
+  font-size: $snowflake-note-size;
+  font-variation-settings: 'wght' 600;
   left: 0;
+  line-height: $snowflake-note-line-height;
   padding: $spacing-sm $spacing-md;
   position: fixed;
+  text-align: center;
   top: 0;
   width: 100%;
   z-index: $z-index-notification-banner;
+
+  > * {
+    font-size: $snowflake-note-size;
+    font-variation-settings: 'wght' 600;
+    line-height: $snowflake-note-line-height;
+    text-align: center;
+
+    a {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  > .#{$px}-notification-banner-content {
+    color: $pure-black;
+    font-size: $snowflake-note-size;
+    font-variation-settings: 'wght' 600;
+    line-height: $snowflake-note-line-height;
+    text-align: center;
+
+    a {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  .#{$px}-notification-banner-link {
+    cursor: pointer;
+    text-decoration: underline;
+  }
 }

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

@@ -32,7 +32,7 @@
 
 .#{$px}--inline-pagination__wrapper {
   select {
-    @include text($bodyMd);
+    @include pText($body-size2);
 
     appearance: none;
     border: none;

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

@@ -41,10 +41,6 @@
       transition: width 0.25s ease-in 0.2s;
       width: 100%;
     }
-
-    @include isHeaderMobile {
-      left: $spacing-md;
-    }
   }
 
   &__input-status-icon {
@@ -112,7 +108,7 @@
 
         @include isHeaderMobile {
           height: calc(var(--spacing-md) + var(--search-size));
-          line-height: $line-height-default;
+          line-height: calc(var(--spacing-md) + var(--search-size));
           padding: $spacing-md 0;
           position: relative;
           top: calc($spacing-md * -1);
@@ -137,22 +133,21 @@
 .#{$px}-search__container {
   @include isHeaderMobile {
     border-bottom: 1px solid $light-gray;
-    left: 50%;
-    margin-left: -50vw;
+    margin-right: $spacing-md;
+    padding-left: $spacing-md;
     position: relative;
-    width: 100vw;
+    width: 100%;
   }
 
   &__inner {
     cursor: pointer;
     display: flex;
     justify-content: space-between;
-    padding: 0 $padding-md;
+    padding: 0;
     pointer-events: all;
 
     @include isHeaderDesktop {
       cursor: default;
-      padding: 0;
     }
 
     @include isHeaderMobile {

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

@@ -1,7 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-tabs-container {
-  @include text($bodyMd);
+  @include text($body2);
 
   width: 100%;
 

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

@@ -48,7 +48,7 @@
   }
 
   &--clear {
-    @include text($bodySm);
+    @include text($body3);
 
     align-items: center;
     border-color: $pure-white;

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

@@ -1,7 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-text-area {
-  @include text($labelMd);
+  @include text($string2);
 
   accent-color: $soft-black;
   border: 1px solid $keyline-gray;
@@ -38,7 +38,7 @@
   }
 
   &__label {
-    @include text($labelMd);
+    @include text($string2);
 
     color: $pure-black;
     font-variation-settings: 'wght' 600;

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

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

package/dist/scss/patterns/SaleHeaderBanner/_saleHeaderBanner.scss

@@ -36,7 +36,7 @@
       width: 100%;
     }
 
-    .#{$px}-text--#{$eyebrowSm} {
+    .#{$px}-text--badge {
       margin-bottom: $spacing-xsm;
     }
   }