@phillips/seldon 1.279.2 → 1.280.0

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

@@ -1,276 +1,271 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-$md: #{$px}-input--md;
-$lg: #{$px}-input--lg;
+@layer seldon.components {
+  $md: #{$px}-input--md;
+  $lg: #{$px}-input--lg;
 
-// Shared Input styles
-.#{$px}-input {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+  // Shared Input styles
+  .#{$px}-input {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 
-  &--hidden,
-  &__label--hidden {
-    @include hidden;
-  }
-
-  &__label.#{$px}-text {
-    font-variation-settings: 'wght' 600;
-    margin-bottom: $spacing-xsm;
-    width: fit-content;
-    word-break: break-word;
-  }
-
-  &__wrapper {
-    accent-color: $black-100;
-    align-items: center;
-    border: 1px solid $black-100;
-    border-radius: $radius-xs;
-    display: inline-flex;
-    font-variation-settings: 'wght' 600;
-    justify-content: space-between;
-    margin-bottom: 0.25rem;
-    padding: $padding-xsm;
-    position: relative;
-
-    &::placeholder {
-      color: $cta-inactive;
-      font-variation-settings: 'wght' 600;
+    &--hidden,
+    &__label--hidden {
+      @include hidden;
     }
 
-    &:focus-visible,
-    &:focus-within {
-      @include focus-ring($border-radius: $radius-xs);
+    &__label.#{$px}-text {
+      font-variation-settings: 'wght' 600;
+      margin-bottom: $spacing-xsm;
+      width: fit-content;
+      word-break: break-word;
     }
 
-    .#{$px}-input__wrapper__input,
-    .#{$px}-input__input {
-      @include text($bodyMedium);
+    &__wrapper {
+      accent-color: $black-100;
+      align-items: center;
+      border: 1px solid $black-100;
+      border-radius: $radius-xs;
+      display: inline-flex;
+      font-variation-settings: 'wght' 600;
+      justify-content: space-between;
+      margin-bottom: 0.25rem;
+      padding: $padding-xsm;
+      position: relative;
 
-      border: none;
-      margin: 0;
-      padding: 0;
-      width: 100%;
+      &::placeholder {
+        color: $cta-inactive;
+        font-variation-settings: 'wght' 600;
+      }
 
-      &:focus-visible {
-        outline: none;
+      &:focus-visible,
+      &:focus-within {
+        @include focus-ring($border-radius: $radius-xs);
       }
-    }
 
-    &__adornment {
-      align-items: center;
-      display: flex;
-      margin-right: 0.25rem;
-      user-select: none;
-      white-space: nowrap;
-    }
-  }
+      .#{$px}-input__wrapper__input,
+      .#{$px}-input__input {
+        @include text($bodyMedium);
 
-  &__input {
-    @include text($bodyMedium);
+        border: none;
+        margin: 0;
+        padding: 0;
+        width: 100%;
 
-    accent-color: $black-100;
-    border: 1px solid $black-100;
-    border-radius: $radius-xs;
-    font-variation-settings: 'wght' 600;
-    margin-bottom: 0.25rem;
-    padding: $padding-xsm;
+        &:focus-visible {
+          outline: none;
+        }
+      }
 
-    &::placeholder {
-      font-variation-settings: 'wght' 400;
+      &__adornment {
+        align-items: center;
+        display: flex;
+        margin-right: 0.25rem;
+        user-select: none;
+        white-space: nowrap;
+      }
     }
 
-    &:focus-visible {
-      @include focus-ring($border-radius: $radius-xs);
-    }
+    &__input {
+      @include text($bodyMedium);
 
-    &:hover {
-      accent-color: $cta-hover;
-      border-color: $cta-hover;
-    }
-  }
+      accent-color: $black-100;
+      border: 1px solid $black-100;
+      border-radius: $radius-xs;
+      font-variation-settings: 'wght' 600;
+      margin-bottom: 0.25rem;
+      padding: $padding-xsm;
 
-  &__validation {
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-height: $spacing-md;
-    overflow: hidden;
-  }
+      &::placeholder {
+        font-variation-settings: 'wght' 400;
+      }
 
-  &__empty-validation {
-    line-height: $spacing-sm;
-  }
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-xs);
+      }
 
