@phillips/seldon 1.178.0 → 1.180.0

package/dist/scss/_vars.scss.js

@@ -1,6 +1,41 @@
-const e = `// prefix
+const n = `// 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:
 ///////////////////////
@@ -83,19 +118,40 @@ $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';
@@ -110,9 +166,11 @@ $snwHeaderLink: 'snwHeaderLink';
 $snwFlyoutLink: 'snwFlyoutLink';
 $snwHeadingHero1: 'snwHeadingHero1';
 $snwHeadingHero2: '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;
+$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;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
@@ -127,20 +185,14 @@ $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;
@@ -173,19 +225,15 @@ $breakpoint-xl: 1801px;
   --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;
+
   @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;
@@ -224,16 +272,6 @@ $breakpoint-xl: 1801px;
   @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;
@@ -259,6 +297,9 @@ $breakpoint-xl: 1801px;
     --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;
   }
 }
 
@@ -268,18 +309,6 @@ $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);
@@ -445,5 +474,5 @@ $search-size: var(--search-size);
 $header-height: var(--header-height);
 `;
 export {
-  e as default
+  n as default
 };

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

@@ -34,7 +34,7 @@
   }
 
   &__content--lg {
-    @include text($body2);
+    @include text($bodyMd);
   }
 
   &--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($body1);
+    @include text($bodyLgBold);
   }
 
   &__icon {

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

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

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

@@ -17,6 +17,11 @@
     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($body2);
+  @include text($bodyLg);
 
   color: $pure-black;
 

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

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

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

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

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

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

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

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

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

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

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

@@ -29,9 +29,9 @@
     @include DistinctDisplay;
 
     color: $primary-black;
-    font-size: $heading-size4;
+    font-size: $font-size-sm;
     font-variation-settings: 'wght' 600;
-    line-height: $body-line-height-size1;
+    line-height: $line-height-default;
     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($body3);
+  @include text($bodyMd);
 
   &__trigger {
     align-items: center;
@@ -77,7 +77,7 @@
   }
 
   &__item {
-    @include text($body3);
+    @include text($bodySm);
 
     align-items: center;
     display: flex;

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

@@ -37,7 +37,7 @@ $chevron-scale: 0.8;
     }
 
     &__back {
-      @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
+      @include text($bodyMd); // 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($body2);
+        @include text($labelMdBold);
 
         color: inherit;
         margin-bottom: 0;
@@ -84,7 +84,7 @@ $chevron-scale: 0.8;
   }
 
   &__view-all {
-    @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
+    @include text($bodyMd); // 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($string2);
+    @include text($labelMd);
   }
 
   .icon-wrapper {

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

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

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

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

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

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

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

@@ -112,7 +112,7 @@
 
         @include isHeaderMobile {
           height: calc(var(--spacing-md) + var(--search-size));
-          line-height: calc(var(--spacing-md) + var(--search-size));
+          line-height: $line-height-default;
           padding: $spacing-md 0;
           position: relative;
           top: calc($spacing-md * -1);

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

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

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

@@ -48,7 +48,7 @@
   }
 
   &--clear {
-    @include text($body3);
+    @include text($bodySm);
 
     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($string2);
+  @include text($labelMd);
 
   accent-color: $soft-black;
   border: 1px solid $keyline-gray;
@@ -38,7 +38,7 @@
   }
 
   &__label {
-    @include text($string2);
+    @include text($labelMd);
 
     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($heading4);
+  @include text($heading3);
 
   display: inline-flex;
   gap: $spacing-micro;
 
   &--estimation {
-    @include text($heading5);
+    @include text($heading4);
 
     margin-left: 0.25rem;
   }

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

@@ -36,7 +36,7 @@
       width: 100%;
     }
 
-    .#{$px}-text--badge {
+    .#{$px}-text--#{$eyebrowSm} {
       margin-bottom: $spacing-xsm;
     }
   }
@@ -46,6 +46,14 @@
     margin: $spacing-xsm 0;
   }
 
+  &__badge {
+    border: 1px solid $badge-blue;
+    color: $badge-blue;
+    font-size: $string-size3;
+    margin: $spacing-xsm 0;
+    padding: $spacing-micro $spacing-xsm;
+  }
+
   &__occurrence-details {
     align-items: center;
     display: flex;

package/dist/scss/patterns/Social/_social.scss

@@ -29,7 +29,7 @@ $num_icons: 5;
   }
 
   &__button {
-    @include labelText('link');
+    @include text($labelMdBold);
 
     border-radius: 0;
     color: $pure-black;

package/dist/scss/patterns/Subscribe/_subscribe.scss

@@ -5,13 +5,13 @@
   width: 100%;
 
   &__title {
-    @include text($heading3);
+    @include text($heading2);
 
     margin-bottom: $spacing-xsm;
   }
 
   &__blurb {
-    @include text($body1);
+    @include text($bodyLg);
 
     color: $pure-black;
   }
@@ -27,6 +27,6 @@
   }
 
   &__privacy {
-    @include text($body3);
+    @include text($bodySm);
   }
 }

package/dist/scss/site-furniture/Footer/_footer.scss

@@ -48,7 +48,7 @@
       ul {
         li {
           a {
-            @include text('snwFlyoutLink');
+            @include text($labelLg);
 
             &:hover {
               text-decoration: underline;
@@ -94,7 +94,7 @@
         }
 
         &__text {
-          @include text('snwHeaderLink');
+          @include text($title3);
         }
       }
 

package/dist/site-furniture/Footer/Footer.js

@@ -13,7 +13,7 @@ const $ = ({
   /* @__PURE__ */ o("div", { className: `${r}-footer__links`, children: a }),
   /* @__PURE__ */ e("div", { className: `${r}-footer__copyright`, children: [
     /* @__PURE__ */ o("h3", { "data-testid": "footer-logo", className: `${r}-footer__logo`, children: /* @__PURE__ */ o("a", { href: "/", "aria-label": "logo", children: /* @__PURE__ */ o(n, { icon: "PhillipsLogo", width: "94px" }) }) }),
-    /* @__PURE__ */ o(c, { variant: f.body3, children: s })
+    /* @__PURE__ */ o(c, { variant: f.bodySm, children: s })
   ] })
 ] });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.178.0",
+  "version": "1.180.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"