@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/_sharedClasses.scss

@@ -2,75 +2,79 @@
 /* stylelint-disable declaration-empty-line-before */
 @use './vars' as *;
 @use './utils' as *;
+@use './layers';
 
 // I think this is pretty tailwindy to generate these common classes
-@each $direction in 'vertical', 'horizontal' {
-  @each $padding in $padding-tokens {
-    @each $side in 'start', 'end', 'both' {
-      @include padding($padding, $direction, $side);
-    }
-  }
-}
-
-.#{$px}-skeleton,
-.#{$px}-skeleton::before,
-.#{$px}-skeleton::after {
-  animation: skeleton-pulse 1s infinite alternate-reverse !important;
-  background-image: none !important;
-  background-clip: initial !important;
-  border-radius: $radius-xs !important;
-  /* stylelint-disable-next-line declaration-property-value-allowed-list */
-  border-color: #0000 !important;
-  box-shadow: none !important;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-box-decoration-break: clone !important;
-  box-decoration-break: clone !important;
-  /* stylelint-disable-next-line declaration-property-value-allowed-list */
-  color: #0000 !important;
-  outline: none !important;
-  pointer-events: none !important;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-user-select: none !important;
-  user-select: none !important;
-  cursor: default !important;
-}
-
-input[type='checkbox'].#{$px}-skeleton,
-input[type='radio'].#{$px}-skeleton {
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-appearance: none;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -moz-appearance: none;
-  appearance: none;
-  padding: 0 !important;
-  width: 13px !important;
-  height: 13px !important;
-}
-
-button.#{$px}-skeleton {
-  border-radius: $radius-xs !important;
 
-  svg path {
-    fill: transparent !important;
+@layer seldon.foundation {
+  @each $direction in 'vertical', 'horizontal' {
+    @each $padding in $padding-tokens {
+      @each $side in 'start', 'end', 'both' {
+        @include padding($padding, $direction, $side);
+      }
+    }
   }
-}
 
-.#{$px}-toggle-input {
+  .#{$px}-skeleton,
   .#{$px}-skeleton::before,
   .#{$px}-skeleton::after {
+    animation: skeleton-pulse 1s infinite alternate-reverse !important;
+    background-image: none !important;
+    background-clip: initial !important;
     border-radius: $radius-xs !important;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    border-color: #0000 !important;
+    box-shadow: none !important;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-box-decoration-break: clone !important;
+    box-decoration-break: clone !important;
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    color: #0000 !important;
+    outline: none !important;
+    pointer-events: none !important;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-user-select: none !important;
+    user-select: none !important;
+    cursor: default !important;
   }
-  .#{$px}-skeleton::after {
-    display: none !important;
+
+  input[type='checkbox'].#{$px}-skeleton,
+  input[type='radio'].#{$px}-skeleton {
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-appearance: none;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0 !important;
+    width: 13px !important;
+    height: 13px !important;
   }
-}
 
-@keyframes skeleton-pulse {
-  0% {
-    background-color: $grey-50;
+  button.#{$px}-skeleton {
+    border-radius: $radius-xs !important;
+
+    svg path {
+      fill: transparent !important;
+    }
   }
 
-  100% {
-    background-color: $black-25;
+  .#{$px}-toggle-input {
+    .#{$px}-skeleton::before,
+    .#{$px}-skeleton::after {
+      border-radius: $radius-xs !important;
+    }
+    .#{$px}-skeleton::after {
+      display: none !important;
+    }
+  }
+
+  @keyframes skeleton-pulse {
+    0% {
+      background-color: $grey-50;
+    }
+
+    100% {
+      background-color: $black-25;
+    }
   }
 }

package/dist/scss/_typography.scss

@@ -1,60 +1,72 @@
 @use './vars' as *;
+@use './layers';
 