-  // Inline
-  &--inline {
-    align-items: center;
-    flex-flow: row wrap;
-    gap: 1rem;
+      &:hover {
+        accent-color: $cta-hover;
+        border-color: $cta-hover;
+      }
+    }
 
-    .#{$px}-input__input,
-    .#{$px}-input__wrapper {
-      align-self: center;
-      width: unset;
+    &__validation {
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-height: $spacing-md;
+      overflow: hidden;
     }
-  }
 
-  // Disabled
-  &--disabled {
-    color: $keyline-gray;
-    cursor: default;
+    &__empty-validation {
+      line-height: $spacing-sm;
+    }
+
+    // Inline
+    &--inline {
+      align-items: center;
+      flex-flow: row wrap;
+      gap: 1rem;
 
-    .#{$px}-input__label,
-    .#{$px}-input__input,
-    .#{$px}-input__wrapper {
-      color: inherit;
+      .#{$px}-input__input,
+      .#{$px}-input__wrapper {
+        align-self: center;
+        width: unset;
+      }
     }
-    .#{$px}-input__label:hover,
-    .#{$px}-input__input:hover {
+
+    // Disabled
+    &--disabled {
+      color: $keyline-gray;
       cursor: default;
+
+      .#{$px}-input__label,
+      .#{$px}-input__input,
+      .#{$px}-input__wrapper {
+        color: inherit;
+      }
+      .#{$px}-input__label:hover,
+      .#{$px}-input__input:hover {
+        cursor: default;
+      }
     }
-  }
 
-  // Read only
-  &--readonly {
-    pointer-events: none;
+    // Read only
+    &--readonly {
+      pointer-events: none;
 
-    .#{$px}-input__label,
-    .#{$px}-input__input,
-    .#{$px}-input__wrapper {
-      cursor: default;
-    }
+      .#{$px}-input__label,
+      .#{$px}-input__input,
+      .#{$px}-input__wrapper {
+        cursor: default;
+      }
 
-    .#{$px}-input__input {
-      background-color: rgba($pure-black, 0.05);
+      .#{$px}-input__input {
+        background-color: rgba($pure-black, 0.05);
+      }
     }
-  }
 
-  // Invalid
-  &--invalid {
-    color: $error-red;
-
-    label {
+    // Invalid
+    &--invalid {
       color: $error-red;
-    }
 
-    .#{$px}-input__input,
-    .#{$px}-input__input::placeholder,
-    .#{$px}-input__validation {
-      color: $pure-black;
-    }
+      label {
+        color: $error-red;
+      }
 
-    .#{$px}-input__input,
-    .#{$px}-input__wrapper {
-      border: 1px solid $error-red;
-      box-shadow: inset 0 0 3px 3px $error-pink;
+      .#{$px}-input__input,
+      .#{$px}-input__input::placeholder,
+      .#{$px}-input__validation {
+        color: $pure-black;
+      }
 
-      &:focus-within {
-        @include focus-ring($border-radius: $radius-xs, $outline-color: $error-red);
+      .#{$px}-input__input,
+      .#{$px}-input__wrapper {
+        border: 1px solid $error-red;
+        box-shadow: inset 0 0 3px 3px $error-pink;
+
+        &:focus-within {
+          @include focus-ring($border-radius: $radius-xs, $outline-color: $error-red);
+        }
+      }
+
+      .#{$px}-input__wrapper .#{$px}-input__input {
+        border: none;
+        box-shadow: none;
+        outline: none;
       }
     }
 
-    .#{$px}-input__wrapper .#{$px}-input__input {
-      border: none;
-      box-shadow: none;
-      outline: none;
+    // warn
+    &--warn {
+      .#{$px}-input__label {
+        position: relative;
+      }
     }
-  }
 
-  // warn
-  &--warn {
-    .#{$px}-input__label {
-      position: relative;
+    .#{$px}-input__validation {
+      animation: reveal 0.45s linear forwards;
     }
   }
 
-  .#{$px}-input__validation {
-    animation: reveal 0.45s linear forwards;
+  .#{$px}-input__label:has(+ input[type='radio']),
+  .#{$px}-input__label:has(+ input[type='checkbox']) {
+    cursor: pointer;
   }
-}
 
-.#{$px}-input__label:has(+ input[type='radio']),
-.#{$px}-input__label:has(+ input[type='checkbox']) {
-  cursor: pointer;
-}
-
-.#{$px}-radio-input,
-.#{$px}-checkbox-input {
-  .#{$px}-input__label {
-    @include text($bodyMedium);
-
-    font-variation-settings: 'wght' 600;
-    margin-bottom: 0;
-  }
+  .#{$px}-radio-input,
+  .#{$px}-checkbox-input {
+    .#{$px}-input__label {
+      @include text($bodyMedium);
 
-  .#{$px}-input__input {
-    align-self: flex-start;
-    cursor: pointer;
-    height: 16px;
-    width: 16px;
-  }
+      font-variation-settings: 'wght' 600;
+      margin-bottom: 0;
+    }
 
-  &.#{$px}-input--inline {
     .#{$px}-input__input {
-      align-self: center;
+      align-self: flex-start;
+      cursor: pointer;
+      height: 16px;
+      width: 16px;
+    }
+
+    &.#{$px}-input--inline {
+      .#{$px}-input__input {
+        align-self: center;
+      }
     }
   }
-}
 
-.#{$px}-radio-input .#{$px}-input__input {
-  &:focus-visible {
-    outline: none;
-    position: relative;
+  .#{$px}-radio-input .#{$px}-input__input {
+    &:focus-visible {
+      outline: none;
+      position: relative;
 
-    &::before {
-      border: 2px solid $focus-default;
-      border-radius: $radius-3xl;
-      content: '';
-      inset: -6px;
-      pointer-events: none;
-      position: absolute;
+      &::before {
+        border: 2px solid $focus-default;
+        border-radius: $radius-3xl;
+        content: '';
+        inset: -6px;
+        pointer-events: none;
+        position: absolute;
+      }
     }
   }
-}
 
-.#{$px}-input--inline.#{$px}-radio-input,
-.#{$px}-input--inline.#{$px}-checkbox-input,
-.#{$px}-input--inline.#{$px}-toggle-input {
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-  position: relative;
-  transition: padding 0.25s;
+  .#{$px}-input--inline.#{$px}-radio-input,
+  .#{$px}-input--inline.#{$px}-checkbox-input,
+  .#{$px}-input--inline.#{$px}-toggle-input {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    position: relative;
+    transition: padding 0.25s;
 
-  &.#{$px}-input--invalid,
-  &.#{$px}-input--warn {
-    padding-top: 1.5rem;
+    &.#{$px}-input--invalid,
+    &.#{$px}-input--warn {
+      padding-top: 1.5rem;
 
-    .#{$px}-input__validation {
-      left: 0;
-      position: absolute;
-      top: 0;
+      .#{$px}-input__validation {
+        left: 0;
+        position: absolute;
+        top: 0;
+      }
     }
-  }
 
-  &.#{$px}-input--warn {
-    padding-top: 2.75rem;
+    &.#{$px}-input--warn {
+      padding-top: 2.75rem;
+    }
   }
-}
 