-html,
-body {
-  font-family:
-    Montserrat,
-    -apple-system,
-    BlinkMacSystemFont,
-    'avenir next',
-    avenir,
-    'segoe ui',
-    'helvetica neue',
-    helvetica,
-    Cantarell,
-    Ubuntu,
-    roboto,
-    noto,
-    arial,
-    sans-serif;
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  margin: 0;
-  -webkit-overflow-scrolling: touch;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
-}
+@layer seldon.foundation {
+  html,
+  body {
+    font-family:
+      Montserrat,
+      -apple-system,
+      BlinkMacSystemFont,
+      'avenir next',
+      avenir,
+      'segoe ui',
+      'helvetica neue',
+      helvetica,
+      Cantarell,
+      Ubuntu,
+      roboto,
+      noto,
+      arial,
+      sans-serif;
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    -webkit-overflow-scrolling: touch;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+  }
 
-/** Fonts **/
-@font-face {
-  font-family: DistinctDisplay;
-  src: url('@phillips/seldon/dist/fonts/Distinct-Display.woff') format('woff');
-  src: url('@phillips/seldon/dist/fonts/Distinct-Display.woff2') format('woff2');
-}
+  /** Fonts **/
+  @font-face {
+    font-display: swap;
+    font-family: DistinctDisplay;
+    src:
+      url('@phillips/seldon/dist/fonts/Distinct-Display.woff2') format('woff2'),
+      url('@phillips/seldon/dist/fonts/Distinct-Display.woff') format('woff');
+  }
 
-@font-face {
-  font-family: DistinctDisplay;
-  font-style: italic;
-  src: url('@phillips/seldon/dist/fonts/Distinct-DisplayItalic.woff') format('woff');
-  src: url('@phillips/seldon/dist/fonts/Distinct-DisplayItalic.woff2') format('woff2');
-}
+  @font-face {
+    font-display: swap;
+    font-family: DistinctDisplay;
+    font-style: italic;
+    src:
+      url('@phillips/seldon/dist/fonts/Distinct-DisplayItalic.woff2') format('woff2'),
+      url('@phillips/seldon/dist/fonts/Distinct-DisplayItalic.woff') format('woff');
+  }
 
-/** Fonts **/
-@font-face {
-  font-family: Montserrat;
-  src: url('@phillips/seldon/dist/fonts/Montserrat.woff') format('woff');
-  src: url('@phillips/seldon/dist/fonts/Montserrat.woff2') format('woff2');
-}
+  @font-face {
+    font-display: swap;
+    font-family: Montserrat;
+    src:
+      url('@phillips/seldon/dist/fonts/Montserrat.woff2') format('woff2'),
+      url('@phillips/seldon/dist/fonts/Montserrat.woff') format('woff');
+  }
 
-@font-face {
-  font-family: Distinct;
-  src: url('@phillips/seldon/dist/fonts/Distinct-Text.woff') format('woff');
-  src: url('@phillips/seldon/dist/fonts/Distinct-Text.woff2') format('woff2');
-}
+  @font-face {
+    font-display: swap;
+    font-family: Distinct;
+    src:
+      url('@phillips/seldon/dist/fonts/Distinct-Text.woff2') format('woff2'),
+      url('@phillips/seldon/dist/fonts/Distinct-Text.woff') format('woff');
+  }
 
-@font-face {
-  font-family: Distinct;
-  font-style: italic;
-  src: url('@phillips/seldon/dist/fonts/Distinct-Italic.woff') format('woff');
-  src: url('@phillips/seldon/dist/fonts/Distinct-Italic.woff2') format('woff2');
+  @font-face {
+    font-display: swap;
+    font-family: Distinct;
+    font-style: italic;
+    src:
+      url('@phillips/seldon/dist/fonts/Distinct-Italic.woff2') format('woff2'),
+      url('@phillips/seldon/dist/fonts/Distinct-Italic.woff') format('woff');
+  }
 }

package/dist/scss/_vars.scss

@@ -245,11 +245,12 @@ $linkSmall: 'linkSmall';
 $badgeSmall: 'badgeSmall';
 $badgeMedium: 'badgeMedium';
 $stringSmall: 'stringSmall';
-$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, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
-  $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
-  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
+$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, $displayMedium, $displaySmall, $headingLarge, $headingMedium, $headingSmall,
+  $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall, $linkStylised,
+  $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts

package/dist/scss/_vars.scss.cjs

@@ -245,11 +245,12 @@ $linkSmall: 'linkSmall';
 $badgeSmall: 'badgeSmall';
 $badgeMedium: 'badgeMedium';
 $stringSmall: 'stringSmall';
-$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, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
-  $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
-  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
+$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, $displayMedium, $displaySmall, $headingLarge, $headingMedium, $headingSmall,
+  $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall, $linkStylised,
+  $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts

package/dist/scss/_vars.scss.js

@@ -245,11 +245,12 @@ $linkSmall: 'linkSmall';
 $badgeSmall: 'badgeSmall';
 $badgeMedium: 'badgeMedium';
 $stringSmall: 'stringSmall';
-$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, $displayMedium, $displaySmall, $headingLarge, $headingMedium,
-  $headingSmall, $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall,
-  $linkStylised, $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
+$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, $displayMedium, $displaySmall, $headingLarge, $headingMedium, $headingSmall,
+  $headingExtraSmall, $bodyLarge, $bodyMedium, $bodySmall, $labelLarge, $labelMedium, $labelSmall, $linkStylised,
+  $linkLarge, $linkMedium, $linkSmall, $badgeSmall, $badgeMedium, $stringSmall;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts

package/dist/scss/componentStyles.scss

@@ -1,10 +1,10 @@
-// 🌎 Globals
+// 🌎 Globals (tokens, type, padding utilities)
 
 // @TODO: reset styles when we can do a site wide regressions QA in phillips-public
 // @use 'reset';
 
-@use './typography' as *;
-@use './vars' as *;
+@use './layers';
+@use './foundation';
 
 // ⚛️ Components
 @use 'components/Banner/banner';
@@ -98,66 +98,3 @@
 @use 'components/NotificationBanner/notificationBanner';
 @use 'patterns/TextBanner/textBanner';
 @use 'patterns/PhoneNumberInput/phoneNumberInput';
-
-: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;
-  --string-line-height-size2: 1rem;
-  --string-size3: 0.5rem;
-  --string-line-height-size3: 0.75rem;
-  --body-size1: 1rem;
-  --body-line-height-size1: 1.5rem;
-  --body-size2: 0.75rem;
-  --body-line-height-size2: 1.25rem;
-  --body-size3: 0.5rem;
-  --body-line-height-size3: 1rem;
-  --label-size1: 1rem;
-  --label-size2: 0.75rem;
-  --label-size3: 0.56rem;
-  --label-size4: 0.56rem;
-  --link-label-size: 0.75rem;
-  --link-label-line-height: 0.75rem;
-  --button-label-size: 0.75rem;
-  --button-label-line-height: 1rem;
-  --button-tertiary-height: 1.75rem;
-  --badge-label-size: 0.5rem;
-  --badge-label-line-height: 0.67rem;
-  --snw-header-link-size: 1rem;
-  --snw-header-link-line-height: 1.5rem;
-  --snw-flyout-link-size: 1rem;
-  --snw-flyout-link-line-height: 1.75rem;
-  --snw-heading-hero-size1: 2rem;
-  --snw-heading-hero-line-height-size1: 2.375rem;
-  --snw-heading-hero-size2: 1.625rem;
-  --snw-heading-hero-line-height-size2: 1.9375rem;
-  --snw-button-padding: 0.5rem;
-  --spacing-micro: 0.25rem;
-  --spacing-xsm: 0.5rem;
-  --spacing-sm: 0.75rem;
-  --spacing-md: 1.75rem;
-  --spacing-lg: 2.75rem;
-  --spacing-xl: 3.75rem;
-  --spacing-xxl: 4.75rem;
-  --spacing-xxxl: 5.75rem;
-  --header-height: 56px; // Set dynamically by Header component on mount
-  --search-size: 2.32rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
-  --banner-height: 0px;
-
-  // FONT SIZES
-
-  @include font-size-vars;
-}

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