-.#{$px}-select-input.#{$px}-input {
-  width: fit-content;
-}
-.#{$px}-select-input .#{$px}-input__input {
-  background: transparent;
-  width: fit-content;
-}
-
-@keyframes reveal {
-  0% {
-    opacity: 0;
-  }
+  @keyframes reveal {
+    0% {
+      opacity: 0;
+    }
 
-  100% {
-    opacity: 1;
+    100% {
+      opacity: 1;
+    }
   }
 }

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

@@ -1,88 +1,93 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-link {
-  color: $pure-black;
-  text-decoration: none;
+@layer seldon.components {
+  .#{$px}-link {
+    color: $pure-black;
+    text-decoration: none;
 
-  &:focus-visible {
-    @include focus-ring($border-radius: $radius-xs);
-  }
+    &:focus-visible {
+      @include focus-ring($border-radius: $radius-xs);
+    }
 
-  &--email.#{$px}-link--email,
-  &--link.#{$px}-link--link,
-  &--linkSmall,
-  &--linkMedium,
-  &--linkLarge {
-    @include underline($offset: 1px);
-  }
+    &--email.#{$px}-link--email,
+    &--link.#{$px}-link--link,
+    &--linkSmall,
+    &--linkMedium,
+    &--linkLarge {
+      @include underline($offset: 1px);
+    }
 
-  &--linkLarge {
-    @include text($linkLarge);
-  }
+    &--linkLarge {
+      @include text($linkLarge);
+    }
 
-  &--linkMedium {
-    @include text($linkMedium);
-  }
+    &--linkMedium {
+      @include text($linkMedium);
+    }
 
-  &--linkSmall {
-    @include text($linkSmall);
-  }
+    &--linkSmall {
+      @include text($linkSmall);
+    }
 
-  &--linkStylised {
-    @include text($linkStylised);
-  }
+    &--linkStylised {
+      @include text($linkStylised);
+    }
 
-  &--email,
-  &--link {
-    &:hover,
-    &:focus-visible {
-      color: $dark-gray;
+    &--email,
+    &--link {
+      &:hover,
+      &:focus-visible {
+        color: $dark-gray;
+      }
     }
-  }
 
-  &--email {
-    @include text($linkMedium);
+    &--email {
+      @include text($linkMedium);
 
-    .#{$px}-text {
-      font-variation-settings: 'wght' 600;
+      .#{$px}-text {
+        font-variation-settings: 'wght' 600;
+      }
     }
-  }
 
-  &--link {
-    @include text($link);
-  }
+    &--link {
+      @include text($link);
+    }
 
-  &--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;
-    text-align: center;
-
-    @include media($breakpoint-md) {
-      &:hover::after,
-      &:focus-visible::after {
-        background: $pure-black;
-        bottom: -1px;
-        content: '';
-        height: 1px;
-        left: 0;
-        position: absolute;
-        right: 0;
+    &--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;
+      text-align: center;
+
+      @include media($breakpoint-md) {
+        &:hover::after,
+        &:focus-visible::after {
+          background: $pure-black;
+          bottom: -1px;
+          content: '';
+          height: 1px;
+          left: 0;
+          position: absolute;
+          right: 0;
+        }
       }
     }
-  }
 
-  &--snwFlyoutLink {
-    border-bottom: 1px solid transparent;
+    &--snwFlyoutLink {
+      border-bottom: 1px solid transparent;
 
-    @include text($linkLarge);
+      @include text($linkLarge);
 
-    &:hover,
-    &:focus-visible {
-      @include underline($color: $dark-gray); // 1 px so that the bottom border of the nav counts as part of the button
+      &:hover,
+      &:focus-visible {
+        @include underline(
+          $color: $dark-gray
+        ); // 1 px so that the bottom border of the nav counts as part of the button
 
-      color: $dark-gray;
+        color: $dark-gray;
+      }
     }
   }
 }

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

@@ -1,17 +1,20 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-link-block {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-micro;
-  text-align: center;
+@layer seldon.components {
+  .#{$px}-link-block {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-micro;
+    text-align: center;
 
-  &__link .#{$px}-text {
-    font-variation-settings: 'wght' 400;
-  }
+    &__link .#{$px}-text {
+      font-variation-settings: 'wght' 400;
+    }
 
-  &__description.#{$px}-text {
-    margin-bottom: 0;
+    &__description.#{$px}-text {
+      margin-bottom: 0;
+    }
   }
 }