@@ -1,140 +1,143 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-accordion {
-  border-top: 1px solid $light-gray;
-  width: 100%;
-}
-
-.#{$px}-accordion-item {
-  width: 100%;
-
-  svg {
-    max-width: unset;
-  }
-
-  &__border-bottom {
-    border-bottom: 1px solid $light-gray;
+@layer seldon.components {
+  .#{$px}-accordion {
+    border-top: 1px solid $light-gray;
+    width: 100%;
   }
 
-  &__content {
-    display: block;
+  .#{$px}-accordion-item {
+    width: 100%;
 
-    .radix-accordion-content {
-      padding-bottom: $spacing-sm;
+    svg {
+      max-width: unset;
     }
 
-    &--locked {
-      padding-bottom: $spacing-sm;
+    &__border-bottom {
+      border-bottom: 1px solid $light-gray;
     }
-  }
-
-  &--transition {
-    overflow: hidden;
-  }
 
-  &--transition[data-state='open'] {
-    animation: slide-down var(--seldon-accordion-transition-time) ease-out;
-  }
+    &__content {
+      display: block;
 
-  &--transition[data-state='closed'] {
-    animation: slide-up var(--seldon-accordion-transition-time) ease-out forwards;
-  }
+      .radix-accordion-content {
+        padding-bottom: $spacing-sm;
+      }
 
-  &[data-state='open'] {
-    .#{$px}-accordion-item-label-plus__icon {
-      display: none;
+      &--locked {
+        padding-bottom: $spacing-sm;
+      }
     }
 
-    .#{$px}-accordion-item-label-minus__icon {
-      display: block;
+    &--transition {
+      overflow: hidden;
     }
-  }
 
-  &[data-state='closed'] {
-    .#{$px}-accordion-item-label-plus__icon {
-      display: block;
+    &--transition[data-state='open'] {
+      animation: slide-down var(--seldon-accordion-transition-time) ease-out;
     }
 
-    .#{$px}-accordion-item-label-minus__icon {
-      display: none;
+    &--transition[data-state='closed'] {
+      animation: slide-up var(--seldon-accordion-transition-time) ease-out forwards;
     }
-  }
 
-  @keyframes slide-down {
-    from {
-      height: 0;
+    &[data-state='open'] {
+      .#{$px}-accordion-item-label-plus__icon {
+        display: none;
+      }
+
+      .#{$px}-accordion-item-label-minus__icon {
+        display: block;
+      }
     }
 
-    to {
-      height: var(--radix-accordion-content-height);
+    &[data-state='closed'] {
+      .#{$px}-accordion-item-label-plus__icon {
+        display: block;
+      }
+
+      .#{$px}-accordion-item-label-minus__icon {
+        display: none;
+      }
     }
-  }
 
-  @keyframes slide-up {
-    from {
-      height: var(--radix-accordion-content-height);
+    @keyframes slide-down {
+      from {
+        height: 0;
+      }
+
+      to {
+        height: var(--radix-accordion-content-height);
+      }
     }
 
-    to {
-      height: 0;
+    @keyframes slide-up {
+      from {
+        height: var(--radix-accordion-content-height);
+      }
+
+      to {
+        height: 0;
+      }
     }
   }
-}
 
-.#{$px}-accordion-item-label {
-  align-items: center;
-
-  // Reset button styles to match div appearance
-  background: none;
-  border: none;
-  display: flex;
-  flex-direction: row;
-  font: inherit;
-  justify-content: space-between;
-  padding: $spacing-sm 0;
-  text-align: inherit;
-  width: 100%;
-
-  // Disabled state: keep normal appearance (no gray-out), only interaction is disabled
-  &[data-disabled] {
-    color: inherit;
-    opacity: 1;
-  }
+  .#{$px}-accordion-item-label {
+    align-items: center;
+
+    // Reset button styles to match div appearance
+    background: none;
+    border: none;
+    display: flex;
+    flex-direction: row;
+    font: inherit;
+    justify-content: space-between;
+    padding: $spacing-sm 0;
+    text-align: inherit;
+    width: 100%;
+
+    // Disabled state: keep normal appearance (no gray-out), only interaction is disabled
+    &[data-disabled] {
+      color: inherit;
+      opacity: 1;
+    }
 
-  &--hoverable {
-    cursor: pointer;
+    &--hoverable {
+      cursor: pointer;
 
-    &:hover {
-      opacity: 0.75;
+      &:hover {
+        opacity: 0.75;
+      }
     }
-  }
-
-  &:focus-visible {
-    @include focus-ring;
-  }
 
-  &__text {
-    flex: auto;
-    font-variation-settings: 'wght' 600;
-    text-align: left;
-  }
+    &:focus-visible {
+      @include focus-ring;
+    }
 
-  &__icon {
-    flex: initial;
-    height: 0.875rem;
-    width: 1.5rem;
-  }
+    &__text {
+      flex: auto;
+      font-variation-settings: 'wght' 600;
+      text-align: left;
+    }
 
-  @include media($breakpoint-md) {
     &__icon {
       flex: initial;
-      height: 1rem;
+      height: 0.875rem;
       width: 1.5rem;
     }
-  }
 
-  &--blue-fill {
-    filter: brightness(0) saturate(100%) invert(51%) sepia(72%) saturate(1698%) hue-rotate(191deg) brightness(95%)
-      contrast(86%);
+    @include media($breakpoint-md) {
+      &__icon {
+        flex: initial;
+        height: 1rem;
+        width: 1.5rem;
+      }
+    }
+
+    &--blue-fill {
+      filter: brightness(0) saturate(100%) invert(51%) sepia(72%) saturate(1698%) hue-rotate(191deg) brightness(95%)
+        contrast(86%);
+    }
   }
 }